Flex: Changement de composants

Question

Bonjour, Je souhaite créer une page Web flexible. Fondamentalement, j'ai quelques menubaritems en haut et quand je clique sur l'une des listes déroulantes de la barre de menu, le composant se transformerait en une page avec un contenu différent.

Comment procéder?

Merci.

Answer 1

Semble à moi comme le composant exact que vous recherchez est le TabNavigator (Adobe docs).

C'est assez simple à utiliser. Chaque enfant du composant TabNavigator représente une page à onglet de contenu (notez que les enfants doivent être des conteneurs tels que Canvas ou VBox) et la propriété label de l'enfant est utilisée pour représenter l'étiquette sur l'onglet lui-même.

Un site web très simple à l'aide des onglets pourrait ressembler à:

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

Vous pouvez empiler autant que vous le souhaitez des composants de conteneur enfant dans le TabNavigator et leur contenu sera (par défaut) être chargé uniquement lorsque vous sélectionnez l'onglet approprié.

Si vous pouvez être un peu plus précis sur ce que vous essayez de construire, il y a probablement encore quelques astuces pour vous. Espérons que cela vous donne un début cependant. OK, si vous utilisez des menus déroulants à la place, c'est le même concept mais un peu plus de travail manuel est impliqué.

Le composant TabNavigator utilise un composant ViewStack (Adobe docs), qui est essentiellement une pile de pages de contenu, où un seul est représenté à la fois (déterminé par selectedIndex propriété de la pile), avec un composant TabBar pour contrôler l'indice sélectionné. Ce que vous voulez faire est toujours utiliser ce même ViewStack pour contenir toutes vos pages, mais vous voulez une sélection d'élément de menu déroulant pour changer l'index selected pour vous.

Un composant MenuBar (Adobe docs) fournit les éléments de liste déroulante générés à partir d'un fournisseur de données XMLListCollection. Pour gérer les sélections d'éléments, définissez un gestionnaire d'événements itemClick sur MenuBar et définissez la propriété selectedIndex de ViewStack en fonction de l'élément de menu sélectionné. Quelque chose comme ceci devrait vous donner un début, et j'espère que les commentaires aident à l'expliquer.

De là, vous pouvez ajouter des pages, des éléments MenuBar, etc.

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