examples/jewel/TourDeJewel/src/main/royale/TabBarPlayGround.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--

Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements.  See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License.  You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

-->
<c:ExampleAndSourceCodeTabbedSectionContent xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:j="library://ns.apache.org/royale/jewel" 
	xmlns:html="library://ns.apache.org/royale/html" 
	xmlns:js="library://ns.apache.org/royale/basic" 
	xmlns:c="components.*" sourceCodeUrl="TabBarPlayGround.mxml">
	
	<fx:Script>
		<![CDATA[
			import org.apache.royale.collections.ArrayList;

			import vos.TabBarButtonVO;
			import vos.TabBarButtonVO;

            private var _tabBarData:ArrayList = new ArrayList([
				new TabBarButtonVO("Tab 1", "tab1", MaterialIconType.ACCESSIBILITY),
				new TabBarButtonVO("Tab 2", "tab2", MaterialIconType.ACCESS_ALARMS),
				new TabBarButtonVO("Tab 3", "tab3", MaterialIconType.WALLPAPER),
				new TabBarButtonVO("Tab 4", "tab4", MaterialIconType.NATURE)
			]);

			[Bindable]
			public function get tabBarData():ArrayList
			{
				return _tabBarData;
			}
			public function set tabBarData(value:ArrayList):void
			{
				_tabBarData = value;
			}

			private function updateTabBarData():void
			{
				tabBarData = new ArrayList([
					new TabBarButtonVO("Other Tab 1", "tab1", MaterialIconType.MORE),
					new TabBarButtonVO("Other Tab 2", "tab2", MaterialIconType.PAGES),
					new TabBarButtonVO("Other Tab 3", "tab3", MaterialIconType.ZOOM_IN)
				]);
			}

			private var _tabBarDataOptional:ArrayList = new ArrayList([
					new TabBarButtonVO("Other Tab 1", "tab1", MaterialIconType.MORE),
					new TabBarButtonVO("Other Tab 2", "tab2", MaterialIconType.PAGES),
					new TabBarButtonVO("Other Tab 3", "tab3", MaterialIconType.ZOOM_IN)
				]);

			[Bindable]
			public function get tabBarDataOptional():ArrayList
			{
				return _tabBarDataOptional;
			}
            
			private var _scrolltabBarData:ArrayList = new ArrayList([
				new TabBarButtonVO("Tab One", "tabone", MaterialIconType.ACCESSIBILITY),
				new TabBarButtonVO("Tab Two", "tabtwo", MaterialIconType.ACCESS_ALARMS),
				new TabBarButtonVO("Tab Three", "tabthree", MaterialIconType.WALLPAPER),
				new TabBarButtonVO("Tab Four", "tabfour", MaterialIconType.NATURE),
				new TabBarButtonVO("Tab Five", "tabfive", MaterialIconType.ACCESSIBILITY),
				new TabBarButtonVO("Tab Six", "tabsix", MaterialIconType.ACCESS_ALARMS),
				new TabBarButtonVO("Tab Seven", "tabseven", MaterialIconType.WALLPAPER),
				new TabBarButtonVO("Tab Eight", "tabeight", MaterialIconType.NATURE),
				new TabBarButtonVO("Tab Nine", "tabnine", MaterialIconType.ACCESSIBILITY),
				new TabBarButtonVO("Tab Ten", "tabten", MaterialIconType.ACCESS_ALARMS),
				new TabBarButtonVO("Tab Eleven", "tabeleven", MaterialIconType.WALLPAPER),
				new TabBarButtonVO("Tab Twelve", "tabtwelve", MaterialIconType.NATURE),
			]);

			[Bindable]
			public function get scrolltabBarData():ArrayList
			{
				return _scrolltabBarData;
			}
            
			private var _tabBarDataSample:ArrayList = new ArrayList([
				{label:"Films", content:"films"},
				{label:"Collection", content:"collection"},
				{label:"Favorites", content:"favorites"}
			]);
			
			[Bindable]
			public function get tabBarDataSample():ArrayList
			{
				return _tabBarDataSample;
			}
			
			private var _tabBarData2:ArrayList = new ArrayList([
				new TabBarButtonVO("Home", "tab1", MaterialIconType.HOME),
				new TabBarButtonVO("About Us", "tab2", MaterialIconType.CROP_SQUARE),
				new TabBarButtonVO("Contact", "tab3", MaterialIconType.CONTACT_MAIL)
			]);

			[Bindable]
			public function get tabBarData2():ArrayList
			{
				return _tabBarData2;
			}
		]]>
	</fx:Script>

	<fx:Style>
		.side-tab-content {
			background-color: #f6f6f6;
		}
	</fx:Style>

	<c:beads>
		<js:ContainerDataBinding/>
	</c:beads>

	<j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
		<j:beads>
			<js:Paddings paddingTop="0" paddingLeft="50" paddingRight="50" paddingBottom="50"/>
		</j:beads>

		<c:ExampleHeader title="Jewel TabBar">
			<c:description>
				<![CDATA[<b>Jewel TabBar</b> can be used with content organized in a <b>TabBarContent</b>. <b>AssignTabContent</b> is a convenient bead to bind a <b>TabBar</b> with the corresponding <b>TabBarContent</b>. Last examples shows horizontal scrolling when options overflow the available width.]]>
			</c:description>
		</c:ExampleHeader>

		<j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
			<j:Card>
				<j:CardHeader>
					<html:H3 text="AssignTabContent bead and Vertical Renderer"/>
				</j:CardHeader>
				<j:CardPrimaryContent>
					<j:Label multiline="true">
						<j:html><![CDATA[This <b>TabBar</b> has a custom <b>ItemRenderer</b> composed by an icon and a label with vertical layout (check <b>TabBarVerticalIconItemRenderer.mxml</b>). Indicator is restricted to content. The <b>ItemRenderer</b> is asigned vía className <b>tabBarVerticalIconItemRenderer</b>. Since the layout is simple we can use <b>AssignTabContent</b> bead for the content. This way the bead wire change events to sync selection to content.]]></j:html>
					</j:Label>

					<j:TabBar width="100%" className="tabBarVerticalIconItemRenderer"
							dataProvider="{tabBarData}">
						<j:beads>
							<j:AssignTabContent selectedContentProperty="hash">
								<j:content>
									<j:TabBarContent localId="tabcontent">
										<j:SectionContent name="tab1">
											<j:Label text="Tab 1"/>
										</j:SectionContent>
										<j:SectionContent name="tab2">
											<j:Label text="Tab 2"/>
										</j:SectionContent>
										<j:SectionContent name="tab3">
											<j:Label text="Tab 3"/>
										</j:SectionContent>
										<j:SectionContent name="tab4">
											<j:Label text="Tab 4"/>
										</j:SectionContent>
									</j:TabBarContent>
								</j:content>
							</j:AssignTabContent>
						</j:beads>
					</j:TabBar>
				</j:CardPrimaryContent>
				<j:CardActions itemsVerticalAlign="itemsRight">
					<j:Button click="updateTabBarData()" text="change all data" emphasis="primary"/>
				</j:CardActions>
			</j:Card>
		</j:GridCell>

		<j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
			<j:Card>
				<j:CardHeader>
					<html:H3 text="Horizontal Renderer"/>
				</j:CardHeader>
				<j:CardPrimaryContent>
					<j:Label multiline="true">
						<j:html><![CDATA[This <b>TabBar</b> has a custom <b>ItemRenderer</b> composed by an icon and a label with horizontal layout (check <b>TabBarHorizontalIconItemRenderer.mxml</b>). Indicator is not restricted to content. This example doesn't use <b>AssignTabContent</b>. We use binding to TabBarContent's <b>selectedContent</b> to sync cotent.]]></j:html>
					</j:Label>
					<j:TabBar localId="tabbar2" selectedIndex="2" className="tabBarHorizontalIconItemRenderer">
						<j:beads>
							<js:ConstantBinding sourcePropertyName="tabBarData" destinationPropertyName="dataProvider"/>
						</j:beads>
					</j:TabBar>
					<j:TabBarContent selectedContent="{(tabbar2.selectedItem as TabBarButtonVO).hash}">
						<j:SectionContent name="tab1">
							<j:Label text="Tab 1"/>
						</j:SectionContent>
						<j:SectionContent name="tab2">
							<j:Label text="Tab 2"/>
						</j:SectionContent>
						<j:SectionContent name="tab3">
							<j:Label text="Tab 3"/>
						</j:SectionContent>
						<j:SectionContent name="tab4">
							<j:Label text="Tab 4"/>
						</j:SectionContent>
					</j:TabBarContent>
				</j:CardPrimaryContent>
			</j:Card>
		</j:GridCell>
		
		<j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
			<j:Card>
				<j:CardHeader>
					<html:H3 text="rowHeight"/>
				</j:CardHeader>
				<j:CardPrimaryContent>
					<j:Label multiline="true">
						<j:html><![CDATA[This <b>TabBar</b> has an <b>ItemRenderer</b> composed by just a label (default <b>TabBarButtonItemRenderer</b>). By default <b>TabBar</b> doesn't set <i>rowHeight</i>. This one set it to 60, so all renders has that height.]]></j:html>
					</j:Label>
					<j:TabBar>
						<j:beads>
							<j:TabBarPresentationModel rowHeight="60"/>
							<js:ConstantBinding sourcePropertyName="tabBarDataSample"
												destinationPropertyName="dataProvider"/>
							<j:AssignTabContent selectedContentProperty="content">
								<j:content>
									<j:TabBarContent>
										<j:SectionContent name="films">
											<j:Label text="Films Content Goes Here"/>
										</j:SectionContent>
										<j:SectionContent name="collection">
											<j:Label text="Collection Content Goes Here"/>
										</j:SectionContent>
										<j:SectionContent name="favorites">
											<j:Label text="Favorites Content Goes Here"/>
										</j:SectionContent>
									</j:TabBarContent>
								</j:content>
							</j:AssignTabContent>
						</j:beads>
					</j:TabBar>
				</j:CardPrimaryContent>
			</j:Card>
		</j:GridCell>
		
		<j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
			<j:Card>
				<j:CardHeader>
					<html:H3 text="Vertical Layout with content aside."/>
				</j:CardHeader>
				<j:CardPrimaryContent width="100%" height="100%">
					<j:Label multiline="true">
						<j:html><![CDATA[This <b>TabBar</b> layout the buttons vertically. We add the tab content to the right side. Also use restricted indicator to content.]]></j:html>
					</j:Label>
					<j:HGroup gap="3" width="100%" height="100%">
						<j:TabBar className="tabBarVerticalIconItemRenderer" dataProvider="{tabBarDataOptional}"
							localId="vtabbar" selectedIndex="2">
							<j:beads>
								<j:VerticalLayout/>
							</j:beads>
						</j:TabBar>
						<j:TabBarContent selectedContent="{(vtabbar.selectedItem as TabBarButtonVO).hash}"
							className="side-tab-content" width="100%" height="100%">
							<j:beads>
								<js:Paddings padding="15"/>
							</j:beads>
							<j:SectionContent name="tab1" width="100%" height="200">
								<j:Label text="Tab Content 1"/>
							</j:SectionContent>
							<j:SectionContent name="tab2" width="100%" height="200">
								<j:Label text="Tab Content 2"/>
							</j:SectionContent>
							<j:SectionContent name="tab3" width="100%" height="200">
								<j:Label text="Tab Content 3"/>
							</j:SectionContent>
							<j:SectionContent name="tab4" width="100%" height="200">
								<j:Label text="Tab Content 4"/>
							</j:SectionContent>
						</j:TabBarContent>
					</j:HGroup>
				</j:CardPrimaryContent>
			</j:Card>
		</j:GridCell>

		<j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
			<j:Card>
				<j:CardHeader>
					<html:H3 text="Vertical Layout (right align) with content aside."/>
				</j:CardHeader>
				<j:CardPrimaryContent width="100%" height="100%">
					<j:Label multiline="true">
						<j:html><![CDATA[This <b>TabBar</b> layout the buttons vertically. We add the tab content to the right side. This time we sync selection and content through TabBar's <b>change</b> event. We need to set initial TabBarContent section through <b>selectedContent</b>. We use TabBarPresentationModel to <b>Align</b> the items content to the <b>right</b>.]]></j:html>
					</j:Label>
					<j:HGroup gap="3" width="100%" height="100%">
						<j:TabBar dataProvider="{tabBarData2}" width="145"
							change="tbc.selectedContent = event.target.selectedItem.hash">
							<j:beads>
								<j:VerticalLayout/>
								<j:TabBarPresentationModel align="right"/>
							</j:beads>
						</j:TabBar>
						<j:TabBarContent localId="tbc" className="side-tab-content" width="100%" height="100%" selectedContent="tab1">
							<j:beads>
								<js:Paddings padding="15"/>
							</j:beads>
							<j:SectionContent name="tab1" width="100%" height="200">
								<j:Label text="Tab Content 1"/>
							</j:SectionContent>
							<j:SectionContent name="tab2" width="100%" height="200">
								<j:Label text="Tab Content 2"/>
							</j:SectionContent>
							<j:SectionContent name="tab3" width="100%" height="200">
								<j:Label text="Tab Content 3"/>
							</j:SectionContent>
						</j:TabBarContent>
					</j:HGroup>
				</j:CardPrimaryContent>
			</j:Card>
		</j:GridCell>
		
		<j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
			<j:Card>
				<j:CardHeader>
					<html:H3 text="Horizontal Scroll"/>
				</j:CardHeader>
				<j:CardPrimaryContent>
					<j:Label multiline="true">
						<j:html><![CDATA[Use <b>ScrollingViewport</b> bead to add scrolling. This <b>TabBar</b> has twelve tabs. Notice that "width" needs to be configured to 100% to make scroll work.]]></j:html>
					</j:Label>
					<j:TabBar width="100%" localId="tabbar3" dataProvider="{scrolltabBarData}">
						<j:beads>
							<j:ScrollingViewport/>
							<j:AssignTabContent selectedContentProperty="hash">
								<j:content>
									<j:TabBarContent selectedContent="{(tabbar3.selectedItem as TabBarButtonVO).hash}">
										<j:SectionContent name="tabone">
											<j:Label text="Tab One!"/>
										</j:SectionContent>
										<j:SectionContent name="tabtwo">
											<j:Label text="Tab Two!"/>
										</j:SectionContent>
										<j:SectionContent name="tabthree">
											<j:Label text="Tab Three!"/>
										</j:SectionContent>
										<j:SectionContent name="tabfour">
											<j:Label text="Tab Four!"/>
										</j:SectionContent>
										<j:SectionContent name="tabfive">
											<j:Label text="Tab Five!"/>
										</j:SectionContent>
										<j:SectionContent name="tabsix">
											<j:Label text="Tab Six!"/>
										</j:SectionContent>
										<j:SectionContent name="tabseven">
											<j:Label text="Tab Seven!"/>
										</j:SectionContent>
										<j:SectionContent name="tabeight">
											<j:Label text="Tab Eight!"/>
										</j:SectionContent>
										<j:SectionContent name="tabnine">
											<j:Label text="Tab Nine!"/>
										</j:SectionContent>
										<j:SectionContent name="tabten">
											<j:Label text="Tab Ten!"/>
										</j:SectionContent>
										<j:SectionContent name="tabeleven">
											<j:Label text="Tab Eleven!"/>
										</j:SectionContent>
										<j:SectionContent name="tabtwelve">
											<j:Label text="Tab Twelve!"/>
										</j:SectionContent>
									</j:TabBarContent>
								</j:content>
							</j:AssignTabContent>
						</j:beads>
					</j:TabBar>
				</j:CardPrimaryContent>
			</j:Card>
		</j:GridCell>

		<j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
			<j:Card>
				<j:CardHeader>
					<html:H3 text="Mobile Layout (Bottom position and indicator on top)"/>
				</j:CardHeader>
				<j:CardPrimaryContent itemsHorizontalAlign="itemsCenter">
					<j:Label multiline="true" width="100%">
						<j:html><![CDATA[This <b>TabBar</b> is positioned below the content and the indicator is configured to be on top.]]></j:html>
					</j:Label>

					<j:VGroup width="400" height="600">
						<j:TabBarContent selectedContent="{(bottomTabbar.selectedItem as TabBarButtonVO).hash}"
							className="side-tab-content" width="100%" height="100%">
							<j:beads>
								<js:Paddings padding="15"/>
							</j:beads>
							<j:SectionContent name="tab1" width="100%" height="200">
								<j:Label text="Tab Content 1"/>
							</j:SectionContent>
							<j:SectionContent name="tab2" width="100%" height="200">
								<j:Label text="Tab Content 2"/>
							</j:SectionContent>
							<j:SectionContent name="tab3" width="100%" height="200">
								<j:Label text="Tab Content 3"/>
							</j:SectionContent>
							<j:SectionContent name="tab4" width="100%" height="200">
								<j:Label text="Tab Content 4"/>
							</j:SectionContent>
						</j:TabBarContent>
						<j:TabBar localId="bottomTabbar" selectedIndex="1" width="100%"
							className="tabBarVerticalIconItemRenderer" dataProvider="{tabBarData}">
							<j:beads>
								<j:TabBarPresentationModel indicatorToOppositeSide="true"/>
							</j:beads>
						</j:TabBar>
					</j:VGroup>

				</j:CardPrimaryContent>
			</j:Card>
		</j:GridCell>

	</j:Grid>

</c:ExampleAndSourceCodeTabbedSectionContent>