Flex Examples » editable

Creating a non-editable Spark NumericStepper control in Flex 4

Peter deHaan — Wed, 31 Mar 2010 23:03:47 +0000

The following example show how you can create a non-editable Spark NumericStepper control in Flex 4 by setting the Boolean editable property on the NumericStepper control’s textDisplay skin part. The user can still change the NumericStepper control’s current value using the Stepper control, but they can no longer type into the NumericStepper control’s internal TextInput control.

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.

"1.0" encoding="utf-8"?>

 name="Spark_NumericStepper_textDisplay_editable_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">
    >
         id="chckBx"
                label="textDisplay.editable"
                selected="true"
                change="init();" />
    >
 
    >
        [CDATA[
            protected function init():void {
                nmStppr.textDisplay.editable = chckBx.selected;
            }
        ]]>
    >
 
     id="nmStppr"
            horizontalCenter="0" verticalCenter="0"
            creationComplete="init();"/>
 
>

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.

Apparently this is a “Best Of” post, you can also see my other post on the same topic at “Creating a non-editable Spark NumericStepper control in Flex 4″.

Creating a non-editable Spark NumericStepper control in Flex 4

Peter deHaan — Fri, 12 Jun 2009 14:57:56 +0000

The following example shows how you can create a non-editable Spark NumericStepper control in Flex 4 by setting the Boolean editable property on the NumericStepper control’s internal TextInput control.

"1.0" encoding="utf-8"?>

 name="Spark_NumericStepper_textInput_editable_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">
 
    >
        [CDATA[
            private function init():void {
                numericStepper.textDisplay.editable = false;
            }
        ]]>
    >
 
     id="numericStepper"
            minimum="0" maximum="100"
            horizontalCenter="0" verticalCenter="0"
            initialize="init();" />
 
>

View source is enabled in the following example.

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

"1.0" encoding="utf-8"?>

 name="Spark_NumericStepper_textInput_editable_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();">
 
    >
        [CDATA[
            import mx.events.FlexEvent;
            import spark.components.NumericStepper;
 
            private var numericStepper:NumericStepper;
 
            private function init():void {
                numericStepper = new NumericStepper();
                numericStepper.minimum = 0;
                numericStepper.maximum = 100;
                numericStepper.horizontalCenter = 0;
                numericStepper.verticalCenter = 0;
                numericStepper.addEventListener(FlexEvent.INITIALIZE, numericStepper_initialize);
                addElement(numericStepper);
            }
 
            private function numericStepper_initialize(evt:FlexEvent):void {
                numericStepper.textDisplay.editable = false;
            }
        ]]>
    >
 
>

You can also set the editable property in the NumericStepper control’s internal TextInput control by creating a custom Spark NumericStepper skin and setting the skinClass style, as seen in the following example:

"1.0" encoding="utf-8"?>

 name="Spark_NumericStepper_textInput_editable_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">
 
     id="numericStepper"
            minimum="0" maximum="100"
            skinClass="skins.CustomNumericStepperSkin"
            horizontalCenter="0" verticalCenter="0" />
 
>

And the Spark NumericStepper skin class, skins/CustomNumericStepperSkin.mxml, is as follows:

"1.0" encoding="utf-8"?>

 name="CustomNumericStepperSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        minHeight="23" minWidth="40"
        alpha.disabled="0.5">
    >
         name="normal" />
         name="disabled" />
    >
 
    >
        [HostComponent("spark.components.NumericStepper")]
    >
 
     fb:purpose="styling">
        [CDATA[
            /* Define the skin elements that should not be colorized.
            For numeric stepper, the skin itself is colorized but the individual parts are not. */
            static private const exclusions:Array = ["textDisplay", "decrementButton", "incrementButton"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
 
            private var cornerRadiusChanged:Boolean;
            private var borderStylesChanged:Boolean;
 
            override protected function commitProperties():void {
                super.commitProperties();
 
                if (cornerRadiusChanged) {
                    var cr:Number = getStyle("cornerRadius");
                    if (incrementButton) {
                        incrementButton.setStyle("cornerRadius", cr);
                    }
                    if (decrementButton) {
                        decrementButton.setStyle("cornerRadius", cr);
                    }
                    cornerRadiusChanged = false;
                }
 
                if (borderStylesChanged) {
                    textDisplay.setStyle("borderAlpha", getStyle("borderAlpha"));
                    textDisplay.setStyle("borderColor", getStyle("borderColor"));
                    textDisplay.setStyle("borderVisible", getStyle("borderVisible"));
                    borderStylesChanged = false;
                }
            }
 
            override public function styleChanged(styleProp:String):void {
                var allStyles:Boolean = !styleProp || styleProp == "styleName";
 
                super.styleChanged(styleProp);
 
                if (allStyles || styleProp == "cornerRadius") {
                    cornerRadiusChanged = true;
                    invalidateProperties();
                }
 
                if (allStyles || styleProp.indexOf("border") == 0) {
                    borderStylesChanged = true;
                    invalidateProperties();
                }
            }
        ]]>
    >
 
    
     id="incrementButton"
            right="0" top="0" height="50%"
            skinClass="spark.skins.spark.NumericStepperIncrementButtonSkin" />
 
    
     id="decrementButton"
            right="0" bottom="0" height="50%"
            skinClass="spark.skins.spark.NumericStepperDecrementButtonSkin" />
 
    
     id="textDisplay"
            editable="false"
            left="0" top="0" right="18" bottom="0"
            skinClass="spark.skins.spark.NumericStepperTextInputSkin" />
 
>

Or, you can extend the default Spark NumericStepperSkin using ActionScript, as seen in the following example:

/** http://blog.flexexamples.com/2009/06/12/creating-a-non-editable-spark-numericstepper-control-in-flex-4/ */
package skins {
    import spark.skins.spark.NumericStepperSkin;
 
    public class CustomNumericStepperSkinAS extends NumericStepperSkin {
        public function CustomNumericStepperSkinAS() {
            super();
            textDisplay.editable = false;
        }
    }
}

Creating a non-editable NumericStepper control in Flex

Peter deHaan — Sun, 18 May 2008 02:42:21 +0000

The following example shows how you can create a non-editable Flex NumericStepper control (users cannot type numbers directly into the control, but can still use the up arrow, down arrow, and keyboard to change the value) by setting the editable property on the nested inputField TextInput control.

Full code after the jump.

View MXML

View source is enabled in the following example.

Using a NumericStepper control as an item editor for a DataGrid control in Flex

Peter deHaan — Tue, 13 May 2008 06:54:26 +0000

The following example shows how you can use a NumericStepper as an item editor for a Flex DataGrid control by setting the itemEditor and editorDataField properties on the DataGridColumn object.

Full code after the jump.

View MXML

View source is enabled in the following example.

UPDATE: But what if you want to change the properties (such as minimum and maximum) or styles on the NumericStepper item editor? One method is to create a custom component which extends the NumericStepper and override the properties and default styles.

View MXML

comps/MyNumericStepper.mxml

View source is enabled in the following example.

You could also define the item renderer using a ClassFactory, as seen in the following example:

Or, you could define an inline item editor using the following code:

Creating an editable DataGrid control in Flex

Peter deHaan — Mon, 12 May 2008 02:50:28 +0000

The following example shows how you can create an editable Flex DataGrid control by setting the editable property on the DataGrid and DataGridColumn objects.

Full code after the jump.

View MXML

View source is enabled in the following example.

When working with editable DataGrid controls, there are three events which can be useful: itemEditBeginning, itemEditBegin, and itemEditEnd.

View MXML

View source is enabled in the following example.

Customizing the Flex ComboBox control’s text input styles

Peter deHaan — Sat, 22 Dec 2007 07:22:53 +0000

The following example shows how you can customize the ComboBox control’s text input styles by setting the textInputStyleName style in Flex.

Full code after the jump.

View MXML





    
        ComboBox {
            textInputStyleName: myCustomTextInputStyleName;
        }

        .myCustomTextInputStyleName {
            color: red;
            fontStyle: italic;
            fontWeight: bold;
        }

View source is enabled in the following example.