Embedding FXG document by variable name in Flex

Question

I've been trying to get FXG to work in my Flex app, it works and renders fine but what I'm trying to accomplish is a sort of a gallery with data about the images in a database. I used to be able to use <s:Image source=/path/{variable_name}> but now I have to import the FXG files and can't use <s:Image> anymore. Here I can display a static FXG image:

<?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:fxg="assets.fxg.*"
        tabBarVisible="false" title="{data.name}">

    <fxg:megapicture001 x="118" y="27" width="338" height="519"/>

    <s:Label x="78" y="43" text="{data.name}"/>

    <s:navigationContent>
        <s:Button icon="@Embed('assets/home.png')" click="navigator.popView()"/>
    </s:navigationContent>

</s:View>

Trying to do <fxg:{data.picturename} /> blows up.

Answer 1

You can't import and use the FXG elements stand alone since they aren't display objects. My take was to wrap them in a UIComponent container. This class will probably end up as part of the Flextras Mobile Component set in our next update sometime early next year most likely:

package com.dotcomit.utils
{
    import flash.display.DisplayObject;
    import flash.display.Sprite;

    import mx.core.UIComponent;

    public class FXGImage extends UIComponent
    {
        public function FXGImage(source:Class = null)
        {
            if(source){
                this.source = source;
            }
            super();
        }

        // this will tell us the class we want to use for the display
        // most likely an fxgClass
        private var _source : Class;
        protected var sourceChanged :Boolean = true;

        public function get source():Class
        {
            return _source;
        }

        public function set source(value:Class):void
        {
            _source = value;
            sourceChanged = true;
            this.commitProperties();
        }

        public var imageInstance : DisplayObject;

        // if you want to offset the position of the X and Y values in the 
        public var XOffset :int = 0;
        public var YOffset :int = 0;

        // if you want to offset the position of the X and Y values in the 
        public var heightOffset :int = 0;
        public var widthOffset :int = 0;


        override protected function createChildren():void{
            super.createChildren();
            if(this.sourceChanged){
                if(this.imageInstance){
                    this.removeChild(this.imageInstance);
                    this.imageInstance = null;
                }

                if(this.source){
                    this.imageInstance = new source();
                    this.imageInstance.x = 0 + XOffset;
                    this.imageInstance.y = 0 + YOffset;
                    this.addChild(this.imageInstance);
                }
                this.sourceChanged = false;

            }
        }

        override protected function commitProperties():void{
            super.commitProperties();
            if(this.sourceChanged){
                // if the source changed re-created it; which is done in createChildren();
                this.createChildren();
            }
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            if(unscaledHeight != 0){
                this.imageInstance.height = unscaledHeight + this.heightOffset;
            }
            if(unscaledWidth != 0){
                this.imageInstance.width = unscaledWidth + this.widthOffset;
            }
        }

    }
}

You can use it something like this:

<utils:FXGImage id="fxgImage" source="assets.images.mainMenu.MainMenuBackground" height="100%" width="100%" />