Вертикальные вкладки в Flex 4

Question

Я хотел бы иметь вертикальные вкладки во Flex 4. Я начал реализовывать это, располагая вертикальный список вниз на одну сторону.При выборе списка я обновляю индекс выбора стека представлений.Это дает функциональность вертикальных вкладок.

Моя проблема - внешний вид.Как сделать так, чтобы список выглядел аналогично горизонтальной панели вкладок?Это случай переопределения скинов?

Я нашел этот пост:

Есть ли способ сделатьвертикальный?

, который реализует вертикальные вкладки.Моя проблема в том, что я не получаю текст на вкладке.Я думаю, проблема в том, что это было изначально написано для flex 2. Я использую flex 4 и пытаюсь поместить этот компонент в

Любые указатели были бы хорошими.

Answer 1

Самое простое решение на http://blog.flexexamples.com/2009/02/13/creating-a-vertical-fxbuttonbar-control-in-flex-gumbo/

Если вы посмотрите на скин ButtonBar, вы увидите, что по умолчанию он использует специальный горизонтальный макет - ButtonBarHor horizontalLayout.В зависимости от ваших требований вы можете захотеть реализовать собственную вертикальную компоновку или просто использовать стандарт VerticalLayout.

Answer 2

Я все еще новичок во Flex, поэтому я подумал, что могу опубликовать свое решение для тех, кто сталкивается с такими же трудностями, как и я. Если есть более подходящие способы для того же решения, я с удовольствием приму советы!

После долгих исследований Skinclass от TabbedViewNavigator я решил создать свой собственный TabbedViewNavigator / SplitView. Чтобы помочь другим, кто ищет

Я создал одну панель в качестве основного контейнера, включающую две панели (mainViewContainer - состоящий из основного вида приложения, которое я кодирую, и вертикальную панель вкладок справа, и sideViewContainer - для чата, списка пользователей и списка инструментов, который должен открыть на TabClick). Я изменил размеры панелей в зависимости от текущего состояния.

        <!-- Container -->
    <s:Panel id="mainViewContainer" width="100%" height="100%"     skinClass="skins.testPanelSkin" >
        <s:HGroup height="100%" width="100%">   

        <!-- mainPanel -->
        <s:Panel id="mainPanel"
                 height="100%"
                 left="0"
                 right="0"
                 width = "{mainViewContainer.width*1.0}"
                 width.sidePanelMaximized="{mainViewContainer.width*0.8}"
                 width.sidePanelMinimized="{mainViewContainer.width*1.0}" 
                 skinClass="skins.testPanelSkin" >

            <s:TabBar id="tabBar" rotation="90" right="0" click="onTab_clickHandler(event)"
                      height="100%" requireSelection="false">   <!--  itemRendererFunction="selectRenderer" -->         
                <s:dataProvider>
                    <s:ArrayCollection>
                                <s:tab id="chat" text="Chat" />
                                <s:tab id="userlist" text="Userlist" />
                                <s:tab id="tools" text="Tools" />
                    </s:ArrayCollection>
                </s:dataProvider>
            </s:TabBar>     
            <s:Rect width="{tabBar.height}" height="100%" right="0">
                <s:stroke>
                    <s:SolidColorStroke color="red" />
                </s:stroke>
            </s:Rect>   
            <s:Label id="stateChangeBtn"
                      width="150"
                      height="150"
                      text="{currentState}"
                      horizontalCenter="1"
                      verticalCenter="1"
                      color="red" />    
        </s:Panel>

        <!-- Container as sidepanel -->
        <s:Panel id="sidePanelContainer" 
                 height="100%" 
                 left="0"
                 right="0"
                 width="100%"
                 width.sidePanelMinimized="{0}"
                 width.sidePanelMaximized="100%">
            <s:HGroup width="100%">     
                <s:Panel left="0" right="0" id="sidebarViewStackPanel" height="100%" width="100%"
                         skinClass="skins.testPanelSkin"
                         width.sidePanelMaximized="100%"
                         width.sidePanelMinimized="{0}" >
                    <s:ViewNavigator id="sidebarViewNav"  firstView="views.chatView" width="100%" height="100%"              
                                     defaultPushTransition="{null}" defaultPopTransition="{null}" />
                </s:Panel>          
            </s:HGroup>             
        </s:Panel>  
        </s:HGroup>
    </s:Panel>

Для поведения TabBar я написал четыре обработчика:

            protected var viewDict : Dictionary = new Dictionary();

            protected function view1_creationCompleteHandler(event : FlexEvent) : void {
            // TODO Auto-generated method stub
            viewDict[0] =  views.chatView;
            viewDict[1] = views.userlistView;
            viewDict[2] = views.toolsView;          
        }

        protected function onTab_clickHandler(event : MouseEvent) : void {          
            if (event.target.hasOwnProperty("itemIndex") &&
                "sidePanelMaximized" === this.currentState &&
                tabBar.caretIndex === event.target.itemIndex)
            {
                sidebarViewNav.popView();
                this.currentState = "sidePanelMinimized";           
            } else {                    
                this.currentState="sidePanelMaximized";         
                sidebarViewNav.popView();
                sidebarViewNav.pushView(viewDict[event.target.itemIndex].valueOf());        
            }   
        }               

        protected function view1_stateChangeCompleteHandler(event:FlexEvent):void
        {
            // TODO Auto-generated method stub
            if (currentState === "sidePanelMinimized" ) {
                sidePanelContainer.visible=false;
                tabBar.selectedItem = -1;
            } else {
                sidePanelContainer.visible=true;
            }
        }

        protected function view1_currentStateChangeHandler(event:StateChangeEvent):void
        {
            // TODO Auto-generated method stub
            if (currentState == "sidePanelMaximized") {
                sidePanelContainer.visible=true;
            } else {
                sidePanelContainer.visible=false;
            } 
        }

И дал компоненту (MainView) следующие события:

    creationComplete="view1_creationCompleteHandler(event)"
    currentStateChange="view1_currentStateChangeHandler(event)"
    stateChangeComplete="view1_stateChangeCompleteHandler(event)"

Это решение может показаться немного перегруженным, но, как я уже сказал, я очень плохо знаком с Flex. Я надеюсь, что это полезно для некоторых людей:)

Answer 3

Используя ошибку лота, у меня есть следующее, которое работает:

<s:layout>
    <s:HorizontalLayout horizontalAlign="left" paddingLeft="10"/>
</s:layout>
<s:ButtonBar id="btnBar" horizontalCenter="0" verticalCenter="0">
    <s:layout>
        <s:VerticalLayout gap="-1"/>
    </s:layout>
    <s:dataProvider>
        <s:ArrayList source="[Red,Orange,Yellow]"/>
    </s:dataProvider>
</s:ButtonBar>

<mx:ViewStack id="vs" width="700" height="400" left="8" y="23" paddingTop="0">
    <s:NavigatorContent>
        <s:Label text="Red"/>
    </s:NavigatorContent>
    <s:NavigatorContent>
        <s:Label text="Orance"/>
    </s:NavigatorContent>
    <s:NavigatorContent>
        <s:Label text="Yellow"/>
    </s:NavigatorContent>
</mx:ViewStack>

Answer 4

Вы пробовали rotation=90? Конечно, с коррекцией координат - она ​​будет вращаться вокруг верхнего левого угла.