Re: [FlexJS] TextInput/Form validation

[Alex Harui]

On 9/20/16, 11:43 AM, "OK"  wrote:

>Thanks Peter and Alex, I'll try to implement it. It's probably a good
>exercise.
>I'll start with studying the existing code... we'll see... don't expect
>too
>much ;-)

Hi Olaf,

Thanks for volunteering.  I don't remember how familiar you are with
framework development; it is a bit different from application development,
and FlexJS components that cross-compile are even more complex, but I'm
sure you will eventually be successful if you have the time and patience
to put up with being on the bleeding edge.  We want to learn from your
experience as to what else we need in both documentation and code so
others can create and share components as well.

So, feel free to ask questions and prepare for bumps in the road ahead.

Thanks,
-Alex

Re: [FlexJS] TextInput/Form validation

[OK]

Thanks Peter and Alex, I'll try to implement it. It's probably a good
exercise.
I'll start with studying the existing code... we'll see... don't expect too
much ;-)

Thanks,
Olaf



--
View this message in context: 
http://apache-flex-users.246.n4.nabble.com/FlexJS-TextInput-Form-validation-tp13577p13595.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.

Re: [FlexJS] TextInput/Form validation

[Peter Ent]

If you use beads, the JS code in the bead would add "require", for
example, to the  element, but the SWF code might be empty since
there is nothing on the SWF side to support a required input field. One
day you or someone might fill in that SWF code block.

If you use beads, the developer would add the beads onto to those fields
that needed them:



   




Here, the firstName field is required so it includes the
RequiredFieldBead, but the nickname field is optional so you don't add it.

Your alternative, as Alex said, it just to add things as properties to the
HTML5 version of the TextInput component:




it is sure less to type for the developer, but both instances carry with
the code to handle the required property. But since this is HTML5-only, it
wouldn't be a big deal. In fact, you could mix the two:




Then the nickname is just the simpler code.

‹peter

On 9/20/16, 1:43 PM, "OK"  wrote:

>>Yes, beads would be a good thing, but IMO, it is only necessary for the
>>COMPILE::SWF code, since it is the SWF code that doesn't have built-in
>>functionality to rely on.
>
>If we'd go this way, does it mean that at the end users would have to add
>beans to make sure that the SWF version works and also have to add the
>properties to the TextInput component to make sure that the JS version
>works?
>
>Thanks,
>Olaf
>
>
>
>--
>View this message in context:
>http://apache-flex-users.246.n4.nabble.com/FlexJS-TextInput-Form-valid
>ation-tp13577p13592.html
>Sent from the Apache Flex Users mailing list archive at Nabble.com.

Re: [FlexJS] TextInput/Form validation

[OK]

>Yes, beads would be a good thing, but IMO, it is only necessary for the
>COMPILE::SWF code, since it is the SWF code that doesn't have built-in
>functionality to rely on.

If we'd go this way, does it mean that at the end users would have to add
beans to make sure that the SWF version works and also have to add the
properties to the TextInput component to make sure that the JS version
works?

Thanks,
Olaf



--
View this message in context: 
http://apache-flex-users.246.n4.nabble.com/FlexJS-TextInput-Form-validation-tp13577p13592.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.

Re: [FlexJS] TextInput/Form validation

[Alex Harui]

Yes, beads would be a good thing, but IMO, it is only necessary for the
COMPILE::SWF code, since it is the SWF code that doesn't have built-in
functionality to rely on.  Because we have a regular
org.apache.flex.html.TextInput that can serve as the baseline for folks
who don't need these form fields, it is reasonable to think of
org.apache.flex.html5.TextInput as an aggregation on top of
org.apache.flex.html.TextInput so it can get away with baking a few more
things in.

If you look through existing components like Container, you'll see more
beads and support components on the COMPILE::SWF version implementing
non-built-in things in Flash like scrollbars and clipping.

On the other hand, something like the PromptBead is a bead on both JS and
SWF because it can be re-used in more than one component.

So, there isn't one right solution, you have to factor in re-usability of
code vs the overhead of encapsulating it.

Thanks,
-Alex

On 9/20/16, 7:00 AM, "Peter Ent"  wrote:

>Hi,
>
>If you want to make this modification you should do it in the HTML5
>project. Keep in mind that "required" and "pattern" should be implemented
>for SWF as well or at least do something suitable. I would suggest using
>beads:
>
>
>   
>  
>  
>   
>
>
>The beads would then have their JS code all within COMPILE::JS blocks. The
>SWF side might just be blank for now until someone implements them. I
>suppose you could add required and pattern properties to the HTML5 text
>input, but in the PAYG world, this would add overhead to all the times
>when you don't need those features.
>
>Anyway, you need to access the underlying element on the JS side:
>
>COMPILE::JS
>override protected function createElement():WrappedHTMLElement {
>super.createElement();
>
>At this point the this.element is created for you and is an 
>element. Just look at the HTML project's TextInput.as file. If you going
>with the required and pattern properties route, then add them to the
>element here.
>
>If you going the beads route, you don't need to change the TextInput class
>at all as each bead's strand setter would get the element from the strand
>and set the appropriate property on the  element at that point.
>
>At least that's how I'd start out.
>
>HTH,
>Peter Ent
>Adobe Systems/Apache Flex Project
>
>
>
>On 9/20/16, 3:17 AM, "OK"  wrote:
>
>>>Want to make it happen?
>>I could give it a first try tonight.
>>Any help how to achieve this is appreciated ;-)
>>
>>Thanks,
>>Olaf
>>
>>
>>
>>--
>>View this message in context:
>>http://apache-flex-users.246.n4.nabble.com/FlexJS-TextInput-Form-vali
>>d
>>ation-tp13577p13585.html
>>Sent from the Apache Flex Users mailing list archive at Nabble.com.
>

Re: [FlexJS] TextInput/Form validation

[Peter Ent]

Hi,

If you want to make this modification you should do it in the HTML5
project. Keep in mind that "required" and "pattern" should be implemented
for SWF as well or at least do something suitable. I would suggest using
beads:


   
  
  
   


The beads would then have their JS code all within COMPILE::JS blocks. The
SWF side might just be blank for now until someone implements them. I
suppose you could add required and pattern properties to the HTML5 text
input, but in the PAYG world, this would add overhead to all the times
when you don't need those features.

Anyway, you need to access the underlying element on the JS side:

COMPILE::JS
override protected function createElement():WrappedHTMLElement {
super.createElement();

At this point the this.element is created for you and is an 
element. Just look at the HTML project's TextInput.as file. If you going
with the required and pattern properties route, then add them to the
element here.

If you going the beads route, you don't need to change the TextInput class
at all as each bead's strand setter would get the element from the strand
and set the appropriate property on the  element at that point.

At least that's how I'd start out.

HTH,
Peter Ent
Adobe Systems/Apache Flex Project



On 9/20/16, 3:17 AM, "OK"  wrote:

>>Want to make it happen?
>I could give it a first try tonight.
>Any help how to achieve this is appreciated ;-)
>
>Thanks,
>Olaf
>
>
>
>--
>View this message in context:
>http://apache-flex-users.246.n4.nabble.com/FlexJS-TextInput-Form-valid
>ation-tp13577p13585.html
>Sent from the Apache Flex Users mailing list archive at Nabble.com.

Re: [FlexJS] TextInput/Form validation

[OK]

>Want to make it happen? 
I could give it a first try tonight.
Any help how to achieve this is appreciated ;-)

Thanks,
Olaf



--
View this message in context: 
http://apache-flex-users.246.n4.nabble.com/FlexJS-TextInput-Form-validation-tp13577p13585.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.

Re: [FlexJS] TextInput/Form validation

[Alex Harui]

On 9/20/16, 12:00 AM, "OK"  wrote:

>Alex Harui wrote
>> What APIs are you referring to?
>
>My understanding is that FlexJS converts "org.apache.flex.html5.TextInput"
>to "".
>The html5 "" element provides an "required" and "pattern" attribute
>[1][2].
>So the question is if it makes sense (and if it would be possible) to make
>all these html5 "build in" attributes available as properties in
>"org.apache.flex.html5.TextInput".

Yes, makes sense and should be possible.  Want to make it happen?  I'm
done for today, but hopefully others in your timezone can help if you get
stuck.

-Alex

Re: [FlexJS] TextInput/Form validation

[OK]

Alex Harui wrote
> What APIs are you referring to?

My understanding is that FlexJS converts "org.apache.flex.html5.TextInput"
to "".
The html5 "" element provides an "required" and "pattern" attribute
[1][2].
So the question is if it makes sense (and if it would be possible) to make
all these html5 "build in" attributes available as properties in
"org.apache.flex.html5.TextInput".

Thanks,
Olaf

[1] 
[2] https://codepen.io/ok-at-codepen/pen/pEEmKj



--
View this message in context: 
http://apache-flex-users.246.n4.nabble.com/FlexJS-TextInput-Form-validation-tp13577p13583.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.

Re: [FlexJS] TextInput/Form validation

[Alex Harui]

On 9/19/16, 11:41 AM, "OK"  wrote:

>Thanks Peter, found the PasswordInputBead.
>I wonder if there's any way do tell FlexJS to just use the html5 build in
>validation features?

What APIs are you referring to?  At least for now, the components in the
HTML.swc should not depend on HTML5.  We have an HTML5.swc where a
completely different version of TextInput could go, or new beads could be
added to HTML5.swc that enable HTML5-only APIs on the TextInput from
HTML.swc

Thanks,
-Alex

Re: [FlexJS] TextInput/Form validation

[Peter Ent]

That I don't know. If it is something possible with JavaScript, then you
could code that within COMPILE::JS {  }
block.

‹peter

On 9/19/16, 2:41 PM, "OK"  wrote:

>Thanks Peter, found the PasswordInputBead.
>I wonder if there's any way do tell FlexJS to just use the html5 build in
>validation features?
>
>Thanks,
>Olaf
>
>
>
>
>--
>View this message in context:
>http://apache-flex-users.246.n4.nabble.com/FlexJS-TextInput-Form-valid
>ation-tp13577p13579.html
>Sent from the Apache Flex Users mailing list archive at Nabble.com.

Re: [FlexJS] TextInput/Form validation

[OK]

Thanks Peter, found the PasswordInputBead.
I wonder if there's any way do tell FlexJS to just use the html5 build in
validation features?

Thanks,
Olaf




--
View this message in context: 
http://apache-flex-users.246.n4.nabble.com/FlexJS-TextInput-Form-validation-tp13577p13579.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.

Re: [FlexJS] TextInput/Form validation

[Peter Ent]

You would need to write a bead or two. Check out the password bead in the 
accessories folder of the HTML project.

Peter


On Sep 19, 2016, at 2:21 PM, OK 
<p...@olafkrueger.net<mailto:p...@olafkrueger.net>> wrote:

Hi,
is there already any chance to validate input fields and mark it as required
using FlexJS?

Thanks,
Olaf



--
View this message in context: 
http://apache-flex-users.246.n4.nabble.com/FlexJS-TextInput-Form-validation-tp13577.html
Sent from the Apache Flex Users mailing list archive at 
Nabble.com<http://Nabble.com>.

[FlexJS] TextInput/Form validation

[OK]

Hi,
is there already any chance to validate input fields and mark it as required
using FlexJS?

Thanks,
Olaf



--
View this message in context: 
http://apache-flex-users.246.n4.nabble.com/FlexJS-TextInput-Form-validation-tp13577.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.