I was trying to look for the Style Explorer for Flex 4 but it seems that the closest alternative right now would be...
 |
| The contents shown in the above are taken from 'Adobe' website. |
| You can click on the button shown in the above to download and install the desktop application 'Tour de Flex' too. |
Sometimes renaming a list of files can be pretty annoying and it gets more and more frustrating when there are a lot of files. And this can be pretty disturbing to the type of people that prefer to rename their filename with something meaningful. Therefore you can consider the following softwares.
Well, basically if you are using a Windows server or you are doing a lot of development work, you might be running a lot of services locally. (Ex: Apache, WAMP, etc...) Imagine how much time you can save by creating a Service that will start these programs automatically.
| Steps for creating a new Windows Service Before moving on any further, you will need to grab hold of these 2 files first. They are instsrv.exe and srvany.exe. Click here to download the files now. Click here to download the original package from Microsoft. (If you are using the package from Microsoft, you will need to extract the files from the package.) |
 |
|
Step 1 - Open up the Windows Start menu, enter cmd into the Search programs and files field, Right-Click on the program cmd.exe and select Run as Administrator. |
 |
|
Step 2 - Enter the following into the Command Prompt window. "{yourPath}\instsrv.exe" {name} "{yourPath}\srvany.exe" Replace {yourPath} with the directory that has the files instsrv.exe and srvany.exe. Replace {name} with the Name of the new Service that you are going to create. And there you go, you have successfully created a new Empty Service. |
 |
|
Step 3 - Open up the Windows Start menu, enter regedit into the Search programs and files field and run the program regedit.exe. |
 |
|
Step 4 - Look for the new Service under the following directory. HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\{name} Replace {name} with the Name of the new Service that you have created. |
 |
|
Step 5 - After selecting the new Service that you have created, Right-Click and create a new Key. Rename the new Key as Parameters |
 |
| Step 6 - Under Parameters add a few new String Value. |
 | ||
| Step 7 - Entering some values | ||
| Name | Type | Data |
| Application | REG_SZ | {the full path of your application} Ex: G:\service\run_notepad.bat |
| AppDirectory | REG_SZ | {the path to your application} Ex: G:\service\ |
 |
|
Step 8 - Open up the Windows Start menu, enter services into the Search programs and files field and run the program Services. |
 |
| Step 9 - Locate and open up the new Service that you have created. |
 |
|
Step 10 - You can set the Startup Type to either Automatic or Automatic (Delayed start). (Automatic will start the Service when Windows boots up. Automatic (Delayed start) will start 2 minutes after the last Automatic Service has been executed.) On top of that, some programs will only run smoothly with a particular user account. That's where the Log On tab comes in. You can specify the User Account Credentials that you are going to use when you run this Service. |
 |
|
Step Remove - To remove a Service, type the following command in Command Prompt window. "{yourPath}\instsrv.exe" {name} REMOVE Replace {yourPath} with the directory that has the file instsrv.exe. Replace {name} with the Name of the Service that you are going to delete. And there you go, you have successfully removed a Service. |
I was trying to figure out a way to access the individual buttons of the ButtonBar yesterday. After spending a bit of time working on it, I finally managed to do it. Here's a solution to the problem.
Here's the source code of my main application - SimpleButtonBarSelect.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="creationCompleteEvent(event)">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import mx.events.IndexChangedEvent;
import spark.components.ButtonBarButton;
import spark.events.IndexChangeEvent;
//A set of data that will be used to populate the ButtonBar
[Bindable]
private var dummyData:ArrayCollection = new ArrayCollection(
[{label: "1", value:9},
{label: "2", value:8},
{label: "3", value:7},
{label: "4", value:6},
{label: "5", value:5},
{label: "6", value:4},
{label: "7", value:3},
{label: "8", value:2},
{label: "9", value:1}]);
//Upon clicking on one of the checkbox,
protected function clickEvent(event:MouseEvent):void
{
var isOddDisable:Boolean = chkOdd.selected;
var isEvenDisable:Boolean = chkEven.selected;
var tempButton:ButtonBarButton;
var tempLabelNum:Number;
//Loop through all the buttons of the ButtonBar
for(var i:int = 0; i < btnBar.dataGroup.numElements; i ++)
{
tempButton = ButtonBarButton(btnBar.dataGroup.getElementAt(i));
tempLabelNum = Number(tempButton.label);
if(tempLabelNum % 2 == 0)
{
//If the label is a odd number
//check it against the value of the chkOdd checkbox
tempButton.enabled = !isEvenDisable;
}else{
//If the label is a even number
//check it against the value of the chkEven checkbox
tempButton.enabled = !isOddDisable;
}
}
}
//Upon clicking on one of the buttons of the ButtonBar, we
//will update the 'Result:"
protected function changeEvent(event:IndexChangeEvent):void
{
var tempBar:ButtonBar = ButtonBar(event.target);
var tempObj:* = tempBar.selectedItem;
lblResult.text = "Result: Button " + tempObj.label +
" with a value of " + tempObj.value + " has been selected."
}
//Dispatch a change event at the start of the application since
//one of the buttons are selected by default.
protected function creationCompleteEvent(event:FlexEvent):void
{
btnBar.dispatchEvent(new IndexChangeEvent(IndexChangeEvent.CHANGE));
}
]]>
</fx:Script>
<s:VGroup width="100%"
height="100%"
verticalAlign="middle"
horizontalAlign="center">
<s:Label text="Click on the following to disable the respective buttons."/>
<s:HGroup width="100%" >
<s:Spacer width="100%"/>
<s:CheckBox id="chkOdd"
label="Disable Odd Buttons"
click="clickEvent(event)"/>
<s:CheckBox id="chkEven"
label="Disable Even Buttons"
click="clickEvent(event)"/>
<s:Spacer width="100%"/>
</s:HGroup>
<s:ButtonBar id="btnBar"
dataProvider="{dummyData}"
requireSelection="true"
labelField="label"
change="changeEvent(event)"/>
<s:Label id="lblResult" text="Result:"/>
</s:VGroup>
</s:Application>
* Click here for the demo shown in this post.Not sure if any of you out there have been playing or using charts in Flex, but I have come across this simple looking problem the other day. The problem would be the border around the DataTip needs to be much more thicker. Although it might appear to be pretty easy, but it ended up to be a much more sophisticated problem.
Here's the source code of my main application - SimpleDataTipBorder.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="creationCompleteEvent(event)">
<fx:Declarations>
<!-- We are specifying the effect for the pie chart here. -->
<mx:SeriesInterpolate id="selectEffect"
easingFunction="{Elastic.easeOut}"
duration="1000"
effectEnd="effectEndEvent(event)"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.charts.HitData;
import mx.charts.events.ChartItemEvent;
import mx.charts.series.items.PieSeriesItem;
import mx.collections.ArrayCollection;
import mx.effects.easing.Elastic;
import mx.events.EffectEvent;
import mx.events.FlexEvent;
//Here's our data for the pie chart.
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Expense:"Taxes", Amount:2000},
{Expense:"Rent", Amount:1000},
{Expense:"Bills", Amount:100},
{Expense:"Car", Amount:450},
{Expense:"Gas", Amount:100},
{Expense:"Food", Amount:200}
]);
//A timer to reset the datatip after 1 sec.
private var chartTimer:Timer = null;
// Create a Array of explode radii.
public var explodingArray:Array = [];
protected function creationCompleteEvent(event:FlexEvent):void
{
//set the datatip renderer of the pie chart to the
//custom datatip
pie.setStyle("dataTipRenderer", CustomDataTip);
}
//Upon clicking on the pie chart, the selected chart item will
//be explode from the pie chart.
protected function pie_itemClickHandler(event:ChartItemEvent):void
{
var tempArray:Array = [];
tempArray[event.hitData.id] = 0.2;
pieSeries.perWedgeExplodeRadius = tempArray;
//hide the datatip of the pie chart when it animates.
pie.showDataTips = false;
//refresh the data, which is needed to enforce the animation
expenses.refresh();
}
//Show the datatip again after all the animations. This is
//because if you enable the display of dataip of the chart
//immediately, the color of the datatip will be wrong.
protected function effectEndEvent(event:EffectEvent):void
{
if(chartTimer)
{
chartTimer.stop();
}
chartTimer = new Timer(1000,1);
chartTimer.addEventListener(TimerEvent.TIMER, chartTimerEvent);
chartTimer.start();
}
private function chartTimerEvent(event:Event):void
{
pie.showDataTips = true;
}
]]>
</fx:Script>
<s:BorderContainer width="100%"
height="100%">
<s:VGroup verticalAlign="middle"
horizontalAlign="center"
width="100%"
height="100%">
<s:VGroup>
<mx:PieChart id="pie"
dataProvider="{expenses}"
itemClick="pie_itemClickHandler(event)"
showDataTips="true">
<mx:series>
<!--Apply the Array of radii to the PieSeries.-->
<mx:PieSeries id="pieSeries"
field="Amount"
nameField="Expense"
showDataEffect="selectEffect"
labelPosition="callout"/>
</mx:series>
</mx:PieChart>
</s:VGroup>
</s:VGroup>
</s:BorderContainer>
</s:Application>
Here's the source code of my custom DataTip Class - CustomDataTip.as
package
{
import flash.display.Graphics;
import flash.geom.Rectangle;
import mx.charts.chartClasses.DataTip;
import mx.charts.chartClasses.GraphicsUtilities;
import mx.graphics.IFill;
import mx.graphics.SolidColor;
import mx.graphics.SolidColorStroke;
import mx.graphics.Stroke;
public class CustomDataTip extends DataTip
{
public function CustomDataTip()
{
super();
}
//We are overwriting the updateDisplayList of the
//datatip.
override protected function updateDisplayList(w:Number,
h:Number):void
{
super.updateDisplayList(w, h);
var g:Graphics = graphics;
g.clear();
var xpos:Number = 0;
var ypos:Number = 0;
g.moveTo(measuredWidth, 2);
var _shadowFill:IFill =
IFill(new SolidColor(0xAAAAAA, 0.55));
_shadowFill.begin(g,
new Rectangle(xpos, ypos,
measuredWidth, measuredHeight),null);
g.lineTo(measuredWidth + 2, 2);
g.lineTo(measuredWidth + 2, measuredHeight + 2);
g.lineTo(2,measuredHeight + 2);
g.lineTo(2,measuredHeight);
g.lineTo(measuredWidth - 2, measuredHeight - 2);
g.lineTo(measuredWidth - 2, 2);
_shadowFill.end(g);
var fill:IFill = IFill(
new SolidColor(getStyle("backgroundColor"), 0.8));
//You will specify the thickness of the border of the
//data tip over here.
//For older version of Flex use this
//var stroke:Stroke = new Stroke(data.contextColor, 4, 1);
//instead of this
var stroke:SolidColorStroke =
new SolidColorStroke(data.contextColor, 4, 1);
GraphicsUtilities.fillRect(g, xpos, ypos, measuredWidth,
measuredHeight, fill, stroke);
}
}
}
* Click here for the demo shown in this post.I have finally move from Windows XP to Windows 7. When I was installing all the individual software and hardware devices into the new system, I realized that on Windows 7, you can only use 1 particular playback device at any point of time. Therefore here's a solution for you if you are using a set of speakers and at the same time, you are also using a TV/monitor that comes with a set of speakers.
 |
| Right-click the sound icon at the bottom right of your screen. Select the option 'Playback devices'. |
 |
| Make sure that your 'Speakers' were 'Set as Default Device' and enabled. (Note the device '227E4QH-1' is my monitor that comes with speakers.) |
 |
|
Go to the 'Recording' tab and show the right-click menu and ensure that the options 'Show Disabled Devices' and 'Show Disconnected Devices' are selected. |
 |
|
Double-Click the device 'Stereo Mix' and go to the 'Listen' tab. Change the dropdown menu for 'Playback through this device:' to your monitor. (As for my case, I will change it to '227E4QH-1'.) Apply all changes and you are done. Start playing some videos to test out the audio settings. :D |
Well, I was working the other day and one of my colleagues told me that the div that has a background colour with an opacity of 70 doesn't work in IE. After a bit of Googling and a bit of trial and error, I managed to get it working. (It works in Google Chrome, Mozilla Firefox, Internet Explorer 7, 8 and 9. However, the solution doesn't really work with Internet Explorer with different standards.)
<meta http-equiv="X-UA-Compatible" content="IE=8" >The following codes are meant for super old browsers that doesn't supports the css RGBa(3 primary colours and alpha).
/* Fallback for web browsers that doesn't support RGBa */ background: rgb(0, 0, 0) transparent;The following codes are meant for super new browsers that supports the css RGBa(3 primary colours and alpha). (For example: latest Mozilla Firefox, Google Chrome, etc.)
/* RGBa with 0.7 opacity */ background: rgba(0, 0, 0, 0.7);The following codes are meant for the older Internet Explorers. Would need to add the condition <!--[if lte IE 8]>, because browsers like Internet Explorer 9 will apply both filters and RGBa. =.=""
<!--[if lte IE 8]>
<style>
#mainbg1 {
/* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000)";
}
</style>
<![endif]-->
And here's all the source codes at one glance.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=8" >
<title>Test</title>
<style type="text/css" media="screen">
body{
margin: 0px;
background-color:#00FF00;
}
#mainbg {
width:100%;
height:1000px;
text-align:center;
position:absolute;
}
#mainbg1 {
width:500px;
height:500px;
margin: 0px auto;
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0) transparent;
/* RGBa with 0.7 opacity */
background: rgba(0, 0, 0, 0.7);
}
</style>
<!--[if lte IE 8]>
<style>
#mainbg1 {
/* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000)";
}
</style>
<![endif]-->
</head>
<body>
<div id="mainbg">
<div id="mainbg1">
</div>
</div>
</body>
</html>
* Click here for the demo shown in this post.