Repository: flex-asjs Updated Branches: refs/heads/develop f8aa55e89 -> 7632be7bf
List with two lines, secondary content, subtitle and secondary info Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/7632be7b Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/7632be7b Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/7632be7b Branch: refs/heads/develop Commit: 7632be7bf6dae3a0629443fd17df0fb0fd3762b7 Parents: f8aa55e Author: Carlos Rovira <carlosrov...@apache.org> Authored: Sat Dec 10 18:48:40 2016 +0100 Committer: Carlos Rovira <carlosrov...@apache.org> Committed: Sat Dec 10 18:48:40 2016 +0100 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/Lists.mxml | 9 +++ .../AvatarAndActionTwoLineListItemRenderer.mxml | 75 +++++++++++++++++ .../src/main/flex/models/ListsModel.as | 6 +- .../MDLExample/src/main/flex/vos/ActorVO.as | 4 +- .../src/main/resources/mdl-styles.css | 9 +++ .../src/main/flex/org/apache/flex/html/A.as | 3 - .../flex/mdl/beads/ListItemSecondaryContent.as | 85 ++++++++++++++++++++ .../flex/mdl/beads/ListItemSecondaryInfo.as | 85 ++++++++++++++++++++ .../apache/flex/mdl/beads/ListItemSubTitle.as | 85 ++++++++++++++++++++ .../flex/mdl/itemRenderers/ListItemRenderer.as | 17 ++++ .../src/main/resources/mdl-manifest.xml | 3 + 11 files changed, 374 insertions(+), 7 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7632be7b/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 36a8bcf..9762d93 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Lists.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Lists.mxml @@ -64,6 +64,15 @@ limitations under the License. </mdl:beads> </mdl:List> + <mdl:List labelField="actorName" className="avatarAndActionTwoLineListItemRenderer"> + <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/7632be7b/examples/flexjs/MDLExample/src/main/flex/itemRenderers/AvatarAndActionTwoLineListItemRenderer.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/itemRenderers/AvatarAndActionTwoLineListItemRenderer.mxml b/examples/flexjs/MDLExample/src/main/flex/itemRenderers/AvatarAndActionTwoLineListItemRenderer.mxml new file mode 100644 index 0000000..43c9aaa --- /dev/null +++ b/examples/flexjs/MDLExample/src/main/flex/itemRenderers/AvatarAndActionTwoLineListItemRenderer.mxml @@ -0,0 +1,75 @@ +<?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"; + twoLine="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 text="{actor.actorName}"> + <mdl:beads> + <mdl:ListItemPrimaryContent/> + <mdl:MaterialIconPerson listItemAvatar="true"/> + </mdl:beads> + <js:Span text="{actor.episodes}"> + <mdl:beads> + <mdl:ListItemSubTitle/> + </mdl:beads> + </js:Span> + </js:Span> + + <js:Span> + <mdl:beads> + <mdl:ListItemSecondaryContent/> + </mdl:beads> + <js:Span text="Actor"> + <mdl:beads> + <mdl:ListItemSecondaryInfo/> + </mdl:beads> + </js:Span> + <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/7632be7b/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 3480999..0729418 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"), - new ActorVO("Aaron Paul"), - new ActorVO("Bob Odenkirk") + new ActorVO("Bryan Cranston", "62 Episodes"), + new ActorVO("Aaron Paul", "61 Episodes"), + new ActorVO("Bob Odenkirk", "59 Episodes") ]; public function get actors():Array http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7632be7b/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 808948f..a163323 100644 --- a/examples/flexjs/MDLExample/src/main/flex/vos/ActorVO.as +++ b/examples/flexjs/MDLExample/src/main/flex/vos/ActorVO.as @@ -21,11 +21,13 @@ package vos [Bindable] public class ActorVO { - public function ActorVO(actorName:String = null) + public function ActorVO(actorName:String = null, episodes:String = null) { this.actorName = actorName; + this.episodes = episodes; } public var actorName:String = ""; + public var episodes:String = ""; } } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7632be7b/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 67716a0..adaca61 100644 --- a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css +++ b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css @@ -43,19 +43,28 @@ js|Image .actorNameListItemRenderer { + width: 300px; IItemRenderer: ClassReference("itemRenderers.ActorNameListItemRenderer"); } .actorNameAndIconListItemRenderer { + width: 300px; IItemRenderer: ClassReference("itemRenderers.ActorNameAndIconListItemRenderer"); } .avatarAndActionListItemRenderer { + width: 300px; IItemRenderer: ClassReference("itemRenderers.AvatarAndActionListItemRenderer"); } +.avatarAndActionTwoLineListItemRenderer +{ + width: 300px; + IItemRenderer: ClassReference("itemRenderers.AvatarAndActionTwoLineListItemRenderer"); +} + /*.customListItemRenderer { IItemRenderer: ClassReference("itemRenderers.CustomListItemRenderer"); http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7632be7b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/A.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/A.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/A.as index a4f5619..fd8f9b5 100644 --- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/A.as +++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/A.as @@ -127,11 +127,8 @@ package org.apache.flex.html element = a as WrappedHTMLElement; positioner = element; - positioner.style.position = 'relative'; element.flexjs_wrapper = this; - //className = typeNames = 'A'; - return element; } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7632be7b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ListItemSecondaryContent.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ListItemSecondaryContent.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ListItemSecondaryContent.as new file mode 100644 index 0000000..b3691a3 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ListItemSecondaryContent.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 ListItemSecondaryContent 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 ListItemSecondaryContent implements IBead + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function ListItemSecondaryContent() + { + 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-secondary-content"); + } + else + { + throw new Error("Host component must be an MDL element."); + } + } + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7632be7b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ListItemSecondaryInfo.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ListItemSecondaryInfo.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ListItemSecondaryInfo.as new file mode 100644 index 0000000..82cd173 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ListItemSecondaryInfo.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 ListItemSecondaryInfo 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 ListItemSecondaryInfo implements IBead + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function ListItemSecondaryInfo() + { + 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-secondary-info"); + } + else + { + throw new Error("Host component must be an MDL element."); + } + } + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7632be7b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ListItemSubTitle.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ListItemSubTitle.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ListItemSubTitle.as new file mode 100644 index 0000000..392a651 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ListItemSubTitle.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 ListItemSubTitle 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 ListItemSubTitle implements IBead + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function ListItemSubTitle() + { + 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-sub-title"); + } + else + { + throw new Error("Host component must be an MDL element."); + } + } + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7632be7b/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 7166147..d49c7ed 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 @@ -126,5 +126,22 @@ package org.apache.flex.mdl.itemRenderers return element; } + private var _twoLine:Boolean; + /** + * Activate "mdl-list__item--two-line" class selector, for use in list item + */ + public function get twoLine():Boolean + { + return _twoLine; + } + public function set twoLine(value:Boolean):void + { + _twoLine = value; + + COMPILE::JS + { + element.classList.toggle("mdl-list__item--two-line", _twoLine); + } + } } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/7632be7b/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 1fb51ba..9f1a382 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml @@ -46,7 +46,10 @@ <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.beads.ListItemPrimaryContent"/> + <component id="ListItemSecondaryContent" class="org.apache.flex.mdl.beads.ListItemSecondaryContent"/> <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="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"/>
