You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by OmPrakash Muppirala <bi...@gmail.com> on 2014/02/27 09:50:20 UTC
[FlexJS] Building SVG skins from existing Spark component skins
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.rovira@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
>
Re: [FlexJS] Building SVG skins from existing Spark component skins
Posted by Alex Harui <ah...@adobe.com>.
I'm not sure what you mean by "(has the skin)".
TextButton.as should have a TextButtonView.as already.
One option would be to replace TextButtonView with a version that changes
states in a skin class. The skin class would be TextButtonSkin.as or
TextButtonSkin.mxml that references a set of fxg files.
On the JS side, TextButtonView.js would do something similar. The
TextButtonSkin.js would switch between 3 "somethings". Then you'll have
fun tweaking the compiler to output different somethings and tweaking the
TextButtonSkin.js
Another option is that you replace TextButtonView with a version that
expects 3 Sprites that will be the compiled FXG files. On the JS side,
that version would expect 3 "somethings".
That might be better because then there are fewer layers. But we can
change our minds on that later.
-Alex
On 3/1/14 11:00 PM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
>On Sat, Mar 1, 2014 at 8:13 AM, Alex Harui <ah...@adobe.com> wrote:
>
>> OK. Do you think you can build a new example in MXML/AS/FXG? The
>> skin/view would simply choose a different FXG file for each state. In
>> theory you should be able to get a working SWF without any Falcon
>>changes,
>> then I can run that through FalconJX.
>>
>>
>Will do. Although, I am not yet clear how you want the classes to be
>organized. For ex., for the TextButton, the classes would be:
>
>TextButton.as (has the skin) -> TextButtonSkin.as (has references to) ->
>TextButtonUpState.fxg, TextButtonDownState.fxg and
>TextButtonOverState.fxg.
>
>On the JS side, it could either be:
>
>TextButton.js (has the skin) -> TextButtonSkin.js (has references to) ->
>TextButtonUpState.svg, TextButtonDownState.svg and
>TextButtonOverState.svg.
>
>(or)
>
>TextButton.js (has the skin) -> TextButtonSkin.js (has SVG drawing
>functions) -> drawUpState(), drawDownState() and drawOverState()
>
>Am I on the right track?
>
>Thanks,
>Om
>
>
>
>> Thanks,
>> -Alex
>>
>> On 3/1/14 12:01 AM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
>>
>> >So, if it were up to me, we'd start with a test case where an MXML or
>>AS
>> >
>> >> skin points to an fxg file for each state. The Falcon compiler
>>should
>> >> already generate the right thing for the AS side. Then, we have to
>> >>apply
>> >> a similar hook to the FXG compiler that we did to get JS output for
>> >> FalconJX and start coding up however we want the JS/SVG output to
>>look
>> >> like. It could call this Graphics component, but may not need to, it
>> >>may
>> >> just generate SVG or JS calls. But for sure, you're welcome to write
>> >>the
>> >> Graphics class for both AS and JS and teach BarChart to use it.
>>We'll
>> >> need that no matter what.
>> >>
>> >
>> >I will get working on the Graphics class then. Will try to push
>>something
>> >soon.
>> >
>> >
>> >>
>> >> Anyway, if this plan is acceptable to you, what I'd prefer to do is
>> >>this:
>> >> I would apply the hooks to the FXG compiler and get it to output
>> >> "something". I'd point you to the change list so you can see what
>>files
>> >> need to be modified. Then you can try your hand at modifying those
>>Java
>> >> source files to get whatever output you want. You really don't have
>>to
>> >> know much about compilation, you are basically taking a tree
>>structure
>> >>and
>> >> converting it to some textual representation. Then we don't have to
>>do
>> >>as
>> >> much coordination between the two of us.
>> >>
>> >
>> >This sounds good to me. Please go ahead, add the hooks and let me
>>know!
>> >
>> >Thanks,
>> >Om
>>
>>
Re: [FlexJS] Building SVG skins from existing Spark component skins
Posted by OmPrakash Muppirala <bi...@gmail.com>.
On Sat, Mar 1, 2014 at 8:13 AM, Alex Harui <ah...@adobe.com> wrote:
> OK. Do you think you can build a new example in MXML/AS/FXG? The
> skin/view would simply choose a different FXG file for each state. In
> theory you should be able to get a working SWF without any Falcon changes,
> then I can run that through FalconJX.
>
>
Will do. Although, I am not yet clear how you want the classes to be
organized. For ex., for the TextButton, the classes would be:
TextButton.as (has the skin) -> TextButtonSkin.as (has references to) ->
TextButtonUpState.fxg, TextButtonDownState.fxg and
TextButtonOverState.fxg.
On the JS side, it could either be:
TextButton.js (has the skin) -> TextButtonSkin.js (has references to) ->
TextButtonUpState.svg, TextButtonDownState.svg and TextButtonOverState.svg.
(or)
TextButton.js (has the skin) -> TextButtonSkin.js (has SVG drawing
functions) -> drawUpState(), drawDownState() and drawOverState()
Am I on the right track?
Thanks,
Om
> Thanks,
> -Alex
>
> On 3/1/14 12:01 AM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
>
> >So, if it were up to me, we'd start with a test case where an MXML or AS
> >
> >> skin points to an fxg file for each state. The Falcon compiler should
> >> already generate the right thing for the AS side. Then, we have to
> >>apply
> >> a similar hook to the FXG compiler that we did to get JS output for
> >> FalconJX and start coding up however we want the JS/SVG output to look
> >> like. It could call this Graphics component, but may not need to, it
> >>may
> >> just generate SVG or JS calls. But for sure, you're welcome to write
> >>the
> >> Graphics class for both AS and JS and teach BarChart to use it. We'll
> >> need that no matter what.
> >>
> >
> >I will get working on the Graphics class then. Will try to push something
> >soon.
> >
> >
> >>
> >> Anyway, if this plan is acceptable to you, what I'd prefer to do is
> >>this:
> >> I would apply the hooks to the FXG compiler and get it to output
> >> "something". I'd point you to the change list so you can see what files
> >> need to be modified. Then you can try your hand at modifying those Java
> >> source files to get whatever output you want. You really don't have to
> >> know much about compilation, you are basically taking a tree structure
> >>and
> >> converting it to some textual representation. Then we don't have to do
> >>as
> >> much coordination between the two of us.
> >>
> >
> >This sounds good to me. Please go ahead, add the hooks and let me know!
> >
> >Thanks,
> >Om
>
>
Re: [FlexJS] Building SVG skins from existing Spark component skins
Posted by Alex Harui <ah...@adobe.com>.
OK. Do you think you can build a new example in MXML/AS/FXG? The
skin/view would simply choose a different FXG file for each state. In
theory you should be able to get a working SWF without any Falcon changes,
then I can run that through FalconJX.
Thanks,
-Alex
On 3/1/14 12:01 AM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
>So, if it were up to me, we'd start with a test case where an MXML or AS
>
>> skin points to an fxg file for each state. The Falcon compiler should
>> already generate the right thing for the AS side. Then, we have to
>>apply
>> a similar hook to the FXG compiler that we did to get JS output for
>> FalconJX and start coding up however we want the JS/SVG output to look
>> like. It could call this Graphics component, but may not need to, it
>>may
>> just generate SVG or JS calls. But for sure, you're welcome to write
>>the
>> Graphics class for both AS and JS and teach BarChart to use it. We'll
>> need that no matter what.
>>
>
>I will get working on the Graphics class then. Will try to push something
>soon.
>
>
>>
>> Anyway, if this plan is acceptable to you, what I'd prefer to do is
>>this:
>> I would apply the hooks to the FXG compiler and get it to output
>> "something". I'd point you to the change list so you can see what files
>> need to be modified. Then you can try your hand at modifying those Java
>> source files to get whatever output you want. You really don't have to
>> know much about compilation, you are basically taking a tree structure
>>and
>> converting it to some textual representation. Then we don't have to do
>>as
>> much coordination between the two of us.
>>
>
>This sounds good to me. Please go ahead, add the hooks and let me know!
>
>Thanks,
>Om
Re: [FlexJS] Building SVG skins from existing Spark component skins
Posted by OmPrakash Muppirala <bi...@gmail.com>.
So, if it were up to me, we'd start with a test case where an MXML or AS
> skin points to an fxg file for each state. The Falcon compiler should
> already generate the right thing for the AS side. Then, we have to apply
> a similar hook to the FXG compiler that we did to get JS output for
> FalconJX and start coding up however we want the JS/SVG output to look
> like. It could call this Graphics component, but may not need to, it may
> just generate SVG or JS calls. But for sure, you're welcome to write the
> Graphics class for both AS and JS and teach BarChart to use it. We'll
> need that no matter what.
>
I will get working on the Graphics class then. Will try to push something
soon.
>
> Anyway, if this plan is acceptable to you, what I'd prefer to do is this:
> I would apply the hooks to the FXG compiler and get it to output
> "something". I'd point you to the change list so you can see what files
> need to be modified. Then you can try your hand at modifying those Java
> source files to get whatever output you want. You really don't have to
> know much about compilation, you are basically taking a tree structure and
> converting it to some textual representation. Then we don't have to do as
> much coordination between the two of us.
>
This sounds good to me. Please go ahead, add the hooks and let me know!
Thanks,
Om
Re: [FlexJS] Building SVG skins from existing Spark component skins
Posted by Alex Harui <ah...@adobe.com>.
On 2/27/14 2:38 PM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
>On Thu, Feb 27, 2014 at 1:43 PM, Alex Harui <ah...@adobe.com> wrote:
>
>>
>>
>> On 2/27/14 11:53 AM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
>>
>> >
>> >Lets do it! Where do we start? I want to start building some JS side
>>SVG
>> >drawing APIs that I want to use with our Charts. The BarChart on the
>>JS
>> >side uses CSS to draw, which will become limited very soon. Having a
>> >robust JS based SVG drawing API will definitely help us in the long
>>run.
>> >Do you mind starting with an SVG parser in Falcon? We could just do
>>with
>> >the primitives for now: BitmapImage, Ellipse, Line, Path and Rect.
>>Then
>> >we can do the fills, strokes, gradients, etc. No need to deal with the
>> >whole SVG spec.
>>
>> An SVG Parser or emitter (output to SVG from the tree)? I'll try to
>>find
>> the relevant code this evening.
>>
>> I'm not sure what you mean by a drawing library. What pops into my mind
>> is a component called Graphics that creates a DOM element and draws
>>Flash
>> in AS and SVG in JS. You shouldn't need any compiler changes for that.
>>
>>
>The Graphics component is what I had in my mind. I thought you had
>mentioned some compiler changes in your last email. If that is not
>required, ignore what I said.
>
>If I understand the flow correctly, we will have an AS skin class that
>references an SVG document. The compiler parses the SVG document (like it
>does with FXG today) and will generate AS code that uses the Graphics
>component to draw stuff in Flash.
>
>On the JS side, we will have a similar Graphics component with same
>drawing
>API, except that the code draws SVG onto the HTML DOM.
>
>I believe you will figure out the SVG parser part. I can take care of
>creating the Graphics component on AS and JS versions.
>
>Am I on the right track?
Well, can we start with FXG first? Then I don't have to worry about how
to handle SVG on the AS side. IMO, the output doesn't have to be the same
for AS and JS. On the AS side the compiler already converts FXG to a
Sprite and Shapes and TextField. IMO, that is the most efficient
representation of FXG in terms of performance. Someday, I would have the
compiler convert SVG to Sprite and Shapes and TextField. I believe the
mapping isn't clean for all of SVG, but could be for many graphic
primitives.
The question is: what is the most efficient representation of FXG/SVG on
the JS side? Should it be SVG markup, or data structures that you can use
to call the createElementNS/setAttributes in a loop? Or just linear JS
code making those calls? We stopped using linear AS code for MXML codegen
because it is faster/smaller to generate a data structure and run a loop
where the JIT-compilation is re-used.
So, if it were up to me, we'd start with a test case where an MXML or AS
skin points to an fxg file for each state. The Falcon compiler should
already generate the right thing for the AS side. Then, we have to apply
a similar hook to the FXG compiler that we did to get JS output for
FalconJX and start coding up however we want the JS/SVG output to look
like. It could call this Graphics component, but may not need to, it may
just generate SVG or JS calls. But for sure, you're welcome to write the
Graphics class for both AS and JS and teach BarChart to use it. We'll
need that no matter what.
Anyway, if this plan is acceptable to you, what I'd prefer to do is this:
I would apply the hooks to the FXG compiler and get it to output
"something". I'd point you to the change list so you can see what files
need to be modified. Then you can try your hand at modifying those Java
source files to get whatever output you want. You really don't have to
know much about compilation, you are basically taking a tree structure and
converting it to some textual representation. Then we don't have to do as
much coordination between the two of us.
I'm working on getting mustella to run with FlexJS right now (and fixing
installer issues) but I'll stop to try to apply those hooks if you are
game.
-Alex
Re: [FlexJS] Building SVG skins from existing Spark component skins
Posted by OmPrakash Muppirala <bi...@gmail.com>.
On Thu, Feb 27, 2014 at 1:43 PM, Alex Harui <ah...@adobe.com> wrote:
>
>
> On 2/27/14 11:53 AM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
>
> >
> >Lets do it! Where do we start? I want to start building some JS side SVG
> >drawing APIs that I want to use with our Charts. The BarChart on the JS
> >side uses CSS to draw, which will become limited very soon. Having a
> >robust JS based SVG drawing API will definitely help us in the long run.
> >Do you mind starting with an SVG parser in Falcon? We could just do with
> >the primitives for now: BitmapImage, Ellipse, Line, Path and Rect. Then
> >we can do the fills, strokes, gradients, etc. No need to deal with the
> >whole SVG spec.
>
> An SVG Parser or emitter (output to SVG from the tree)? I'll try to find
> the relevant code this evening.
>
> I'm not sure what you mean by a drawing library. What pops into my mind
> is a component called Graphics that creates a DOM element and draws Flash
> in AS and SVG in JS. You shouldn't need any compiler changes for that.
>
>
The Graphics component is what I had in my mind. I thought you had
mentioned some compiler changes in your last email. If that is not
required, ignore what I said.
If I understand the flow correctly, we will have an AS skin class that
references an SVG document. The compiler parses the SVG document (like it
does with FXG today) and will generate AS code that uses the Graphics
component to draw stuff in Flash.
On the JS side, we will have a similar Graphics component with same drawing
API, except that the code draws SVG onto the HTML DOM.
I believe you will figure out the SVG parser part. I can take care of
creating the Graphics component on AS and JS versions.
Am I on the right track?
Thanks,
Om
> -Alex
>
>
Re: [FlexJS] Building SVG skins from existing Spark component skins
Posted by Alex Harui <ah...@adobe.com>.
On 2/27/14 11:53 AM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:
>
>Lets do it! Where do we start? I want to start building some JS side SVG
>drawing APIs that I want to use with our Charts. The BarChart on the JS
>side uses CSS to draw, which will become limited very soon. Having a
>robust JS based SVG drawing API will definitely help us in the long run.
>Do you mind starting with an SVG parser in Falcon? We could just do with
>the primitives for now: BitmapImage, Ellipse, Line, Path and Rect. Then
>we can do the fills, strokes, gradients, etc. No need to deal with the
>whole SVG spec.
An SVG Parser or emitter (output to SVG from the tree)? I'll try to find
the relevant code this evening.
I'm not sure what you mean by a drawing library. What pops into my mind
is a component called Graphics that creates a DOM element and draws Flash
in AS and SVG in JS. You shouldn't need any compiler changes for that.
-Alex
Re: [FlexJS] Building SVG skins from existing Spark component skins
Posted by OmPrakash Muppirala <bi...@gmail.com>.
On Thu, Feb 27, 2014 at 9:16 AM, Alex Harui <ah...@adobe.com> wrote:
> This is just my opinion, but I would not count on FXG being a feature of
> Adobe Creative Cloud forever.
Agreed. I share the same concern. And I dont think they will ever lose
the option of exporting to SVG.
> I anticipate that the AS side of FlexJS
> will have to do SVG->Sprite conversion someday.
>
I have been looking at some AS3 libraries that do this today [1] But if
you think doing this in the compiler makes more sense, I am all for it.
>
> I'm wondering if you are using XSLT for a reason other than not having the
> time to learn the FalconJX code base.
Yes, that is definitely a reason. I started out with the XSLT approach as
a POC to prove that it is possible have rendering fidelity match between
Flash and HTML5. Learning the ins and outs of FalconJX was not feasible in
the time I had at that time.
> The compiler already has a parse
> tree for FXG and a Spark Skin, so we could generate output from that tree
> in the same manner we output the ABC or JS code today. And then at least
> I'd have a better chance of understanding it.
Lets do it! Where do we start? I want to start building some JS side SVG
drawing APIs that I want to use with our Charts. The BarChart on the JS
side uses CSS to draw, which will become limited very soon. Having a
robust JS based SVG drawing API will definitely help us in the long run.
Do you mind starting with an SVG parser in Falcon? We could just do with
the primitives for now: BitmapImage, Ellipse, Line, Path and Rect. Then
we can do the fills, strokes, gradients, etc. No need to deal with the
whole SVG spec.
> And I'm wondering if the
> XSLT will become unwieldy as you try to deal with more complex skins.
>
The XSLT is already unweildly. Moreover, it is a pain to write and test.
>
> -Alex
>
>
[1] https://github.com/LucasLorentz/AS3SVGRenderer
> On 2/27/14 1:24 AM, "Carlos Rovira" <ca...@codeoscopic.com>
> wrote:
>
> > 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 <bi...@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/trans
> >>form
> >> [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.rovira@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
>
>
Re: [FlexJS] Building SVG skins from existing Spark component skins
Posted by Alex Harui <ah...@adobe.com>.
This is just my opinion, but I would not count on FXG being a feature of
Adobe Creative Cloud forever. I anticipate that the AS side of FlexJS
will have to do SVG->Sprite conversion someday.
I'm wondering if you are using XSLT for a reason other than not having the
time to learn the FalconJX code base. The compiler already has a parse
tree for FXG and a Spark Skin, so we could generate output from that tree
in the same manner we output the ABC or JS code today. And then at least
I'd have a better chance of understanding it. And I'm wondering if the
XSLT will become unwieldy as you try to deal with more complex skins.
-Alex
On 2/27/14 1:24 AM, "Carlos Rovira" <ca...@codeoscopic.com> wrote:
> 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 <bi...@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/trans
>>form
>> [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.rovira@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
Re: [FlexJS] Building SVG skins from existing Spark component skins
Posted by OmPrakash Muppirala <bi...@gmail.com>.
On Thu, Feb 27, 2014 at 1:24 AM, Carlos Rovira <
carlos.rovira@codeoscopic.com> wrote:
> 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.
>
Currently, embedded SVG gets rasterized during compilation process. If we
get a SVG -> Sprite subsystem working, we can definitely get rid if FXG and
just use SVG.
>
> 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 <bi...@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.rovira@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
>
Re: [FlexJS] Building SVG skins from existing Spark component skins
Posted by Carlos Rovira <ca...@codeoscopic.com>.
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 <bi...@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.rovira@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