Databinding with mobile list items

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

Databinding with mobile list items

Vincent Vandenschrick
Hi experts,

Still experimenting the mobile API, and now, I face a strange problem. To sum-up, I have 2 pages, 1 with a list of items and the second one that allows to edit the 1st page selected item. Edition changes the item property that is used for list rendering on the first page. The problem is that, whatever I try, I cannot manage to get the list items updated accordingly to the 2nd page edition.

Everything is MVC oriented through qooxdoo databinding. Since there is no mobile List controller, I had to use an object controller on the model item so that I can bind the renderer property to the model item property. This is called in configureItem of the List widget constructor and here is basically what it looks like :

    bindListItem: function (item, state) {
      var modelController = new qx.data.controller.Object(state);
      modelController.addTarget(item, "title", "value");
      modelController.addTarget(item, "subtitle", "description");
      modelController.addTarget(item, "image", "iconImageUrl");
    }

When debugging, I can see the setTitle() method of the Default list renderer being called as expected. However, when I come back to the list page, Nothing has changed and the old value is still there. It may be linked to the fact that the list is not visible when the setTitle() method is called but I really have no clue.

Am I missing something ?

Thanks in advance for any hint.

Regards,
Vincent
------------------------------------------------------------------------------
CenturyLink Cloud: The Leader in Enterprise Cloud Services.
Learn Why More Businesses Are Choosing CenturyLink Cloud For
Critical Workloads, Development Environments & Everything In Between.
Get a Quote or Start a Free Trial Today.
http://pubads.g.doubleclick.net/gampad/clk?id=119420431&iu=/4140/ostg.clktrk
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Databinding with mobile list items

Vincent Vandenschrick
Hi again,
So I built a small example simulating the problem with the list renderers not being repainted. In this example, a button listener directly changes one of the renderer title but nothing get changed on screen; of course, in real-life, the renderer should be notified of the model change, but for the sake of simplicity…
I’m sure I must be missing something but I can’t figure out. Here is the playground test-case :

http://tinyurl.com/pqzzd53

Any hint? Shall I open a bug report ?

Thanks in advance,
Vincent


Le 18 janv. 2014 à 15:34, Vincent Vandenschrick <[hidden email]> a écrit :

> Hi experts,
>
> Still experimenting the mobile API, and now, I face a strange problem. To sum-up, I have 2 pages, 1 with a list of items and the second one that allows to edit the 1st page selected item. Edition changes the item property that is used for list rendering on the first page. The problem is that, whatever I try, I cannot manage to get the list items updated accordingly to the 2nd page edition.
>
> Everything is MVC oriented through qooxdoo databinding. Since there is no mobile List controller, I had to use an object controller on the model item so that I can bind the renderer property to the model item property. This is called in configureItem of the List widget constructor and here is basically what it looks like :
>
>    bindListItem: function (item, state) {
>      var modelController = new qx.data.controller.Object(state);
>      modelController.addTarget(item, "title", "value");
>      modelController.addTarget(item, "subtitle", "description");
>      modelController.addTarget(item, "image", "iconImageUrl");
>    }
>
> When debugging, I can see the setTitle() method of the Default list renderer being called as expected. However, when I come back to the list page, Nothing has changed and the old value is still there. It may be linked to the fact that the list is not visible when the setTitle() method is called but I really have no clue.
>
> Am I missing something ?
>
> Thanks in advance for any hint.
>
> Regards,
> Vincent


------------------------------------------------------------------------------
CenturyLink Cloud: The Leader in Enterprise Cloud Services.
Learn Why More Businesses Are Choosing CenturyLink Cloud For
Critical Workloads, Development Environments & Everything In Between.
Get a Quote or Start a Free Trial Today.
http://pubads.g.doubleclick.net/gampad/clk?id=119420431&iu=/4140/ostg.clktrk
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Databinding with mobile list items

Vincent Vandenschrick
Digging a little bit more, I discovered that this approach cannot work since when rendering the list, the same renderer instance is re-used and cloned for each list item. So I cannot get any handle on the widget actually drawn on the screen. So what would be the correct design to have the list reflecting the model changes ?

Le 20 janv. 2014 à 21:32, Vincent Vandenschrick <[hidden email]> a écrit :

> Hi again,
> So I built a small example simulating the problem with the list renderers not being repainted. In this example, a button listener directly changes one of the renderer title but nothing get changed on screen; of course, in real-life, the renderer should be notified of the model change, but for the sake of simplicity…
> I’m sure I must be missing something but I can’t figure out. Here is the playground test-case :
>
> http://tinyurl.com/pqzzd53
>
> Any hint? Shall I open a bug report ?
>
> Thanks in advance,
> Vincent
>
>
> Le 18 janv. 2014 à 15:34, Vincent Vandenschrick <[hidden email]> a écrit :
>
>> Hi experts,
>>
>> Still experimenting the mobile API, and now, I face a strange problem. To sum-up, I have 2 pages, 1 with a list of items and the second one that allows to edit the 1st page selected item. Edition changes the item property that is used for list rendering on the first page. The problem is that, whatever I try, I cannot manage to get the list items updated accordingly to the 2nd page edition.
>>
>> Everything is MVC oriented through qooxdoo databinding. Since there is no mobile List controller, I had to use an object controller on the model item so that I can bind the renderer property to the model item property. This is called in configureItem of the List widget constructor and here is basically what it looks like :
>>
>>   bindListItem: function (item, state) {
>>     var modelController = new qx.data.controller.Object(state);
>>     modelController.addTarget(item, "title", "value");
>>     modelController.addTarget(item, "subtitle", "description");
>>     modelController.addTarget(item, "image", "iconImageUrl");
>>   }
>>
>> When debugging, I can see the setTitle() method of the Default list renderer being called as expected. However, when I come back to the list page, Nothing has changed and the old value is still there. It may be linked to the fact that the list is not visible when the setTitle() method is called but I really have no clue.
>>
>> Am I missing something ?
>>
>> Thanks in advance for any hint.
>>
>> Regards,
>> Vincent
>


------------------------------------------------------------------------------
CenturyLink Cloud: The Leader in Enterprise Cloud Services.
Learn Why More Businesses Are Choosing CenturyLink Cloud For
Critical Workloads, Development Environments & Everything In Between.
Get a Quote or Start a Free Trial Today.
http://pubads.g.doubleclick.net/gampad/clk?id=119420431&iu=/4140/ostg.clktrk
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Databinding with mobile list items

Vincent Vandenschrick
Ok. I solved my own problem, so here is the solution for the records.
The key point is to have the model items fire bubbling events (the simplest is to include the qx.data.marshal.MEventBubbling mixin, and call _applyEventPropagation on property changes). Then the list will be notified of item property changes and render accordingly without any other action needed. Great design ;-)

HTH,
Vincent


Le 20 janv. 2014 à 21:46, Vincent Vandenschrick <[hidden email]> a écrit :

> Digging a little bit more, I discovered that this approach cannot work since when rendering the list, the same renderer instance is re-used and cloned for each list item. So I cannot get any handle on the widget actually drawn on the screen. So what would be the correct design to have the list reflecting the model changes ?
>
> Le 20 janv. 2014 à 21:32, Vincent Vandenschrick <[hidden email]> a écrit :
>
>> Hi again,
>> So I built a small example simulating the problem with the list renderers not being repainted. In this example, a button listener directly changes one of the renderer title but nothing get changed on screen; of course, in real-life, the renderer should be notified of the model change, but for the sake of simplicity…
>> I’m sure I must be missing something but I can’t figure out. Here is the playground test-case :
>>
>> http://tinyurl.com/pqzzd53
>>
>> Any hint? Shall I open a bug report ?
>>
>> Thanks in advance,
>> Vincent
>>
>>
>> Le 18 janv. 2014 à 15:34, Vincent Vandenschrick <[hidden email]> a écrit :
>>
>>> Hi experts,
>>>
>>> Still experimenting the mobile API, and now, I face a strange problem. To sum-up, I have 2 pages, 1 with a list of items and the second one that allows to edit the 1st page selected item. Edition changes the item property that is used for list rendering on the first page. The problem is that, whatever I try, I cannot manage to get the list items updated accordingly to the 2nd page edition.
>>>
>>> Everything is MVC oriented through qooxdoo databinding. Since there is no mobile List controller, I had to use an object controller on the model item so that I can bind the renderer property to the model item property. This is called in configureItem of the List widget constructor and here is basically what it looks like :
>>>
>>>  bindListItem: function (item, state) {
>>>    var modelController = new qx.data.controller.Object(state);
>>>    modelController.addTarget(item, "title", "value");
>>>    modelController.addTarget(item, "subtitle", "description");
>>>    modelController.addTarget(item, "image", "iconImageUrl");
>>>  }
>>>
>>> When debugging, I can see the setTitle() method of the Default list renderer being called as expected. However, when I come back to the list page, Nothing has changed and the old value is still there. It may be linked to the fact that the list is not visible when the setTitle() method is called but I really have no clue.
>>>
>>> Am I missing something ?
>>>
>>> Thanks in advance for any hint.
>>>
>>> Regards,
>>> Vincent
>>
>


------------------------------------------------------------------------------
CenturyLink Cloud: The Leader in Enterprise Cloud Services.
Learn Why More Businesses Are Choosing CenturyLink Cloud For
Critical Workloads, Development Environments & Everything In Between.
Get a Quote or Start a Free Trial Today.
http://pubads.g.doubleclick.net/gampad/clk?id=119420431&iu=/4140/ostg.clktrk
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Databinding with mobile list items

MartinWittemann
Administrator
Hey,
Thanks for sharing the solution. It’s alway good to have a solution ready for further referencing.
Regards,
Martin

Am 20.01.2014 um 23:26 schrieb Vincent Vandenschrick <[hidden email]>:

> Ok. I solved my own problem, so here is the solution for the records.
> The key point is to have the model items fire bubbling events (the simplest is to include the qx.data.marshal.MEventBubbling mixin, and call _applyEventPropagation on property changes). Then the list will be notified of item property changes and render accordingly without any other action needed. Great design ;-)
>
> HTH,
> Vincent
>
>
> Le 20 janv. 2014 à 21:46, Vincent Vandenschrick <[hidden email]> a écrit :
>
>> Digging a little bit more, I discovered that this approach cannot work since when rendering the list, the same renderer instance is re-used and cloned for each list item. So I cannot get any handle on the widget actually drawn on the screen. So what would be the correct design to have the list reflecting the model changes ?
>>
>> Le 20 janv. 2014 à 21:32, Vincent Vandenschrick <[hidden email]> a écrit :
>>
>>> Hi again,
>>> So I built a small example simulating the problem with the list renderers not being repainted. In this example, a button listener directly changes one of the renderer title but nothing get changed on screen; of course, in real-life, the renderer should be notified of the model change, but for the sake of simplicity…
>>> I’m sure I must be missing something but I can’t figure out. Here is the playground test-case :
>>>
>>> http://tinyurl.com/pqzzd53
>>>
>>> Any hint? Shall I open a bug report ?
>>>
>>> Thanks in advance,
>>> Vincent
>>>
>>>
>>> Le 18 janv. 2014 à 15:34, Vincent Vandenschrick <[hidden email]> a écrit :
>>>
>>>> Hi experts,
>>>>
>>>> Still experimenting the mobile API, and now, I face a strange problem. To sum-up, I have 2 pages, 1 with a list of items and the second one that allows to edit the 1st page selected item. Edition changes the item property that is used for list rendering on the first page. The problem is that, whatever I try, I cannot manage to get the list items updated accordingly to the 2nd page edition.
>>>>
>>>> Everything is MVC oriented through qooxdoo databinding. Since there is no mobile List controller, I had to use an object controller on the model item so that I can bind the renderer property to the model item property. This is called in configureItem of the List widget constructor and here is basically what it looks like :
>>>>
>>>> bindListItem: function (item, state) {
>>>>   var modelController = new qx.data.controller.Object(state);
>>>>   modelController.addTarget(item, "title", "value");
>>>>   modelController.addTarget(item, "subtitle", "description");
>>>>   modelController.addTarget(item, "image", "iconImageUrl");
>>>> }
>>>>
>>>> When debugging, I can see the setTitle() method of the Default list renderer being called as expected. However, when I come back to the list page, Nothing has changed and the old value is still there. It may be linked to the fact that the list is not visible when the setTitle() method is called but I really have no clue.
>>>>
>>>> Am I missing something ?
>>>>
>>>> Thanks in advance for any hint.
>>>>
>>>> Regards,
>>>> Vincent
>>>
>>
>
>
> ------------------------------------------------------------------------------
> CenturyLink Cloud: The Leader in Enterprise Cloud Services.
> Learn Why More Businesses Are Choosing CenturyLink Cloud For
> Critical Workloads, Development Environments & Everything In Between.
> Get a Quote or Start a Free Trial Today.
> http://pubads.g.doubleclick.net/gampad/clk?id=119420431&iu=/4140/ostg.clktrk
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
CenturyLink Cloud: The Leader in Enterprise Cloud Services.
Learn Why More Businesses Are Choosing CenturyLink Cloud For
Critical Workloads, Development Environments & Everything In Between.
Get a Quote or Start a Free Trial Today.
http://pubads.g.doubleclick.net/gampad/clk?id=119420431&iu=/4140/ostg.clktrk
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Databinding with mobile list items

czuendorf
In reply to this post by Vincent Vandenschrick
Have a look at this example.

There you will see, how DataBinding works with a qx.Mobile List.

https://github.com/qooxdoo/qooxdoo/blob/cbef1c693e85976fafbea07036cdf554d7c16fb2/application/mobileshowcase/source/class/mobileshowcase/page/DataBinding.js

________________________________________
Von: Vincent Vandenschrick [[hidden email]]
Gesendet: Montag, 20. Januar 2014 23:26
An: qooxdoo Development
Betreff: Re: [qooxdoo-devel] Databinding with mobile list items

Ok. I solved my own problem, so here is the solution for the records.
The key point is to have the model items fire bubbling events (the simplest is to include the qx.data.marshal.MEventBubbling mixin, and call _applyEventPropagation on property changes). Then the list will be notified of item property changes and render accordingly without any other action needed. Great design ;-)

HTH,
Vincent


Le 20 janv. 2014 à 21:46, Vincent Vandenschrick <[hidden email]> a écrit :

> Digging a little bit more, I discovered that this approach cannot work since when rendering the list, the same renderer instance is re-used and cloned for each list item. So I cannot get any handle on the widget actually drawn on the screen. So what would be the correct design to have the list reflecting the model changes ?
>
> Le 20 janv. 2014 à 21:32, Vincent Vandenschrick <[hidden email]> a écrit :
>
>> Hi again,
>> So I built a small example simulating the problem with the list renderers not being repainted. In this example, a button listener directly changes one of the renderer title but nothing get changed on screen; of course, in real-life, the renderer should be notified of the model change, but for the sake of simplicity…
>> I’m sure I must be missing something but I can’t figure out. Here is the playground test-case :
>>
>> http://tinyurl.com/pqzzd53
>>
>> Any hint? Shall I open a bug report ?
>>
>> Thanks in advance,
>> Vincent
>>
>>
>> Le 18 janv. 2014 à 15:34, Vincent Vandenschrick <[hidden email]> a écrit :
>>
>>> Hi experts,
>>>
>>> Still experimenting the mobile API, and now, I face a strange problem. To sum-up, I have 2 pages, 1 with a list of items and the second one that allows to edit the 1st page selected item. Edition changes the item property that is used for list rendering on the first page. The problem is that, whatever I try, I cannot manage to get the list items updated accordingly to the 2nd page edition.
>>>
>>> Everything is MVC oriented through qooxdoo databinding. Since there is no mobile List controller, I had to use an object controller on the model item so that I can bind the renderer property to the model item property. This is called in configureItem of the List widget constructor and here is basically what it looks like :
>>>
>>>  bindListItem: function (item, state) {
>>>    var modelController = new qx.data.controller.Object(state);
>>>    modelController.addTarget(item, "title", "value");
>>>    modelController.addTarget(item, "subtitle", "description");
>>>    modelController.addTarget(item, "image", "iconImageUrl");
>>>  }
>>>
>>> When debugging, I can see the setTitle() method of the Default list renderer being called as expected. However, when I come back to the list page, Nothing has changed and the old value is still there. It may be linked to the fact that the list is not visible when the setTitle() method is called but I really have no clue.
>>>
>>> Am I missing something ?
>>>
>>> Thanks in advance for any hint.
>>>
>>> Regards,
>>> Vincent
>>
>


------------------------------------------------------------------------------
CenturyLink Cloud: The Leader in Enterprise Cloud Services.
Learn Why More Businesses Are Choosing CenturyLink Cloud For
Critical Workloads, Development Environments & Everything In Between.
Get a Quote or Start a Free Trial Today.
http://pubads.g.doubleclick.net/gampad/clk?id=119420431&iu=/4140/ostg.clktrk
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

------------------------------------------------------------------------------
CenturyLink Cloud: The Leader in Enterprise Cloud Services.
Learn Why More Businesses Are Choosing CenturyLink Cloud For
Critical Workloads, Development Environments & Everything In Between.
Get a Quote or Start a Free Trial Today.
http://pubads.g.doubleclick.net/gampad/clk?id=119420431&iu=/4140/ostg.clktrk
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Databinding with mobile list items

Vincent Vandenschrick
Thanks for the link,
For sure, this example works for adding / removing items from the model. In that case, the qx.data.Array does the notification job whatever added / removed to it. This does not demonstrate how the list can react to changes of items (e.g. the item title bound property change). For this I had to implement the bubbling events in my model items as explained.

Regards,
Vincent

Le 21 janv. 2014 à 21:37, Christopher Zündorf <[hidden email]> a écrit :

> Have a look at this example.
>
> There you will see, how DataBinding works with a qx.Mobile List.
>
> https://github.com/qooxdoo/qooxdoo/blob/cbef1c693e85976fafbea07036cdf554d7c16fb2/application/mobileshowcase/source/class/mobileshowcase/page/DataBinding.js
>
> ________________________________________
> Von: Vincent Vandenschrick [[hidden email]]
> Gesendet: Montag, 20. Januar 2014 23:26
> An: qooxdoo Development
> Betreff: Re: [qooxdoo-devel] Databinding with mobile list items
>
> Ok. I solved my own problem, so here is the solution for the records.
> The key point is to have the model items fire bubbling events (the simplest is to include the qx.data.marshal.MEventBubbling mixin, and call _applyEventPropagation on property changes). Then the list will be notified of item property changes and render accordingly without any other action needed. Great design ;-)
>
> HTH,
> Vincent
>
>
> Le 20 janv. 2014 à 21:46, Vincent Vandenschrick <[hidden email]> a écrit :
>
>> Digging a little bit more, I discovered that this approach cannot work since when rendering the list, the same renderer instance is re-used and cloned for each list item. So I cannot get any handle on the widget actually drawn on the screen. So what would be the correct design to have the list reflecting the model changes ?
>>
>> Le 20 janv. 2014 à 21:32, Vincent Vandenschrick <[hidden email]> a écrit :
>>
>>> Hi again,
>>> So I built a small example simulating the problem with the list renderers not being repainted. In this example, a button listener directly changes one of the renderer title but nothing get changed on screen; of course, in real-life, the renderer should be notified of the model change, but for the sake of simplicity…
>>> I’m sure I must be missing something but I can’t figure out. Here is the playground test-case :
>>>
>>> http://tinyurl.com/pqzzd53
>>>
>>> Any hint? Shall I open a bug report ?
>>>
>>> Thanks in advance,
>>> Vincent
>>>
>>>
>>> Le 18 janv. 2014 à 15:34, Vincent Vandenschrick <[hidden email]> a écrit :
>>>
>>>> Hi experts,
>>>>
>>>> Still experimenting the mobile API, and now, I face a strange problem. To sum-up, I have 2 pages, 1 with a list of items and the second one that allows to edit the 1st page selected item. Edition changes the item property that is used for list rendering on the first page. The problem is that, whatever I try, I cannot manage to get the list items updated accordingly to the 2nd page edition.
>>>>
>>>> Everything is MVC oriented through qooxdoo databinding. Since there is no mobile List controller, I had to use an object controller on the model item so that I can bind the renderer property to the model item property. This is called in configureItem of the List widget constructor and here is basically what it looks like :
>>>>
>>>> bindListItem: function (item, state) {
>>>>   var modelController = new qx.data.controller.Object(state);
>>>>   modelController.addTarget(item, "title", "value");
>>>>   modelController.addTarget(item, "subtitle", "description");
>>>>   modelController.addTarget(item, "image", "iconImageUrl");
>>>> }
>>>>
>>>> When debugging, I can see the setTitle() method of the Default list renderer being called as expected. However, when I come back to the list page, Nothing has changed and the old value is still there. It may be linked to the fact that the list is not visible when the setTitle() method is called but I really have no clue.
>>>>
>>>> Am I missing something ?
>>>>
>>>> Thanks in advance for any hint.
>>>>
>>>> Regards,
>>>> Vincent
>>>
>>
>
>
> ------------------------------------------------------------------------------
> CenturyLink Cloud: The Leader in Enterprise Cloud Services.
> Learn Why More Businesses Are Choosing CenturyLink Cloud For
> Critical Workloads, Development Environments & Everything In Between.
> Get a Quote or Start a Free Trial Today.
> http://pubads.g.doubleclick.net/gampad/clk?id=119420431&iu=/4140/ostg.clktrk
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
> ------------------------------------------------------------------------------
> CenturyLink Cloud: The Leader in Enterprise Cloud Services.
> Learn Why More Businesses Are Choosing CenturyLink Cloud For
> Critical Workloads, Development Environments & Everything In Between.
> Get a Quote or Start a Free Trial Today.
> http://pubads.g.doubleclick.net/gampad/clk?id=119420431&iu=/4140/ostg.clktrk
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
CenturyLink Cloud: The Leader in Enterprise Cloud Services.
Learn Why More Businesses Are Choosing CenturyLink Cloud For
Critical Workloads, Development Environments & Everything In Between.
Get a Quote or Start a Free Trial Today.
http://pubads.g.doubleclick.net/gampad/clk?id=119420431&iu=/4140/ostg.clktrk
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel