Skinning Flex Mobile TextInput

Hi,
I need to skin the Flex Mobile Text Input with a gradient in the background. I have created a skin for that. It works fine on Android devices but in case of iOS devices, the keyboard doesn't even comes up. If I remove the skin, it works fine. I guess the issue is with skinning, but how can I fix this? Below is the skin I created, if it helps:
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
    alpha.disabledStates="0.5" blendMode="normal">
    <fx:Metadata>
    <![CDATA[
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
        [HostComponent("spark.components.TextInput")]
    ]]>
    </fx:Metadata>
    <fx:Script>
        <![CDATA[
         * @private
        private static const focusExclusions:Array = ["textDisplay"];
         *  @private
        override public function get focusSkinExclusions():Array { return focusExclusions;};
        ]]>
    </fx:Script>
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled" stateGroups="disabledStates"/>
        <s:State name="normalWithPrompt"/>
        <s:State name="disabledWithPrompt" stateGroups="disabledStates"/>
    </s:states>
    <!-- border -->
    <!--- @private -->
    <s:Rect left="0" right="0" top="0" bottom="0" id="border"
                              radiusX="5" radiusY="5">
        <s:stroke>    
            <!--- @private -->
            <s:SolidColorStroke id="borderStroke" color="0xFFFFFF" weight="1" alpha="0.05" />
        </s:stroke>
    </s:Rect>
    <!-- fill -->
    <!--- Defines the appearance of the TextInput component's background. -->
    <s:Rect id="background" left="1" right="1" top="1" bottom="1"
                              radiusX="5" radiusY="5">
        <s:fill>
            <!--- @private Defines the background fill color. -->
            <!-- s:SolidColor id="bgFill" color="0xFFFFFF" alpha="0"/-->
  <s:LinearGradient rotation="90">
  <s:GradientEntry color="0x131516"
                                                                                 alpha="1"/>
  <s:GradientEntry color="0x282b31"
                                                                                 alpha="1"/>
  </s:LinearGradient>
  </s:fill>
    </s:Rect>
    <!-- shadow -->
    <!--- @private -->
    <s:Rect left="1" top="1" right="1" height="1" id="shadow" alpha="0"
                              radiusX="5" radiusY="5">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" alpha="0.25" />
        </s:fill>
    </s:Rect>
    <!-- text -->
    <!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->
    <s:RichEditableText id="textDisplay"
              verticalAlign="middle"
              widthInChars="10"
              left="1" right="1" top="1" bottom="1" />
    <!--- Defines the Label that is used for prompt text. The includeInLayout property is false so the prompt text does not affect measurement. -->
    <s:Label id="promptDisplay" maxDisplayedLines="1"
                verticalAlign="middle"
                mouseEnabled="false" mouseChildren="false"
                includeIn="normalWithPrompt,disabledWithPrompt"
                includeInLayout="false" />
</s:SparkSkin>

You are using a non-mobile skin:
<s:RichEditableText id="textDisplay" 
              verticalAlign="middle" 
              widthInChars="10" 
              left="1" right="1" top="1" bottom="1" /> 
    <!--- Defines the Label that is used for prompt text. The includeInLayout property is false so the prompt text does not affect measurement. -->
Pls Read here about mid page- wont call keyboard and have scrolling issues, etc:
Adobe Flex 4.6 * Use text in a mobile application
Here are the mobile skins: spark.skins.mobile - Adobe ActionScript® 3 (AS3) API Reference ... apply to base components you need to use.
Good luck.

Similar Messages

  • Flex Mobile textinput

    Hi, I type from Brazil,
    Please I need example textinput with mask for Flex Mobile,
    Thank's

    Friend, I could not, the code for FlexMobile
    <?xml version="1.0" encoding="utf-8"?>
    <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
                        xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView" xmlns:mx="library://ns.adobe.com/flex/mx">
              <fx:Script>
                        <![CDATA[
                                  import mx.events.ValidationResultEvent;
                                  import spark.events.TextOperationEvent;
                                  private var validResult:ValidationResultEvent;
                                  protected function button1_clickHandler(event:MouseEvent):void
                                            validResult= phValidator.validate();
                                            if (validResult.type == ValidationResultEvent.VALID)
                                                      readyNum.text=phFormatter.format(phNum.text) ;
                                            else
                                                      readyNum.text="";
                                  protected function phNum_changeHandler(event:TextOperationEvent):void
                                            if(phNum.text.length >9)
                                                      validResult= phValidator.validate();
                                                      if (validResult.type == ValidationResultEvent.VALID)
                                                                phNum.text=phFormatter.format(phNum.text);
                                                      else
                                                                readyNum.text="";
                                            else
                                                      readyNum.text= "";
                        ]]>
              </fx:Script>
              <fx:Declarations>
                        <mx:PhoneFormatter id="phFormatter" formatString="####-####" validPatternChars="#-() "/>
                        <mx:PhoneNumberValidator id="phValidator" property="text" source="{phNum}"  allowedFormatChars=""/>
              </fx:Declarations>
                                  <s:TextInput id="phNum" x="83" y="25" width="274" text="(###) ###-####" change="phNum_changeHandler(event)"/>
                                  <s:TextInput id="readyNum" x="83" y="66" width="274" editable="false" text=""/>
              <s:Button x="33" y="167" width="74" click="button1_clickHandler(event)"/>
    </s:View>
    Thanks.

  • How to insert a background image in VGroup in Flex Mobile

    I want to insert a background image for this VGroup. Help me out. I'm new to Flex !!
    I'm using this code in Flex Mobile Application
    <s:VGroup height="100%" width="100%"
              paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">   
        <s:List id="homeList" height="100%"
                labelField="title"
                dataProvider="{homeNews}">
            <s:layout>
                <s:TileLayout requestedColumnCount="1"
                              verticalGap="5"/>
            </s:layout>
            <s:itemRenderer>
                <fx:Component>
                    <s:ItemRenderer>
                        <s:VGroup>
                            <s:BitmapImage source="{data.source}"/>
                            <s:Label text="{data.title}" />
                        </s:VGroup>
                    </s:ItemRenderer>
                </fx:Component>
            </s:itemRenderer>
        </s:List>
    </s:VGroup>

    I don't think you can add a background image to a VGroup directly, nor can VGroup be skinned.
    As far as I am aware there are probably 2 solutions
    1) use a SkinnableContainer instead skin the container to have a background image and set its layout to VerticalLayout
    2) enclose the VGroup in a Group with a BasicLayout. you can then add a background image to the Group and overlay the VGroup

  • Flex Mobile Project UI Templates?

    I'd love to find some flex mobile templates to use in flash builder that already have the platform of many of the functional UI elements in them. I feel this would be a great springboard to learn more through examining pre-built projects as a means to get started with designing my own iPhone apps. Are there sites available where I can purchase such templates? What kind of file extensions am I looking for ui templates that would plug into flex mobile in flash builder? If they are free that is great too, though I don't mind paying for good quality app templates and would appreciate suggestions of sites/services that offer this.
    Thanks,
    Scott

    I did come across scalenine.com/gallery which seems to offer flex themes and skins. Are there other alternatives or similar sites that are available for this purpose of offering project templates to start with for flex mobile?

  • [svn:fx-trunk] 5465: Now that padding set on a TextInput does not affect the inner textView, we need to add a custom TextInput skin for the TextInput a Spark NumericStepper contains .

    Revision: 5465
    Author: [email protected]
    Date: 2009-03-20 11:52:56 -0700 (Fri, 20 Mar 2009)
    Log Message:
    Now that padding set on a TextInput does not affect the inner textView, we need to add a custom TextInput skin for the TextInput a Spark NumericStepper contains. Jim ok'ed the addition of the new FxNumericStepperTextInputSkin.mxml class into the spark.skins and wireframe packaged.
    SDK-18275, SDK-19849
    Reviewer: Glenn
    Checkintests: Pass
    Ticket Links:
    http://bugs.adobe.com/jira/browse/SDK-18275
    http://bugs.adobe.com/jira/browse/SDK-19849
    Modified Paths:
    flex/sdk/trunk/frameworks/projects/flex4/src/mx/components/FxNumericStepper.as
    flex/sdk/trunk/frameworks/projects/flex4/src/mx/skins/spark/FxNumericStepperSkin.mxml
    flex/sdk/trunk/frameworks/projects/wireframe/src/wireframe/FxNumericStepperSkin.mxml
    Added Paths:
    flex/sdk/trunk/frameworks/projects/flex4/src/mx/skins/spark/FxNumericStepperTextInputSkin .mxml
    flex/sdk/trunk/frameworks/projects/wireframe/src/wireframe/FxNumericStepperTextInputSkin. mxml

    Revision: 5465
    Author: [email protected]
    Date: 2009-03-20 11:52:56 -0700 (Fri, 20 Mar 2009)
    Log Message:
    Now that padding set on a TextInput does not affect the inner textView, we need to add a custom TextInput skin for the TextInput a Spark NumericStepper contains. Jim ok'ed the addition of the new FxNumericStepperTextInputSkin.mxml class into the spark.skins and wireframe packaged.
    SDK-18275, SDK-19849
    Reviewer: Glenn
    Checkintests: Pass
    Ticket Links:
    http://bugs.adobe.com/jira/browse/SDK-18275
    http://bugs.adobe.com/jira/browse/SDK-19849
    Modified Paths:
    flex/sdk/trunk/frameworks/projects/flex4/src/mx/components/FxNumericStepper.as
    flex/sdk/trunk/frameworks/projects/flex4/src/mx/skins/spark/FxNumericStepperSkin.mxml
    flex/sdk/trunk/frameworks/projects/wireframe/src/wireframe/FxNumericStepperSkin.mxml
    Added Paths:
    flex/sdk/trunk/frameworks/projects/flex4/src/mx/skins/spark/FxNumericStepperTextInputSkin .mxml
    flex/sdk/trunk/frameworks/projects/wireframe/src/wireframe/FxNumericStepperTextInputSkin. mxml

  • Flex Mobile - Moving up for keyboard

    Not sure if this is where i should post this question about Flex Mobile, but don't see any forums for Flex Mobile.
    My question should be simple enough. I create a Android app and it works perfect. About ready to put it in the market, but one odd thing I can't find on google is how to move the app (or at least the onFocus TextInput) up so the phone's keyboard doesn't cover it.
    Does anyone know what event (if any) is fired off when the phones keyboard is summoned and how to keep your text area above it.
    Thanks!
    Also..where can I find the new api info on things like using the phone's camera, gps, accelerometer,etc?

    maybe http://swfhead.com/blog/?p=904 will be helpful

  • Flex Mobile 4.6 introduces Stage Text - how do you render HTML text with it?

    I have a little chat component in a Flex Mobile app that I just upgraded to SDK 4.6.  The chat component has a text area displaying messages and they are HTML formatted via the following:
    StyleableTextField(textArea).htmlText += myHTMLText;
    Worked in SDK 4.5 but StyleableTextField is not a part of the new Stage Text framework introduced in SDK 4.6.
    How do I HTML format the messages in my chat text area now?

    Thanks much for your response.
    Hmmm...  That appears to work but also causes a runtime exception where there was none before the 4.6 upgrade.  It occurs when I autoscroll on receiving a new message in the chat, something that worked fine in 4.5.
    I guess I'm kind of wondering what the best practice is here.  Maybe I'm just doing this wrong altogether.  I'm finding it very difficult to implement probably one of the most basic features one would find in any collaborative app - something that was very easy in Flex 3 - the chat pane.  I've had one functioning fine for about 3 years.  Not so much in Flex mobile.
    Chat is very simple functionality.  When you receive a new message from afar...
    1.  add it to a TextArea with some nice formatting
    2.  auto scroll far enough so the user can see the new message in its entirety. 
    Nothing difficult at all.
    Why are these two things difficult to find in the TextArea in Flex mobile?  It almost seems as though it's something we're not supposed to be doing? 
    The answer here seems to be don't use Stage Text.  Revert to an older TextArea skin.  Why?  What text area doesn't need formatting as an option?  What text area doesn't need to be auto scrolled here and there?  Or am I just going about this wrong?  Maybe using the wrong components?
    I guess for now I can revert to 4.5 skin, but now the code I used to auto scroll on receiving a new message throws a null pointer exception.  I've been using the valueCommit property to auto scroll, as follows:
    valueCommit="textArea.scroller.verticalScrollBar.value = textArea.scroller.verticalScrollBar.maximum"
    Haven't had a problem prevously.  But this now throws:
    TypeError: Error #1009: Cannot access a property or method of a null object reference.
              at com.components::ChatWindow/__textArea_valueCommit()
    What's the best practice to accomplish this and also to be able to take advantage of the latest and greatest?

  • Text positioning not correct while typing in Flex Mobile Text Area

    When I try to write text in Flex mobile TextArea, the text positioning is not correct. What might be the issue? Do I need to specify some Skin Class for it?

    Could be that the font doesn't have Hindi chars support and the text you paste is HTML chars.
    You could try to embed a font you know has the appropriate chars and use that for global and Applications CSS classes.

  • Flex mobile add emoticons and text

    I created a chat program in the mobile project, but I can not add emoticons,I know textarea can not display pictures,So I reluctantly use RichEditableText, it can add a picture, but why can not I enter characters (letters and Chinese characters) in the phone debugging, just enter only numbers, and punctuation symbols。Or there are other ways to solve add text and pictures?

    Thanks much for your response.
    Hmmm...  That appears to work but also causes a runtime exception where there was none before the 4.6 upgrade.  It occurs when I autoscroll on receiving a new message in the chat, something that worked fine in 4.5.
    I guess I'm kind of wondering what the best practice is here.  Maybe I'm just doing this wrong altogether.  I'm finding it very difficult to implement probably one of the most basic features one would find in any collaborative app - something that was very easy in Flex 3 - the chat pane.  I've had one functioning fine for about 3 years.  Not so much in Flex mobile.
    Chat is very simple functionality.  When you receive a new message from afar...
    1.  add it to a TextArea with some nice formatting
    2.  auto scroll far enough so the user can see the new message in its entirety. 
    Nothing difficult at all.
    Why are these two things difficult to find in the TextArea in Flex mobile?  It almost seems as though it's something we're not supposed to be doing? 
    The answer here seems to be don't use Stage Text.  Revert to an older TextArea skin.  Why?  What text area doesn't need formatting as an option?  What text area doesn't need to be auto scrolled here and there?  Or am I just going about this wrong?  Maybe using the wrong components?
    I guess for now I can revert to 4.5 skin, but now the code I used to auto scroll on receiving a new message throws a null pointer exception.  I've been using the valueCommit property to auto scroll, as follows:
    valueCommit="textArea.scroller.verticalScrollBar.value = textArea.scroller.verticalScrollBar.maximum"
    Haven't had a problem prevously.  But this now throws:
    TypeError: Error #1009: Cannot access a property or method of a null object reference.
              at com.components::ChatWindow/__textArea_valueCommit()
    What's the best practice to accomplish this and also to be able to take advantage of the latest and greatest?

  • What is the best font to use for Thai Language in Flex Mobile Applications ?

    Hi
    I am facing issues with Thai language in flex mobile applications. I am using Tahoma font and facing issues in TextInput
    Whith Tahoma font text Offset setting to far from the starting of the text input .
    Can any one suggest me the best font to use with Thai language ?
    Many thanks in advance for your help .
    Regards,
    Kamal

    Personally, I prefer uncompressed TIFF or PNG.  But many times it won't matter ... you'll be dropping the images into an SD Sequence, so they will lose resolution on output.
    -DH

  • Can't convert Flex Mobile project to desktop project

    I'm using the Flash Builder 4.6 trial, and I'm very new to flex development. I've been asked to convert an existing Flex Mobile project (appears to have been developed in Flash Builder 4.5) into an AIR desktop app.
    The project imported without complaint. However, the Add/Change Project Type > Convert to Flex Desktop Project menu item is disabled.
    I created a blank Flex Mobile project, then a blank Flex web project, then a blank ActionScript project. It's greyed out for those, too. I checked with the projects closed and open; the rest of the items on that submenu are enabled for all projects when closed.
    Is this feature disabled in the trial version?  Is something else going on?

    Clearly the device from verizon works, I would try to contact a computer tech to repair your computer
    Really it should be as simple as turn on, connect, go. If it isn't there is a break down somewhere in that computer
    What error msg?

  • Flex Mobile Project unable to run on android device

    Hi,
    I Have created basic flex mobile project using flash builder and i could able to run on desk top, but while running the same on device i am getting force close exception also dint get any error log. i am using samsung galaxy pop GT-S5570 as my testing device. i have configured usb driver and enabled usb debugging in  my device too. any help to resolve this process?

    08:20:45.751 Raw device 'sd=sd1,lun=/dev/rdsk/c3t5000CCA03EC50D5Dd0s0' does not exist, or no permissions.
    Looks like either your lun doesnt exist  OR you running vdbnech session not as root.
    (Only a guess )

  • Is there a way to use Stage3D in Flex Mobile projects on iPad?

    When I create a project of type "Action Script Mobile Project" the Stage3D works on iPad, Android device and in the AIR desktop simulator.
    But when I create a project of type "Flex Mobile Project" it works in the desktop simulator and on Android device but does not work on iPad.
    When running on iPad the stage.stage3Ds[] collection is empty.
    Is it a sort of limitation made by intent? Or a bug? Or maybe I am doing something wrong?
    What I actually need is an ability to render offscreen bitmaps with GPU in an application that uses Spark UI. This is why I need Flex Mobile project.
    My configuration is the following:
    iPad with retina display
    Sony Xperia Tablet Z
    AIR SDK 3.7 (and I have also tried AIR SDK 3.8 today)

    Hi,
    Check this thread, discussing the similar issue
    Re: What video format that is compatible with Muse

  • How to add a child at the top of the z-order(above a mobile textinput field)?

    We posted a problem yesterday with PopupManager where in a mobile app, we experience some strange problems, and have had to make our own modal Alert panel to solve the problem.
    The problem now is that if the alert panel is displayed over a TextInput field(mobile android app), the text in the textinput  shows through the Alert panel, and is obviusly higher up in the z-order than our alert panel.
    The alert panel  was added as a child of the main app window, and is as far as we can tell the top level component.
    Since the PopupManager does not have this problem, there must be a way to add our panel so it is displayed over the mobile textinput field.
    Is there any way to accomplish this?
    Thanks,
    Bob
    EDT

    Hi Bob,
    I'd recommend posting for suggestion in the mobile development forum, but if you do suspect this is a bug please go ahead and open a new report at bugbase.adobe.com and include sample code so we can see what's going on.
    Thanks,
    Chris

  • Is there a way to save data to just one view in Flex Mobile applications?

    I am having trouble handling data between views in a Flex Mobile application that I am writing. I know how to pass data from one view to another, but I was wondering if there is a way to save that data to a view, then get more data from another view (in this case it would be the same view that the original data came from) and put that data on the same view without overwriting the original data. I would be glad to post some code if anyone needs to see it.

    I think we realise that this is the same question as the other thread.

Maybe you are looking for