Hi,
I rewrite the MaskedTextInput component to support various important
concepts:
* get/set data vía "text" property (remove "rawText" property). "get" text
remove separators and "set" text format the string to display in the
component. I think this the most important improvement.
* Support for more than one separator (now the property is "separators"). I
added "-+/|()[]{}.", but I think Maxime has a more complete list that I
will check before first commit.
* Now the component "jumps" separator places (i.e: (+34)915.666.77.88)
* Support for custom prompt vía new property "textMaskPrompt" (i.e:
dd/mm/yyyy)
* removed the need of a MaskedTextInputSkin (now using TextInputSkin and
getCurrentSkinState)
* remove the uppercase, so now is a CSS style using property
typographicCase: uppercase;
* flex life cycle is better used (commitProperties) and text is always fine
thanks to dispatchEvent(new Event("textChanged")); both in insertion,
override, etc...
* bettter handling of restricted chars using TextOperationEvent.CHANGING to
cancel the insert operation.
* simplified the logic getting a more clean code (the Automata's logic is
now few methods compared with old version)
* new getter "fullText" to get a convenient method that get the text
formatted with separators included
* removed test validation in latest version posted (this was only for my
testing purposes and not for a final SDK component)
* rewrite the docs.
I think this version is more like a 1.0 version (I need to make some
further testing since I could consider finished but right now I could
considere in a decent shape)
What is not implemented yet:
* Regex patterns like proposed by Justin and Maxime (this will allow us to
restrict a insertion to a Max/Min value).
* A handling of "insertion in a place" (i.e. inserting blank spaces between
chars, or inserts directly in char at position 5). My approach is more like
a normal text input that you can add/remove characters taking into account
all string dragging the rest of string with the operation. Is the way I see
in similar components in other technologies out there. Maybe this could be
discussed or make a configuration to support both methods (i.e:
dragMode="true/false" or something similar)
* As I use TextOperationEvent, I think this component is not mobile
friendly. Maybe someone could point me how we could support it as well
(StageText,...)
* I think copy/paste could be improved supporting "appending" text, as well
select a piece of intermediate text and make cut, copy and paste... (this
maybe could be added soon)
Here is the code:
AS3: https://gist.github.com/carlosrovira/7895322
CSS: https://gist.github.com/carlosrovira/7895435
(I also put the namespace to spark.components, and the Apache header)
demo:
http://www.carlosrovira.com/blog/spark-maskedtextinput-demo/
Feedback is highly appreciated for this version to fix any bug before
commit to experimental library.
Best,
Carlos Rovira
2013/12/11 Carlos Rovira <carlos.rov...@codeoscopic.com>
> Hi Maxime,
>
> love your example, works pretty well :). I think your approach is very
> near the final solution. As my version both requires to implement two or
> three more features to be valid to 99% of Flex SDK users.
>
> In you sample I only could see a little layout problem with IBAN that make
> the text overflow the bounding box when your are near the end of the text.
>
> I agree with your comments of pros and cons of both approaches, and I'm
> open to whatever we want to do.
>
> Maybe, as we reach at this point, we should consider the component a
> "black box", with a well defined API to use, so we could commit a first
> draft of the component (that could ship in experimental lib in the next
> Apache Flex SDK release) that behaves like it does right now and consider
> two main focus:
>
> 1.- What we need to make it work on mobile (I think the FlowOperation is a
> problem if it does not work on mobile, StageText,...)
>
> 2.- Make the enhancements proposed here in this thread (multiple
> separators, complex prompt,...). For example regex could be left to a next
> version and could be introduced without API changes, only need to support
> it as a valid entry on the field...
>
> Best,
>
> Carlos
>
>
>
>
> 2013/12/10 Maxime Cowez <maxime.co...@gmail.com>
>
>> I managed to compile a little demo application of my Gist.
>> http://riastar.github.io/MaskedTextInputFx/
>>
>> What I noticed:
>> - yours handles copy/paste operations, mine doesn't
>> - mine handles the phone and IBAN samples a little better (because of the
>> multiple separators/delimiters)
>> - yours handles the plate sample better: yours has restrictions per
>> character, mine uses TextInput's own 'restrict' property and so it can
>> only
>> limit the input for all characters
>> - mine allows for a more complex prompt (e.g. dd/mm/yyyy for a date)
>> - neither can configure a maximum value (e.g. 12 for the 'mm' mask in a
>> date)
>>
>> I think we'll have best of both worlds if we - that means you ;) - can
>> make
>> it so that we have complex prompt *and* multiple separators. I guess to
>> achieve that, we need a separate property for the prompt and the
>> restrictions. Technically speaking we could simply override the existing
>> 'prompt' and 'restrict' properties to achieve that (dropping the
>> 'textMask/maskText' property).
>> It might also avoid confusion. e.g. what would happen with
>> <s:MaskedTextInput textMask="dd/mm/yyyy" prompt="aa-bb-cccc"/> ?
>> Perhaps a date mask input would be better like this: <s:MaskedTextInput
>> prompt="dd/mm/yyyy" restrict="##-##-##"/>
>> Or maybe using more standard regex patterns: <s:MaskedTextInput
>> prompt="dd/mm/yyyy" restrict="\d{2}-\d{2}-\d{4}"/>
>> The last approach would even allow you to do restrictions on the values in
>> the date (which I think is what Justin suggested).
>> To make it easier for the developer we could also provide some default
>> regex patterns (for instance a date pattern - preferably localized...)
>>
>> What do you think?
>> Max
>>
>>
>> On Tue, Dec 10, 2013 at 7:27 PM, Carlos Rovira <
>> carlos.rov...@codeoscopic.com> wrote:
>>
>> > Hi Maxime and all,
>> >
>> > I share the component in gist to give it access until I have the time to
>> > commit to Flex SDK. You can see it here:
>> >
>> > AS3 Class: https://gist.github.com/carlosrovira/7895322
>> > Skin: https://gist.github.com/carlosrovira/7895395
>> > CSS: https://gist.github.com/carlosrovira/7895435
>> >
>> > As commented, this is the first draft, and it will hopefully evolved in
>> the
>> > experimental library...
>> >
>> > Hope you like it! :)
>> >
>> > Carlos
>> >
>> >
>> >
>> >
>> > 2013/12/10 Maxime Cowez <maxime.co...@gmail.com>
>> >
>> > > @Carlos
>> > > It only *looks *clean and organized on the surface ;)
>> > > But it doesn't really respect the component lifecycle very well. Just
>> > look
>> > > at the last line (the override of dispatchEvent) and the override of
>> > > setText.
>> > > I'll try to cook you an example as soon as I can.
>> > >
>> > >
>> > > On Tue, Dec 10, 2013 at 6:11 PM, Carlos Rovira <
>> > > carlos.rov...@codeoscopic.com> wrote:
>> > >
>> > > > @Maurice. The behavior you describe is the expected behaviour.
>> Before I
>> > > > code the component, I search the web for available solutions, and I
>> see
>> > > the
>> > > > same behaviour adopted in various implementations, so I take that
>> as a
>> > > > pattern... The way you expect it to behave is already valid too and
>> > > widely
>> > > > used...maybe we could take some property to go one behaviour or
>> > > > another...since I think both are valid
>> > > >
>> > > > @Maxime. Thanks for sharing :), In a first quick revision I see it
>> very
>> > > > clean and organized, I'll digg as I get some time :). can you
>> upload a
>> > > demo
>> > > > to some place where we can preview it?. Regarding the skin, It's
>> very
>> > > close
>> > > > to default spark TextInput skin, but I use the prompt to show the
>> > remaing
>> > > > mask, and I removed the incluedIn from prompt. I think nothing more
>> > there
>> > > > :)
>> > > >
>> > > >
>> > > >
>> > > >
>> > > >
>> > > > 2013/12/10 Maxime Cowez <maxime.co...@gmail.com>
>> > > >
>> > > > > @Carlos
>> > > > >
>> > > > > I put my take at a MaskedTextInput in a Gist:
>> > > > > https://gist.github.com/RIAstar/7893328
>> > > > > I repeat: there's some rather dirty code in there, however there's
>> > also
>> > > > > some logic to handle multiple separators with a regex. Perhaps you
>> > can
>> > > > find
>> > > > > some inspiration there.
>> > > > > Apparently I also felt the need for a boolean property called
>> > > > 'isComplete',
>> > > > > which returns true (and fires a property change event) when all
>> > > required
>> > > > > characters have been typed.
>> > > > >
>> > > > > One question though: why did you need a new skin? Seems to me the
>> > > default
>> > > > > TextInput skin should suffice, don't you think?
>> > > > > Max
>> > > > >
>> > > > >
>> > > > > On Tue, Dec 10, 2013 at 5:14 PM, Dany Dhondt <archeme...@mac.com>
>> > > wrote:
>> > > > >
>> > > > > > Great work Carlos! Nice component!
>> > > > > >
>> > > > > > Dany Dhondt
>> > > > > > archeme...@mac.com
>> > > > > >
>> > > > > >
>> > > > > >
>> > > > > > Op 9-dec.-2013, om 19:28 heeft Carlos Rovira <
>> > > carlosrov...@apache.org>
>> > > > > > het volgende geschreven:
>> > > > > >
>> > > > > > > Hi,
>> > > > > > >
>> > > > > > > These days I worked a new spark MaskedTextInput component and
>> I
>> > > want
>> > > > to
>> > > > > > > share a demo of this component so you can play with it.
>> > > > > > > I think there's no such component already in the Flex SDK or
>> out
>> > > > there,
>> > > > > > and
>> > > > > > > as I needed for a project I had to make one from scratch.
>> > > > > > > The component is an extension of spark TextInput.
>> > > > > > >
>> > > > > > > I plan to commit this component to Apache Flex SDK in the next
>> > days
>> > > > > > unless
>> > > > > > > someone let me know another alternative or some info
>> > > > > > > that make this component useless. In order to prepare the
>> commit
>> > I
>> > > > want
>> > > > > > to
>> > > > > > > ask other committers and PMCs here where is the appropriate
>> place
>> > > > > > > to hold this component and share what you consider to take
>> into
>> > > > account
>> > > > > > in
>> > > > > > > order to make a right integration. If someone thinks it's not
>> > worth
>> > > > it
>> > > > > to
>> > > > > > > make it part of the Flex SDK, let me know as well. I don't
>> want
>> > to
>> > > > > commit
>> > > > > > > code that could not be right for the SDK.
>> > > > > > >
>> > > > > > > Here's the link to the demo. I posted as well some doc comment
>> > text
>> > > > to
>> > > > > > > share the properties you can use:
>> > > > > > >
>> > > > > > > http://www.carlosrovira.com/blog/spark-maskedtextinput-demo/
>> > > > > > >
>> > > > > > > Hope you consider it interesting and if you know some other
>> > similar
>> > > > > > > component out there, please let me know! :)
>> > > > > > >
>> > > > > > > Best,
>> > > > > > >
>> > > > > > >
>> > > > > > > --
>> > > > > > > --
>> > > > > > > Carlos Rovira
>> > > > > >
>> > > > > >
>> > > > >
>> > > >
>> > > >
>> > > >
>> > > > --
>> > > > Carlos Rovira
>> > > > Director de Tecnología
>> > > > M: +34 607 22 60 05
>> > > > F: +34 912 94 80 80
>> > > > http://www.codeoscopic.com
>> > > > http://www.directwriter.es
>> > > > http://www.avant2.es
>> > > >
>> > >
>> >
>> >
>> >
>> > --
>> > Carlos Rovira
>> > Director de Tecnología
>> > M: +34 607 22 60 05
>> > F: +34 912 94 80 80
>> > http://www.codeoscopic.com
>> > http://www.directwriter.es
>> > http://www.avant2.es
>> >
>>
>
>
>
> --
> Carlos Rovira
> Director de Tecnología
> M: +34 607 22 60 05
> F: +34 912 94 80 80
> http://www.codeoscopic.com
> http://www.directwriter.es
> http://www.avant2.es
>
--
Carlos Rovira
Director de Tecnología
M: +34 607 22 60 05
F: +34 912 94 80 80
http://www.codeoscopic.com
http://www.directwriter.es
http://www.avant2.es
