Customization of Spark TextInput

I am creating a custom converter of element TextInput:

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 void gridTextInput()
{
Super();
setStyle ("borderVisible", false);
}

......

When I run my code rendering still has a border. What is wrong with my code?

Thank you

Works for me. Do you mean the grid lines? or the actual border of the TextInput? What happens if you set to true borderVisible?

A solution would be to reskin the TextInput and remove the border.

-Kevin

Tags: Flex

Similar Questions

How to change the color of disabled text in spark TextInput?

Hi guys,.
Disabled by default for spark TextInput text color is too light. It is difficult to see. So I want to make it a little dark.
The s:TextInput is placed inside the mx:Form or s:Group in fact, and I put the container for people with reduced mobility.
I tried with TextInputSkin, but without success.
Thanks in advance,
Cheng Wei

You can try to change the Group disabledAlpha style:

http://ns.Adobe.com/MXML/2009.
xmlns:s = "library://ns.adobe.com/flex/spark" >

Police style in Spark TextInput control

Hello!
How I can do as the title suggests it please?
I can do it without using a customized appearance because I want to be able to modify programmatically the fontColor and fontStyle.
Thank you!

You can do this very easily with spark textinput too. Pls check below and let me know if you have any problem.

http://ns.Adobe.com/MXML/2009.
xmlns:s = "library://ns.adobe.com/flex/spark".
xmlns:MX = "library://ns.adobe.com/flex/mx" minWidth = "955" = "600" minHeight >




        Import mx.collections.ArrayCollection;

[Bindable]
private var acFontSizes: ArrayCollection = new ArrayCollection([) collection
{fontSize: '12'},
{fontSize: '16'},
{fontSize: '20'},
{fontSize: '24'},
{fontSize: '28'},
{fontSize: '32'},
{fontSize: "36 '},
{fontSize: '40'},
{fontSize: '44'}
]);
]]>













with respect,

Mayeul singh Bartwal

Spark TextInput text highlight color (or the manufacturing of spark and mx components alike)

I use a mixture of spark and mx components. Really, I use only the spark, but I need dateField components too, and these are just the spark. The question that I have is to have a common look between components and this isn't quite the case when it comes to highlight the text in a textInput (DateField, NumericStepper or or ComboBox, etc.). Default components to blacks and nail fonts sparks bluish. Default MX black on white to white on black to selected and unselected.
I looked around for hours and sort of up to mx look like spark, even if I like the spark look much better (although that would like to hear if something new has come with flex 4 for this). I assumed that at least making resemble spark mx would be easy. But is it?
I know how to change the color for the highlight (i.e. the substantive part) using focusedTextSelectionColor. What I can't find is the same for fonts, i.e. something like focusedSelectedFontColor. But I don't know that there is. It must, right?
Anyway, would love the pointers that you can save.
Thank you!
f

You can use FTEText in MX components. You can use the mock datefield

my blog

--

Alex Harui

Flex SDK Team

Adobe System, Inc..

http://blogs.Adobe.com/aharui

Change the highlight color for text in Spark TextInput

Hello
As the title says, someone knows how to change the highlight color in a TextInput spark? By the "highlight color" I mean that some of the text is selected if the background color of the selected text.
Thank you.

SetStyle ("focusedTextSelectionColor",...)

There are also unfocusedTextSelectionColor and inactiveTextSelectionColor

styles.

Flex 4: spark textinput 'value data' not found?

I have a textinput itemrenderer that Im trying to port for Flex 4. This control colors the background according to the value of the text.
Two questions:
(1) conversion for "spark" as a theme seems to be the substitution of the background color and given them to a default value.
(2) in addition - conversion in "spark.controls.textinput" as the base class removes "override public set data() ' in function.
If I'm not clear how this port control. Can I continue to use mx.controls. * and 'halo', but it seems that the device port at all.
Suggestions?

The spark controls do not have the itemrenderer feature in so that they can

be a little less heavy. I would give just a TextInput in an ItemRenderer. See

the doc and examples on Spark ItemRenderers.

Flex4 embed fonts for a spark textInput does not

I can get the built-in fonts to work with mx:labels, but not for textInputs candles. any ideas? the component code:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/halo"
     width="275" height="107" xmlns:local="*"
     initialize="group1_initializeHandler(event)">
     <s:layout>
          <s:BasicLayout/>
     </s:layout>
     <fx:Style>
     @namespace components "components.*";
     @namespace mx "library://ns.adobe.com/flex/halo";
     @namespace p "*";
     @namespace s "library://ns.adobe.com/flex/spark";
          
     @font-face {
        src:url("../fonts/verdanab.ttf");
             fontFamily: verdanaBold;
             advancedAntiAliasing: true;
             fontWeight: Bold;
             unicodeRange:
                U+0041-005A, /* Upper-Case [A..Z] */
                U+0061-007A, /* Lower-Case a-z */
                U+0030-0039, /* Numbers [0..9] */
                U+002E-002E, /* Period [.] */
                U+002D-002D, /*  [-] */
                U+0040-0040; /*  [@] */
          }
          
          @font-face {
           src:url("../fonts/verdanab.ttf");
             fontFamily: verdanaBoldSpark;
             advancedAntiAliasing: true;
             fontWeight: Bold;
             cff: true;
             unicodeRange:
                U+0041-005A, /* Upper-Case [A..Z] */
                U+0061-007A, /* Lower-Case a-z */
                U+0030-0039, /* Numbers [0..9] */
                U+002E-002E, /* Period [.] */
                U+002D-002D, /*  [-] */
                U+0040-0040; /*  [@] */
          }
          
          .myBold {
             fontSize: 12;
             fontFamily: verdanaBold;
                 fontWeight: bold;
          }
          
          .myBoldSpark {
             fontSize: 12;
             fontFamily: verdanaBoldSpark;
                 fontWeight: bold;
          }
     
     
     </fx:Style>
     <s:Group id="front">
          <local:MailingListFront/>
          <mx:Label x="10" y="34" text="first name" styleName="myBold"/>
          <s:TextInput id="fname" width="81" x="10" y="52" styleName="myBoldSpark" />
          <mx:Label x="95" y="34" text="last name" styleName="myBold"/>
          <s:TextInput  id="lname" width="81" x="95" y="52" styleName="myBoldSpark"/>
          <mx:Label x="10" y="77" text="email" styleName="myBold"/>
          <s:TextInput id="email" width="167" x="10" y="95" styleName="myBoldSpark"/>
          <mx:Label x="181" y="77" text="zip" styleName="myBold"/>
          <s:TextInput id="zip" width="48" x="181" y="95" styleName="myBoldSpark"/>
          <local:SubmitButton id="submit_maillist" x="235" y="86" />
     </s:Group>
     <local:MailingListBack id="back" visible="false"/>      

</s:Group>

According to which build, the name of the "cff" property changed to "embedAsCFF.

Alex Harui

Flex SDK Developer

Adobe Systems Inc..

Blog: http://blogs.adobe.com/aharui

Incorporating the .ttf fonts in Spark TextInput 'invites '?

That's 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 installed "Acens.ttf" shows that predefined, but the text of the inscription is shown correctly with the embeded font! Any explanation/solution for it!

Thank you ;-)

Is the prompt to set up to show the italic or bold? If so, you need to incorporate italic or bold version as well.

How to select all the text with QNX TextInput

With QNX TextInput, is there a way to select all the text? Spark TextInput a selectAll() method to select all text, but I do not see a similar method in QNX TextInput. No idea how you can choose all the texts with QNX TextInput. Thank you.

Hey French,.

Thanks for the clarification! I think I can help you. Here is a code example to show my explanation. In the code below when a user clicks the LabelButton object it will assign the focus to your TextInput object and then select all the text in this object. The only downside is that it will not bring the keyboard. so far, we are not successfully by invoking the keyboard without the user clicking on the TextInput. in any case in the code below, we use TextInput property the textField object as a reference to the TextField object internal. from there, we use the setSelection() method to select the text inside the object from the start to the end position pos. Here's the same code:

package
{
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.FocusEvent;
    import flash.events.MouseEvent;

    import qnx.ui.buttons.LabelButton;
    import qnx.ui.text.TextInput;

    [SWF(width="1024",height="600",backgroundColor="#CCCCCC",frameRate="30")]
    public class TextInputTest extends Sprite
    {

        private var myInput:TextInput;

        public function TextInputTest()
        {
            super();

            // support autoOrients
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;

            myInput = new TextInput();
            myInput.setSize(300,50);

            addChild(myInput);          

            var newBtn:LabelButton = new LabelButton();
            newBtn.label = "Click Me";
            newBtn.setPosition(325, 0);

            newBtn.addEventListener(MouseEvent.CLICK, selectMyText);

            addChild(newBtn);

        }
        private function selectMyText(e:MouseEvent):void
        {
            stage.focus = myInput;
            myInput.textField.setSelection(0, myInput.textField.length);
        }
    }
}

hope it's what you want. Good luck!

TextInput bug when the desktop deployment

Hi, I test my application locally and on the Simulator. Since the new SDK I can no longer test my application locally correctly, since I can instantiate is no longer the TextInput class. This is the error:

VerifyError: Error #1014: Class qnx.pps::PPSChannel could not be found.

    at qnx.ui.text::TextInput/init()[E:\hudson\workspace\SDK092_deckard_sdk\src\screen\src\qnx\ui\text\TextInput.as:486]
    at qnx.ui.core::UIComponent()[E:\hudson\workspace\SDK092_deckard_sdk\src\screen\src\qnx\ui\core\UIComponent.as:162]
    at qnx.ui.core::SkinnableComponent()[E:\hudson\workspace\SDK092_deckard_sdk\src\screen\src\qnx\ui\core\SkinnableComponent.as:43]
    at qnx.ui.text::TextInput()[E:\hudson\workspace\SDK092_deckard_sdk\src\screen\src\qnx\ui\text\TextInput.as:370]
    at Diagram.mindmap::MindmapElement/onClick()[C:\Users\Bram\Adobe Flash Builder Burrito Preview\Mindmaps\src\Diagram\mindmap\MindmapElement.as:169]

This line 169:

textInput = new TextInput();

other people here have already said that they, too, can no longer test locally since the new SDK.

I suggest replace the QNX TextInput with a Flash / MX / component Spark TextInput for local testing, then just throw in when you want to test on the Simulator.

Flex TextInput to get the current position of the cursor

TextInput component in how to get the current position of the cursor? Because I want to record a loss of focus on the location of TextInput dynamically add text.

Here:RichEditableText is a part of the skin of the class spark TextInput and is what is doing all the text in the editing/rendering of work. If you need to make all text advanced operations, they need to go through the property here. Because it is a part of the skin, you need to make sure that is not null before doing anything on this subject.

Fixed typo: it is the property here is, not textInput

Keyboard.UP touch in s:TextInput brings the cursor caret to the beginning

Example code:

<?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">      
    <s:layout>
        <s:VerticalLayout paddingTop="10" paddingLeft="10"/>
    </s:layout>    
    <s:TextInput id="textInput">
        
    </s:TextInput>
    <mx:TextInput id="textInput2">
        
    </mx:TextInput>
</s:Application>

To reproduce:

(1) place the focus in Spark TextInput and Halo TextInput

(2) to enter text, for example "123456".

(3) press Keyboard.UP

(4) the notice, this caret cursor is moved to the end at the beginning of the text entered

Interactive example: http://jabbypanda.com/sample_case/TextInputCaret/TextInputCaretPosition.html

Is this a bug?

Looks like it's by design. Probably worth filing an enhancement request to

get some control over it.

[FB4] TextInput: Limit the number of characters

I have a spark textinput that I added a custom under the skin button. The button is located on the right side of the entrance. The issue I'm having is that when the text is entered, I need to have him stop just before the button and then add to the string of text that more characters are added. Currently what is happening, is that the text goes behind the button until it reaches the end of the text input. I tried to change the widthInChars property, however that does not have an impact.
I have attached a picture illustrating the problem with the vertical red line showing where I want the text to end.
Thank you.

Hello

Not puzzled not, do not know...

in fact not have the chance to watch it, but if you look at other parts of the skin, you will see that everything is settled that they don't care what you want...

override the updateDisplayList(unscaledWidth:Number,_unscaledHeight:Number):void function

{

If (("borderVisible") value is true)

{

Border.Visible = true;

Shadow.Visible = true;

Background.Left = background.top = background.right = background.bottom = 1;

textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 1;

}

on the other

{

Border.Visible = false;

Shadow.Visible = false;

Background.Left = background.top = background.right = background.bottom = 0;

textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 0;

}

borderStroke.color = value ("borderColor");

borderStroke.alpha = value ("borderAlpha");

super.updateDisplayList (unscaledWidth, unscaledHeight);

}

displaytext right of property will always return to 1 or zero...

so

textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 1;

becomes

textDisplay.left = textDisplay.top = textDisplay.bottom = 1;

textDisplay.right = 35

David.

strange qnx.ui.listClasses.DropDown TypeError

Hello.
I need help, because I came across an error that I can't make any sense of.
On the SDK 1.1.1 my project works very well. But I've recently updated the SDK 2.0 and there is the error.
It comes to stacktrace:

TypeError: Error #1034: Type Coercion failed: cannot convert caurina.transitions::TweenListObj@2ceb2041 to caurina.transitions.TweenListObj.
    at caurina.transitions::Tweener$/addTween()[E:\hudson\workspace\AIR_SDK_API_RELEASE\src\qnxui\src\caurina\transitions\Tweener.as:215]
    at qnx.ui.listClasses::List/showShadows()[E:\hudson\workspace\AIR_SDK_API_RELEASE\src\qnxscreen\src\qnx\ui\listClasses\List.as:2594]
    at qnx.ui.listClasses::List/draw()[E:\hudson\workspace\AIR_SDK_API_RELEASE\src\qnxscreen\src\qnx\ui\listClasses\List.as:1595]
    at qnx.ui.core::UIComponent/drawNow()[E:\hudson\workspace\AIR_SDK_API_RELEASE\src\qnxscreen\src\qnx\ui\core\UIComponent.as:335]
    at qnx.ui.listClasses::DropDown/updateAllData()[E:\hudson\workspace\AIR_SDK_API_RELEASE\src\qnxscreen\src\qnx\ui\listClasses\DropDown.as:1019]
    at qnx.ui.listClasses::DropDown/draw()[E:\hudson\workspace\AIR_SDK_API_RELEASE\src\qnxscreen\src\qnx\ui\listClasses\DropDown.as:750]
    at qnx.ui.core::UIComponent/fireCallLaterMethods()[E:\hudson\workspace\AIR_SDK_API_RELEASE\src\qnxscreen\src\qnx\ui\core\UIComponent.as:304]
    at qnx.ui.core::UIComponent/callLaterHandler()[E:\hudson\workspace\AIR_SDK_API_RELEASE\src\qnxscreen\src\qnx\ui\core\UIComponent.as:296]
    at flash.utils::Timer/_timerDispatch()
    at flash.utils::Timer/tick()

The drop-down list to appear, but it is empty and people with disabilities.
So if someone could help me, I would appreciate it.
Thank you!

OK now... I found the source of all the problems... But I don't understand how this could be possible.

Let me explain:
Flex application with multiple views. One is the main view and others are on top (only or viewnavigator)
So I started to delete views, until I found the one, who was in charge.
Best of all, it was that none of the QNX were on this point of view... How cool is that.

Then I started to delete some items from this point of view, until I came across 2 spark TextInput-s, that caused the error.

After replacing them with the QNX textinput, everything went smoothly.
I'm not able to explain, what could happen.

It's the tail of the mysterious TypeError... Thanks for your help... people and we see ourselves in the next battle

Squiggly plus Flex SDK 4.6 is broken

I know that Adobe is probably planning to 'eliminate' another piece of useful software but I thought I'd try and find answers in any case. So I have updated to the latest and greatest 4.6, but I cannot for the life of me get Squiggly to operate with the latest Spark (TextInput or TextArea) components.
Here is my little application:
<? XML version = "1.0" encoding = "utf-8"? >
" < = xmlns:fx s:Application ' 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:Script >
<! [CDATA]
import com.adobe.linguistics.spelling.SpellUI;
import com.adobe.linguistics.spelling.SpellUIForTLF;
Import mx.core.UIComponent;
Import mx.events.FlexEvent;
protected function input_creationCompleteHandler(event:FlexEvent):void {}
SpellUI.enableSpelling (input, "fr_FR");
SpellUI.enableSpelling (input2, "fr_FR");
SpellUI.enableSpelling (input3, "fr_FR");
SpellUI.enableSpelling (4, "fr_FR");
}
[]] >
< / fx:Script >
< fx:Declarations >
<! - Place non-visual elements (e.g., services, items of value) here - >
< / fx:Declarations >
< s:layout >
< s:VerticalLayout verticalAlign = "middle".
horizontalAlign = "center" / >
< / s:layout >
< s:TextInput id = "entry".
creationComplete = "input_creationCompleteHandler (event)" / >
< s:TextArea id = "input2" / >
< s:RichText id = "input3.
Text = "tst" / >
< mx:TextInput id = "4" / >
< / s:Application >
As you can see the only one that works is the mx:TextInput component. Am I doing something wrong here or wavy to not work with 4.6 spark components?

The trick seems to be to make sure that you use the correct Squiggly SWC file.

The release notes for 0.5 to 0.6 (http://labs.adobe.com/technologies/squiggly/releasenotes.html#new) show that Squiggly added support for Spark TextInput, TextArea, and RichEditableText components (0.6).

This was not obvious to me was that the support of these components is in the libs/AdobeSpellingUIEx.swc (rather than libs/AdobeSpellingUI.swc) file, which seems to provide a scope/alternative version of SpellUI.enableSpelling (...).

The trick was to remove the libs/AdobeSpellingUI.swc file, which ensures that the correct version of SpellUI.enableSpelling (...) is used. I came across this post abother: http://forums.adobe.com/thread/870995

Example of smart is quite correct, except that the screenshot of the folder libs indicates that the AdobeSpellingUI.swc file has not been deleted. If this file is deleted, the example should work as you want, with the spelling of MX and Spark components.

To sum up, to support the Spark components (as well as MX components):
- Use SpellUI.enableSpelling (...) as shown, not SpellUIForTLF.enableSpelling (...).
- Make sure that you use libs/AdobeSpellingUIEx.swc (by removing the libs/AdobeSpellingUI.swc).

Customization of Spark TextInput

Similar Questions

Maybe you are looking for