FLEX-35328 - First version of DropDownList after redesign. DropDownList now use native HTML "select" with options and operates on it. - This basic desing displays DropDownList but there need to be tested several scenarios related to "change" event and model properties
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/c4ee9757 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/c4ee9757 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/c4ee9757 Branch: refs/heads/develop Commit: c4ee975771296ace477fb53ae2dd26c2265af08a Parents: fd98bf0 Author: piotrz <[email protected]> Authored: Fri Jun 23 00:35:39 2017 +0200 Committer: piotrz <[email protected]> Committed: Fri Jun 23 00:35:39 2017 +0200 ---------------------------------------------------------------------- examples/flexjs/DesktopMap/DesktopMap-app.xml | 2 +- .../MDLExample/src/main/flex/DropDownList.mxml | 3 +- .../flex/org/apache/flex/mdl/DropDownList.as | 121 +++++---- .../src/main/flex/org/apache/flex/mdl/List.as | 258 ------------------- .../beads/controllers/DropDownListController.as | 37 +-- .../flex/mdl/beads/views/DropDownListView.as | 97 ++----- .../itemRenderers/DropDownListItemRenderer.as | 157 +++++++++++ .../src/main/resources/defaults.css | 8 +- .../src/main/resources/mdl-manifest.xml | 2 + 9 files changed, 281 insertions(+), 404 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4ee9757/examples/flexjs/DesktopMap/DesktopMap-app.xml ---------------------------------------------------------------------- diff --git a/examples/flexjs/DesktopMap/DesktopMap-app.xml b/examples/flexjs/DesktopMap/DesktopMap-app.xml index 7d93fd8..5249aae 100644 --- a/examples/flexjs/DesktopMap/DesktopMap-app.xml +++ b/examples/flexjs/DesktopMap/DesktopMap-app.xml @@ -45,7 +45,7 @@ <!-- A string value of the format <0-999>.<0-999>.<0-999> that represents application version which can be used to check for application upgrade. Values can also be 1-part or 2-part. It is not necessary to have a 3-part value. An updated version of application must have a versionNumber value higher than the previous version. Required for namespace >= 2.5 . --> - <versionNumber>0.8.0</versionNumber> + <versionNumber>0.9.0</versionNumber> <!-- A string value (such as "v1", "2.5", or "Alpha 1") that represents the version of the application, as it should be shown to users. Optional. --> <!-- <versionLabel></versionLabel> --> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4ee9757/examples/flexjs/MDLExample/src/main/flex/DropDownList.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/DropDownList.mxml b/examples/flexjs/MDLExample/src/main/flex/DropDownList.mxml index 48ccfa5..72aa9e9 100644 --- a/examples/flexjs/MDLExample/src/main/flex/DropDownList.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/DropDownList.mxml @@ -29,8 +29,7 @@ limitations under the License. <models:MenuModel id="menuModel"/> </mdl:model> <mdl:Grid width="100"> - <mdl:DropDownList id="dropDownList" labelField="label" width="150" - selectedIndex="0" change="onDplChange(event)"> + <mdl:DropDownList id="dropDownList" labelField="label" width="150" change="onDplChange(event)"> <mdl:beads> <js:ConstantBinding sourceID="menuModel" http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4ee9757/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/DropDownList.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/DropDownList.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/DropDownList.as index 1e28630..8b2c430 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/DropDownList.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/DropDownList.as @@ -18,9 +18,15 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.flex.mdl { + import org.apache.flex.core.IItemRenderer; import org.apache.flex.core.ISelectionModel; - import org.apache.flex.html.Group; - import org.apache.flex.mdl.materialIcons.IMaterialIcon; + import org.apache.flex.events.ItemAddedEvent; + import org.apache.flex.html.DataContainer; + + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } [Event(name="change", type="org.apache.flex.events.Event")] @@ -39,7 +45,7 @@ package org.apache.flex.mdl * @playerversion AIR 2.6 * @productversion FlexJS 0.8 */ - public class DropDownList extends Group + public class DropDownList extends DataContainer { /** * Constructor. @@ -54,25 +60,46 @@ package org.apache.flex.mdl super(); } - private var _icon:IMaterialIcon; + COMPILE::JS + protected var _labelDisplay:HTMLLabelElement; + COMPILE::JS + protected var _dropDown:HTMLSelectElement; - /** - * The data for display by the DropDownList. - * - * @langversion 3.0 - * @playerversion Flash 10.2 - * @playerversion AIR 2.6 - * @productversion FlexJS 0.8 - */ - public function get dataProvider():Object - { - return ISelectionModel(model).dataProvider; - } - public function set dataProvider(value:Object):void + COMPILE::JS { - ISelectionModel(model).dataProvider = value; - } + /** + * @flexjsignorecoercion HTMLSelectElement + */ + public function get dropDown():HTMLSelectElement + { + return _dropDown; + } + /** + * @flexjsignorecoercion HTMLSelectElement + */ + public function set dropDown(value:HTMLSelectElement):void + { + _dropDown = value; + } + + /** + * @flexjsignorecoercion HTMLLabelElement + */ + public function get labelDisplay():HTMLLabelElement + { + return _labelDisplay; + } + + /** + * @flexjsignorecoercion HTMLLabelElement + */ + public function set labelDisplay(value:HTMLLabelElement):void + { + _labelDisplay = value; + } + } + [Bindable("change")] /** * @copy org.apache.flex.core.ISelectionModel#selectedIndex @@ -109,40 +136,48 @@ package org.apache.flex.mdl ISelectionModel(model).selectedItem = value; } - /** - * @copy org.apache.flex.core.ISelectionModel#labelField - * - * @langversion 3.0 - * @playerversion Flash 10.2 - * @playerversion AIR 2.6 - * @productversion FlexJS 0.8 - */ - public function get labelField():String + override public function removeAllItemRenderers():void { - return ISelectionModel(model).labelField; + COMPILE::JS + { + var options:HTMLOptionsCollection = dropDown.options; + var optionsCount:int = options.length; + + for (var i:int = 1; i < optionsCount; i++) + { + dropDown.remove(i); + } + } } - public function set labelField(value:String):void + override public function addItemRenderer(renderer:IItemRenderer):void { - ISelectionModel(model).labelField = value; + COMPILE::JS + { + dropDown.appendChild(renderer.element); + } + + var newEvent:ItemAddedEvent = new ItemAddedEvent("itemAdded"); + newEvent.item = renderer; + + dispatchEvent(newEvent); } /** - * DropDownList material icon - default: MaterialIconType.ARROW_DROP_DOWN - * - * @langversion 3.0 - * @playerversion Flash 10.2 - * @playerversion AIR 2.6 - * @productversion FlexJS 0.8 + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement */ - public function get icon():IMaterialIcon + COMPILE::JS + override protected function createElement():WrappedHTMLElement { - return _icon; - } + typeNames = 'mdl-textfield mdl-js-textfield'; + + element = document.createElement('div') as WrappedHTMLElement; + element.classList.add("mdl-textfield--floating-label"); - public function set icon(value:IMaterialIcon):void - { - _icon = value; + positioner = element; + element.flexjs_wrapper = this; + + return element; } } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4ee9757/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/List.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/List.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/List.as index 3c8d3aa..23c1a3c 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/List.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/List.as @@ -18,19 +18,6 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.flex.mdl { - import org.apache.flex.core.IItemRenderer; - import org.apache.flex.core.IItemRendererParent; - import org.apache.flex.core.IList; - import org.apache.flex.core.ILayoutHost; - import org.apache.flex.core.ILayoutParent; - import org.apache.flex.core.ILayoutView; - import org.apache.flex.core.ISelectionModel; - import org.apache.flex.core.IFactory; - import org.apache.flex.core.UIBase; - import org.apache.flex.core.IChild; - import org.apache.flex.events.ItemAddedEvent; - import org.apache.flex.events.ItemRemovedEvent; - import org.apache.flex.core.ListBase; import org.apache.flex.html.List; COMPILE::JS @@ -68,249 +55,4 @@ package org.apache.flex.mdl return positioner; } } - -// This is the previous version of List. Please discard when sure the new List class works. -// -// public class List extends UIBase implements IItemRendererParent, ILayoutParent, ILayoutHost, ILayoutView, IList -// { -// /** -// * Constructor. -// * -// * @langversion 3.0 -// * @playerversion Flash 10.2 -// * @playerversion AIR 2.6 -// * @productversion FlexJS 0.8 -// */ -// public function List() -// { -// super(); -// -// className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user; -// } -// -// /** -// * @copy org.apache.flex.core.IDataProviderModel#dataProvider -// * -// * @langversion 3.0 -// * @playerversion Flash 10.2 -// * @playerversion AIR 2.6 -// * @productversion FlexJS 0.8 -// */ -// public function get dataProvider():Object -// { -// return ISelectionModel(model).dataProvider; -// } -// /** -// * @private -// */ -// public function set dataProvider(value:Object):void -// { -// ISelectionModel(model).dataProvider = value; -// } -// -// /** -// * @copy org.apache.flex.core.IDataProviderModel#labelField -// * -// * @langversion 3.0 -// * @playerversion Flash 10.2 -// * @playerversion AIR 2.6 -// * @productversion FlexJS 0.8 -// */ -// public function get labelField():String -// { -// return ISelectionModel(model).labelField; -// } -// /** -// * @private -// */ -// public function set labelField(value:String):void -// { -// ISelectionModel(model).labelField = value; -// } -// -// /** -// * get layout host -// * -// * @langversion 3.0 -// * @playerversion Flash 10.2 -// * @playerversion AIR 2.6 -// * @productversion FlexJS 0.8 -// */ -// public function getLayoutHost():ILayoutHost -// { -// return this; -// } -// -// /** -// * get content view -// * -// * @langversion 3.0 -// * @playerversion Flash 10.2 -// * @playerversion AIR 2.6 -// * @productversion FlexJS 0.8 -// */ -// public function get contentView():ILayoutView -// { -// return this; -// } -// -// /** -// * @copy org.apache.flex.core.IList#dataGroup -// * -// * @langversion 3.0 -// * @playerversion Flash 10.2 -// * @playerversion AIR 2.6 -// * @productversion FlexJS 0.8 -// */ -// public function get dataGroup():IItemRendererParent -// { -// return this; -// } -// -// private var _itemRenderer:IFactory; -// -// /** -// * The class or factory used to display each item. -// * -// * @langversion 3.0 -// * @playerversion Flash 10.2 -// * @playerversion AIR 2.6 -// * @productversion FlexJS 0.0 -// */ -// public function get itemRenderer():IFactory -// { -// return _itemRenderer; -// } -// public function set itemRenderer(value:IFactory):void -// { -// _itemRenderer = value; -// } -// -// /** -// * Returns whether or not the itemRenderer property has been set. -// * -// * @see org.apache.flex.core.IItemRendererProvider -// * -// * @langversion 3.0 -// * @playerversion Flash 10.2 -// * @playerversion AIR 2.6 -// * @productversion FlexJS 0.8 -// */ -// public function get hasItemRenderer():Boolean -// { -// var result:Boolean = false; -// -// COMPILE::SWF { -// result = _itemRenderer != null; -// } -// -// COMPILE::JS { -// var test:* = _itemRenderer; -// result = _itemRenderer !== null && test !== undefined; -// } -// -// return result; -// } -// -// /** -// * @copy org.apache.flex.core.IItemRendererParent#addItemRenderer() -// * @private -// * -// * @langversion 3.0 -// * @playerversion Flash 10.2 -// * @playerversion AIR 2.6 -// * @productversion FlexJS 0.8 -// */ -// public function addItemRenderer(renderer:IItemRenderer):void -// { -// addElement(renderer, true); -// -// var newEvent:ItemAddedEvent = new ItemAddedEvent("itemAdded"); -// newEvent.item = renderer; -// -// dispatchEvent(newEvent); -// } -// -// /** -// * @copy org.apache.flex.core.IItemRendererParent#removeItemRenderer() -// * @private -// * -// * @langversion 3.0 -// * @playerversion Flash 10.2 -// * @playerversion AIR 2.6 -// * @productversion FlexJS 0.8 -// */ -// public function removeItemRenderer(renderer:IItemRenderer):void -// { -// removeElement(renderer, true); -// -// var newEvent:ItemRemovedEvent = new ItemRemovedEvent("itemRemoved"); -// newEvent.item = renderer; -// -// dispatchEvent(newEvent); -// } -// -// /** -// * get item renderer for index -// * -// * @langversion 3.0 -// * @playerversion Flash 10.2 -// * @playerversion AIR 2.6 -// * @productversion FlexJS 0.8 -// */ -// public function getItemRendererForIndex(index:int):IItemRenderer -// { -// var child:IItemRenderer = getElementAt(index) as IItemRenderer; -// return child; -// } -// -// /** -// * remove all elements -// * -// * @langversion 3.0 -// * @playerversion Flash 10.2 -// * @playerversion AIR 2.6 -// * @productversion FlexJS 0.8 -// */ -// public function removeAllItemRenderers():void -// { -// while (numElements > 0) { -// var child:IChild = getElementAt(0); -// removeElement(child); -// } -// } -// -// /** -// * update all item renderers -// * -// * @langversion 3.0 -// * @playerversion Flash 10.2 -// * @playerversion AIR 2.6 -// * @productversion FlexJS 0.8 -// */ -// public function updateAllItemRenderers():void -// { -// //todo: IItemRenderer does not define update function but DataItemRenderer does -// //for(var i:int = 0; i < numElements; i++) { -// // var child:IItemRenderer = getElementAt(i) as IItemRenderer; -// // child.update(); -// //} -// } -// -// /** -// * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement -// */ -// COMPILE::JS -// override protected function createElement():WrappedHTMLElement -// { -// typeNames = "mdl-list"; -// -// element = document.createElement('ul') as WrappedHTMLElement; -// -// positioner = element; -// element.flexjs_wrapper = this; -// -// return positioner; -// } -// } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4ee9757/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/controllers/DropDownListController.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/controllers/DropDownListController.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/controllers/DropDownListController.as index 32268db..53c37ef 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/controllers/DropDownListController.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/controllers/DropDownListController.as @@ -22,15 +22,14 @@ package org.apache.flex.mdl.beads.controllers import org.apache.flex.core.ISelectionModel; import org.apache.flex.core.IStrand; import org.apache.flex.events.IEventDispatcher; + import org.apache.flex.mdl.DropDownList; import org.apache.flex.mdl.beads.views.DropDownListView; import org.apache.flex.events.Event; - import org.apache.flex.events.MouseEvent; /** * The DropDownListController class bead handles mouse events on the - * drop down list (org.apache.flex.mdl.Menu) component parts and - * dispatches change event on behalf of the DropDownList - * + * drop down list component parts and dispatches change event on behalf of the DropDownList + * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 @@ -75,35 +74,25 @@ package org.apache.flex.mdl.beads.controllers { _strand = value; - model = _strand.getBeadByType(ISelectionModel) as ISelectionModel; - dropDownListView = value.getBeadByType(DropDownListView) as DropDownListView; + var dropDownList:DropDownList = (value as DropDownList); - dropDownListView.dropDown.addEventListener(MouseEvent.CLICK, onDisplayItemClick); + model = _strand.getBeadByType(ISelectionModel) as ISelectionModel; - setLabelDisplayValue(); + COMPILE::JS + { + dropDownList.dropDown.addEventListener("onchange", onDisplayItemClick, false); + } } - private function onDisplayItemClick(event:MouseEvent):void + COMPILE::JS + private function onDisplayItemClick(event:Event):void { var eventTarget:Object = event.target; - model.selectedIndex = eventTarget.index; - model.selectedItem = eventTarget.data; - - setLabelDisplayValue(); + model.selectedIndex = eventTarget.selectedIndex; + model.selectedItem = model.dataProvider[model.selectedIndex]; IEventDispatcher(_strand).dispatchEvent(new Event(Event.CHANGE)); } - - private function setLabelDisplayValue():void - { - if (model.selectedIndex > -1 && model.dataProvider != null) - { - var selectedItem:Object = model.dataProvider[model.selectedIndex]; - dropDownListView.labelDisplay.text = !model.labelField ? - selectedItem as String : - selectedItem[model.labelField]; - } - } } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4ee9757/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/views/DropDownListView.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/views/DropDownListView.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/views/DropDownListView.as index ae1d2df..51960d6 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/views/DropDownListView.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/views/DropDownListView.as @@ -18,14 +18,9 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.flex.mdl.beads.views { - import org.apache.flex.core.ISelectionModel; import org.apache.flex.core.IStrand; - import org.apache.flex.html.Div; - import org.apache.flex.html.beads.GroupView; + import org.apache.flex.html.beads.DataContainerView; import org.apache.flex.mdl.DropDownList; - import org.apache.flex.mdl.Menu; - import org.apache.flex.mdl.materialIcons.MaterialIcon; - import org.apache.flex.mdl.materialIcons.MaterialIconType; import org.apache.flex.events.Event; /** @@ -39,28 +34,20 @@ package org.apache.flex.mdl.beads.views * @playerversion AIR 2.6 * @productversion FlexJS 0.8 */ - public class DropDownListView extends GroupView + public class DropDownListView extends DataContainerView { public function DropDownListView() { super(); } - protected var _dropDown:Menu; - protected var _labelDisplay:Div; - - public function get dropDown():Menu - { - return _dropDown; - } - - public function get labelDisplay():Div - { - return _labelDisplay; - } /** * @copy org.apache.flex.core.IBead#strand * + * @flexjsignorecoercion HTMLLabelElement + * @flexjsignorecoercion HTMLSelectElement + * @flexjsignorecoercion HTMLOptionElement + * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 @@ -70,32 +57,26 @@ package org.apache.flex.mdl.beads.views { super.strand = value; - var dropDownList:DropDownList = (value as DropDownList); - - _dropDown = new Menu(); - _dropDown.bottom = true; - COMPILE::JS { - _dropDown.element.addEventListener("mdl-componentupgraded", onElementMdlComponentUpgraded, false); - setIdForDisplayList(); - } + var dropDownList:DropDownList = (value as DropDownList); - _labelDisplay = new Div(); + dropDownList.labelDisplay = document.createElement('label') as HTMLLabelElement; + dropDownList.labelDisplay.classList.add("mdl-textfield__label"); - if (!dropDownList.icon) - { - var dropDownIcon:MaterialIcon = new MaterialIcon(); - dropDownIcon.text = MaterialIconType.ARROW_DROP_DOWN; - dropDownList.icon = dropDownIcon; - } + dropDownList.dropDown = document.createElement('select') as HTMLSelectElement; + dropDownList.dropDown.classList.add("mdl-textfield__input"); + + var emptyOption:HTMLOptionElement = document.createElement('option') as HTMLOptionElement; + emptyOption.style.display = "none"; - var model:ISelectionModel = _strand.getBeadByType(ISelectionModel) as ISelectionModel; - _dropDown.model = model; + dropDownList.dropDown.appendChild(emptyOption); + + setNameForDropDownList(); - dropDownList.addElement(_labelDisplay); - dropDownList.addElement(dropDownList.icon); - dropDownList.addElement(_dropDown); + dropDownList.element.appendChild(dropDownList.labelDisplay); + dropDownList.element.appendChild(dropDownList.dropDown); + } } override protected function handleInitComplete(event:Event):void @@ -105,45 +86,17 @@ package org.apache.flex.mdl.beads.views COMPILE::JS { host.element.classList.add("DropDownList"); - - setWidthForDropDownListComponents(); - } - } - - COMPILE::JS - private function setIdForDisplayList():void - { - if (!host.element.id) - { - host.element.id = "dropDownList" + Math.random(); } - - _dropDown.dataMdlFor = host.element.id; } COMPILE::JS - private function setWidthForDropDownListComponents():void + private function setNameForDropDownList():void { - if (!isNaN(host.width)) - { - _dropDown.width = host.width - 1; - _labelDisplay.width = host.width - 25; - } - else - { - _labelDisplay.width = 30; - } - } + var dropDownList:DropDownList = (_strand as DropDownList); - COMPILE::JS - private function onElementMdlComponentUpgraded(event:Event):void - { - if (!event.currentTarget) return; - if (_dropDown) - { - _dropDown.element.removeEventListener("mdl-componentupgraded", onElementMdlComponentUpgraded, false); - _dropDown.element.style.minWidth = "40px"; - } + var name:String = "dropDownList" + Math.random(); + dropDownList.labelDisplay.htmlFor = name; + dropDownList.dropDown.name = name; } } } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4ee9757/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/DropDownListItemRenderer.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/DropDownListItemRenderer.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/DropDownListItemRenderer.as new file mode 100644 index 0000000..65e13e1 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/DropDownListItemRenderer.as @@ -0,0 +1,157 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 DropDownListItemRenderer class creates a DropDownList menu item + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ + public class DropDownListItemRenderer extends MXMLItemRenderer + { + /** + * Constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ + public function DropDownListItemRenderer() + { + 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 menu item + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.8 + */ + 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; + + COMPILE::JS + private var item:HTMLOptionElement; + + /** + * 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.8 + */ + override public function set data(value:Object):void + { + super.data = value; + + var text:String; + if (labelField) + { + text = String(value[labelField]); + } + else + { + text = String(value); + } + + COMPILE::JS + { + if (dataField) + { + item.value = String(value[dataField]); + } + else + { + item.value = String(value); + } + + if(textNode != null) + { + textNode.nodeValue = text; + } + } + } + + /** + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + * @flexjsignorecoercion HTMLOptionElement + * + * @flexjsignorecoercion Text + */ + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + item = document.createElement('option') as HTMLOptionElement; + + textNode = document.createTextNode('') as Text; + item.appendChild(textNode); + + element = item as WrappedHTMLElement; + + positioner = element; + element.flexjs_wrapper = this; + + return element; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4ee9757/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 fa2d39a..347c226 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css @@ -155,11 +155,11 @@ DropDownList { IBeadView: ClassReference("org.apache.flex.mdl.beads.views.DropDownListView"); IBeadModel: ClassReference("org.apache.flex.html.beads.models.ArraySelectionModel"); - IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.HorizontalFlexLayout"); + IBeadLayout: ClassReference(null); IBeadController: ClassReference("org.apache.flex.mdl.beads.controllers.DropDownListController"); - border: 1.2px solid #F8F8F8; - cursor: pointer; - align-items: center; + IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.beads.DataItemRendererFactoryForArrayData"); + IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory"); + IItemRenderer: ClassReference("org.apache.flex.mdl.itemRenderers.DropDownListItemRenderer"); } @media -flex-flash http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c4ee9757/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 c74d257..53ce2fb 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml @@ -121,4 +121,6 @@ <component id="UpgradeChildren" class="org.apache.flex.mdl.beads.UpgradeChildren"/> <component id="DropDownList" class="org.apache.flex.mdl.DropDownList"/> <component id="DropDownListView" class="org.apache.flex.mdl.beads.views.DropDownListView"/> + <component id="DropDownListItemRenderer" class="org.apache.flex.mdl.itemRenderers.DropDownListItemRenderer"/>W + </componentPackage>
