Flex Examples » labelStyleName http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Changing the label text alignment in a FormItem container in Flex http://blog.flexexamples.com/2008/06/06/changing-the-label-text-alignment-in-a-formitem-container-in-flex/ http://blog.flexexamples.com/2008/06/06/changing-the-label-text-alignment-in-a-formitem-container-in-flex/#comments Fri, 06 Jun 2008 08:21:52 +0000 Peter deHaan http://blog.flexexamples.com/2008/06/06/changing-the-label-text-alignment-in-a-formitem-container-in-flex/ The following example shows how you can set the text alignment on a Flex FormItem container’s label by setting the textAlign and labelStyleName styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/06/06/changing-the-label-text-alignment-in-a-formitem-container-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.events.ListEvent; private function comboBox_change(evt:ListEvent):void { var cssObj:CSSStyleDeclaration [...]]]> The following example shows how you can set the text alignment on a Flex FormItem container’s label by setting the textAlign and labelStyleName styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/06/changing-the-label-text-alignment-in-a-formitem-container-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            private function comboBox_change(evt:ListEvent):void {
                var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".customTextAlignLabel");
                cssObj.setStyle("textAlign", evt.currentTarget.selectedItem);
            }
        ]]>
    </mx:Script>

    <mx:Style>
        FormItem {
            labelStyleName: customTextAlignLabel;
        }

        .customTextAlignLabel {
            textAlign: left;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="textAlign:">
                <mx:ComboBox id="comboBox"
                        dataProvider="[left,center,right]"
                        change="comboBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Form>
        <mx:FormItem label="Button">
            <mx:TextInput />
        </mx:FormItem>
        <mx:FormItem label="ButtonBar">
            <mx:TextInput />
        </mx:FormItem>
        <mx:FormItem label="CheckBox">
            <mx:TextInput />
        </mx:FormItem>
        <mx:FormItem label="ColorPicker">
            <mx:TextInput />
        </mx:FormItem>
        <mx:FormItem label="ComboBox">
            <mx:TextInput />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/06/06/changing-the-label-text-alignment-in-a-formitem-container-in-flex/feed/ 10 Styling individual FormItem labels using the labelStyleName style http://blog.flexexamples.com/2007/11/13/styling-individual-formitem-labels-using-the-labelstylename-style/ http://blog.flexexamples.com/2007/11/13/styling-individual-formitem-labels-using-the-labelstylename-style/#comments Wed, 14 Nov 2007 05:41:15 +0000 Peter deHaan http://blog.flexexamples.com/2007/11/13/styling-individual-formitem-labels-using-the-labelstylename-style/ The following example shows you how you can style individual labels in a FormItem container in Flex by setting the labelStyleName style, as seen in the following snippet:

<mx:Style> .requiredLabel { color: red; fontSize: 12; fontWeight: bold; } </mx:Style> <mx:Form> <mx:FormItem label="Field 1:" labelStyleName="requiredLabel" required="true"> <mx:Label id="lbl1" text="{str}" /> </mx:FormItem> </mx:Form>

The labelStyleName style [...]]]> The following example shows you how you can style individual labels in a FormItem container in Flex by setting the labelStyleName style, as seen in the following snippet:

<mx:Style>
    .requiredLabel {
        color: red;
        fontSize: 12;
        fontWeight: bold;
    }
</mx:Style>

<mx:Form>
    <mx:FormItem label="Field 1:"
            labelStyleName="requiredLabel"
            required="true">
        <mx:Label id="lbl1" text="{str}" />
    </mx:FormItem>
</mx:Form>

The labelStyleName style was added in Flex 3 build 186889 (Wed Nov 07 2007 or later). You may need to download a nightly build of the Flex 3 SDK from the Adobe Labs website.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/13/styling-individual-formitem-labels-using-the-labelstylename-style/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style source="embeddedFonts.css" />
    <mx:Style>
        Form {
            fontFamily: ArialEmbedded;
        }

        FormHeading {
            color: haloSilver;
            fontSize: 24;
        }

        FormItem {
            labelStyleName: defaultLabel;
        }

        .defaultLabel {
            color: black;
            fontSize: 10;
            fontStyle: italic;
            fontWeight: normal;
        }

        .requiredLabel {
            color: red;
            fontSize: 12;
            fontWeight: bold;
        }
    </mx:Style>

    <mx:String id="str">
        <![CDATA[The quick brown fox jumped over the lazy dog.]]>
    </mx:String>

    <mx:Form>
        <mx:FormHeading label="Some form heading!" />
        <!-- override the default labelStyleName for the FormItem -->
        <mx:FormItem label="Field 1:"
                labelStyleName="requiredLabel"
                required="true">
            <mx:Label id="lbl1" text="{str}" />
        </mx:FormItem>

        <!-- override the default labelStyleName for the FormItem -->
        <mx:FormItem label="Field 2:"
                labelStyleName="requiredLabel"
                required="true">
            <mx:Label id="lbl2" text="{str}" />
        </mx:FormItem>

        <!-- default -->
        <mx:FormItem label="Field 3:">
            <mx:Label id="lbl3" text="{str}" />
        </mx:FormItem>

        <!-- default -->
        <mx:FormItem label="Field 4:">
            <mx:Label id="lbl4" text="{str}" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/11/13/styling-individual-formitem-labels-using-the-labelstylename-style/feed/ 3 Styling the HSlider control using CSS http://blog.flexexamples.com/2007/09/12/styling-the-hslider-control-using-css/ http://blog.flexexamples.com/2007/09/12/styling-the-hslider-control-using-css/#comments Wed, 12 Sep 2007 07:22:22 +0000 Peter deHaan http://blog.flexexamples.com/2007/09/12/styling-the-hslider-control-using-css/ The following example shows how you can style a HSlider (or VSlider) control in Flex using Cascading Style Sheets (CSS).

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/09/12/styling-the-hslider-control-using-css/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> @font-face{ src: url("./fonts/arial.ttf"); fontFamily: "ArialEmbedded"; } .MyLabel { fontFamily: ArialEmbedded; fontSize: 15; fontWeight: [...]]]> The following example shows how you can style a HSlider (or VSlider) control in Flex using Cascading Style Sheets (CSS).

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/12/styling-the-hslider-control-using-css/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face{
            src: url("./fonts/arial.ttf");
            fontFamily: "ArialEmbedded";
        }

        .MyLabel {
            fontFamily: ArialEmbedded;
            fontSize: 15;
            fontWeight: normal;
        }

        .MyDataTip {
            backgroundAlpha: 1.0;
            backgroundColor: haloBlue;
            color: white;
            cornerRadius: 10;
            fontWeight: bold;
            letterSpacing: 1;
        }

        .MySlider {
            dataTipOffset: 0;
            dataTipPrecision: 0;
            dataTipPlacement: left;
            dataTipStyleName: MyDataTip;
            showTrackHighlight: true;
            labelStyleName: MyLabel;
        }
    </mx:Style>

    <mx:Array id="labelArr">
        <mx:Number>-10</mx:Number>
        <mx:Number>0</mx:Number>
        <mx:Number>10</mx:Number>
        <mx:Number>20</mx:Number>
    </mx:Array>

    <mx:HSlider id="slider"
            minimum="-10"
            maximum="20"
            labels="{labelArr}"
            snapInterval="1"
            tickInterval="10"
            styleName="MySlider" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/09/12/styling-the-hslider-control-using-css/feed/ 0