flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject git commit: [flex-asjs] [refs/heads/develop] - Last things for MDL Lists
Date Sat, 10 Dec 2016 18:35:47 GMT
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 <carlosrovira@apache.org>
Authored: Sat Dec 10 19:35:43 2016 +0100
Committer: Carlos Rovira <carlosrovira@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"/>


Mime
View raw message