Встраивание документа FXG по имени переменной во Flex - PullRequest
Новая
       21

Встраивание документа FXG по имени переменной во Flex

1 голос
/ 23 ноября 2011

Я пытался заставить FXG работать в моем приложении Flex, оно работает и хорошо отрисовывается, но я пытаюсь сделать что-то вроде галереи с данными об изображениях в базе данных. Раньше я мог использовать <s:Image source=/path/{variable_name}>, но теперь я должен импортировать файлы FXG и больше не могу использовать <s:Image>. Здесь я могу отобразить статическое изображение FXG: 

<?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>

Попытка сделать <fxg:{data.picturename} /> взрывов.

1 Ответ

0 голосов
/ 23 ноября 2011

Нельзя импортировать и использовать элементы FXG отдельно, поскольку они не являются отображаемыми объектами.Мое взятие состояло в том, чтобы обернуть их в контейнер UIComponent.Этот класс, вероятно, закончится как часть набора мобильных компонентов Flextras в нашем следующем обновлении в начале следующего года, скорее всего: 

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;
            }
        }

    }
}

Вы можете использовать его примерно так: 

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