Hi Om,
that looks great! Congrats! :)
about questions, only can respond to 2), yes we have DefaultProperty, for
example in Group.as you can see [DefaultProperty("mxmlContent")]
2018-03-27 11:19 GMT+02:00 OmPrakash Muppirala <[email protected]>:
> And here is the mxml for this chart:
>
> <ns2:ECharts id="chart">
> <ns2:chartOptions>
> <ns2:EChartsOptions>
> <ns2:title>
> <ns2:Title text="Sales vs. Profit" show="true"
> link="https://ecomfe.github.io/echarts-examples/public/index.html"; target=
> "_self" />
> </ns2:title>
> <ns2:xAxis>
> <ns2:XAxis data="{this.data}" position="top" />
> </ns2:xAxis>
> <ns2:yAxis>
> <ns2:YAxis/>
> </ns2:yAxis>
> <ns2:seriesList>
> <ns2:SeriesList>
> <ns2:series>
> <fx:Array>
> <ns2:Series name="Sales" type="bar" data="{this.salesData}" />
> <ns2:Series name="Profit" type="line" data="{this.profitData}" />
> </fx:Array>
> </ns2:series>
> </ns2:SeriesList>
> </ns2:seriesList>
> </ns2:EChartsOptions>
> </ns2:chartOptions>
> </ns2:ECharts>
>
>
> Couple of questions:
>
> 1. I would like to provide a drop down of options for some properties like
> Series.type like "bar", "line", etc. I believe you could do that in Flex
> using the [Inspectable] metadata tag. Does Royale support that?
>
> 2. The above mxml, though works fine, seems a bit too verbose. Is it
> possible to specify default properties via the DefaultProperty metadata
> tag?
> For example, if SeriesList had this tag: [DefaultProperty("series")],
>
> we could simplify the seriesList element as:
>
> <ns2:seriesList>
> <ns2:SeriesList>
> <fx:Array>
> <ns2:Series name="Sales" type="bar" data="{this.salesData}" />
> <ns2:Series name="Profit" type="line" data="{this.profitData}" />
> </fx:Array>
> </ns2:SeriesList>
> </ns2:seriesList>
>
>
> On Tue, Mar 27, 2018 at 2:01 AM, OmPrakash Muppirala <[email protected]
> >
> wrote:
>
> > Ah, thanks for catching that. Here is a screenshot: https://snag.gy/6W
> > XsCi.jpg
> >
> > Regards,
> > Om
> >
> > On Tue, Mar 27, 2018 at 1:59 AM, Carlos Rovira <[email protected]>
> > wrote:
> >
> >> Hi Om,
> >>
> >> that's great, but image is not shown, better upload to snaggit and then
> >> send the link
> >> thanks for working on that! :)
> >>
> >> 2018-03-27 10:54 GMT+02:00 OmPrakash Muppirala <[email protected]>:
> >>
> >> > 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 <[email protected]
> >
> >> > 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" <[email protected]>
> >> 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 <[email protected]
> >:
> >> >> >
> >> >> >> 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 <
> >> >> >> [email protected]>
> >> >> >> wrote:
> >> >> >>
> >> >> >> >
> >> >> >> >
> >> >> >> > On Mon, Mar 26, 2018 at 12:34 AM, Piotr Zarzycki <
> >> >> >> > [email protected]> 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%7C47043e4531a148
> >> >> aef4d208d592f05
> >> >> >>00e%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636576483
> >> >> 221343567&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%7C47043e4531a148
> >> >> aef4d208d592f05
> >> >> >>00e%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636576483
> >> >> 221343567&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 <
> >> [email protected]
> >> >> >:
> >> >> >> >>
> >> >> >> >> > 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%7C47043e4531
> >> >> a148aef4d208d59
> >> >> >>2f0500e%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C63657
> >> >> 6483221343567&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%7C47043e4531a148aef4d208d592f0500e%
> >> >> 7Cfa7b1b5a7b34438794aed2
> >> >> >>c178decee1%7C0%7C0%7C636576483221343567&sdata=tUpeAO4RBkOA
> >> >> dBWSEA8RGvjxhzU
> >> >> >>WdpPWXMAb8s%2B%2F0Lo%3D&reserved=0
> >> >> >> >> 8f795738b2f42
> >> >> >> >> > 8c2615d130/examples/royale/ECharts/src/echarts/EChartsOption
> >> s.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%7C47043e4531a148aef4d208d592f0500e%
> >> >> 7Cfa7b1b5a7b34438794aed2
> >> >> >>c178decee1%7C0%7C0%7C636576483221343567&sdata=tUpeAO4RBkOA
> >> >> dBWSEA8RGvjxhzU
> >> >> >>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
> >> >> >><[email protected]
> >> >> >> >
> >> >> >> >> > 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" <[email protected]>
> 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
> >> >> >> >> > > >><[email protected]> 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 <[email protected]
> >:
> >> >> >> >> > > >>
> >> >> >> >> > > >>> It looks like you are missing
> >> <js:ApplicationDataBinding/>
> >> >> >> >> > > >>>
> >> >> >> >> > > >>>> On Mar 16, 2018, at 11:21 AM, OmPrakash Muppirala
> >> >> >> >> > > >>>><[email protected]>
> >> >> >> >> > > >>> 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%7Cfa7b1b5a7b34438794aed2c178decee1%
> >> >> 7C0%7C0%7C6365764
> >> >> >>83221343567&sdata=btUXyJZQB%2F9AgUawlpJ29StZvDvCgOwJYeyZ%2
> >> >> BjJ6YTk%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%7Cfa7b1b5a7b34438794aed2c178decee1%
> >> >> 7C0%7C0%7C6365764
> >> >> >>83221343567&sdata=btUXyJZQB%2F9AgUawlpJ29StZvDvCgOwJYeyZ%2
> >> >> BjJ6YTk%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%7
> >> >> C47043e4531a148
> >> >> >aef4d208d592f0500e%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%
> >> >> 7C0%7C6365764832
> >> >> >21343567&sdata=btUXyJZQB%2F9AgUawlpJ29StZvDvCgOwJYeyZ%2BjJ6
> >> >> YTk%3D&reserved
> >> >> >=0
> >> >> ><https://na01.safelinks.protection.outlook.com/?url=https%
> >> >> 3A%2F%2Fwww.patr
> >> >> >eon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com%7
> >> >> C47043e4531a148
> >> >> >aef4d208d592f0500e%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%
> >> >> 7C0%7C6365764832
> >> >> >21343567&sdata=btUXyJZQB%2F9AgUawlpJ29StZvDvCgOwJYeyZ%2BjJ6
> >> >> YTk%3D&reserved
> >> >> >=0>*
> >> >>
> >> >>
> >> >
> >>
> >>
> >> --
> >> Carlos Rovira
> >> http://about.me/carlosrovira
> >>
> >
> >
>
--
Carlos Rovira
http://about.me/carlosrovira
