You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by Carlos Rovira <ca...@apache.org> on 2016/10/24 21:20:23 UTC

[FlexJS] returning surrounding element in TextInput

Hi,

I'm subclassing TextInput (html)
I need to create a div that surrounds the input.
In html there is only input and that's the element returned.

so my question is...how should I do to return the <div> with the <input>
inside and makes the element points to the input (since the events and
handlers depends of element (the input) to do work properly

Until now I was returning the element as the surrounding div, but this end
in malfunction of change event.

Thanks.

-- 
Carlos Rovira
http://about.me/carlosrovira

Re: [FlexJS] returning surrounding element in TextInput

Posted by Carlos Rovira <ca...@codeoscopic.com>.
Hi Alex,

I implemented the TextPrompBead for MDL and all is working good :)

it was needed an MDL one since MDL does not use placeholder property but a
text inside the label.

Thanks



2016-10-26 12:06 GMT+02:00 Carlos Rovira <ca...@codeoscopic.com>:

> Hi Alex,
>
> the problem was the missing text inside label tags that make the effect to
> play nicely. I think a PromptBead would be good as well, so I'll but it in
> my todo as well other beads we commented.
>
> Thanks again for your help :)
>
> Carlos
>
>
>
> 2016-10-25 20:28 GMT+02:00 Alex Harui <ah...@adobe.com>:
>
>> I took a quick look.  I may have missed something, but IMO, the "floating
>> label" looks like it the same thing we call a "prompt" in Flex.  There is
>> a PromptBead in the FlexJS Basic set.
>>
>> IMO, the prompt/label should not be tied to the "text" property of the
>> TextInput.  When I ran the example, the <label> did not have any string
>> assigned to it.  I would suggest adding either a PromptBead for MDL that
>> sets a string in the <label> and/or adding a "prompt" or "floatingLabel"
>> property to TextInput and using that to set the content of the <label>.
>>
>> HTH,
>> -Alex
>>
>> On 10/25/16, 10:11 AM, "carlos.rovira@gmail.com on behalf of Carlos
>> Rovira" <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org>
>> wrote:
>>
>> >Hi Alex,
>> >
>> >I upload latest changes to git, but still not working as expected.
>> >If you want to check my MDLExample (App.mxml). There's 2 MDL TextInput.
>> >
>> >1.- Left TextInput is working as expected since if you change text, the
>> >checkbox below changes text accordingly.
>> >
>> >2.- Right text input is not working as expected since it should has an
>> MDL
>> >floating text effect (as it's assigned) but is not working. Effect is
>> like
>> >the one in this page:
>> >https://getmdl.io/components/index.html#textfields-section
>> >
>> >In my TextInput previous version (one previous commit ahead) change
>> >handler
>> >(left TI) was not working, but MDL flotating text effect was working.
>> >
>> >I need to get both, change handler and MDL effect to get a successful
>> >implementation.
>> >
>> >I tried lots of things but with no luck. If you could watch this case, we
>> >could get to the end of the problem. As you said is an important problem
>> >since we'll need in more components to surround or decorate with
>> >additional
>> >tags to make other effects and styles without compromising default
>> > functionality.
>> >
>> >Thanks
>> >
>> >
>> >
>> >2016-10-25 8:42 GMT+02:00 Alex Harui <ah...@adobe.com>:
>> >
>> >> Hi Carlos,
>> >>
>> >> I'm not sure we have other components with a different positioner than
>> >> element, so you may be in new territory.  I do want it to work, so it
>> is
>> >> hopefully just a matter of fixing bugs.
>> >>
>> >> How is are the div's missing class selectors specified?  I think UIBase
>> >> className is only set on the element.  You may need to override that.
>> >>
>> >> HTH,  I'm done for tonight.
>> >> -Ale
>> >>
>> >> From: <ca...@gmail.com>> on
>> >>behalf
>> >> of Carlos Rovira
>> >><ca...@apache.org>>
>> >> Date: Monday, October 24, 2016 at 11:04 PM
>> >> To: Alex Harui <ah...@adobe.com>>
>> >> Cc: "dev@flex.apache.org<ma...@flex.apache.org>"
>> >><dev@flex.apache.org
>> >> <ma...@flex.apache.org>>
>> >> Subject: Re: [FlexJS] returning surrounding element in TextInput
>> >>
>> >> Hi Alex,
>> >>
>> >> this seems not work. I have this:
>> >>
>> >>             element = input as WrappedHTMLElement;
>> >>
>> >>             positioner = div as WrappedHTMLElement;
>> >>             positioner.style.position = 'relative';
>> >>             (div as WrappedHTMLElement).flexjs_wrapper = this;
>> >>             (input as WrappedHTMLElement).flexjs_wrapper = this;
>> >>             (label as WrappedHTMLElement).flexjs_wrapper = this;
>> >>             element.flexjs_wrapper = this;
>> >>
>> >>
>> >> In this way input change handler works, but MDL look is messed, this is
>> >> the code generated, that is missing the first div class selectors:
>> >>
>> >> <div style="position: relative;">
>> >>      <input type="text" class="mdl-textfield mdl-js-textfield
>> >> mdl-textfield mdl-js-textfield" data-upgraded=",MaterialTextfield">
>> >>      <label class="mdl-textfield__label"></label>
>> >> </div>
>> >>
>> >>
>> >> 2016-10-24 23:59 GMT+02:00 Alex Harui <aharui@adobe.com<mailto:aharu
>> >> i@adobe.com>>:
>> >> Try setting element as input and positioner as div.
>> >>
>> >> Sent from my LG G3, an AT&T 4G LTE smartphone
>> >>
>> >> ------ Original message------
>> >> From: Carlos Rovira
>> >> Date: Mon, Oct 24, 2016 2:20 PM
>> >> To: dev@flex.apache.org<ma...@flex.apache.org>;
>> >> Subject:[FlexJS] returning surrounding element in TextInput
>> >>
>> >> Hi,
>> >>
>> >> I'm subclassing TextInput (html)
>> >> I need to create a div that surrounds the input.
>> >> In html there is only input and that's the element returned.
>> >>
>> >> so my question is...how should I do to return the <div> with the
>> <input>
>> >> inside and makes the element points to the input (since the events and
>> >> handlers depends of element (the input) to do work properly
>> >>
>> >> Until now I was returning the element as the surrounding div, but this
>> >>end
>> >> in malfunction of change event.
>> >>
>> >> Thanks.
>> >>
>> >> --
>> >> Carlos Rovira
>> >> http://about.me/carlosrovira
>> >>
>> >>
>> >>
>> >> --
>> >> Carlos Rovira
>> >> http://about.me/carlosrovira
>> >>
>> >>
>> >
>> >
>> >--
>> >Carlos Rovira
>> >http://about.me/carlosrovira
>>
>>
>
>
> --
>
> Carlos Rovira
> Director General
> M: +34 607 22 60 05
> http://www.codeoscopic.com
> http://www.avant2.es
>
>
> Este mensaje se dirige exclusivamente a su destinatario y puede contener
> información privilegiada o confidencial. Si ha recibido este mensaje por
> error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
> proceda a su destrucción.
>
> De la vigente Ley Orgánica de Protección de Datos (15/1999), le
> comunicamos que sus datos forman parte de un fichero cuyo responsable es
> CODEOSCOPIC S.A. La finalidad de dicho tratamiento es facilitar la
> prestación del servicio o información solicitados, teniendo usted derecho
> de acceso, rectificación, cancelación y oposición de sus datos dirigiéndose
> a nuestras oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la
> documentación necesaria.
>
>


-- 

Carlos Rovira
Director General
M: +34 607 22 60 05
http://www.codeoscopic.com
http://www.avant2.es


Este mensaje se dirige exclusivamente a su destinatario y puede contener
información privilegiada o confidencial. Si ha recibido este mensaje por
error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
proceda a su destrucción.

De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos
que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
S.A. La finalidad de dicho tratamiento es facilitar la prestación del
servicio o información solicitados, teniendo usted derecho de acceso,
rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras
oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
necesaria.

Re: [FlexJS] returning surrounding element in TextInput

Posted by Carlos Rovira <ca...@codeoscopic.com>.
Hi Alex,

the problem was the missing text inside label tags that make the effect to
play nicely. I think a PromptBead would be good as well, so I'll but it in
my todo as well other beads we commented.

Thanks again for your help :)

Carlos



2016-10-25 20:28 GMT+02:00 Alex Harui <ah...@adobe.com>:

> I took a quick look.  I may have missed something, but IMO, the "floating
> label" looks like it the same thing we call a "prompt" in Flex.  There is
> a PromptBead in the FlexJS Basic set.
>
> IMO, the prompt/label should not be tied to the "text" property of the
> TextInput.  When I ran the example, the <label> did not have any string
> assigned to it.  I would suggest adding either a PromptBead for MDL that
> sets a string in the <label> and/or adding a "prompt" or "floatingLabel"
> property to TextInput and using that to set the content of the <label>.
>
> HTH,
> -Alex
>
> On 10/25/16, 10:11 AM, "carlos.rovira@gmail.com on behalf of Carlos
> Rovira" <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org>
> wrote:
>
> >Hi Alex,
> >
> >I upload latest changes to git, but still not working as expected.
> >If you want to check my MDLExample (App.mxml). There's 2 MDL TextInput.
> >
> >1.- Left TextInput is working as expected since if you change text, the
> >checkbox below changes text accordingly.
> >
> >2.- Right text input is not working as expected since it should has an MDL
> >floating text effect (as it's assigned) but is not working. Effect is like
> >the one in this page:
> >https://getmdl.io/components/index.html#textfields-section
> >
> >In my TextInput previous version (one previous commit ahead) change
> >handler
> >(left TI) was not working, but MDL flotating text effect was working.
> >
> >I need to get both, change handler and MDL effect to get a successful
> >implementation.
> >
> >I tried lots of things but with no luck. If you could watch this case, we
> >could get to the end of the problem. As you said is an important problem
> >since we'll need in more components to surround or decorate with
> >additional
> >tags to make other effects and styles without compromising default
> > functionality.
> >
> >Thanks
> >
> >
> >
> >2016-10-25 8:42 GMT+02:00 Alex Harui <ah...@adobe.com>:
> >
> >> Hi Carlos,
> >>
> >> I'm not sure we have other components with a different positioner than
> >> element, so you may be in new territory.  I do want it to work, so it is
> >> hopefully just a matter of fixing bugs.
> >>
> >> How is are the div's missing class selectors specified?  I think UIBase
> >> className is only set on the element.  You may need to override that.
> >>
> >> HTH,  I'm done for tonight.
> >> -Ale
> >>
> >> From: <ca...@gmail.com>> on
> >>behalf
> >> of Carlos Rovira
> >><ca...@apache.org>>
> >> Date: Monday, October 24, 2016 at 11:04 PM
> >> To: Alex Harui <ah...@adobe.com>>
> >> Cc: "dev@flex.apache.org<ma...@flex.apache.org>"
> >><dev@flex.apache.org
> >> <ma...@flex.apache.org>>
> >> Subject: Re: [FlexJS] returning surrounding element in TextInput
> >>
> >> Hi Alex,
> >>
> >> this seems not work. I have this:
> >>
> >>             element = input as WrappedHTMLElement;
> >>
> >>             positioner = div as WrappedHTMLElement;
> >>             positioner.style.position = 'relative';
> >>             (div as WrappedHTMLElement).flexjs_wrapper = this;
> >>             (input as WrappedHTMLElement).flexjs_wrapper = this;
> >>             (label as WrappedHTMLElement).flexjs_wrapper = this;
> >>             element.flexjs_wrapper = this;
> >>
> >>
> >> In this way input change handler works, but MDL look is messed, this is
> >> the code generated, that is missing the first div class selectors:
> >>
> >> <div style="position: relative;">
> >>      <input type="text" class="mdl-textfield mdl-js-textfield
> >> mdl-textfield mdl-js-textfield" data-upgraded=",MaterialTextfield">
> >>      <label class="mdl-textfield__label"></label>
> >> </div>
> >>
> >>
> >> 2016-10-24 23:59 GMT+02:00 Alex Harui <aharui@adobe.com<mailto:aharu
> >> i@adobe.com>>:
> >> Try setting element as input and positioner as div.
> >>
> >> Sent from my LG G3, an AT&T 4G LTE smartphone
> >>
> >> ------ Original message------
> >> From: Carlos Rovira
> >> Date: Mon, Oct 24, 2016 2:20 PM
> >> To: dev@flex.apache.org<ma...@flex.apache.org>;
> >> Subject:[FlexJS] returning surrounding element in TextInput
> >>
> >> Hi,
> >>
> >> I'm subclassing TextInput (html)
> >> I need to create a div that surrounds the input.
> >> In html there is only input and that's the element returned.
> >>
> >> so my question is...how should I do to return the <div> with the <input>
> >> inside and makes the element points to the input (since the events and
> >> handlers depends of element (the input) to do work properly
> >>
> >> Until now I was returning the element as the surrounding div, but this
> >>end
> >> in malfunction of change event.
> >>
> >> Thanks.
> >>
> >> --
> >> Carlos Rovira
> >> http://about.me/carlosrovira
> >>
> >>
> >>
> >> --
> >> Carlos Rovira
> >> http://about.me/carlosrovira
> >>
> >>
> >
> >
> >--
> >Carlos Rovira
> >http://about.me/carlosrovira
>
>


-- 

Carlos Rovira
Director General
M: +34 607 22 60 05
http://www.codeoscopic.com
http://www.avant2.es


Este mensaje se dirige exclusivamente a su destinatario y puede contener
información privilegiada o confidencial. Si ha recibido este mensaje por
error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
proceda a su destrucción.

De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos
que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
S.A. La finalidad de dicho tratamiento es facilitar la prestación del
servicio o información solicitados, teniendo usted derecho de acceso,
rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras
oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
necesaria.

Re: [FlexJS] returning surrounding element in TextInput

Posted by Alex Harui <ah...@adobe.com>.
I took a quick look.  I may have missed something, but IMO, the "floating
label" looks like it the same thing we call a "prompt" in Flex.  There is
a PromptBead in the FlexJS Basic set.

IMO, the prompt/label should not be tied to the "text" property of the
TextInput.  When I ran the example, the <label> did not have any string
assigned to it.  I would suggest adding either a PromptBead for MDL that
sets a string in the <label> and/or adding a "prompt" or "floatingLabel"
property to TextInput and using that to set the content of the <label>.

HTH,
-Alex

On 10/25/16, 10:11 AM, "carlos.rovira@gmail.com on behalf of Carlos
Rovira" <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org>
wrote:

>Hi Alex,
>
>I upload latest changes to git, but still not working as expected.
>If you want to check my MDLExample (App.mxml). There's 2 MDL TextInput.
>
>1.- Left TextInput is working as expected since if you change text, the
>checkbox below changes text accordingly.
>
>2.- Right text input is not working as expected since it should has an MDL
>floating text effect (as it's assigned) but is not working. Effect is like
>the one in this page:
>https://getmdl.io/components/index.html#textfields-section
>
>In my TextInput previous version (one previous commit ahead) change
>handler
>(left TI) was not working, but MDL flotating text effect was working.
>
>I need to get both, change handler and MDL effect to get a successful
>implementation.
>
>I tried lots of things but with no luck. If you could watch this case, we
>could get to the end of the problem. As you said is an important problem
>since we'll need in more components to surround or decorate with
>additional
>tags to make other effects and styles without compromising default
> functionality.
>
>Thanks
>
>
>
>2016-10-25 8:42 GMT+02:00 Alex Harui <ah...@adobe.com>:
>
>> Hi Carlos,
>>
>> I'm not sure we have other components with a different positioner than
>> element, so you may be in new territory.  I do want it to work, so it is
>> hopefully just a matter of fixing bugs.
>>
>> How is are the div's missing class selectors specified?  I think UIBase
>> className is only set on the element.  You may need to override that.
>>
>> HTH,  I'm done for tonight.
>> -Ale
>>
>> From: <ca...@gmail.com>> on
>>behalf
>> of Carlos Rovira
>><ca...@apache.org>>
>> Date: Monday, October 24, 2016 at 11:04 PM
>> To: Alex Harui <ah...@adobe.com>>
>> Cc: "dev@flex.apache.org<ma...@flex.apache.org>"
>><dev@flex.apache.org
>> <ma...@flex.apache.org>>
>> Subject: Re: [FlexJS] returning surrounding element in TextInput
>>
>> Hi Alex,
>>
>> this seems not work. I have this:
>>
>>             element = input as WrappedHTMLElement;
>>
>>             positioner = div as WrappedHTMLElement;
>>             positioner.style.position = 'relative';
>>             (div as WrappedHTMLElement).flexjs_wrapper = this;
>>             (input as WrappedHTMLElement).flexjs_wrapper = this;
>>             (label as WrappedHTMLElement).flexjs_wrapper = this;
>>             element.flexjs_wrapper = this;
>>
>>
>> In this way input change handler works, but MDL look is messed, this is
>> the code generated, that is missing the first div class selectors:
>>
>> <div style="position: relative;">
>>      <input type="text" class="mdl-textfield mdl-js-textfield
>> mdl-textfield mdl-js-textfield" data-upgraded=",MaterialTextfield">
>>      <label class="mdl-textfield__label"></label>
>> </div>
>>
>>
>> 2016-10-24 23:59 GMT+02:00 Alex Harui <aharui@adobe.com<mailto:aharu
>> i@adobe.com>>:
>> Try setting element as input and positioner as div.
>>
>> Sent from my LG G3, an AT&T 4G LTE smartphone
>>
>> ------ Original message------
>> From: Carlos Rovira
>> Date: Mon, Oct 24, 2016 2:20 PM
>> To: dev@flex.apache.org<ma...@flex.apache.org>;
>> Subject:[FlexJS] returning surrounding element in TextInput
>>
>> Hi,
>>
>> I'm subclassing TextInput (html)
>> I need to create a div that surrounds the input.
>> In html there is only input and that's the element returned.
>>
>> so my question is...how should I do to return the <div> with the <input>
>> inside and makes the element points to the input (since the events and
>> handlers depends of element (the input) to do work properly
>>
>> Until now I was returning the element as the surrounding div, but this
>>end
>> in malfunction of change event.
>>
>> Thanks.
>>
>> --
>> Carlos Rovira
>> http://about.me/carlosrovira
>>
>>
>>
>> --
>> Carlos Rovira
>> http://about.me/carlosrovira
>>
>>
>
>
>-- 
>Carlos Rovira
>http://about.me/carlosrovira


Re: [FlexJS] returning surrounding element in TextInput

Posted by Carlos Rovira <ca...@apache.org>.
Hi Alex,

I upload latest changes to git, but still not working as expected.
If you want to check my MDLExample (App.mxml). There's 2 MDL TextInput.

1.- Left TextInput is working as expected since if you change text, the
checkbox below changes text accordingly.

2.- Right text input is not working as expected since it should has an MDL
floating text effect (as it's assigned) but is not working. Effect is like
the one in this page:
https://getmdl.io/components/index.html#textfields-section

In my TextInput previous version (one previous commit ahead) change handler
(left TI) was not working, but MDL flotating text effect was working.

I need to get both, change handler and MDL effect to get a successful
implementation.

I tried lots of things but with no luck. If you could watch this case, we
could get to the end of the problem. As you said is an important problem
since we'll need in more components to surround or decorate with additional
tags to make other effects and styles without compromising default
 functionality.

Thanks



2016-10-25 8:42 GMT+02:00 Alex Harui <ah...@adobe.com>:

> Hi Carlos,
>
> I'm not sure we have other components with a different positioner than
> element, so you may be in new territory.  I do want it to work, so it is
> hopefully just a matter of fixing bugs.
>
> How is are the div's missing class selectors specified?  I think UIBase
> className is only set on the element.  You may need to override that.
>
> HTH,  I'm done for tonight.
> -Ale
>
> From: <ca...@gmail.com>> on behalf
> of Carlos Rovira <ca...@apache.org>>
> Date: Monday, October 24, 2016 at 11:04 PM
> To: Alex Harui <ah...@adobe.com>>
> Cc: "dev@flex.apache.org<ma...@flex.apache.org>" <dev@flex.apache.org
> <ma...@flex.apache.org>>
> Subject: Re: [FlexJS] returning surrounding element in TextInput
>
> Hi Alex,
>
> this seems not work. I have this:
>
>             element = input as WrappedHTMLElement;
>
>             positioner = div as WrappedHTMLElement;
>             positioner.style.position = 'relative';
>             (div as WrappedHTMLElement).flexjs_wrapper = this;
>             (input as WrappedHTMLElement).flexjs_wrapper = this;
>             (label as WrappedHTMLElement).flexjs_wrapper = this;
>             element.flexjs_wrapper = this;
>
>
> In this way input change handler works, but MDL look is messed, this is
> the code generated, that is missing the first div class selectors:
>
> <div style="position: relative;">
>      <input type="text" class="mdl-textfield mdl-js-textfield
> mdl-textfield mdl-js-textfield" data-upgraded=",MaterialTextfield">
>      <label class="mdl-textfield__label"></label>
> </div>
>
>
> 2016-10-24 23:59 GMT+02:00 Alex Harui <aharui@adobe.com<mailto:aharu
> i@adobe.com>>:
> Try setting element as input and positioner as div.
>
> Sent from my LG G3, an AT&T 4G LTE smartphone
>
> ------ Original message------
> From: Carlos Rovira
> Date: Mon, Oct 24, 2016 2:20 PM
> To: dev@flex.apache.org<ma...@flex.apache.org>;
> Subject:[FlexJS] returning surrounding element in TextInput
>
> Hi,
>
> I'm subclassing TextInput (html)
> I need to create a div that surrounds the input.
> In html there is only input and that's the element returned.
>
> so my question is...how should I do to return the <div> with the <input>
> inside and makes the element points to the input (since the events and
> handlers depends of element (the input) to do work properly
>
> Until now I was returning the element as the surrounding div, but this end
> in malfunction of change event.
>
> Thanks.
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
>


-- 
Carlos Rovira
http://about.me/carlosrovira

Re: [FlexJS] returning surrounding element in TextInput

Posted by Alex Harui <ah...@adobe.com>.
Hi Carlos,

I'm not sure we have other components with a different positioner than element, so you may be in new territory.  I do want it to work, so it is hopefully just a matter of fixing bugs.

How is are the div's missing class selectors specified?  I think UIBase className is only set on the element.  You may need to override that.

HTH,  I'm done for tonight.
-Ale

From: <ca...@gmail.com>> on behalf of Carlos Rovira <ca...@apache.org>>
Date: Monday, October 24, 2016 at 11:04 PM
To: Alex Harui <ah...@adobe.com>>
Cc: "dev@flex.apache.org<ma...@flex.apache.org>" <de...@flex.apache.org>>
Subject: Re: [FlexJS] returning surrounding element in TextInput

Hi Alex,

this seems not work. I have this:

            element = input as WrappedHTMLElement;

            positioner = div as WrappedHTMLElement;
            positioner.style.position = 'relative';
            (div as WrappedHTMLElement).flexjs_wrapper = this;
            (input as WrappedHTMLElement).flexjs_wrapper = this;
            (label as WrappedHTMLElement).flexjs_wrapper = this;
            element.flexjs_wrapper = this;


In this way input change handler works, but MDL look is messed, this is the code generated, that is missing the first div class selectors:

<div style="position: relative;">
     <input type="text" class="mdl-textfield mdl-js-textfield mdl-textfield mdl-js-textfield" data-upgraded=",MaterialTextfield">
     <label class="mdl-textfield__label"></label>
</div>


2016-10-24 23:59 GMT+02:00 Alex Harui <ah...@adobe.com>>:
Try setting element as input and positioner as div.

Sent from my LG G3, an AT&T 4G LTE smartphone

------ Original message------
From: Carlos Rovira
Date: Mon, Oct 24, 2016 2:20 PM
To: dev@flex.apache.org<ma...@flex.apache.org>;
Subject:[FlexJS] returning surrounding element in TextInput

Hi,

I'm subclassing TextInput (html)
I need to create a div that surrounds the input.
In html there is only input and that's the element returned.

so my question is...how should I do to return the <div> with the <input>
inside and makes the element points to the input (since the events and
handlers depends of element (the input) to do work properly

Until now I was returning the element as the surrounding div, but this end
in malfunction of change event.

Thanks.

--
Carlos Rovira
http://about.me/carlosrovira



--
Carlos Rovira
http://about.me/carlosrovira


Re: [FlexJS] returning surrounding element in TextInput

Posted by Carlos Rovira <ca...@apache.org>.
Hi Alex,

this seems not work. I have this:

            element = input as WrappedHTMLElement;

            positioner = div as WrappedHTMLElement;
            positioner.style.position = 'relative';
            (div as WrappedHTMLElement).flexjs_wrapper = this;
            (input as WrappedHTMLElement).flexjs_wrapper = this;
            (label as WrappedHTMLElement).flexjs_wrapper = this;
            element.flexjs_wrapper = this;


In this way input change handler works, but MDL look is messed, this is the
code generated, that is missing the first div class selectors:

<div style="position: relative;">
     <input type="text" class="mdl-textfield mdl-js-textfield mdl-textfield
mdl-js-textfield" data-upgraded=",MaterialTextfield">
     <label class="mdl-textfield__label"></label>
</div>


2016-10-24 23:59 GMT+02:00 Alex Harui <ah...@adobe.com>:

> Try setting element as input and positioner as div.
>
> Sent from my LG G3, an AT&T 4G LTE smartphone
>
> ------ Original message------
> *From: *Carlos Rovira
> *Date: *Mon, Oct 24, 2016 2:20 PM
> *To: *dev@flex.apache.org;
> *Subject:*[FlexJS] returning surrounding element in TextInput
>
> Hi,
>
> I'm subclassing TextInput (html)
> I need to create a div that surrounds the input.
> In html there is only input and that's the element returned.
>
> so my question is...how should I do to return the <div> with the <input>
> inside and makes the element points to the input (since the events and
> handlers depends of element (the input) to do work properly
>
> Until now I was returning the element as the surrounding div, but this end
> in malfunction of change event.
>
> Thanks.
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>



-- 
Carlos Rovira
http://about.me/carlosrovira

Re: [FlexJS] returning surrounding element in TextInput

Posted by Alex Harui <ah...@adobe.com>.
Try setting element as input and positioner as div.

Sent from my LG G3, an AT&T 4G LTE smartphone

------ Original message------
From: Carlos Rovira
Date: Mon, Oct 24, 2016 2:20 PM
To: dev@flex.apache.org;
Subject:[FlexJS] returning surrounding element in TextInput

Hi,

I'm subclassing TextInput (html)
I need to create a div that surrounds the input.
In html there is only input and that's the element returned.

so my question is...how should I do to return the <div> with the <input>
inside and makes the element points to the input (since the events and
handlers depends of element (the input) to do work properly

Until now I was returning the element as the surrounding div, but this end
in malfunction of change event.

Thanks.

--
Carlos Rovira
http://about.me/carlosrovira