Thanks Carlos! I created the SVG skins from the current spark component skins through a combination of automation and manual coding. One of the tools I use is the FXG -> SVG XSLT translator available here [1]
Notice that there are three xslt files, transform.xslt, transform-over.xslt and transform-down.xslt. These correspond to the various states in the spark.skins.spark.ButtonSkin.mxml. So, for each state in the skin, you will need to slightly tweak the xslt and re-run it. I am hoping to modify my xslt to do this automatically. Or perhaps we can write an ant script that does this for us. To run the XSLT, I just use an online XSLT editor like this [2] As I said, very unsophisticated ;-) There are some conditions that I dont take care of yet (as noted in the TODO list here [3] This requires a change to the XSLT document. If you are up to it, please take a shot at fixing/adding stuff. Also, I am converting only these elements from FXG to SVG now: Rect (attributes: left, right, top, bottom, defs, id, x, y, width, height, radiusX, radiusY, fill) Fill Stroke SolidColor LinearGradient LinearGradientStroke GradientEntry Label For spark.skins.spark.ButtonSkin, these elements suffice. But for spark.skins.spark.CheckBoxSkin, we will need the translation for the Path element as well. For spark.skins.spark.RadioButtonSkin, we need the translation for the Ellipse element As I said, the conversion mechanism is very primitive right now. If you are able to make progress with other components' skins, that would be a huge deal. Please let me know how I can help. My goal is to make this a pluggable tool into the FlexJS compilation step. Still a long way to get there, I guess. Thanks, Om [1] https://fisheye6.atlassian.com/browse/~br=develop/flex-asjs/fxg2svg/transform [2] http://xslt.online-toolz.com/tools/xslt-transformation.php [3] https://fisheye6.atlassian.com/browse/~br=develop/flex-asjs/fxg2svg/TODO.txt On Wed, Feb 26, 2014 at 4:16 AM, Carlos Rovira < carlos.rov...@codeoscopic.com> wrote: > Hi Om, > > very cool! I build the example and button looks pretty now! :) > > As you, Alex and Erik are looking for some internals, could I help making > other SVG for other component in the meanwhile? (i.e: CheckBox, > RadioButton,...) > > Could you share more info about the methodology behind the SVG internals in > order to build one from scratch? > > Amazing stuff! > > :) > > Carlos >
