I have a spark TextInput control that I would like to automatically format as the user types into it. The format is something like XX-XX-XXX-XXX where each X is a digit.
I have create a custom Formatter that I am using to display these values in other locations, but I'm having trouble getting an elegant solution to provide this sort of automated formatting in the TextInput control itself.
Here is the code that I current have. It works, but when the formatter inserts one of the hyphen, the insertion point of the TextInput does not advance, so the next digit gets inserted in the next-to-last position.
<fx:Script>
protected function changeHandler(event:TextOperationEvent):void
{
itemID.text = formatter.format(itemID.text);
}
</fx:Script>
<fx:Declarations>
<formatters:MyFormatter id="formatter" separator="-" pattern="{[2,2,3,3]}" />
</fx:Declarations>
<s:Form>
<s:FormItem label="Item ID:">
<s:TextInput id="itemID" restrict="0-9" change="changeHandler(event)" prompt="ex. xx-xx-xxx-xxx" />
</s:FormItem>
</s:Form>
Here is the result of typing in the characters 1,2,3,4,5,6,7,8,9,0 in sequence. As you can see, the insertion point is three characters from the end which corresponds to the three inserted hyphens.
Any suggestions on creating a smooth UX here?
If you itemID is a TextField based class use this:
itemID.setSelection(itemID.length, itemID.length);
It will move the caret to the end of the TF.
Related
I am using MvxAutoCompleteTextView (MVVM Cross's custom AutoCompleteTextView) and have the List appearing fine and the ItemTemplate displaying as expected.
When I click on one of the Items in the List the Text property gets set to the full name of the Type of object in the List. For example if the List contained objects of type MyObject in a namespace of MyCompany.MyDept the text property would be set to the string "MyCompany.MyDep.MyObject"
Anyone else ever seen this?
UPDATE
It looks like Android's AutoCompleteTextView prefers just a list of strings as the source of the list.
There is a method in the Android code called ConvertSelectionToStringFormatted but I cannot see how to provide an alternative to that
If you look at my UPDATE in the question you will see that the problem lay with ConvertSelectionToStringFormatted.
I could not see how to easily create a custom version of MvxAutoCompleteTextView with my own implemenation of ConvertSelectionToStringFormatted so I need a different approach.
Android's AutoCompleteTextView was obviously calling ToString on the selected object so I overrode ToString in my object to return a display name that was more useful than "MyCompany.MyDep.MyObject"
I thought I would also include my final axml for the control as that was pretty important
<MvxAutoCompleteTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:completionThreshold="1"
android:hint="Enter drug name..."
local:MvxItemTemplate="#layout/item_myObj"
local:MvxBind="ItemsSource Suggestions;
PartialText SearchTerm;
SelectedObject SelectedObj;" />
Setting completionThreshold was pretty important, when that was not set the control stopped working\searching once I had cleared the box. No matter what I typed after clearing the box (with backspace) it would not autocomplete anymore. Another odd issue when threshold was not set was that the PartialText was binding as an empty string once it went to 1 character! Yes 1 not 0.
Do not make the mistake of binding the Text property of the control. PartialText is the search term leave Text well alone. This caused me lots of odd issues.
Good luck
I have an editable advanceddatagrid (editable column). I am providing the arraycollection as a dataprovider. (fname(string), lname(string), bdate(Date)). (3 columns)
I have created the VO for fname, lname, and bdate. Whenever I edit bdate and focus out , it will try to get saved the string value as a Date and got failed (which is obvious). By default, editor consider "TextInput" as an itemeditor and save the inserted date as a text and that text value getting refused by the VO which is expecting behavior.
I tried to update the value in "ItemEditEnd" event handler but it wont allow me to do that.
I also tried to put a check at VO but it never reached there. (I am not sure why)
I have to strictly keep the VO as Date instead of text.
Is there anyway we can convert string into Date ? Any other place ? Is there anything I can do at collection change ?
Please help me if possible.
thanks,
For this, I would use another approach than the one you are suggesting.
<s:GridColumn headerText="Birth Date" dataField="bdate" rendererIsEditable="true">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<mx:DateField selectedDate="#{data.bdate}"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
In this example I am using an ItemRenderer which will also function as the ItemEditor.
In this case it is a DateField, which will be able to cope with the date property you have in your VO without the need to be parsing dates manually.
Suggested for you to read up:
http://www.adobe.com/devnet/flex/articles/itemeditors_pt1.html
http://livedocs.adobe.com/flex/3/html/help.html?content=cellrenderer_3.html
i want to apply masking over the textinput that need to get SSN from user so How apply SSN masking over text input in Flash Builder 4?
The most elegant solution in the long run would be to create a custom component, but it could also be done within an existing TextInput. Give the TextInput a change event that does the following:
var s:String=textInput.text.replace(/[^0-9]/g,"");
textInput.text = s.substring(0,3) +
(s.length>3?"-"+s.substring(3,5)+
(s.length>5?"-"+s.substring(5,9):""):"");
textInput.selectRange(textInput.text.length,textInput.text.length);
This will mask the characters:
txtInput.displayAsPassword = true;
<s:TextInput displayAsPassword="true" restrict="0-9" maxChars="9"/> will cause the text to be shown as asterisks when the user is entering it, and will also prevent them from entering more than 9 characters, or any characters that are not numeric, both of which are requirements of SSNs.
I work with AIR.
I have to window, one with list ( a glossary) and another with datagrid and editable cells.
The goal is to drag item on list and drop it on cursor position on itemEditor (datagrid).
I don't know how to do that.
This below the code I use to do the same action not in the datagrid but on a textarea what is on the same datagrid window.
// On 1st window (glossary)
<s:List dataProvider="{DP_GlossList2}" id="list2"
labelField="glNom"
dragEnabled="true"
dropEnabled="true"
dragMoveEnabled="true"
click="list2_clickHandler(event)"
height="60%" width="100%"/>
// on second window : textarea and datagrid
// drag drop
protected function retTTAfaire_dragDropHandler(event:DragEvent):void
{
retTTAfaire.text = retTTAfaire.text.substring(0,retTTAfaire.selectionAnchorPosition)+ " "+event.dragSource.dataForFormat("itemsByIndex")[0].glNom+
" "+retTTAfaire.text.substring(retTTAfaire.selectionAnchorPosition+1);
}
protected function retTTAfaire_dragEnterHandler(event:DragEvent):void
{
DragManager.acceptDragDrop(spark.components.TextArea(event.target));
}
Please, help me.
Thanks
I don't have an exact answer, but one area to investigate is using the getObjectsUnderPoint() method (from DisplayObjectContainer). Using a point - from the local coordinate system from the Drag/Mouse event. This will get you looking at the "right" branch of the display tree.
I think your hard part to figure out is knowing exactly which element you want to interact with - in this case the item editor. When iterating your suspect list, you'll want to compare it against an interface that the ItemEditor (IGridItemRenderer) is known to have but not other objects.
Also depending on what reference the mouseX/mouseY coordinates lie in, you'll most likely need to convert it to the same coordinate system that the item editor is in - in this case Editors are handled by the PopupManager (or the SystemManager) - or should be if the Flex SDK team followed the same paradigm with spark as they did with halo - but I haven't verified this.
I can't tell from the wording of your question, but if you are trying to allow items to be placed after the item editor is opened - this will get very difficult because of focus management.
I have a black row separator and a grey column separator, but because the row separator gets rendered first, the column separator appears over the top of it, causing what appears to be breaks in the row separator.
Is there any way to change the order these are rendered to prevent this?
I cannot tell you a nice and clean way to do this, however there is a "patch/hack" for this :)
Inside your DataGridSkin, in the place where you redefine the default rowSeparator use can force a greater depth. This is definitely a patch since you hardcode the depth, but it will work.
<!--- #private -->
<fx:Component id="rowSeparator">
<s:Line depth="1000">
<s:stroke>
<s:SolidColorStroke color="0x0000FF" weight="5" caps="square"/>
</s:stroke>
</s:Line>
</fx:Component>