Mailing-List: contact dev-help@flex.apache.org; run by ezmlm
Precedence: bulk
Reply-To: dev@flex.apache.org
Received-SPF: pass (nike.apache.org: domain of omuppi1@gmail.com designates
 209.85.128.180 as permitted sender)
MIME-Version: 1.0
Sender: omuppi1@gmail.com
In-Reply-To: <CF336A4B.19F78%aharui@adobe.com>
References: 
 <CACK5iZcGYw3d5oPhdXXkj+MOCPrM3oOupS9XNBnPY1h6KBUpWA@mail.gmail.com>
 <CF32D3AC.19E9D%aharui@adobe.com>
 <CACK5iZdaVDp8TOXGbfKAejszrmHDq7B0nvqk8po6biM6ZfqUZA@mail.gmail.com>
 <CF32E9A8.19EE6%aharui@adobe.com>
 <CACK5iZc6-4gpJhLb_nB5s8QfWnVePE9_t60f7Rei9cqN5zgbvg@mail.gmail.com>
 <CF336A4B.19F78%aharui@adobe.com>
From: OmPrakash Muppirala <bigosmallm@gmail.com>
Date: Wed, 26 Feb 2014 16:03:49 -0800
Message-ID: 
 <CACK5iZejaF=0hXrHMRFMX-kQAa1KBrqvw+rC_CEM04cHsgz4KQ@mail.gmail.com>
Subject: Re: [FlexJS] SVG based TextButton and example checked in
To: "dev@flex.apache.org" <dev@flex.apache.org>
Content-Type: multipart/alternative; boundary=001a1136b38e1f3cfa04f3581094

--001a1136b38e1f3cfa04f3581094
Content-Type: text/plain; charset=ISO-8859-1

On Wed, Feb 26, 2014 at 9:57 AM, Alex Harui <aharui@adobe.com> wrote:

> Sorry, wasn't clear.
>
> Thanks for reminding me that FXG is a class linked into the SWF and
> referenced as a class by the AS code.  On the JS side, do we want that FXG
> class to be a "class" (its own JS file that loads or has SVG data in it)?
> Or is more "conversion" needed.
>
>
I have been thinking of a spark skin (ex. spark button skin) having an
equivalent SVG document on the JS side.  The button class itself will have
an equivalent in js.

Example:
TextButton.as + TextButtonSkin.mxml === TextButton.js + TextButtonSkin.svg

The TextButtonSkin.mxml links all the required FXGs to make up the various
button states' visuals.  It also has the code required to switch the
states, etc.  The same thing happens in TextButtonSkin.svg - it contains
all the SVG elements and the JS code (or SMIL)

I suppose this is quite similar to the spark architecture.


> On the JS side, is there is a way to embed SVG data in an HTML page?
>

There are multiple ways to this -
* inline svg code in HTML,
* use <embed> element (what I have used in this case)
* use <object> element
* use <img> element

<embed> seems to be safe to use across most modern browsers, whereas
<object> has browser support issues + security restrictions.  <img> element
is useless to us because it causes the SVG to lose its interactivity.

I suppose we can also directly emebed SVG in HTML, it seems safe to use
these days [1]

[1] http://caniuse.com/#feat=svg-html5


>
> -Alex
>
> On 2/26/14 12:59 AM, "OmPrakash Muppirala" <bigosmallm@gmail.com> wrote:
>
> >On Wed, Feb 26, 2014 at 12:48 AM, Alex Harui <aharui@adobe.com> wrote:
> >
> >>
> >>
> >> On 2/26/14 12:42 AM, "OmPrakash Muppirala" <bigosmallm@gmail.com>
> wrote:
> >>
> >> >>3. Falcon should be able to compile FXG now, but I think it will use
> >> >>Spark
> >> >> components like Group.  The compiler either needs to output different
> >> >> primitives or we need to fake up lighter weight Spark components.
> >>I'd
> >> >> strongly prefer the first option.
> >> >>
> >> >
> >> >I think I understand.  Can we break this up into a very simple use case
> >> >and
> >> >see which direction we want to go?  I may need a bit of hand holding on
> >> >this one.
> >>
> >> Was FXG always embedded?
> >>
> >>
> >You can also instantiate it just like a component in MXML.  If you embed
> >it, the compiler seems to rasterize it and you will lose the scaling, etc.
> >properties that makes vectors so attractive.
> >
> >
> >> Is there a way to "embed" SVG?
> >>
> >
> >Yes, just like an image:
> >
> >[Embed(source="logo.svg")]
> >[Bindable]
> >public var imgCls:Class;
> >
> >Adobe had deprecated it.  But, at Apache Flex, we un-deprecated it a while
> >ago.
> >
> >Thanks,
> >Om
> >
> >
> >>
> >> Anyway, yes a simple test case would help us find the desired workflow
> >>and
> >> fix what is needed.
> >>
> >> -Alex
> >>
> >>
>
>

--001a1136b38e1f3cfa04f3581094--