[FlexJS, MDL] Menu with dataProvider and itemRenderer API

classic Classic list List threaded Threaded
38 messages Options
12
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

[FlexJS, MDL] Menu with dataProvider and itemRenderer API

piotrz
Hi Carlos,

Since I've finished Snackbar I can take next task. :) I see that Menu need to be updated with dataProvider and item renderer API.
I will probably go same direction as you went with Lists - using ISelectionModel. I'm going also introduce in "core" package MenuEvent with ITEM_CLICK constant and new controller which handle click on menu item.

Probably I will need to split Menu component into "Menu" and "MenuView" class.

Let me know if you have any thoughts about that or different idea.

Piotr
Apache Flex PMC
piotrzarzycki21@gmail.com
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS, MDL] Menu with dataProvider and itemRenderer API

Alex Harui


On 12/29/16, 9:41 AM, "piotrz" <[hidden email]> wrote:

>Hi Carlos,
>
>Since I've finished Snackbar I can take next task. :) I see that Menu need
>to be updated with dataProvider and item renderer API.
>I will probably go same direction as you went with Lists - using
>ISelectionModel. I'm going also introduce in "core" package MenuEvent with
>ITEM_CLICK constant and new controller which handle click on menu item.

You can totally ignore this if you want, but I would like to see us avoid
using "click" and use "selected" or "change".  IMO, a "click" is a
low-level interaction.  Heavier renderers can certainly dispatch such a
thing, but the "click" may not always mean that something was selected.
Think of dividers in a menu or an unselectable item in a list, for
example.  It is up to the controller to determine the higher level meaning
of that click.  Also, if someone is using keyboard access, the item won't
actually be clicked and the lower-level events of keyDown keyUp again are
used by the controller to determine whether something is selected.  So
there should be an event with a higher level semantic meaning that the
selection changed.  Does List already have one that we can re-use?

My 2 cents,
-Alex

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS, MDL] Menu with dataProvider and itemRenderer API

piotrz
Hi Alex,

Thanks. That definately make sense to me. I'll try to look deeper into List or some other component and reuse "selected" or "change". I'm rather thinking about "change" - cause "selected" brings to mind something which is constant from UI point of view. When you click on the menu you expect some action immediately.

Piotr
Apache Flex PMC
piotrzarzycki21@gmail.com
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS, MDL] Menu with dataProvider and itemRenderer API

Carlos Rovira-3
In reply to this post by piotrz
2016-12-29 18:41 GMT+01:00 piotrz <[hidden email]>:

> Hi Carlos,
>
> Since I've finished Snackbar I can take next task. :) I see that Menu need
> to be updated with dataProvider and item renderer API.
> I will probably go same direction as you went with Lists - using
> ISelectionModel. I'm going also introduce in "core" package MenuEvent with
> ITEM_CLICK constant and new controller which handle click on menu item.
>
> Probably I will need to split Menu component into "Menu" and "MenuView"
> class.
>
> Let me know if you have any thoughts about that or different idea.
>
> Piotr
>
>
>
That's great Piotr :)

Right, we need to do something like in mdl List, and I think we should
introduce Controller and View like in Slider
I was thinking about it since I don't like to split in many pieces that
only will introduce complexity, but the reason to do it is prepare the
components for a SWF implementation.







>
> -----
> Apache Flex PMC
> [hidden email]
> --
> View this message in context: http://apache-flex-
> development.2333347.n4.nabble.com/FlexJS-MDL-Menu-with-
> dataProvider-and-itemRenderer-API-tp57637.html
> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS, MDL] Menu with dataProvider and itemRenderer API

piotrz
Carlos,

One question why you didn't use "DataItemRendererFactoryForArrayData" from core package in List ? You just copied and create new class "ItemRendererFactoryForArrayData" - I don't see diffs.

Piotr
Apache Flex PMC
piotrzarzycki21@gmail.com
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS, MDL] Menu with dataProvider and itemRenderer API

Carlos Rovira
I copied from the Peter example "ListExample"

2016-12-30 11:14 GMT+01:00 piotrz <[hidden email]>:

> Carlos,
>
> One question why you didn't use "DataItemRendererFactoryForArrayData" from
> core package in List ? You just copied and create new class
> "ItemRendererFactoryForArrayData" - I don't see diffs.
>
> Piotr
>
>
>
> -----
> Apache Flex PMC
> [hidden email]
> --
> View this message in context: http://apache-flex-
> development.2333347.n4.nabble.com/FlexJS-MDL-Menu-with-
> dataProvider-and-itemRenderer-API-tp57637p57662.html
> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>



--

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.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS, MDL] Menu with dataProvider and itemRenderer API

piotrz
In reply to this post by Carlos Rovira-3
I went through List implementation and see that contents of data provider is handled by: "IDataProviderItemRendererMapper" implementation. It creates item renderers for my view.

I think I could go with following implementation:

MenuView will implement IListView or event extends current ListView.
MenuItem will extend ListItemRenderer.

In other words our Menu will be some kind of MDL List form.

Let me know what do you think.

Piotr
Apache Flex PMC
piotrzarzycki21@gmail.com
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS, MDL] Menu with dataProvider and itemRenderer API

Carlos Rovira
Rigth, i'm off and don't hace access to code but I think  menu could be a
list and menuitem could be a itemrenderer.... but be free to experiment :)



El El vie, 30 dic 2016 a las 11:47, piotrz <[hidden email]>
escribió:

> I went through List implementation and see that contents of data provider
> is
>
> handled by: "IDataProviderItemRendererMapper" implementation. It creates
>
> item renderers for my view.
>
>
>
> I think I could go with following implementation:
>
>
>
> MenuView will implement IListView or event extends current ListView.
>
> MenuItem will extend ListItemRenderer.
>
>
>
> In other words our Menu will be some kind of MDL List form.
>
>
>
> Let me know what do you think.
>
>
>
> Piotr
>
>
>
>
>
>
>
> -----
>
> Apache Flex PMC
>
> [hidden email]
>
> --
>
> View this message in context:
> http://apache-flex-development.2333347.n4.nabble.com/FlexJS-MDL-Menu-with-dataProvider-and-itemRenderer-API-tp57637p57666.html
>
> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>
>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS, MDL] Menu with dataProvider and itemRenderer API

Alex Harui
In reply to this post by piotrz


On 12/30/16, 2:31 AM, "piotrz" <[hidden email]> wrote:

>In other words our Menu will be some kind of MDL List form.

For a simple Menu this should be fine.  For a Menu with sub-menus, it will
need many of the things Tree needs.  I don't know if MDL has a Tree, or
not.

Just me thinking out loud...
-Alex

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS, MDL] Menu with dataProvider and itemRenderer API

Carlos Rovira
In the examples I found there's no sub items, but we should look to see if
there's more. I think that should be supported, if not a menu with only one
 level seems very limited to me...

2016-12-30 16:54 GMT+01:00 Alex Harui <[hidden email]>:

>
>
> On 12/30/16, 2:31 AM, "piotrz" <[hidden email]> wrote:
>
> >In other words our Menu will be some kind of MDL List form.
>
> For a simple Menu this should be fine.  For a Menu with sub-menus, it will
> need many of the things Tree needs.  I don't know if MDL has a Tree, or
> not.
>
> Just me thinking out loud...
> -Alex
>
>


--

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.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS, MDL] Menu with dataProvider and itemRenderer API

piotrz
If I understand correctly it is planned for v2 [1] of MDL. I need to think about support sub menu. In theory one of my item renderer MenuItem could be submenu.

[1] https://github.com/google/material-design-lite/issues/4235

Piotr
Apache Flex PMC
piotrzarzycki21@gmail.com
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS, MDL] Menu with dataProvider and itemRenderer API

OmPrakash Muppirala
In reply to this post by Carlos Rovira
On Dec 30, 2016 8:31 AM, "Carlos Rovira" <[hidden email]>
wrote:

In the examples I found there's no sub items, but we should look to see if
there's more. I think that should be supported, if not a menu with only one
 level seems very limited to me...



Angular Material has menu with sub menus.  We should definitely support
that.

Thanks,
Om


2016-12-30 16:54 GMT+01:00 Alex Harui <[hidden email]>:

>
>
> On 12/30/16, 2:31 AM, "piotrz" <[hidden email]> wrote:
>
> >In other words our Menu will be some kind of MDL List form.
>
> For a simple Menu this should be fine.  For a Menu with sub-menus, it will
> need many of the things Tree needs.  I don't know if MDL has a Tree, or
> not.
>
> Just me thinking out loud...
> -Alex
>
>


--

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.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS, MDL] Menu with dataProvider and itemRenderer API

piotrz
In reply to this post by piotrz
Menu has been updated with dataProvider API. :)

Menu class didn't change to much, because it's reusing ListView. I had to change a bit one place in ListView where there were strand was casted to List - I saw your comments Carlos in that place - we really need to think about some interface in the future.
MenuItem was transformed to MenuItemRenderer.

I was also spend bunch of time on creating Menu item renderer with sub menu. I put inside item renderer another Menu. :) Unfortunately sub menu do not want to show. There is something which these sub menu do not like when it's placed inside renderer. - If I won't find solution I will leave it for now as it is and jump to another component.

Piotr
Apache Flex PMC
piotrzarzycki21@gmail.com
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS, MDL] Menu with dataProvider and itemRenderer API

Carlos Rovira
So cool Piotr :)

if submenus are coming in MDL v2 and now are not supported, I think you
should not spend more time and wait to mdl v2 to implement it and jump to
other thing.

Some things I saw:

1) I didn't see in the new example item "separators" as in the old example.

2) building MDLExample I saw this two warnings binding related:

/Users/carlosrovira/Dev/Flex/source/flexjs/flex-asjs/examples/flexjs/MDLExample/src/main/flex/itemRenderers/CustomListItemRenderer.mxml(41):
col: 25 Data binding will not be able to detect assignments to 'label'.
    <js:Span text="{data.label}">
                        ^
/Users/carlosrovira/Dev/Flex/source/flexjs/flex-asjs/examples/flexjs/MDLExample/src/main/flex/itemRenderers/CustomMenuItemRenderer.mxml(27):
col: 42 Data binding will not be able to detect assignments to 'disabled'.
        <mdl:Disabled disabled="{menuItem.disabled}"/>

Hope you could take a look.

3) This is more about organization: Could you as well separate the example
to its own "Menus" page? I'd like to end removing the Others as we end
polishing the MDLExample.

Thanks for the new Menu, now it looks very "Flex" ! :)


2017-01-01 21:52 GMT+01:00 piotrz <[hidden email]>:

> Menu has been updated with dataProvider API. :)
>
> Menu class didn't change to much, because it's reusing ListView. I had to
> change a bit one place in ListView where there were strand was casted to
> List - I saw your comments Carlos in that place - we really need to think
> about some interface in the future.
> MenuItem was transformed to MenuItemRenderer.
>
> I was also spend bunch of time on creating Menu item renderer with sub
> menu.
> I put inside item renderer another Menu. :) Unfortunately sub menu do not
> want to show. There is something which these sub menu do not like when it's
> placed inside renderer. - If I won't find solution I will leave it for now
> as it is and jump to another component.
>
> Piotr
>
>
>
> -----
> Apache Flex PMC
> [hidden email]
> --
> View this message in context: http://apache-flex-
> development.2333347.n4.nabble.com/FlexJS-MDL-Menu-with-
> dataProvider-and-itemRenderer-API-tp57637p57724.html
> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>



--

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.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS, MDL] Menu with dataProvider and itemRenderer API

piotrz
Hi Carlos,

I think I have spent enough time yesterday on this. I have removed all code related to sub menu.

Ad. 1) I just pushed code related to this one
Ad. 2) I have no idea why this started to appear and it's even worst. Binding is not working totally. I will start separate thread about that - Maybe Alex will help.
Ad. 3) No problem I will create separate page. :)

Piotr
Apache Flex PMC
piotrzarzycki21@gmail.com
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS, MDL] Menu with dataProvider and itemRenderer API

piotrz
In reply to this post by Carlos Rovira
Carlos,

I just switched your "ItemRendererFactoryForArrayData" to "DataItemRendererFactoryForArrayData" for list and menu. Everything seems to be working fine. I think we should use class from core and remove redundant code.

Maybe try to change it yourself to see whether I didn't miss anything.

Thanks,
Piotr
Apache Flex PMC
piotrzarzycki21@gmail.com
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS, MDL] Menu with dataProvider and itemRenderer API

piotrz
I see only one difference which I think could be moved to "DataItemRendererFactoryForArrayData"

ItemRendererFactoryForArrayData:
var component:UIBase = _strand as UIBase;
ir.labelField = component["labelField"];

DataItemRendererFactoryForArrayData:
labelField = (listView.host as List).labelField;

If we moved code from our bead to class from core we could delete "ItemRendererFactoryForArrayData".

Piotr
Apache Flex PMC
piotrzarzycki21@gmail.com
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS, MDL] Menu with dataProvider and itemRenderer API

Carlos Rovira
Hi Piotr,

if the Class is the same I don't have any problem to remove the redundant
class. I only was following Peter's ListExample, so If you think is equal
feel free to remove.

Thanks


2017-01-02 15:17 GMT+01:00 piotrz <[hidden email]>:

> I see only one difference which I think could be moved to
> "DataItemRendererFactoryForArrayData"
>
> ItemRendererFactoryForArrayData:
> var component:UIBase = _strand as UIBase;
> ir.labelField = component["labelField"];
>
> DataItemRendererFactoryForArrayData:
> labelField = (listView.host as List).labelField;
>
> If we moved code from our bead to class from core we could delete
> "ItemRendererFactoryForArrayData".
>
> Piotr
>
>
>
> -----
> Apache Flex PMC
> [hidden email]
> --
> View this message in context: http://apache-flex-
> development.2333347.n4.nabble.com/FlexJS-MDL-Menu-with-
> dataProvider-and-itemRenderer-API-tp57637p57748.html
> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>



--

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.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS, MDL] Menu with dataProvider and itemRenderer API

yishayw
In reply to this post by piotrz
I don't see any event being dispatched by menu. Are we supposed to listen to the model for events?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS, MDL] Menu with dataProvider and itemRenderer API

piotrz
Hi Yishay,

But is it not working when you add "change" handler ? If not try to add to the Menu class:

[Event(name="change", type="org.apache.flex.events.Event")]

Whatever you are going to do in order to fix that, please update MDLExample to handle "change" event. If you will not have time to dig into that, please raise jira I will look into that soon.

Thanks,
Piotr
Apache Flex PMC
piotrzarzycki21@gmail.com
12
Loading...