Add Tabs and TabBar with dataProvider usage to MDL Example
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/b7a833d7 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/b7a833d7 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/b7a833d7 Branch: refs/heads/feature/fontawesome Commit: b7a833d7db8ed4282194cef598c03a279e1b6931 Parents: 1e774e7 Author: piotrz <[email protected]> Authored: Thu Jan 5 09:01:11 2017 +0100 Committer: piotrz <[email protected]> Committed: Thu Jan 5 09:01:11 2017 +0100 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/Tabs.mxml | 108 ++++++++++++++----- .../CustomTabBarPanelItemRenderer.mxml | 36 +++++++ .../src/main/flex/models/TabsModel.as | 11 ++ .../MDLExample/src/main/flex/vos/TabVO.as | 2 + .../src/main/resources/mdl-styles.css | 10 ++ 5 files changed, 143 insertions(+), 24 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b7a833d7/examples/flexjs/MDLExample/src/main/flex/Tabs.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Tabs.mxml b/examples/flexjs/MDLExample/src/main/flex/Tabs.mxml index 06efb1e..d6d36cd 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Tabs.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Tabs.mxml @@ -20,31 +20,91 @@ limitations under the License. <mdl:TabBarPanel xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:js="library://ns.apache.org/flexjs/basic" xmlns:mdl="library://ns.apache.org/flexjs/mdl" - xmlns="http://www.w3.org/1999/xhtml";> + xmlns="http://www.w3.org/1999/xhtml"; xmlns:models="models.*"> - <mdl:Grid className="demo-grid"> - - <mdl:Tabs width="400"> - <mdl:TabBar> - <mdl:TabBarButton text="Tab One" href="#tab1"/> - <mdl:TabBarButton text="Tab Two" href="#tab2"/> - <mdl:TabBarButton text="Tab Three" href="#tab3"/> - </mdl:TabBar> - - <mdl:TabBarPanel id="tab1"> - <js:Label text="Tab 1"/> - </mdl:TabBarPanel> + <mdl:model> + <models:TabsModel id="tabsModel"/> + </mdl:model> - <mdl:TabBarPanel id="tab2"> - <js:Label text="Tab 2"/> - </mdl:TabBarPanel> - - <mdl:TabBarPanel id="tab3"> - <js:Label text="Tab 3"/> - </mdl:TabBarPanel> - </mdl:Tabs> + <mdl:Grid> + + <mdl:GridCell column="1" percentWidth="100"> + <mdl:Tabs width="400" tabIdField="tabId" className="customTabBarPanelItemRenderer"> + <mdl:beads> + <js:ConstantBinding + sourceID="tabsModel" + sourcePropertyName="tabs" + destinationPropertyName="dataProvider" /> + </mdl:beads> + <mdl:TabBar tabIdField="tabId" labelField="label"> + <mdl:beads> + <js:ConstantBinding + sourceID="tabsModel" + sourcePropertyName="tabs" + destinationPropertyName="dataProvider" /> + </mdl:beads> + </mdl:TabBar> + </mdl:Tabs> + </mdl:GridCell> + <mdl:GridCell column="1" percentWidth="100"> + <mdl:NavigationLayout width="600"> + <mdl:Header> + <mdl:TabBar tabIdField="tabId" labelField="label" className="customTabBarSetup"> + <mdl:beads> + <js:ConstantBinding + sourceID="tabsModel" + sourcePropertyName="tabsLayout" + destinationPropertyName="dataProvider" /> + </mdl:beads> + </mdl:TabBar> + </mdl:Header> + + <mdl:NavigationLayoutContent> + <mdl:TabBarPanel id="starks_panel"> + <js:Ul> + <js:Li><js:Label text="Eddard"/></js:Li> + <js:Li><js:Label text="Catelyn"/></js:Li> + <js:Li><js:Label text="Robb"/></js:Li> + <js:Li><js:Label text="Sansa"/></js:Li> + <js:Li><js:Label text="Brandon"/></js:Li> + <js:Li><js:Label text="Arya"/></js:Li> + <js:Li><js:Label text="Rickon"/></js:Li> + </js:Ul> + </mdl:TabBarPanel> - <mdl:Tabs width="400" ripple="true"> + <mdl:TabBarPanel id="lannisters_panel" isActive="true"> + <js:Ul> + <js:Li><js:Label text="Tywin"/></js:Li> + <js:Li><js:Label text="Cersei"/></js:Li> + <js:Li><js:Label text="Jamie"/></js:Li> + <js:Li><js:Label text="Tyrion"/></js:Li> + </js:Ul> + </mdl:TabBarPanel> + + <mdl:TabBarPanel id="targaryens_panel"> + <js:Ul> + <js:Li><js:Label text="Viserys"/></js:Li> + <js:Li><js:Label text="Daenerys"/></js:Li> + </js:Ul> + </mdl:TabBarPanel> + </mdl:NavigationLayoutContent> + </mdl:NavigationLayout> + </mdl:GridCell> + <!-- <mdl:Tabs width="400" ripple="true" tabIdField="tabId" className="customTabSetup"> + <mdl:beads> + <js:ConstantBinding + sourceID="tabsModel" + sourcePropertyName="tabsLayout" + destinationPropertyName="dataProvider" /> + </mdl:beads> + <mdl:TabBar tabIdField="tabId" labelField="label" className="customTabBarSetup" forceLayout="true"> + <mdl:beads> + <js:ConstantBinding + sourceID="tabsModel" + sourcePropertyName="tabsLayout" + destinationPropertyName="dataProvider" /> + </mdl:beads> + </mdl:TabBar> <mdl:TabBar> <mdl:TabBarButton text="Starks" href="#starks_panel"/> <mdl:TabBarButton text="Lannisters" href="#lannisters_panel" isActive="true"/> @@ -78,8 +138,8 @@ limitations under the License. <js:Li><js:Label text="Daenerys"/></js:Li> </js:Ul> </mdl:TabBarPanel> - </mdl:Tabs> + </mdl:Tabs> --> - </mdl:Grid> + </mdl:Grid> </mdl:TabBarPanel> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b7a833d7/examples/flexjs/MDLExample/src/main/flex/itemRenderers/CustomTabBarPanelItemRenderer.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/itemRenderers/CustomTabBarPanelItemRenderer.mxml b/examples/flexjs/MDLExample/src/main/flex/itemRenderers/CustomTabBarPanelItemRenderer.mxml new file mode 100644 index 0000000..70f13d8 --- /dev/null +++ b/examples/flexjs/MDLExample/src/main/flex/itemRenderers/CustomTabBarPanelItemRenderer.mxml @@ -0,0 +1,36 @@ +<?xml version="1.0"?> +<!-- + +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. + +--> +<mdl:TabBarPanelItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:mdl="library://ns.apache.org/flexjs/mdl" + xmlns:s="library://ns.apache.org/flexjs/basic"> + <mdl:beads> + <s:ItemRendererDataBinding /> + </mdl:beads> + <fx:Script><![CDATA[ + import vos.TabVO; + + [Bindable("dataChange")] + public function get tab():TabVO + { + return data as TabVO; + } + ]]></fx:Script> + <s:Label text="{tab.label}"/> +</mdl:TabBarPanelItemRenderer> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b7a833d7/examples/flexjs/MDLExample/src/main/flex/models/TabsModel.as ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/models/TabsModel.as b/examples/flexjs/MDLExample/src/main/flex/models/TabsModel.as index 2662678..75b778e 100644 --- a/examples/flexjs/MDLExample/src/main/flex/models/TabsModel.as +++ b/examples/flexjs/MDLExample/src/main/flex/models/TabsModel.as @@ -30,9 +30,20 @@ package models new TabVO("tab3", "Tab Three") ]; + private var _tabsLayout:Array = [ + new TabVO("starks_panel", "Starks"), + new TabVO("lannisters_panel", "Lannisters"), + new TabVO("targaryens_panel", "Targaryens") + ]; + public function get tabs():Array { return _tabs; } + + public function get tabsLayout():Array + { + return _tabsLayout; + } } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b7a833d7/examples/flexjs/MDLExample/src/main/flex/vos/TabVO.as ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/vos/TabVO.as b/examples/flexjs/MDLExample/src/main/flex/vos/TabVO.as index b202290..7a38a69 100644 --- a/examples/flexjs/MDLExample/src/main/flex/vos/TabVO.as +++ b/examples/flexjs/MDLExample/src/main/flex/vos/TabVO.as @@ -20,7 +20,9 @@ package vos { public class TabVO { + [Bindable] public var tabId:String; + [Bindable] public var label:String; public function TabVO(tabId:String, label:String) http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b7a833d7/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css index d4dda32..eac1a11 100644 --- a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css +++ b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css @@ -93,6 +93,16 @@ js|Image color: white; } +.customTabBarPanelItemRenderer +{ + IItemRenderer: ClassReference("itemRenderers.CustomTabBarPanelItemRenderer"); +} + +.customTabBarSetup +{ + IItemRenderer: ClassReference("org.apache.flex.mdl.itemRenderers.TabBarButtonLayoutItemRenderer"); +} + /* card wide */ .demo-card-wide.mdl-card { width: 512px;
