Flex Examples » decrementButton http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting the base color on the Spark HScrollBar control in Flex 4 http://blog.flexexamples.com/2009/03/14/setting-the-base-color-on-the-fxhscrollbar-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/03/14/setting-the-base-color-on-the-fxhscrollbar-control-in-flex-gumbo/#comments Sat, 14 Mar 2009 14:44:40 +0000 Peter deHaan http://blog.flexexamples.com/2009/03/14/setting-the-base-color-on-the-fxhscrollbar-control-in-flex-gumbo/ The following example shows how you can style the base color on the Flex 4 Spark HScrollBar control’s thumb, track, increment button, and/or decrement button by setting the baseColor style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/03/14/setting-the-base-color-on-the-fxhscrollbar-control-in-flex-gumbo/ --> <s:Application name="Spark_HScrollBar_baseColor_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> <mx:Form> <mx:FormItem label="baseColor:"> <mx:ColorPicker id="colorPicker" selectedColor="#CCCCCC" /> [...]]]> The following example shows how you can style the base color on the Flex 4 Spark HScrollBar control’s thumb, track, increment button, and/or decrement button by setting the baseColor style.

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/14/setting-the-base-color-on-the-fxhscrollbar-control-in-flex-gumbo/ -->
<s:Application name="Spark_HScrollBar_baseColor_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>
        <mx:Form>
            <mx:FormItem label="baseColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="#CCCCCC" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:HScrollBar id="scrollBar"
                baseColor="{colorPicker.selectedColor}" />
    </s:VGroup>
 
</s:Application>

View source is enabled in the following example.

You can also set the baseColor 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/14/setting-the-base-color-on-the-fxhscrollbar-control-in-flex-gumbo/ -->
<s:Application name="Spark_HScrollBar_baseColor_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";
 
        s|HScrollBar {
            baseColor: haloBlue;
        }
    </fx:Style>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:HScrollBar id="scrollBar" />
    </s:VGroup>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/14/setting-the-base-color-on-the-fxhscrollbar-control-in-flex-gumbo/ -->
<s:Application name="Spark_HScrollBar_baseColor_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>
        <mx:Form>
            <mx:FormItem label="baseColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="#CCCCCC"
                        change="colorPicker_change(event);"/>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
 
            protected function colorPicker_change(evt:ColorPickerEvent):void {
               scrollBar.setStyle("baseColor", evt.color);
            }
        ]]>
    </fx:Script>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:HScrollBar id="scrollBar" />
    </s:VGroup>
 
</s:Application>

Finally, if you wanted to set the baseColor style on the Spark HScrollBar thumb, track, increment button, and/or decrement button individually, you could either create a custom Spark HScrollBar skin and set the baseColor styles in the new skin, or you could style the #thumb, #track, #incrementButton, and/or #decrementButton selectors directly, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/14/setting-the-base-color-on-the-fxhscrollbar-control-in-flex-gumbo/ -->
<s:Application name="Spark_HScrollBar_baseColor_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";
 
        s|HScrollBar #decrementButton {
            baseColor: red;
        }
        s|HScrollBar #incrementButton {
            baseColor: haloGreen;
        }
        s|HScrollBar #track {
            baseColor: haloBlue;
        }
        s|HScrollBar #thumb {
            baseColor: haloOrange;
        }
    </fx:Style>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:HScrollBar id="scrollBar" />
    </s:VGroup>
 
</s:Application>

View source is enabled in the following example.

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/14/setting-the-base-color-on-the-fxhscrollbar-control-in-flex-gumbo/ -->
<s:Application name="Spark_HScrollBar_baseColor_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 spark.components.HScrollBar;
            import spark.components.VGroup;
 
            private const scrollBar:HScrollBar = new HScrollBar();
 
            private function init():void {
                var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration("spark.components.HScrollBar");
                cssObj.setStyle("baseColor", "haloBlue");
 
                var vGr:VGroup = new VGroup();
                vGr.horizontalCenter = 0;
                vGr.verticalCenter = 0;
                vGr.addElement(scrollBar);
                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/03/14/setting-the-base-color-on-the-fxhscrollbar-control-in-flex-gumbo/feed/ 5 Setting the repeat interval on the Spark NumericStepper control in Flex 4 http://blog.flexexamples.com/2009/03/02/setting-the-repeat-interval-on-an-fxnumericstepper-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/03/02/setting-the-repeat-interval-on-an-fxnumericstepper-control-in-flex-gumbo/#comments Tue, 03 Mar 2009 06:40:57 +0000 Peter deHaan http://blog.flexexamples.com/2009/03/02/setting-the-repeat-interval-on-an-fxnumericstepper-control-in-flex-gumbo/ The following example shows how you can set the button repeat interval on a Spark NumericStepper control in Flex 4 by setting the repeatInterval style on the nested increment button and decrement button.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/03/02/setting-the-repeat-interval-on-an-fxnumericstepper-control-in-flex-gumbo/ --> <s:Application name="Spark_NumericStepper_repeatInterval_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|NumericStepper [...]]]> The following example shows how you can set the button repeat interval on a Spark NumericStepper control in Flex 4 by setting the repeatInterval style on the nested increment button and decrement button.

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/02/setting-the-repeat-interval-on-an-fxnumericstepper-control-in-flex-gumbo/ -->
<s:Application name="Spark_NumericStepper_repeatInterval_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|NumericStepper #incrementButton,
        s|NumericStepper #decrementButton {
            repeatInterval: 500;
        }
    </fx:Style>
 
    <s:NumericStepper id="numericStepper"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

View source is enabled in the following example.

You can also set the repeatInterval style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/02/setting-the-repeat-interval-on-an-fxnumericstepper-control-in-flex-gumbo/ -->
<s:Application name="Spark_NumericStepper_repeatInterval_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:Script>
        <![CDATA[
            protected function init():void {
                numericStepper.incrementButton.setStyle("repeatInterval", 500);
                numericStepper.decrementButton.setStyle("repeatInterval", 500);
            }
        ]]>
    </fx:Script>
 
    <s:NumericStepper id="numericStepper"
            horizontalCenter="0" verticalCenter="0"
            initialize="init();" />
 
</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/02/setting-the-repeat-interval-on-an-fxnumericstepper-control-in-flex-gumbo/feed/ 0 Styling the decrement button and increment button on a Spark VScrollBar control in Flex 4 http://blog.flexexamples.com/2009/02/27/styling-the-decrement-button-and-increment-button-on-an-fxvscrollbar-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/02/27/styling-the-decrement-button-and-increment-button-on-an-fxvscrollbar-control-in-flex-gumbo/#comments Fri, 27 Feb 2009 15:19:07 +0000 Peter deHaan http://blog.flexexamples.com/2009/02/27/styling-the-decrement-button-and-increment-button-on-an-fxvscrollbar-control-in-flex-gumbo/ The following example shows how you can use advanced CSS to style the decrement and decrement buttons on a Spark TextArea control’s vertical scroll bar in Flex 4 by styling the #decrementButton and #incrementButton selectors.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a [...]]]> The following example shows how you can use advanced CSS to style the decrement and decrement buttons on a Spark TextArea control’s vertical scroll bar in Flex 4 by styling the #decrementButton and #incrementButton selectors.

Full code after the jump.

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/27/styling-the-decrement-button-and-increment-button-on-an-fxvscrollbar-control-in-flex-gumbo/ -->
<s:Application name="Spark_TextArea_VScrollBar_decrementButton_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";

        s|TextArea s|VScrollBar #decrementButton {
            baseColor: #FF0000;
        }

        s|TextArea s|VScrollBar #incrementButton {
            baseColor: haloGreen;
        }
    </fx:Style>

    <s:TextArea id="textArea"
            text="The quick brown fox jumps over the lazy dog."
            verticalScrollPolicy="on"
            horizontalScrollPolicy="on"
            horizontalCenter="0"
            verticalCenter="0" />

</s:Application>

View source is enabled in the following example.

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

 
]]> http://blog.flexexamples.com/2009/02/27/styling-the-decrement-button-and-increment-button-on-an-fxvscrollbar-control-in-flex-gumbo/feed/ 0 Styling the decrement button and increment button on a Spark Spinner control in Flex 4 http://blog.flexexamples.com/2009/02/27/styling-the-decrement-button-and-increment-button-on-an-fxspinner-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/02/27/styling-the-decrement-button-and-increment-button-on-an-fxspinner-control-in-flex-gumbo/#comments Fri, 27 Feb 2009 08:04:11 +0000 Peter deHaan http://blog.flexexamples.com/2009/02/27/styling-the-decrement-button-and-increment-button-on-an-fxspinner-control-in-flex-gumbo/ The following example shows how you can use advanced CSS to style the decrement and decrement buttons on a Spark Spinner control’s vertical scroll bar in Flex 4 by styling the #decrementButton and #incrementButton selectors.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a [...]]]> The following example shows how you can use advanced CSS to style the decrement and decrement buttons on a Spark Spinner control’s vertical scroll bar in Flex 4 by styling the #decrementButton and #incrementButton selectors.

Full code after the jump.

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/27/styling-the-decrement-button-and-increment-button-on-an-fxspinner-control-in-flex-gumbo/ -->
<s:Application name="Spark_Spinner_decrementButton_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 mx "library://ns.adobe.com/flex/halo";
        @namespace s "library://ns.adobe.com/flex/spark";

        s|Spinner #incrementButton {
            baseColor: haloGreen;
        }
        s|Spinner #decrementButton {
            baseColor: red;
        }
    </fx:Style>

    <s:HGroup id="group"
            horizontalCenter="0"
            verticalCenter="0">
        <s:SimpleText id="simpleTxt"
                text="{spinner.value}"
                textAlign="center"
                verticalAlign="middle"
                width="30"
                height="100%"  />
        <s:Spinner id="spinner" />
    </s:HGroup>

</s:Application>

View source is enabled in the following example.

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/27/styling-the-decrement-button-and-increment-button-on-an-fxspinner-control-in-flex-gumbo/ -->
<s:Application name="Spark_Spinner_decrementButton_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.events.FlexEvent;
            import spark.components.HGroup;
            import flashx.textLayout.formats.VerticalAlign;
            import flashx.textLayout.formats.TextAlign;
            import spark.components.Spinner;
            import spark.primitives.SimpleText;

            private var simpleTxt:SimpleText;
            private var spinner:Spinner;

            private function init():void {
                simpleTxt = new SimpleText();
                simpleTxt.text = "0";
                simpleTxt.setStyle("textAlign", TextAlign.CENTER);
                simpleTxt.setStyle("verticalAlign", VerticalAlign.MIDDLE);
                simpleTxt.width = 30;
                simpleTxt.percentHeight = 100;

                spinner = new Spinner();
                spinner.addEventListener(FlexEvent.INITIALIZE, spinner_init);
                spinner.addEventListener(Event.CHANGE, spinner_change);

                var group:HGroup = new HGroup();
                group.horizontalCenter = 0;
                group.verticalCenter = 0;
                group.addElement(simpleTxt);
                group.addElement(spinner);
                addElement(group);
            }

            private function spinner_init(evt:FlexEvent):void {
                spinner.incrementButton.setStyle("baseColor", "haloGreen");
                spinner.decrementButton.setStyle("baseColor", "red");
            }

            private function spinner_change(evt:Event):void {
                simpleTxt.text = spinner.value.toString();
            }
        ]]>
    </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/02/27/styling-the-decrement-button-and-increment-button-on-an-fxspinner-control-in-flex-gumbo/feed/ 0