Customizing Spark TextInput

I am creating a custom TextInput item renderer:
package
    import spark.components.Grid;
    import spark.components.TextInput;
    import spark.components.gridClasses.GridColumn;
    import spark.components.gridClasses.IGridItemRenderer;
    public class gridTextInput extends TextInput implements IGridItemRenderer
        public function gridTextInput()
            super();
            setStyle("borderVisible", false);
When I run my code the renderer still has a border. What's wrong with my code?
Thanks

Works for me. Do you mean the grid lines? or the actual border of the TextInput? What happens if you set borderVisible to true?
A workaround would be to reskin the TextInput and remove the border.
-Kevin

Similar Messages

Style Font in Spark TextInput Control

Hello!
How can I do as the title indicates please?
Can I do it without using a custom skin because I want to be able to change fontColor and fontStyle programatically.
Thanks!

You can acheive it very easily with spark textinput too. Pls check below and let me know if you have any issue.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var acFontSizes : ArrayCollection = new ArrayCollection([
                {fontSize : '12'},
                {fontSize : '16'},
                {fontSize : '20'},
                {fontSize : '24'},
                {fontSize : '28'},
                {fontSize : '32'},
                {fontSize : '36'},
                {fontSize : '40'},
                {fontSize : '44'}
        ]]>
    </fx:Script>
    <mx:VBox>
            <s:TextInput id="txtInput" width="150" height="50" text="Your Text" fontSize="{comboFontSize.selectedItem.fontSize}" color="{colorCombo.selectedColor}"/>
            <mx:HBox>
                <s:Label text="Choose Color"/>
                <mx:ColorPicker id="colorCombo"/>
            </mx:HBox>
            <mx:HBox>
                <s:Label text="Choose Font Size"/>
                <s:ComboBox id="comboFontSize" dataProvider="{acFontSizes}" labelField="fontSize" selectedIndex="0"/>
            </mx:HBox>
    </mx:VBox>
</s:Application>
with Regards,
Shardul singh Bartwal

How to set selected text color in Spark TextInput

I'm trying to make Spark TextInputs and MXFTETextInputs look like Halo/MX TextInputs as much as possible, since I have a mix of both Spark and MX TextInputs in my application. I know I can set the
selection background color to black using focusedTextSelectionColor. How can I set the selected text color to white so it matches the MX white-on-black look?

This works, if you set the enabled property directly on the s:TextInput:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
    <s:controlBarContent>
        <s:CheckBox id="ch" label="enabled" selected="true" />
    </s:controlBarContent>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        s|TextInput:disabled {
            color: red;
    </fx:Style>
    <s:Group>
        <s:TextInput id="ti" text="The quick brown fox jumps over the lazy dog" enabled="{ch.selected}" />
    </s:Group>
</s:Application>
It can get a bit trickier when you're setting the enabled property on a parent container, since (I believe) that the child control's enabled properties are still set to true and just the container is disabled. One possible workaround would be to bind the child TextInput control's enabled property to the container's enabled property. That way the s:TextInput should still go to it's disabled state and you can customize the disabled state's styles to have darker text, or whatever else you want.
<s:Group id="gr" enabled="{ch.selected}">
    <s:TextInput id="ti" text="The quick brown fox jumps over the lazy dog" enabled="{gr.enabled}" />
</s:Group>
Peter

Spark textinput does not display unicode properly

I need to type in some special charactors using unicode input method.
(install microsoft pinyin, and use secondary inputs-> unicode input, and type "E826" into the textinput box)
in spark textinput, the charactor is showing as a sqare; while mx textinput displays the charactor correctly.
does anybody know solution for this issue? or is it a known bug in flex? thanks!

I did not set font for neither s:textinput nor mx:textinput. "Arial" should be used by default.
I am wondering how mx:textinput can work. is there any alternative font set for it by default?
I am not sure which font contains these special charactors.
thanks!

Change text highlight colour in Spark TextInput

Hi,
As the title says, anyone know how to change the highlight colour in a Spark TextInput component? By the "highlight colour" I mean that if some of the text is selected this would be the background colour of the selected text.
Thanks.

SetStyle("focusedTextSelectionColor", ...)
There are also unfocusedTextSelectionColor and inactiveTextSelectionColor
styles.

I have a spark textinput, this textinput is stuck and wont disappear when poping or pushing to a new view any idea ?

i have a spark textinput, this textinput is stuck and wont disappear when popping or pushing to a new view any idea ? also sometime this textinput and when scrolling is stuck in a certain x-y position and do not move with scroll
below is my code:
<s:BorderContainer borderVisible="false" backgroundImage="@Embed(source='../assets/BGNotifications.jpg')" backgroundImageFillMode="scale" width="100%" height="100%">
    <s:Scroller id="homeScroller" y="0" pageScrollingEnabled="false" name="homeScroller" height="100%" width="100%" horizontalScrollPolicy="off" verticalScrollPolicy="on" skinClass="Skins.HMobileScrollbar" >
        <s:VGroup width="100%" horizontalAlign="center" verticalAlign="top" gap="0">
            <s:VGroup horizontalAlign="center" paddingTop="45" paddingLeft="10" width="85%" height="100%" verticalAlign="top" gap="0">
                <s:TextInput id="txtUsername" width="{278 * txtRatio}" height="{40 * txtRatio}" borderVisible="false" color="#575757" focusColor="#C42828" textAlign="left" fontStyle="normal" maxChars="200" styleName="{MystyleAccordingToWidth}TextBox{resourceManager.getString('resources','ImageP ath')}" ></s:TextInput>
            </s:VGroup>
        </s:VGroup>
    </s:Scroller>
</s:BorderContainer>

Hi, it sounds like you are running into a known issue with a mobile app using the spark textinput (assuming its mobile as you are referring to piping and pushing views)
The kind folks over at Flexicious have provided a solution to this problem
http://blog.flexicious.com/post/Scrolling-Issues-With-TextInput-for-Flex-Air-Mobile-Native -StageText.aspx

Spark TextInput does not bring up soft keyboard in iOS?

I created an app with TextInputs that was working fine, bringing up the soft keyboard in both Android and iOS devices. After being away from it a couple weeks, when I made some unrelated changes, it no longer brings up the keyboard at all on iOS, and on Android it no longer displays the contents of the TextInput while typing, with the "Done" button.
I can't think of any changes I made that would cause this change...
I found old posts here and elsewhere about the Spark TextInput not triggering the v keyboard, but they're all a year old, and I know I've been fine until now.
Can anyone help?
Thanks!

I was able to get it to work again by no longer using an mxml skin, which I was using to make the corners square, not rounded. Once I removed the skin reference, it brought up the keyboard again. Do you know why this might be? And could you tell me why there are forum exchanges around saying spark textinput cannot bring up the keyboard, only the mx:TextInput can? Perhaps they date back to an early beta version of the sdk?
Thanks!
Jack

Spark TextInput - prevent text highlight when tabbing in

How can I stop automatic text selection when I am tabbing into a Spark TextInput control?
Thanks

Well, I still want to be able to highlight it with a mouse down. I want to turn automatic selection off when a user is tabbing into the control or it gets its focus programmatically.

Control cursor in spark TextInput

Hi,
I am using flex 4.
I am using spark.components.TextInput control.
The valus of the text can be change dynamically according to user selection.
The problem is that after the user make action outside the textInput and change the value of the text the cursor position return to the begining of the textInput so if the user wants to continue enter .text in textInput he first need to move the cursor to the end.
How can I control the cursor position ?
Thanks

Save selectionActivePosition and selectionAnchorPosition, then call
selectRange

Embedding .ttf font in Spark TextInput "prompt"?

This is what i have:
Main.mxml:
<fx:Style source="Main.css"/>
    <s:TextInput x="72" y="95" focusColor="#CECB02" prompt="E-mail: "
             skinClass="components.TextInputSkin"/>
TextInputSkin.mxml:
<s:RichText id="promptDisplay" includeIn="disabledWithPrompt,normalWithPrompt" x="10" y="7"
        color="#666666" fontFamily="Acens" fontSize="15" trackingRight="1"
        color.normalWithPrompt="#333333"/>
    <s:RichEditableText id="textDisplay" d:userLabel="Text Display" x="10" y="7" width="230"
        fontFamily="Acens" fontSize="15" heightInLines="1"
        width.normal="282" color.normal="#999999"
        tabStops.normal="S0 S50 S100 S150 S200" trackingRight.normal="1"/>
Main.css
@font-face
    fontFamily: Acens;
    src: url("C:\WINDOWS\Fonts\Acens.ttf");
    embedAsCFF: true;
So, the "promptDisplay" in a computer(online) that does not have "Acens.ttf" installed shows the predefined one, but the inputed text is showed correctly with the embeded font!! Any explanation/solution for that!?
Thanks ;-)

Thanks for the reply
It's predefined in "italic" and this font doesn't have it.
But if it's like you are saying, why do i see it in my computer (even if the file it's in a server) with the font i choose and in "italic"!?
Thanks again ;-)
EDIT:
Ok.. so i change the prompt fontStyle to "normal" and it works in every computer. ;-)
But it's strange that in the local computer it does the transformation to italic when i want!! :S
Thanks again ;-) problem "solved"

Spark TextInput field fontSize fails severely on iPad

Also see the form post here because it is a related issue...
http://forums.adobe.com/thread/774047
Except for that in My case I am trying to use a TextInput field...
<s:TextInput id="usernameInput" left="225" top="47" width="355" height="55"
                     borderVisible="false" contentBackgroundAlpha="0"
                     fontFamily="Omnes-Semibold" fontSize="25" color="#FFFFFF"
                     enabled="true" tabIndex="1" focusIn="textFieldChangeListener(event)" focusOut="textFieldChangeListener(event)"/>
The problem is that whenever you publish an IPA file from the build, clicking on a TextInput with the iPad causes the font size to change to something like 200px+++++ (you can only see the tops of the letters) — when the TextInput loses focus the font size changes back to "25" like it is supposed to be.
Nobody in our whole company can figure out what is going on here.
I also cannot for the life of me figure out how to change the TextInput fontSize property using actionscript to FORCE it to be "25" when the field gains focus.
Has anyone else had this issue?
I either need to know how to change the fontSize property with actionscript or another way to solve this issue.

We've tried so many ways of fixing this issue and nothing works. Setting up an event listener for focus_in and focus_out to explicitly set the font size as suggested in another thread does not work.
I created TextInput fields, sized, and set up correctly in the Flash IDE and exported them to my swc library of UI assets and it still does not work.
The font inside of the text field becomes GIGANTIC when you tap on the field to enter text (so large that only the very tops of characters are visible) — so large it would be the equivalent of entering "200"+ as a fontSize attribute.
When the field loses focus, the fonts snap back to their intended specified size.
This DOES NOT happen in the emulator, but when it is built into an IPA. The whole process to debug this issue is ridiculous — as we have to check in the code to SVN, which then does an automatic code check and release build, then we have to get the release build IPA onto the iPad and THEN (about 15+ minutes later) can see if a couple lines of code did anything to fix the problem.
I've gone through this process about 6 times today in an attempt to debug this issue and NOTHING works.
Has anyone else had this issue?
In my opinion Adobe products have turned into complete GARBAGE since they finally established a quasi monopoly over the creative software tools industry — and Flash Builder in my limited experience is by far the biggest piece of trash in the collection. Even seasoned developers who are on my team agree with me — but we chose the AIR environment so we could roll out applications across the web / android / and ios without having to maintain completely different codebases.
But my humble opinion aside — it would be nice if there was someone out there who experienced the same issue and knows the answer to fix it. I'd greatly appreciate any insight.

Spark TextInput - use different fonts

Is it possible to use two fonts for a text entered into TextInput?
For example, 12345678 ?
Thanks

Form man urxvt;
-fn fontlist
Select the fonts to be used. This is a comma separated list of font names that are checked in order when trying to find glyphs for characters. The first font defines the cell size for characters; other fonts might be smaller, but not (in general) larger. A (hopefully) reasonable default font list is always appended to it. See resource font for more details.
In short, to specify an X11 core font, just specify its name or prefix it with "x:". To specify an XFT-font, you need to prefix it with "xft:", e.g.:
urxvt -fn "xft:Bitstream Vera Sans Mono:pixelsize=15"
urxvt -fn "9x15bold,xft:Bitstream Vera Sans Mono"
I use it all the time.

Custom TextInput itemEditor not getting focus.

I have an AdvancedDataGrid that has a custom itemEditor on an amounts field. If I do an inline textInput itemEditor everything works fine, but if I separate out the textInput itemEditor into it's own component then when I click on the amounts column it doesn't seem to get focus. What happens is I click once and it appears like the text box has appeared, but there is not cursor, so I can't start typing my amount. I need to click a second time in the cell for the cursor to appear.
Here are my datagrid columns:
<datagrids:columns>
        <mx:AdvancedDataGridColumn dataField="Customer" headerText="Cust" editable="false"/>
        <mx:AdvancedDataGridColumn dataField="Balance" headerText="Bal" editable="false"/>
        <mx:AdvancedDataGridColumn dataField="paymentAmountString" headerText="Amount"
                           editable="true" textAlign="right"
                           editorDataField="amountText" itemEditor="com.ihcfs.flex.renderers.AdvancedAmountTextInputRenderer">
        </mx:AdvancedDataGridColumn>
    </datagrids:columns>
Here is my custom renderer/editor, I've tried both a spark TextInput and an mx:TextInput. They both have the same behavior.
<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                  xmlns:s="library://ns.adobe.com/flex/spark"
                                  xmlns:mx="library://ns.adobe.com/flex/mx"
                                  focusEnabled="true">
    <fx:Script>
        <![CDATA[
            public var amountText:String;
        ]]>
    </fx:Script>
    <s:TextInput id="amountTextInput"
                 width="100%" height="100%"
                 textAlign="right"
                 change="amountText = amountTextInput.text;"
                 focusEnabled="true"
                 editable="true"
                 restrict="[0-9][.]"/>
</s:MXAdvancedDataGridItemRenderer>
If I do an inline item editor it works just fine, it's when I move it out to a reusable component that this behavior happens.
Inline:
<datagrids:columns>
        <mx:DataGridColumn dataField="customer" headerText="Cust"
                           editable="false" textAlign="center"/>
        <mx:DataGridColumn dataField="balance" headerText="Bal"
                           editable="false" textAlign="center"/>
        <mx:DataGridColumn dataField="paymentAmountString" headerText="Amount"
                           editable="true" editorDataField="text" textAlign="right">
            <mx:itemEditor>
                <fx:Component>
                    <mx:TextInput width="100%" height="100%" textAlign="right"
                                  focusOut="textinput1_focusOutHandler(event)"
                                  focusIn="textinput1_focusInHandler(event)">
                        <fx:Script>
                            <![CDATA[
                                import mx.controls.Alert;
                                import mx.controls.Text;
                                import mx.events.FlexEvent;
                                import mx.formatters.CurrencyFormatter;
                                [Bindable]
                                private var originalAmount:Number;
                                private var amountFormatter:CurrencyFormatter = new CurrencyFormatter();
                                protected function textinput1_focusOutHandler(event:FocusEvent):void
                                    var e:TextEvent = new TextEvent("amountEntered", true);
                                    var textField:TextField = event.target as TextField;
                                    var newAmount:Number = 0;
                                    if(!isNaN(parseFloat(textField.text))){
                                        newAmount = parseFloat(textField.text);
                                    e.text = new String((newAmount - originalAmount) + "");
                                    dispatchEvent(e);
                                protected function textinput1_focusInHandler(event:FocusEvent):void
                                    var textfield:TextField = event.target as TextField;
                                    if(!isNaN(parseFloat(textfield.text))){
                                        originalAmount = parseFloat(textfield.text);
                                    } else {
                                        originalAmount = 0;
                            ]]>
                        </fx:Script>
                    </mx:TextInput>
                </fx:Component>
            </mx:itemEditor>
        </mx:DataGridColumn>
    </datagrids:columns>
Thanks for the help!

I attempted to do as you said using the following code:
override public function setFocus():void{
     stage.focus = amountTextInput;
     amountTextInput.setFocus();
I also tried adding an event handler to my renderer to capture the focus in event and try the same thing:
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                  xmlns:s="library://ns.adobe.com/flex/spark"
                                  xmlns:mx="library://ns.adobe.com/flex/mx"
                                  focusEnabled="true"
                                  focusIn="mxadvanceddatagriditemrenderer1_focusInHandler(event)">
protected function mxadvanceddatagriditemrenderer1_focusInHandler(event:FocusEvent):void
     amountTextInput.setFocus();
Neither of these solutions work. I could just go back to using the inline code, but I'd prefer to not copy and paste that code into several different grids.
Thanks again for the help.

[svn:fx-trunk] 13288: Changing the workaround for custom whitespace preservation in spark components in order to cater for fixes to SDK-24699 and SDK-24611 .

Revision: 13288
Revision: 13288
Author:   [email protected]
Date:     2010-01-05 15:21:57 -0800 (Tue, 05 Jan 2010)
Log Message:
Changing the workaround for custom whitespace preservation in spark components in order to cater for fixes to SDK-24699 and SDK-24611.
We now preserve whitespace for all of the spark "text" tags at compile time (but not only-whitespace content if an alternate text attribute was specified).
QE notes: Please ensure that whitespace preservation continues to work, including for the scenarios mentioned in previous issues SDK-22601, SDK-23160, SDK-23972.
Doc notes: N/A
Bugs:
SDK-24699 - Binding does not work with Spark TextInput "text" property
SDK-24611 - MXML compiler should preserve whitespace in FlowElement tags (such as
Reviewer: Paul
Tests run: checkintests, mustella RichText, List, TextArea (the 2 baseline position failures existed prior to these changes)
Is noteworthy for integration: Yes
Ticket Links:
    http://bugs.adobe.com/jira/browse/SDK-24699
    http://bugs.adobe.com/jira/browse/SDK-24611
    http://bugs.adobe.com/jira/browse/SDK-22601
    http://bugs.adobe.com/jira/browse/SDK-23160
    http://bugs.adobe.com/jira/browse/SDK-23972
    http://bugs.adobe.com/jira/browse/SDK-24699
    http://bugs.adobe.com/jira/browse/SDK-24611
Modified Paths:
    flex/sdk/trunk/modules/compiler/src/java/flex2/compiler/mxml/dom/MxmlScanner.java
    flex/sdk/trunk/modules/compiler/src/java/flex2/compiler/mxml/dom/Node.java
    flex/sdk/trunk/modules/compiler/src/java/flex2/compiler/mxml/lang/StandardDefs.java

This bug figures out also when creating a custom spark ComboBox, then trying to programatically update the userProposedSelectedIndex property. The proposed selected index is selected, but does not apply the same skin as when mouse is on rollover or item is selected due to up and down keys.
The issue seems like updating the status of the item renderer to rollover or selected to get the same skin applied.
Please could you attach DropDow nList.as that you edited ?
Thank you so much.

Customizing a VScrollBar is not working in Flex sdk 4.6?

Hi,
I have updated my Flex sdk from 4.5 to 4.6 in my application. I have faced a strange issue this sdk 4.6.
In my application I have designed a Custom VScrollbar for customizing the vertical scroll speed of a mouse wheel to smooth-en the scrolling . This was working fine when using Flex sdk 4.5.
Since I have updated to Flex sdk 4.6, the vertical scroll bar in not visible in UI. Whereas it was visible and working fine using Flex sdk 4.5.
How to make it work in Flex sdk 4.6?
The usage of the Customized Scroller is given below.
In Main Page:
<components:CustomScroller id="homeUIScroller"
                               width="100%" height="100%">
        <s:VGroup >
        </s:VGroup>
</components:CustomScroller>
CustomScroller.as:
public class CustomScroller extends Scroller
        public function CustomScroller()
            super();
            this.verticalScrollBar = new CustomVScrollBar();
CustomVScrollBar.as
    import flash.events.MouseEvent;
    import mx.core.mx_internal;
    import mx.events.FlexEvent;
    import spark.components.VScrollBar;
    import spark.core.IViewport;
    use namespace mx_internal;
    public class CustomVScrollBar extends VScrollBar
        private var distance:Number = 78;    // default scroll mover value
         * Override mouseWheelHandler to scroll by a fixed amount
         * See superclass for example of how this normally works
        override mx_internal function mouseWheelHandler(event:MouseEvent):void
            const vp:IViewport = viewport;
            if (event.isDefaultPrevented() || !vp || !vp.visible)
                return;
            var delta:Number = event.delta;
            var direction:Number = 0;
            if (delta < 0){
                direction = 1;
            } else if (delta == 0){
                direction = 0;
            } else {
                direction = -1;
            if(direction == -1 && vp.verticalScrollPosition <= 0)
                return;
            if(direction == 1 && (vp.verticalScrollPosition + distance) > maximum)
                return;
            vp.verticalScrollPosition += distance * direction;
            event.preventDefault();
Any help would be appreciated.
Thanks In advance.

Thanks for the response. I am using spark TextInput components as you can see in the code above. I've used these conrtols in other apps in FB 4.5 and have had no problems so it seems like something may be different in 4.6, or it's a bug.

Customizing Spark TextInput

Similar Messages

Maybe you are looking for