Setting the selected index of a Flex LinkBar control

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Array id="arr"> <mx:Object label="One" /> <mx:Object label="Two" /> <mx:Object label="Three" /> <mx:Object label="Four" /> </mx:Array> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="selectedIndex:"> <mx:HSlider id="slider" minimum="0" maximum="{linkBar.dataProvider.length - 1}" liveDragging="true" snapInterval="1" tickInterval="1" dataTipPrecision="0" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:LinkBar id="linkBar" dataProvider="{arr}" selectedIndex="{slider.value}" /> </mx:Application>

Setting the background color and background alpha on a Flex LinkBar control

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Array id="arr"> <mx:Object label="One" /> <mx:Object label="Two" /> <mx:Object label="Three" /> <mx:Object label="Four" /> </mx:Array> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="backgroundAlpha:"> <mx:HSlider id="slider" minimum="0.0" maximum="1.0" value="1.0" liveDragging="true" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:LinkBar id="linkBar" dataProvider="{arr}" backgroundAlpha="{slider.value}" backgroundColor="haloBlue" /> </mx:Application>

Adding checkboxes, radiobuttons, and sub-menus to a Flex PopUpButton control’s pop up menu

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Style> PopUpButton { popUpStyleName: myCustomPopUpStyleName; } .myCustomPopUpStyleName { fontWeight: normal; textAlign: left; } </mx:Style> <mx:XML id="xmlDP"> <root> <node label="The quick brown fox jumped over the lazy dog." /> <node label="Lorem ipsum (disabled)." enabled="false" /> <node type="separator" /> <node label="parent"> <node label="child1" /> </node> <node label="parent (disabled)" enabled="false"> <node label="child1" /> <node label="child2" /> <node label="child3" /> </node> <node type="separator" /> <node label="type=check" id="ch" type="check" toggled="true" /> <node label="type=check" id="ch" type="check" toggled="true" enabled="false" /> <node type="separator" /> <node label="1) type=radio" type="radio" groupName="radioGroup" toggled="true" /> <node label="2) type=radio" type="radio" groupName="radioGroup" /> <node label="3) type=radio" type="radio" groupName="radioGroup" /> <node label="4) type=radio" type="radio" groupName="radioGroup" enabled="false" /> </root> </mx:XML> <mx:Script> <![CDATA[ import mx.controls.Menu; private var menu:Menu; private function init():void { menu = new Menu(); menu.labelField = "@label"; menu.dataProvider = xmlDP; menu.showRoot = false; menu.width = popUpButton.width; popUpButton.popUp = menu; } ]]> </mx:Script> <mx:PopUpButton id="popUpButton" label="Please select an item" openAlways="true" creationComplete="init();" /> </mx:Application>

Changing the default button labels on an Alert control

When I first started playing with the Alert control, this tripped me up for a couple minutes. When trying to override the default text on the Alert control’s buttons, you need to set the Alert.cancelLabel, Alert.noLabel, Alert.okLabel, and/or Alert.yesLabel static properties *before* calling the Alert.show(). Sure, sounds a bit obvious in hindsight, but it is also important to remember that since those values are static, they apply to all Alerts, not just the one specific Alert. So you may have to reset the values back to their defaults once the Alert has been displayed.
Full code after the jump.
The following example displays an Alert dialog and overrides the default values for the Alert.noLabel and Alert.yesLabel properties:

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="showAlert()">
<mx:Script> <![CDATA[ import mx.controls.Alert;
private var a:Alert;
private function showAlert():void { Alert.noLabel = "Non"; Alert.yesLabel = "Oui";
Alert.show("message goes here", "title goes here", Alert.NO Alert.YES); } ]]> </mx:Script>
<mx:Button label="Alert.show()" click="showAlert();" />
</mx:Application>

Embedding fonts for the Flex DateField control

The following example shows how you can embed fonts for use with the DateField control in Flex. Note that we embed both the normal and bold font weights since by default the month and year are bold in the DateChooser sub-component.
Full code after the jump.

<?xml version="1.0" encoding="utf-8"? >
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white" >
<mx:Style > @font-face { src: local("Comic Sans MS"); fontFamily: "ComicEmbedded"; fontWeight: normal; unicode-range: U+0030-U+0039, /* 0-9 */ U+002F-U+002F; /* slash (/) */ }
@font-face { src: local("Comic Sans MS"); fontFamily: "ComicEmbedded"; fontWeight: bold; unicode-range: U+0030-U+0039, /* 0-9 */ U+0041-U+0051, /* Uppercase A-Z */ U+0052-U+007A; /* Lowercase a-z */ } </mx:Style >
<mx:DateField id="dateField" fontFamily="ComicEmbedded" color="red" / >
</mx:Application >

Programmatically opening and closing ComboBox controls in Flex

The following examples show how you can programmatically open and close a ComboBox control’s drop down menu in Flex by using the open() and close() methods of the ComboBox class in Flex.
Full code after the jump.
The following example shows how you can open and close a ComboBox control’s drop down menu by rolling over a Button control on the display list.


<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white">
<mx:ApplicationControlBar dock="true"> <mx:Button label="open" rollOver="comboBox.open();" enabled="false" /> <mx:Button label="close" rollOver="comboBox.close();" enabled="false" /> </mx:ApplicationControlBar>
<mx:ComboBox id="comboBox" openDuration="2000" closeDuration="1000"> <mx:dataProvider> <mx:Array> <mx:Object label="one" /> <mx:Object label="two" /> <mx:Object label="three" /> <mx:Object label="four" /> <mx:Object label="five" /> <mx:Object label="six" /> </mx:Array> </mx:dataProvider> </mx:ComboBox>
</mx:Application>

Embedding fonts for the Flex DateField control 3.0

The following example shows how you can embed fonts for use with the DateField control in Flex. Note that we embed both the normal and bold font weights since by default the month and year are bold in the DateChooser sub-component.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="top"
backgroundColor="white">

<mx:Style>
@font-face {
src: local("Comic Sans MS");
fontFamily: "ComicEmbedded";
fontWeight: normal;
unicode-range: U+0030-U+0039, /* 0-9 */
U+002F-U+002F; /* slash (/) */
}

@font-face {
src: local("Comic Sans MS");
fontFamily: "ComicEmbedded";
fontWeight: bold;
unicode-range:
U+0030-U+0039, /* 0-9 */
U+0041-U+0051, /* Uppercase A-Z */
U+0052-U+007A; /* Lowercase a-z */
}
</mx:Style>

<mx:DateField id="dateField"
fontFamily="ComicEmbedded"
color="red" />

</mx:Application>

Flex Custom Combobox Component

We needed a country combobox that used an array collection as its dataprovider, however would accept a text value (i.e. "Canada") and select the right item based on the text. We extended the combobox control and embedded our countries array collection inside the control for the purpose of this blog entry. Ultimately we will be using an array collection returned by a dataservice.



Several challenges:

searching a specific property of all objects in the arraycollection
binding the selectedText property of our control to a function
setting the default value of the combobox to nothing
I asked around and it was recommended that I loop through the underlying array of the arraycollection. That sounded very microsoft like and I figured there had to be a better way. It was also suggested I add a dummy record to my countries collection with a "Select Country" string and make that element 0. Again, though this would work, it seemed very ms-ugly.

I struggled with this for quite some time but finally got it working. This custom combobox exposes a property called selectedText. I use ChangeWatcher to keep an eye on the property and trigger a function (setCountry) when it changes. I use a sort on the array collection and the use a cursor on the sort to do my searching... much nicer than a nasty loop. I discovered the handy little "prompt" property which I set to "Select Country".

I'll spare you the gory details of my adventure. Here's the final product:



Things to watch out for:

the function called by changewatcher must take an event argument
remember to update the selectedText property on Change event of combobox