Как я могу редактировать объекты в пользовательских компонентах AS3, используя MXML? - PullRequest
Новая
       39

Как я могу редактировать объекты в пользовательских компонентах AS3, используя MXML?

0 голосов
/ 27 апреля 2011

Я пишу приложение Flex, используя Flash Builder 4, и у меня возникли небольшие проблемы с объектом AS3. По сути, это BorderContainer с несколькими кнопками и изображениями и программной логикой, которая определяет, как они взаимодействуют друг с другом и с базой данных.

Что я хочу сделать, это настроить макет / стиль внутренних компонентов с помощью MXML и CSS. Я могу настроить унаследованные объекты, но не те, которые я определил ...

Например, в моем MXML. Я могу изменить (унаследованную) borderstroke переменную myContainer следующим образом; 

<IE:MyContainer>
    <IE:borderStroke>
        <s:LinearGradientStroke weight="10" rotation="270">
            <s:GradientEntry color="0xF655E5"/>
            <s:GradientEntry color="0x6600CC"/>
        </s:LinearGradientStroke>
    </IE:borderStroke>
</IE:MyContainer>

Однако я не могу отредактировать переменную nextButton (которая имеет тип Button) следующим образом; 

<IE:MyContainer>
    <IE:nextButton width="100" height="30" left="10%" bottom="10%"/>
</IE:MyContainer>

Если я попытаюсь, я получу ошибку компиляции «Не удалось разрешить реализацию компонента».

Что мне нужно сделать, чтобы сделать эту работу ?!

Заранее спасибо, Айдан

EDIT: Вот основной метод MyContainer (фактически называется InvestigativeEnvironment). Вызов defineTestInvestigativeEnvironment () - это то, что заботится о настройке объектов и слушателей действий и тому подобного. Я хочу изменить макет и внешний вид этих визуальных компонентов в MXML (nextButton, prevButton, toolbox, displayArea). Я хочу, чтобы можно было устанавливать их высоту, ширину, фон, x, y, горизонтальный центр и т. Д., Как и для кнопки, которую я добавляю в контейнер через MXML. 

public class InvestigativeEnvironment extends BorderContainer
    {
        private var toolbox:Toolbox;        
        private var bodySystem:BodySystem;      
        public var nextButton:Button;
        public var prevButton:Button;       

        private var displayArea:Group;
        private var image:Image;    
        private var toolDisplayArea:Group;

        public function InvestigativeEnvironment()
        {
            super();

            //create 'Next' button and event listener
            nextButton = new Button();
            nextButton.addEventListener(MouseEvent.CLICK, nextViewAngle);
            nextButton.label = "Next";
            this.addElement(nextButton);

            //create 'Prev' button and event listener
            prevButton = new Button();
            prevButton.addEventListener(MouseEvent.CLICK, prevViewAngle);
            prevButton.label = "Prev";
            this.addElement(prevButton);

            //define investigative environment by creating models.
            defineTestInvestigativeEnvironment();   

            //Instantiate the Group that contains the model image and tool overlays
            displayArea=new Group();

            //Instantiate the image that is used to display the model
            image = new Image();    
            image.source=bodySystem.getImage();
            image.horizontalCenter=0;
            image.verticalCenter=0;
            displayArea.addElement(image);

            //add toolOverlayContainer to the display area ABOVE the model image            
            toolDisplayArea = new Group();
            toolDisplayArea.verticalCenter=0;
            toolDisplayArea.horizontalCenter=0;
            displayArea.addElement(toolDisplayArea);

            this.addElement(displayArea);

            //add toolbox to display
            toolbox = new Toolbox(toolDisplayArea);
            toolbox.replaceTools(bodySystem.getToolGroup());
            this.addElement(toolbox);
        }

Ответы [ 2 ]

0 голосов
/ 28 апреля 2011

Оказывается, я не совсем задавал правильный вопрос.Я хотел отредактировать компоненты, но в частности их макет и атрибуты типа цвета.

Что мне нужно сделать, это установить идентификатор компонентов, а затем настроить таргетинг на них с помощью CSS.

Для моего nextButton я добавляю идентификатор следующим образом: 

nextButton.id="nextButton";

Затем я могу разместить его в файле MXML (или во внешней таблице стилей) следующим образом: 

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace IE "InvestigativeEnvironment.*";

    IE|InvestigativeEnvironment s|Button {
        chromeColor: #336666;           
    }

    #nextButton {
        bottom: 100;
        right: 5;
    }       
</fx:Style>
0 голосов
/ 28 апреля 2011

Я не могу понять, в чем ваша проблема с кнопкой редактирования, извините за это.Но у меня есть много уведомлений о том, какой InvestigativeEnvironment код вы ввели.

Во-первых, вы не следовали жизненному циклу компонентов Flex (см. здесь или здесь ).Поэтому в вашем коде вы должны добавлять и настраивать дочерние элементы в методе createChildren().

Но в любом случае вы не можете использовать свой контейнер для добавления дочерних элементов как с MXML, так и из кода.Если добавление кода пользовательских компонентов будет выполняться первым MXML (в вашей реализации с добавлением их в конструктор это так), все теги MXML просто удаляют все добавленное вами содержимое (в любом случае результат будет непредсказуемым).В другом случае будет очень трудно контролировать порядок экземпляров.

Я могу предложить вам объявить ваши nextButton и т. Д. Как части обложки и выполнить их позиционирование в оболочке.Таким образом, эти внутренние элементы управления будут частью границы, и вы сможете без проблем добавлять дочерние элементы MXML.И вы можете настроить их в методе partAdded().

...