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
