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, как вам нравится, и их содержимое будет (по умолчанию) загружается только тогда, когда вы выбираете соответствующую вкладку.

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

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

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

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