MDL Menu with dataProvider API - Menu behaves like MDL List - it is uses ListView - MenuItem has been changed to MenuItemRenderer - Add to Disabled bead possibility to switch off using "disabled" property - Attempt to create sub menu using CustomMenuItemRenderer - not working version
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/8253a0dc Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/8253a0dc Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/8253a0dc Branch: refs/heads/feature/fontawesome Commit: 8253a0dcc66ece2056dfadefc777660396211abe Parents: fadd9f0 Author: piotrz <[email protected]> Authored: Sun Jan 1 21:33:57 2017 +0100 Committer: piotrz <[email protected]> Committed: Sun Jan 1 21:33:57 2017 +0100 ---------------------------------------------------------------------- .../src/main/flex/MainNavigation.mxml | 24 +-- .../itemRenderers/CustomMenuItemRenderer.mxml | 66 +++++++ .../src/main/flex/models/MenuModel.as | 50 +++++ .../MDLExample/src/main/flex/vos/MenuItemVO.as | 64 +++++++ .../src/main/resources/mdl-styles.css | 9 +- .../src/main/flex/org/apache/flex/mdl/Menu.as | 132 ++++++++++--- .../main/flex/org/apache/flex/mdl/MenuItem.as | 158 --------------- .../flex/org/apache/flex/mdl/beads/Disabled.as | 25 ++- .../flex/mdl/itemRenderers/MenuItemRenderer.as | 191 +++++++++++++++++++ .../ItemRendererFactoryForArrayData.as | 7 +- .../src/main/resources/defaults.css | 10 + .../src/main/resources/mdl-manifest.xml | 2 +- 12 files changed, 535 insertions(+), 203 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8253a0dc/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 ec59a33..e9f668d 100644 --- a/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml @@ -21,8 +21,12 @@ limitations under the License. xmlns:js="library://ns.apache.org/flexjs/basic" xmlns:local="*" 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.*" fixedHeader="true"> + <mdl:model> + <models:MenuModel id="menuModel"/> + </mdl:model> + <mdl:Header> <mdl:HeaderRow> <mdl:LayoutTitle text="FlexJS Material Design Layout"/> @@ -120,16 +124,14 @@ limitations under the License. </mdl:materialIcon> </mdl:Button> - <mdl:Menu dataMdlFor="menu_btn" ripple="true" bottom="true" left="false"> - <mdl:MenuItem text="Some Action"/> - <mdl:MenuItem text="Another Action"/> - <mdl:MenuItem text="Action Disabled"> - <mdl:beads> - <mdl:Disabled/> - </mdl:beads> - </mdl:MenuItem> - <mdl:MenuItem text="More Action" divider="true"/> - <mdl:MenuItem text="Separated Action"/> + <mdl:Menu dataMdlFor="menu_btn" ripple="true" bottom="true" left="false" + labelField="label"> + <mdl:beads> + <js:ConstantBinding + sourceID="menuModel" + sourcePropertyName="menuItems" + destinationPropertyName="dataProvider" /> + </mdl:beads> </mdl:Menu> </mdl:TabBarPanel> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8253a0dc/examples/flexjs/MDLExample/src/main/flex/itemRenderers/CustomMenuItemRenderer.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/itemRenderers/CustomMenuItemRenderer.mxml b/examples/flexjs/MDLExample/src/main/flex/itemRenderers/CustomMenuItemRenderer.mxml new file mode 100644 index 0000000..25b55ca --- /dev/null +++ b/examples/flexjs/MDLExample/src/main/flex/itemRenderers/CustomMenuItemRenderer.mxml @@ -0,0 +1,66 @@ +<?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:MenuItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:mdl="library://ns.apache.org/flexjs/mdl" xmlns:models="models.*" + xmlns:js="library://ns.apache.org/flexjs/basic" rollOver="onMenuItemRollOver(event)"> + <mdl:model> + <models:MenuModel id="subMenuModel"/> + </mdl:model> + <mdl:beads> + <mdl:Disabled disabled="{menuItem.disabled}"/> + </mdl:beads> + <fx:Script><![CDATA[ + import org.apache.flex.events.MouseEvent; + + import vos.MenuItemVO; + + [Bindable("dataChange")] + public function get menuItem():MenuItemVO + { + return data as MenuItemVO; + } + + override public function set data(value:Object):void + { + super.data = value; + + if (value && value.hasSubMenu) + { + id = "subMenu"; + } + } + + private function onMenuItemRollOver(event:MouseEvent):void + { + if (menuItem.hasSubMenu) + { + subMenu.show(); + } + } + ]]></fx:Script> + <mdl:Menu id="subMenu" dataMdlFor="subMenu" left="true" labelField="label"> + <mdl:beads> + <js:ConstantBinding + sourceID="subMenuModel" + sourcePropertyName="subMenuItems" + destinationPropertyName="dataProvider" /> + </mdl:beads> + </mdl:Menu> +</mdl:MenuItemRenderer> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8253a0dc/examples/flexjs/MDLExample/src/main/flex/models/MenuModel.as ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/models/MenuModel.as b/examples/flexjs/MDLExample/src/main/flex/models/MenuModel.as new file mode 100644 index 0000000..382a512 --- /dev/null +++ b/examples/flexjs/MDLExample/src/main/flex/models/MenuModel.as @@ -0,0 +1,50 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 org.apache.flex.events.IEventDispatcher; + + import vos.MenuItemVO; + + public class MenuModel extends EventDispatcher + { + private var _menuItems:Array = [ + new MenuItemVO("Some Action"), + new MenuItemVO("Another Action"), + new MenuItemVO("More Action", false, true) + ]; + + private var _subMenuItems:Array = [ + new MenuItemVO("Sub Menu Action"), + new MenuItemVO("Sub Menu Action"), + new MenuItemVO("Sub Menu Action") + ] + + public function get menuItems():Array + { + return _menuItems; + } + + public function get subMenuItems():Array + { + return _subMenuItems; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8253a0dc/examples/flexjs/MDLExample/src/main/flex/vos/MenuItemVO.as ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/vos/MenuItemVO.as b/examples/flexjs/MDLExample/src/main/flex/vos/MenuItemVO.as new file mode 100644 index 0000000..13f983b --- /dev/null +++ b/examples/flexjs/MDLExample/src/main/flex/vos/MenuItemVO.as @@ -0,0 +1,64 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 MenuItemVO + { + private var _label:String; + private var _disabled:Boolean; + private var _hasSubMenu:Boolean; + + public function MenuItemVO(label:String, disabled:Boolean = false, hasSubMenu:Boolean = false) + { + this.label = label; + this.disabled = disabled; + this.hasSubMenu = hasSubMenu; + } + + public function get label():String + { + return _label; + } + + public function set label(value:String):void + { + _label = value; + } + + public function get disabled():Boolean + { + return _disabled; + } + + public function set disabled(value:Boolean):void + { + _disabled = value; + } + + public function get hasSubMenu():Boolean + { + return _hasSubMenu; + } + + public function set hasSubMenu(value:Boolean):void + { + _hasSubMenu = value; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8253a0dc/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 176b565..483146b 100644 --- a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css +++ b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css @@ -73,10 +73,15 @@ js|Image IItemRenderer: ClassReference("itemRenderers.AvatarAndActionThreeLineListItemRenderer"); } -/*.customListItemRenderer +.menuItemRenderer +{ + IItemRenderer: ClassReference("itemRenderers.CustomMenuItemRenderer"); +} + +.customListItemRenderer { IItemRenderer: ClassReference("itemRenderers.CustomListItemRenderer"); -}*/ +} .layoutTransparent { background: url('assets/transparent.jpg') center / cover; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8253a0dc/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Menu.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Menu.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Menu.as index 239c40e..35ff07e 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Menu.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Menu.as @@ -18,10 +18,18 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.flex.mdl { - import org.apache.flex.core.ContainerBase; + import org.apache.flex.core.ContainerBase; + import org.apache.flex.core.IChild; + import org.apache.flex.core.IItemRenderer; + import org.apache.flex.core.IItemRendererParent; + import org.apache.flex.core.ILayoutHost; + import org.apache.flex.core.ILayoutParent; + import org.apache.flex.core.IParentIUIBase; + import org.apache.flex.core.ISelectionModel; COMPILE::JS { + import org.apache.flex.events.Event; import org.apache.flex.core.WrappedHTMLElement; } @@ -33,7 +41,7 @@ package org.apache.flex.mdl * @playerversion AIR 2.6 * @productversion FlexJS 0.0 */ - public class Menu extends ContainerBase + public class Menu extends ContainerBase implements IItemRendererParent, ILayoutParent, ILayoutHost { /** * Constructor. @@ -49,7 +57,68 @@ package org.apache.flex.mdl className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user; } - + + COMPILE::JS + private var materialMenu:Object; + /** + * default position for Menu in MDL is bottom/left (or no class selector specified) + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + private var currentMenuPosition:String = ""; + + public function get dataProvider():Object + { + return ISelectionModel(model).dataProvider; + } + + public function set dataProvider(value:Object):void + { + ISelectionModel(model).dataProvider = value; + } + + public function get labelField():String + { + return ISelectionModel(model).labelField; + } + + public function set labelField(value:String):void + { + ISelectionModel(model).labelField = value; + } + + public function getLayoutHost():ILayoutHost + { + return this; + } + + public function get contentView():IParentIUIBase + { + return this; + } + + public function getItemRendererForIndex(index:int):IItemRenderer + { + var child:IItemRenderer = getElementAt(index) as IItemRenderer; + return child; + } + + public function removeAllElements():void + { + while (numElements > 0) { + var child:IChild = getElementAt(0); + removeElement(child); + } + } + + public function updateAllItemRenderers():void + { + + } + /** * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement */ @@ -59,16 +128,16 @@ package org.apache.flex.mdl typeNames = "mdl-menu mdl-js-menu"; element = document.createElement('ul') as WrappedHTMLElement; - + element.addEventListener("mdl-componentupgraded", onElementMdlComponentUpgraded, false); + positioner = element; element.flexjs_wrapper = this; return element; } - // default position for Menu in MDL is bottom/left (or no class selector specified) - private var currentPosClazz:String = ""; private var _bottom:Boolean = true; + /** * Position the menu relative to the associated button. * Used in conjunction with "left" @@ -87,20 +156,19 @@ package org.apache.flex.mdl { _bottom = value; - var newPosClazz:String; + var newMenuPosition:String; - if(currentPosClazz == "") + if(currentMenuPosition == "") { - currentPosClazz = " mdl-menu--" + (_bottom ? "bottom" : "top") + "-" + (_left ? "left" : "right"); - className += currentPosClazz; + currentMenuPosition = " mdl-menu--" + (_bottom ? "bottom" : "top") + "-" + (_left ? "left" : "right"); + className += currentMenuPosition; } else { - newPosClazz = " mdl-menu--" + (_bottom ? "bottom" : "top") + "-" + (_left ? "left" : "right"); - className = className.replace( "/(?:^|\s)" + currentPosClazz + "(?!\S)/g" , newPosClazz); + newMenuPosition = " mdl-menu--" + (_bottom ? "bottom" : "top") + "-" + (_left ? "left" : "right"); + className = className.replace( "/(?:^|\s)" + currentMenuPosition + "(?!\S)/g" , newMenuPosition); } - currentPosClazz = newPosClazz; - + currentMenuPosition = newMenuPosition; } private var _left:Boolean = true; @@ -122,19 +190,19 @@ package org.apache.flex.mdl { _left = value; - var newPosClazz:String; + var newMenuPosition:String; - if(currentPosClazz == "") + if(currentMenuPosition == "") { - currentPosClazz = " mdl-menu--" + (_bottom ? "bottom" : "top") + "-" + (_left ? "left" : "right"); - className += currentPosClazz; + currentMenuPosition = " mdl-menu--" + (_bottom ? "bottom" : "top") + "-" + (_left ? "left" : "right"); + className += currentMenuPosition; } else { - newPosClazz = " mdl-menu--" + (_bottom ? "bottom" : "top") + "-" + (_left ? "left" : "right"); - className = className.replace( "/(?:^|\s)" + currentPosClazz + "(?!\S)/g" , newPosClazz); + newMenuPosition = " mdl-menu--" + (_bottom ? "bottom" : "top") + "-" + (_left ? "left" : "right"); + className = className.replace( "/(?:^|\s)" + currentMenuPosition + "(?!\S)/g" , newMenuPosition); } - currentPosClazz = newPosClazz; + currentMenuPosition = newMenuPosition; } private var _dataMdlFor:String; @@ -181,7 +249,25 @@ package org.apache.flex.mdl { element.classList.toggle("mdl-js-ripple-effect", _ripple); } - } + } + + public function show():void + { + COMPILE::JS + { + if (materialMenu) + { + materialMenu.show(); + } + } + } + + COMPILE::JS + private function onElementMdlComponentUpgraded(event:Event):void + { + if (!event.currentTarget) return; - } + materialMenu = event.currentTarget.MaterialMenu; + } + } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8253a0dc/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/MenuItem.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/MenuItem.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/MenuItem.as deleted file mode 100644 index 62881fa..0000000 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/MenuItem.as +++ /dev/null @@ -1,158 +0,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. -// -//////////////////////////////////////////////////////////////////////////////// -package org.apache.flex.mdl -{ - import org.apache.flex.core.UIBase; - - COMPILE::JS - { - import org.apache.flex.core.WrappedHTMLElement; - } - - /** - * The MenuItem class creates a MDL menu item - * - * @langversion 3.0 - * @playerversion Flash 10.2 - * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 - */ - public class MenuItem extends UIBase - { - /** - * Constructor. - * - * @langversion 3.0 - * @playerversion Flash 10.2 - * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 - */ - public function MenuItem() - { - super(); - - className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user; - } - - private var _text:String = ""; - - /** - * The text of the heading - * - * @langversion 3.0 - * @playerversion Flash 10.2 - * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 - */ - public function get text():String - { - COMPILE::SWF - { - return _text; - } - COMPILE::JS - { - return textNode.nodeValue; - } - } - - public function set text(value:String):void - { - COMPILE::SWF - { - _text = value; - } - COMPILE::JS - { - textNode.nodeValue = value; - } - } - - COMPILE::JS - private var textNode:Text; - - /** - * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement - */ - COMPILE::JS - override protected function createElement():WrappedHTMLElement - { - typeNames = "mdl-menu__item"; - - element = document.createElement('li') as WrappedHTMLElement; - - textNode = document.createTextNode('') as Text; - element.appendChild(textNode); - - positioner = element; - element.flexjs_wrapper = this; - - return element; - } - - private var _divider:Boolean; - - /** - * A boolean flag to activate "mdl-menu__item--full-bleed-divider" effect selector. - * Modifies an item to have a full bleed divider between it and the next list item. - * - * @langversion 3.0 - * @playerversion Flash 10.2 - * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 - */ - public function get divider():Boolean - { - return _divider; - } - public function set divider(value:Boolean):void - { - _divider = value; - - COMPILE::JS - { - element.classList.toggle("mdl-menu__item--full-bleed-divider", _divider); - } - } - - protected var _ripple:Boolean = false; - /** - * A boolean flag to activate "mdl-js-ripple-effect" effect selector. - * - * @langversion 3.0 - * @playerversion Flash 10.2 - * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 - */ - public function get ripple():Boolean - { - return _ripple; - } - public function set ripple(value:Boolean):void - { - _ripple = value; - - COMPILE::JS - { - element.classList.toggle("mdl-js-ripple-effect", _ripple); - } - } - - } -} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8253a0dc/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Disabled.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Disabled.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Disabled.as index 2c25502..df26c0f 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Disabled.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Disabled.as @@ -43,7 +43,7 @@ package org.apache.flex.mdl.beads public function Disabled() { } - + private var _disabled:Boolean = true; /** * A boolean flag to enable or disable the host control. @@ -59,7 +59,12 @@ package org.apache.flex.mdl.beads } public function set disabled(value:Boolean):void { - _disabled = value; + _disabled = value; + + COMPILE::JS + { + updateHost(); + } } private var _strand:IStrand; @@ -80,8 +85,7 @@ package org.apache.flex.mdl.beads COMPILE::JS { - var host:UIBase = value as UIBase; - host.element.setAttribute('disabled', ''); + updateHost(); /*var host:UIBase = value as UIBase; if (host.element is HTMLInputElement) { @@ -96,5 +100,18 @@ package org.apache.flex.mdl.beads //} } } + + COMPILE::JS + private function updateHost():void + { + var host:UIBase = _strand as UIBase; + + if (host) + { + _disabled ? + host.element.setAttribute('disabled', '') : + host.element.removeAttribute('disabled'); + } + } } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8253a0dc/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/MenuItemRenderer.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/MenuItemRenderer.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/MenuItemRenderer.as new file mode 100644 index 0000000..d129f58 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/MenuItemRenderer.as @@ -0,0 +1,191 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 +{ + import org.apache.flex.html.supportClasses.MXMLItemRenderer; + + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + /** + * The MenuItemRenderer class creates a MDL menu item + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class MenuItemRenderer extends MXMLItemRenderer + { + /** + * Constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function MenuItemRenderer() + { + super(); + + className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user; + } + + private var _text:String = ""; + + /** + * The text of the heading + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get text():String + { + COMPILE::SWF + { + return _text; + } + COMPILE::JS + { + return textNode.nodeValue; + } + } + + public function set text(value:String):void + { + COMPILE::SWF + { + _text = value; + } + COMPILE::JS + { + textNode.nodeValue = 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; + + var text:String; + if (labelField || dataField) + { + text = String(value[labelField]); + } + else + { + text = String(value); + } + + COMPILE::JS + { + if(textNode != null) + { + textNode.nodeValue = text; + } + } + } + + /** + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + typeNames = "mdl-menu__item"; + + element = document.createElement('li') as WrappedHTMLElement; + + textNode = document.createTextNode('') as Text; + element.appendChild(textNode); + + positioner = element; + element.flexjs_wrapper = this; + + return element; + } + + private var _divider:Boolean; + + /** + * A boolean flag to activate "mdl-menu__item--full-bleed-divider" effect selector. + * Modifies an item to have a full bleed divider between it and the next list item. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get divider():Boolean + { + return _divider; + } + public function set divider(value:Boolean):void + { + _divider = value; + + COMPILE::JS + { + element.classList.toggle("mdl-menu__item--full-bleed-divider", _divider); + } + } + + protected var _ripple:Boolean = false; + /** + * A boolean flag to activate "mdl-js-ripple-effect" effect selector. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get ripple():Boolean + { + return _ripple; + } + public function set ripple(value:Boolean):void + { + _ripple = value; + + COMPILE::JS + { + element.classList.toggle("mdl-js-ripple-effect", _ripple); + } + } + + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8253a0dc/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/ItemRendererFactoryForArrayData.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/ItemRendererFactoryForArrayData.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/ItemRendererFactoryForArrayData.as index dedd429..e96af4b 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/ItemRendererFactoryForArrayData.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/ItemRendererFactoryForArrayData.as @@ -18,7 +18,6 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.flex.mdl.supportClasses { - import org.apache.flex.mdl.List; import org.apache.flex.core.IBead; import org.apache.flex.core.IDataProviderItemRendererMapper; import org.apache.flex.core.IItemRendererClassFactory; @@ -135,7 +134,7 @@ package org.apache.flex.mdl.supportClasses */ protected var dataGroup:IItemRendererParent; - private function dataProviderChangeHandler(event:Event):void + protected function dataProviderChangeHandler(event:Event):void { var dp:Array = selectionModel.dataProvider as Array; if (!dp) @@ -149,7 +148,7 @@ package org.apache.flex.mdl.supportClasses // This needs to be re-thought. There should be a better way to move the // properties from the component to the renderers. At least a new interface // should be created. - var list:List = _strand as List; + var component:UIBase = _strand as UIBase; var n:int = dp.length; for (var i:int = 0; i < n; i++) @@ -157,7 +156,7 @@ package org.apache.flex.mdl.supportClasses var ir:ISelectableItemRenderer = itemRendererFactory.createItemRenderer(dataGroup) as ISelectableItemRenderer; dataGroup.addElement(ir); ir.index = i; - ir.labelField = list.labelField; + ir.labelField = component["labelField"]; if (presentationModel) { var style:SimpleCSSStyles = new SimpleCSSStyles(); style.marginBottom = presentationModel.separatorThickness; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8253a0dc/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 681d838..b8a13b0 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"); } +Menu +{ + 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.mdl.supportClasses.ItemRendererFactoryForArrayData"); + IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory"); + IItemRenderer: ClassReference("org.apache.flex.mdl.itemRenderers.MenuItemRenderer"); +} + Toast { IBeadModel: ClassReference("org.apache.flex.mdl.beads.models.ToastModel"); http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8253a0dc/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 601d787..eb85ca0 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml @@ -36,7 +36,7 @@ <component id="SliderMouseController" class="org.apache.flex.mdl.beads.controllers.SliderMouseController"/> <component id="Badge" class="org.apache.flex.mdl.beads.Badge"/> <component id="Menu" class="org.apache.flex.mdl.Menu"/> - <component id="MenuItem" class="org.apache.flex.mdl.MenuItem"/> + <component id="MenuItemRenderer" class="org.apache.flex.mdl.itemRenderers.MenuItemRenderer"/> <component id="Card" class="org.apache.flex.mdl.Card"/> <component id="CardInner" class="org.apache.flex.mdl.supportClasses.CardInner"/> <component id="CardTitle" class="org.apache.flex.mdl.CardTitle"/>
