Flex Examples » getStyleDeclaration() http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Creating a stacked Spark Form container in Flex Hero http://blog.flexexamples.com/2010/08/30/creating-a-stacked-spark-form-container-in-flex-hero/ http://blog.flexexamples.com/2010/08/30/creating-a-stacked-spark-form-container-in-flex-hero/#comments Mon, 30 Aug 2010 07:12:20 +0000 Peter deHaan http://blog.flexexamples.com/?p=3312 The following example shows how you can create a stacked Spark Form, FormHeading, and FormItem in Spark Hero by setting a the skinClass to the StackedFormSkin, StackedFormHeadingSkin, and StackedFormItem skins respectively.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/08/30/creating-a-stacked-spark-form-container-in-flex-hero/ --> <s:Application name="Spark_Form_skinClass_StackedFormSkin_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:VerticalLayout horizontalAlign="center" verticalAlign="middle" /> </s:layout>   <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace [...]]]> The following example shows how you can create a stacked Spark Form, FormHeading, and FormItem in Spark Hero by setting a the skinClass to the StackedFormSkin, StackedFormHeadingSkin, and StackedFormItem skins respectively.

The following example(s) require Flash Player 10 and the beta Adobe Flex Hero 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 Hero SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+Hero.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/08/30/creating-a-stacked-spark-form-container-in-flex-hero/ -->
<s:Application name="Spark_Form_skinClass_StackedFormSkin_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:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|Form {
            skinClass: ClassReference("spark.skins.spark.StackedFormSkin");
        }
 
        s|FormHeading {
            skinClass: ClassReference("spark.skins.spark.StackedFormHeadingSkin");
        }
 
        s|FormItem {
            skinClass: ClassReference("spark.skins.spark.StackedFormItemSkin");
        }
    </fx:Style>
 
    <s:Form id="frm" defaultButton="{submitBtn}" backgroundColor="#EEEEEE">
        <s:FormHeading label="Spark Form Heading" backgroundColor="haloSilver" />
        <s:FormItem sequenceLabel="1." label="Username:">
            <s:helpContent>
                <s:Label text="user@domain.com" />
            </s:helpContent>
            <s:TextInput id="username" />
        </s:FormItem>
        <s:FormItem sequenceLabel="2." label="Password:">
            <s:helpContent>
                <s:Label text="weak" color="red" />
            </s:helpContent>
            <s:TextInput id="password1" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem sequenceLabel="3." label="Confirm password:">
            <s:helpContent>
                <s:HGroup>
                    <s:Label text="One" color="red" />
                    <s:Label text="Two" color="blue" />
                </s:HGroup>
            </s:helpContent>
            <s:TextInput id="password2" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem>
            <s:layout>
                <s:HorizontalLayout />
            </s:layout>
            <s:Button id="resetBtn" label="Reset" />
            <s:Button id="submitBtn" label="Submit" />
        </s:FormItem>
    </s:Form>
 
</s:Application>

You can also toggle the default Spark FormSkin skin and Spark StackedFormSkin at runtime using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/08/30/creating-a-stacked-spark-form-container-in-flex-hero/ -->
<s:Application name="Spark_Form_skinClass_StackedFormSkin_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:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
    <s:controlBarContent>
        <s:CheckBox id="cb" label="Stacked forms?" change="cb_changeHandler(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import spark.skins.spark.FormHeadingSkin;
            import spark.skins.spark.FormItemSkin;
            import spark.skins.spark.FormSkin;
            import spark.skins.spark.StackedFormHeadingSkin;
            import spark.skins.spark.StackedFormItemSkin;
            import spark.skins.spark.StackedFormSkin;
 
            protected function cb_changeHandler(evt:Event):void {
                var formCSS:CSSStyleDeclaration = styleManager.getStyleDeclaration("spark.components.Form");
                var formHeadingCSS:CSSStyleDeclaration = styleManager.getStyleDeclaration("spark.components.FormHeading");
                var formItemCSS:CSSStyleDeclaration = styleManager.getStyleDeclaration("spark.components.FormItem");
 
                if (cb.selected) {
                    formCSS.setStyle("skinClass", StackedFormSkin);
                    formHeadingCSS.setStyle("skinClass", StackedFormHeadingSkin);
                    formItemCSS.setStyle("skinClass", StackedFormItemSkin);
                } else {
                    formCSS.setStyle("skinClass", FormSkin);
                    formHeadingCSS.setStyle("skinClass", FormHeadingSkin);
                    formItemCSS.setStyle("skinClass", FormItemSkin);
                }
            }
        ]]>
    </fx:Script>
 
    <s:Form id="frm" defaultButton="{submitBtn}" backgroundColor="#EEEEEE">
        <s:FormHeading label="Spark Form Heading" backgroundColor="haloSilver" />
        <s:FormItem sequenceLabel="1." label="Username:">
            <s:helpContent>
                <s:Label text="user@domain.com" />
            </s:helpContent>
            <s:TextInput id="username" />
        </s:FormItem>
        <s:FormItem sequenceLabel="2." label="Password:">
            <s:helpContent>
                <s:Label text="weak" color="red" />
            </s:helpContent>
            <s:TextInput id="password1" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem sequenceLabel="3." label="Confirm password:">
            <s:helpContent>
                <s:HGroup>
                    <s:Label text="One" color="red" />
                    <s:Label text="Two" color="blue" />
                </s:HGroup>
            </s:helpContent>
            <s:TextInput id="password2" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem>
            <s:layout>
                <s:HorizontalLayout />
            </s:layout>
            <s:Button id="resetBtn" label="Reset" />
            <s:Button id="submitBtn" label="Submit" />
        </s:FormItem>
    </s:Form>
 
</s:Application>

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

 
]]> http://blog.flexexamples.com/2010/08/30/creating-a-stacked-spark-form-container-in-flex-hero/feed/ 0 Styling tooltips in Flex 4 http://blog.flexexamples.com/2009/08/30/styling-tooltips-in-flex-4/ http://blog.flexexamples.com/2009/08/30/styling-tooltips-in-flex-4/#comments Sun, 30 Aug 2009 13:34:32 +0000 Peter deHaan http://blog.flexexamples.com/?p=1769 The following example shows how you can customize the appearance of a ToolTip in Flex 4 by overriding the ToolTip selector in an <fx:Style/> block, or using the StyleManager in ActionScript.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/08/30/styling-tooltips-in-flex-4/ --> <s:Application name="Halo_ToolTip_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">   <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx [...]]]> The following example shows how you can customize the appearance of a ToolTip in Flex 4 by overriding the ToolTip selector in an <fx:Style/> block, or using the StyleManager in 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/08/30/styling-tooltips-in-flex-4/ -->
<s:Application name="Halo_ToolTip_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        mx|ToolTip {
            backgroundAlpha: 1.0;
            backgroundColor: black;
            color: white;
            cornerRadius: 0;
            fontSize: 24;
        }
    </fx:Style>
 
    <s:Button id="btn"
            label="Spark Button"
            creationComplete="btn.toolTip = mx_internal::VERSION;"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

View source is enabled in the following example.


Or you can set the ToolTip CSS declaration using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/30/styling-tooltips-in-flex-4/ -->
<s:Application name="Halo_ToolTip_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"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            private function init():void {
                var cssDecl:CSSStyleDeclaration = StyleManager.getStyleDeclaration("mx.controls.ToolTip");
                if (!cssDecl) {
                    cssDecl = new CSSStyleDeclaration("mx.controls.ToolTip");
                }
                cssDecl.setStyle("backgroundAlpha", 1.0);
                cssDecl.setStyle("backgroundColor", "black");
                cssDecl.setStyle("color", "white");
                cssDecl.setStyle("cornerRadius", 0);
                cssDecl.setStyle("fontSize", 24);
            }
        ]]>
    </fx:Script>
 
    <s:Button id="btn"
            label="Spark Button"
            creationComplete="btn.toolTip = mx_internal::VERSION;"
            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/08/30/styling-tooltips-in-flex-4/feed/ 7 Using a CFF embedded font with a Halo DataGrid control in Flex 4 http://blog.flexexamples.com/2009/08/21/using-a-cff-embedded-font-with-a-halo-datagrid-control-in-flex-4/ http://blog.flexexamples.com/2009/08/21/using-a-cff-embedded-font-with-a-halo-datagrid-control-in-flex-4/#comments Fri, 21 Aug 2009 13:32:21 +0000 Peter deHaan http://blog.flexexamples.com/?p=1695 The following example shows how you can use a CFF embedded font with a Halo DataGrid container by setting the itemRenderer property or defaultDataGridItemRenderer style to the mx.controls.dataGridClasses.TLFDataGridItemRenderer class.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/08/21/using-a-cff-embedded-font-with-a-halo-datagrid-control-in-flex-4/ --> <s:Application name="Halo_DataGrid_TLFDataGridItemRenderer_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";   [...]]]> The following example shows how you can use a CFF embedded font with a Halo DataGrid container by setting the itemRenderer property or defaultDataGridItemRenderer style to the mx.controls.dataGridClasses.TLFDataGridItemRenderer class.

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/08/21/using-a-cff-embedded-font-with-a-halo-datagrid-control-in-flex-4/ -->
<s:Application name="Halo_DataGrid_TLFDataGridItemRenderer_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";
 
        @font-face {
            src: url("assets/Arial.ttf");
            fontFamily: ArialCFF;
            embedAsCFF: true;
        }
    </fx:Style>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <mx:DataGrid id="dataGrid"
                itemRenderer="mx.controls.dataGridClasses.TLFDataGridItemRenderer"
                fontFamily="ArialCFF">
            <mx:columns>
                <mx:DataGridColumn dataField="c1" />
                <mx:DataGridColumn dataField="c2" />
            </mx:columns>
            <mx:dataProvider>
                <mx:ArrayList>
                    <fx:Object c1="1. One" c2="1. Two" />
                    <fx:Object c1="2. One" c2="2. Two" />
                    <fx:Object c1="3. One" c2="3. Two" />
                    <fx:Object c1="4. One" c2="4. Two" />
                    <fx:Object c1="5. One" c2="5. Two" />
                    <fx:Object c1="6. One" c2="6. Two" />
                    <fx:Object c1="7. One" c2="7. Two" />
                    <fx:Object c1="8. One" c2="8. Two" />
                    <fx:Object c1="9. One" c2="9. Two" />
                </mx:ArrayList>
            </mx:dataProvider>
        </mx:DataGrid>
        <s:SimpleText text="Spark SimpleText with embedded font" fontFamily="ArialCFF" />
    </s:VGroup>
 
</s:Application>

You can set the defaultDataGridItemRenderer style in MXML, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/21/using-a-cff-embedded-font-with-a-halo-datagrid-control-in-flex-4/ -->
<s:Application name="Halo_DataGrid_TLFDataGridItemRenderer_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";
 
        @font-face {
            src: url("assets/Arial.ttf");
            fontFamily: ArialCFF;
            embedAsCFF: true;
        }
    </fx:Style>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <mx:DataGrid id="dataGrid"
                defaultDataGridItemRenderer="mx.controls.dataGridClasses.TLFDataGridItemRenderer"
                fontFamily="ArialCFF">
            <mx:columns>
                <mx:DataGridColumn dataField="c1" />
                <mx:DataGridColumn dataField="c2" />
            </mx:columns>
            <mx:dataProvider>
                <mx:ArrayList>
                    <fx:Object c1="1. One" c2="1. Two" />
                    <fx:Object c1="2. One" c2="2. Two" />
                    <fx:Object c1="3. One" c2="3. Two" />
                    <fx:Object c1="4. One" c2="4. Two" />
                    <fx:Object c1="5. One" c2="5. Two" />
                    <fx:Object c1="6. One" c2="6. Two" />
                    <fx:Object c1="7. One" c2="7. Two" />
                    <fx:Object c1="8. One" c2="8. Two" />
                    <fx:Object c1="9. One" c2="9. Two" />
                </mx:ArrayList>
            </mx:dataProvider>
        </mx:DataGrid>
        <s:SimpleText text="Spark SimpleText with embedded font" fontFamily="ArialCFF" />
    </s:VGroup>
 
</s:Application>

Or, you also set the defaultDataGridItemRenderer style globally 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/08/21/using-a-cff-embedded-font-with-a-halo-datagrid-control-in-flex-4/ -->
<s:Application name="Halo_DataGrid_TLFDataGridItemRenderer_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";
 
        @font-face {
            src: url("assets/Arial.ttf");
            fontFamily: ArialCFF;
            embedAsCFF: true;
        }
 
        mx|DataGrid {
            defaultDataGridItemRenderer: ClassReference("mx.controls.dataGridClasses.TLFDataGridItemRenderer");
            fontFamily: ArialCFF;
        }
 
        s|SimpleText {
            fontFamily: ArialCFF;
        }
    </fx:Style>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <mx:DataGrid id="dataGrid">
            <mx:columns>
                <mx:DataGridColumn dataField="c1" />
                <mx:DataGridColumn dataField="c2" />
            </mx:columns>
            <mx:dataProvider>
                <mx:ArrayList>
                    <fx:Object c1="1. One" c2="1. Two" />
                    <fx:Object c1="2. One" c2="2. Two" />
                    <fx:Object c1="3. One" c2="3. Two" />
                    <fx:Object c1="4. One" c2="4. Two" />
                    <fx:Object c1="5. One" c2="5. Two" />
                    <fx:Object c1="6. One" c2="6. Two" />
                    <fx:Object c1="7. One" c2="7. Two" />
                    <fx:Object c1="8. One" c2="8. Two" />
                    <fx:Object c1="9. One" c2="9. Two" />
                </mx:ArrayList>
            </mx:dataProvider>
        </mx:DataGrid>
        <s:SimpleText text="Spark SimpleText with embedded font" />
    </s:VGroup>
 
</s:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/21/using-a-cff-embedded-font-with-a-halo-datagrid-control-in-flex-4/ -->
<s:Application name="Halo_DataGrid_TLFDataGridItemRenderer_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"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
            import mx.controls.DataGrid;
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.controls.dataGridClasses.TLFDataGridItemRenderer;
            import spark.components.VGroup;
            import spark.primitives.SimpleText;
 
            [Embed(source="assets/Arial.ttf",
                    fontFamily="ArialCFF",
                    embedAsCFF="true")]
            private const ArialEmbeddedFont:Class;
 
            private var dataGrid:DataGrid;
            private var simpleTxt:SimpleText;
 
            private function init():void {
                var dp:ArrayList = new ArrayList();
                dp.addItem({c1:"1. One", c2:"1. Two"});
                dp.addItem({c1:"2. One", c2:"2. Two"});
                dp.addItem({c1:"3. One", c2:"3. Two"});
                dp.addItem({c1:"4. One", c2:"4. Two"});
                dp.addItem({c1:"5. One", c2:"5. Two"});
                dp.addItem({c1:"6. One", c2:"6. Two"});
                dp.addItem({c1:"7. One", c2:"7. Two"});
                dp.addItem({c1:"8. One", c2:"8. Two"});
                dp.addItem({c1:"9. One", c2:"9. Two"});
 
                var cols:Array = [];
                cols.push(new DataGridColumn("c1"));
                cols.push(new DataGridColumn("c2"));
 
                dataGrid = new DataGrid();
                dataGrid.columns = cols;
                dataGrid.dataProvider = dp;
                dataGrid.itemRenderer = new ClassFactory(TLFDataGridItemRenderer);
                dataGrid.setStyle("fontFamily", "ArialCFF");
 
                simpleTxt = new SimpleText();
                simpleTxt.text = "Spark SimpleText with embedded font";
                simpleTxt.setStyle("fontFamily", "ArialCFF");
 
                var vGr:VGroup = new VGroup();
                vGr.horizontalCenter = 0;
                vGr.verticalCenter = 0;
                vGr.addElement(dataGrid);
                vGr.addElement(simpleTxt);
                addElement(vGr);
            }
        ]]>
    </fx:Script>
 
</s:Application>

Or, you can use the StyleManager class and set the defaultDataGridItemRenderer style globally, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/21/using-a-cff-embedded-font-with-a-halo-datagrid-control-in-flex-4/ -->
<s:Application name="Halo_DataGrid_TLFDataGridItemRenderer_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"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
            import mx.controls.DataGrid;
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.controls.dataGridClasses.TLFDataGridItemRenderer;
            import spark.components.VGroup;
            import spark.primitives.SimpleText;
 
            [Embed(source="assets/Arial.ttf",
                    fontFamily="ArialCFF",
                    embedAsCFF="true")]
            private const ArialEmbeddedFont:Class;
 
            private var dataGrid:DataGrid;
            private var simpleTxt:SimpleText;
 
            private function init():void {
                var dgStyles:CSSStyleDeclaration = StyleManager.getStyleDeclaration("mx.controls.DataGrid");
                if (!dgStyles) { /* null check */
                    dgStyles = new CSSStyleDeclaration("mx.controls.DataGrid");
                }
                dgStyles.setStyle("defaultDataGridItemRenderer", TLFDataGridItemRenderer);
                dgStyles.setStyle("fontFamily", "ArialCFF");
 
                var stStyles:CSSStyleDeclaration = StyleManager.getStyleDeclaration("spark.primitives.SimpleText");
                if (!stStyles) { /* null check */
                    stStyles = new CSSStyleDeclaration("spark.primitives.SimpleText");
                }
                stStyles.setStyle("fontFamily", "ArialCFF");
 
                var dp:ArrayList = new ArrayList();
                dp.addItem({c1:"1. One", c2:"1. Two"});
                dp.addItem({c1:"2. One", c2:"2. Two"});
                dp.addItem({c1:"3. One", c2:"3. Two"});
                dp.addItem({c1:"4. One", c2:"4. Two"});
                dp.addItem({c1:"5. One", c2:"5. Two"});
                dp.addItem({c1:"6. One", c2:"6. Two"});
                dp.addItem({c1:"7. One", c2:"7. Two"});
                dp.addItem({c1:"8. One", c2:"8. Two"});
                dp.addItem({c1:"9. One", c2:"9. Two"});
 
                var cols:Array = [];
                cols.push(new DataGridColumn("c1"));
                cols.push(new DataGridColumn("c2"));
 
                dataGrid = new DataGrid();
                dataGrid.columns = cols;
                dataGrid.dataProvider = dp;
 
                simpleTxt = new SimpleText();
                simpleTxt.text = "Spark SimpleText with embedded font";
 
                var vGr:VGroup = new VGroup();
                vGr.horizontalCenter = 0;
                vGr.verticalCenter = 0;
                vGr.addElement(dataGrid);
                vGr.addElement(simpleTxt);
                addElement(vGr);
            }
        ]]>
    </fx:Script>
 
</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/08/21/using-a-cff-embedded-font-with-a-halo-datagrid-control-in-flex-4/feed/ 3 Styling Alert controls in Flex using the StyleManager class and setStyle() method (Flex 4 Edition) http://blog.flexexamples.com/2009/04/06/styling-alert-controls-in-flex-using-the-stylemanager-class-and-setstyle-method-spark-edition/ http://blog.flexexamples.com/2009/04/06/styling-alert-controls-in-flex-using-the-stylemanager-class-and-setstyle-method-spark-edition/#comments Tue, 07 Apr 2009 06:59:14 +0000 Peter deHaan http://blog.flexexamples.com/2009/04/06/styling-alert-controls-in-flex-using-the-stylemanager-class-and-setstyle-method-spark-edition/ In a previous example, “Styling Alert controls in Flex using the StyleManager class and setStyle() methods”, we saw how to style a Flex Alert control using the static StyleManager.getStyleDeclaration() method, and the setStyle() method.

The following example shows how you can do the same thing using the beta Flex 4 SDK by passing a [...]]]> In a previous example, “Styling Alert controls in Flex using the StyleManager class and setStyle() methods”, we saw how to style a Flex Alert control using the static StyleManager.getStyleDeclaration() method, and the setStyle() method.

The following example shows how you can do the same thing using the beta Flex 4 SDK by passing a fully qualified class name to the static getStyleDeclaration() method.

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/04/06/styling-alert-controls-in-flex-using-the-stylemanager-class-and-setstyle-method-spark-edition/ -->
<s:Application name="MX_Alert_chromeColor_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"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
 
            private var alert:Alert;
            private var alertCSS:CSSStyleDeclaration;
 
            private function init():void {
                alertCSS = styleManager.getStyleDeclaration("mx.controls.Alert");
            }
 
            private function showAlert(color:Object):void {
                alertCSS.setStyle("modalTransparencyColor", color);
                alertCSS.setStyle("chromeColor", color);
                alert = Alert.show("The quick brown fox jumps over the lazy dog.", "Alert title");
            }
        ]]>
    </fx:Script>
 
    <s:controlBarContent>
        <s:Button label="Red"
                  chromeColor="red"
                  click="showAlert('red');" />
        <s:Button label="Orange"
                  chromeColor="haloOrange"
                  click="showAlert('haloOrange');" />
        <s:Button label="Yellow"
                  chromeColor="yellow"
                  click="showAlert('yellow');" />
        <s:Button label="Green"
                  chromeColor="haloGreen"
                  click="showAlert('haloGreen');" />
        <s:Button label="Blue"
                  chromeColor="haloBlue"
                  click="showAlert('haloBlue');" />
    </s:controlBarContent>
 
</s:Application>

View source is enabled in the following example.

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/04/06/styling-alert-controls-in-flex-using-the-stylemanager-class-and-setstyle-method-spark-edition/feed/ 4 Dynamically styling error tips in Flex http://blog.flexexamples.com/2008/09/26/dynamically-styling-error-tips-in-flex/ http://blog.flexexamples.com/2008/09/26/dynamically-styling-error-tips-in-flex/#comments Sat, 27 Sep 2008 06:34:15 +0000 Peter deHaan http://blog.flexexamples.com/2008/09/26/dynamically-styling-error-tips-in-flex/ 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 [...]]]> 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.

 
]]> http://blog.flexexamples.com/2008/09/26/dynamically-styling-error-tips-in-flex/feed/ 2 Setting the letter spacing in the RichTextEditor control in Flex http://blog.flexexamples.com/2008/04/22/setting-the-letter-spacing-in-the-richtexteditor-control-in-flex/ http://blog.flexexamples.com/2008/04/22/setting-the-letter-spacing-in-the-richtexteditor-control-in-flex/#comments Wed, 23 Apr 2008 03:55:27 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/22/setting-the-letter-spacing-in-the-richtexteditor-control-in-flex/ The following example shows how you can set the letter spacing in a Flex RichTextEditor control by setting the textAreaStyleName and letterSpacing styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/04/22/setting-the-letter-spacing-in-the-richtexteditor-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> .myTextAreaStyleName { fontFamily: Courier; letterSpacing: 3; /* pixels */ } [...]]]> The following example shows how you can set the letter spacing in a Flex RichTextEditor control by setting the textAreaStyleName and letterSpacing styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/22/setting-the-letter-spacing-in-the-richtexteditor-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .myTextAreaStyleName {
            fontFamily: Courier;
            letterSpacing: 3; /* pixels */
        }
    </mx:Style>

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

            private function slider_change(evt:SliderEvent):void {
                var cssStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myTextAreaStyleName");
                cssStyle.setStyle("letterSpacing", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:String id="str" source="lorem.txt" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="letterSpacing:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="20"
                        value="3"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:RichTextEditor id="richTextEditor"
            text="{str}"
            textAreaStyleName="myTextAreaStyleName"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/04/22/setting-the-letter-spacing-in-the-richtexteditor-control-in-flex/feed/ 9 Styling Alert controls in Flex using the StyleManager class and setStyle() methods http://blog.flexexamples.com/2008/02/29/styling-alert-controls-in-flex-using-the-stylemanager-class-and-setstyle-methods/ http://blog.flexexamples.com/2008/02/29/styling-alert-controls-in-flex-using-the-stylemanager-class-and-setstyle-methods/#comments Sat, 01 Mar 2008 05:13:46 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/29/styling-alert-controls-in-flex-using-the-stylemanager-class-and-setstyle-methods/ The following example shows how you can style a Flex Alert control using the static StyleManager.getStyleDeclaration() method, and the setStyle() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/02/29/styling-alert-controls-in-flex-using-the-stylemanager-class-and-setstyle-methods/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.styles.StyleManager; private var alert:Alert; private var alertCSS:CSSStyleDeclaration; [...]]]> The following example shows how you can style a Flex Alert control using the static StyleManager.getStyleDeclaration() method, and the setStyle() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/29/styling-alert-controls-in-flex-using-the-stylemanager-class-and-setstyle-methods/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.styles.StyleManager;

            private var alert:Alert;
            private var alertCSS:CSSStyleDeclaration;

            private function init():void {
                alertCSS = StyleManager.getStyleDeclaration("Alert");
            }

            private function showAlert(color:Object):void {
                alertCSS.setStyle("modalTransparencyColor", color);
                alertCSS.setStyle("themeColor", color);
                alert = Alert.show("The quick brown fox...");
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Red"
                themeColor="red"
                click="showAlert('red');" />
        <mx:Button label="Orange"
                themeColor="haloOrange"
                click="showAlert('haloOrange');" />
        <mx:Button label="Yellow"
                themeColor="yellow"
                click="showAlert('yellow');" />
        <mx:Button label="Green"
                themeColor="haloGreen"
                click="showAlert('haloGreen');" />
        <mx:Button label="Blue"
                themeColor="haloBlue"
                click="showAlert('haloBlue');" />
    </mx:ApplicationControlBar>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/02/29/styling-alert-controls-in-flex-using-the-stylemanager-class-and-setstyle-methods/feed/ 3 Changing text alignment in an Flex Accordion header http://blog.flexexamples.com/2007/09/13/changing-text-alignment-in-an-flex-accordion-header/ http://blog.flexexamples.com/2007/09/13/changing-text-alignment-in-an-flex-accordion-header/#comments Fri, 14 Sep 2007 05:56:17 +0000 Peter deHaan http://blog.flexexamples.com/2007/09/13/changing-text-alignment-in-an-flex-accordion-header/ The following example shows how you can use the textAlign style to control the text alignment of a label in an Accordion header.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/09/13/changing-text-alignment-in-an-flex-accordion-header/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();"> <mx:Style> .MyHeaderStyle { color: haloBlue; fontWeight: bold; textAlign: left; textRollOverColor: [...]]]> The following example shows how you can use the textAlign style to control the text alignment of a label in an Accordion header.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/13/changing-text-alignment-in-an-flex-accordion-header/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Style>
        .MyHeaderStyle {
            color: haloBlue;
            fontWeight: bold;
            textAlign: left;
            textRollOverColor: haloOrange;
            textSelectedColor: black;
            icon: Embed(source="assets/asterisk_orange.png");
        }
    </mx:Style>

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

            private function init():void {
                comboBox.dataProvider = accordion.getChildren()
            }

            private function comboBox_change(evt:ListEvent):void {
                accordion.selectedIndex = comboBox.selectedIndex;
            }

            private function accordion_change(evt:IndexChangedEvent):void {
                comboBox.selectedIndex = accordion.selectedIndex;
            }

            private function changeTextAlign(evt:ListEvent):void {
                var cssDecl:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".MyHeaderStyle");
                cssDecl.setStyle("textAlign", evt.currentTarget.selectedItem);
                StyleManager.setStyleDeclaration(".MyHeaderStyle", cssDecl, false);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="Selected child:" />
        <mx:ComboBox id="comboBox"
                change="comboBox_change(event);">
        </mx:ComboBox>

        <mx:Spacer width="50" />

        <mx:Label text="textAlign:" />
        <mx:ComboBox change="changeTextAlign(event)">
            <mx:dataProvider>
                <mx:String>left</mx:String>
                <mx:String>center</mx:String>
                <mx:String>right</mx:String>
            </mx:dataProvider>
        </mx:ComboBox>
    </mx:ApplicationControlBar>

    <mx:Accordion id="accordion"
            headerStyleName="MyHeaderStyle"
            themeColor="haloSilver"
            width="100%"
            height="100%"
            change="accordion_change(event);">
        <mx:VBox label="One" />
        <mx:VBox label="Two" />
        <mx:VBox label="Three" />
        <mx:VBox label="Four" />
        <mx:VBox label="Five" />
    </mx:Accordion>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/09/13/changing-text-alignment-in-an-flex-accordion-header/feed/ 10 Building a simple style browser in Flex 3 http://blog.flexexamples.com/2007/09/12/building-a-simple-style-browser-in-flex-3/ http://blog.flexexamples.com/2007/09/12/building-a-simple-style-browser-in-flex-3/#comments Wed, 12 Sep 2007 23:38:28 +0000 Peter deHaan http://blog.flexexamples.com/2007/09/12/building-a-simple-style-browser-in-flex-3/ In my previous post, “Introducing the StyleManager.selectors property in Flex 3“, we looked at the new StyleManager class’s static selectors property introduced in Flex 3.

This example shows how you can make a simple app which lets you loop over styles currently registered with the StyleManager and display their current style names and values.

[...]]]> In my previous post, “Introducing the StyleManager.selectors property in Flex 3“, we looked at the new StyleManager class’s static selectors property introduced in Flex 3.

This example shows how you can make a simple app which lets you loop over styles currently registered with the StyleManager and display their current style names and values.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/12/building-a-simple-style-browser-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">

    <mx:Script>
        <![CDATA[
            import mx.styles.StyleManager;
            import mx.controls.ComboBox;

            private function init():void {
                arr = StyleManager.selectors;
                arr.sort(Array.CASEINSENSITIVE);
            }

            private function list_change(evt:Event):void {
                var styleName:String = String(ComboBox(evt.currentTarget).selectedItem);
                var cssStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(styleName);
                var obj:Object = new cssStyle.defaultFactory();
                var styles:Array = [];
                var key:String;

                for (key in obj) {
                    styles.push({key:key, value:obj[key]});
                }

                styles.sortOn("key", Array.CASEINSENSITIVE);
                dataGrid.dataProvider = styles;
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr" />

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="selectors:" />
        <mx:ComboBox id="comboBox"
                prompt="Please select a style..."
                dataProvider="{arr}"
                width="250"
                change="list_change(event)" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            rowHeight="22"
            width="300"
            verticalScrollPolicy="on">
        <mx:columns>
            <mx:DataGridColumn dataField="key"
                    headerText="Style:"
                    itemRenderer="mx.controls.Label" />
            <mx:DataGridColumn dataField="value"
                    headerText="Value:"
                    itemRenderer="mx.controls.Label" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/09/12/building-a-simple-style-browser-in-flex-3/feed/ 4