royale-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From OmPrakash Muppirala <bigosma...@gmail.com>
Subject Re: Setting/binding data in mxml - what am I doing wrong?
Date Tue, 27 Mar 2018 08:54:14 GMT
Thanks for the pointers, Alex and Piotr.  I was able to make this work.
Now we have a nice little Echarts chart showing up :-)


One issue I noticed was that setting values inside an anonymous function
does not trigger bindings.  I'm not sure if that is a bug or an expected
feature.  Thoughts?

In any case, I am now unblocked so I will be able add more features.  I
will put up a demo/example page for this work soon.

Thanks,
Om


On Mon, Mar 26, 2018 at 9:25 AM, Alex Harui <aharui@adobe.com.invalid>
wrote:

> In the end, DataBinding is really just a convenient way to generate
> listeners for change events and handlers that update things.  When you
> look at nested data structures, some kinds of changes are easily detected
> and others are not.  It is useful to understand what kinds of changes
> could be made.  I listed some possibilities earlier.
>
> For a series:
> 1) change the entire ArrayList
> 2) add/remove items
> 3) change the data in the item itself.
> 4) change the array wrapped by the ArrayList
>
> Each of these requires code that detects changes at different levels.
> Most of Royale can easily detect #1.  You have to either change to a
> subclass of ArrayList or drop a bead on it to detect #2.  I don't think
> we've written code for #3 yet.  Not sure about #4.  For #3, event
> listeners need to be added on each item in the ArrayList (and removed if
> the item is removed from the ArrayList).  We don't handle all of these
> cases out-of-the-box for PAYG reasons.
>
> So, you have to understand how the data is changing and get it to trigger
> events on those changes.  And possibly use a different DataBinding
> implementation to detect those changes at certain times.  That's what
> ItemRendererDataBinding does.
>
> HTH,
> -Alex
>
> On 3/26/18, 1:05 AM, "Piotr Zarzycki" <piotrzarzycki21@gmail.com> wrote:
>
> >Om,
> >
> >You are right! I did look into the PieChart and found  ChartBase, which
> >extends List, but you are using EChart which is simple UIBase.
> >However still probably should be similar bead factory created which
> >handles
> >creation of each item.
> >
> >Sorry for the confusion.
> >
> >Thanks, Piotr
> >
> >2018-03-26 9:54 GMT+02:00 OmPrakash Muppirala <bigosmallm@gmail.com>:
> >
> >> So, if I create a echarts.SeriesList class that extends ArrayList - it
> >>can
> >> handle the addition and updates of Series objects.  Is that a better
> >> approach?
> >>
> >> Thanks,
> >> Om
> >>
> >> On Mon, Mar 26, 2018 at 12:47 AM, OmPrakash Muppirala <
> >> bigosmallm@gmail.com>
> >> wrote:
> >>
> >> >
> >> >
> >> > On Mon, Mar 26, 2018 at 12:34 AM, Piotr Zarzycki <
> >> > piotrzarzycki21@gmail.com> wrote:
> >> >
> >> >> Hi Om,
> >> >>
> >> >> Since your base chart class is a actually a List,
> >> >
> >> >
> >> > I'm confused.  How is it a List?
> >> >
> >> >
> >> >> your EChart should use
> >> >> [1] and [2]. However it is possible that you will have to implement
> >>your
> >> >> own Factory which is extends the current one.
> >> >>
> >> >> [1]
> >>https://na01.safelinks.protection.outlook.com/?url=
> https%3A%2F%2Fgoo.gl%2
> >>FafXdPr&data=02%7C01%7Caharui%40adobe.com%7C47043e4531a148aef4d208d592f0
> 5
> >>00e%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> 7C636576483221343567&sdata
> >>=%2FyCH3DmV45%2FNp8O0shMTRoSnbhXpOTUfHKCpCsSlSkI%3D&reserved=0
> >> >> [2]
> >>https://na01.safelinks.protection.outlook.com/?url=
> https%3A%2F%2Fgoo.gl%2
> >>FNz8YbE&data=02%7C01%7Caharui%40adobe.com%7C47043e4531a148aef4d208d592f0
> 5
> >>00e%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> 7C636576483221343567&sdata
> >>=E2ZaeAOXXKA4gEACwPx6D%2B4oUiwT%2Bk2QLSeKEl%2BEGTM%3D&reserved=0
> >> >
> >> >
> >> > Thanks for the pointers.  I will study this code and see how I can
> >>adapt
> >> > this.
> >> >
> >> > Regards,
> >> > Om
> >> >
> >> >
> >> >>
> >> >>
> >> >> Thanks, Piotr
> >> >>
> >> >> 2018-03-26 9:16 GMT+02:00 OmPrakash Muppirala <bigosmallm@gmail.com
> >:
> >> >>
> >> >> > Okay, I was able to make quite a bit of progress on the ECharts
> >> effort.
> >> >> > The next thing I am stuck on is on how to listen to changes to
> >>items
> >> in
> >> >> an
> >> >> > ArrayList.
> >> >> > This is how the mxml looks like:
> >> >> >
> >> >> > <ns2:ECharts id="chart">
> >> >> > <ns2:chartOptions>
> >> >> > <ns2:EChartsOptions>
> >> >> > <ns2:title>
> >> >> > <ns2:Title text="My ECharts Title" show="true"
> >> >> >
> >>link="https://na01.safelinks.protection.outlook.
> com/?url=http%3A%2F%2Fwww
> >>.google.com&data=02%7C01%7Caharui%40adobe.com%
> 7C47043e4531a148aef4d208d59
> >>2f0500e%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> 7C636576483221343567&s
> >>data=Z1QFgp5ZetKGJay0kOB5HIfLUaSGX55jZvf1A8Mx5Dk%3D&reserved=0"
> >>target="_self" />
> >> >> > </ns2:title>
> >> >> > <ns2:xAxis>
> >> >> > <ns2:XAxis data="{this.data}" position="top" />
> >> >> > </ns2:xAxis>
> >> >> > <ns2:yAxis>
> >> >> > <ns2:YAxis/>
> >> >> > </ns2:yAxis>
> >> >> > <ns2:series>
> >> >> > <js:ArrayList>
> >> >> > <ns2:Series name="Accounts" type="bar" data="{this.seriesData}"
/>
> >> >> > </js:ArrayList>
> >> >> > </ns2:series>
> >> >> > </ns2:EChartsOptions>
> >> >> > </ns2:chartOptions>
> >> >> > </ns2:ECharts>
> >> >> >
> >> >> >
> >> >> > The databinding on xAxis.data works fine now.  Now I need to make
> >>the
> >> >> same
> >> >> > thing work with series[0].data.
> >> >> >
> >> >> > The relevant classes are here:
> >> >> > EChartsOptions.as:
> >> >> >
> >>https://na01.safelinks.protection.outlook.com/?url=
> https%3A%2F%2Fgithub.c
> >>om%2Fapache%2Froyale-asjs%2Fblob%2F4ae36845c19a923a5&
> data=02%7C01%7Caharu
> >>i%40adobe.com%7C47043e4531a148aef4d208d592f0
> 500e%7Cfa7b1b5a7b34438794aed2
> >>c178decee1%7C0%7C0%7C636576483221343567&sdata=
> tUpeAO4RBkOAdBWSEA8RGvjxhzU
> >>WdpPWXMAb8s%2B%2F0Lo%3D&reserved=0
> >> >> 8f795738b2f42
> >> >> > 8c2615d130/examples/royale/ECharts/src/echarts/EChartsOptions.as
> >> >> >
> >> >> > Series.as:
> >> >> >
> >>https://na01.safelinks.protection.outlook.com/?url=
> https%3A%2F%2Fgithub.c
> >>om%2Fapache%2Froyale-asjs%2Fblob%2F4ae36845c19a923a5&
> data=02%7C01%7Caharu
> >>i%40adobe.com%7C47043e4531a148aef4d208d592f0
> 500e%7Cfa7b1b5a7b34438794aed2
> >>c178decee1%7C0%7C0%7C636576483221343567&sdata=
> tUpeAO4RBkOAdBWSEA8RGvjxhzU
> >>WdpPWXMAb8s%2B%2F0Lo%3D&reserved=0
> >> >> 8f795738b2f42
> >> >> > 8c2615d130/examples/royale/ECharts/src/echarts/Series.as
> >> >> >
> >> >> > Any pointers?
> >> >> >
> >> >> > Thanks,
> >> >> > Om
> >> >> >
> >> >> > On Fri, Mar 16, 2018 at 9:16 AM, Alex Harui
> >><aharui@adobe.com.invalid
> >> >
> >> >> > wrote:
> >> >> >
> >> >> > > Om appears to be using Express Application, which should
have
> >> >> > > ApplicationDataBinding baked in.  That can be verified in
the
> >> >> debugger by
> >> >> > > checking what is on the strand.
> >> >> > >
> >> >> > > Bindings are not evaluated at instantiation time so the
> >>destination
> >> >> > > properties need to handle changing at runtime or the entire
> >> component
> >> >> > > needs to apply all properties at the right time.
> >> >> > >
> >> >> > > HTH,
> >> >> > > -Alex
> >> >> > >
> >> >> > > On 3/16/18, 2:35 AM, "Harbs" <harbs.lists@gmail.com>
wrote:
> >> >> > >
> >> >> > > >I’m pretty sure that only works if the view is a separate
mxml
> >> file.
> >> >> > > >
> >> >> > > >> On Mar 16, 2018, at 11:28 AM, Piotr Zarzycki
> >> >> > > >><piotrzarzycki21@gmail.com> wrote:
> >> >> > > >>
> >> >> > > >> I'm also wondering whether it will work if he apply
> >> >> > <js:ViewDataBinding
> >> >> > > >>/>
> >> >> > > >> in View only...
> >> >> > > >>
> >> >> > > >> 2018-03-16 10:26 GMT+01:00 Harbs <harbs.lists@gmail.com>:
> >> >> > > >>
> >> >> > > >>> It looks like you are missing <js:ApplicationDataBinding/>
> >> >> > > >>>
> >> >> > > >>>> On Mar 16, 2018, at 11:21 AM, OmPrakash
Muppirala
> >> >> > > >>>><bigosmallm@gmail.com>
> >> >> > > >>> wrote:
> >> >> > > >>>>
> >> >> > > >>>> Please take a look at these usage examples:
[1], [2]
> >> >> > > >>>>
> >> >> > > >>>> I am trying to set/bind arrays as values
to the chart
> >> components.
> >> >> > But
> >> >> > > >>>> those values dont get applied at all.
> >> >> > > >>>>
> >> >> > > >>>> Can someone please take a look?
> >> >> > > >>>>
> >> >> > > >>>> The entire app can be found here: [3]
> >> >> > > >>>>
> >> >> > > >>>> Thanks,
> >> >> > > >>>> Om
> >> >> > > >>>>
> >> >> > > >>>>
> >> >> > > >>>> [1]
> >> >> > > >>>>
> >> >> > > >>>>https://na01.safelinks.protection.outlook.com/?url=
> >> >> > > https%3A%2F%2Fgithub
> >> >> > > >>>>.com%2Fapache%2Froyale-asjs%2Fblob%2Ffeature%2F&data=
> >> >> > > 02%7C01%7Caharui%4
> >> >> > > >>>>0adobe.com%7Cc0b67f1e7b0b44699adb08d58b21
> >> >> > > 4cf5%7Cfa7b1b5a7b34438794aed2c
> >> >> > > >>>>178decee1%7C0%7C0%7C636567897496708478&sdata=
> >> >> > > zjAObepBqE9V2O8ktwnjs%2F%2
> >> >> > > >>>>Fpl%2F0J%2FIpj%2B1%2FsCTK%2B6WA%3D&reserved=0
> >> >> > > >>> echarts/examples/royale/ECharts/src/Main.mxml#L26
> >> >> > > >>>> [2]
> >> >> > > >>>>
> >> >> > > >>>>https://na01.safelinks.protection.outlook.com/?url=
> >> >> > > https%3A%2F%2Fgithub
> >> >> > > >>>>.com%2Fapache%2Froyale-asjs%2Fblob%2Ffeature%2F&data=
> >> >> > > 02%7C01%7Caharui%4
> >> >> > > >>>>0adobe.com%7Cc0b67f1e7b0b44699adb08d58b21
> >> >> > > 4cf5%7Cfa7b1b5a7b34438794aed2c
> >> >> > > >>>>178decee1%7C0%7C0%7C636567897496708478&sdata=
> >> >> > > zjAObepBqE9V2O8ktwnjs%2F%2
> >> >> > > >>>>Fpl%2F0J%2FIpj%2B1%2FsCTK%2B6WA%3D&reserved=0
> >> >> > > >>> echarts/examples/royale/ECharts/src/Main.mxml#L31
> >> >> > > >>>> [3]
> >> >> > > >>>>
> >> >> > > >>>>https://na01.safelinks.protection.outlook.com/?url=
> >> >> > > https%3A%2F%2Fgithub
> >> >> > > >>>>.com%2Fapache%2Froyale-asjs%2Fblob%2Ffeature%2F&data=
> >> >> > > 02%7C01%7Caharui%4
> >> >> > > >>>>0adobe.com%7Cc0b67f1e7b0b44699adb08d58b21
> >> >> > > 4cf5%7Cfa7b1b5a7b34438794aed2c
> >> >> > > >>>>178decee1%7C0%7C0%7C636567897496708478&sdata=
> >> >> > > zjAObepBqE9V2O8ktwnjs%2F%2
> >> >> > > >>>>Fpl%2F0J%2FIpj%2B1%2FsCTK%2B6WA%3D&reserved=0
> >> >> > > >>> echarts/examples/royale/ECharts
> >> >> > > >>>
> >> >> > > >>>
> >> >> > > >>
> >> >> > > >>
> >> >> > > >> --
> >> >> > > >>
> >> >> > > >> Piotr Zarzycki
> >> >> > > >>
> >> >> > > >> Patreon:
> >> >> > > >>*https://na01.safelinks.protection.outlook.com/?url=
> >> >> > > https%3A%2F%2Fwww.pat
> >> >> > > >>reon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com
> >> >> > > %7Cc0b67f1e7b0b
> >> >> > > >>44699adb08d58b214cf5%7Cfa7b1b5a7b34438794aed2c178de
> >> >> > > cee1%7C0%7C0%7C6365678
> >> >> > > >>97496708478&sdata=B%2FFqHMwrwAGEnorLx5Z4kia4K73rXy
> >> >> > > RtoTn9kE0xDOg%3D&reserv
> >> >> > > >>ed=0
> >> >> > > >>
> >> >> > > >><https://na01.safelinks.protection.outlook.com/?url=
> >> >> > > https%3A%2F%2Fwww.pat
> >> >> > > >>reon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com
> >> >> > > %7Cc0b67f1e7b0b
> >> >> > > >>44699adb08d58b214cf5%7Cfa7b1b5a7b34438794aed2c178de
> >> >> > > cee1%7C0%7C0%7C6365678
> >> >> > > >>97496708478&sdata=B%2FFqHMwrwAGEnorLx5Z4kia4K73rXy
> >> >> > > RtoTn9kE0xDOg%3D&reserv
> >> >> > > >>ed=0>*
> >> >> > > >
> >> >> > >
> >> >> > >
> >> >> >
> >> >>
> >> >>
> >> >>
> >> >> --
> >> >>
> >> >> Piotr Zarzycki
> >> >>
> >> >> Patreon:
> >>*https://na01.safelinks.protection.outlook.com/?url=
> https%3A%2F%2Fwww.pat
> >>reon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com
> %7C47043e4531a1
> >>48aef4d208d592f0500e%7Cfa7b1b5a7b34438794aed2c178de
> cee1%7C0%7C0%7C6365764
> >>83221343567&sdata=btUXyJZQB%2F9AgUawlpJ29StZvDvCgOwJYeyZ%
> 2BjJ6YTk%3D&rese
> >>rved=0
> >> >>
> >><https://na01.safelinks.protection.outlook.com/?url=
> https%3A%2F%2Fwww.pat
> >>reon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com
> %7C47043e4531a1
> >>48aef4d208d592f0500e%7Cfa7b1b5a7b34438794aed2c178de
> cee1%7C0%7C0%7C6365764
> >>83221343567&sdata=btUXyJZQB%2F9AgUawlpJ29StZvDvCgOwJYeyZ%
> 2BjJ6YTk%3D&rese
> >>rved=0>*
> >> >>
> >> >
> >> >
> >>
> >
> >
> >
> >--
> >
> >Piotr Zarzycki
> >
> >Patreon:
> >*https://na01.safelinks.protection.outlook.com/?url=
> https%3A%2F%2Fwww.patr
> >eon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com%
> 7C47043e4531a148
> >aef4d208d592f0500e%7Cfa7b1b5a7b34438794aed2c178de
> cee1%7C0%7C0%7C6365764832
> >21343567&sdata=btUXyJZQB%2F9AgUawlpJ29StZvDvCgOwJYeyZ%
> 2BjJ6YTk%3D&reserved
> >=0
> ><https://na01.safelinks.protection.outlook.com/?url=
> https%3A%2F%2Fwww.patr
> >eon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com%
> 7C47043e4531a148
> >aef4d208d592f0500e%7Cfa7b1b5a7b34438794aed2c178de
> cee1%7C0%7C0%7C6365764832
> >21343567&sdata=btUXyJZQB%2F9AgUawlpJ29StZvDvCgOwJYeyZ%
> 2BjJ6YTk%3D&reserved
> >=0>*
>
>

Mime
  • Unnamed multipart/related (inline, None, 0 bytes)
View raw message