On Mon, Apr 1, 2013 at 1:33 PM, Alex Harui <[email protected]> wrote: > 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. >
I see that the AS side is pretty bare for the html5 controls. Do you or Peter have any thoughts on how I can proceed? What would be a good entry point for me? Obviously adding skinning support to the AS side would be the first step. I would rather let you guys build a very simple example and I can hopefully take it from there. > Some comments: > 1) How should an svg button skin handle the button states in html? It > isn't > done with separate svg files? > It would be ideal if the SVG skin files do not know anything about the component they are skinning. Each state of the component would have its own self-sustained skin SVG file. That is how my demo works as well. I could just skin a div or any other html element using the same 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. > Jude, can you please take a look at this approach and comment? If there are any course corrections we need to make, this would be the best time. > > 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. > I am not crazy about Ant. So, if you or someone else can help me with this, that would be great. Thanks, Om > > > On 4/1/13 12:59 PM, "Om" <[email protected]> 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. > http://blogs.adobe.com/aharui > >
