Very cool Om! I'll take a look and will try to make my hands dirty with this stuff :)
After read your email I think that maybe only getting a SVG version of spark components skin could be sufficient to create a good looking set of FlexJS components, so in the end we really doesn't need FXG. I like FXG, but having SVG, do you think w will need jt anymore in the future?. I'm assuming that we could use SVG skins for SWF version too, so this will unify look and feel between JS and SWF. So, If this is true, we could not need to integrate the conversion tool in the FlexJS compilation process, making it more light. Let me know If I'm on the way or maybe I'm missing something. Thanks Carlos 2014-02-27 9:50 GMT+01:00 OmPrakash Muppirala <bigosma...@gmail.com>: > 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 > > > -- Carlos Rovira Director de Tecnología M: +34 607 22 60 05 F: +34 912 94 80 80 http://www.codeoscopic.com http://www.directwriter.es http://www.avant2.es
