examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml - royale-asjs - Git at Google

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

 -->
 <j:ApplicationResponsiveView xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:j="library://ns.apache.org/royale/jewel"
     xmlns:js="library://ns.apache.org/royale/basic"
     xmlns:html="library://ns.apache.org/royale/html"
     xmlns:models="models.*"
     xmlns:c="components.*"
     xmlns:local="*"
     initComplete="setNavSelection()">

     <fx:Script>
         <![CDATA[
             import org.apache.royale.jewel.supportClasses.ISelectableContent;
             import org.apache.royale.routing.RouteState;
             import org.apache.royale.utils.OSUtils;

             import vos.NavigationLinkVO;

             private var currentContent:ISelectableContent;
             private var currentNavOption:NavigationLinkVO;

             private function setNavSelection():void {
                 var routeState:RouteState = router.routeState;
                 var baseName:String = routeState.getBaseName();
                 if(baseName){
                     setNavFromHash(baseName);
                 } else {
                     goToHome();
                 }
             }

             private function setNavFromHash(hash:String):void{
                 var l:uint = mainNavigationModel.containerDrawerNavigation.length;
 				while(l--) {
 					currentNavOption = NavigationLinkVO(mainNavigationModel.containerDrawerNavigation.getItemAt(l));
 					if(currentNavOption.hash == hash){
                         containerNavigation.selectedItem = currentNavOption;
                         navigateTo();
                         return;
                     }
 				}

                 l = mainNavigationModel.controlsDrawerNavigation.length;
 				while(l--) {
 					currentNavOption = NavigationLinkVO(mainNavigationModel.controlsDrawerNavigation.getItemAt(l));
 					if(currentNavOption.hash == hash){
                         controlsNavigation.selectedItem = currentNavOption;
                         navigateTo();
                         return;
                     }
 				}

                 l = mainNavigationModel.collapsibleNavExample.length;
 				while(l--) {
 					currentNavOption = NavigationLinkVO(mainNavigationModel.collapsibleNavExample.getItemAt(l));
 					if(currentNavOption.hash == hash){
                         collapsibleNavigation.selectedItem = currentNavOption;
                         navigateTo();
                         return;
                     }
 				}
             }

             private function hashChanged():void{
                 if(currentNavOption.subMenu)
                     return;
                 setNavSelection();
             }

             private function navChangeHandler(event:Event):void
             {
                 currentNavOption = (event.target as Navigation).selectedItem as NavigationLinkVO;

                 router.routeState.title = currentNavOption.label;
                 router.routeState.path = currentNavOption.hash;
                 router.setState();

                 navigateTo();
             }

             private function navigateTo():void {
                 main.selectedContent = currentNavOption.hash;

                 if(!drawer.fixed)
                     drawer.close();
             }

             private function collapsibleChangeHandler(event:Event):void
             {
                 currentNavOption = (event.target as Navigation).selectedItem as NavigationLinkVO;
                 currentNavOption = currentNavOption.selectedChild;

                 router.routeState.title = currentNavOption.label;
                 router.routeState.path = currentNavOption.hash;
                 router.setState();

                 navigateTo();
             }

             private function toggleTopAppBarFixed():void
             {
                 topappbar.fixed = !topappbar.fixed;
                 main.hasTopAppBar = topappbar.fixed;
             }

             private function goToHome():void
             {
                 currentNavOption = new NavigationLinkVO("Welcome", "welcome_panel", null);
                 main.selectedContent = currentNavOption.hash;
             }

             [Bindable]
             public var badgeNum:int = 0;

             public function increaseBadge():void
             {
                 badge.text = ++badgeNum > 0 ? '' + badgeNum : '';
             }

             private var _listenToOrientation:Boolean = false;
             [Bindable]
             public function get listenToOrientation():Boolean
             {
                 return _listenToOrientation;
             }
 			public function set listenToOrientation(listen:Boolean):void
 			{
                 _listenToOrientation = listen;
                 if(_listenToOrientation)
                 {
 				    addEventListener("orientationChanged", notifyOrientation);
                 } else {
 				    removeEventListener("orientationChanged", notifyOrientation);
                 }
 			}
 			public function notifyOrientation(event:Event = null):void
 			{
 				if(bo.orientation == BrowserOrientation.PORTRAIT) {
 					orientation = BrowserOrientation.PORTRAIT;
                 } else if(bo.orientation == BrowserOrientation.LANDSCAPE) {
 					orientation = BrowserOrientation.LANDSCAPE;
                 }
 			}

             [Bindable]
             public var orientation:String = "No Orientation";
         ]]>
     </fx:Script>

     <j:model>
         <models:MainNavigationModel localId="mainNavigationModel"/>
     </j:model>

     <j:beads>
         <js:Router id="router" stateChange="hashChanged()" />
         <js:ContainerDataBinding/>
         <js:BrowserOrientation localId="bo"/>
 		<j:CleanValidationErrors/>
     </j:beads>

     <j:Drawer localId="drawer">
         <j:beads>
             <j:ResponsiveDrawer auto="true"/>
         </j:beads>
         <j:DrawerHeader>
             <j:ImageButton src="assets/apache-royale-jewel-logo-white.svg" height="140" click="goToHome()"/>
         </j:DrawerHeader>
         <j:DrawerContent>
             <j:Navigation localId="containerNavigation" change="navChangeHandler(event)"
                 className="navIconLinkItemRenderer">
                 <j:beads>
                     <js:ConstantBinding sourceID="mainNavigationModel" sourcePropertyName="containerDrawerNavigation" destinationPropertyName="dataProvider"/>
                     <j:NavigationActionNotifier/>
                 </j:beads>
             </j:Navigation>
             <j:Divider/>
             <j:Navigation localId="collapsibleNavigation" change="collapsibleChangeHandler(event)"
                 className="navSectionItemRenderer">
                 <j:beads>
                     <js:ConstantBinding sourceID="mainNavigationModel" sourcePropertyName="collapsibleNavExample" destinationPropertyName="dataProvider"/>
                     <j:NavigationActionNotifier/>
                 </j:beads>
             </j:Navigation>
             <j:Divider/>
             <j:Navigation localId="controlsNavigation" change="navChangeHandler(event)"
                 className="navIconLinkItemRenderer">
                 <j:beads>
                     <js:ConstantBinding sourceID="mainNavigationModel" sourcePropertyName="controlsDrawerNavigation" destinationPropertyName="dataProvider"/>
                     <j:NavigationActionNotifier/>
                 </j:beads>
             </j:Navigation>
         </j:DrawerContent>

         <j:DrawerFooter>
             <j:BarRow>
                 <j:BarSection>
                     <j:IconButton>
                         <j:icon>
                             <js:FontIcon text="{MaterialIconType.FEEDBACK}" material="true"/>
                         </j:icon>
                     </j:IconButton>
                 </j:BarSection>
             </j:BarRow>
         </j:DrawerFooter>

     </j:Drawer>

     <j:FooterBar localId="footerbar" fixed="true" hasDrawer="{drawer.fixed &amp;&amp; drawer.isOpen}">
         <j:BarRow>
             <j:BarSection>
                 <j:IconButton click="increaseBadge()">
                     <j:beads>
                         <j:Badge localId="badge" overlap="true"/>
                     </j:beads>
                     <j:icon>
                         <js:FontIcon text="{MaterialIconType.ACCOUNT_BALANCE}" material="true"/>
                     </j:icon>
                 </j:IconButton>
                 <j:IconButton click="popup.open = !popup.open">
                     <j:beads>
                         <j:Badge text="5" emphasis="secondary" subindex="true" overlap="true"/>
                     </j:beads>
                     <j:icon>
                         <js:FontIcon text="{MaterialIconType.DATA_USAGE}" material="true"/>
                     </j:icon>
                 </j:IconButton>
                 <j:PopUp localId="popup" closePopUp="popupFormContent.formValidator.removeAllErrorTips()">
                     <c:FormExample localId="popupFormContent" label="Form example in a PopUp from FooterBar" width="615" height="392"/>
                 </j:PopUp>
             </j:BarSection>
             <j:BarSection itemsHorizontalAlign="itemsCenter">
                 <html:H3 text="{orientation}" />
             </j:BarSection>
             <j:BarSection itemsHorizontalAlign="itemsRight">
                 <j:IconButton>
                     <j:beads>
                         <j:Badge text="27" emphasis="primary" preindex="true" overlap="true"/>
                     </j:beads>
                     <j:icon>
                         <js:FontIcon text="{MaterialIconType.ADD_ALARM}" material="true"/>
                     </j:icon>
                 </j:IconButton>
                 <j:IconButton>
                     <j:beads>
                         <j:Badge text="209" emphasis="emphasized" subindex="true" preindex="true" overlap="true"/>
                     </j:beads>
                     <j:icon>
                         <js:FontIcon text="{MaterialIconType.ANNOUNCEMENT}" material="true"/>
                     </j:icon>
                 </j:IconButton>
             </j:BarSection>
         </j:BarRow>
     </j:FooterBar>

     <j:TopAppBar localId="topappbar" fixed="true" hasDrawer="{drawer.fixed &amp;&amp; drawer.isOpen}">
         <j:BarRow>
             <j:BarSection>
                 <j:IconButton click="drawer.isOpen ? drawer.close() : drawer.open()">
                     <j:beads>
                         <j:ResponsiveVisibility desktopVisible="false" wideScreenVisible="false" />
                     </j:beads>
                     <j:icon>
                         <js:FontIcon text="{MaterialIconType.MENU}" material="true"/>
                     </j:icon>
                 </j:IconButton>
                 <j:BarTitle text="Apache Royale Tour de Jewel"/>
             </j:BarSection>
             <j:BarSection itemsHorizontalAlign="itemsRight">
                 <j:ToggleButton click="listenToOrientation = !listenToOrientation" visible="{OSUtils.getOS() == OSUtils.ANDROID_OS || OSUtils.getOS() == OSUtils.IOS_OS}">
                     <j:beads>
                         <j:ToolTip toolTip="Detect Orientation"/>
                     </j:beads>
                     <j:icon>
                         <js:ToggleFontIcon text="{MaterialIconType.SCREEN_LOCK_ROTATION}" selectedText="{MaterialIconType.SCREEN_ROTATION}" material="true"/>
                     </j:icon>
                 </j:ToggleButton>
                 <j:ToggleButton click="footerbar.visible = !footerbar.visible">
                     <j:beads>
                         <j:ToolTip toolTip="show/hide FooterBar"/>
                     </j:beads>
                     <j:icon>
                         <js:ToggleFontIcon text="{MaterialIconType.VISIBILITY}" selectedText="{MaterialIconType.VISIBILITY_OFF}" material="true"/>
                     </j:icon>
                 </j:ToggleButton>
                 <j:ToggleButton click="toggleTopAppBarFixed()">
                     <j:beads>
                         <j:ToolTip toolTip="Lock(fix) or Unlock the TopBar"/>
                     </j:beads>
                     <j:icon>
                         <js:ToggleFontIcon text="{MaterialIconType.LOCK}" selectedText="{MaterialIconType.LOCK_OPEN}" material="true"/>
                     </j:icon>
                 </j:ToggleButton>
             </j:BarSection>
         </j:BarRow>
     </j:TopAppBar>

     <j:ApplicationMainContent localId="main" hasTopAppBar="true" hasFooterBar="true">
         <local:WelcomeSection name="welcome_panel"/>
         <local:AlertPlayGround name="alert_panel"/>
         <local:ButtonPlayGround name="button_panel"/>
         <local:ImagePlayGround name="image_panel"/>
         <local:NumericStepperPlayGround name="numericstepper_panel"/>
         <local:DateComponentsPlayGround name="datecomponents_panel"/>
         <local:ComboBoxPlayGround name="combobox_panel"/>
         <local:CheckBoxPlayGround name="checkbox_panel"/>
         <local:MiscelaneaPlayGound name="miscelanea_panel"/>
         <local:HeadingsAndText name="text_panel"/>
         <local:LabelPlayGround name="label_panel"/>
         <local:ListPlayGround name="list_panel"/>
         <local:RadioButtonPlayGround name="radiobutton_panel"/>
         <local:SliderPlayGround name="slider_panel"/>
         <local:TextInputPlayGround name="textinput_panel"/>
         <local:GridPlayGround name="grid_panel"/>
         <local:CardPlayGround name="card_panel"/>
         <local:ButtonBarPlayGround name="buttonbar_panel"/>
         <local:DataGridPlayGround name="datagrid_panel"/>
         <local:TablePlayGround name="tables_panel"/>
         <local:FormsValidationPlayGround name="form_validation_panel"/>
         <local:DropDownListPlayGround name="dropdownlist_panel"/>
         <local:SnackbarPlayGround name="snackbar_panel"/>
         <local:TabBarPlayGround name="tabbar_panel"/>
         <local:ViewStatesPlayGround name="viewstates_panel"/>
         <local:LayoutsPlayGround name="layouts_panel"/>
         <local:WizardPlayGround name="wizards_panel"/>
         <local:PopUpPlayGround name="popup_panel"/>
         <local:AdvancedListPlayGround name="advanced_list_panel"/>
         <local:VirtualListsPlayGround name="virtual_lists_panel"/>
     </j:ApplicationMainContent>

     <!-- <j:ResponsiveSizeMonitor/> -->
 </j:ApplicationResponsiveView>
	<?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.

	-->
	<j:ApplicationResponsiveView xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:j="library://ns.apache.org/royale/jewel"
	xmlns:js="library://ns.apache.org/royale/basic"
	xmlns:html="library://ns.apache.org/royale/html"
	xmlns:models="models.*"
	xmlns:c="components.*"
	xmlns:local="*"
	initComplete="setNavSelection()">

	<fx:Script>
	<![CDATA[
	import org.apache.royale.jewel.supportClasses.ISelectableContent;
	import org.apache.royale.routing.RouteState;
	import org.apache.royale.utils.OSUtils;

	import vos.NavigationLinkVO;

	private var currentContent:ISelectableContent;
	private var currentNavOption:NavigationLinkVO;

	private function setNavSelection():void {
	var routeState:RouteState = router.routeState;
	var baseName:String = routeState.getBaseName();
	if(baseName){
	setNavFromHash(baseName);
	} else {
	goToHome();
	}
	}

	private function setNavFromHash(hash:String):void{
	var l:uint = mainNavigationModel.containerDrawerNavigation.length;
	while(l--) {
	currentNavOption = NavigationLinkVO(mainNavigationModel.containerDrawerNavigation.getItemAt(l));
	if(currentNavOption.hash == hash){
	containerNavigation.selectedItem = currentNavOption;
	navigateTo();
	return;
	}
	}

	l = mainNavigationModel.controlsDrawerNavigation.length;
	while(l--) {
	currentNavOption = NavigationLinkVO(mainNavigationModel.controlsDrawerNavigation.getItemAt(l));
	if(currentNavOption.hash == hash){
	controlsNavigation.selectedItem = currentNavOption;
	navigateTo();
	return;
	}
	}

	l = mainNavigationModel.collapsibleNavExample.length;
	while(l--) {
	currentNavOption = NavigationLinkVO(mainNavigationModel.collapsibleNavExample.getItemAt(l));
	if(currentNavOption.hash == hash){
	collapsibleNavigation.selectedItem = currentNavOption;
	navigateTo();
	return;
	}
	}
	}

	private function hashChanged():void{
	if(currentNavOption.subMenu)
	return;
	setNavSelection();
	}

	private function navChangeHandler(event:Event):void
	{
	currentNavOption = (event.target as Navigation).selectedItem as NavigationLinkVO;

	router.routeState.title = currentNavOption.label;
	router.routeState.path = currentNavOption.hash;
	router.setState();

	navigateTo();
	}

	private function navigateTo():void {
	main.selectedContent = currentNavOption.hash;

	if(!drawer.fixed)
	drawer.close();
	}

	private function collapsibleChangeHandler(event:Event):void
	{
	currentNavOption = (event.target as Navigation).selectedItem as NavigationLinkVO;
	currentNavOption = currentNavOption.selectedChild;

	router.routeState.title = currentNavOption.label;
	router.routeState.path = currentNavOption.hash;
	router.setState();

	navigateTo();
	}

	private function toggleTopAppBarFixed():void
	{
	topappbar.fixed = !topappbar.fixed;
	main.hasTopAppBar = topappbar.fixed;
	}

	private function goToHome():void
	{
	currentNavOption = new NavigationLinkVO("Welcome", "welcome_panel", null);
	main.selectedContent = currentNavOption.hash;
	}

	[Bindable]
	public var badgeNum:int = 0;

	public function increaseBadge():void
	{
	badge.text = ++badgeNum > 0 ? '' + badgeNum : '';
	}

	private var _listenToOrientation:Boolean = false;
	[Bindable]
	public function get listenToOrientation():Boolean
	{
	return _listenToOrientation;
	}
	public function set listenToOrientation(listen:Boolean):void
	{
	_listenToOrientation = listen;
	if(_listenToOrientation)
	{
	addEventListener("orientationChanged", notifyOrientation);
	} else {
	removeEventListener("orientationChanged", notifyOrientation);
	}
	}
	public function notifyOrientation(event:Event = null):void
	{
	if(bo.orientation == BrowserOrientation.PORTRAIT) {
	orientation = BrowserOrientation.PORTRAIT;
	} else if(bo.orientation == BrowserOrientation.LANDSCAPE) {
	orientation = BrowserOrientation.LANDSCAPE;
	}
	}

	[Bindable]
	public var orientation:String = "No Orientation";
	]]>
	</fx:Script>

	<j:model>
	<models:MainNavigationModel localId="mainNavigationModel"/>
	</j:model>

	<j:beads>
	<js:Router id="router" stateChange="hashChanged()" />
	<js:ContainerDataBinding/>
	<js:BrowserOrientation localId="bo"/>
	<j:CleanValidationErrors/>
	</j:beads>

	<j:Drawer localId="drawer">
	<j:beads>
	<j:ResponsiveDrawer auto="true"/>
	</j:beads>
	<j:DrawerHeader>
	<j:ImageButton src="assets/apache-royale-jewel-logo-white.svg" height="140" click="goToHome()"/>
	</j:DrawerHeader>
	<j:DrawerContent>
	<j:Navigation localId="containerNavigation" change="navChangeHandler(event)"
	className="navIconLinkItemRenderer">
	<j:beads>
	<js:ConstantBinding sourceID="mainNavigationModel" sourcePropertyName="containerDrawerNavigation" destinationPropertyName="dataProvider"/>
	<j:NavigationActionNotifier/>
	</j:beads>
	</j:Navigation>
	<j:Divider/>
	<j:Navigation localId="collapsibleNavigation" change="collapsibleChangeHandler(event)"
	className="navSectionItemRenderer">
	<j:beads>
	<js:ConstantBinding sourceID="mainNavigationModel" sourcePropertyName="collapsibleNavExample" destinationPropertyName="dataProvider"/>
	<j:NavigationActionNotifier/>
	</j:beads>
	</j:Navigation>
	<j:Divider/>
	<j:Navigation localId="controlsNavigation" change="navChangeHandler(event)"
	className="navIconLinkItemRenderer">
	<j:beads>
	<js:ConstantBinding sourceID="mainNavigationModel" sourcePropertyName="controlsDrawerNavigation" destinationPropertyName="dataProvider"/>
	<j:NavigationActionNotifier/>
	</j:beads>
	</j:Navigation>
	</j:DrawerContent>

	<j:DrawerFooter>
	<j:BarRow>
	<j:BarSection>
	<j:IconButton>
	<j:icon>
	<js:FontIcon text="{MaterialIconType.FEEDBACK}" material="true"/>
	</j:icon>
	</j:IconButton>
	</j:BarSection>
	</j:BarRow>
	</j:DrawerFooter>

	</j:Drawer>

	<j:FooterBar localId="footerbar" fixed="true" hasDrawer="{drawer.fixed && drawer.isOpen}">
	<j:BarRow>
	<j:BarSection>
	<j:IconButton click="increaseBadge()">
	<j:beads>
	<j:Badge localId="badge" overlap="true"/>
	</j:beads>
	<j:icon>
	<js:FontIcon text="{MaterialIconType.ACCOUNT_BALANCE}" material="true"/>
	</j:icon>
	</j:IconButton>
	<j:IconButton click="popup.open = !popup.open">
	<j:beads>
	<j:Badge text="5" emphasis="secondary" subindex="true" overlap="true"/>
	</j:beads>
	<j:icon>
	<js:FontIcon text="{MaterialIconType.DATA_USAGE}" material="true"/>
	</j:icon>
	</j:IconButton>
	<j:PopUp localId="popup" closePopUp="popupFormContent.formValidator.removeAllErrorTips()">
	<c:FormExample localId="popupFormContent" label="Form example in a PopUp from FooterBar" width="615" height="392"/>
	</j:PopUp>
	</j:BarSection>
	<j:BarSection itemsHorizontalAlign="itemsCenter">
	<html:H3 text="{orientation}" />
	</j:BarSection>
	<j:BarSection itemsHorizontalAlign="itemsRight">
	<j:IconButton>
	<j:beads>
	<j:Badge text="27" emphasis="primary" preindex="true" overlap="true"/>
	</j:beads>
	<j:icon>
	<js:FontIcon text="{MaterialIconType.ADD_ALARM}" material="true"/>
	</j:icon>
	</j:IconButton>
	<j:IconButton>
	<j:beads>
	<j:Badge text="209" emphasis="emphasized" subindex="true" preindex="true" overlap="true"/>
	</j:beads>
	<j:icon>
	<js:FontIcon text="{MaterialIconType.ANNOUNCEMENT}" material="true"/>
	</j:icon>
	</j:IconButton>
	</j:BarSection>
	</j:BarRow>
	</j:FooterBar>

	<j:TopAppBar localId="topappbar" fixed="true" hasDrawer="{drawer.fixed && drawer.isOpen}">
	<j:BarRow>
	<j:BarSection>
	<j:IconButton click="drawer.isOpen ? drawer.close() : drawer.open()">
	<j:beads>
	<j:ResponsiveVisibility desktopVisible="false" wideScreenVisible="false" />
	</j:beads>
	<j:icon>
	<js:FontIcon text="{MaterialIconType.MENU}" material="true"/>
	</j:icon>
	</j:IconButton>
	<j:BarTitle text="Apache Royale Tour de Jewel"/>
	</j:BarSection>
	<j:BarSection itemsHorizontalAlign="itemsRight">
	<j:ToggleButton click="listenToOrientation = !listenToOrientation" visible="{OSUtils.getOS() == OSUtils.ANDROID_OS \|\| OSUtils.getOS() == OSUtils.IOS_OS}">
	<j:beads>
	<j:ToolTip toolTip="Detect Orientation"/>
	</j:beads>
	<j:icon>
	<js:ToggleFontIcon text="{MaterialIconType.SCREEN_LOCK_ROTATION}" selectedText="{MaterialIconType.SCREEN_ROTATION}" material="true"/>
	</j:icon>
	</j:ToggleButton>
	<j:ToggleButton click="footerbar.visible = !footerbar.visible">
	<j:beads>
	<j:ToolTip toolTip="show/hide FooterBar"/>
	</j:beads>
	<j:icon>
	<js:ToggleFontIcon text="{MaterialIconType.VISIBILITY}" selectedText="{MaterialIconType.VISIBILITY_OFF}" material="true"/>
	</j:icon>
	</j:ToggleButton>
	<j:ToggleButton click="toggleTopAppBarFixed()">
	<j:beads>
	<j:ToolTip toolTip="Lock(fix) or Unlock the TopBar"/>
	</j:beads>
	<j:icon>
	<js:ToggleFontIcon text="{MaterialIconType.LOCK}" selectedText="{MaterialIconType.LOCK_OPEN}" material="true"/>
	</j:icon>
	</j:ToggleButton>
	</j:BarSection>
	</j:BarRow>
	</j:TopAppBar>

	<j:ApplicationMainContent localId="main" hasTopAppBar="true" hasFooterBar="true">
	<local:WelcomeSection name="welcome_panel"/>
	<local:AlertPlayGround name="alert_panel"/>
	<local:ButtonPlayGround name="button_panel"/>
	<local:ImagePlayGround name="image_panel"/>
	<local:NumericStepperPlayGround name="numericstepper_panel"/>
	<local:DateComponentsPlayGround name="datecomponents_panel"/>
	<local:ComboBoxPlayGround name="combobox_panel"/>
	<local:CheckBoxPlayGround name="checkbox_panel"/>
	<local:MiscelaneaPlayGound name="miscelanea_panel"/>
	<local:HeadingsAndText name="text_panel"/>
	<local:LabelPlayGround name="label_panel"/>
	<local:ListPlayGround name="list_panel"/>
	<local:RadioButtonPlayGround name="radiobutton_panel"/>
	<local:SliderPlayGround name="slider_panel"/>
	<local:TextInputPlayGround name="textinput_panel"/>
	<local:GridPlayGround name="grid_panel"/>
	<local:CardPlayGround name="card_panel"/>
	<local:ButtonBarPlayGround name="buttonbar_panel"/>
	<local:DataGridPlayGround name="datagrid_panel"/>
	<local:TablePlayGround name="tables_panel"/>
	<local:FormsValidationPlayGround name="form_validation_panel"/>
	<local:DropDownListPlayGround name="dropdownlist_panel"/>
	<local:SnackbarPlayGround name="snackbar_panel"/>
	<local:TabBarPlayGround name="tabbar_panel"/>
	<local:ViewStatesPlayGround name="viewstates_panel"/>
	<local:LayoutsPlayGround name="layouts_panel"/>
	<local:WizardPlayGround name="wizards_panel"/>
	<local:PopUpPlayGround name="popup_panel"/>
	<local:AdvancedListPlayGround name="advanced_list_panel"/>
	<local:VirtualListsPlayGround name="virtual_lists_panel"/>
	</j:ApplicationMainContent>

	<!-- <j:ResponsiveSizeMonitor/> -->
	</j:ApplicationResponsiveView>