On Mon, Mar 25, 2013 at 12:26 PM, Alex Harui <[email protected]> wrote:
> Om, can you give an example?
>
> IMO, there is a difference between MXML Graphics and FXG. To me, FXG is
> stuff in an FXG file exported from several Adobe design tools. The
> internal
> pieces are not manipulated at run time. Today, FXG assets are compiled
> into
> Sprites and other SWF primitives.
>
You are right, I am mixing my terms FXG and MXMLG when I speak. My
workflow when working with FXG is more like this [1] Which really is just
changing the namespace from FXG namespace to Spark namespace. Which is why
the confusion, I guess. But to make it clear, I am less worried about
about bringing FXG documents as graphic primitives into the HTML5/JS space.
That would be nice, but not worth much.
Here is a concrete example
from \frameworks\projects\spark\src\spark\skins\spark\ButtonSkin.mxml
<snip>
<!-- layer 1: shadow -->
<!--- @private -->
<s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1"
radiusX="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x000000"
color.down="0xFFFFFF"
alpha="0.01"
alpha.down="0" />
<s:GradientEntry color="0x000000"
color.down="0xFFFFFF"
alpha="0.07"
alpha.down="0.5" />
</s:LinearGradient>
</s:fill>
</s:Rect>
</snip>
This specifies an FXG Rect element with the attribute radiusX. So far so
good. But the left, right, bottom and top are not part of the FXG spec [2]
They are implemented as part of the ILayoutElement that one of the
ancestors of s:Rect i.e. GraphicElement class.
The way I am approaching is to make it a combination of SVG and CSS. This
means that I can translate FXG's @radiusX into SVG's @rx. And I can
translate MXMLG's @top into style="position:relative; top=-1"
Is this the kind of example you wanted? I can go into more detail on my
approach if you want. Let me know.
Thanks,
Om
[1]
http://help.adobe.com/en_US/flex/using/WSda78ed3a750d6b8f26c150d412357de3591-8000.html#WSDAD87261-09E9-4091-8169-F2758607F125
[2] http://sourceforge.net/adobe/flexsdk/wiki/FXG%202.0%20Specification/
>
> MXML Graphics in a skin are generally there for manipulation. The
> top-level
> tag is some component class. I think in FlexJS, I would suggest just
> writing components for Rect, Path, etc, so they can also be manipulated at
> runtime.
>
>
> On 3/25/13 12:15 PM, "Om" <[email protected]> wrote:
>
> > On Mon, Mar 25, 2013 at 11:55 AM, Erik de Bruin <[email protected]>
> wrote:
> >
> >> Om,
> >>
> >> 1) the wiki is mostly current, but as a work in progress: if it
> >> doesn't work, ask and we will fix ;-)
> >>
> >> 2) CSS resulting from...? I'm not familiar with FXG etc., so my
> >> questions are bound to be naive as well, as you'll notice. Basically
> >> we have access to whatever the compiler (Falcon-main, if you will) has
> >> access to, but some thing might be easier than others. Mike S. is our
> >> wizard, he'll know what to do if we can't figure it out.
> >>
> >
> > Just to be clear, for all practical purposes, when I say FXG, I really
> mean
> > MXML. This is because, the Flex implementation of FXG ensures that FXG
> > elements can be pluggable inline into any MXML component. So, if we are
> to
> > support MXML, then we must support FXG.
> >
> > In what I am doing currently, I am actually processing an MXML file,
> ignore
> > things that I dont care about (like fx:Script, fx:Metadata, and any
> > non-visual component)
> >
> > It just happens that for Spark components, the FXG elements appear only
> in
> > their Spark skins. This makes my job easier because if I target only the
> > spark skins, I wont have to deal with a lot of other MXML functional
> (i.e.
> > non view) elements.
> >
> >
> >>
> >> 3) Ah, there is the CSS, I guess (fxg -> svg + css). The AS code will
> >> be cross-compiled to AS (weird, I know) or any form of JS we chose,
> >> most likely 'goog' JS, as it will have to be compatible with FlexJS
> >> and the VanillaSDK. Due to the way FalconJx is set up, it will be easy
> >> to add FXG specific JS parsing, if needed.
> >>
> >
> > What if I want to handcode some javascript? For example, if I want to
> > support the current 'states' paradigm used in spark skins, I need to
> write
> > some javascript to make it a reusable component. I am not sure if this
> is
> > the right approach, though. What do you guys think?
> >
> >
> >>
> >> 4) Sounds like and excellent starting point... however, you'll
> >> probably have to tweak your local SDK 'a bit' to get both the Flex and
> >> JS side working. Or should be start one of those much rumored
> >> 'shared' feature branches of the SDK?
> >>
> >
> > What kind of tweaking do you mean? Actually, I dont understand anything
> > you just said. Please explain like I am 5 years old :-)
> >
> >
> >>
> >> I love how everything seems to be converging and it really feels like
> >> Flex -> HTML5/JS is doable!
> >>
> >
> > Cautious optimism abounds!
> >
> >
> >>
> >> EdB
> >>
> >>
> >>
> >> On Mon, Mar 25, 2013 at 7:21 PM, Om <[email protected]> wrote:
> >>> Erik,
> >>>
> >>> I am planning to get FalconJX working on my machine soon. Before I
> start
> >>> digging into it,
> >>>
> >>> 1. Are these wiki pages current?
> >>>
> >>>
> >>
>
> https://cwiki.apache.org/confluence/display/FLEX/AS+to+JS+-+the+%27goog%27+Wa
> >>
> y
> >>>
> >>> https://cwiki.apache.org/confluence/display/FLEX/FalconJx+Prototype
> >>>
> >>> 2. Do you have any thoughts on how we want to handle the resulting
> CSS?
> >>> Inlining everything or have it as separate files?
> >>>
> >>> 3. My approach would take in a spark skin file and convert the fxg
> >>> elements into svg+css. There is going to some AS code that needs to be
> >>> converted JS. I believe your approach already handles this right?
> >>>
> >>> 4. I see that the VanillaSDK supports the Button component in HTML5.
> >>> Maybe that is where I should start and get my code working there?
> >>>
> >>> Sorry if I am asking naive questions, but I am looking for some
> guidance
> >> on
> >>> how to get my work integrated into FalconJx (or FalconJS)
> >>>
> >>> Thanks,
> >>> Om
> >>>
> >>> On Mon, Mar 25, 2013 at 8:45 AM, Erik de Bruin <[email protected]>
> >> wrote:
> >>>
> >>>> Hi,
> >>>>
> >>>> Just 'checking in': FalconJx can now compile the FlexJSTest_again
> >>>> example from the command line, using these arguments:
> >>>>
> >>>>
> >>>>
> >>
> +env.PLAYERGLOBAL_HOME=/Users/erik/Documents/ApacheFlex/dependencies/PlayerGl
> >> obal/player
> >>>> +playerglobal.version=11.1
> >>>> -load-config="/Applications/Adobe Flash Builder
> >>>> 4.7/sdks/4.9.1/frameworks/flex-config.xml"
> >>>>
> >>>>
> >>
> -library-path+=/Users/erik/Documents/ApacheFlex/git/flex-asjs/frameworks/as/l
> >> ibs/FlexJSUI.swc
> >>>> -js-output-type=FLEXJS
> >>>> -output=/Users/erik/Desktop/FlexJS/fromEclipse/FlexJSTest.js
> >>>>
> >>>>
> >>
> /Users/erik/Documents/ApacheFlex/git/flex-asjs/examples/FlexJSTest_again/src/
> >> FlexJSTest.mxml
> >>>>
> >>>> Well, not exactly those, please change the paths to fit your local
> >>>> environment ;-)
> >>>>
> >>>> Next up:
> >>>> - support for publishing with the GCC and associated tricks (SourceMap
> >>>> etc.)
> >>>> - full FlexJS type AS -> JS support (the current implementation is
> >>>> custom tailored to the FlexJSTest_Again example code)
> >>>>
> >>>> Have fun!
> >>>>
> >>>> EdB
> >>>>
> >>>>
> >>>>
> >>>> --
> >>>> Ix Multimedia Software
> >>>>
> >>>> Jan Luykenstraat 27
> >>>> 3521 VB Utrecht
> >>>>
> >>>> T. 06-51952295
> >>>> I. www.ixsoftware.nl
> >>>>
> >>
> >>
> >>
> >> --
> >> Ix Multimedia Software
> >>
> >> Jan Luykenstraat 27
> >> 3521 VB Utrecht
> >>
> >> T. 06-51952295
> >> I. www.ixsoftware.nl
> >>
>
> --
> Alex Harui
> Flex SDK Team
> Adobe Systems, Inc.
> http://blogs.adobe.com/aharui
>
>
