You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by Carlos Rovira <ca...@apache.org> on 2019/03/05 23:36:43 UTC

Jewel StyledUIBase positioner

Hi Alex,

many time ago to make possible make heavy use of styles easily, I created
StyledUIBase that in part composed ClassSelectorList
that uses "positioner". That's because jewel components use to be wrapped
in other divs or similar to be able to draw it better and get the right
look and feel.

I had to make put in StyledUIBase.createElement this line

positioner = element;

to avoid an error at runtime

This make me have to add this line in almost all Jewel Components

I'm looking at this now with a bit more time to see how I can remove this.

I'm starting from an example with just a button or just a label and trying
to clean without luck

If I left StyledUIBase without code and just extend UIBase still I found an
error at runtime.

Maybe is too late here and I must close now, but just want to know if you
have some clue about what I need to do that just looking to StyledUIbase
and Jewel Label or Jewel UIBase createElement.

If you have some clue, I can take a look tomorrow and see if I can finally
understand what's happening with positioner.

Thanks

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

Re: Jewel StyledUIBase positioner

Posted by Carlos Rovira <ca...@apache.org>.
I'm going to try that now, but I think an HTML element does not has
royale_wrapper right?
So if I have for example a "div", "aside" or "label" as positioner how can
I assign royale_wrapper?

El jue., 7 mar. 2019 a las 1:08, Harbs (<ha...@gmail.com>) escribió:

> The positioner needs the royale_wrapper set.
>
> > On Mar 6, 2019, at 6:19 PM, Carlos Rovira <ca...@apache.org>
> wrote:
> >
> > This could be solved in this way:
> >
> > private var _div:Group = null;
> >
> > public function get div():Group
> >        {
> > if(_div == null)
> > _div = new Group();
> > return _div;
> > }
> >
> > COMPILE::JS
> >        override public function get positioner():WrappedHTMLElement
> >        {
> > return div.element;
> >        }
> >
> > and
> >
> > /**
> > * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
> > * @royaleignorecoercion HTMLDivElement
> > * @royaleignorecoercion HTMLInputElement
> > * @royaleignorecoercion HTMLLabelElement
> > * @royaleignorecoercion Text
> > */
> > COMPILE::JS
> > override protected function createElement():WrappedHTMLElement
> > {
> > input = addElementToWrapper(this,'input') as HTMLInputElement;
> > input.setAttribute('type', 'text');
> > goog.events.listen(input, 'input', textChangeHandler);
> > div.element.appendChild(input);
> > return element;
> > }
> >
> > but seems more complex right?
> >
> >
> > --
> > Carlos Rovira
> > http://about.me/carlosrovira
>
>

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

Re: Jewel StyledUIBase positioner

Posted by Harbs <ha...@gmail.com>.
The positioner needs the royale_wrapper set.

> On Mar 6, 2019, at 6:19 PM, Carlos Rovira <ca...@apache.org> wrote:
> 
> This could be solved in this way:
> 
> private var _div:Group = null;
> 
> public function get div():Group
>        {
> if(_div == null)
> _div = new Group();
> return _div;
> }
> 
> COMPILE::JS
>        override public function get positioner():WrappedHTMLElement
>        {
> return div.element;
>        }
> 
> and
> 
> /**
> * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
> * @royaleignorecoercion HTMLDivElement
> * @royaleignorecoercion HTMLInputElement
> * @royaleignorecoercion HTMLLabelElement
> * @royaleignorecoercion Text
> */
> COMPILE::JS
> override protected function createElement():WrappedHTMLElement
> {
> input = addElementToWrapper(this,'input') as HTMLInputElement;
> input.setAttribute('type', 'text');
> goog.events.listen(input, 'input', textChangeHandler);
> div.element.appendChild(input);
> return element;
> }
> 
> but seems more complex right?
> 
> 
> -- 
> Carlos Rovira
> http://about.me/carlosrovira


Re: Jewel StyledUIBase positioner

Posted by Carlos Rovira <ca...@apache.org>.
This could be solved in this way:

private var _div:Group = null;

public function get div():Group
        {
if(_div == null)
_div = new Group();
return _div;
}

COMPILE::JS
        override public function get positioner():WrappedHTMLElement
        {
return div.element;
        }

and

/**
* @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
* @royaleignorecoercion HTMLDivElement
* @royaleignorecoercion HTMLInputElement
* @royaleignorecoercion HTMLLabelElement
* @royaleignorecoercion Text
*/
COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
input = addElementToWrapper(this,'input') as HTMLInputElement;
input.setAttribute('type', 'text');
goog.events.listen(input, 'input', textChangeHandler);
div.element.appendChild(input);
return element;
}

but seems more complex right?


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

Re: Jewel StyledUIBase positioner

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

I think the purpose is to have a positioner different to element so
createElement creates element as normal, but positioner is not element. Or
maybe I missing something. To what do you think it should be assigned?


El jue., 7 mar. 2019 a las 4:59, Alex Harui (<ah...@adobe.com.invalid>)
escribió:

> I don't think I see element being assigned in this example.
>
> -Alex
>
> On 3/6/19, 3:09 PM, "Carlos Rovira" <ca...@apache.org> wrote:
>
>     Hi ,
>
>     If I remove positioner = element in StyleUIBase and then in Jewel
>     TextInputBase add
>
>     COMPILE::JS
>     private var _div:HTMLDivElement = null;
>
>     COMPILE::JS
>             public function get div():HTMLDivElement
>             {
>     if(_div == null)
>     _div = document.createElement('div') as HTMLDivElement;
>     return _div;
>     }
>
>     COMPILE::JS
>             override public function get positioner():WrappedHTMLElement
>             {
>     return div as WrappedHTMLElement;
>             }
>
>     And Jewel TextInput has
>
>     COMPILE::JS
>     override protected function createElement():WrappedHTMLElement
>     {
>     input = addElementToWrapper(this,'input') as HTMLInputElement;
>     input.setAttribute('type', 'text');
>     goog.events.listen(input, 'input', textChangeHandler);
>     div.appendChild(input);
>     return element;
>     }
>
>     I get:
>
>     *Uncaught TypeError: Failed to execute 'appendChild' on 'Node':
> parameter 1
>     is not of type 'Node'.*
>     *    at
>     org.apache.royale.jewel.View.org.apache.royale.core.UIBase.addElement
>     (UIBase.js:413)*
>     *    at
>
> org.apache.royale.jewel.View.org.apache.royale.core.GroupBase.addElement
>     (GroupBase.js:165)*
>     *    at
>
> Function.org.apache.royale.utils.MXMLDataInterpreter.initializeStrandBasedObject
>     (MXMLDataInterpreter.js:236)*
>     *    at
>     Function.org.apache.royale.utils.MXMLDataInterpreter.generateMXMLArray
>     (MXMLDataInterpreter.js:125)*
>     *    at
>
> Function.org.apache.royale.utils.MXMLDataInterpreter.generateMXMLInstances
>     (MXMLDataInterpreter.js:266)*
>     *    at org.apache.royale.jewel.View.addedToParent (View.js:69)*
>     *    at
>
> BE0004_Adding_an_item_to_a_Jewel_List.org.apache.royale.jewel.Application.addElement
>     (Application.js:144)*
>     *    at
>
> BE0004_Adding_an_item_to_a_Jewel_List.org.apache.royale.jewel.Application.initialize
>     (Application.js:295)*
>     *    at
>
> BE0004_Adding_an_item_to_a_Jewel_List.org.apache.royale.jewel.Application.start
>     (Application.js:264)*
>     *    at index.html:196*
>
>     The problem seems to be in UIBase.js:413
>
>     /**
>      *  @copy org.apache.royale.core.IParent#addElement()
>      *
>      *  @langversion 3.0
>      *  @playerversion Flash 10.2
>      *  @playerversion AIR 2.6
>      *  @productversion Royale 0.0
>      *  @royaleignorecoercion org.apache.royale.core.IUIBase
>      * @export
>      * @param {org.apache.royale.core.IChild} c
>      * @param {boolean=} dispatchEvent
>      */
>     org.apache.royale.core.UIBase.prototype.addElement = function(c,
>     dispatchEvent) {
>       dispatchEvent = typeof dispatchEvent !== 'undefined' ? dispatchEvent
> :
>     true;
>
>     *  this.element.appendChild(c.positioner);  //---------------------
> this
>     line*
>       c.addedToParent();
>     };
>
>
>     El mié., 6 mar. 2019 a las 14:35, Harbs (<ha...@gmail.com>)
> escribió:
>
>     > That’s surprising to me too.
>     >
>     > All you should need to do for separate positioners is to override the
>     > positioned getter.
>     >
>     > > On Mar 5, 2019, at 11:50 PM, Alex Harui <ah...@adobe.com.INVALID>
>     > wrote:
>     > >
>     > > Hi Carlos,
>     > >
>     > > I'm not sure I understood the question, mainly because I'm
> surprised
>     > that setting position=element in a base class would require the same
> code
>     > in the subclasses.
>     > >
>     > > There is both a positioner and element variables because some early
>     > components were a tree of HTMLElements and the one you set positional
>     > styles on (left, right, top, bottom, width, height) might need to be
>     > different from the element that is listened to for events and may be
> the
>     > element that has the CSS "id" assigned to it and/or is the element
> that is
>     > referenced in accessibility.
>     > >
>     > > In many cases, positioner == element.
>     > >
>     > > I think you have to set positioner in createElement.  But there
> could
>     > certainly be some issue with the lifecycle.  Maybe the runtime error
> and
>     > call stack provides a clue.
>     > >
>     > > -Alex
>     > >
>     > > On 3/5/19, 3:44 PM, "Carlos Rovira" <carlosrovira@apache.org
> <mailto:
>     > carlosrovira@apache.org>> wrote:
>     > >
>     > >    Hi Alex,
>     > >
>     > >    many time ago to make possible make heavy use of styles easily,
> I
>     > created
>     > >    StyledUIBase that in part composed ClassSelectorList
>     > >    that uses "positioner". That's because jewel components use to
> be
>     > wrapped
>     > >    in other divs or similar to be able to draw it better and get
> the
>     > right
>     > >    look and feel.
>     > >
>     > >    I had to make put in StyledUIBase.createElement this line
>     > >
>     > >    positioner = element;
>     > >
>     > >    to avoid an error at runtime
>     > >
>     > >    This make me have to add this line in almost all Jewel
> Components
>     > >
>     > >    I'm looking at this now with a bit more time to see how I can
> remove
>     > this.
>     > >
>     > >    I'm starting from an example with just a button or just a label
> and
>     > trying
>     > >    to clean without luck
>     > >
>     > >    If I left StyledUIBase without code and just extend UIBase
> still I
>     > found an
>     > >    error at runtime.
>     > >
>     > >    Maybe is too late here and I must close now, but just want to
> know if
>     > you
>     > >    have some clue about what I need to do that just looking to
>     > StyledUIbase
>     > >    and Jewel Label or Jewel UIBase createElement.
>     > >
>     > >    If you have some clue, I can take a look tomorrow and see if I
> can
>     > finally
>     > >    understand what's happening with positioner.
>     > >
>     > >    Thanks
>     > >
>     > >    --
>     > >    Carlos Rovira
>     > >
>     >
> https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&amp;data=02%7C01%7Caharui%40adobe.com%7Cf911b783caaf463fae9f08d6a288bfad%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636875105543285303&amp;sdata=Kp89sNrlizhybiKTptBz0LgQ9UqA5Kydxv59VC3rTEY%3D&amp;reserved=0
>     > <
>     >
> https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&amp;data=02%7C01%7Caharui%40adobe.com%7Cf911b783caaf463fae9f08d6a288bfad%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636875105543285303&amp;sdata=Kp89sNrlizhybiKTptBz0LgQ9UqA5Kydxv59VC3rTEY%3D&amp;reserved=0
>     > >
>     >
>
>
>     --
>     Carlos Rovira
>
> https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&amp;data=02%7C01%7Caharui%40adobe.com%7Cf911b783caaf463fae9f08d6a288bfad%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636875105543295308&amp;sdata=nIDnXvzQ8T1CENU0f78nNjrqIH9u4HBe2SYD%2Fw3Dxh0%3D&amp;reserved=0
>
>
>

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

Re: Jewel StyledUIBase positioner

Posted by Alex Harui <ah...@adobe.com.INVALID>.
I don't think I see element being assigned in this example.

-Alex

On 3/6/19, 3:09 PM, "Carlos Rovira" <ca...@apache.org> wrote:

    Hi ,
    
    If I remove positioner = element in StyleUIBase and then in Jewel
    TextInputBase add
    
    COMPILE::JS
    private var _div:HTMLDivElement = null;
    
    COMPILE::JS
            public function get div():HTMLDivElement
            {
    if(_div == null)
    _div = document.createElement('div') as HTMLDivElement;
    return _div;
    }
    
    COMPILE::JS
            override public function get positioner():WrappedHTMLElement
            {
    return div as WrappedHTMLElement;
            }
    
    And Jewel TextInput has
    
    COMPILE::JS
    override protected function createElement():WrappedHTMLElement
    {
    input = addElementToWrapper(this,'input') as HTMLInputElement;
    input.setAttribute('type', 'text');
    goog.events.listen(input, 'input', textChangeHandler);
    div.appendChild(input);
    return element;
    }
    
    I get:
    
    *Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1
    is not of type 'Node'.*
    *    at
    org.apache.royale.jewel.View.org.apache.royale.core.UIBase.addElement
    (UIBase.js:413)*
    *    at
    org.apache.royale.jewel.View.org.apache.royale.core.GroupBase.addElement
    (GroupBase.js:165)*
    *    at
    Function.org.apache.royale.utils.MXMLDataInterpreter.initializeStrandBasedObject
    (MXMLDataInterpreter.js:236)*
    *    at
    Function.org.apache.royale.utils.MXMLDataInterpreter.generateMXMLArray
    (MXMLDataInterpreter.js:125)*
    *    at
    Function.org.apache.royale.utils.MXMLDataInterpreter.generateMXMLInstances
    (MXMLDataInterpreter.js:266)*
    *    at org.apache.royale.jewel.View.addedToParent (View.js:69)*
    *    at
    BE0004_Adding_an_item_to_a_Jewel_List.org.apache.royale.jewel.Application.addElement
    (Application.js:144)*
    *    at
    BE0004_Adding_an_item_to_a_Jewel_List.org.apache.royale.jewel.Application.initialize
    (Application.js:295)*
    *    at
    BE0004_Adding_an_item_to_a_Jewel_List.org.apache.royale.jewel.Application.start
    (Application.js:264)*
    *    at index.html:196*
    
    The problem seems to be in UIBase.js:413
    
    /**
     *  @copy org.apache.royale.core.IParent#addElement()
     *
     *  @langversion 3.0
     *  @playerversion Flash 10.2
     *  @playerversion AIR 2.6
     *  @productversion Royale 0.0
     *  @royaleignorecoercion org.apache.royale.core.IUIBase
     * @export
     * @param {org.apache.royale.core.IChild} c
     * @param {boolean=} dispatchEvent
     */
    org.apache.royale.core.UIBase.prototype.addElement = function(c,
    dispatchEvent) {
      dispatchEvent = typeof dispatchEvent !== 'undefined' ? dispatchEvent :
    true;
    
    *  this.element.appendChild(c.positioner);  //--------------------- this
    line*
      c.addedToParent();
    };
    
    
    El mié., 6 mar. 2019 a las 14:35, Harbs (<ha...@gmail.com>) escribió:
    
    > That’s surprising to me too.
    >
    > All you should need to do for separate positioners is to override the
    > positioned getter.
    >
    > > On Mar 5, 2019, at 11:50 PM, Alex Harui <ah...@adobe.com.INVALID>
    > wrote:
    > >
    > > Hi Carlos,
    > >
    > > I'm not sure I understood the question, mainly because I'm surprised
    > that setting position=element in a base class would require the same code
    > in the subclasses.
    > >
    > > There is both a positioner and element variables because some early
    > components were a tree of HTMLElements and the one you set positional
    > styles on (left, right, top, bottom, width, height) might need to be
    > different from the element that is listened to for events and may be the
    > element that has the CSS "id" assigned to it and/or is the element that is
    > referenced in accessibility.
    > >
    > > In many cases, positioner == element.
    > >
    > > I think you have to set positioner in createElement.  But there could
    > certainly be some issue with the lifecycle.  Maybe the runtime error and
    > call stack provides a clue.
    > >
    > > -Alex
    > >
    > > On 3/5/19, 3:44 PM, "Carlos Rovira" <carlosrovira@apache.org <mailto:
    > carlosrovira@apache.org>> wrote:
    > >
    > >    Hi Alex,
    > >
    > >    many time ago to make possible make heavy use of styles easily, I
    > created
    > >    StyledUIBase that in part composed ClassSelectorList
    > >    that uses "positioner". That's because jewel components use to be
    > wrapped
    > >    in other divs or similar to be able to draw it better and get the
    > right
    > >    look and feel.
    > >
    > >    I had to make put in StyledUIBase.createElement this line
    > >
    > >    positioner = element;
    > >
    > >    to avoid an error at runtime
    > >
    > >    This make me have to add this line in almost all Jewel Components
    > >
    > >    I'm looking at this now with a bit more time to see how I can remove
    > this.
    > >
    > >    I'm starting from an example with just a button or just a label and
    > trying
    > >    to clean without luck
    > >
    > >    If I left StyledUIBase without code and just extend UIBase still I
    > found an
    > >    error at runtime.
    > >
    > >    Maybe is too late here and I must close now, but just want to know if
    > you
    > >    have some clue about what I need to do that just looking to
    > StyledUIbase
    > >    and Jewel Label or Jewel UIBase createElement.
    > >
    > >    If you have some clue, I can take a look tomorrow and see if I can
    > finally
    > >    understand what's happening with positioner.
    > >
    > >    Thanks
    > >
    > >    --
    > >    Carlos Rovira
    > >
    > https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&amp;data=02%7C01%7Caharui%40adobe.com%7Cf911b783caaf463fae9f08d6a288bfad%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636875105543285303&amp;sdata=Kp89sNrlizhybiKTptBz0LgQ9UqA5Kydxv59VC3rTEY%3D&amp;reserved=0
    > <
    > https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&amp;data=02%7C01%7Caharui%40adobe.com%7Cf911b783caaf463fae9f08d6a288bfad%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636875105543285303&amp;sdata=Kp89sNrlizhybiKTptBz0LgQ9UqA5Kydxv59VC3rTEY%3D&amp;reserved=0
    > >
    >
    
    
    -- 
    Carlos Rovira
    https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&amp;data=02%7C01%7Caharui%40adobe.com%7Cf911b783caaf463fae9f08d6a288bfad%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636875105543295308&amp;sdata=nIDnXvzQ8T1CENU0f78nNjrqIH9u4HBe2SYD%2Fw3Dxh0%3D&amp;reserved=0
    


Re: Jewel StyledUIBase positioner

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

If I remove positioner = element in StyleUIBase and then in Jewel
TextInputBase add

COMPILE::JS
private var _div:HTMLDivElement = null;

COMPILE::JS
        public function get div():HTMLDivElement
        {
if(_div == null)
_div = document.createElement('div') as HTMLDivElement;
return _div;
}

COMPILE::JS
        override public function get positioner():WrappedHTMLElement
        {
return div as WrappedHTMLElement;
        }

And Jewel TextInput has

COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
input = addElementToWrapper(this,'input') as HTMLInputElement;
input.setAttribute('type', 'text');
goog.events.listen(input, 'input', textChangeHandler);
div.appendChild(input);
return element;
}

I get:

*Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1
is not of type 'Node'.*
*    at
org.apache.royale.jewel.View.org.apache.royale.core.UIBase.addElement
(UIBase.js:413)*
*    at
org.apache.royale.jewel.View.org.apache.royale.core.GroupBase.addElement
(GroupBase.js:165)*
*    at
Function.org.apache.royale.utils.MXMLDataInterpreter.initializeStrandBasedObject
(MXMLDataInterpreter.js:236)*
*    at
Function.org.apache.royale.utils.MXMLDataInterpreter.generateMXMLArray
(MXMLDataInterpreter.js:125)*
*    at
Function.org.apache.royale.utils.MXMLDataInterpreter.generateMXMLInstances
(MXMLDataInterpreter.js:266)*
*    at org.apache.royale.jewel.View.addedToParent (View.js:69)*
*    at
BE0004_Adding_an_item_to_a_Jewel_List.org.apache.royale.jewel.Application.addElement
(Application.js:144)*
*    at
BE0004_Adding_an_item_to_a_Jewel_List.org.apache.royale.jewel.Application.initialize
(Application.js:295)*
*    at
BE0004_Adding_an_item_to_a_Jewel_List.org.apache.royale.jewel.Application.start
(Application.js:264)*
*    at index.html:196*

The problem seems to be in UIBase.js:413

/**
 *  @copy org.apache.royale.core.IParent#addElement()
 *
 *  @langversion 3.0
 *  @playerversion Flash 10.2
 *  @playerversion AIR 2.6
 *  @productversion Royale 0.0
 *  @royaleignorecoercion org.apache.royale.core.IUIBase
 * @export
 * @param {org.apache.royale.core.IChild} c
 * @param {boolean=} dispatchEvent
 */
org.apache.royale.core.UIBase.prototype.addElement = function(c,
dispatchEvent) {
  dispatchEvent = typeof dispatchEvent !== 'undefined' ? dispatchEvent :
true;

*  this.element.appendChild(c.positioner);  //--------------------- this
line*
  c.addedToParent();
};


El mié., 6 mar. 2019 a las 14:35, Harbs (<ha...@gmail.com>) escribió:

> That’s surprising to me too.
>
> All you should need to do for separate positioners is to override the
> positioned getter.
>
> > On Mar 5, 2019, at 11:50 PM, Alex Harui <ah...@adobe.com.INVALID>
> wrote:
> >
> > Hi Carlos,
> >
> > I'm not sure I understood the question, mainly because I'm surprised
> that setting position=element in a base class would require the same code
> in the subclasses.
> >
> > There is both a positioner and element variables because some early
> components were a tree of HTMLElements and the one you set positional
> styles on (left, right, top, bottom, width, height) might need to be
> different from the element that is listened to for events and may be the
> element that has the CSS "id" assigned to it and/or is the element that is
> referenced in accessibility.
> >
> > In many cases, positioner == element.
> >
> > I think you have to set positioner in createElement.  But there could
> certainly be some issue with the lifecycle.  Maybe the runtime error and
> call stack provides a clue.
> >
> > -Alex
> >
> > On 3/5/19, 3:44 PM, "Carlos Rovira" <carlosrovira@apache.org <mailto:
> carlosrovira@apache.org>> wrote:
> >
> >    Hi Alex,
> >
> >    many time ago to make possible make heavy use of styles easily, I
> created
> >    StyledUIBase that in part composed ClassSelectorList
> >    that uses "positioner". That's because jewel components use to be
> wrapped
> >    in other divs or similar to be able to draw it better and get the
> right
> >    look and feel.
> >
> >    I had to make put in StyledUIBase.createElement this line
> >
> >    positioner = element;
> >
> >    to avoid an error at runtime
> >
> >    This make me have to add this line in almost all Jewel Components
> >
> >    I'm looking at this now with a bit more time to see how I can remove
> this.
> >
> >    I'm starting from an example with just a button or just a label and
> trying
> >    to clean without luck
> >
> >    If I left StyledUIBase without code and just extend UIBase still I
> found an
> >    error at runtime.
> >
> >    Maybe is too late here and I must close now, but just want to know if
> you
> >    have some clue about what I need to do that just looking to
> StyledUIbase
> >    and Jewel Label or Jewel UIBase createElement.
> >
> >    If you have some clue, I can take a look tomorrow and see if I can
> finally
> >    understand what's happening with positioner.
> >
> >    Thanks
> >
> >    --
> >    Carlos Rovira
> >
> https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&amp;data=02%7C01%7Caharui%40adobe.com%7C56fa5ad2f4fd450273d808d6a1c4777c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636874262532003169&amp;sdata=J4hxDgu3YdDwimJjVNAuqjno7ZxlJoBesksnMSAD8Y4%3D&amp;reserved=0
> <
> https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&amp;data=02%7C01%7Caharui%40adobe.com%7C56fa5ad2f4fd450273d808d6a1c4777c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636874262532003169&amp;sdata=J4hxDgu3YdDwimJjVNAuqjno7ZxlJoBesksnMSAD8Y4%3D&amp;reserved=0
> >
>


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

Re: Jewel StyledUIBase positioner

Posted by Harbs <ha...@gmail.com>.
That’s surprising to me too.

All you should need to do for separate positioners is to override the positioned getter.

> On Mar 5, 2019, at 11:50 PM, Alex Harui <ah...@adobe.com.INVALID> wrote:
> 
> Hi Carlos,
> 
> I'm not sure I understood the question, mainly because I'm surprised that setting position=element in a base class would require the same code in the subclasses.
> 
> There is both a positioner and element variables because some early components were a tree of HTMLElements and the one you set positional styles on (left, right, top, bottom, width, height) might need to be different from the element that is listened to for events and may be the element that has the CSS "id" assigned to it and/or is the element that is referenced in accessibility.
> 
> In many cases, positioner == element.
> 
> I think you have to set positioner in createElement.  But there could certainly be some issue with the lifecycle.  Maybe the runtime error and call stack provides a clue.
> 
> -Alex
> 
> On 3/5/19, 3:44 PM, "Carlos Rovira" <carlosrovira@apache.org <ma...@apache.org>> wrote:
> 
>    Hi Alex,
> 
>    many time ago to make possible make heavy use of styles easily, I created
>    StyledUIBase that in part composed ClassSelectorList
>    that uses "positioner". That's because jewel components use to be wrapped
>    in other divs or similar to be able to draw it better and get the right
>    look and feel.
> 
>    I had to make put in StyledUIBase.createElement this line
> 
>    positioner = element;
> 
>    to avoid an error at runtime
> 
>    This make me have to add this line in almost all Jewel Components
> 
>    I'm looking at this now with a bit more time to see how I can remove this.
> 
>    I'm starting from an example with just a button or just a label and trying
>    to clean without luck
> 
>    If I left StyledUIBase without code and just extend UIBase still I found an
>    error at runtime.
> 
>    Maybe is too late here and I must close now, but just want to know if you
>    have some clue about what I need to do that just looking to StyledUIbase
>    and Jewel Label or Jewel UIBase createElement.
> 
>    If you have some clue, I can take a look tomorrow and see if I can finally
>    understand what's happening with positioner.
> 
>    Thanks
> 
>    -- 
>    Carlos Rovira
>    https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&amp;data=02%7C01%7Caharui%40adobe.com%7C56fa5ad2f4fd450273d808d6a1c4777c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636874262532003169&amp;sdata=J4hxDgu3YdDwimJjVNAuqjno7ZxlJoBesksnMSAD8Y4%3D&amp;reserved=0 <https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&amp;data=02%7C01%7Caharui%40adobe.com%7C56fa5ad2f4fd450273d808d6a1c4777c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636874262532003169&amp;sdata=J4hxDgu3YdDwimJjVNAuqjno7ZxlJoBesksnMSAD8Y4%3D&amp;reserved=0>

Re: Jewel StyledUIBase positioner

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

I'm not sure I understood the question, mainly because I'm surprised that setting position=element in a base class would require the same code in the subclasses.

There is both a positioner and element variables because some early components were a tree of HTMLElements and the one you set positional styles on (left, right, top, bottom, width, height) might need to be different from the element that is listened to for events and may be the element that has the CSS "id" assigned to it and/or is the element that is referenced in accessibility.

In many cases, positioner == element.

I think you have to set positioner in createElement.  But there could certainly be some issue with the lifecycle.  Maybe the runtime error and call stack provides a clue.

-Alex

On 3/5/19, 3:44 PM, "Carlos Rovira" <ca...@apache.org> wrote:

    Hi Alex,
    
    many time ago to make possible make heavy use of styles easily, I created
    StyledUIBase that in part composed ClassSelectorList
    that uses "positioner". That's because jewel components use to be wrapped
    in other divs or similar to be able to draw it better and get the right
    look and feel.
    
    I had to make put in StyledUIBase.createElement this line
    
    positioner = element;
    
    to avoid an error at runtime
    
    This make me have to add this line in almost all Jewel Components
    
    I'm looking at this now with a bit more time to see how I can remove this.
    
    I'm starting from an example with just a button or just a label and trying
    to clean without luck
    
    If I left StyledUIBase without code and just extend UIBase still I found an
    error at runtime.
    
    Maybe is too late here and I must close now, but just want to know if you
    have some clue about what I need to do that just looking to StyledUIbase
    and Jewel Label or Jewel UIBase createElement.
    
    If you have some clue, I can take a look tomorrow and see if I can finally
    understand what's happening with positioner.
    
    Thanks
    
    -- 
    Carlos Rovira
    https://nam04.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2Fcarlosrovira&amp;data=02%7C01%7Caharui%40adobe.com%7C56fa5ad2f4fd450273d808d6a1c4777c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636874262532003169&amp;sdata=J4hxDgu3YdDwimJjVNAuqjno7ZxlJoBesksnMSAD8Y4%3D&amp;reserved=0