The following example shows how you can convert a Java formatted date (Wed Jul 22 14:29:30 PST 2009) and convert the timezone into an ActionScript [...]]]> In a previous example, “Parsing ISO dates with Flex and ActionScript”, we saw how to parse ISO formatted dates (2008-01-25T06:14:23Z) and convert them into an ActionScript 3.0 Date object.

The following example shows how you can convert a Java formatted date (Wed Jul 22 14:29:30 PST 2009) and convert the timezone into an ActionScript 3.0 friendly format (UTC-0700) so you can use the static Date.parse() method to convert them into an ActionScript 3.0 Date object.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/27/parsing-dates-with-timezones-in-flex/ -->
<mx:Application name="Date_parse_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            private const datStr1:String = "Wed Jul 22 14:29:30 PST 2009";
            private const datStr2:String = "Wed Jul 22 14:29:30 EDT 2009";
 
            private var timeZones:Array = [
                /* Hawaii-Aleutian Standard/Daylight Time */
                {abbr:"HAST", zone:"UTC-1000"},
                {abbr:"HADT", zone:"UTC-0900"},
                /* Alaska Standard/Daylight Time */
                {abbr:"AKST", zone:"UTC-0900"},
                {abbr:"ASDT", zone:"UTC-0800"},
                /* Pacific Standard/Daylight Time */
                {abbr:"PST", zone:"UTC-0800"},
                {abbr:"PDT", zone:"UTC-0700"},
                /* Mountain Standard/Daylight Time */
                {abbr:"MST", zone:"UTC-0700"},
                {abbr:"MDT", zone:"UTC-0600"},
                /* Central Standard/Daylight Time */
                {abbr:"CST", zone:"UTC-0600"},
                {abbr:"CDT", zone:"UTC-0500"},
                /* Eastern Standard/Daylight Time */
                {abbr:"EST", zone:"UTC-0500"},
                {abbr:"EDT", zone:"UTC-0400"},
                /* Atlantic Standard/Daylight Time */
                {abbr:"AST", zone:"UTC-0400"},
                {abbr:"ADT", zone:"UTC-0300"},
                /* Newfoundland Standard/Daylight Time */
                {abbr:"NST", zone:"UTC-0330"},
                {abbr:"NDT", zone:"UTC-0230"}
            ];
 
            private function simpleDateParser(value:String):Date {
                var dat:String = value;
                if (isNaN(Date.parse(dat))) {
                    var idx:uint;
                    var len:uint = timeZones.length
                    var obj:Object;
                    for (idx=0; idx<len; idx++) {
                        obj = timeZones[idx];
                        if (dat.indexOf(obj.abbr) > -1) {
                            dat = dat.replace(obj.abbr, obj.zone);
                            return new Date(Date.parse(dat));
                        }
                    }
                }
                // TimeZone not found, or conversion not needed.
                return new Date(Date.parse(dat));
            }
        ]]>
    </mx:Script>
 
    <mx:VBox>
        <mx:Label text="{datStr1}" fontWeight="bold" />
        <mx:Label initialize="event.currentTarget.text = simpleDateParser(datStr1);" />
        <mx:HRule width="100%" />
        <mx:Label text="{datStr2}" fontWeight="bold" />
        <mx:Label initialize="event.currentTarget.text = simpleDateParser(datStr2);" />
    </mx:VBox>
 
</mx:Application>

 

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex [...]]]> The following example shows how you can use Regular Expressions to globally replace carriage returns and line feeds with the newline character (“\n”) in a string using Flex.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/16/replacing-carriage-returns-and-line-feeds-with-newline-characters-using-regular-expressions/ -->
<Application name="RegExp_crlf_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <Style>
        FxTextArea {
            textAlign: justify;
            textAlignLast: start;
        }
    </Style>

    <Script>
        <![CDATA[
            private var loremTEXT2:String;

            private function init():void {
                var crlf:String = String.fromCharCode(13, 10);
                var regEx:RegExp = new RegExp(crlf, "g");
                loremTEXT2 = loremTEXT.replace(regEx, "\\n");
            }
        ]]>
    </Script>

    <Declarations>
        <String id="loremTEXT" source="data/lorem.txt" />
        <String id="loremHTML" source="data/lorem.html" />
    </Declarations>

    <ApplicationControlBar dock="true">
        <FxButton label="TEXT" click="textArea.text = loremTEXT;" />
        <FxButton label="HTML" click="textArea.content = loremHTML;" />
        <Spacer width="20" />
        <FxButton label="TEXT (workaround)" click="textArea.text = loremTEXT2;" />
    </ApplicationControlBar>

    <FxTextArea id="textArea"
            fontSize="12"
            marginBottom="40"
            percentWidth="100"
            height="100%">
    </FxTextArea>

</Application>

This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.

 

Full code after the jump.

View MXML

Full code after the jump.

View MXML

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed [...]]]> The following example shows how you can set mouse cursors in Flash Player 10 by setting the Mouse object’s cursor property to one of the static constants in the MouseCursor class.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/03/setting-mouse-cursors-in-flash-player-10/ -->
<FxApplication name="Mouse_cursor_test"
        xmlns="http://ns.adobe.com/mxml/2009">
    <layout>
        <BasicLayout />
    </layout>

    <HGroup horizontalCenter="0" top="10">
        <FxButton label="{MouseCursor.ARROW}"
                click="Mouse.cursor = MouseCursor.ARROW;" />
        <FxButton label="{MouseCursor.AUTO}"
                click="Mouse.cursor = MouseCursor.AUTO;" />
        <FxButton label="{MouseCursor.BUTTON}"
                click="Mouse.cursor = MouseCursor.BUTTON;" />
        <FxButton label="{MouseCursor.HAND}"
                click="Mouse.cursor = MouseCursor.HAND;" />
        <FxButton label="{MouseCursor.IBEAM}"
                click="Mouse.cursor = MouseCursor.IBEAM;" />
    </HGroup>

    <VGroup horizontalCenter="0" verticalCenter="0">
        <TextInput text="mx:TextInput" />
        <Button label="mx:Button" buttonMode="true" />
    </VGroup>

</FxApplication>

View source is enabled in the following example.

This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.

 

Full code after the jump.

View MXML

You can also find the version number by doing one of the following:
(a) Viewing the flex-sdk-description.xml file in your Flex SDK’s root directory:

The following example shows how you can style the Flex .errorTip style dynamically using ActionScript using [...]]]> In a previous example, “Changing the background color of an error tip in Flex”, we saw how you could change the background color of a Flex error tip by setting the borderColor style on the .errorTip CSS selector.

The following example shows how you can style the Flex .errorTip style dynamically using ActionScript using the static StyleManager.getStyleDeclaration() and setStyle() methods.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/26/dynamically-styling-error-tips-in-flex/ -->
<mx:Application name="errorTip_borderColor_test_2"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            private function comboBox_valueCommit(evt:FlexEvent):void {
                if (comboBox.selectedIndex > -1) {
                    var value:String = comboBox.selectedItem.data;
                    var cssObj:CSSStyleDeclaration;
                    cssObj = StyleManager.getStyleDeclaration(".errorTip");
                    cssObj.setStyle("borderColor", value);
                    textInput.setStyle("errorColor", value);
                    textInput.errorString = errStr;
                } else {
                    textInput.errorString = "";
                }
            }

            private function button_click(evt:MouseEvent):void {
                comboBox.selectedIndex = -1;
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Red"    data="red" />
        <mx:Object label="Orange" data="haloOrange" />
        <mx:Object label="Yellow" data="yellow" />
        <mx:Object label="Green"  data="haloGreen" />
        <mx:Object label="Blue"   data="haloBlue" />
    </mx:Array>

    <mx:String id="errStr">Oh noes, an errata!</mx:String>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="errorColor:">
                <mx:ComboBox id="comboBox"
                        dataProvider="{arr}"
                        prompt="Please select a color:"
                        valueCommit="comboBox_valueCommit(event);" />
            </mx:FormItem>
        </mx:Form>
        <mx:Spacer width="100%" />
        <mx:Button label="Deselect ComboBox"
                click="button_click(event);" />
    </mx:ApplicationControlBar>

    <mx:TextInput id="textInput" />

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

Full code after the jump.

In the following example, note that we must include a reference to each of the components we may need to create at runtime in a [...]]]> The following example shows how you can create a new Flex component instance by using its class name by calling the getDefintionByName() method.

Full code after the jump.

In the following example, note that we must include a reference to each of the components we may need to create at runtime in a variable, dummyArr. This way, the components we need are compiled in to the SWF so they can be created at runtime.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/28/creating-a-component-instance-by-class-name-in-actionscript-30/ -->
<mx:Application name="getDefinitionByName_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            import flash.utils.getDefinitionByName;
            import mx.controls.*;

            /**
             * Create references to component classes so the classes get
             * included in the SWF document.
             */
            private var dummyArr:Array = [Button, CheckBox, ComboBox,
                                            List, TextInput, TextArea];

            private function createBtn_click(evt:MouseEvent):void {
                var className:String = comboBox.selectedItem.toString();
                // Convert class name to Class object.
                var cls:Class = getDefinitionByName(className) as Class;

                // Create a new instance of the class.
                var instance:UIComponent = new cls();
                if (instance) {
                    switch (instance.className) {
                        case "Button":
                            Button(instance).label = "I am a Button";
                            break;
                        case "CheckBox":
                            CheckBox(instance).label = "I am a CheckBox";
                            break;
                        case "ComboBox":
                            ComboBox(instance).dataProvider = ["I am a ComboBox"];
                            break;
                        case "List":
                            List(instance).dataProvider = ["I am a List"];
                            instance.width = 100;
                            break;
                        case "TextInput":
                            TextInput(instance).text = "I am a TextInput";
                            break;
                        case "TextArea":
                            TextArea(instance).text = "I am a TextArea";
                            break;
                    }

                    // Remove all children and add new child.
                    canvas.removeAllChildren();
                    canvas.addChild(instance);
                }
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain"
                defaultButton="{createBtn}">
            <mx:FormItem label="Class:"
                    direction="horizontal">
                <mx:ComboBox id="comboBox">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:String>mx.controls.Button</mx:String>
                            <mx:String>mx.controls.CheckBox</mx:String>
                            <mx:String>mx.controls.ComboBox</mx:String>
                            <mx:String>mx.controls.List</mx:String>
                            <mx:String>mx.controls.TextInput</mx:String>
                            <mx:String>mx.controls.TextArea</mx:String>
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
                <mx:Button id="createBtn"
                        label="Create"
                        click="createBtn_click(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Canvas id="canvas"
            horizontalCenter="0"
            verticalCenter="0" />

</mx:Application>

View source is enabled in the following example.