Flex 4 で垂直タブを使用したいと考えています。片側に垂直リストを配置することで、これを実装し始めました。リストの選択で、ビュー スタックの選択インデックスを更新しています。これにより、垂直タブの機能が提供されます。
私の問題は、ルックアンドフィールです。水平タブ バーと同様のルック アンド フィールのリストを取得するにはどうすればよいですか? スキンをオーバーライドする場合ですか？
この投稿を見つけました：
垂直タブを実装します。これに関する私の問題は、タブにテキストが表示されないことです。問題は、これがもともと flex 2 用に書かれたことだと思います。私は flex 4 を使用しており、このコンポーネントを
どんな指針も素晴らしいでしょう。
ありがとう
http://blog.flexexamples.com/2009/02/13/creating-a-vertical-fxbuttonbar-control-in-flex-gumbo/の最も簡単なソリューション
ButtonBar スキンを見ると、デフォルトで特別な水平レイアウト (ButtonBarHorizontalLayout) が使用されていることがわかります。必要に応じて、独自の垂直レイアウトを実装するか、標準の VerticalLayout を使用することができます。
私はまだFlexに慣れていないので、私と同じような問題に直面している人のために私のソリューションを投稿するかもしれないと思いました. 同じ解決策のより良い方法があれば、喜んでアドバイスをいたします!
TabbedViewNavigator の Skinclass について多くの調査を行った後、独自の TabbedViewNavigator/SplitView を作成することにしました。探している他の人を助けるために
2 つのパネルを含むメイン コンテナーとして 1 つのパネルを作成しました (mainViewContainer - コーディングしているアプリケーションのメイン ビューと右側の垂直 TabBar で構成され、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 の動作のために、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)"
このソリューションは少しオーバーロードされているように見えるかもしれませんが、前述したように、私は Flex を初めて使用します。これが一部の人々に役立つことを願っています:)
bug a lot's link を使用すると、次のように機能します。
<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>
試しましたrotation=90か？もちろん、座標補正を使用すると、左上隅を中心に回転します。