You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by Om <bi...@gmail.com> on 2013/03/24 10:01:47 UTC
FXG -> SVG progress
On Fri, Mar 22, 2013 at 6:48 AM, Alex Harui <ah...@adobe.com> wrote:
>
>
>
> On 3/22/13 12:36 AM, "Erik de Bruin" <er...@ixsoftware.nl> wrote:
>
> > I think both the FlexJS as well as VanillaSDK frameworks can benefit
> > from this. So it should be available to both. I don't know much about
> > XSLT, but if it 'converts one into another', I think it should
> > ultimately go with that other thing that 'converts one into another',
> > FalconJx.
> >
> > But for now, as it is a work in progress, I think it's best place is
> > in ASJS, in the root, next to my 'publisher'. The publisher was also a
> > proof of concept, that has since been integrated into FalconJx.
> >
> > Clear as mud, right?
> >
> I hope to get a look at FalconJX shortly, but in theory, you haven't
> changed
> the FXG subcompiler and I think that's where this XSLT will eventually go.
>
>
I have checked in the first cut of the "FXG to SVG" XSLTfile here [1]
Here is a very simple Flex app with three Rectangles, one with a a
SolidColor fill and two with LinearGradient fills:
Flex version:
http://people.apache.org/~bigosmallm/fxg2svg/transform/SeeFXG.html (right
click for source)
Using the XSLT file, I transformed it into its equivalent
SVG version:
http://people.apache.org/~bigosmallm/fxg2svg/transform/SeeFXG.svg.html(right
click for source)
The SVG version uses <defs> and inline CSS to style the different elements.
To my naked eye, they both look pretty much the same. After this
experiment, I am halfway convinced that this is a viable approach to carry
over Flex's Spark based skins into the HTML5/SVG world.
I have identified a few problems that I will be tackling next:
1. States
2. Tackling the ILayoutElement interface usage (i.e. usage of left, right,
etc. constraints)
3. Transform Other Shapes, etc.
4. Get a Spark component's skin to work in HTML5/SVG
I have a few ideas that I will be trying out. If anyone wants to take a
peek at the XSLT file and modify it or has any ideas they would like to
see me implement, that would be great.
Thanks,
Om
[1]
https://git-wip-us.apache.org/repos/asf?p=flex-asjs.git;a=blob;f=fxg2svg/transform.xslt;h=df474c463f3fcc2701db063e691f3a4f29f217a6;hb=develop
Re: FXG -> SVG progress
Posted by Harbs <ha...@gmail.com>.
It looks good. (Better than on my laptop.) The gradients are very smooth.
On Mar 24, 2013, at 9:45 PM, Om wrote:
> Anyone tested the svg page on an iOS device?
Re: FXG -> SVG progress
Posted by Om <bi...@gmail.com>.
Harbs,
On Sun, Mar 24, 2013 at 5:25 AM, Harbs <ha...@gmail.com> wrote:
> FYI:
>
> The svg version does not render in Firefox (Mac 19.0.2).
>
>
Thanks for catching the issue with Firefox. Firefox needs the width/height
and the viewBox attributes to render the SVG. Whereas Chrome seems to make
stuff up and render things as needed. I have updated the XSLT to handle
this now.
Please check the page again:
http://people.apache.org/~bigosmallm/fxg2svg/transform/SeeFXG.svg.html<http://people.apache.org/~bigosmallm/fxg2svg/transform/SeeFXG.svg.html(right>
It should work now.
> In Safari and Chrome, the appearance is very close, but the svg version
> has a smoother gradient and the blue shape is missing the black stroke.
>
>
I dont see the difference in the gradient's smoothness, but your eyes maybe
better than mide. The blue rect does not have a black stroke, but I do see
why you think that is the case. There is a slight difference in the
rendering of the radiusX and radiusY between the renderers.
I tested on IE9 and the SVG looks fine over there as well. Android browser
looks fine as well.
Anyone tested the svg page on an iOS device?
Thanks,
Om
> On Mar 24, 2013, at 11:01 AM, Om wrote:
>
> > On Fri, Mar 22, 2013 at 6:48 AM, Alex Harui <ah...@adobe.com> wrote:
> >
> >>
> >>
> >>
> >> On 3/22/13 12:36 AM, "Erik de Bruin" <er...@ixsoftware.nl> wrote:
> >>
> >>> I think both the FlexJS as well as VanillaSDK frameworks can benefit
> >>> from this. So it should be available to both. I don't know much about
> >>> XSLT, but if it 'converts one into another', I think it should
> >>> ultimately go with that other thing that 'converts one into another',
> >>> FalconJx.
> >>>
> >>> But for now, as it is a work in progress, I think it's best place is
> >>> in ASJS, in the root, next to my 'publisher'. The publisher was also a
> >>> proof of concept, that has since been integrated into FalconJx.
> >>>
> >>> Clear as mud, right?
> >>>
> >> I hope to get a look at FalconJX shortly, but in theory, you haven't
> >> changed
> >> the FXG subcompiler and I think that's where this XSLT will eventually
> go.
> >>
> >>
> > I have checked in the first cut of the "FXG to SVG" XSLTfile here [1]
> >
> > Here is a very simple Flex app with three Rectangles, one with a a
> > SolidColor fill and two with LinearGradient fills:
> >
> > Flex version:
> > http://people.apache.org/~bigosmallm/fxg2svg/transform/SeeFXG.html(right
> > click for source)
> >
> > Using the XSLT file, I transformed it into its equivalent
> >
> > SVG version:
> >
> http://people.apache.org/~bigosmallm/fxg2svg/transform/SeeFXG.svg.html(right
> > click for source)
> >
> > The SVG version uses <defs> and inline CSS to style the different
> elements.
> >
> >
> > To my naked eye, they both look pretty much the same. After this
> > experiment, I am halfway convinced that this is a viable approach to
> carry
> > over Flex's Spark based skins into the HTML5/SVG world.
> >
> > I have identified a few problems that I will be tackling next:
> >
> > 1. States
> > 2. Tackling the ILayoutElement interface usage (i.e. usage of left,
> right,
> > etc. constraints)
> > 3. Transform Other Shapes, etc.
> > 4. Get a Spark component's skin to work in HTML5/SVG
> >
> > I have a few ideas that I will be trying out. If anyone wants to take a
> > peek at the XSLT file and modify it or has any ideas they would like to
> > see me implement, that would be great.
> >
> > Thanks,
> > Om
> >
> >
> > [1]
> >
> https://git-wip-us.apache.org/repos/asf?p=flex-asjs.git;a=blob;f=fxg2svg/transform.xslt;h=df474c463f3fcc2701db063e691f3a4f29f217a6;hb=develop
>
>
Re: FXG -> SVG progress
Posted by Harbs <ha...@gmail.com>.
FYI:
The svg version does not render in Firefox (Mac 19.0.2).
In Safari and Chrome, the appearance is very close, but the svg version has a smoother gradient and the blue shape is missing the black stroke.
On Mar 24, 2013, at 11:01 AM, Om wrote:
> On Fri, Mar 22, 2013 at 6:48 AM, Alex Harui <ah...@adobe.com> wrote:
>
>>
>>
>>
>> On 3/22/13 12:36 AM, "Erik de Bruin" <er...@ixsoftware.nl> wrote:
>>
>>> I think both the FlexJS as well as VanillaSDK frameworks can benefit
>>> from this. So it should be available to both. I don't know much about
>>> XSLT, but if it 'converts one into another', I think it should
>>> ultimately go with that other thing that 'converts one into another',
>>> FalconJx.
>>>
>>> But for now, as it is a work in progress, I think it's best place is
>>> in ASJS, in the root, next to my 'publisher'. The publisher was also a
>>> proof of concept, that has since been integrated into FalconJx.
>>>
>>> Clear as mud, right?
>>>
>> I hope to get a look at FalconJX shortly, but in theory, you haven't
>> changed
>> the FXG subcompiler and I think that's where this XSLT will eventually go.
>>
>>
> I have checked in the first cut of the "FXG to SVG" XSLTfile here [1]
>
> Here is a very simple Flex app with three Rectangles, one with a a
> SolidColor fill and two with LinearGradient fills:
>
> Flex version:
> http://people.apache.org/~bigosmallm/fxg2svg/transform/SeeFXG.html (right
> click for source)
>
> Using the XSLT file, I transformed it into its equivalent
>
> SVG version:
> http://people.apache.org/~bigosmallm/fxg2svg/transform/SeeFXG.svg.html(right
> click for source)
>
> The SVG version uses <defs> and inline CSS to style the different elements.
>
>
> To my naked eye, they both look pretty much the same. After this
> experiment, I am halfway convinced that this is a viable approach to carry
> over Flex's Spark based skins into the HTML5/SVG world.
>
> I have identified a few problems that I will be tackling next:
>
> 1. States
> 2. Tackling the ILayoutElement interface usage (i.e. usage of left, right,
> etc. constraints)
> 3. Transform Other Shapes, etc.
> 4. Get a Spark component's skin to work in HTML5/SVG
>
> I have a few ideas that I will be trying out. If anyone wants to take a
> peek at the XSLT file and modify it or has any ideas they would like to
> see me implement, that would be great.
>
> Thanks,
> Om
>
>
> [1]
> https://git-wip-us.apache.org/repos/asf?p=flex-asjs.git;a=blob;f=fxg2svg/transform.xslt;h=df474c463f3fcc2701db063e691f3a4f29f217a6;hb=develop