You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by OmPrakash Muppirala <bi...@gmail.com> on 2014/09/12 00:40:39 UTC
Re: FlexJS chart package now uses FlexJS core/graphics for the
charts' graphics
Peter,
I just tested out the ChartExample app. It looks awesome! Thanks for
making this work end to end. Nice to see validation that using SVG lets us
do great visualizations that work exactly same in Flash and HTML5!
A couple of things I noticed:
1. I see unnecessary horizontal and vertical scrollbars. It seems that
the the chart elements do not fit inside the div's width and height.
2. I am looking at the HTML for the chart, for example:Gist here:
https://gist.github.com/bigosmallm/ae510538df51b8356d7d
I see that we are creating a whole bunch of unnecessary divs and svg
elements. Would it be better if we created on SVG drawing canvas and drew
all the graphics inside it? It would make for a cleaner implementation and
better runtime performance.
I am thinking that we will create a GraphicsContainer class which would
extend off of UIBase. Inside it would be one SVG element where you can
draw all the graphic elements in one co-ordinate space.
Let me know what you think.
Thanks,
Om
Re: FlexJS chart package now uses FlexJS core/graphics for the
charts' graphics
Posted by Peter Ent <pe...@adobe.com>.
On 9/15/14 4:18 PM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
>On Mon, Sep 15, 2014 at 1:09 PM, Peter Ent <pe...@adobe.com> wrote:
>
>> I need to retrace my steps. I should have looked to see how
>> GraphicsContainer was implemented in JavaScript before proceeding.
>>
>> GraphicsContainer is a <svg> element, essentially, and to add <Rect>,
>> <Line>, and so forth, you use functions on GraphicsContainer to do that,
>> rather than creating a core.graphics.Rect and adding it as an element to
>> GraphicsContainer.
>>
>
>There is another reason I did this. Adding individual Rects with
>enclosing
>SVG elements means that all the graphic shapes are draw in their own
>co-ordinate spaces. I am having difficulties with resizing the SVG
>element
>based on its child element. Hence drawing all objects in the same SVG
>element sort of fixes this problem.
>
>For example, on the JS side, a horizontal line with a stroke of 5 will
>give
>me a bounding box of (0,0,0,1) It seems that the borders are not
>accounted
>for when calculating bounding boxes.
>
>
>
>>
>> This model really won't work that well for charts. Charts could be made
>>to
>> do this, but in the spirit of each bar or wedge being an itemRenderer, I
>> think it best to continue as-is, even though it may introduce a bit of
>> extra overhead on the JavaScript side. We can address this further down
>> the road.
>>
>
>I do see the problem. I will keep adding support for both types
>(individual shape classes that can be added to a UIBase as well as the
>GraphicsContainer) You can chose the former for charts. I believe for
>skinning, having a single drawing surface would be useful.
>
>Let me know if this works.
I think this is good solution for now - we'll let charts have individual
<svg>s and skins can make use of the more compact drawing.
--peter
>
>Thanks,
>Om
>
>
>>
>> Peter Ent
>> Adobe Systems
>>
>> On 9/15/14 2:39 PM, "Peter Ent" <pe...@adobe.com> wrote:
>>
>> >I've converted ChartDataGroup on the ActionScript side so that it uses
>>a
>> >GraphicsContainer. ChartDataGroup extends UIBase and so the elements
>>being
>> >added to it are its children. The modification inserts a
>>GraphicsContainer
>> >into ChartDataGroup as its only child and then overrides addElement to
>> >place the itemRenderer children into the GraphicsContainer.
>> >
>> >This works well in ActionScript because GraphicsContainer also extends
>> >UIBase. But this is failing on the JavaScript side because neither
>> >GraphicsContainer nor GraphicsShape implement IUIBase. This is
>>something
>> >to determine if the graphic elements should conform to IUIBase or be
>> >something else.
>> >
>> >I could imagine that ChartDataGroup might have addElement for normal
>> >IUIBase components (e.g., adding a Label to a chart) and a new
>>function,
>> >like addGraphicElement() that would added charting graphics.
>> >
>> >At the moment, the chart package works great, it just produces a lot of
>> >extra <div> and <svg> tags on the JS side.
>> >
>> >Peter Ent
>> >Adobe Systems
>> >
>> >On 9/12/14 6:40 PM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
>> >
>> >>On Fri, Sep 12, 2014 at 12:40 PM, Peter Ent <pe...@adobe.com> wrote:
>> >>
>> >>> I have modified the chart code so that the JS side does not have
>> >>>borders
>> >>> and scrollbars.
>> >>>
>> >>
>> >>I just tried it. Looks fantastic! I can't even tell the difference
>> >>between the Flash version and the HTML5 version. The only difference
>>I
>> >>can
>> >>see is in the text.
>> >>
>> >>This is only going to get better :-)
>> >>
>> >>
>> >>>
>> >>> While looking at the HTML generated this morning, not only did I see
>> >>>the
>> >>> extra <div>s and <svg>s, but I also saw that extra itemRenderers
>>were
>> >>> being generated. I pushed code that addresses that as well.
>> >>>
>> >>> Now if we could get a GraphicContainer or something like it, we
>>should
>> >>>be
>> >>> able to have the itemRenderers just add a graphic element (e.g.,
>>Rect)
>> >>>as
>> >>> they do now, except it would be parented by the ChartDataGroup (aka,
>> >>> <svg>).
>> >>>
>> >>
>> >>I just checked in the GraphicsContainer component for AS and JS. The
>> >>usage
>> >>example can be seen in examples/FlexJSTest_SVG/GraphicsView.mxml
>> >>
>> >>Thanks,
>> >>Om
>> >>
>> >>
>> >>>
>> >>> Peter Ent
>> >>> Adobe Systems
>> >>>
>> >>> On 9/11/14 6:40 PM, "OmPrakash Muppirala" <bi...@gmail.com>
>> wrote:
>> >>>
>> >>> >Peter,
>> >>> >
>> >>> >I just tested out the ChartExample app. It looks awesome! Thanks
>> >>>for
>> >>> >making this work end to end. Nice to see validation that using SVG
>> >>>lets
>> >>> >us
>> >>> >do great visualizations that work exactly same in Flash and HTML5!
>> >>> >
>> >>> >A couple of things I noticed:
>> >>> >
>> >>> >1. I see unnecessary horizontal and vertical scrollbars. It seems
>> >>>that
>> >>> >the the chart elements do not fit inside the div's width and
>>height.
>> >>> >2. I am looking at the HTML for the chart, for example:Gist here:
>> >>> >https://gist.github.com/bigosmallm/ae510538df51b8356d7d
>> >>> >
>> >>> >I see that we are creating a whole bunch of unnecessary divs and
>>svg
>> >>> >elements. Would it be better if we created on SVG drawing canvas
>>and
>> >>>drew
>> >>> >all the graphics inside it? It would make for a cleaner
>> >>>implementation
>> >>> >and
>> >>> >better runtime performance.
>> >>> >
>> >>> >I am thinking that we will create a GraphicsContainer class which
>> >>>would
>> >>> >extend off of UIBase. Inside it would be one SVG element where you
>> >>>can
>> >>> >draw all the graphic elements in one co-ordinate space.
>> >>> >
>> >>> >Let me know what you think.
>> >>> >
>> >>> >Thanks,
>> >>> >Om
>> >>>
>> >>>
>> >
>>
>>
Re: FlexJS chart package now uses FlexJS core/graphics for the
charts' graphics
Posted by OmPrakash Muppirala <bi...@gmail.com>.
On Mon, Sep 15, 2014 at 1:09 PM, Peter Ent <pe...@adobe.com> wrote:
> I need to retrace my steps. I should have looked to see how
> GraphicsContainer was implemented in JavaScript before proceeding.
>
> GraphicsContainer is a <svg> element, essentially, and to add <Rect>,
> <Line>, and so forth, you use functions on GraphicsContainer to do that,
> rather than creating a core.graphics.Rect and adding it as an element to
> GraphicsContainer.
>
There is another reason I did this. Adding individual Rects with enclosing
SVG elements means that all the graphic shapes are draw in their own
co-ordinate spaces. I am having difficulties with resizing the SVG element
based on its child element. Hence drawing all objects in the same SVG
element sort of fixes this problem.
For example, on the JS side, a horizontal line with a stroke of 5 will give
me a bounding box of (0,0,0,1) It seems that the borders are not accounted
for when calculating bounding boxes.
>
> This model really won't work that well for charts. Charts could be made to
> do this, but in the spirit of each bar or wedge being an itemRenderer, I
> think it best to continue as-is, even though it may introduce a bit of
> extra overhead on the JavaScript side. We can address this further down
> the road.
>
I do see the problem. I will keep adding support for both types
(individual shape classes that can be added to a UIBase as well as the
GraphicsContainer) You can chose the former for charts. I believe for
skinning, having a single drawing surface would be useful.
Let me know if this works.
Thanks,
Om
>
> Peter Ent
> Adobe Systems
>
> On 9/15/14 2:39 PM, "Peter Ent" <pe...@adobe.com> wrote:
>
> >I've converted ChartDataGroup on the ActionScript side so that it uses a
> >GraphicsContainer. ChartDataGroup extends UIBase and so the elements being
> >added to it are its children. The modification inserts a GraphicsContainer
> >into ChartDataGroup as its only child and then overrides addElement to
> >place the itemRenderer children into the GraphicsContainer.
> >
> >This works well in ActionScript because GraphicsContainer also extends
> >UIBase. But this is failing on the JavaScript side because neither
> >GraphicsContainer nor GraphicsShape implement IUIBase. This is something
> >to determine if the graphic elements should conform to IUIBase or be
> >something else.
> >
> >I could imagine that ChartDataGroup might have addElement for normal
> >IUIBase components (e.g., adding a Label to a chart) and a new function,
> >like addGraphicElement() that would added charting graphics.
> >
> >At the moment, the chart package works great, it just produces a lot of
> >extra <div> and <svg> tags on the JS side.
> >
> >Peter Ent
> >Adobe Systems
> >
> >On 9/12/14 6:40 PM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
> >
> >>On Fri, Sep 12, 2014 at 12:40 PM, Peter Ent <pe...@adobe.com> wrote:
> >>
> >>> I have modified the chart code so that the JS side does not have
> >>>borders
> >>> and scrollbars.
> >>>
> >>
> >>I just tried it. Looks fantastic! I can't even tell the difference
> >>between the Flash version and the HTML5 version. The only difference I
> >>can
> >>see is in the text.
> >>
> >>This is only going to get better :-)
> >>
> >>
> >>>
> >>> While looking at the HTML generated this morning, not only did I see
> >>>the
> >>> extra <div>s and <svg>s, but I also saw that extra itemRenderers were
> >>> being generated. I pushed code that addresses that as well.
> >>>
> >>> Now if we could get a GraphicContainer or something like it, we should
> >>>be
> >>> able to have the itemRenderers just add a graphic element (e.g., Rect)
> >>>as
> >>> they do now, except it would be parented by the ChartDataGroup (aka,
> >>> <svg>).
> >>>
> >>
> >>I just checked in the GraphicsContainer component for AS and JS. The
> >>usage
> >>example can be seen in examples/FlexJSTest_SVG/GraphicsView.mxml
> >>
> >>Thanks,
> >>Om
> >>
> >>
> >>>
> >>> Peter Ent
> >>> Adobe Systems
> >>>
> >>> On 9/11/14 6:40 PM, "OmPrakash Muppirala" <bi...@gmail.com>
> wrote:
> >>>
> >>> >Peter,
> >>> >
> >>> >I just tested out the ChartExample app. It looks awesome! Thanks
> >>>for
> >>> >making this work end to end. Nice to see validation that using SVG
> >>>lets
> >>> >us
> >>> >do great visualizations that work exactly same in Flash and HTML5!
> >>> >
> >>> >A couple of things I noticed:
> >>> >
> >>> >1. I see unnecessary horizontal and vertical scrollbars. It seems
> >>>that
> >>> >the the chart elements do not fit inside the div's width and height.
> >>> >2. I am looking at the HTML for the chart, for example:Gist here:
> >>> >https://gist.github.com/bigosmallm/ae510538df51b8356d7d
> >>> >
> >>> >I see that we are creating a whole bunch of unnecessary divs and svg
> >>> >elements. Would it be better if we created on SVG drawing canvas and
> >>>drew
> >>> >all the graphics inside it? It would make for a cleaner
> >>>implementation
> >>> >and
> >>> >better runtime performance.
> >>> >
> >>> >I am thinking that we will create a GraphicsContainer class which
> >>>would
> >>> >extend off of UIBase. Inside it would be one SVG element where you
> >>>can
> >>> >draw all the graphic elements in one co-ordinate space.
> >>> >
> >>> >Let me know what you think.
> >>> >
> >>> >Thanks,
> >>> >Om
> >>>
> >>>
> >
>
>
Re: FlexJS chart package now uses FlexJS core/graphics for the
charts' graphics
Posted by Peter Ent <pe...@adobe.com>.
I need to retrace my steps. I should have looked to see how
GraphicsContainer was implemented in JavaScript before proceeding.
GraphicsContainer is a <svg> element, essentially, and to add <Rect>,
<Line>, and so forth, you use functions on GraphicsContainer to do that,
rather than creating a core.graphics.Rect and adding it as an element to
GraphicsContainer.
This model really won't work that well for charts. Charts could be made to
do this, but in the spirit of each bar or wedge being an itemRenderer, I
think it best to continue as-is, even though it may introduce a bit of
extra overhead on the JavaScript side. We can address this further down
the road.
Peter Ent
Adobe Systems
On 9/15/14 2:39 PM, "Peter Ent" <pe...@adobe.com> wrote:
>I've converted ChartDataGroup on the ActionScript side so that it uses a
>GraphicsContainer. ChartDataGroup extends UIBase and so the elements being
>added to it are its children. The modification inserts a GraphicsContainer
>into ChartDataGroup as its only child and then overrides addElement to
>place the itemRenderer children into the GraphicsContainer.
>
>This works well in ActionScript because GraphicsContainer also extends
>UIBase. But this is failing on the JavaScript side because neither
>GraphicsContainer nor GraphicsShape implement IUIBase. This is something
>to determine if the graphic elements should conform to IUIBase or be
>something else.
>
>I could imagine that ChartDataGroup might have addElement for normal
>IUIBase components (e.g., adding a Label to a chart) and a new function,
>like addGraphicElement() that would added charting graphics.
>
>At the moment, the chart package works great, it just produces a lot of
>extra <div> and <svg> tags on the JS side.
>
>Peter Ent
>Adobe Systems
>
>On 9/12/14 6:40 PM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
>
>>On Fri, Sep 12, 2014 at 12:40 PM, Peter Ent <pe...@adobe.com> wrote:
>>
>>> I have modified the chart code so that the JS side does not have
>>>borders
>>> and scrollbars.
>>>
>>
>>I just tried it. Looks fantastic! I can't even tell the difference
>>between the Flash version and the HTML5 version. The only difference I
>>can
>>see is in the text.
>>
>>This is only going to get better :-)
>>
>>
>>>
>>> While looking at the HTML generated this morning, not only did I see
>>>the
>>> extra <div>s and <svg>s, but I also saw that extra itemRenderers were
>>> being generated. I pushed code that addresses that as well.
>>>
>>> Now if we could get a GraphicContainer or something like it, we should
>>>be
>>> able to have the itemRenderers just add a graphic element (e.g., Rect)
>>>as
>>> they do now, except it would be parented by the ChartDataGroup (aka,
>>> <svg>).
>>>
>>
>>I just checked in the GraphicsContainer component for AS and JS. The
>>usage
>>example can be seen in examples/FlexJSTest_SVG/GraphicsView.mxml
>>
>>Thanks,
>>Om
>>
>>
>>>
>>> Peter Ent
>>> Adobe Systems
>>>
>>> On 9/11/14 6:40 PM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
>>>
>>> >Peter,
>>> >
>>> >I just tested out the ChartExample app. It looks awesome! Thanks
>>>for
>>> >making this work end to end. Nice to see validation that using SVG
>>>lets
>>> >us
>>> >do great visualizations that work exactly same in Flash and HTML5!
>>> >
>>> >A couple of things I noticed:
>>> >
>>> >1. I see unnecessary horizontal and vertical scrollbars. It seems
>>>that
>>> >the the chart elements do not fit inside the div's width and height.
>>> >2. I am looking at the HTML for the chart, for example:Gist here:
>>> >https://gist.github.com/bigosmallm/ae510538df51b8356d7d
>>> >
>>> >I see that we are creating a whole bunch of unnecessary divs and svg
>>> >elements. Would it be better if we created on SVG drawing canvas and
>>>drew
>>> >all the graphics inside it? It would make for a cleaner
>>>implementation
>>> >and
>>> >better runtime performance.
>>> >
>>> >I am thinking that we will create a GraphicsContainer class which
>>>would
>>> >extend off of UIBase. Inside it would be one SVG element where you
>>>can
>>> >draw all the graphic elements in one co-ordinate space.
>>> >
>>> >Let me know what you think.
>>> >
>>> >Thanks,
>>> >Om
>>>
>>>
>
Re: FlexJS chart package now uses FlexJS core/graphics for the
charts' graphics
Posted by OmPrakash Muppirala <bi...@gmail.com>.
On Mon, Sep 15, 2014 at 11:39 AM, Peter Ent <pe...@adobe.com> wrote:
> I've converted ChartDataGroup on the ActionScript side so that it uses a
> GraphicsContainer. ChartDataGroup extends UIBase and so the elements being
> added to it are its children. The modification inserts a GraphicsContainer
> into ChartDataGroup as its only child and then overrides addElement to
> place the itemRenderer children into the GraphicsContainer.
>
> This works well in ActionScript because GraphicsContainer also extends
> UIBase. But this is failing on the JavaScript side because neither
> GraphicsContainer nor GraphicsShape implement IUIBase. This is something
> to determine if the graphic elements should conform to IUIBase or be
> something else.
>
I have it in my TODO list to make GraphicShape implement IUIBase. Would
that work? Or should we do something else on the JS side?
>
> I could imagine that ChartDataGroup might have addElement for normal
> IUIBase components (e.g., adding a Label to a chart) and a new function,
> like addGraphicElement() that would added charting graphics.
>
The problem is we are not really 'adding' an element onto
GraphicsContainer, we are merely drawing on its surface. Once I call
GraphicsContainer.drawRect(), the object is already on the rendering
surface/DOM.
Or do you want to do this?:
var graphicsContainer:GraphicsContainer = new GraphicsContainer();
var rect:Rect = new Rect(x,y,width,height);
drawingContainer.addGraphicElement(rect);
Right now, it works like this:
var graphicsContainer:GraphicsContainer = new GraphicsContainer();
drawingContainer.drawRect(x,y,width,height);
>
> At the moment, the chart package works great, it just produces a lot of
> extra <div> and <svg> tags on the JS side.
>
> Peter Ent
> Adobe Systems
>
> On 9/12/14 6:40 PM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
>
> >On Fri, Sep 12, 2014 at 12:40 PM, Peter Ent <pe...@adobe.com> wrote:
> >
> >> I have modified the chart code so that the JS side does not have borders
> >> and scrollbars.
> >>
> >
> >I just tried it. Looks fantastic! I can't even tell the difference
> >between the Flash version and the HTML5 version. The only difference I
> >can
> >see is in the text.
> >
> >This is only going to get better :-)
> >
> >
> >>
> >> While looking at the HTML generated this morning, not only did I see the
> >> extra <div>s and <svg>s, but I also saw that extra itemRenderers were
> >> being generated. I pushed code that addresses that as well.
> >>
> >> Now if we could get a GraphicContainer or something like it, we should
> >>be
> >> able to have the itemRenderers just add a graphic element (e.g., Rect)
> >>as
> >> they do now, except it would be parented by the ChartDataGroup (aka,
> >> <svg>).
> >>
> >
> >I just checked in the GraphicsContainer component for AS and JS. The
> >usage
> >example can be seen in examples/FlexJSTest_SVG/GraphicsView.mxml
> >
> >Thanks,
> >Om
> >
> >
> >>
> >> Peter Ent
> >> Adobe Systems
> >>
> >> On 9/11/14 6:40 PM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
> >>
> >> >Peter,
> >> >
> >> >I just tested out the ChartExample app. It looks awesome! Thanks for
> >> >making this work end to end. Nice to see validation that using SVG
> >>lets
> >> >us
> >> >do great visualizations that work exactly same in Flash and HTML5!
> >> >
> >> >A couple of things I noticed:
> >> >
> >> >1. I see unnecessary horizontal and vertical scrollbars. It seems
> >>that
> >> >the the chart elements do not fit inside the div's width and height.
> >> >2. I am looking at the HTML for the chart, for example:Gist here:
> >> >https://gist.github.com/bigosmallm/ae510538df51b8356d7d
> >> >
> >> >I see that we are creating a whole bunch of unnecessary divs and svg
> >> >elements. Would it be better if we created on SVG drawing canvas and
> >>drew
> >> >all the graphics inside it? It would make for a cleaner implementation
> >> >and
> >> >better runtime performance.
> >> >
> >> >I am thinking that we will create a GraphicsContainer class which would
> >> >extend off of UIBase. Inside it would be one SVG element where you can
> >> >draw all the graphic elements in one co-ordinate space.
> >> >
> >> >Let me know what you think.
> >> >
> >> >Thanks,
> >> >Om
> >>
> >>
>
>
Re: FlexJS chart package now uses FlexJS core/graphics for the
charts' graphics
Posted by Peter Ent <pe...@adobe.com>.
I've converted ChartDataGroup on the ActionScript side so that it uses a
GraphicsContainer. ChartDataGroup extends UIBase and so the elements being
added to it are its children. The modification inserts a GraphicsContainer
into ChartDataGroup as its only child and then overrides addElement to
place the itemRenderer children into the GraphicsContainer.
This works well in ActionScript because GraphicsContainer also extends
UIBase. But this is failing on the JavaScript side because neither
GraphicsContainer nor GraphicsShape implement IUIBase. This is something
to determine if the graphic elements should conform to IUIBase or be
something else.
I could imagine that ChartDataGroup might have addElement for normal
IUIBase components (e.g., adding a Label to a chart) and a new function,
like addGraphicElement() that would added charting graphics.
At the moment, the chart package works great, it just produces a lot of
extra <div> and <svg> tags on the JS side.
Peter Ent
Adobe Systems
On 9/12/14 6:40 PM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
>On Fri, Sep 12, 2014 at 12:40 PM, Peter Ent <pe...@adobe.com> wrote:
>
>> I have modified the chart code so that the JS side does not have borders
>> and scrollbars.
>>
>
>I just tried it. Looks fantastic! I can't even tell the difference
>between the Flash version and the HTML5 version. The only difference I
>can
>see is in the text.
>
>This is only going to get better :-)
>
>
>>
>> While looking at the HTML generated this morning, not only did I see the
>> extra <div>s and <svg>s, but I also saw that extra itemRenderers were
>> being generated. I pushed code that addresses that as well.
>>
>> Now if we could get a GraphicContainer or something like it, we should
>>be
>> able to have the itemRenderers just add a graphic element (e.g., Rect)
>>as
>> they do now, except it would be parented by the ChartDataGroup (aka,
>> <svg>).
>>
>
>I just checked in the GraphicsContainer component for AS and JS. The
>usage
>example can be seen in examples/FlexJSTest_SVG/GraphicsView.mxml
>
>Thanks,
>Om
>
>
>>
>> Peter Ent
>> Adobe Systems
>>
>> On 9/11/14 6:40 PM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
>>
>> >Peter,
>> >
>> >I just tested out the ChartExample app. It looks awesome! Thanks for
>> >making this work end to end. Nice to see validation that using SVG
>>lets
>> >us
>> >do great visualizations that work exactly same in Flash and HTML5!
>> >
>> >A couple of things I noticed:
>> >
>> >1. I see unnecessary horizontal and vertical scrollbars. It seems
>>that
>> >the the chart elements do not fit inside the div's width and height.
>> >2. I am looking at the HTML for the chart, for example:Gist here:
>> >https://gist.github.com/bigosmallm/ae510538df51b8356d7d
>> >
>> >I see that we are creating a whole bunch of unnecessary divs and svg
>> >elements. Would it be better if we created on SVG drawing canvas and
>>drew
>> >all the graphics inside it? It would make for a cleaner implementation
>> >and
>> >better runtime performance.
>> >
>> >I am thinking that we will create a GraphicsContainer class which would
>> >extend off of UIBase. Inside it would be one SVG element where you can
>> >draw all the graphic elements in one co-ordinate space.
>> >
>> >Let me know what you think.
>> >
>> >Thanks,
>> >Om
>>
>>
Re: FlexJS chart package now uses FlexJS core/graphics for the
charts' graphics
Posted by OmPrakash Muppirala <bi...@gmail.com>.
On Fri, Sep 12, 2014 at 12:40 PM, Peter Ent <pe...@adobe.com> wrote:
> I have modified the chart code so that the JS side does not have borders
> and scrollbars.
>
I just tried it. Looks fantastic! I can't even tell the difference
between the Flash version and the HTML5 version. The only difference I can
see is in the text.
This is only going to get better :-)
>
> While looking at the HTML generated this morning, not only did I see the
> extra <div>s and <svg>s, but I also saw that extra itemRenderers were
> being generated. I pushed code that addresses that as well.
>
> Now if we could get a GraphicContainer or something like it, we should be
> able to have the itemRenderers just add a graphic element (e.g., Rect) as
> they do now, except it would be parented by the ChartDataGroup (aka,
> <svg>).
>
I just checked in the GraphicsContainer component for AS and JS. The usage
example can be seen in examples/FlexJSTest_SVG/GraphicsView.mxml
Thanks,
Om
>
> Peter Ent
> Adobe Systems
>
> On 9/11/14 6:40 PM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
>
> >Peter,
> >
> >I just tested out the ChartExample app. It looks awesome! Thanks for
> >making this work end to end. Nice to see validation that using SVG lets
> >us
> >do great visualizations that work exactly same in Flash and HTML5!
> >
> >A couple of things I noticed:
> >
> >1. I see unnecessary horizontal and vertical scrollbars. It seems that
> >the the chart elements do not fit inside the div's width and height.
> >2. I am looking at the HTML for the chart, for example:Gist here:
> >https://gist.github.com/bigosmallm/ae510538df51b8356d7d
> >
> >I see that we are creating a whole bunch of unnecessary divs and svg
> >elements. Would it be better if we created on SVG drawing canvas and drew
> >all the graphics inside it? It would make for a cleaner implementation
> >and
> >better runtime performance.
> >
> >I am thinking that we will create a GraphicsContainer class which would
> >extend off of UIBase. Inside it would be one SVG element where you can
> >draw all the graphic elements in one co-ordinate space.
> >
> >Let me know what you think.
> >
> >Thanks,
> >Om
>
>
Re: FlexJS chart package now uses FlexJS core/graphics for the
charts' graphics
Posted by Peter Ent <pe...@adobe.com>.
I have modified the chart code so that the JS side does not have borders
and scrollbars.
While looking at the HTML generated this morning, not only did I see the
extra <div>s and <svg>s, but I also saw that extra itemRenderers were
being generated. I pushed code that addresses that as well.
Now if we could get a GraphicContainer or something like it, we should be
able to have the itemRenderers just add a graphic element (e.g., Rect) as
they do now, except it would be parented by the ChartDataGroup (aka,
<svg>).
Peter Ent
Adobe Systems
On 9/11/14 6:40 PM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
>Peter,
>
>I just tested out the ChartExample app. It looks awesome! Thanks for
>making this work end to end. Nice to see validation that using SVG lets
>us
>do great visualizations that work exactly same in Flash and HTML5!
>
>A couple of things I noticed:
>
>1. I see unnecessary horizontal and vertical scrollbars. It seems that
>the the chart elements do not fit inside the div's width and height.
>2. I am looking at the HTML for the chart, for example:Gist here:
>https://gist.github.com/bigosmallm/ae510538df51b8356d7d
>
>I see that we are creating a whole bunch of unnecessary divs and svg
>elements. Would it be better if we created on SVG drawing canvas and drew
>all the graphics inside it? It would make for a cleaner implementation
>and
>better runtime performance.
>
>I am thinking that we will create a GraphicsContainer class which would
>extend off of UIBase. Inside it would be one SVG element where you can
>draw all the graphic elements in one co-ordinate space.
>
>Let me know what you think.
>
>Thanks,
>Om
Re: FlexJS chart package now uses FlexJS core/graphics for the
charts' graphics
Posted by Peter Ent <pe...@adobe.com>.
I keep meaning to look into the scrollbar/border issue so I'll make that a priority.
When I started to make the charts to work on JS I created ChartDataGroup which is the parent of the itemRenderers. It created the parent <svg> element the renderers (which created just the SVG graphic element they needed) used. When I switched to core.graphics I made the renderers create divs. I think a GraphicsContainer would be a good idea, then I could make ChartDataGroup extend that and remove all the extra elements.
Peter
> On Sep 11, 2014, at 6:42 PM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
>
> Peter,
>
> I just tested out the ChartExample app. It looks awesome! Thanks for
> making this work end to end. Nice to see validation that using SVG lets us
> do great visualizations that work exactly same in Flash and HTML5!
>
> A couple of things I noticed:
>
> 1. I see unnecessary horizontal and vertical scrollbars. It seems that
> the the chart elements do not fit inside the div's width and height.
> 2. I am looking at the HTML for the chart, for example:Gist here:
> https://gist.github.com/bigosmallm/ae510538df51b8356d7d
>
> I see that we are creating a whole bunch of unnecessary divs and svg
> elements. Would it be better if we created on SVG drawing canvas and drew
> all the graphics inside it? It would make for a cleaner implementation and
> better runtime performance.
>
> I am thinking that we will create a GraphicsContainer class which would
> extend off of UIBase. Inside it would be one SVG element where you can
> draw all the graphic elements in one co-ordinate space.
>
> Let me know what you think.
>
> Thanks,
> Om