apache-flexflex4.5flex-mobileflex4.6fxg

Using FXG graphic in a Flex mobile app works with MXML, but not with ActionScript


I have read the Adobe's docs Using FXG and Embedding application assets, but can only embed the FXG through MXML -

enter image description here

MyStars.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    firstView="views.Home">
</s:ViewNavigatorApplication>

Home.mxml (works okay, when embedding FXG through MXML):

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:comps="assets.*"
        title="Home">

    <comps:Star />
</s:View>

Star.fxg (located in src/assets/Star.fxg):

<?xml version='1.0' encoding='UTF-8'?>
<fxg:Graphic xmlns:fxg="http://ns.adobe.com/fxg/2008" version="2">    
    <fxg:Path x="9.399" y="10.049" data="M 82.016 78.257 L 51.895 69.533 L 27.617 89.351 L 26.621 58.058 L 0.231 41.132 L 29.749 30.52 L 37.714 0.241 L 56.944 24.978 L 88.261 23.181 L 70.631 49.083 Z">
        <fxg:fill>
            <fxg:SolidColor color="#FFFFFF"/>
        </fxg:fill>
        <fxg:stroke>
            <fxg:SolidColorStroke 
                caps="none" 
                color="#4769C4" 
                joints="miter" 
                miterLimit="4" 
                weight="20"/>
        </fxg:stroke>
    </fxg:Path>
</fxg:Graphic>

When I however try to instansiate the FXG graphic through ActionScript (still in the same Flex mobile project), I get the compile error:

enter image description here

Call to a possibly undefined method Star

Home.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:comps="assets.*"
        title="Home">

    <fx:Script>
        <![CDATA[
            import spark.core.SpriteVisualElement;

            private static const STAR:SpriteVisualElement = new Star();
        ]]>
    </fx:Script>  

<s:BitmapImage source="{STAR}" />
</s:View>

I've also tried import comps; and/or new comps.Star();

When I move the FXG file to src/ and use xmlns:comps="*" everything works.


Solution

  • Import Star in ActionScript, which based on your code I assume will be something like this:

    import assets.Star
    private static const STAR:SpriteVisualElement = new Star();
    

    I suspect that will get rid of the compiler error. However, I'm not sure if you can use a SpriteVisualElement as the source for a BitmapImage. You may have to add the SpriteVisualElement as a child of the parent container and make use of the Flex Component Lifecycle to do this.

    I've done some experimenting around this, and just contributed this code to Apache Flex. The specific class is here. Although, for some reason I missed the fact that FXG elements could be SpriteVisualElements. Using my FXGImage class will not absolve you of the responsibility of having to size and position the component in ActionScript if you create it in ActionScript.