Flex Examples » emphasized http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting the accent color on the Spark Button control in Flex 4 http://blog.flexexamples.com/2010/04/05/setting-the-accent-color-on-the-spark-button-control-in-flex-4/ http://blog.flexexamples.com/2010/04/05/setting-the-accent-color-on-the-spark-button-control-in-flex-4/#comments Mon, 05 Apr 2010 23:34:58 +0000 Peter deHaan http://blog.flexexamples.com/?p=2689 The following example shows how you can set the accent color on the Spark Button control’s emphasized state in Flex 4 by setting the accentColor style and emphasized property.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/04/05/setting-the-accent-color-on-the-spark-button-control-in-flex-4/ --> <s:Application name="Spark_Button_accentColor_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:controlBarContent> <mx:Form> <mx:FormItem label="accentColor:"> <mx:ColorPicker id="clrPckr" selectedColor="red" /> </mx:FormItem> <mx:FormItem label="emphasized:"> <s:CheckBox id="chckBx" selected="true" [...]]]> The following example shows how you can set the accent color on the Spark Button control’s emphasized state in Flex 4 by setting the accentColor style and emphasized property.

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/2010/04/05/setting-the-accent-color-on-the-spark-button-control-in-flex-4/ -->
<s:Application name="Spark_Button_accentColor_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:controlBarContent>
        <mx:Form>
            <mx:FormItem label="accentColor:">
                <mx:ColorPicker id="clrPckr" selectedColor="red" />
            </mx:FormItem>
            <mx:FormItem label="emphasized:">
                <s:CheckBox id="chckBx" selected="true" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:Button id="btn"
            label="Spark Button label"
            accentColor="{clrPckr.selectedColor}"
            emphasized="{chckBx.selected}"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

You can also set the accentColor 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/2010/04/05/setting-the-accent-color-on-the-spark-button-control-in-flex-4/ -->
<s:Application name="Spark_Button_accentColor_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";
 
        s|Button {
            accentColor: red;
        }
    </fx:Style>
 
    <s:Button id="btn"
            label="Spark Button label"
            emphasized="true"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/05/setting-the-accent-color-on-the-spark-button-control-in-flex-4/ -->
<s:Application name="Spark_Button_accentColor_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:controlBarContent>
        <mx:Form>
            <mx:FormItem label="accentColor:">
                <mx:ColorPicker id="clrPckr"
                        change="styleThatButton(event);"/>
            </mx:FormItem>
            <mx:FormItem label="emphasized:">
                <s:CheckBox id="chckBx"
                        change="styleThatButton(event);"/>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function styleThatButton(evt:Event):void {
                btn.setStyle("accentColor", clrPckr.selectedColor);
                btn.emphasized = chckBx.selected;
            }
        ]]>
    </fx:Script>
 
    <s:Button id="btn"
            label="Spark Button label"
            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/2010/04/05/setting-the-accent-color-on-the-spark-button-control-in-flex-4/feed/ 3 Styling an emphasized Spark Button control in Flex 4 http://blog.flexexamples.com/2009/03/03/styling-an-emphasized-fxbutton-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/03/03/styling-an-emphasized-fxbutton-control-in-flex-gumbo/#comments Wed, 04 Mar 2009 03:53:02 +0000 Peter deHaan http://blog.flexexamples.com/2009/03/03/styling-an-emphasized-fxbutton-control-in-flex-gumbo/ In a previous example, “Creating an emphasized Spark Button control in Flex 4″, we saw how you could set the emphasized button state on a Flex 4 Spark Button control by setting the Boolean emphasized property.

The following example shows how you can style the Spark Button control’s emphasized state by setting the Button.emphasized [...]]]> In a previous example, “Creating an emphasized Spark Button control in Flex 4″, we saw how you could set the emphasized button state on a Flex 4 Spark Button control by setting the Boolean emphasized property.

The following example shows how you can style the Spark Button control’s emphasized state by setting the Button.emphasized CSS selector.

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/03/03/styling-an-emphasized-fxbutton-control-in-flex-gumbo/ -->
<s:Application name="Spark_Button_emphasized_style_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:CheckBox id="checkBox" label="emphasized" />
    </s:controlBarContent>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        s|Button.emphasized {
            baseColor: red;
        }
    </fx:Style>
 
    <s:Button label="Spark Button label"
            emphasized="{checkBox.selected}"
            horizontalCenter="0"
            verticalCenter="0" />
 
</s:Application>

If you only wanted to style the emphasized state of certain buttons, you could use Flex 4′s Advanced CSS styling to style by id, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/03/styling-an-emphasized-fxbutton-control-in-flex-gumbo/ -->
<s:Application name="Spark_Button_emphasized_style_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:CheckBox id="checkBox" label="emphasized" selected="true" />
    </s:controlBarContent>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        s|Button#btn1.emphasized {
            baseColor: red;
        }
    </fx:Style>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:Button id="btn1"
                label="Spark Button"
                emphasized="{checkBox.selected}" />
        <s:Button id="btn2"
                label="Spark Button"
                emphasized="{checkBox.selected}" />
    </s:VGroup>
 
</s:Application>

Or, you can style the emphasized state by setting the styleName property for certain buttons, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/03/styling-an-emphasized-fxbutton-control-in-flex-gumbo/ -->
<s:Application name="Spark_Button_emphasized_style_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:CheckBox id="checkBox" label="emphasized" selected="true" />
    </s:controlBarContent>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        s|Button.myButton.emphasized {
            baseColor: red;
        }
    </fx:Style>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:Button id="btn1"
                label="Spark Button"
                styleName="myButton"
                emphasized="{checkBox.selected}" />
        <s:Button id="btn2"
                label="Spark Button"
                styleName="myButton"
                emphasized="{checkBox.selected}" />
        <s:Button id="btn3"
                label="Spark Button"
                emphasized="{checkBox.selected}" />
    </s:VGroup>
 
</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/03/styling-an-emphasized-fxbutton-control-in-flex-gumbo/feed/ 1 Creating an emphasized Spark Button control in Flex 4 http://blog.flexexamples.com/2009/03/03/creating-an-emphasized-fxbutton-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/03/03/creating-an-emphasized-fxbutton-control-in-flex-gumbo/#comments Tue, 03 Mar 2009 15:04:04 +0000 Peter deHaan http://blog.flexexamples.com/2009/03/03/creating-an-emphasized-fxbutton-control-in-flex-gumbo/ The following example shows how you can set the emphasized button state on a Flex 4 Spark Button control by setting the Boolean emphasized property.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/03/03/creating-an-emphasized-fxbutton-control-in-flex-gumbo/ --> <s:Application name="Spark_Button_emphasized_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:CheckBox id="checkBox" label="emphasized" /> </s:controlBarContent>   <s:Button label="Spark Button" emphasized="{checkBox.selected}" horizontalCenter="0" verticalCenter="0" [...]]]> The following example shows how you can set the emphasized button state on a Flex 4 Spark Button control by setting the Boolean emphasized 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/03/03/creating-an-emphasized-fxbutton-control-in-flex-gumbo/ -->
<s:Application name="Spark_Button_emphasized_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:CheckBox id="checkBox" label="emphasized" />
    </s:controlBarContent>
 
    <s:Button label="Spark Button"
            emphasized="{checkBox.selected}"
            horizontalCenter="0"
            verticalCenter="0" />
 
</s:Application>

For an example of styling the emphasized state, see “Styling an emphasized Spark Button control in Flex 4″.

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/03/creating-an-emphasized-fxbutton-control-in-flex-gumbo/feed/ 0 Creating toggle and emphasized Button controls in Flex http://blog.flexexamples.com/2007/08/20/creating-toggle-and-emphasized-button-controls-in-flex/ http://blog.flexexamples.com/2007/08/20/creating-toggle-and-emphasized-button-controls-in-flex/#comments Tue, 21 Aug 2007 04:31:35 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/20/creating-toggle-and-emphasized-button-controls-in-flex/ Pretty basic stuff, but if you’ve never used a toggle button in Flex or Flash, you may find this useful. The following example creates two Button controls. The first button sets the toggle property to true and determines whether the button is currently selected by watching the button’s selected property. The second button simply sets [...]]]> Pretty basic stuff, but if you’ve never used a toggle button in Flex or Flash, you may find this useful. The following example creates two Button controls. The first button sets the toggle property to true and determines whether the button is currently selected by watching the button’s selected property. The second button simply sets the emphasized property to true, which gives the button a nice visible border, making it stand out a little more than the other buttons. This is great for highlighting a default button in a form.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/20/creating-toggle-and-emphasized-button-controls-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Number id="buttonWidth">200</mx:Number>

    <mx:Button id="button1"
            label="toggle= true; selected = {button1.selected}"
            toggle="true"
            width="{buttonWidth}" />

    <mx:Button id="button2"
            label="emphasized = true"
            emphasized="true"
            width="{buttonWidth}" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/08/20/creating-toggle-and-emphasized-button-controls-in-flex/feed/ 3 Setting a Flex Button control’s border color and theme color http://blog.flexexamples.com/2007/08/17/setting-a-flex-button-controls-border-color-and-theme-color/ http://blog.flexexamples.com/2007/08/17/setting-a-flex-button-controls-border-color-and-theme-color/#comments Sat, 18 Aug 2007 02:48:13 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/17/setting-a-flex-button-controls-border-color-and-theme-color/ The following example shows how you can change the Button control’s borderColor and themeColor properties to one of the special Flex “halo” colors (“haloBlue”, “haloGreen”, “haloOrange” or “haloSilver”). Note that you can also use any other named or hex color as well, such as “red” or 0xFF0000.

Full code after the jump.

The following example shows how you can change the Button control’s borderColor and themeColor properties to one of the special Flex “halo” colors (“haloBlue”, “haloGreen”, “haloOrange” or “haloSilver”). Note that you can also use any other named or hex color as well, such as “red” or 0xFF0000.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/17/setting-a-flex-button-controls-border-color-and-theme-color/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function comboBox_change(value:String):void {
                myButton.label = value;
                myButton.setStyle("borderColor", value);
                myButton.setStyle("themeColor", value);
            }
        ]]>
    </mx:Script>

    <mx:ComboBox id="comboBox"
            prompt="Please select a color..."
            selectedIndex="-1"
            change="comboBox_change(event.currentTarget.selectedLabel)">
        <mx:dataProvider>
            <mx:Object label="haloBlue" />
            <mx:Object label="haloGreen" />
            <mx:Object label="haloOrange" />
            <mx:Object label="haloSilver" />
        </mx:dataProvider>
    </mx:ComboBox>

    <mx:Button id="myButton"
            emphasized="true"
            fontSize="16"
            width="{comboBox.width}"
            height="{int(comboBox.width * 0.5)}" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/08/17/setting-a-flex-button-controls-border-color-and-theme-color/feed/ 5