flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Michael Schmalle <teotigraphix...@gmail.com>
Subject Re: [FlexJS] SVG UI components (was FlexJS event names)
Date Tue, 19 May 2015 19:45:00 GMT
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#/
>> >
>>
>
>

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