Update Navigation and NavigationLink to List format. Update Main Navigation Example to the new list
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/1550ee68 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/1550ee68 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/1550ee68 Branch: refs/heads/feature/fontawesome Commit: 1550ee6852d6795b84ad40cdd3f033f993adc296 Parents: 5f2fd3a Author: Carlos Rovira <carlosrov...@apache.org> Authored: Sat Jan 7 13:45:33 2017 +0100 Committer: Carlos Rovira <carlosrov...@apache.org> Committed: Sat Jan 7 13:45:33 2017 +0100 ---------------------------------------------------------------------- .../src/main/flex/MainNavigation.mxml | 15 +- .../src/main/flex/models/MainNavigationModel.as | 39 +++++ .../src/main/flex/vos/NavigationLinkVO.as | 34 ++++ .../main/flex/org/apache/flex/mdl/Navigation.as | 11 +- .../itemRenderers/NavigationLinkItemRenderer.as | 161 +++++++++++++++++++ .../src/main/resources/defaults.css | 10 ++ .../src/main/resources/mdl-manifest.xml | 1 + 7 files changed, 259 insertions(+), 12 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/1550ee68/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml b/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml index bb6f43b..08b0bf9 100644 --- a/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml @@ -23,15 +23,22 @@ limitations under the License. xmlns:mdl="library://ns.apache.org/flexjs/mdl" xmlns="http://www.w3.org/1999/xhtml"; xmlns:models="models.*" fixedHeader="true"> + + <mdl:model> + <models:MainNavigationModel id="mainNavigationModel"/> + </mdl:model> + <mdl:Header> <mdl:HeaderRow> <mdl:LayoutTitle text="FlexJS Material Design Layout"/> <mdl:Spacer/> <mdl:Navigation> - <mdl:NavigationLink text="About" href="https://getmdl.io/index.html"/> - <mdl:NavigationLink text="Getting Started" href="https://getmdl.io/started/index.html"/> - <mdl:NavigationLink text="Components" href="https://getmdl.io/components/index.html"/> - <mdl:NavigationLink text="Customize" href="https://getmdl.io/customize/index.html"/> + <mdl:beads> + <js:ConstantBinding + sourceID="mainNavigationModel" + sourcePropertyName="mainNavigation" + destinationPropertyName="dataProvider" /> + </mdl:beads> </mdl:Navigation> </mdl:HeaderRow> <mdl:TabBar ripple="true"> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/1550ee68/examples/flexjs/MDLExample/src/main/flex/models/MainNavigationModel.as ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/models/MainNavigationModel.as b/examples/flexjs/MDLExample/src/main/flex/models/MainNavigationModel.as new file mode 100644 index 0000000..5e599ac --- /dev/null +++ b/examples/flexjs/MDLExample/src/main/flex/models/MainNavigationModel.as @@ -0,0 +1,39 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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. +// +//////////////////////////////////////////////////////////////////////////////// +package models +{ + import org.apache.flex.events.EventDispatcher; + + import vos.NavigationLinkVO; + + public class MainNavigationModel extends EventDispatcher + { + private var _mainNavigation:Array = [ + new NavigationLinkVO("About", "https://getmdl.io/index.html";), + new NavigationLinkVO("Getting Started", "https://getmdl.io/started/index.html";), + new NavigationLinkVO("Components", "https://getmdl.io/components/index.html";), + new NavigationLinkVO("Customize", "https://getmdl.io/customize/index.html";) + ]; + + public function get mainNavigation():Array + { + return _mainNavigation; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/1550ee68/examples/flexjs/MDLExample/src/main/flex/vos/NavigationLinkVO.as ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/vos/NavigationLinkVO.as b/examples/flexjs/MDLExample/src/main/flex/vos/NavigationLinkVO.as new file mode 100644 index 0000000..8e8c998 --- /dev/null +++ b/examples/flexjs/MDLExample/src/main/flex/vos/NavigationLinkVO.as @@ -0,0 +1,34 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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. +// +//////////////////////////////////////////////////////////////////////////////// +package vos +{ + public class NavigationLinkVO + { + [Bindable] + public var label:String; + [Bindable] + public var href:String; + + public function NavigationLinkVO(label:String, href:String) + { + this.label = label; + this.href = href; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/1550ee68/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Navigation.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Navigation.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Navigation.as index 25cac28..a638d1e 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Navigation.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Navigation.as @@ -34,7 +34,7 @@ package org.apache.flex.mdl * @playerversion AIR 2.6 * @productversion FlexJS 0.0 */ - public class Navigation extends ContainerBase + public class Navigation extends List { /** * constructor. @@ -62,14 +62,9 @@ package org.apache.flex.mdl element = document.createElement('nav') as WrappedHTMLElement; positioner = element; - - // absolute positioned children need a non-null - // position value in the parent. It might - // get set to 'absolute' if the container is - // also absolutely positioned element.flexjs_wrapper = this; - - return element; + + return positioner; } } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/1550ee68/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/NavigationLinkItemRenderer.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/NavigationLinkItemRenderer.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/NavigationLinkItemRenderer.as new file mode 100644 index 0000000..0c1c5ae --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/NavigationLinkItemRenderer.as @@ -0,0 +1,161 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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. +// +//////////////////////////////////////////////////////////////////////////////// +package org.apache.flex.mdl.itemRenderers +{ + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + import org.apache.flex.html.supportClasses.MXMLItemRenderer; + + /** + * The NavigationLinkItemRenderer defines the basic Item Renderer for a MDL NavigationLink List Component. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class NavigationLinkItemRenderer extends MXMLItemRenderer + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function NavigationLinkItemRenderer() + { + super(); + + className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user; + } + + private var _href:String = "#"; + /** + * the link url + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get href():String + { + return _href; + } + public function set href(value:String):void + { + _href = value; + + COMPILE::JS + { + (element as HTMLElement).setAttribute('href', value); + } + } + + private var _label:String = ""; + + /** + * The label of the link + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get label():String + { + return _label; + } + + public function set label(value:String):void + { + _label = value; + } + + COMPILE::JS + private var textNode:Text; + + /** + * Sets the data value and uses the String version of the data for display. + * + * @param Object data The object being displayed by the itemRenderer instance. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + override public function set data(value:Object):void + { + super.data = value; + + if(value == null) return; + + /*if(value.hasOwnProperty('label')) { + label = String(value.label); + } else { + label = String(value); + }*/ + label = String(value.label); + + /*if(value.hasOwnProperty('href')) { + href = String(value.href); + }*/ + href = String(value.href); + + COMPILE::JS + { + if(textNode != null) + { + textNode.nodeValue = label; + } + } + } + + /** + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + typeNames = "mdl-navigation__link"; + + var a:HTMLElement = document.createElement('a') as HTMLElement; + a.setAttribute('href', href); + + if(MXMLDescriptor == null) + { + textNode = document.createTextNode('') as Text; + a.appendChild(textNode); + } + + element = a as WrappedHTMLElement; + + positioner = element; + element.flexjs_wrapper = this; + + return element; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/1550ee68/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css b/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css index 4530a39..9f2dbd6 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css @@ -56,6 +56,16 @@ List IItemRenderer: ClassReference("org.apache.flex.mdl.itemRenderers.ListItemRenderer"); } +Navigation +{ + IBeadView: ClassReference("org.apache.flex.mdl.beads.views.ListView"); + IBeadModel: ClassReference("org.apache.flex.html.beads.models.ArraySelectionModel"); + IBeadLayout: ClassReference(null); /*"org.apache.flex.html.beads.layouts.VerticalLayout"*/ + IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.beads.DataItemRendererFactoryForArrayData"); + IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory"); + IItemRenderer: ClassReference("org.apache.flex.mdl.itemRenderers.NavigationLinkItemRenderer"); +} + Menu { IBeadView: ClassReference("org.apache.flex.mdl.beads.views.ListView"); http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/1550ee68/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml index cbc254f..ad80a50 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml @@ -58,6 +58,7 @@ <component id="NavigationLayout" class="org.apache.flex.mdl.NavigationLayout"/> <component id="LayoutTitle" class="org.apache.flex.mdl.LayoutTitle"/> <component id="Navigation" class="org.apache.flex.mdl.Navigation"/> + <component id="NavigationLinkItemRenderer" class="org.apache.flex.mdl.itemRenderers.NavigationLinkItemRenderer"/> <component id="NavigationLink" class="org.apache.flex.mdl.NavigationLink"/> <component id="Header" class="org.apache.flex.mdl.Header"/> <component id="HeaderRow" class="org.apache.flex.mdl.HeaderRow"/>
