flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Alex Harui <aha...@adobe.com>
Subject Re: Demo of Button skinning: FXG vs. SVG
Date Mon, 01 Apr 2013 20:33:18 GMT
Good progress!

You may have seen that Peter checked in an HTML5 control set.  Now we have
to figure out how to wire your stuff into that.

Some comments:
1) How should an svg button skin handle the button states in html?  It isn't
done with separate svg files?

2) I would think we would want to use CSS more.  I forgot to follow up with
Jude on his objections to CSS proliferation.  Maybe he'll jump in here.

3) If ANT preprocessing is going to be a lot of work, it might be time to
integrate into the compiler and manipulate stuff from Java.

On 4/1/13 12:59 PM, "Om" <bigosmallm@gmail.com> wrote:

> I was able to add quite a bit of functionality to my XSLT transform.  Just
> about enough to be able to port the standard Spark Button
> (spark.skins.spark.skins.ButtonSkin.mxml) to HTML5/SVG.
> Here is a demo showing them side by side:
> http://people.apache.org/~bigosmallm/fxg2svg/buttonskin/flexVhtml5.html
> Some notes about the transformation/workflow:
> 1.  The XSLT does not handle states yet.  I am manually modifying it handle
> different states.  Each state/run of the XSLT on the  produces a single
> .svg file.  So we have three svg files as a result:
> http://people.apache.org/~bigosmallm/fxg2svg/buttonskin/button_skin_up.svg
> http://people.apache.org/~bigosmallm/fxg2svg/buttonskin/button_skin_over.svg
> http://people.apache.org/~bigosmallm/fxg2svg/buttonskin/button_skin_down.svg
> I probably will hook it up so that ANT can do some preprocessing of the
> XSLT for each state involved.  Anyone else has better ideas on how to do
> this?
> 2.  The XSLT handles these FXG elements (and their attributes) for now:
>    1. Rect
>    2. fill
>    3. SolidColor
>    4. LinearGradient
>    5. stroke
>    6. LinearGradientStroke
>    7. gradientTransform
> As I am targetting a very specific usecase (ButtonSkin.mxml) I am guessing
> there are quite a attributes that I dont handle - for now.
> 3.  I tested it on the latest versions of Chrome and Firefox.  Chrome seems
> to have a more faithful rendering fidelity among the two browsers.  Note
> that I have not used ANY browser specific style rules (yet!)
> 4.  I have had to handcode some of the more fancier gradientTransform
> functionalities.  A lot of fun Math is going to be involved here :-)
> 5.  I am using pure CSS to skin the various states of the html Button
> element.  I guess we could also do it using Javascript.  But things seems
> to be working this way.  I plan to continue in this approach unless others
> (Alex/Erik/Jude -> I am looking at you!) have concerns.
> After this demo, I am much more confident about this approach.  It
> definitely is going to be quite a lot of work, but it is definitely
> possible to achieve visual consistency between Flex skins and HTML5/SVG
> skins.
> I hope to hear a lot of feedback!   And perhaps some volunteers to jump in
> and tackle the future tasks in this project :-)
> Thanks,
> Om

Alex Harui
Flex SDK Team
Adobe Systems, Inc.

View raw message