WordWarp for  TextInput

hi
i m working on a chat application, i have problem for
TextInput.... as i m using TextInput as a user to enter their
messages.....if when user enter long text then it should be warped
to next line.......but it is not doing so... and i cannot got any
wordWarp property for TextInput control... and one more thing i
cannot use TextArea fot this.....as it makes prob for me in some
other issues.
so please is there any way to set wordwarp fot TextInput??
Thanks in advance
shrikant

hi,
i m using textArea instead of inputText...... for NOW.
i explain what is the prob i m facing using this
textArea...... user enter the message to send in textArea...... and
there is a button "send", there are two events can happen.....1.
they may click on send, 2. they may hit "Enter key"... right!!
if they click mouse on "send" button then there is no prob.
if they hit "enter" key........ then message commonely send
as per code..... but u know what happnes if u have curson in
textArea and u hit "enter" key.... it takes the cursor to next
line...........means after sending the message......the cursor
stays at second line......(as this not happen if we use
inputText).....
this is what real thing.......
hope u may help me...
thanks

Similar Messages

  • [svn:fx-trunk] 8136: Adjustments to default size and padding for TextInput and TextArea skins.

    Revision: 8136
    Author:   [email protected]
    Date:     2009-06-23 16:16:49 -0700 (Tue, 23 Jun 2009)
    Log Message:
    Adjustments to default size and padding for TextInput and TextArea skins.
    TextInput default with is big enough to hold 10 characters (it will actually hold more than 10 "normal width" characters)
    TextArea padding matches TextInput padding
    These changes are done to the Spark and Wireframe skins.
    Bugs: SDK-16300 & SDK-16294
    QE Notes: New baseline bitmaps are needed (sorry Peter!)
    Doc Notes: None
    Ticket Links:
        http://bugs.adobe.com/jira/browse/SDK-16300
        http://bugs.adobe.com/jira/browse/SDK-16294
    Modified Paths:
        flex/sdk/trunk/frameworks/projects/spark/src/spark/skins/spark/TextAreaSkin.mxml
        flex/sdk/trunk/frameworks/projects/spark/src/spark/skins/spark/TextInputSkin.mxml
        flex/sdk/trunk/frameworks/projects/wireframe/src/spark/skins/wireframe/TextAreaSkin.mxml
        flex/sdk/trunk/frameworks/projects/wireframe/src/spark/skins/wireframe/TextInputSkin.mxml

  • CS6 breaks ActionScript 2.0 projects. No var property for TextInput or Label.

    I've been programming for years, but I'm brand new to Flash. For various reasons, I need to learn ActionScript 2.0 instead of 3.0. All I could get from Adobe's website is the trial for CS6.
    When I look at tutorials for AS2, controls such TextInput and Label are supposed to have a variable associated with them. Then in code, one can simply get/set that variable to read/change the control's contents. For example: http://youtu.be/H_TEa6i2Bhk?t=2m57s
    However, in CS6, TextInput and Label controls have no such "var" property that I can find. After hours with no luck, I decided to download examples of AS2 projects and open them up to see how they look. Here's one I tried: http://www.freeactionscript.com/2009/07/endless-parallax-scrolling/
    Notice at the bottom of the flash window are labels for the x and y speed that change dynamically as you use the arrow keys. The zip contains both the .fla and .swf file. When I run the .swf file, it works fine. When I open the .fla file in Flash Pro CS6 and hit Ctrl+Enter (which overrites the .swf file), everything works EXCEPT the labels no longer update. The overwritten .swf file no longer works correctly either, as expected.
    I tried this on several other examples and in each case any Label or TextInput controls no longer worked correctly. When I go to File->ActionScript Settings, it says ActionScript 2.0. What am I doing wrong?

    Thank you, that was very helpful. I like this approach more anyway because it seems more like... normal programming, if you know what I mean.
    Anyway, I've noticed some inconsistency in how you set up event handlers. For a button you can do:
    button.addEventListener("click", click);
    function click(e:Object):Void {...}
    button.onRelease = function() {...}
    button.onRelease = click;
    function click(e:Object):Void {...}
    For 1, you have a named function that can be the event handler for multiple objects, and you get a reference to the event which has a reference to the object when the handler is called. For 2, however, there is no reference, so you can't check out the state of the sender. 3 will partially work, that is, the function will be assigned as a handler, but any use of "e" in the body will not work.
    So the part that's bothering me the most about this is that I cannot reliably find a list of events in string form for controls. For button, there is a list in "on####" form here: http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00000820.html, but nowhere on that page does it mention button.addEventListener("click", click). That is arguably the more useful form, but I only know that exists because I've seen it in examples.
    For TextInput, there is this list: http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00002922.html, which shows TextInput.change and TextInput.enter. When you click on those, it shows examples using TextInput.addEventListener("enter", listener).
    This inconsistency concerns me. Is "click" the only string form event for button? If there are more, how do I find them. In fact, how should I have found it in the first place? None of the "on####" forms use the word "click", so I may never have guessed to use that word.
    So how do I find the full lists of events in both forms for all controls?

  • Id for TextInput in Datagrid

    Hi ,
    I am using item renderer for textinput inside a datagrid. But
    it is not allowing me to give Id for the textinput.
    I have filter function where i need to use the TextInput id.
    Can anyone plss help me out in this regard.
    <mx:DataGrid id="dataGrid" bottom="10" top="38"
    right="10" left="10">
    <mx:columns>
    <mx:DataGridColumn headerText="Name" dataField="name">
    <mx:itemRenderer>
    <mx:Component>
    <mx:TextInput change="searchLog()"
    id="txtSearchLog1"/>
    </mx:Component>
    </mx:itemRenderer>
    </mx:DataGridColumn>
    <mx:DataGridColumn headerText="Description"
    dataField="desc"/>
    <mx:DataGridColumn headerText="Value"
    dataField="val"/>
    </mx:columns>
    </mx:DataGrid>
    I need to access txtSearchLog1...
    Thx in advance

    Hi it dint work..can u plss give me other solution..i m
    getting Access of undefined property txtSearchLog1.
    my code is
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="
    http://www.adobe.com/2006/mxml"
    layout="absolute" backgroundGradientColors="[#f3f3f3, #ffffff]"
    initialize="initApp()" >
    <mx:Script>
    <![CDATA[
    import mx.controls.dataGridClasses.DataGridColumn;
    import mx.collections.ArrayCollection;
    public var gridData:ArrayCollection;
    private var colDataNames:Array = new Array();
    private function initApp():void
    gridData = new ArrayCollection();
    gridData.addItem({name:"Matt", desc:"Matthews",
    val:"[email protected]"});
    gridData.addItem({name:"appu", desc:"aparajitha",
    val:"[email protected]"});
    gridData.addItem({name:"krish", desc:"krishna",
    val:"[email protected]"});
    loadData();
    drawGrid();
    // creating an array collection with column names and
    mapping data
    public var gridColumns:ArrayCollection= new
    ArrayCollection([
    {colname:"Name",coldata:"name"},
    {colname:"Description",coldata:"desc"},
    {colname:"Value",coldata:"val"},
    // draws the grid columns
    public function drawGrid():void{
    var coldescriptor:ArrayCollection = gridColumns;
    for(var i:int;i<coldescriptor.length;i++){
    colDataNames.push(coldescriptor
    .coldata);
    // refreshed the dataprovider for the search
    private function searchLog():void{
    gridData.refresh();
    // loads the data
    public function loadData():void{
    dataGrid.dataProvider = gridData;
    setSearchFunction(searchData);
    // sets the filter function to dataprovider
    public function
    setSearchFunction(searchFunction:Function):void{
    gridData.filterFunction = searchFunction;
    // fired on text change, returns the text typed
    public function getSearchText1():String{
    return txtSearchLog1.text;
    // searches the data based on simle string search
    private function searchData(item: Object):Boolean{
    //for(var i:int=0;i<colDataNames.length;i++){
    if(item[colDataNames[0]].toString().toLowerCase().indexOf(txtSearchLog1.text.toLowerCase( ))
    != -1){
    return true;
    return false;
    ]]>
    </mx:Script>
    <mx:Canvas width="100%" height="100%">
    <mx:Label x="10" y="12" text="Search"/>
    <mx:DataGrid id="dataGrid" bottom="10" top="38"
    right="10" left="10">
    <mx:columns>
    <mx:DataGridColumn headerText="Name" dataField="name">
    <mx:itemRenderer>
    <mx:Component>
    <mx:Canvas>
    <mx:TextInput change="parentDocument.searchLog()"
    id="txtSearchLog1"/>
    </mx:Canvas>
    </mx:Component>
    </mx:itemRenderer>
    </mx:DataGridColumn>
    <mx:DataGridColumn headerText="Description"
    dataField="desc"/>
    <mx:DataGridColumn headerText="Value"
    dataField="val"/>
    </mx:columns>
    </mx:DataGrid>
    </mx:Canvas>
    </mx:Application>
    thx in advance..

  • UIX/XML:  Layout for textInput controls

    I need to render a number of textInput UIX beans (and comboboxes a.s.o.) together with a label and render a small icon right next to it. Now that itself is not a problem, but I want the labels and the controls to be aligned in the following way:
    LLLLLLL TTTTT I
    LLL TTTTTTTTT I
    LLLLLL TT I
    Is there any way to achieve that with the messageTextInput bean?
    I tried using the normal textInput beans together with a styled text in a tableLayout. This displays nicely, but whenever a validator fails a messagebox is displayed that says something like:
    value required in ""
    That makes validators completely unusable.
    Any idea how to get the layout right and have meaningful validator messages?
    Actually I would strongly prefer using the messageTextInput bean, since it does so many nice things for me...

    The messageTextInput bean adheres to the BLAF, which state that labels should be right aligned.
    You can do what you are trying to do by using a messagePrompt and a textInput. Make sure to set "id" on textInput uniquely, and labeledNodeId on messagePrompt to match. This will allow the validators to use the prompt attribute to display an understandable message. You can put your information inside of a tableLayout to get it to align the way you want.
    Here is an example:
    <styledText styleClass="OraHeaderSubSub" text="message Prompt with text Input"/>
    <tableLayout     cellSpacing="5">
    <contents>                                        
    <rowLayout >
    <contents >                                   
    <cellFormat hAlign="left" >
    <contents>
    <messagePrompt prompt="Enter a number" labeledNodeId="messageOne" required="yes"/>
    </contents>
    </cellFormat>
    <cellFormat hAlign="left">
    <contents>
    <textInput id="messageOne" text="5" >
    <onBlurValidater>
    <decimal />
    </onBlurValidater>
    </textInput>
    </contents>
    </cellFormat>
    </contents>
    </rowLayout>
    <rowLayout >
    <contents >
    <cellFormat hAlign="left" >
    <contents>
    <messagePrompt prompt="label" labeledNodeId="messageTwo" required="yes"/>
    </contents>
    </cellFormat>
    <cellFormat hAlign="left" >
    <contents>
    <textInput id="messageTwo" text="value" message="message" >
    <onBlurValidater>
    <decimal />
    </onBlurValidater>
    </textInput>
    </contents>
    </cellFormat>
    </contents>
    </rowLayout>
    </contents>
    </tableLayout>

  • Non-editable Color for TextInput

    Hi,
    Is it possible to set up, in a CSS, the backgroundColor of a
    readonly text input?
    So whenever it's set to readonly (editable=false) its
    background will automatically
    change to the color set up in the CSS.
    I want to do something like this:
    TextInput{
    theme-color:haloGreen;
    color:#005FA9;
    readonly-color:0xF5F5F5; // or "non-editable-color"
    Cheers,
    Jarrod...

    you must completely fill in the background in a non-opaque color.
    I doubt the 'non-opaque color' part might be a typoI think it is a typo, otherwise, like you, I don't know what they are trying to say.
    Just using setOpaque(true), does NOT make a component opaque. It simply tells the the RepaintManger not to search the ancestor tree to find an opaque component. This makes painting more efficient if it doesn't need to search all the way up to the content pane of the window. By setting the opaque property you are guaranteeing that the component will paint its own background in an opaque color.
    For example a JPanel is opaque and its paintComponent() method will invoke the fillRect(...) method to paint the background whatever color is specified by the setBackground() method.
    So if you do panel.setBackground(Color,RED) this is valid.
    However, if you do panel.setBackground( new Color(255, 0, 0, 128) ); this is invalid because you have set a background with an alpha value that results in a transparent color. In this case you will generally see artifacts in the background of the panel. If you want to do this, then you must also use setOpaque(false), so that the background of the ancestor component is painted first.
    Edited by: camickr on Jul 8, 2008 11:18 AM
    Fixed an incorrect reference from "non-opaque" to "opaque".

  • Context/NativeMenu for TextInput

    Hi all,
    I'm reading articles and forum topics for hours and can't figure out how to add a contextmenu to an inputtext :/
    The situation : I want when the user right click inside a textinput, a context menu shows up. (I'm working in AIR)
    What I've managed to do : right-click on the textinput (the border not inside) show the contextmenu but it is definitely not usable...
    Here is my inputtext which is inside a VGroup :
    <s:TextInput id="ownerText" text="{characterGrid.selectedItem.owner}" widthInChars="7"/>
    And a very simple code in creationComplete :
         var cm:NativeMenu = new NativeMenu();
         var itemMenu:NativeMenuItem = new NativeMenuItem("Goto");
         itemMenu.addEventListener(Event.SELECT, gotoFromNativeMenu);
         cm.addItem(itemMenu);
         ownertxt.contextMenu = cm;
    I tried with both NativeMenu and ContextMenu but same thing... Also
    I tried also this :
          var txt:TextField = ownerText.mx_internal::getTextField() as TextField;
          txt.contextMenu = cm;
    but it show me an error saying that getTextField is not found and it doesn't work either.
    Thanks for any help, i really need this feature :/

    Assign custom ContextMenu instance to "textInput.textDisplay" instance, not to textInput itself, it will help in Flex 4.1
    <?xml version="1.0" encoding="utf-8"?>
    <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark"
                           xmlns:mx="library://ns.adobe.com/flex/mx"
                           xmlns:local="*"
                           creationComplete="onCreationComplete()">
        <fx:Script>
          <![CDATA[
                protected function onCreationComplete():void
                    var menuLabel : String = 'Change Color';
                    var menuItem:ContextMenuItem = new ContextMenuItem(menuLabel);
                    var customContextMenu:ContextMenu = new ContextMenu();                                              
                    customContextMenu.customItems.push(menuItem);
                    textInput.textDisplay.contextMenu = customContextMenu;
                    richText.contextMenu = customContextMenu;
            ]]>
        </fx:Script>   
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
        <s:TextInput id="textInput"/>
        <s:RichEditableText id="richText" editable="true" text="Hello world"/>
    </s:WindowedApplication>
       And assigning custom NativeMenu to RichEditable component returns RTE both on Flex 4.1 SDK and latest Flex 4.5 SDK build, TLF is not yet ready to support NativeMenus for text components, may be a corresponding bug should be added....

  • Sking for TextInput problem

    Hey,
    im trying to have custom skin for spark TextInput and inside I'm using RichEditableText as follows
    <s:RichEditableText id="textDisplay"
                            multiline="{hostComponent.multiline}"
                            lineBreak="toFit"
                            color="{hostComponent.textColor}"
                            fontFamily="{hostComponent.fontFamily}"
                            fontSize="{hostComponent.fontSize}"
                            focusedTextSelectionColor="0xddf1f8"
                            left="6" right="1" top="4" bottom="1"
                            kerning="off"
                            heightInLines="{hostComponent.lines}"
                            >
        </s:RichEditableText>
    problem is that when i start typing it's never go to 2nd line only if I have press Enter key. What's wrong with it?
    Also I want to ask how work widthInChars and heightInLines parameters. I was thinking that if I have set widthInChars to 10, it will set maximum 10 chars per line, but it doesnt work like that...
    Im using SDK 14403

    If the Enter key isn't causing you to get a second line of text, then your databinding expression is probably setting 'multiline' to false.
    Have you read the ASDoc descriptions of how widthInChars and heightInLines work?
    Gordon Smith
    Adobe Flex SDK Team

  • Reguler expression for textInput

    How to restrict text input using reguler expression for First character is only in [a-zA-Z ].
    Ex.  AG67587
          adhsgfdsfg
          a78878

    you could use this
    http://stackoverflow.com/questions/1679886/text-input-restrict-in-flex3-air
    i don't like the idea of dynamically changing the restrict property though.
    you'll probably have to listen for the textInput or changing event and then manually test your regex and adjust the textinput.text property as appropriate.
    from the adobe docs for changing event
    Dispatched before a user editing operation occurs.   You can alter the operation, or cancel the event   to prevent the operation from being processed.

  • Adding an effect to a TextInput Control

    Is there any way to show the text in a TextInput control as though it was being typed in by a user? I have a TextInput defined as follows:
    <mx:TextInput id="message2Input"
            width="100%" height="40"
            text="Type Message Here..."
            fontSize="18"
            maxChars="10"
             />
    I can change the string value for message2Input.text elsewhere in my mxml application. When I do, that text will be displayed in the control. But it gets displayed in its entirety, instantly. I need to have it displayed as if it was typed for reasons related to a customer demo. So if the string is "Dexter, a very interesting guy", I want it to appear incrementally as
    D
    D-e
    D-e-x
    etc etc.
    I don't seem to find any control effects for TextInput that allow this when I search the discussion forums. Does anyone have an example where they have done this programmatically? I tried changing message2Input.text within a for loop, "growing" the display text with each loop until the entire string has been "typed in". But I still only see the final complete text string. I suspect this is because the TextInput control only handles one event, and won't loop through a series of re-posts in an event handler. But I'm new to this, and only guessing here.
    This is the private function in my Flex mxml app that I use to post the message to the TextInput display:
    protected function _insert_chat_item_0(): void
                // this sets the delay to display of the next IM item in the sequence...      
                aoTimers.push(setTimeout(_insert_chat_item_1, 2000));
                // this sets the text that appears in the "I'm typing text" window...
                // TODO: can we make this appear like it is being typed? Have tried everything, with no luck
                message2Input.text = "Dexter, a very interesting guy";
            } // _insert_chat_item_0 for demo: Tom types in his initial message to John
    Thanks very much.
    -Jim

    Try using Jumpeye components. They provide swcs for flex use. Lot of  effects and animations are present.

  • TextInput Validation question

    Hi,
    I am looking to a validation for TextInput wherein the input has to be:
    1. At least 6 words (yes, not albhabets/characters). Maximum 10 words.
    2. Every word is of at least 2 characters.
    Please provide help/links if you know a solution.
    Thanks,
    Sam

    I think you can do what you want by using the valueCommit event of a TextInput control to trigger validation after a user enters information in the control
    From there I'd use an array from .text.split(' ') to get the list of space separated chars/words.
    You can then check the array length  for number of words
    and the length of each array element for the minimum 2 char requirement.
    My suggestion..
    Don

  • Cannot get numeric soft keyboard for Playbook to work.

    I cannot get the numeric softkeybard to activate for a textinput component in my Flex 4.6 mobile application for a BB Playbook.
    Here is what I have done (along with many other configurations):
    My app.xml
    <fullScreen>false</fullScreen>
    <renderMode>cpu</renderMode>
    <softKeyboardBehavior>none</softKeyboardBehavior>
    My main app
    <s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                            xmlns:s="library://ns.adobe.com/flex/spark"
                            firstView="views.View1"
                            applicationDPI="160"
                            splashScreenImage="SplashScreenImage"
                            resizeForSoftKeyboard="true">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <!--  set up a home button on the views -->
    <s:navigationContent>
        <s:Button icon="@Embed('assets/home.png')" click="navigator.popToFirstView()"/>
    </s:navigationContent>
      </s:ViewNavigatorApplication>
    In my first view here is a sample textinput line
    <s:TextInput id="txtNumber" softKeyboardType="number" width="50%" restrict="0-9" textAlign="right"   enter="enterKeyHandlerFunction()"/>
    I have also tried importing the flash.text.SoftKeyboardType I have also changed the above line to softKeyboardType="{SoftKeyboardType.NUMBER}"
    I am obviously doing something wrong or the numeric keyboard does not work for the PlayBook.
    Has anyone got it working for the PlayBook and if so do you have any ideas for me.
    Playbook has AIR 3.1
    I am in development and I package with captive runtime.  Desktop has AIR 3.2
    cheers,

    I realise that and I thought the StageTextInputSkin was the default skin for textinput for a mobile app.  But I added it manually to the textinput line above. ie:
    skinClass="spark.skins.mobile.StageTextInputSkin"
    but still the same result. NO numeric keyboard on the PlayBook.  Any other ideas?
    cheers,

  • Keyboard won't go up on TextInput focus flex 4.6-iOS

    hi,
    i'm using the TextInput with a custom skin i've made.
    after upgrading to flex 4.6 no keyboard event is triggered when focousing on the TextInput.
    i've noticed some messages on the forum about the issue with no workaround\solution. anyone?

    I rolled back to the 4.5.1 TextInput skin myself. Stage text caused to many problems for me, and I had no need for the features it provides. No more issues since...
    //  ADOBE SYSTEMS INCORPORATED
    //  Copyright 2010 Adobe Systems Incorporated
    //  All Rights Reserved.
    //  NOTICE: Adobe permits you to use, modify, and distribute this file
    //  in accordance with the terms of the license agreement accompanying it.
    package spark.skins.mobile
    import flash.events.Event;
    import flash.events.SoftKeyboardEvent;
    import flash.system.Capabilities;
    import mx.core.DPIClassification;
    import mx.core.EventPriority;
    import mx.core.mx_internal;
    import spark.components.TextInput;
    import spark.components.supportClasses.StyleableTextField;
    import spark.skins.mobile.supportClasses.TextSkinBase;
    import spark.skins.mobile160.assets.TextInput_border;
    import spark.skins.mobile240.assets.TextInput_border;
    import spark.skins.mobile320.assets.TextInput_border;
    use namespace mx_internal;
    *  ActionScript-based skin for TextInput controls in mobile applications.
    * @see spark.components.TextInput
    *  @langversion 3.0
    *  @playerversion Flash 10
    *  @playerversion AIR 2.5
    *  @productversion Flex 4.5
    public class TextInputSkin extends TextSkinBase
        //  Constructor
         *  Constructor.
         *  @langversion 3.0
         *  @playerversion Flash 10
         *  @playerversion AIR 2.5
         *  @productversion Flex 4.5
        public function TextInputSkin()
            super();
            // on iOS, make adjustments for native text rendering
            _isIOS = (Capabilities.version.indexOf("IOS") == 0);
            switch (applicationDPI)
                case DPIClassification.DPI_320:
                    borderClass = spark.skins.mobile320.assets.TextInput_border;
                    layoutCornerEllipseSize = 24;
                    measuredDefaultWidth = 600;
                    measuredDefaultHeight = 66;
                    layoutBorderSize = 2;
                    break;
                case DPIClassification.DPI_240:
                    borderClass = spark.skins.mobile240.assets.TextInput_border;
                    layoutCornerEllipseSize = 12;
                    measuredDefaultWidth = 440;
                    measuredDefaultHeight = 50;
                    layoutBorderSize = 1;
                    break;
                default:
                    borderClass = spark.skins.mobile160.assets.TextInput_border;
                    layoutCornerEllipseSize = 12;
                    measuredDefaultWidth = 300;
                    measuredDefaultHeight = 33;
                    layoutBorderSize = 1;
                    break;
        //  Variables
         *  @copy spark.skins.spark.ApplicationSkin#hostComponent
        public var hostComponent:TextInput;  // SkinnableComponent will populate
         *  @private
        private var _isIOS:Boolean;
         *  @private
        private var _isEditing:Boolean;
         *  @private
        override protected function createChildren():void
            super.createChildren();
            textDisplay.addEventListener("editableChanged", editableChangedHandler);
            // remove hit area improvements on iOS when editing
            if (_isIOS)
                textDisplay.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATING, textDisplay_softKeyboardActivatingHandler, false, EventPriority.DEFAULT_HANDLER);
                textDisplay.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE, textDisplay_softKeyboardDeactivateHandler);
         *  @private
        override protected function measure():void
            super.measure();
            var paddingLeft:Number = getStyle("paddingLeft");
            var paddingRight:Number = getStyle("paddingRight");
            var paddingTop:Number = getStyle("paddingTop");
            var paddingBottom:Number = getStyle("paddingBottom");
            var textHeight:Number = getStyle("fontSize") as Number;
            if (textDisplay)
                // temporarily change text for measurement
                var oldText:String = textDisplay.text;
                // commit styles so we can get a valid textHeight
                textDisplay.text = "Wj";
                textDisplay.commitStyles();
                textHeight = textDisplay.measuredTextSize.y;
                textDisplay.text = oldText;
            // width is based on maxChars (if set)
            if (hostComponent && hostComponent.maxChars)
                // Grab the fontSize and subtract 2 as the pixel value for each character.
                // This is just an approximation, but it appears to be a reasonable one
                // for most input and most font.
                var characterWidth:int = Math.max(1, (getStyle("fontSize") - 2));
                measuredWidth =  (characterWidth * hostComponent.maxChars) +
                    paddingLeft + paddingRight + StyleableTextField.TEXT_WIDTH_PADDING;
            measuredHeight = paddingTop + textHeight + paddingBottom;
         *  @private
        override protected function layoutContents(unscaledWidth:Number,
                                                   unscaledHeight:Number):void
            super.layoutContents(unscaledWidth, unscaledHeight);
            // position & size border
            if (border)
                setElementSize(border, unscaledWidth, unscaledHeight);
                setElementPosition(border, 0, 0);
            // position & size the text
            var paddingLeft:Number = getStyle("paddingLeft");
            var paddingRight:Number = getStyle("paddingRight");
            var paddingTop:Number = getStyle("paddingTop");
            var paddingBottom:Number = getStyle("paddingBottom");
            var unscaledTextWidth:Number = unscaledWidth - paddingLeft - paddingRight;
            var unscaledTextHeight:Number = unscaledHeight - paddingTop - paddingBottom;
            // default vertical positioning is centered
            var textHeight:Number = getElementPreferredHeight(textDisplay);
            var textY:Number = Math.round(0.5 * (unscaledTextHeight - textHeight)) + paddingTop;
            // On iOS the TextField top and bottom edges are bounded by the padding.
            // On all other platforms, the height of the textDisplay is
            // textHeight + paddingBottom to increase hitArea on bottom.
            // Note: We don't move the Y position upwards because TextField
            // has way to set vertical positioning.
            // Note: iOS is a special case due to the clear button provided by the
            // native text control used while editing.
            var adjustedTextHeight:Number = (_isIOS && _isEditing) ? textHeight : textHeight + paddingBottom;
            if (textDisplay)
                // We're going to do a few tricks to try to increase the size of our hitArea to make it
                // easier for users to select text or put the caret in a certain spot.  To do that,
                // rather than set textDisplay.x=paddingLeft,  we are going to set
                // textDisplay.leftMargin = paddingLeft.  In addition, we're going to size the height
                // of the textDisplay larger than just the size of the text inside to increase the hitArea
                // on the bottom.  We'll also assign textDisplay.rightMargin = paddingRight to increase the
                // the hitArea on the right.  Unfortunately, there's no way to increase the hitArea on the top
                // just yet, but these three tricks definitely help out with regards to user experience. 
                // See http://bugs.adobe.com/jira/browse/SDK-29406 and http://bugs.adobe.com/jira/browse/SDK-29405
                // set leftMargin, rightMargin to increase the hitArea.  Need to set it before calling commitStyles().
                var marginChanged:Boolean = ((textDisplay.leftMargin != paddingLeft) ||
                    (textDisplay.rightMargin != paddingRight));
                textDisplay.leftMargin = paddingLeft;
                textDisplay.rightMargin = paddingRight;
                // need to force a styleChanged() after setting leftMargin, rightMargin if they
                // changed values.  Then we can validate the styles through commitStyles()
                if (marginChanged)
                    textDisplay.styleChanged(null);
                textDisplay.commitStyles();
                setElementSize(textDisplay, unscaledWidth, adjustedTextHeight);
                // set x=0 since we're using textDisplay.leftMargin = paddingLeft
                setElementPosition(textDisplay, 0, textY);
            if (promptDisplay)
                promptDisplay.commitStyles();
                setElementSize(promptDisplay, unscaledTextWidth, adjustedTextHeight);
                setElementPosition(promptDisplay, paddingLeft, textY);
         *  @private
        private function editableChangedHandler(event:Event):void
            invalidateDisplayList();
         *  @private
        private function textDisplay_softKeyboardActivatingHandler(event:SoftKeyboardEvent):void
            if (event.isDefaultPrevented())
                return;
            _isEditing = true;
            invalidateDisplayList();
         *  @private
        private function textDisplay_softKeyboardDeactivateHandler(event:SoftKeyboardEvent):void
            _isEditing = false;
            invalidateDisplayList();

  • Sound notification with TextInput Restrict characters

    Is it possible to have the PC beep when a disallowed character is entered into a TextInput field?
    Restrict simply ignores the input when certain characters are inputted. I want to give the users some feedback such as a beep instead of relying on them noticing that the character they have typed hasn't appeared on screen.
    Any help much appreciated
    Mark

    MX TextInput or Spark TextInput? For the former, listen for textInput events, check if the text that's about to be inserted has an offending character, if so, remove it and beep. For the latter, listen for flowOperationBegin events for an InsertTextOperation and do the same.
    Gordon Smith
    Adobe Flex SDK Team

  • DataGrid TextInput - detecting change

    I'm reasonably new to Flex and have been stuggling with this
    for quite a while.
    I have a DataGrid with one of the columns having an
    itemRenderer = TextInput.
    I want to detect when a user leaves the field (or changes the
    value) but cannot figure it out. I gather the events for TextInput
    don't bubble - and with my limited knowledge, i'm not up to
    overriding this - yet!
    Here's a cut down version of the DataGrid:
    <mx:DataGrid dataProvider="{productList}" left="22"
    top="37" bottom="69" width="395" id="productGrid">
    <mx:columns>
    <mx:DataGridColumn itemRenderer="mx.controls.TextInput"
    rendererIsEditor="true" headerText="Qty" dataField="quantity"/>
    <mx:DataGridColumn headerText="Name" dataField="name"
    />
    </mx:columns>
    </mx:DataGrid>
    TIA
    BTW, I have a workaround which is to make the DataGrid
    editable and render the non-entry columns a labels, but its not
    obvious to the user that data can be entered.

    Thanks a heap for the suggestion. I'm getting closer but
    still have a problem.
    The column dataField "quantity" works fine if I make the
    DataGrid editable, but using the TextInput component as the
    itemRender, makes "quantity" a little elusive.
    In the code below, I have the TextInput component refreshing
    the grid on focusOut - this is just for debigging. In my real code
    I have it calling function to do some calculations. Either way, the
    quanity goes to zero as soon as I leave the field :-(
    <mx:DataGrid dataProvider="{productList}"
    dropShadowEnabled="true" shadowDirection="right" shadowDistance="0"
    left="22" top="37" bottom="69" width="395" id="productGrid">
    <mx:columns>
    <mx:DataGridColumn headerText="Qty" dataField="quantity"
    rendererIsEditor="true" width="30">
    <mx:itemRenderer>
    <mx:Component>
    <mx:TextInput
    focusOut="outerDocument.productList.refresh()"/>
    </mx:Component>
    </mx:itemRenderer>
    </mx:DataGridColumn>
    <mx:DataGridColumn textAlign="left" headerText="Name"
    dataField="name" showDataTips="true" dataTipField="description"
    width="110" />
    </mx:columns>
    </mx:DataGrid>
    Can you spot what I'm doing wrong?

Maybe you are looking for