You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by gr...@apache.org on 2019/09/22 06:01:52 UTC
[royale-asjs] 07/09: Something for Carlos to review - simple
two-tier nav
This is an automated email from the ASF dual-hosted git repository.
gregdove pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 7009b8b4e71fa55b1433e04948865e563a791604
Author: greg-dove <gr...@gmail.com>
AuthorDate: Sat Sep 21 15:38:14 2019 +1200
Something for Carlos to review - simple two-tier nav
---
.../src/main/resources/jewel-example-styles.css | 34 ++++++++-
.../TourDeJewel/src/main/royale/MainContent.mxml | 20 +++++
.../NavigationGroupExampleItemRenderer.mxml | 88 ++++++++++++++++++++++
.../src/main/royale/models/MainNavigationModel.as | 12 +++
.../src/main/royale/vos/NavigationLinkVO.as | 7 ++
5 files changed, 160 insertions(+), 1 deletion(-)
diff --git a/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css b/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css
index fcc7018..1840d88 100644
--- a/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css
+++ b/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css
@@ -106,5 +106,37 @@
.somePopUpContent
{
- IPopUpContent: ClassReference("components.SomePopUpContent")
+ IPopUpContent: ClassReference("components.SomePopUpContent");
+}
+
+.navSectionItemRenderer{
+ IItemRenderer: ClassReference("itemRenderers.NavigationGroupExampleItemRenderer");
+}
+
+.navigation-section-group{
+ IItemRenderer: ClassReference("itemRenderers.NavigationIconLinkItemRenderer");
+}
+.navigation-section-group.closed {
+ display: none
+}
+
+.navSectionItemRenderer .fonticon
+{
+ margin-right: 24px;
+}
+.navSectionItemRenderer.jewel.navigation{
+ background-color: aliceblue;
+}
+
+.navigation-section-group .navigationlink{
+ padding-left: 34px;
+ background-color:rgba(56, 172, 241, 0.31);
+}
+
+.jewel.navigationlink .hint.fonticon {
+ margin-left: auto;
+}
+
+.navigation .layout.vertical {
+ align-items: stretch;
}
diff --git a/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml b/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
index 3586552..b5f02af 100644
--- a/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
@@ -38,6 +38,18 @@ limitations under the License.
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();
+ }
+
+ }
+
private function toggleTopAppBarFixed():void
{
topappbar.fixed = !topappbar.fixed;
@@ -112,6 +124,14 @@ limitations under the License.
</j:beads>
</j:Navigation>
<j:Divider/>
+ <j:Navigation 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:beads>
<js:ConstantBinding sourceID="mainNavigationModel" sourcePropertyName="controlsDrawerNavigation" destinationPropertyName="dataProvider"/>
diff --git a/examples/royale/TourDeJewel/src/main/royale/itemRenderers/NavigationGroupExampleItemRenderer.mxml b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/NavigationGroupExampleItemRenderer.mxml
new file mode 100644
index 0000000..df181bb
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/NavigationGroupExampleItemRenderer.mxml
@@ -0,0 +1,88 @@
+<?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.
+
+-->
+<local:CollapsibleNavigationSectionRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:local="org.apache.royale.jewel.itemRenderers.*"
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:js="library://ns.apache.org/royale/basic"
+ xmlns:html="library://ns.apache.org/royale/html"
+ className="layout vertical"
+ sectionClick="handleNavToggle(event)">
+
+ <fx:Script>
+ <![CDATA[
+ import vos.NavigationLinkVO;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.Navigation;
+
+ [Bindable(event="dataChange")]
+ public function get navlink():NavigationLinkVO
+ {
+ return data as NavigationLinkVO;
+ }
+
+ /**
+ * override in subclasses as a simple way to configure the nested content field
+ * if it is not 'subMenu' (the default)
+ */
+ /*override public function get submenuField():String{
+ return 'submenu';
+ }*/
+
+ //probably don't want this for touch interfaces...
+ override public function get retainHover():Boolean{
+ return true;
+ }
+
+ private function handleNavToggle(event:Event):void{
+ var triggerBinding:Boolean;
+ if (event.target == this){
+ this.open = !this.open;
+ //trigger the binding because ItemRendererDataBinding only listens to dataChange
+ triggerBinding = true;
+ }
+
+ if (triggerBinding) dispatchEvent(new Event('dataChange'));
+ }
+
+
+ override public function onChange(selectedItem:Object):void{
+ trace('selectedItem',selectedItem)
+ var parentNav:Navigation = this.itemRendererParent ? this.itemRendererParent.host as Navigation : null;
+ if (parentNav) {
+ //this hierarchy support is a bit kooky, and probably there will be something better later with Hierarchical data setup
+ navlink.selectedChild =selectedItem as NavigationLinkVO;
+ if (parentNav.selectedItem!= this.data){
+ parentNav.selectedItem = this.data;
+ }
+ parentNav.dispatchEvent(new Event('change'));
+ }
+ }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ItemRendererDataBinding />
+ </j:beads>
+ <js:FontIcon text="{navlink ? navlink.icon : ''}" material="true" visible="{navlink ? navlink.icon != null : false}"/>
+
+ <html:Span className="navigation-section-title" text="{text}"/>
+ <js:FontIcon text="{open? MaterialIconType.EXPAND_LESS: MaterialIconType.EXPAND_MORE}" material="true" className="hint" />
+</local:CollapsibleNavigationSectionRenderer>
+
diff --git a/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as b/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as
index c454b18..3a87850 100644
--- a/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as
+++ b/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as
@@ -67,5 +67,17 @@ package models
{
return _containerDrawerNavigation;
}
+
+
+ private var _collapsibleNavExample:ArrayList;
+ public function get collapsibleNavExample():ArrayList {
+ if (_collapsibleNavExample) return _collapsibleNavExample;
+ var item:NavigationLinkVO = new NavigationLinkVO("Ditto", '#collapsible', MaterialIconType.UNFOLD_MORE);
+ item.subMenu = _containerDrawerNavigation;
+
+ _collapsibleNavExample = new ArrayList([item]);
+
+ return _collapsibleNavExample;
+ }
}
}
diff --git a/examples/royale/TourDeJewel/src/main/royale/vos/NavigationLinkVO.as b/examples/royale/TourDeJewel/src/main/royale/vos/NavigationLinkVO.as
index c33b845..e2e9585 100644
--- a/examples/royale/TourDeJewel/src/main/royale/vos/NavigationLinkVO.as
+++ b/examples/royale/TourDeJewel/src/main/royale/vos/NavigationLinkVO.as
@@ -18,12 +18,19 @@
////////////////////////////////////////////////////////////////////////////////
package vos
{
+ import org.apache.royale.collections.IArrayList;
+
[Bindable]
public class NavigationLinkVO
{
public var label:String;
public var href:String;
public var icon:String;
+
+ //for collapsible example
+ public var subMenu:IArrayList;
+ public var open:Boolean;
+ public var selectedChild:NavigationLinkVO;
public function NavigationLinkVO(label:String, href:String, icon:String = null)
{