You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by Michael Schmalle <te...@gmail.com> on 2015/05/19 20:29:36 UTC
[FlexJS] SVG UI components (was FlexJS event names)
Ironically Om, this was my next post! SVG and what are we doing to use it.
Maybe through all my bable of the last thread some might see where I am
coming from, I am really trying to figure out, what are we building on.
Now SVG I understand, Canvas I understand.
Om, what are the pluses and minuses of each paradigm? I was just reading
about this today, canvas doesn't have event handlers, svg does.
FXG -> SVG, is there currently a parser/renderer for this? How were you
planning on doing this.
Is this something we could write that would pretty much cross compile to js?
Tell me your ideas, I am very interested in this part.
Mike
> See this is my problem, Randori was a straight cross compile with shims
and
> worked awesome. So all my questions to you are like me "unlearning" what I
> spent 6+ months working on in that project.
>
> The compiler's emitter just puked out js and we locked in SWCs in the apps
> that used js API surfaces.
>
> Although, the one thing as you know was Mike disagreed with FlexJS's view
> in ActionScript because he said HTML/CSS designers should just do what
they
> do and design in HTML/CSS.
>
I disagree fundamentally with this idea. For one, HTML/CSS is a terrible
terrible paradigm. No designer is happy with the way things work today. I
would rather provide a better way of doing the visuals via MXML+FXG (like
we do in Flex's spark skins) and cross compile them over to JS + SVG +
Canvas as needed.
Even the HTML/JS world is waking up to this idea. This presentation [1]
does a great job of explaining why SVG is better than CSS for interfaces
building. FlexJS is in a great position to provide this out of the box to
developers.
Thanks,
Om
[1] http://slides.com/sarasoueidan/building-better-interfaces-with-svg#/
Re: [FlexJS] SVG UI components (was FlexJS event names)
Posted by Peter Ent <pe...@adobe.com>.
Check out the FlexJS Chart example. It is built upon Om¹s SVG package
(core.graphics) in the FlexJS SDK. Most of the Chart package in the
Chart/asjs project which means most of it is cross-compiled to JS so there
is very little hand-written JavaScript.
Peter
On 5/19/15, 2:29 PM, "Michael Schmalle" <te...@gmail.com> wrote:
>Ironically Om, this was my next post! SVG and what are we doing to use it.
>
>Maybe through all my bable of the last thread some might see where I am
>coming from, I am really trying to figure out, what are we building on.
>
>Now SVG I understand, Canvas I understand.
>
>Om, what are the pluses and minuses of each paradigm? I was just reading
>about this today, canvas doesn't have event handlers, svg does.
>
>FXG -> SVG, is there currently a parser/renderer for this? How were you
>planning on doing this.
>
>Is this something we could write that would pretty much cross compile to
>js?
>
>Tell me your ideas, I am very interested in this part.
>
>
>
>Mike
>
>
>> See this is my problem, Randori was a straight cross compile with shims
>and
>> worked awesome. So all my questions to you are like me "unlearning"
>>what I
>> spent 6+ months working on in that project.
>>
>> The compiler's emitter just puked out js and we locked in SWCs in the
>>apps
>> that used js API surfaces.
>>
>> Although, the one thing as you know was Mike disagreed with FlexJS's
>>view
>> in ActionScript because he said HTML/CSS designers should just do what
>they
>> do and design in HTML/CSS.
>>
>
>I disagree fundamentally with this idea. For one, HTML/CSS is a terrible
>terrible paradigm. No designer is happy with the way things work today.
>I
>would rather provide a better way of doing the visuals via MXML+FXG (like
>we do in Flex's spark skins) and cross compile them over to JS + SVG +
>Canvas as needed.
>
>Even the HTML/JS world is waking up to this idea. This presentation [1]
>does a great job of explaining why SVG is better than CSS for interfaces
>building. FlexJS is in a great position to provide this out of the box to
>developers.
>
>Thanks,
>Om
>
>[1] http://slides.com/sarasoueidan/building-better-interfaces-with-svg#/
Re: [FlexJS] SVG UI components (was FlexJS event names)
Posted by Michael Schmalle <te...@gmail.com>.
@Om
Here is another app that is an easy candiate for FlexJS that is a .caustic
file player. Not to heavy on animated graphics.
http://www.singlecellsoftware.com/node/8897
Mike
On Tue, May 19, 2015 at 4:33 PM, OmPrakash Muppirala <bi...@gmail.com>
wrote:
> On May 19, 2015 1:23 PM, "Michael Schmalle" <te...@gmail.com>
> wrote:
> >
> > Ok seeing the fact you were setting the background with an svg element.
> >
> > When you want to start working on this and have a git connection again,
> let
> > me know, we can hash it out. :)
> >
>
> Sounds like a plan!
>
> Om
>
> > Mike
> >
> > On Tue, May 19, 2015 at 4:09 PM, OmPrakash Muppirala <
> bigosmallm@gmail.com
> >
> > wrote:
> >
> > > On Tue, May 19, 2015 at 12:36 PM, Michael Schmalle <
> > > teotigraphixllc@gmail.com> wrote:
> > >
> > > > Ok thanks Om, lots to think about. Some more questions.
> > > >
> > > > I am still a bit naive with HTML and SVG. Can SVG be used to skin an
> HTML
> > > > button? Or is it that you have to "Wrap" an html button with an SVG
> tag
> > > to
> > > > pretty much draw under it?
> > > >
> > >
> > > No, SVG cannot be used to skin a native HTML button. The skin class has
> to
> > > be just another display object under the component, just like the Spark
> > > Button in the current SDK.
> > >
> > >
> > > >
> > > > I love the idea of a Spark like skinning system and would totally
> help on
> > > > this, I am just trying to see how it would be implemented and how it
> > > > coincides with the HTML side, the AS side is obvious, the HTML side
> the
> > > SVG
> > > > is a child of the this.element?
> > > >
> > >
> > > Yes, that is correct. Although, I have not exactly implemented this
> > > approach. We should know more when I actually start coding a simple
> skin.
> > >
> > >
> > > >
> > > > Question: Is SVG meant to be interactive like a Button element or is
> it
> > > > meant for graphics.
> > >
> > >
> > > My current thinking is that for each state of the interactive button, a
> set
> > > of SVG elements would be drawn. Again, much like today's Spark Button
> +
> > > skin paradigm. The good thing about SVG is that event handlers can be
> > > attached to individual elements, so the interaction can be passed to
> the
> > > component which can respond by changing the state on itself and on its
> > > skin.
> > >
> > >
> > > > I am just trying to see the point at which the
> > > > component in html is either SVG or an HTML element. Since you say the
> SVG
> > > > is just created on the DOM, then aren't you saying that the SVG
> element
> > > is
> > > > just a child of the main component?
> > > >
> > >
> > > Yes, all the SVG elements would be children of the skin, which in turn
> > > would be a child of the main component.
> > >
> > >
> > > >
> > > > Do you have any prototypes of this going?
> > > >
> > >
> > > I have one, but based on the older FXG -> SVG XSLT approach [1], [2]
> > >
> > > Left side is Flash, right side is HTML5/SVG. In this approach, I set
> the
> > > SVG by setting CSS pseudo-classes . This is still an option going
> forward,
> > > but one that I don't like that much. I prefer MXML states vs. CSS
> > > pseudo-classes because of the greater flexibility we'll get.
> > >
> > > Thanks,
> > > Om
> > >
> > > [1]
> > >
> http://people.apache.org/~bigosmallm/fxg2svg/buttonskin/flexVhtml5.html
> > >
> > >
> > >
> > >
> > > >
> > > > Mike
> > > >
> > > >
> > > >
> > > >
> > > >
> > > > On Tue, May 19, 2015 at 3:21 PM, OmPrakash Muppirala <
> > > bigosmallm@gmail.com
> > > > >
> > > > wrote:
> > > >
> > > > > On Tue, May 19, 2015 at 11:29 AM, Michael Schmalle <
> > > > > teotigraphixllc@gmail.com> wrote:
> > > > >
> > > > > > Ironically Om, this was my next post! SVG and what are we doing
> to
> > > use
> > > > > it.
> > > > > >
> > > > > > Maybe through all my bable of the last thread some might see
> where I
> > > am
> > > > > > coming from, I am really trying to figure out, what are we
> building
> > > on.
> > > > > >
> > > > > > Now SVG I understand, Canvas I understand.
> > > > > >
> > > > > > Om, what are the pluses and minuses of each paradigm? I was just
> > > > reading
> > > > > > about this today, canvas doesn't have event handlers, svg does.
> > > > > >
> > > > >
> > > > > Canvas is a fire and forget mode of rendering. Think of Canvas as
> an
> > > > > equivalent to Flash's BitmapData. Once you draw on a Canvas, you
> > > cannot
> > > > > get access to individual elements without doing a lot of
> complicated
> > > > > hittests or other kind of hacks. Moreover, it is a raster object.
> So,
> > > > if
> > > > > you draw on a Canvas and resize it up, it gets pixelated.
> > > > >
> > > > > SVG, on the other hand is a retained mode of rendering. All
> elements
> > > > drawn
> > > > > in SVG become part of the DOM. This means that you can do event
> > > > handling,
> > > > > animation, etc. much more easily. Also, SVG is vector drawing. So
> > > > drawing
> > > > > in any size and scaling keeps the rendering quality intact.
> > > > >
> > > > > Canvas is generally used for drawing a ton of elements in runtime
> > > without
> > > > > needing them to be individually interactive. SVG is less
> performant
> > > > > because of the added dom related overhead on each element, and is
> > > > (should)
> > > > > generally used for building interactive UI components (charts,
> maps,
> > > > etc.)
> > > > >
> > > > >
> > > > > >
> > > > > > FXG -> SVG, is there currently a parser/renderer for this? How
> were
> > > you
> > > > > > planning on doing this.
> > > > > >
> > > > >
> > > > > So, my first approach was to write an FXG to SVG transformer[1]
> > > > stylesheet
> > > > > that I imagined would be invoked by the compiler. It turns out
> that
> > > > doing
> > > > > it the 'FlexJS' way was much easier. Basically, I created the
> > > > primitives -
> > > > > Line, Circle, Path, Fill, Stroke, etc. in the AS side [2] Then, I
> > > created
> > > > > their JS equivalents [3] where I draw SVG elements via JavaScript.
> > > That
> > > > is
> > > > > pretty much it. The MXML/FXG parsing, cross-compilation from AS to
> JS
> > > > etc.
> > > > > is handled automatically by FlexJS (magic for me ;-) )
> > > > >
> > > > > The idea from here on is that anything you draw on the screen via
> AS3
> > > > will
> > > > > look exactly the same in Flash vs. HTML/JS. Here is an example of
> > > flash
> > > > > [4] vs html [5] Put them side by side and see if you can tell the
> > > > > difference :-)
> > > > >
> > > > > The next progression was to build FlexJS charts out of these. Here
> is
> > > a
> > > > > set of chart components that Peter Ent built on top of this core
> > > graphics
> > > > > classes: Flash [6] vs HTML5[7] There is a pretty detailed wiki
> page
> > > for
> > > > > these charts [8]
> > > > >
> > > > >
> > > > >
> > > > > >
> > > > > > Is this something we could write that would pretty much cross
> compile
> > > > to
> > > > > > js?
> > > > > >
> > > > >
> > > > > Yes, I believe we are at a point where things are getting more and
> more
> > > > > cross-compiled as opposed to be hand-written. Of course, the
> beauty is
> > > > > that you can draw in MXML/FXG and you can see a drawing in the JS
> side.
> > > > > Pretty cool.
> > > > >
> > > > >
> > > > > >
> > > > > > Tell me your ideas, I am very interested in this part.
> > > > > >
> > > > > >
> > > > > My next few TODOs are to build a spark like skinning system in
> FlexJS.
> > > > > Basically create FXG skins on the AS3 side and mirror them with SVG
> > > based
> > > > > skins on the JS side. Peter has built a small example that will
> let me
> > > > > play around with event driven, states based skins. I hope to get
> on
> > > this
> > > > > as soon as I get my Git access back.
> > > > >
> > > > > Of course, the core graphics packages needs more love with things
> like
> > > > > RadialGradients, and more fancy graphics primitives.
> > > > >
> > > > > After that I would like to tackle animation. I haven't given a lot
> of
> > > > > thought into this, so not sure how easy/hard this is going to be.
> > > > >
> > > > > Thanks,
> > > > > Om
> > > > >
> > > > >
> > > > > >
> > > > > >
> > > > > > Mike
> > > > > >
> > > > > >
> > > > > [1] https://github.com/apache/flex-asjs/tree/develop/fxg2svg
> > > > > [2]
> > > > >
> > > > >
> > > >
> > >
>
> https://github.com/apache/flex-asjs/tree/develop/frameworks/projects/Graphics/as/src/org/apache/flex/core/graphics
> > > > > [3]
> > > > >
> > > > >
> > > >
> > >
>
> https://github.com/apache/flex-asjs/tree/develop/frameworks/projects/Graphics/js/src/org/apache/flex/core/graphics
> > > > > [4] http://people.apache.org/~bigosmallm/flexjs/drawing/flash/
> > > > > [5] http://people.apache.org/~bigosmallm/flexjs/drawing/html5/
> > > > > [6] http://people.apache.org/~pent/chartswf/
> > > > > [7] http://people.apache.org/~pent/chartjs/
> > > > > [8] https://cwiki.apache.org/confluence/display/FLEX/FlexJS+Charts
> > > > >
> > > > >
> > > > > >
> > > > > > > See this is my problem, Randori was a straight cross compile
> with
> > > > shims
> > > > > > and
> > > > > > > worked awesome. So all my questions to you are like me
> "unlearning"
> > > > > what
> > > > > > I
> > > > > > > spent 6+ months working on in that project.
> > > > > > >
> > > > > > > The compiler's emitter just puked out js and we locked in SWCs
> in
> > > the
> > > > > > apps
> > > > > > > that used js API surfaces.
> > > > > > >
> > > > > > > Although, the one thing as you know was Mike disagreed with
> > > FlexJS's
> > > > > view
> > > > > > > in ActionScript because he said HTML/CSS designers should just
> do
> > > > what
> > > > > > they
> > > > > > > do and design in HTML/CSS.
> > > > > > >
> > > > > >
> > > > > > I disagree fundamentally with this idea. For one, HTML/CSS is a
> > > > terrible
> > > > > > terrible paradigm. No designer is happy with the way things work
> > > > > today. I
> > > > > > would rather provide a better way of doing the visuals via
> MXML+FXG
> > > > (like
> > > > > > we do in Flex's spark skins) and cross compile them over to JS +
> SVG
> > > +
> > > > > > Canvas as needed.
> > > > > >
> > > > > > Even the HTML/JS world is waking up to this idea. This
> presentation
> > > > [1]
> > > > > > does a great job of explaining why SVG is better than CSS for
> > > > interfaces
> > > > > > building. FlexJS is in a great position to provide this out of
> the
> > > box
> > > > > to
> > > > > > developers.
> > > > > >
> > > > > > Thanks,
> > > > > > Om
> > > > > >
> > > > > > [1]
> > > > http://slides.com/sarasoueidan/building-better-interfaces-with-svg#/
> > > > > >
> > > > >
> > > >
> > >
>
Re: [FlexJS] SVG UI components (was FlexJS event names)
Posted by OmPrakash Muppirala <bi...@gmail.com>.
On May 19, 2015 1:23 PM, "Michael Schmalle" <te...@gmail.com>
wrote:
>
> Ok seeing the fact you were setting the background with an svg element.
>
> When you want to start working on this and have a git connection again,
let
> me know, we can hash it out. :)
>
Sounds like a plan!
Om
> Mike
>
> On Tue, May 19, 2015 at 4:09 PM, OmPrakash Muppirala <bigosmallm@gmail.com
>
> wrote:
>
> > On Tue, May 19, 2015 at 12:36 PM, Michael Schmalle <
> > teotigraphixllc@gmail.com> wrote:
> >
> > > Ok thanks Om, lots to think about. Some more questions.
> > >
> > > I am still a bit naive with HTML and SVG. Can SVG be used to skin an
HTML
> > > button? Or is it that you have to "Wrap" an html button with an SVG
tag
> > to
> > > pretty much draw under it?
> > >
> >
> > No, SVG cannot be used to skin a native HTML button. The skin class has
to
> > be just another display object under the component, just like the Spark
> > Button in the current SDK.
> >
> >
> > >
> > > I love the idea of a Spark like skinning system and would totally
help on
> > > this, I am just trying to see how it would be implemented and how it
> > > coincides with the HTML side, the AS side is obvious, the HTML side
the
> > SVG
> > > is a child of the this.element?
> > >
> >
> > Yes, that is correct. Although, I have not exactly implemented this
> > approach. We should know more when I actually start coding a simple
skin.
> >
> >
> > >
> > > Question: Is SVG meant to be interactive like a Button element or is
it
> > > meant for graphics.
> >
> >
> > My current thinking is that for each state of the interactive button, a
set
> > of SVG elements would be drawn. Again, much like today's Spark Button +
> > skin paradigm. The good thing about SVG is that event handlers can be
> > attached to individual elements, so the interaction can be passed to the
> > component which can respond by changing the state on itself and on its
> > skin.
> >
> >
> > > I am just trying to see the point at which the
> > > component in html is either SVG or an HTML element. Since you say the
SVG
> > > is just created on the DOM, then aren't you saying that the SVG
element
> > is
> > > just a child of the main component?
> > >
> >
> > Yes, all the SVG elements would be children of the skin, which in turn
> > would be a child of the main component.
> >
> >
> > >
> > > Do you have any prototypes of this going?
> > >
> >
> > I have one, but based on the older FXG -> SVG XSLT approach [1], [2]
> >
> > Left side is Flash, right side is HTML5/SVG. In this approach, I set
the
> > SVG by setting CSS pseudo-classes . This is still an option going
forward,
> > but one that I don't like that much. I prefer MXML states vs. CSS
> > pseudo-classes because of the greater flexibility we'll get.
> >
> > Thanks,
> > Om
> >
> > [1]
> > http://people.apache.org/~bigosmallm/fxg2svg/buttonskin/flexVhtml5.html
> >
> >
> >
> >
> > >
> > > Mike
> > >
> > >
> > >
> > >
> > >
> > > On Tue, May 19, 2015 at 3:21 PM, OmPrakash Muppirala <
> > bigosmallm@gmail.com
> > > >
> > > wrote:
> > >
> > > > On Tue, May 19, 2015 at 11:29 AM, Michael Schmalle <
> > > > teotigraphixllc@gmail.com> wrote:
> > > >
> > > > > Ironically Om, this was my next post! SVG and what are we doing to
> > use
> > > > it.
> > > > >
> > > > > Maybe through all my bable of the last thread some might see
where I
> > am
> > > > > coming from, I am really trying to figure out, what are we
building
> > on.
> > > > >
> > > > > Now SVG I understand, Canvas I understand.
> > > > >
> > > > > Om, what are the pluses and minuses of each paradigm? I was just
> > > reading
> > > > > about this today, canvas doesn't have event handlers, svg does.
> > > > >
> > > >
> > > > Canvas is a fire and forget mode of rendering. Think of Canvas as
an
> > > > equivalent to Flash's BitmapData. Once you draw on a Canvas, you
> > cannot
> > > > get access to individual elements without doing a lot of complicated
> > > > hittests or other kind of hacks. Moreover, it is a raster object.
So,
> > > if
> > > > you draw on a Canvas and resize it up, it gets pixelated.
> > > >
> > > > SVG, on the other hand is a retained mode of rendering. All
elements
> > > drawn
> > > > in SVG become part of the DOM. This means that you can do event
> > > handling,
> > > > animation, etc. much more easily. Also, SVG is vector drawing. So
> > > drawing
> > > > in any size and scaling keeps the rendering quality intact.
> > > >
> > > > Canvas is generally used for drawing a ton of elements in runtime
> > without
> > > > needing them to be individually interactive. SVG is less performant
> > > > because of the added dom related overhead on each element, and is
> > > (should)
> > > > generally used for building interactive UI components (charts, maps,
> > > etc.)
> > > >
> > > >
> > > > >
> > > > > FXG -> SVG, is there currently a parser/renderer for this? How
were
> > you
> > > > > planning on doing this.
> > > > >
> > > >
> > > > So, my first approach was to write an FXG to SVG transformer[1]
> > > stylesheet
> > > > that I imagined would be invoked by the compiler. It turns out that
> > > doing
> > > > it the 'FlexJS' way was much easier. Basically, I created the
> > > primitives -
> > > > Line, Circle, Path, Fill, Stroke, etc. in the AS side [2] Then, I
> > created
> > > > their JS equivalents [3] where I draw SVG elements via JavaScript.
> > That
> > > is
> > > > pretty much it. The MXML/FXG parsing, cross-compilation from AS to
JS
> > > etc.
> > > > is handled automatically by FlexJS (magic for me ;-) )
> > > >
> > > > The idea from here on is that anything you draw on the screen via
AS3
> > > will
> > > > look exactly the same in Flash vs. HTML/JS. Here is an example of
> > flash
> > > > [4] vs html [5] Put them side by side and see if you can tell the
> > > > difference :-)
> > > >
> > > > The next progression was to build FlexJS charts out of these. Here
is
> > a
> > > > set of chart components that Peter Ent built on top of this core
> > graphics
> > > > classes: Flash [6] vs HTML5[7] There is a pretty detailed wiki
page
> > for
> > > > these charts [8]
> > > >
> > > >
> > > >
> > > > >
> > > > > Is this something we could write that would pretty much cross
compile
> > > to
> > > > > js?
> > > > >
> > > >
> > > > Yes, I believe we are at a point where things are getting more and
more
> > > > cross-compiled as opposed to be hand-written. Of course, the
beauty is
> > > > that you can draw in MXML/FXG and you can see a drawing in the JS
side.
> > > > Pretty cool.
> > > >
> > > >
> > > > >
> > > > > Tell me your ideas, I am very interested in this part.
> > > > >
> > > > >
> > > > My next few TODOs are to build a spark like skinning system in
FlexJS.
> > > > Basically create FXG skins on the AS3 side and mirror them with SVG
> > based
> > > > skins on the JS side. Peter has built a small example that will
let me
> > > > play around with event driven, states based skins. I hope to get on
> > this
> > > > as soon as I get my Git access back.
> > > >
> > > > Of course, the core graphics packages needs more love with things
like
> > > > RadialGradients, and more fancy graphics primitives.
> > > >
> > > > After that I would like to tackle animation. I haven't given a lot
of
> > > > thought into this, so not sure how easy/hard this is going to be.
> > > >
> > > > Thanks,
> > > > Om
> > > >
> > > >
> > > > >
> > > > >
> > > > > Mike
> > > > >
> > > > >
> > > > [1] https://github.com/apache/flex-asjs/tree/develop/fxg2svg
> > > > [2]
> > > >
> > > >
> > >
> >
https://github.com/apache/flex-asjs/tree/develop/frameworks/projects/Graphics/as/src/org/apache/flex/core/graphics
> > > > [3]
> > > >
> > > >
> > >
> >
https://github.com/apache/flex-asjs/tree/develop/frameworks/projects/Graphics/js/src/org/apache/flex/core/graphics
> > > > [4] http://people.apache.org/~bigosmallm/flexjs/drawing/flash/
> > > > [5] http://people.apache.org/~bigosmallm/flexjs/drawing/html5/
> > > > [6] http://people.apache.org/~pent/chartswf/
> > > > [7] http://people.apache.org/~pent/chartjs/
> > > > [8] https://cwiki.apache.org/confluence/display/FLEX/FlexJS+Charts
> > > >
> > > >
> > > > >
> > > > > > See this is my problem, Randori was a straight cross compile
with
> > > shims
> > > > > and
> > > > > > worked awesome. So all my questions to you are like me
"unlearning"
> > > > what
> > > > > I
> > > > > > spent 6+ months working on in that project.
> > > > > >
> > > > > > The compiler's emitter just puked out js and we locked in SWCs
in
> > the
> > > > > apps
> > > > > > that used js API surfaces.
> > > > > >
> > > > > > Although, the one thing as you know was Mike disagreed with
> > FlexJS's
> > > > view
> > > > > > in ActionScript because he said HTML/CSS designers should just
do
> > > what
> > > > > they
> > > > > > do and design in HTML/CSS.
> > > > > >
> > > > >
> > > > > I disagree fundamentally with this idea. For one, HTML/CSS is a
> > > terrible
> > > > > terrible paradigm. No designer is happy with the way things work
> > > > today. I
> > > > > would rather provide a better way of doing the visuals via
MXML+FXG
> > > (like
> > > > > we do in Flex's spark skins) and cross compile them over to JS +
SVG
> > +
> > > > > Canvas as needed.
> > > > >
> > > > > Even the HTML/JS world is waking up to this idea. This
presentation
> > > [1]
> > > > > does a great job of explaining why SVG is better than CSS for
> > > interfaces
> > > > > building. FlexJS is in a great position to provide this out of
the
> > box
> > > > to
> > > > > developers.
> > > > >
> > > > > Thanks,
> > > > > Om
> > > > >
> > > > > [1]
> > > http://slides.com/sarasoueidan/building-better-interfaces-with-svg#/
> > > > >
> > > >
> > >
> >
Re: [FlexJS] SVG UI components (was FlexJS event names)
Posted by Michael Schmalle <te...@gmail.com>.
Ok seeing the fact you were setting the background with an svg element.
When you want to start working on this and have a git connection again, let
me know, we can hash it out. :)
Mike
On Tue, May 19, 2015 at 4:09 PM, OmPrakash Muppirala <bi...@gmail.com>
wrote:
> On Tue, May 19, 2015 at 12:36 PM, Michael Schmalle <
> teotigraphixllc@gmail.com> wrote:
>
> > Ok thanks Om, lots to think about. Some more questions.
> >
> > I am still a bit naive with HTML and SVG. Can SVG be used to skin an HTML
> > button? Or is it that you have to "Wrap" an html button with an SVG tag
> to
> > pretty much draw under it?
> >
>
> No, SVG cannot be used to skin a native HTML button. The skin class has to
> be just another display object under the component, just like the Spark
> Button in the current SDK.
>
>
> >
> > I love the idea of a Spark like skinning system and would totally help on
> > this, I am just trying to see how it would be implemented and how it
> > coincides with the HTML side, the AS side is obvious, the HTML side the
> SVG
> > is a child of the this.element?
> >
>
> Yes, that is correct. Although, I have not exactly implemented this
> approach. We should know more when I actually start coding a simple skin.
>
>
> >
> > Question: Is SVG meant to be interactive like a Button element or is it
> > meant for graphics.
>
>
> My current thinking is that for each state of the interactive button, a set
> of SVG elements would be drawn. Again, much like today's Spark Button +
> skin paradigm. The good thing about SVG is that event handlers can be
> attached to individual elements, so the interaction can be passed to the
> component which can respond by changing the state on itself and on its
> skin.
>
>
> > I am just trying to see the point at which the
> > component in html is either SVG or an HTML element. Since you say the SVG
> > is just created on the DOM, then aren't you saying that the SVG element
> is
> > just a child of the main component?
> >
>
> Yes, all the SVG elements would be children of the skin, which in turn
> would be a child of the main component.
>
>
> >
> > Do you have any prototypes of this going?
> >
>
> I have one, but based on the older FXG -> SVG XSLT approach [1], [2]
>
> Left side is Flash, right side is HTML5/SVG. In this approach, I set the
> SVG by setting CSS pseudo-classes . This is still an option going forward,
> but one that I don't like that much. I prefer MXML states vs. CSS
> pseudo-classes because of the greater flexibility we'll get.
>
> Thanks,
> Om
>
> [1]
> http://people.apache.org/~bigosmallm/fxg2svg/buttonskin/flexVhtml5.html
>
>
>
>
> >
> > Mike
> >
> >
> >
> >
> >
> > On Tue, May 19, 2015 at 3:21 PM, OmPrakash Muppirala <
> bigosmallm@gmail.com
> > >
> > wrote:
> >
> > > On Tue, May 19, 2015 at 11:29 AM, Michael Schmalle <
> > > teotigraphixllc@gmail.com> wrote:
> > >
> > > > Ironically Om, this was my next post! SVG and what are we doing to
> use
> > > it.
> > > >
> > > > Maybe through all my bable of the last thread some might see where I
> am
> > > > coming from, I am really trying to figure out, what are we building
> on.
> > > >
> > > > Now SVG I understand, Canvas I understand.
> > > >
> > > > Om, what are the pluses and minuses of each paradigm? I was just
> > reading
> > > > about this today, canvas doesn't have event handlers, svg does.
> > > >
> > >
> > > Canvas is a fire and forget mode of rendering. Think of Canvas as an
> > > equivalent to Flash's BitmapData. Once you draw on a Canvas, you
> cannot
> > > get access to individual elements without doing a lot of complicated
> > > hittests or other kind of hacks. Moreover, it is a raster object. So,
> > if
> > > you draw on a Canvas and resize it up, it gets pixelated.
> > >
> > > SVG, on the other hand is a retained mode of rendering. All elements
> > drawn
> > > in SVG become part of the DOM. This means that you can do event
> > handling,
> > > animation, etc. much more easily. Also, SVG is vector drawing. So
> > drawing
> > > in any size and scaling keeps the rendering quality intact.
> > >
> > > Canvas is generally used for drawing a ton of elements in runtime
> without
> > > needing them to be individually interactive. SVG is less performant
> > > because of the added dom related overhead on each element, and is
> > (should)
> > > generally used for building interactive UI components (charts, maps,
> > etc.)
> > >
> > >
> > > >
> > > > FXG -> SVG, is there currently a parser/renderer for this? How were
> you
> > > > planning on doing this.
> > > >
> > >
> > > So, my first approach was to write an FXG to SVG transformer[1]
> > stylesheet
> > > that I imagined would be invoked by the compiler. It turns out that
> > doing
> > > it the 'FlexJS' way was much easier. Basically, I created the
> > primitives -
> > > Line, Circle, Path, Fill, Stroke, etc. in the AS side [2] Then, I
> created
> > > their JS equivalents [3] where I draw SVG elements via JavaScript.
> That
> > is
> > > pretty much it. The MXML/FXG parsing, cross-compilation from AS to JS
> > etc.
> > > is handled automatically by FlexJS (magic for me ;-) )
> > >
> > > The idea from here on is that anything you draw on the screen via AS3
> > will
> > > look exactly the same in Flash vs. HTML/JS. Here is an example of
> flash
> > > [4] vs html [5] Put them side by side and see if you can tell the
> > > difference :-)
> > >
> > > The next progression was to build FlexJS charts out of these. Here is
> a
> > > set of chart components that Peter Ent built on top of this core
> graphics
> > > classes: Flash [6] vs HTML5[7] There is a pretty detailed wiki page
> for
> > > these charts [8]
> > >
> > >
> > >
> > > >
> > > > Is this something we could write that would pretty much cross compile
> > to
> > > > js?
> > > >
> > >
> > > Yes, I believe we are at a point where things are getting more and more
> > > cross-compiled as opposed to be hand-written. Of course, the beauty is
> > > that you can draw in MXML/FXG and you can see a drawing in the JS side.
> > > Pretty cool.
> > >
> > >
> > > >
> > > > Tell me your ideas, I am very interested in this part.
> > > >
> > > >
> > > My next few TODOs are to build a spark like skinning system in FlexJS.
> > > Basically create FXG skins on the AS3 side and mirror them with SVG
> based
> > > skins on the JS side. Peter has built a small example that will let me
> > > play around with event driven, states based skins. I hope to get on
> this
> > > as soon as I get my Git access back.
> > >
> > > Of course, the core graphics packages needs more love with things like
> > > RadialGradients, and more fancy graphics primitives.
> > >
> > > After that I would like to tackle animation. I haven't given a lot of
> > > thought into this, so not sure how easy/hard this is going to be.
> > >
> > > Thanks,
> > > Om
> > >
> > >
> > > >
> > > >
> > > > Mike
> > > >
> > > >
> > > [1] https://github.com/apache/flex-asjs/tree/develop/fxg2svg
> > > [2]
> > >
> > >
> >
> https://github.com/apache/flex-asjs/tree/develop/frameworks/projects/Graphics/as/src/org/apache/flex/core/graphics
> > > [3]
> > >
> > >
> >
> https://github.com/apache/flex-asjs/tree/develop/frameworks/projects/Graphics/js/src/org/apache/flex/core/graphics
> > > [4] http://people.apache.org/~bigosmallm/flexjs/drawing/flash/
> > > [5] http://people.apache.org/~bigosmallm/flexjs/drawing/html5/
> > > [6] http://people.apache.org/~pent/chartswf/
> > > [7] http://people.apache.org/~pent/chartjs/
> > > [8] https://cwiki.apache.org/confluence/display/FLEX/FlexJS+Charts
> > >
> > >
> > > >
> > > > > See this is my problem, Randori was a straight cross compile with
> > shims
> > > > and
> > > > > worked awesome. So all my questions to you are like me "unlearning"
> > > what
> > > > I
> > > > > spent 6+ months working on in that project.
> > > > >
> > > > > The compiler's emitter just puked out js and we locked in SWCs in
> the
> > > > apps
> > > > > that used js API surfaces.
> > > > >
> > > > > Although, the one thing as you know was Mike disagreed with
> FlexJS's
> > > view
> > > > > in ActionScript because he said HTML/CSS designers should just do
> > what
> > > > they
> > > > > do and design in HTML/CSS.
> > > > >
> > > >
> > > > I disagree fundamentally with this idea. For one, HTML/CSS is a
> > terrible
> > > > terrible paradigm. No designer is happy with the way things work
> > > today. I
> > > > would rather provide a better way of doing the visuals via MXML+FXG
> > (like
> > > > we do in Flex's spark skins) and cross compile them over to JS + SVG
> +
> > > > Canvas as needed.
> > > >
> > > > Even the HTML/JS world is waking up to this idea. This presentation
> > [1]
> > > > does a great job of explaining why SVG is better than CSS for
> > interfaces
> > > > building. FlexJS is in a great position to provide this out of the
> box
> > > to
> > > > developers.
> > > >
> > > > Thanks,
> > > > Om
> > > >
> > > > [1]
> > http://slides.com/sarasoueidan/building-better-interfaces-with-svg#/
> > > >
> > >
> >
>
Re: [FlexJS] SVG UI components (was FlexJS event names)
Posted by OmPrakash Muppirala <bi...@gmail.com>.
On Tue, May 19, 2015 at 12:36 PM, Michael Schmalle <
teotigraphixllc@gmail.com> wrote:
> Ok thanks Om, lots to think about. Some more questions.
>
> I am still a bit naive with HTML and SVG. Can SVG be used to skin an HTML
> button? Or is it that you have to "Wrap" an html button with an SVG tag to
> pretty much draw under it?
>
No, SVG cannot be used to skin a native HTML button. The skin class has to
be just another display object under the component, just like the Spark
Button in the current SDK.
>
> I love the idea of a Spark like skinning system and would totally help on
> this, I am just trying to see how it would be implemented and how it
> coincides with the HTML side, the AS side is obvious, the HTML side the SVG
> is a child of the this.element?
>
Yes, that is correct. Although, I have not exactly implemented this
approach. We should know more when I actually start coding a simple skin.
>
> Question: Is SVG meant to be interactive like a Button element or is it
> meant for graphics.
My current thinking is that for each state of the interactive button, a set
of SVG elements would be drawn. Again, much like today's Spark Button +
skin paradigm. The good thing about SVG is that event handlers can be
attached to individual elements, so the interaction can be passed to the
component which can respond by changing the state on itself and on its skin.
> I am just trying to see the point at which the
> component in html is either SVG or an HTML element. Since you say the SVG
> is just created on the DOM, then aren't you saying that the SVG element is
> just a child of the main component?
>
Yes, all the SVG elements would be children of the skin, which in turn
would be a child of the main component.
>
> Do you have any prototypes of this going?
>
I have one, but based on the older FXG -> SVG XSLT approach [1], [2]
Left side is Flash, right side is HTML5/SVG. In this approach, I set the
SVG by setting CSS pseudo-classes . This is still an option going forward,
but one that I don't like that much. I prefer MXML states vs. CSS
pseudo-classes because of the greater flexibility we'll get.
Thanks,
Om
[1] http://people.apache.org/~bigosmallm/fxg2svg/buttonskin/flexVhtml5.html
>
> Mike
>
>
>
>
>
> On Tue, May 19, 2015 at 3:21 PM, OmPrakash Muppirala <bigosmallm@gmail.com
> >
> wrote:
>
> > On Tue, May 19, 2015 at 11:29 AM, Michael Schmalle <
> > teotigraphixllc@gmail.com> wrote:
> >
> > > Ironically Om, this was my next post! SVG and what are we doing to use
> > it.
> > >
> > > Maybe through all my bable of the last thread some might see where I am
> > > coming from, I am really trying to figure out, what are we building on.
> > >
> > > Now SVG I understand, Canvas I understand.
> > >
> > > Om, what are the pluses and minuses of each paradigm? I was just
> reading
> > > about this today, canvas doesn't have event handlers, svg does.
> > >
> >
> > Canvas is a fire and forget mode of rendering. Think of Canvas as an
> > equivalent to Flash's BitmapData. Once you draw on a Canvas, you cannot
> > get access to individual elements without doing a lot of complicated
> > hittests or other kind of hacks. Moreover, it is a raster object. So,
> if
> > you draw on a Canvas and resize it up, it gets pixelated.
> >
> > SVG, on the other hand is a retained mode of rendering. All elements
> drawn
> > in SVG become part of the DOM. This means that you can do event
> handling,
> > animation, etc. much more easily. Also, SVG is vector drawing. So
> drawing
> > in any size and scaling keeps the rendering quality intact.
> >
> > Canvas is generally used for drawing a ton of elements in runtime without
> > needing them to be individually interactive. SVG is less performant
> > because of the added dom related overhead on each element, and is
> (should)
> > generally used for building interactive UI components (charts, maps,
> etc.)
> >
> >
> > >
> > > FXG -> SVG, is there currently a parser/renderer for this? How were you
> > > planning on doing this.
> > >
> >
> > So, my first approach was to write an FXG to SVG transformer[1]
> stylesheet
> > that I imagined would be invoked by the compiler. It turns out that
> doing
> > it the 'FlexJS' way was much easier. Basically, I created the
> primitives -
> > Line, Circle, Path, Fill, Stroke, etc. in the AS side [2] Then, I created
> > their JS equivalents [3] where I draw SVG elements via JavaScript. That
> is
> > pretty much it. The MXML/FXG parsing, cross-compilation from AS to JS
> etc.
> > is handled automatically by FlexJS (magic for me ;-) )
> >
> > The idea from here on is that anything you draw on the screen via AS3
> will
> > look exactly the same in Flash vs. HTML/JS. Here is an example of flash
> > [4] vs html [5] Put them side by side and see if you can tell the
> > difference :-)
> >
> > The next progression was to build FlexJS charts out of these. Here is a
> > set of chart components that Peter Ent built on top of this core graphics
> > classes: Flash [6] vs HTML5[7] There is a pretty detailed wiki page for
> > these charts [8]
> >
> >
> >
> > >
> > > Is this something we could write that would pretty much cross compile
> to
> > > js?
> > >
> >
> > Yes, I believe we are at a point where things are getting more and more
> > cross-compiled as opposed to be hand-written. Of course, the beauty is
> > that you can draw in MXML/FXG and you can see a drawing in the JS side.
> > Pretty cool.
> >
> >
> > >
> > > Tell me your ideas, I am very interested in this part.
> > >
> > >
> > My next few TODOs are to build a spark like skinning system in FlexJS.
> > Basically create FXG skins on the AS3 side and mirror them with SVG based
> > skins on the JS side. Peter has built a small example that will let me
> > play around with event driven, states based skins. I hope to get on this
> > as soon as I get my Git access back.
> >
> > Of course, the core graphics packages needs more love with things like
> > RadialGradients, and more fancy graphics primitives.
> >
> > After that I would like to tackle animation. I haven't given a lot of
> > thought into this, so not sure how easy/hard this is going to be.
> >
> > Thanks,
> > Om
> >
> >
> > >
> > >
> > > Mike
> > >
> > >
> > [1] https://github.com/apache/flex-asjs/tree/develop/fxg2svg
> > [2]
> >
> >
> https://github.com/apache/flex-asjs/tree/develop/frameworks/projects/Graphics/as/src/org/apache/flex/core/graphics
> > [3]
> >
> >
> https://github.com/apache/flex-asjs/tree/develop/frameworks/projects/Graphics/js/src/org/apache/flex/core/graphics
> > [4] http://people.apache.org/~bigosmallm/flexjs/drawing/flash/
> > [5] http://people.apache.org/~bigosmallm/flexjs/drawing/html5/
> > [6] http://people.apache.org/~pent/chartswf/
> > [7] http://people.apache.org/~pent/chartjs/
> > [8] https://cwiki.apache.org/confluence/display/FLEX/FlexJS+Charts
> >
> >
> > >
> > > > See this is my problem, Randori was a straight cross compile with
> shims
> > > and
> > > > worked awesome. So all my questions to you are like me "unlearning"
> > what
> > > I
> > > > spent 6+ months working on in that project.
> > > >
> > > > The compiler's emitter just puked out js and we locked in SWCs in the
> > > apps
> > > > that used js API surfaces.
> > > >
> > > > Although, the one thing as you know was Mike disagreed with FlexJS's
> > view
> > > > in ActionScript because he said HTML/CSS designers should just do
> what
> > > they
> > > > do and design in HTML/CSS.
> > > >
> > >
> > > I disagree fundamentally with this idea. For one, HTML/CSS is a
> terrible
> > > terrible paradigm. No designer is happy with the way things work
> > today. I
> > > would rather provide a better way of doing the visuals via MXML+FXG
> (like
> > > we do in Flex's spark skins) and cross compile them over to JS + SVG +
> > > Canvas as needed.
> > >
> > > Even the HTML/JS world is waking up to this idea. This presentation
> [1]
> > > does a great job of explaining why SVG is better than CSS for
> interfaces
> > > building. FlexJS is in a great position to provide this out of the box
> > to
> > > developers.
> > >
> > > Thanks,
> > > Om
> > >
> > > [1]
> http://slides.com/sarasoueidan/building-better-interfaces-with-svg#/
> > >
> >
>
Re: [FlexJS] SVG UI components (was FlexJS event names)
Posted by OmPrakash Muppirala <bi...@gmail.com>.
On Tue, May 19, 2015 at 12:45 PM, Michael Schmalle <
teotigraphixllc@gmail.com> wrote:
> Om,
>
> Check this out;
>
>
> https://jsfoo.talkfunnel.com/2013/788-using-randorijs-and-kontikijs-to-create-2d-webgl-based-games-from-existing-starling-as3-code
>
> Load this in Chrome;
>
> http://renaun.com/html5/randoristarlingtest/hero.html
>
> That whole thing and the Starling framework was cross compiled with the
> Randori compiler I wrote. :)
>
> It uses the same as code! Renaun had to make tweaks but this shows what we
> could do if we wanted to.
>
>
Very cool! Yes, I remember seeing this and thinking that we could do
something similar in FlexJS :-)
Thanks,
Om
> Mike
>
> On Tue, May 19, 2015 at 3:36 PM, Michael Schmalle <
> teotigraphixllc@gmail.com
> > wrote:
>
> > Ok thanks Om, lots to think about. Some more questions.
> >
> > I am still a bit naive with HTML and SVG. Can SVG be used to skin an HTML
> > button? Or is it that you have to "Wrap" an html button with an SVG tag
> to
> > pretty much draw under it?
> >
> > I love the idea of a Spark like skinning system and would totally help on
> > this, I am just trying to see how it would be implemented and how it
> > coincides with the HTML side, the AS side is obvious, the HTML side the
> SVG
> > is a child of the this.element?
> >
> > Question: Is SVG meant to be interactive like a Button element or is it
> > meant for graphics. I am just trying to see the point at which the
> > component in html is either SVG or an HTML element. Since you say the SVG
> > is just created on the DOM, then aren't you saying that the SVG element
> is
> > just a child of the main component?
> >
> > Do you have any prototypes of this going?
> >
> > Mike
> >
> >
> >
> >
> >
> > On Tue, May 19, 2015 at 3:21 PM, OmPrakash Muppirala <
> bigosmallm@gmail.com
> > > wrote:
> >
> >> On Tue, May 19, 2015 at 11:29 AM, Michael Schmalle <
> >> teotigraphixllc@gmail.com> wrote:
> >>
> >> > Ironically Om, this was my next post! SVG and what are we doing to use
> >> it.
> >> >
> >> > Maybe through all my bable of the last thread some might see where I
> am
> >> > coming from, I am really trying to figure out, what are we building
> on.
> >> >
> >> > Now SVG I understand, Canvas I understand.
> >> >
> >> > Om, what are the pluses and minuses of each paradigm? I was just
> reading
> >> > about this today, canvas doesn't have event handlers, svg does.
> >> >
> >>
> >> Canvas is a fire and forget mode of rendering. Think of Canvas as an
> >> equivalent to Flash's BitmapData. Once you draw on a Canvas, you cannot
> >> get access to individual elements without doing a lot of complicated
> >> hittests or other kind of hacks. Moreover, it is a raster object. So,
> if
> >> you draw on a Canvas and resize it up, it gets pixelated.
> >>
> >> SVG, on the other hand is a retained mode of rendering. All elements
> >> drawn
> >> in SVG become part of the DOM. This means that you can do event
> handling,
> >> animation, etc. much more easily. Also, SVG is vector drawing. So
> >> drawing
> >> in any size and scaling keeps the rendering quality intact.
> >>
> >> Canvas is generally used for drawing a ton of elements in runtime
> without
> >> needing them to be individually interactive. SVG is less performant
> >> because of the added dom related overhead on each element, and is
> (should)
> >> generally used for building interactive UI components (charts, maps,
> etc.)
> >>
> >>
> >> >
> >> > FXG -> SVG, is there currently a parser/renderer for this? How were
> you
> >> > planning on doing this.
> >> >
> >>
> >> So, my first approach was to write an FXG to SVG transformer[1]
> stylesheet
> >> that I imagined would be invoked by the compiler. It turns out that
> doing
> >> it the 'FlexJS' way was much easier. Basically, I created the
> primitives
> >> -
> >> Line, Circle, Path, Fill, Stroke, etc. in the AS side [2] Then, I
> created
> >> their JS equivalents [3] where I draw SVG elements via JavaScript. That
> >> is
> >> pretty much it. The MXML/FXG parsing, cross-compilation from AS to JS
> >> etc.
> >> is handled automatically by FlexJS (magic for me ;-) )
> >>
> >> The idea from here on is that anything you draw on the screen via AS3
> will
> >> look exactly the same in Flash vs. HTML/JS. Here is an example of flash
> >> [4] vs html [5] Put them side by side and see if you can tell the
> >> difference :-)
> >>
> >> The next progression was to build FlexJS charts out of these. Here is a
> >> set of chart components that Peter Ent built on top of this core
> graphics
> >> classes: Flash [6] vs HTML5[7] There is a pretty detailed wiki page
> for
> >> these charts [8]
> >>
> >>
> >>
> >> >
> >> > Is this something we could write that would pretty much cross compile
> to
> >> > js?
> >> >
> >>
> >> Yes, I believe we are at a point where things are getting more and more
> >> cross-compiled as opposed to be hand-written. Of course, the beauty is
> >> that you can draw in MXML/FXG and you can see a drawing in the JS side.
> >> Pretty cool.
> >>
> >>
> >> >
> >> > Tell me your ideas, I am very interested in this part.
> >> >
> >> >
> >> My next few TODOs are to build a spark like skinning system in FlexJS.
> >> Basically create FXG skins on the AS3 side and mirror them with SVG
> based
> >> skins on the JS side. Peter has built a small example that will let me
> >> play around with event driven, states based skins. I hope to get on
> this
> >> as soon as I get my Git access back.
> >>
> >> Of course, the core graphics packages needs more love with things like
> >> RadialGradients, and more fancy graphics primitives.
> >>
> >> After that I would like to tackle animation. I haven't given a lot of
> >> thought into this, so not sure how easy/hard this is going to be.
> >>
> >> Thanks,
> >> Om
> >>
> >>
> >> >
> >> >
> >> > Mike
> >> >
> >> >
> >> [1] https://github.com/apache/flex-asjs/tree/develop/fxg2svg
> >> [2]
> >>
> >>
> https://github.com/apache/flex-asjs/tree/develop/frameworks/projects/Graphics/as/src/org/apache/flex/core/graphics
> >> [3]
> >>
> >>
> https://github.com/apache/flex-asjs/tree/develop/frameworks/projects/Graphics/js/src/org/apache/flex/core/graphics
> >> [4] http://people.apache.org/~bigosmallm/flexjs/drawing/flash/
> >> [5] http://people.apache.org/~bigosmallm/flexjs/drawing/html5/
> >> [6] http://people.apache.org/~pent/chartswf/
> >> [7] http://people.apache.org/~pent/chartjs/
> >> [8] https://cwiki.apache.org/confluence/display/FLEX/FlexJS+Charts
> >>
> >>
> >> >
> >> > > See this is my problem, Randori was a straight cross compile with
> >> shims
> >> > and
> >> > > worked awesome. So all my questions to you are like me "unlearning"
> >> what
> >> > I
> >> > > spent 6+ months working on in that project.
> >> > >
> >> > > The compiler's emitter just puked out js and we locked in SWCs in
> the
> >> > apps
> >> > > that used js API surfaces.
> >> > >
> >> > > Although, the one thing as you know was Mike disagreed with FlexJS's
> >> view
> >> > > in ActionScript because he said HTML/CSS designers should just do
> what
> >> > they
> >> > > do and design in HTML/CSS.
> >> > >
> >> >
> >> > I disagree fundamentally with this idea. For one, HTML/CSS is a
> >> terrible
> >> > terrible paradigm. No designer is happy with the way things work
> >> today. I
> >> > would rather provide a better way of doing the visuals via MXML+FXG
> >> (like
> >> > we do in Flex's spark skins) and cross compile them over to JS + SVG +
> >> > Canvas as needed.
> >> >
> >> > Even the HTML/JS world is waking up to this idea. This presentation
> [1]
> >> > does a great job of explaining why SVG is better than CSS for
> interfaces
> >> > building. FlexJS is in a great position to provide this out of the
> box
> >> to
> >> > developers.
> >> >
> >> > Thanks,
> >> > Om
> >> >
> >> > [1]
> >> http://slides.com/sarasoueidan/building-better-interfaces-with-svg#/
> >> >
> >>
> >
> >
>
Re: [FlexJS] SVG UI components (was FlexJS event names)
Posted by Michael Schmalle <te...@gmail.com>.
Om,
Check this out;
https://jsfoo.talkfunnel.com/2013/788-using-randorijs-and-kontikijs-to-create-2d-webgl-based-games-from-existing-starling-as3-code
Load this in Chrome;
http://renaun.com/html5/randoristarlingtest/hero.html
That whole thing and the Starling framework was cross compiled with the
Randori compiler I wrote. :)
It uses the same as code! Renaun had to make tweaks but this shows what we
could do if we wanted to.
Mike
On Tue, May 19, 2015 at 3:36 PM, Michael Schmalle <teotigraphixllc@gmail.com
> wrote:
> Ok thanks Om, lots to think about. Some more questions.
>
> I am still a bit naive with HTML and SVG. Can SVG be used to skin an HTML
> button? Or is it that you have to "Wrap" an html button with an SVG tag to
> pretty much draw under it?
>
> I love the idea of a Spark like skinning system and would totally help on
> this, I am just trying to see how it would be implemented and how it
> coincides with the HTML side, the AS side is obvious, the HTML side the SVG
> is a child of the this.element?
>
> Question: Is SVG meant to be interactive like a Button element or is it
> meant for graphics. I am just trying to see the point at which the
> component in html is either SVG or an HTML element. Since you say the SVG
> is just created on the DOM, then aren't you saying that the SVG element is
> just a child of the main component?
>
> Do you have any prototypes of this going?
>
> Mike
>
>
>
>
>
> On Tue, May 19, 2015 at 3:21 PM, OmPrakash Muppirala <bigosmallm@gmail.com
> > wrote:
>
>> On Tue, May 19, 2015 at 11:29 AM, Michael Schmalle <
>> teotigraphixllc@gmail.com> wrote:
>>
>> > Ironically Om, this was my next post! SVG and what are we doing to use
>> it.
>> >
>> > Maybe through all my bable of the last thread some might see where I am
>> > coming from, I am really trying to figure out, what are we building on.
>> >
>> > Now SVG I understand, Canvas I understand.
>> >
>> > Om, what are the pluses and minuses of each paradigm? I was just reading
>> > about this today, canvas doesn't have event handlers, svg does.
>> >
>>
>> Canvas is a fire and forget mode of rendering. Think of Canvas as an
>> equivalent to Flash's BitmapData. Once you draw on a Canvas, you cannot
>> get access to individual elements without doing a lot of complicated
>> hittests or other kind of hacks. Moreover, it is a raster object. So, if
>> you draw on a Canvas and resize it up, it gets pixelated.
>>
>> SVG, on the other hand is a retained mode of rendering. All elements
>> drawn
>> in SVG become part of the DOM. This means that you can do event handling,
>> animation, etc. much more easily. Also, SVG is vector drawing. So
>> drawing
>> in any size and scaling keeps the rendering quality intact.
>>
>> Canvas is generally used for drawing a ton of elements in runtime without
>> needing them to be individually interactive. SVG is less performant
>> because of the added dom related overhead on each element, and is (should)
>> generally used for building interactive UI components (charts, maps, etc.)
>>
>>
>> >
>> > FXG -> SVG, is there currently a parser/renderer for this? How were you
>> > planning on doing this.
>> >
>>
>> So, my first approach was to write an FXG to SVG transformer[1] stylesheet
>> that I imagined would be invoked by the compiler. It turns out that doing
>> it the 'FlexJS' way was much easier. Basically, I created the primitives
>> -
>> Line, Circle, Path, Fill, Stroke, etc. in the AS side [2] Then, I created
>> their JS equivalents [3] where I draw SVG elements via JavaScript. That
>> is
>> pretty much it. The MXML/FXG parsing, cross-compilation from AS to JS
>> etc.
>> is handled automatically by FlexJS (magic for me ;-) )
>>
>> The idea from here on is that anything you draw on the screen via AS3 will
>> look exactly the same in Flash vs. HTML/JS. Here is an example of flash
>> [4] vs html [5] Put them side by side and see if you can tell the
>> difference :-)
>>
>> The next progression was to build FlexJS charts out of these. Here is a
>> set of chart components that Peter Ent built on top of this core graphics
>> classes: Flash [6] vs HTML5[7] There is a pretty detailed wiki page for
>> these charts [8]
>>
>>
>>
>> >
>> > Is this something we could write that would pretty much cross compile to
>> > js?
>> >
>>
>> Yes, I believe we are at a point where things are getting more and more
>> cross-compiled as opposed to be hand-written. Of course, the beauty is
>> that you can draw in MXML/FXG and you can see a drawing in the JS side.
>> Pretty cool.
>>
>>
>> >
>> > Tell me your ideas, I am very interested in this part.
>> >
>> >
>> My next few TODOs are to build a spark like skinning system in FlexJS.
>> Basically create FXG skins on the AS3 side and mirror them with SVG based
>> skins on the JS side. Peter has built a small example that will let me
>> play around with event driven, states based skins. I hope to get on this
>> as soon as I get my Git access back.
>>
>> Of course, the core graphics packages needs more love with things like
>> RadialGradients, and more fancy graphics primitives.
>>
>> After that I would like to tackle animation. I haven't given a lot of
>> thought into this, so not sure how easy/hard this is going to be.
>>
>> Thanks,
>> Om
>>
>>
>> >
>> >
>> > Mike
>> >
>> >
>> [1] https://github.com/apache/flex-asjs/tree/develop/fxg2svg
>> [2]
>>
>> https://github.com/apache/flex-asjs/tree/develop/frameworks/projects/Graphics/as/src/org/apache/flex/core/graphics
>> [3]
>>
>> https://github.com/apache/flex-asjs/tree/develop/frameworks/projects/Graphics/js/src/org/apache/flex/core/graphics
>> [4] http://people.apache.org/~bigosmallm/flexjs/drawing/flash/
>> [5] http://people.apache.org/~bigosmallm/flexjs/drawing/html5/
>> [6] http://people.apache.org/~pent/chartswf/
>> [7] http://people.apache.org/~pent/chartjs/
>> [8] https://cwiki.apache.org/confluence/display/FLEX/FlexJS+Charts
>>
>>
>> >
>> > > See this is my problem, Randori was a straight cross compile with
>> shims
>> > and
>> > > worked awesome. So all my questions to you are like me "unlearning"
>> what
>> > I
>> > > spent 6+ months working on in that project.
>> > >
>> > > The compiler's emitter just puked out js and we locked in SWCs in the
>> > apps
>> > > that used js API surfaces.
>> > >
>> > > Although, the one thing as you know was Mike disagreed with FlexJS's
>> view
>> > > in ActionScript because he said HTML/CSS designers should just do what
>> > they
>> > > do and design in HTML/CSS.
>> > >
>> >
>> > I disagree fundamentally with this idea. For one, HTML/CSS is a
>> terrible
>> > terrible paradigm. No designer is happy with the way things work
>> today. I
>> > would rather provide a better way of doing the visuals via MXML+FXG
>> (like
>> > we do in Flex's spark skins) and cross compile them over to JS + SVG +
>> > Canvas as needed.
>> >
>> > Even the HTML/JS world is waking up to this idea. This presentation [1]
>> > does a great job of explaining why SVG is better than CSS for interfaces
>> > building. FlexJS is in a great position to provide this out of the box
>> to
>> > developers.
>> >
>> > Thanks,
>> > Om
>> >
>> > [1]
>> http://slides.com/sarasoueidan/building-better-interfaces-with-svg#/
>> >
>>
>
>
Re: [FlexJS] SVG UI components (was FlexJS event names)
Posted by Michael Schmalle <te...@gmail.com>.
Ok thanks Om, lots to think about. Some more questions.
I am still a bit naive with HTML and SVG. Can SVG be used to skin an HTML
button? Or is it that you have to "Wrap" an html button with an SVG tag to
pretty much draw under it?
I love the idea of a Spark like skinning system and would totally help on
this, I am just trying to see how it would be implemented and how it
coincides with the HTML side, the AS side is obvious, the HTML side the SVG
is a child of the this.element?
Question: Is SVG meant to be interactive like a Button element or is it
meant for graphics. I am just trying to see the point at which the
component in html is either SVG or an HTML element. Since you say the SVG
is just created on the DOM, then aren't you saying that the SVG element is
just a child of the main component?
Do you have any prototypes of this going?
Mike
On Tue, May 19, 2015 at 3:21 PM, OmPrakash Muppirala <bi...@gmail.com>
wrote:
> On Tue, May 19, 2015 at 11:29 AM, Michael Schmalle <
> teotigraphixllc@gmail.com> wrote:
>
> > Ironically Om, this was my next post! SVG and what are we doing to use
> it.
> >
> > Maybe through all my bable of the last thread some might see where I am
> > coming from, I am really trying to figure out, what are we building on.
> >
> > Now SVG I understand, Canvas I understand.
> >
> > Om, what are the pluses and minuses of each paradigm? I was just reading
> > about this today, canvas doesn't have event handlers, svg does.
> >
>
> Canvas is a fire and forget mode of rendering. Think of Canvas as an
> equivalent to Flash's BitmapData. Once you draw on a Canvas, you cannot
> get access to individual elements without doing a lot of complicated
> hittests or other kind of hacks. Moreover, it is a raster object. So, if
> you draw on a Canvas and resize it up, it gets pixelated.
>
> SVG, on the other hand is a retained mode of rendering. All elements drawn
> in SVG become part of the DOM. This means that you can do event handling,
> animation, etc. much more easily. Also, SVG is vector drawing. So drawing
> in any size and scaling keeps the rendering quality intact.
>
> Canvas is generally used for drawing a ton of elements in runtime without
> needing them to be individually interactive. SVG is less performant
> because of the added dom related overhead on each element, and is (should)
> generally used for building interactive UI components (charts, maps, etc.)
>
>
> >
> > FXG -> SVG, is there currently a parser/renderer for this? How were you
> > planning on doing this.
> >
>
> So, my first approach was to write an FXG to SVG transformer[1] stylesheet
> that I imagined would be invoked by the compiler. It turns out that doing
> it the 'FlexJS' way was much easier. Basically, I created the primitives -
> Line, Circle, Path, Fill, Stroke, etc. in the AS side [2] Then, I created
> their JS equivalents [3] where I draw SVG elements via JavaScript. That is
> pretty much it. The MXML/FXG parsing, cross-compilation from AS to JS etc.
> is handled automatically by FlexJS (magic for me ;-) )
>
> The idea from here on is that anything you draw on the screen via AS3 will
> look exactly the same in Flash vs. HTML/JS. Here is an example of flash
> [4] vs html [5] Put them side by side and see if you can tell the
> difference :-)
>
> The next progression was to build FlexJS charts out of these. Here is a
> set of chart components that Peter Ent built on top of this core graphics
> classes: Flash [6] vs HTML5[7] There is a pretty detailed wiki page for
> these charts [8]
>
>
>
> >
> > Is this something we could write that would pretty much cross compile to
> > js?
> >
>
> Yes, I believe we are at a point where things are getting more and more
> cross-compiled as opposed to be hand-written. Of course, the beauty is
> that you can draw in MXML/FXG and you can see a drawing in the JS side.
> Pretty cool.
>
>
> >
> > Tell me your ideas, I am very interested in this part.
> >
> >
> My next few TODOs are to build a spark like skinning system in FlexJS.
> Basically create FXG skins on the AS3 side and mirror them with SVG based
> skins on the JS side. Peter has built a small example that will let me
> play around with event driven, states based skins. I hope to get on this
> as soon as I get my Git access back.
>
> Of course, the core graphics packages needs more love with things like
> RadialGradients, and more fancy graphics primitives.
>
> After that I would like to tackle animation. I haven't given a lot of
> thought into this, so not sure how easy/hard this is going to be.
>
> Thanks,
> Om
>
>
> >
> >
> > Mike
> >
> >
> [1] https://github.com/apache/flex-asjs/tree/develop/fxg2svg
> [2]
>
> https://github.com/apache/flex-asjs/tree/develop/frameworks/projects/Graphics/as/src/org/apache/flex/core/graphics
> [3]
>
> https://github.com/apache/flex-asjs/tree/develop/frameworks/projects/Graphics/js/src/org/apache/flex/core/graphics
> [4] http://people.apache.org/~bigosmallm/flexjs/drawing/flash/
> [5] http://people.apache.org/~bigosmallm/flexjs/drawing/html5/
> [6] http://people.apache.org/~pent/chartswf/
> [7] http://people.apache.org/~pent/chartjs/
> [8] https://cwiki.apache.org/confluence/display/FLEX/FlexJS+Charts
>
>
> >
> > > See this is my problem, Randori was a straight cross compile with shims
> > and
> > > worked awesome. So all my questions to you are like me "unlearning"
> what
> > I
> > > spent 6+ months working on in that project.
> > >
> > > The compiler's emitter just puked out js and we locked in SWCs in the
> > apps
> > > that used js API surfaces.
> > >
> > > Although, the one thing as you know was Mike disagreed with FlexJS's
> view
> > > in ActionScript because he said HTML/CSS designers should just do what
> > they
> > > do and design in HTML/CSS.
> > >
> >
> > I disagree fundamentally with this idea. For one, HTML/CSS is a terrible
> > terrible paradigm. No designer is happy with the way things work
> today. I
> > would rather provide a better way of doing the visuals via MXML+FXG (like
> > we do in Flex's spark skins) and cross compile them over to JS + SVG +
> > Canvas as needed.
> >
> > Even the HTML/JS world is waking up to this idea. This presentation [1]
> > does a great job of explaining why SVG is better than CSS for interfaces
> > building. FlexJS is in a great position to provide this out of the box
> to
> > developers.
> >
> > Thanks,
> > Om
> >
> > [1] http://slides.com/sarasoueidan/building-better-interfaces-with-svg#/
> >
>
Re: [FlexJS] SVG UI components (was FlexJS event names)
Posted by OmPrakash Muppirala <bi...@gmail.com>.
On Tue, May 19, 2015 at 11:29 AM, Michael Schmalle <
teotigraphixllc@gmail.com> wrote:
> Ironically Om, this was my next post! SVG and what are we doing to use it.
>
> Maybe through all my bable of the last thread some might see where I am
> coming from, I am really trying to figure out, what are we building on.
>
> Now SVG I understand, Canvas I understand.
>
> Om, what are the pluses and minuses of each paradigm? I was just reading
> about this today, canvas doesn't have event handlers, svg does.
>
Canvas is a fire and forget mode of rendering. Think of Canvas as an
equivalent to Flash's BitmapData. Once you draw on a Canvas, you cannot
get access to individual elements without doing a lot of complicated
hittests or other kind of hacks. Moreover, it is a raster object. So, if
you draw on a Canvas and resize it up, it gets pixelated.
SVG, on the other hand is a retained mode of rendering. All elements drawn
in SVG become part of the DOM. This means that you can do event handling,
animation, etc. much more easily. Also, SVG is vector drawing. So drawing
in any size and scaling keeps the rendering quality intact.
Canvas is generally used for drawing a ton of elements in runtime without
needing them to be individually interactive. SVG is less performant
because of the added dom related overhead on each element, and is (should)
generally used for building interactive UI components (charts, maps, etc.)
>
> FXG -> SVG, is there currently a parser/renderer for this? How were you
> planning on doing this.
>
So, my first approach was to write an FXG to SVG transformer[1] stylesheet
that I imagined would be invoked by the compiler. It turns out that doing
it the 'FlexJS' way was much easier. Basically, I created the primitives -
Line, Circle, Path, Fill, Stroke, etc. in the AS side [2] Then, I created
their JS equivalents [3] where I draw SVG elements via JavaScript. That is
pretty much it. The MXML/FXG parsing, cross-compilation from AS to JS etc.
is handled automatically by FlexJS (magic for me ;-) )
The idea from here on is that anything you draw on the screen via AS3 will
look exactly the same in Flash vs. HTML/JS. Here is an example of flash
[4] vs html [5] Put them side by side and see if you can tell the
difference :-)
The next progression was to build FlexJS charts out of these. Here is a
set of chart components that Peter Ent built on top of this core graphics
classes: Flash [6] vs HTML5[7] There is a pretty detailed wiki page for
these charts [8]
>
> Is this something we could write that would pretty much cross compile to
> js?
>
Yes, I believe we are at a point where things are getting more and more
cross-compiled as opposed to be hand-written. Of course, the beauty is
that you can draw in MXML/FXG and you can see a drawing in the JS side.
Pretty cool.
>
> Tell me your ideas, I am very interested in this part.
>
>
My next few TODOs are to build a spark like skinning system in FlexJS.
Basically create FXG skins on the AS3 side and mirror them with SVG based
skins on the JS side. Peter has built a small example that will let me
play around with event driven, states based skins. I hope to get on this
as soon as I get my Git access back.
Of course, the core graphics packages needs more love with things like
RadialGradients, and more fancy graphics primitives.
After that I would like to tackle animation. I haven't given a lot of
thought into this, so not sure how easy/hard this is going to be.
Thanks,
Om
>
>
> Mike
>
>
[1] https://github.com/apache/flex-asjs/tree/develop/fxg2svg
[2]
https://github.com/apache/flex-asjs/tree/develop/frameworks/projects/Graphics/as/src/org/apache/flex/core/graphics
[3]
https://github.com/apache/flex-asjs/tree/develop/frameworks/projects/Graphics/js/src/org/apache/flex/core/graphics
[4] http://people.apache.org/~bigosmallm/flexjs/drawing/flash/
[5] http://people.apache.org/~bigosmallm/flexjs/drawing/html5/
[6] http://people.apache.org/~pent/chartswf/
[7] http://people.apache.org/~pent/chartjs/
[8] https://cwiki.apache.org/confluence/display/FLEX/FlexJS+Charts
>
> > See this is my problem, Randori was a straight cross compile with shims
> and
> > worked awesome. So all my questions to you are like me "unlearning" what
> I
> > spent 6+ months working on in that project.
> >
> > The compiler's emitter just puked out js and we locked in SWCs in the
> apps
> > that used js API surfaces.
> >
> > Although, the one thing as you know was Mike disagreed with FlexJS's view
> > in ActionScript because he said HTML/CSS designers should just do what
> they
> > do and design in HTML/CSS.
> >
>
> I disagree fundamentally with this idea. For one, HTML/CSS is a terrible
> terrible paradigm. No designer is happy with the way things work today. I
> would rather provide a better way of doing the visuals via MXML+FXG (like
> we do in Flex's spark skins) and cross compile them over to JS + SVG +
> Canvas as needed.
>
> Even the HTML/JS world is waking up to this idea. This presentation [1]
> does a great job of explaining why SVG is better than CSS for interfaces
> building. FlexJS is in a great position to provide this out of the box to
> developers.
>
> Thanks,
> Om
>
> [1] http://slides.com/sarasoueidan/building-better-interfaces-with-svg#/
>