On Mon, Mar 25, 2013 at 12:26 PM, Alex Harui <aha...@adobe.com> 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" <bigosma...@gmail.com> wrote: > > > On Mon, Mar 25, 2013 at 11:55 AM, Erik de Bruin <e...@ixsoftware.nl> > 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 <bigosma...@gmail.com> 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 <e...@ixsoftware.nl> > >> 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 > >