Repository: flex-asjs Updated Branches: refs/heads/develop 9bd0b05f6 -> fa022f512
MDL List with ListItemRenderer working Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/fa022f51 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/fa022f51 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/fa022f51 Branch: refs/heads/develop Commit: fa022f5122544b46cfff48586ac1fbce6dd8d1cf Parents: 9bd0b05 Author: Carlos Rovira <carlosrov...@apache.org> Authored: Sat Dec 10 12:26:35 2016 +0100 Committer: Carlos Rovira <carlosrov...@apache.org> Committed: Sat Dec 10 12:26:35 2016 +0100 ---------------------------------------------------------------------- .../itemRenderers/CustomListItemRenderer.mxml | 28 +++-- .../MDLExample/src/main/flex/vos/ProductVO.as | 27 +++++ .../flex/mdl/itemRenderers/ListItemRenderer.as | 79 ++++++-------- .../supportClasses/ListItemPrimaryContent.as | 107 +++++++++++++++++++ .../src/main/resources/mdl-manifest.xml | 1 + 5 files changed, 191 insertions(+), 51 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fa022f51/examples/flexjs/MDLExample/src/main/flex/itemRenderers/CustomListItemRenderer.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/itemRenderers/CustomListItemRenderer.mxml b/examples/flexjs/MDLExample/src/main/flex/itemRenderers/CustomListItemRenderer.mxml index 6486a27..e460014 100644 --- a/examples/flexjs/MDLExample/src/main/flex/itemRenderers/CustomListItemRenderer.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/itemRenderers/CustomListItemRenderer.mxml @@ -18,13 +18,27 @@ limitations under the License. --> <mdl:ListItemRenderer 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:js="library://ns.apache.org/flexjs/basic" + xmlns:mdl="library://ns.apache.org/flexjs/mdl" + xmlns="http://www.w3.org/1999/xhtml";> - <js:Container> - <js:Span text="hello"/> - - </js:Container> + <fx:Script> + <![CDATA[ + import vos.ProductVO; + + [Bindable("dataChange")] + public function get product():ProductVO + { + return data as ProductVO; + } + ]]> + </fx:Script> + + <js:beads> + <js:ItemRendererDataBinding /> + </js:beads> + + <mdl:ListItemPrimaryContent text="{data.label}"/> + </mdl:ListItemRenderer> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fa022f51/examples/flexjs/MDLExample/src/main/flex/vos/ProductVO.as ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/vos/ProductVO.as b/examples/flexjs/MDLExample/src/main/flex/vos/ProductVO.as new file mode 100644 index 0000000..4466035 --- /dev/null +++ b/examples/flexjs/MDLExample/src/main/flex/vos/ProductVO.as @@ -0,0 +1,27 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 +{ + [Bindable] + public class ProductVO + { + + public var label:String; + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fa022f51/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/ListItemRenderer.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/ListItemRenderer.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/ListItemRenderer.as index c09a91a..7166147 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/ListItemRenderer.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/ListItemRenderer.as @@ -20,13 +20,10 @@ package org.apache.flex.mdl.itemRenderers { COMPILE::JS { - import org.apache.flex.core.WrappedHTMLElement; - import org.apache.flex.html.beads.controllers.ItemRendererMouseController; + import org.apache.flex.core.WrappedHTMLElement; } - import org.apache.flex.events.Event; - import org.apache.flex.html.beads.ITextItemRenderer; - import org.apache.flex.html.supportClasses.DataItemRenderer; + import org.apache.flex.html.supportClasses.MXMLItemRenderer; /** * The StringItemRenderer class displays data in string form using the data's toString() @@ -37,7 +34,7 @@ package org.apache.flex.mdl.itemRenderers * @playerversion AIR 2.6 * @productversion FlexJS 0.0 */ - public class ListItemRenderer extends DataItemRenderer implements ITextItemRenderer + public class ListItemRenderer extends MXMLItemRenderer { /** * constructor. @@ -54,35 +51,29 @@ package org.apache.flex.mdl.itemRenderers className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user; } - private var _text:String = ""; - /** - * The text currently displayed by the itemRenderer instance. - * - * @langversion 3.0 - * @playerversion Flash 10.2 - * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 - */ + 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 { return _text; - - COMPILE::JS - { - return this.element.innerHTML; - } } - + public function set text(value:String):void { - _text = value; - - COMPILE::JS - { - this.element.innerHTML = value; - } + _text = value; } - + + COMPILE::JS + private var textNode:Text; + /** * Sets the data value and uses the String version of the data for display. * @@ -96,25 +87,23 @@ package org.apache.flex.mdl.itemRenderers override public function set data(value:Object):void { super.data = value; + var text:String; - if (labelField) { + if (labelField || dataField) { text = String(value[labelField]); - } else if (dataField) { - text = String(value[dataField]); } else { text = String(value); } - trace("the text: " + text); - this.text = text; + COMPILE::JS + { + if(textNode != null) + { + textNode.nodeValue = text; + } + } } - - COMPILE::JS - private var controller:ItemRendererMouseController; - - COMPILE::JS - private var backgroundView:WrappedHTMLElement; - + /** * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement */ @@ -125,13 +114,15 @@ package org.apache.flex.mdl.itemRenderers element = document.createElement('li') as WrappedHTMLElement; + if(MXMLDescriptor == null) + { + textNode = document.createTextNode('') as Text; + element.appendChild(textNode); + } + positioner = element; element.flexjs_wrapper = this; - // itemRenderers should provide something for the background to handle - // the selection and highlight - backgroundView = element; - return element; } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fa022f51/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/ListItemPrimaryContent.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/ListItemPrimaryContent.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/ListItemPrimaryContent.as new file mode 100644 index 0000000..cc84894 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/ListItemPrimaryContent.as @@ -0,0 +1,107 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.supportClasses +{ + import org.apache.flex.core.ContainerBase; + + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + /** + * The ListItemPrimaryContent class represents an HTML <span> element + * + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class ListItemPrimaryContent extends ContainerBase + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function ListItemPrimaryContent() + { + 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 + { + return _text; + } + + public function set text(value:String):void + { + _text = value; + + COMPILE::JS + { + if(textNode != null) + { + textNode.nodeValue = text; + } + } + } + + COMPILE::JS + private var textNode:Text; + + /** + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + typeNames = "mdl-list__item-primary-content"; + + element = document.createElement('span') as WrappedHTMLElement; + + if(MXMLDescriptor == null) + { + textNode = document.createTextNode('') as Text; + element.appendChild(textNode); + } + + positioner = element; + element.flexjs_wrapper = this; + + return element; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fa022f51/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 b33b148..5ed46cd 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml @@ -45,6 +45,7 @@ <component id="List" class="org.apache.flex.mdl.List"/> <component id="ListView" class="org.apache.flex.mdl.beads.views.ListView"/> <component id="ListItemRenderer" class="org.apache.flex.mdl.itemRenderers.ListItemRenderer"/> + <component id="ListItemPrimaryContent" class="org.apache.flex.mdl.supportClasses.ListItemPrimaryContent"/> <component id="ItemRendererFactoryForArrayData" class="org.apache.flex.mdl.supportClasses.ItemRendererFactoryForArrayData"/> <component id="NavigationLayout" class="org.apache.flex.mdl.NavigationLayout"/> <component id="LayoutTitle" class="org.apache.flex.mdl.LayoutTitle"/>
