Flex: замена компонентов

Question

Привет, я хочу создать гибкую веб-страницу.По сути, у меня есть некоторые элементы меню в верхней части, и когда я нажимаю на одно из раскрывающихся меню на панели меню, компонент изменится на страницу с другим содержанием.

Как мне поступить?

Спасибо.

Answer 1

Звучит так, как будто вам нужен именно тот компонент, который TabNavigator ( Adobe docs ).

Это довольно просто в использовании. Каждый дочерний элемент компонента TabNavigator представляет вкладку содержимого (обратите внимание, что дочерние элементы должны быть контейнерами, такими как Canvas или VBox), а свойство дочернего элемента label используется для представления метки на Сама вкладка.

Очень простой веб-сайт с использованием вкладок может выглядеть примерно так:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" width="100%" height="100%" pageTitle="My Website" />
    <mx:TabNavigator width="100%" height="100%">
        <mx:VBox width="100%" height="100%" label="Standard Page">
            <mx:Label text="Standard Page Title" fontWeight="bold"/>
            <mx:Text  width="100%" height="100%"
                text="Here is some page content." />
        </mx:VBox>

        <mx:VBox width="100%" height="100%" label="Image Gallery">
            <mx:Label text="Image Gallery Title" fontWeight="bold" />
            <mx:TileList width="100%" height="100%">
                <mx:Image source="my_image1.png" />
                <mx:Image source="my_image2.png" />
                <mx:Image source="my_image3.png" />
                <mx:Image source="my_image4.png" />
            </mx:TileList>
        </mx:VBox>
    </mx:TabNavigator>
</mx:Application>

Вы можете сложить столько дочерних контейнерных компонентов внутри TabNavigator, сколько захотите, и их содержимое будет (по умолчанию) загружаться только при выборе соответствующей вкладки.

Если вы можете немного подробнее рассказать о том, что вы пытаетесь построить, возможно, есть еще несколько хитростей для вас. Надеюсь, это даст вам начало.

РЕДАКТИРОВАТЬ: Хорошо, если вы вместо этого используете выпадающие меню, это та же концепция, но немного больше ручного труда.

Компонент TabNavigator использует компонент ViewStack ( Adobe docs ), который в основном представляет собой стек страниц содержимого, на которых отображается только одна страница (определяется свойством стека selectedIndex) ), с компонентом TabBar для управления выбранным индексом. Что вы хотите сделать, так это использовать тот же ViewStack для хранения всех ваших страниц, но вы хотите, чтобы выбор выпадающего меню изменил selectedIndex для вас.

Компонент MenuBar ( Adobe docs ) предоставляет элементы раскрывающегося списка, сгенерированные поставщиком данных XMLListCollection. Для обработки выбора элементов установите обработчик события itemClick на MenuBar и установите свойство selectedIndex в ViewStack в зависимости от того, какой элемент меню был выбран.

Нечто подобное должно дать вам начало, и, надеюсь, комментарии помогут объяснить это. Оттуда вы можете добавлять страницы, пункты меню и т. Д.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Script>
        <![CDATA[
            import mx.events.MenuEvent;

            /**
             * Handle the selection of a menu item.
             */
            private function menuItemClickHandler(event:MenuEvent):void
            {
                // Get the submenuitem node that was clicked
                var selection:XML = XML(event.item);
                // Depending on the label of the item that was clicked,
                // modify the selectedIndex property of the content ViewStack
                switch(selection.@label.toString())
                {
                case "Page 1":
                    pageStack.selectedIndex = 0;
                    break;

                case "Page 2":
                    pageStack.selectedIndex = 1;
                    break
                }
            }
        ]]>
    </mx:Script>

    <!-- Data provider collection for the menu bar -->
    <mx:XMLListCollection id="menuXLC">
        <mx:source>
            <mx:XMLList>
                <menuitem label="Content">
                    <submenuitem label="Page 1" />
                    <submenuitem label="Page 2" />
                </menuitem>
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <!-- MenuBar to provide dropdown items -->
    <mx:MenuBar dataProvider="{menuXLC}" width="100%"
        labelField="@label"
        itemClick="menuItemClickHandler(event)" />

    <!-- ViewStack containing the various content pages -->
    <mx:ViewStack id="pageStack" width="100%" height="100%">
        <!-- Each of these child components represents a separate page of content.
             You should really define them in separate components. -->
        <mx:VBox id="contentPageOne" label="First Page" width="100%" height="100%">
            <mx:Label text="First Page Title" />
            <mx:Text text="First Page content." />
        </mx:VBox>

        <mx:VBox id="contentPageTwo" label="Second Page" width="100%" height="100%">
            <mx:Label text="Second Page Title" />
            <mx:Text text="Second Page content." />
        </mx:VBox>
    </mx:ViewStack>
</mx:Application>