Flex 4の垂直タブ

Question

Flex 4では垂直タブを使用したいと思っています。リスト選択では、ビュースタックの選択インデックスを更新しています。これにより、垂直タブの機能が得られます。

私の問題はルックアンドフィールです。水平タブバーと同様のルックアンドフィールを持つようにリストを取得するにはどうすればよいですか？スキンをオーバーライドするケースですか？

私はこの記事を見つけた：

Is there a way to make a <s:TabBar /> vertical?

垂直タブを実装していました。私の問題は、タブにテキストが表示されないということです。私は問題は、これはもともとフレックス2のために書かれたことだと思います。私はフレックス4を使用していて、このコンポーネントを内部に入れようとしています

すべてのポインタが素晴らしいでしょう。

おかげ

Answer 1

http://blog.flexexamples.com/2009/02/13/creating-a-vertical-fxbuttonbar-control-in-flex-gumbo/

で

最もシンプルなソリューションあなたはのButtonBarスキンを見てみる場合は、デフォルトで、それは特別な水平レイアウトを使用していることがわかります - ButtonBarHorizo​​ntalLayoutを。あなたの要求に応じて、独自の垂直レイアウトを実装したり、標準のVerticalLayoutを使用したりすることもできます。

Answer 2

rotation=90を試しましたか？座標補正では、もちろん、左上隅を回って回転します。私の作品次の持っているバグ多くのリンクを使用して

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

は、私はまだFlexのに非常に新しいですので、私は、私が行ったように私は、同様の困難に直面して誰のための私の解決策を投稿するかもしれない、と思いました。同じソリューションのためのより良い方法があるなら、私は喜んでアドバイスを取るでしょう！

TabbedViewNavigatorのSkinclassに関する多くの研究の後、私は自分のTabbedViewNavigator/SplitViewを作ることにしました。私がコーディングしているアプリケーションのメインビューと右側の垂直TabBar、そしてチャットのsideViewContainerからなるmainViewContainer - 2つのパネルを含むメインコンテナとして1つのパネルを作成しました。ユーザーリストとツールリスト、TabClickで開く必要があります）。私は現在の状態に応じてパネルのサイズを変更しました。 TabBarのの行動については

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

、私は4つのハンドラ書いた：

  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)" 

を私が言ったように、私はフレックスにとって非常に新しいです。私はこれがいくつかの人に役立つことを願っています:)