You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2020/01/22 23:37:36 UTC
[royale-asjs] branch develop updated: tour-de-jewel: added routing,
even to collapsible menu in drawer
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new 154a608 tour-de-jewel: added routing, even to collapsible menu in drawer
154a608 is described below
commit 154a608d7de0e3fe7a179ee8272e8203f3cfcf60
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Jan 23 00:37:24 2020 +0100
tour-de-jewel: added routing, even to collapsible menu in drawer
---
.../TourDeJewel/src/main/royale/MainContent.mxml | 106 +++++++++++++++++----
.../src/main/royale/TabBarPlayGround.mxml | 8 +-
.../ExampleAndSourceCodeTabbedSectionContent.as | 2 +-
.../src/main/royale/models/MainNavigationModel.as | 6 +-
.../src/main/royale/vos/NavigationLinkVO.as | 6 +-
.../src/main/royale/vos/TabBarButtonVO.as | 6 +-
6 files changed, 102 insertions(+), 32 deletions(-)
diff --git a/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml b/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
index accb213..a6c6e90 100644
--- a/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
@@ -23,31 +23,95 @@ limitations under the License.
xmlns:html="library://ns.apache.org/royale/html"
xmlns:models="models.*"
xmlns:c="components.*"
- xmlns:local="*">
+ xmlns:local="*"
+ initComplete="setNavSelection()">
<fx:Script>
<![CDATA[
- import vos.NavigationLinkVO;
+ import org.apache.royale.jewel.supportClasses.ISelectableContent;
+ import org.apache.royale.routing.RouteState;
import org.apache.royale.utils.OSUtils;
- private function changeHandler(event:Event):void
+ import vos.NavigationLinkVO;
+
+ private var currentContent:ISelectableContent;
+ private var currentNavOption:NavigationLinkVO;
+
+ private function setNavSelection():void {
+ var routeState:RouteState = router.routeState;
+ if(routeState.state){
+ setNavFromHash(routeState.state);
+ } 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
{
- var item:NavigationLinkVO = (event.target as Navigation).selectedItem as NavigationLinkVO;
- main.selectedContent = item.href;
+ currentNavOption = (event.target as Navigation).selectedItem as NavigationLinkVO;
+
+ router.routeState.title = currentNavOption.label;
+ router.routeState.state = currentNavOption.hash;
+ router.setState();
+
+ navigateTo();
+ }
+
+ private function navigateTo():void {
+ main.selectedContent = currentNavOption.hash;
+
if(!drawer.fixed)
drawer.close();
}
private function collapsibleChangeHandler(event:Event):void
{
- var item:NavigationLinkVO = (event.target as Navigation).selectedItem as NavigationLinkVO;
- if (item){
- item = item.selectedChild;
- main.selectedContent = item.href;
- if(!drawer.fixed)
- drawer.close();
- }
-
+ currentNavOption = (event.target as Navigation).selectedItem as NavigationLinkVO;
+ currentNavOption = currentNavOption.selectedChild;
+
+ router.routeState.title = currentNavOption.label;
+ router.routeState.state = currentNavOption.hash;
+ router.setState();
+
+ navigateTo();
}
private function toggleTopAppBarFixed():void
@@ -58,7 +122,8 @@ limitations under the License.
private function goToHome():void
{
- main.selectedContent = "welcome_panel";
+ currentNavOption = new NavigationLinkVO("Welcome", "welcome_panel", null);
+ main.selectedContent = currentNavOption.hash;
}
[Bindable]
@@ -104,6 +169,7 @@ limitations under the License.
</j:model>
<j:beads>
+ <js:Router id="router" stateChange="hashChanged()" />
<js:ContainerDataBinding/>
<js:BrowserOrientation localId="bo"/>
<j:CleanValidationErrors/>
@@ -117,22 +183,24 @@ limitations under the License.
<j:ImageButton src="assets/apache-royale-jewel-logo-white.svg" height="140" click="goToHome()"/>
</j:DrawerHeader>
<j:DrawerContent>
- <j:Navigation change="changeHandler(event)" className="navIconLinkItemRenderer">
+ <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 change="collapsibleChangeHandler(event)"
- className="navSectionItemRenderer">
+ <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 change="changeHandler(event)" className="navIconLinkItemRenderer">
+ <j:Navigation localId="controlsNavigation" change="navChangeHandler(event)"
+ className="navIconLinkItemRenderer">
<j:beads>
<js:ConstantBinding sourceID="mainNavigationModel" sourcePropertyName="controlsDrawerNavigation" destinationPropertyName="dataProvider"/>
<j:NavigationActionNotifier/>
@@ -230,7 +298,7 @@ limitations under the License.
</j:BarRow>
</j:TopAppBar>
- <j:ApplicationMainContent localId="main" hasTopAppBar="true" hasFooterBar="true" selectedContent = "welcome_panel">
+ <j:ApplicationMainContent localId="main" hasTopAppBar="true" hasFooterBar="true">
<local:WelcomeSection name="welcome_panel"/>
<local:AlertPlayGround name="alert_panel"/>
<local:ButtonPlayGround name="button_panel"/>
diff --git a/examples/royale/TourDeJewel/src/main/royale/TabBarPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/TabBarPlayGround.mxml
index 39840cf..0fb93cb 100644
--- a/examples/royale/TourDeJewel/src/main/royale/TabBarPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/TabBarPlayGround.mxml
@@ -31,7 +31,7 @@ limitations under the License.
private function changeHandler(event:Event):void
{
var item:TabBarButtonVO = (event.target as TabBar).selectedItem as TabBarButtonVO;
- tabcontent.selectedContent = item.href;
+ tabcontent.selectedContent = item.hash;
}
private var _tabBarData:ArrayList = new ArrayList([
@@ -98,7 +98,7 @@ limitations under the License.
<j:TabBar localId="tabbar" width="100%" className="tabBarVerticalIconItemRenderer"
dataProvider="{tabBarData}">
<j:beads>
- <j:AssignTabContent selectedContentProperty="href">
+ <j:AssignTabContent selectedContentProperty="hash">
<j:content>
<j:TabBarContent localId="tabcontent" >
<j:SectionContent name="tab1">
@@ -143,7 +143,7 @@ limitations under the License.
<js:ConstantBinding sourcePropertyName="tabBarData" destinationPropertyName="dataProvider"/>
</j:beads>
</j:TabBar>
- <j:TabBarContent localId="tabcontent2" selectedContent="{(tabbar2.selectedItem as TabBarButtonVO).href}" >
+ <j:TabBarContent localId="tabcontent2" selectedContent="{(tabbar2.selectedItem as TabBarButtonVO).hash}" >
<j:SectionContent name="tab1">
<j:Label text="Tab 1"/>
</j:SectionContent>
@@ -195,7 +195,7 @@ limitations under the License.
<j:TabBar width="100%" dataProvider="{scrolltabBarData}">
<j:beads>
- <j:AssignTabContent selectedContentProperty="href">
+ <j:AssignTabContent selectedContentProperty="hash">
<j:content>
<j:TabBarContent>
<j:SectionContent name="films">
diff --git a/examples/royale/TourDeJewel/src/main/royale/components/ExampleAndSourceCodeTabbedSectionContent.as b/examples/royale/TourDeJewel/src/main/royale/components/ExampleAndSourceCodeTabbedSectionContent.as
index bb11b72..340b2b1 100644
--- a/examples/royale/TourDeJewel/src/main/royale/components/ExampleAndSourceCodeTabbedSectionContent.as
+++ b/examples/royale/TourDeJewel/src/main/royale/components/ExampleAndSourceCodeTabbedSectionContent.as
@@ -119,7 +119,7 @@ package components
private function changeHandler(event:Event):void
{
var item:TabBarButtonVO = (event.target as TabBar).selectedItem as TabBarButtonVO;
- tabcontent.selectedContent = item.href;
+ tabcontent.selectedContent = item.hash;
if(sourceCodeTab.isSelected && sourceCodeMXMLText.text == "")
{
service.getContent();
diff --git a/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as b/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as
index ac2caa2..d5585f5 100644
--- a/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as
+++ b/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as
@@ -73,9 +73,11 @@ package models
private var _collapsibleNavExample:ArrayList;
public function get collapsibleNavExample():ArrayList {
- if (_collapsibleNavExample) return _collapsibleNavExample;
+ if (_collapsibleNavExample)
+ return _collapsibleNavExample;
+
var item1:NavigationLinkVO = new NavigationLinkVO("No SubMenu", "card_panel", MaterialIconType.FILTER_1);
- var item2:NavigationLinkVO = new NavigationLinkVO("With SubMenu", '#collapsible', MaterialIconType.FILTER_2);
+ var item2:NavigationLinkVO = new NavigationLinkVO("With SubMenu", '$collapsible', MaterialIconType.FILTER_2);
item2.subMenu = _containerDrawerNavigation;
_collapsibleNavExample = new ArrayList([item1, item2]);
diff --git a/examples/royale/TourDeJewel/src/main/royale/vos/NavigationLinkVO.as b/examples/royale/TourDeJewel/src/main/royale/vos/NavigationLinkVO.as
index e2e9585..5d74999 100644
--- a/examples/royale/TourDeJewel/src/main/royale/vos/NavigationLinkVO.as
+++ b/examples/royale/TourDeJewel/src/main/royale/vos/NavigationLinkVO.as
@@ -24,7 +24,7 @@ package vos
public class NavigationLinkVO
{
public var label:String;
- public var href:String;
+ public var hash:String;
public var icon:String;
//for collapsible example
@@ -32,10 +32,10 @@ package vos
public var open:Boolean;
public var selectedChild:NavigationLinkVO;
- public function NavigationLinkVO(label:String, href:String, icon:String = null)
+ public function NavigationLinkVO(label:String, hash:String, icon:String = null)
{
this.label = label;
- this.href = href;
+ this.hash = hash;
this.icon = icon;
}
}
diff --git a/examples/royale/TourDeJewel/src/main/royale/vos/TabBarButtonVO.as b/examples/royale/TourDeJewel/src/main/royale/vos/TabBarButtonVO.as
index a859f89..9b22fe8 100644
--- a/examples/royale/TourDeJewel/src/main/royale/vos/TabBarButtonVO.as
+++ b/examples/royale/TourDeJewel/src/main/royale/vos/TabBarButtonVO.as
@@ -22,13 +22,13 @@ package vos
public class TabBarButtonVO
{
public var label:String;
- public var href:String;
+ public var hash:String;
public var icon:String;
- public function TabBarButtonVO(label:String, href:String, icon:String = null)
+ public function TabBarButtonVO(label:String, hash:String, icon:String = null)
{
this.label = label;
- this.href = href;
+ this.hash = hash;
this.icon = icon;
}
}