Flex Examples » className http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Creating a custom component using the Component tag in Flex 4 http://blog.flexexamples.com/2009/11/05/creating-a-custom-component-using-the-component-tag-in-flex-4/ http://blog.flexexamples.com/2009/11/05/creating-a-custom-component-using-the-component-tag-in-flex-4/#comments Thu, 05 Nov 2009 15:14:15 +0000 Peter deHaan http://blog.flexexamples.com/?p=2152 The following example shows how you can create a simple, inline custom component in Flex 4 using the Component tag and className property and then instantiating new instances using ActionScript.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/11/05/creating-a-custom-component-using-the-component-tag-in-flex-4/ --> <s:Application name="Spark_Component_className_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">   <fx:Script> <![CDATA[ import mx.graphics.SolidColor;   private function init():void [...]]]> The following example shows how you can create a simple, inline custom component in Flex 4 using the Component tag and className property and then instantiating new instances using ActionScript.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/05/creating-a-custom-component-using-the-component-tag-in-flex-4/ -->
<s:Application name="Spark_Component_className_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <fx:Script>
        <![CDATA[
            import mx.graphics.SolidColor;
 
            private function init():void {
                var c:FancyCircle = new FancyCircle();
                c.fill = new SolidColor(Math.random() * 0xFFFFFF /* color */,
                                        Math.random() /* alpha */);
                gr.addElement(c);
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:Component className="FancyCircle">
            <s:Ellipse>
                <s:stroke>
                    <s:SolidColorStroke />
                </s:stroke>
            </s:Ellipse>
        </fx:Component>
    </fx:Declarations>
 
    <s:Panel id="pnl" horizontalCenter="0" verticalCenter="0">
        <s:controlBarContent>
            <s:Button id="btn" label="Add Circle" click="init();" />
        </s:controlBarContent>
        <s:Scroller verticalScrollPolicy="on">
            <s:Group id="gr">
                <s:layout>
                    <s:TileLayout requestedColumnCount="4" requestedRowCount="3" columnWidth="100" rowHeight="100" />
                </s:layout>
            </s:Group>
        </s:Scroller>
    </s:Panel>
 
</s:Application>

Or, if you want to create a new instance of your custom component using MXML, you can create a local namespace, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/05/creating-a-custom-component-using-the-component-tag-in-flex-4/ -->
<s:Application name="Spark_Component_className_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:local="*">
 
    <fx:Declarations>
        <fx:Component className="FancyCircle">
            <s:Ellipse>
                <s:stroke>
                    <s:SolidColorStroke />
                </s:stroke>
            </s:Ellipse>
        </fx:Component>
    </fx:Declarations>
 
    <s:Panel id="pnl" horizontalCenter="0" verticalCenter="0">
        <s:Scroller verticalScrollPolicy="on">
            <s:Group id="gr">
                <s:layout>
                    <s:TileLayout requestedColumnCount="4"
                            requestedRowCount="3"
                            columnWidth="100" rowHeight="100" />
                </s:layout>
                <local:FancyCircle>
                    <local:fill>
                        <s:SolidColor color="red" />
                    </local:fill>
                </local:FancyCircle>
                <local:FancyCircle>
                    <local:fill>
                        <s:SolidColor color="haloOrange" />
                    </local:fill>
                </local:FancyCircle>
                <local:FancyCircle>
                    <local:fill>
                        <s:SolidColor color="yellow" />
                    </local:fill>
                </local:FancyCircle>
                <local:FancyCircle>
                    <local:fill>
                        <s:SolidColor color="haloGreen" />
                    </local:fill>
                </local:FancyCircle>
                <local:FancyCircle>
                    <local:fill>
                        <s:SolidColor color="haloBlue" />
                    </local:fill>
                </local:FancyCircle>
            </s:Group>
        </s:Scroller>
    </s:Panel>
 
</s:Application>

This entry is based on a beta version of the Flex 4 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 4 SDK.

 
]]> http://blog.flexexamples.com/2009/11/05/creating-a-custom-component-using-the-component-tag-in-flex-4/feed/ 2 Creating an MXML based icon for the Halo LinkButton control in Flex 4 http://blog.flexexamples.com/2009/10/29/creating-an-mxml-based-icon-for-the-halo-linkbutton-control-in-flex-4/ http://blog.flexexamples.com/2009/10/29/creating-an-mxml-based-icon-for-the-halo-linkbutton-control-in-flex-4/#comments Thu, 29 Oct 2009 13:49:33 +0000 Peter deHaan http://blog.flexexamples.com/?p=2114 The following example shows how you can create an MXML-based icon for the Halo/MX LinkButton control in Flex 4 by creating a custom component using the <fx:Component/> tag and setting the className property.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/10/29/creating-an-mxml-based-icon-for-the-halo-linkbutton-control-in-flex-4/ --> <s:Application name="Halo_LinkButton_icon_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo">   <fx:Declarations> <fx:Component className="ico"> <s:Graphic> [...]]]> The following example shows how you can create an MXML-based icon for the Halo/MX LinkButton control in Flex 4 by creating a custom component using the <fx:Component/> tag and setting the className property.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/29/creating-an-mxml-based-icon-for-the-halo-linkbutton-control-in-flex-4/ -->
<s:Application name="Halo_LinkButton_icon_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Declarations>
        <fx:Component className="ico">
            <s:Graphic>
                <s:states>
                    <s:State name="up" />
                    <s:State name="over" />
                    <s:State name="down" />
                </s:states>
                <s:Ellipse  width="8" height="8">
                    <s:fill>
                        <s:SolidColor color="red" color.over="green" color.down="blue" />
                    </s:fill>
                </s:Ellipse>
            </s:Graphic>
        </fx:Component>
    </fx:Declarations>
 
    <mx:LinkButton id="lnkBtn"
            label="Halo LinkButton"
            icon="ico"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

You can also set the icon style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/29/creating-an-mxml-based-icon-for-the-halo-linkbutton-control-in-flex-4/ -->
<s:Application name="Halo_LinkButton_icon_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|LinkButton {
            icon: ClassReference("ico");
        }
    </fx:Style>
 
    <fx:Declarations>
        <fx:Component className="ico">
            <s:Graphic>
                <s:states>
                    <s:State name="up" />
                    <s:State name="over" />
                    <s:State name="down" />
                </s:states>
                <s:Ellipse  width="8" height="8">
                    <s:fill>
                        <s:SolidColor color="red" color.over="green" color.down="blue" />
                    </s:fill>
                </s:Ellipse>
            </s:Graphic>
        </fx:Component>
    </fx:Declarations>
 
    <mx:LinkButton id="lnkBtn"
            label="Halo LinkButton"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

Or you can set the icon style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/29/creating-an-mxml-based-icon-for-the-halo-linkbutton-control-in-flex-4/ -->
<s:Application name="Halo_LinkButton_icon_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <s:Button id="btn"
                label="Set icon"
                click="btn_clickHandler(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function btn_clickHandler(evt:MouseEvent):void {
                lnkBtn.setStyle("icon", ico);
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:Component className="ico">
            <s:Graphic>
                <s:states>
                    <s:State name="up" />
                    <s:State name="over" />
                    <s:State name="down" />
                </s:states>
                <s:Ellipse  width="8" height="8">
                    <s:fill>
                        <s:SolidColor color="red" color.over="green" color.down="blue" />
                    </s:fill>
                </s:Ellipse>
            </s:Graphic>
        </fx:Component>
    </fx:Declarations>
 
    <mx:LinkButton id="lnkBtn"
            label="Halo LinkButton"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

This entry is based on a beta version of the Flex 4 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 4 SDK.

 
]]> http://blog.flexexamples.com/2009/10/29/creating-an-mxml-based-icon-for-the-halo-linkbutton-control-in-flex-4/feed/ 0 Setting a custom skin on a Spark Button control in Flex 4 http://blog.flexexamples.com/2009/03/04/setting-a-custom-skin-on-an-fxbutton-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/03/04/setting-a-custom-skin-on-an-fxbutton-control-in-flex-gumbo/#comments Wed, 04 Mar 2009 15:42:53 +0000 Peter deHaan http://blog.flexexamples.com/2009/03/04/setting-a-custom-skin-on-an-fxbutton-control-in-flex-gumbo/ The following example shows how you can set a custom skin on an Spark Button control in Flex 4 by setting the skinClass style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/03/04/setting-a-custom-skin-on-an-fxbutton-control-in-flex-gumbo/ --> <s:Application name="Spark_Button_skinClass_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:layout> <s:BasicLayout /> </s:layout>   <s:Button label="Spark Button" skinClass="skins.CustomButtonSkin" left="300" top="30" />   </s:Application>

And the custom Spark Button [...]]]> The following example shows how you can set a custom skin on an Spark Button control in Flex 4 by setting the skinClass style.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/04/setting-a-custom-skin-on-an-fxbutton-control-in-flex-gumbo/ -->
<s:Application name="Spark_Button_skinClass_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:BasicLayout />
    </s:layout>
 
    <s:Button label="Spark Button"
            skinClass="skins.CustomButtonSkin"
            left="300" top="30" />
 
</s:Application>

And the custom Spark Button skin, skins/CustomButtonSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/04/setting-a-custom-skin-on-an-fxbutton-control-in-flex-gumbo/ -->
<s:SparkSkin name="CustomButtonSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        minWidth="21" minHeight="21"
        alpha.disabled="0.5">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
 
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
 
    <s:Path data.up="M 0 0 L 10 0 L 10 10 L 0 10 Z"
          data.over="M 0 0 L 20 0 L 20 20 L 0 20 Z"
          data.down="M 0 0 L 30 0 L 30 30 L 0 30 Z">
        <s:fill>
            <s:SolidColor color="#000000" 
                          color.down="red"/>
        </s:fill>
    </s:Path>
 
</s:SparkSkin>

View source is enabled in the following example.

You can also set the skinClass style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/04/setting-a-custom-skin-on-an-fxbutton-control-in-flex-gumbo/ -->
<s:Application name="Spark_Button_skinClass_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:BasicLayout />
    </s:layout>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|Button {
            skinClass: ClassReference("skins.CustomButtonSkin");
        }
    </fx:Style>
 
    <s:Button label="Spark Button"
            left="300" top="30" />
 
</s:Application>

Or, you can set the skinClass style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/04/setting-a-custom-skin-on-an-fxbutton-control-in-flex-gumbo/ -->
<s:Application name="Spark_Button_skinClass_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:BasicLayout />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import skins.CustomButtonSkin;
 
            protected function button1_clickHandler(evt:MouseEvent):void {
                button1.setStyle("skinClass", CustomButtonSkin);
            }
        ]]>
    </fx:Script>
 
 
    <s:Button id="button1"
            label="Spark Button"
            left="300" top="30"
            click="button1_clickHandler(event);" />
 
</s:Application>

Finally, you can also define the skin directly in the MXML file by wrapping the Skin object in a <Component/> tag within the <Declarations/> section, as seen in the following example (big thanks to my co-worker Ryan Frishberg for the heads up on this solution):

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/04/setting-a-custom-skin-on-an-fxbutton-control-in-flex-gumbo/ -->
<s:Application name="Spark_Button_skinClass_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:BasicLayout />
    </s:layout>
 
    <fx:Declarations>
        <fx:Component className="InlineCustomButtonSkin">
            <s:SparkSkin name="CustomButtonSkin"
                    xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark" 
                    xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
                    minWidth="21" minHeight="21"
                    alpha.disabled="0.5">
                <!-- states -->
                <s:states>
                    <s:State name="up" />
                    <s:State name="over" />
                    <s:State name="down" />
                    <s:State name="disabled" />
                </s:states>
 
                <!-- host component -->
                <fx:Metadata>
                    [HostComponent("spark.components.Button")]
                </fx:Metadata>
 
                <s:Path data.up="M 0 0 L 10 0 L 10 10 L 0 10 Z"
                        data.over="M 0 0 L 20 0 L 20 20 L 0 20 Z"
                        data.down="M 0 0 L 30 0 L 30 30 L 0 30 Z">
                    <s:fill>
                        <s:SolidColor color="#000000" 
                                      color.down="red"/>
                    </s:fill>
                </s:Path>
            </s:SparkSkin>
        </fx:Component>
    </fx:Declarations>
 
    <s:Button label="Spark Button"
              skinClass="InlineCustomButtonSkin"
              left="300" top="30" />
 
</s:Application>

This entry is based on a beta version of the Flex 4 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 4 SDK.

 
]]> http://blog.flexexamples.com/2009/03/04/setting-a-custom-skin-on-an-fxbutton-control-in-flex-gumbo/feed/ 4 Creating a component instance by class name in ActionScript 3.0 http://blog.flexexamples.com/2008/08/28/creating-a-component-instance-by-class-name-in-actionscript-30/ http://blog.flexexamples.com/2008/08/28/creating-a-component-instance-by-class-name-in-actionscript-30/#comments Fri, 29 Aug 2008 05:49:44 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/28/creating-a-component-instance-by-class-name-in-actionscript-30/ 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 [...]]]> 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.

 
]]> http://blog.flexexamples.com/2008/08/28/creating-a-component-instance-by-class-name-in-actionscript-30/feed/ 10