Flex Examples » restrict http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Restricting which characters a user can type in a Spark TextInput control in Flex 4 http://blog.flexexamples.com/2009/04/21/restricting-which-characters-a-user-can-type-in-a-spark-textinput-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/04/21/restricting-which-characters-a-user-can-type-in-a-spark-textinput-control-in-flex-gumbo/#comments Wed, 22 Apr 2009 06:54:00 +0000 Peter deHaan http://blog.flexexamples.com/2009/04/21/restricting-which-characters-a-user-can-type-in-a-spark-textinput-control-in-flex-gumbo/ The following example shows how you can restrict which characters a user can enter into a Spark TextInput control by setting the restrict property in Flex 4.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/04/21/restricting-which-characters-a-user-can-type-in-a-spark-textinput-control-in-flex-gumbo/ --> <s:Application name="Spark_TextInput_restrict_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">   <s:VGroup horizontalCenter="0" verticalCenter="0"> <s:SimpleText text="Allowed characters are 0-9 and A-F:" /> [...]]]> The following example shows how you can restrict which characters a user can enter into a Spark TextInput control by setting the restrict property in Flex 4.

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/04/21/restricting-which-characters-a-user-can-type-in-a-spark-textinput-control-in-flex-gumbo/ -->
<s:Application name="Spark_TextInput_restrict_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:SimpleText text="Allowed characters are 0-9 and A-F:" />
        <s:TextInput id="textInput"
                restrict="0-9A-F"
                widthInChars="20"
                maxChars="20" />
    </s:VGroup>
 
</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:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/21/restricting-which-characters-a-user-can-type-in-a-spark-textinput-control-in-flex-gumbo/ -->
<s:Application name="Spark_TextInput_restrict_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import spark.primitives.SimpleText;
            import spark.components.VGroup;
            import spark.components.TextInput;
 
            private var vGroup:VGroup;
            private var simpleText:SimpleText;
            private var textInput:TextInput;
 
            private function init():void {
                simpleText = new SimpleText();
                simpleText.text = "Allowed characters are 0-9 and A-F:";
 
                textInput = new TextInput();
                textInput.restrict = "0-9A-F";
                textInput.widthInChars = 20;
                textInput.maxChars = 20;
 
                vGroup = new VGroup();
                vGroup.horizontalCenter = 0;
                vGroup.verticalCenter = 0;
                vGroup.addElement(simpleText);
                vGroup.addElement(textInput);
                addElement(vGroup);
            }
        ]]>
    </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/04/21/restricting-which-characters-a-user-can-type-in-a-spark-textinput-control-in-flex-gumbo/feed/ 2 Restricting which characters a user can type in a TextInput control in Flex http://blog.flexexamples.com/2008/05/15/restricting-which-characters-a-user-can-type-in-a-textinput-control-in-flex/ http://blog.flexexamples.com/2008/05/15/restricting-which-characters-a-user-can-type-in-a-textinput-control-in-flex/#comments Fri, 16 May 2008 03:52:29 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/15/restricting-which-characters-a-user-can-type-in-a-textinput-control-in-flex/ The following example shows how you can restrict which characters a user can enter into a Flex TextInput control by setting the restrict property.

Full code after the jump.

The following example sets the restrict property to “0-9\-”, which only allows numbers and the hyphen (-) character:

View MXML

<?xml version="1.0" encoding="utf-8"?> [...]]]> The following example shows how you can restrict which characters a user can enter into a Flex TextInput control by setting the restrict property.

Full code after the jump.

The following example sets the restrict property to “0-9\-”, which only allows numbers and the hyphen (-) character:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/15/restricting-which-characters-a-user-can-type-in-a-textinput-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function textInput_change(evt:Event):void {
                arrColl.addItem(evt);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:TextInput id="textInput"
                restrict="0-9\\-"
                change="textInput_change(event);" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/05/15/restricting-which-characters-a-user-can-type-in-a-textinput-control-in-flex/feed/ 14