Repository: flex-asjs Updated Branches: refs/heads/develop 66dd90a58 -> 525e56546
Last things for MDL Lists Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/525e5654 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/525e5654 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/525e5654 Branch: refs/heads/develop Commit: 525e565460abdbdfbe195793e9b4ef297d1c5413 Parents: 66dd90a Author: Carlos Rovira <carlosrov...@apache.org> Authored: Sat Dec 10 19:35:43 2016 +0100 Committer: Carlos Rovira <carlosrov...@apache.org> Committed: Sat Dec 10 19:35:43 2016 +0100 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/Lists.mxml | 9 +++ ...vatarAndActionThreeLineListItemRenderer.mxml | 68 ++++++++++++++++ .../src/main/flex/models/ListsModel.as | 6 +- .../MDLExample/src/main/flex/vos/ActorVO.as | 4 +- .../src/main/resources/mdl-styles.css | 6 ++ .../apache/flex/mdl/beads/ListItemTextBody.as | 85 ++++++++++++++++++++ .../flex/mdl/itemRenderers/ListItemRenderer.as | 25 +++++- .../src/main/resources/mdl-manifest.xml | 1 + 8 files changed, 197 insertions(+), 7 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/525e5654/examples/flexjs/MDLExample/src/main/flex/Lists.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Lists.mxml b/examples/flexjs/MDLExample/src/main/flex/Lists.mxml index 9762d93..86573e3 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Lists.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Lists.mxml @@ -73,6 +73,15 @@ limitations under the License. </mdl:beads> </mdl:List> + <mdl:List labelField="actorName" className="avatarAndActionThreeLineListItemRenderer"> + <mdl:beads> + <js:ConstantBinding + sourceID="model" + sourcePropertyName="actors" + destinationPropertyName="dataProvider" /> + </mdl:beads> + </mdl:List> + </mdl:Grid> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/525e5654/examples/flexjs/MDLExample/src/main/flex/itemRenderers/AvatarAndActionThreeLineListItemRenderer.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/itemRenderers/AvatarAndActionThreeLineListItemRenderer.mxml b/examples/flexjs/MDLExample/src/main/flex/itemRenderers/AvatarAndActionThreeLineListItemRenderer.mxml new file mode 100644 index 0000000..da139f3 --- /dev/null +++ b/examples/flexjs/MDLExample/src/main/flex/itemRenderers/AvatarAndActionThreeLineListItemRenderer.mxml @@ -0,0 +1,68 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + +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: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"; + threeLine="true"> + + <fx:Script> + <![CDATA[ + import vos.ActorVO; + + [Bindable("dataChange")] + public function get actor():ActorVO + { + return data as ActorVO; + } + ]]> + </fx:Script> + + <js:beads> + <js:ItemRendererDataBinding /> + </js:beads> + + <js:Span> + <mdl:beads> + <mdl:ListItemPrimaryContent/> + <mdl:MaterialIconPerson listItemAvatar="true"/> + </mdl:beads> + <js:Span text="{actor.actorName}"/> + <js:Span text="{actor.description}"> + <mdl:beads> + <mdl:ListItemTextBody/> + </mdl:beads> + </js:Span> + </js:Span> + + <js:Span> + <mdl:beads> + <mdl:ListItemSecondaryContent/> + </mdl:beads> + <js:A href="#"> + <mdl:beads> + <mdl:ListItemSecondaryAction/> + <mdl:MaterialIconStar/> + </mdl:beads> + </js:A> + </js:Span> + +</mdl:ListItemRenderer> + http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/525e5654/examples/flexjs/MDLExample/src/main/flex/models/ListsModel.as ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/models/ListsModel.as b/examples/flexjs/MDLExample/src/main/flex/models/ListsModel.as index 0729418..6b780fe 100644 --- a/examples/flexjs/MDLExample/src/main/flex/models/ListsModel.as +++ b/examples/flexjs/MDLExample/src/main/flex/models/ListsModel.as @@ -42,9 +42,9 @@ package models * Used in the List example. */ private var _actors:Array = [ - new ActorVO("Bryan Cranston", "62 Episodes"), - new ActorVO("Aaron Paul", "61 Episodes"), - new ActorVO("Bob Odenkirk", "59 Episodes") + new ActorVO("Bryan Cranston", "62 Episodes", "Bryan Cranston played the role of Walter in Breaking Bad. He is also known for playing Hal in Malcom in the Middle."), + new ActorVO("Aaron Paul", "61 Episodes", "Aaron Paul played the role of Jesse in Breaking Bad. He also featured in the 'Need For Speed' Movie."), + new ActorVO("Bob Odenkirk", "59 Episodes", "Bob Odinkrik played the role of Saul in Breaking Bad. Due to public fondness for the character, Bob stars in his own show now, called 'Better Call Saul'.") ]; public function get actors():Array http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/525e5654/examples/flexjs/MDLExample/src/main/flex/vos/ActorVO.as ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/vos/ActorVO.as b/examples/flexjs/MDLExample/src/main/flex/vos/ActorVO.as index a163323..32282fe 100644 --- a/examples/flexjs/MDLExample/src/main/flex/vos/ActorVO.as +++ b/examples/flexjs/MDLExample/src/main/flex/vos/ActorVO.as @@ -21,13 +21,15 @@ package vos [Bindable] public class ActorVO { - public function ActorVO(actorName:String = null, episodes:String = null) + public function ActorVO(actorName:String = null, episodes:String = null, description:String = null) { this.actorName = actorName; this.episodes = episodes; + this.description = description; } public var actorName:String = ""; public var episodes:String = ""; + public var description:String = ""; } } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/525e5654/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 adaca61..d473445 100644 --- a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css +++ b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css @@ -65,6 +65,12 @@ js|Image IItemRenderer: ClassReference("itemRenderers.AvatarAndActionTwoLineListItemRenderer"); } +.avatarAndActionThreeLineListItemRenderer +{ + width: 650px; + IItemRenderer: ClassReference("itemRenderers.AvatarAndActionThreeLineListItemRenderer"); +} + /*.customListItemRenderer { IItemRenderer: ClassReference("itemRenderers.CustomListItemRenderer"); http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/525e5654/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ListItemTextBody.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ListItemTextBody.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ListItemTextBody.as new file mode 100644 index 0000000..4105674 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ListItemTextBody.as @@ -0,0 +1,85 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.beads +{ + import org.apache.flex.core.IStrand; + import org.apache.flex.core.IBead; + import org.apache.flex.core.UIBase; + + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + /** + * The ListItemTextBody class decorates a tag element in a list item renderer + * + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class ListItemTextBody implements IBead + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function ListItemTextBody() + { + super(); + } + + private var host:UIBase; + + private var _strand:IStrand; + /** + * @copy org.apache.flex.core.IBead#strand + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + * @flexjsignorecoercion org.apache.flex.mdl.TextInput; + */ + public function set strand(value:IStrand):void + { + _strand = value; + + COMPILE::JS + { + host = value as UIBase; + + if (host.element is HTMLElement) + { + host.element.classList.add("mdl-list__item-text-body"); + } + else + { + throw new Error("Host component must be an MDL element."); + } + } + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/525e5654/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 d49c7ed..b460b71 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 @@ -26,8 +26,7 @@ package org.apache.flex.mdl.itemRenderers import org.apache.flex.html.supportClasses.MXMLItemRenderer; /** - * The StringItemRenderer class displays data in string form using the data's toString() - * function. + * The ListItemRenderer defines the basic Item Renderer for a MDL List Component. * * @langversion 3.0 * @playerversion Flash 10.2 @@ -128,7 +127,8 @@ package org.apache.flex.mdl.itemRenderers private var _twoLine:Boolean; /** - * Activate "mdl-list__item--two-line" class selector, for use in list item + * Activate "mdl-list__item--two-line" class selector, for use in list item. + * Optional Two Line List Variant */ public function get twoLine():Boolean { @@ -143,5 +143,24 @@ package org.apache.flex.mdl.itemRenderers element.classList.toggle("mdl-list__item--two-line", _twoLine); } } + + private var _threeLine:Boolean; + /** + * Activate "mdl-list__item--three-line" class selector, for use in list item. + * Optional Three Line List Variant + */ + public function get threeLine():Boolean + { + return _threeLine; + } + public function set threeLine(value:Boolean):void + { + _threeLine = value; + + COMPILE::JS + { + element.classList.toggle("mdl-list__item--three-line", _threeLine); + } + } } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/525e5654/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 9f1a382..d831714 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml @@ -50,6 +50,7 @@ <component id="ListItemSecondaryAction" class="org.apache.flex.mdl.beads.ListItemSecondaryAction"/> <component id="ListItemSubTitle" class="org.apache.flex.mdl.beads.ListItemSubTitle"/> <component id="ListItemSecondaryInfo" class="org.apache.flex.mdl.beads.ListItemSecondaryInfo"/> + <component id="ListItemTextBody" class="org.apache.flex.mdl.beads.ListItemTextBody"/> <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"/>
