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] - MDL Table component and example initial implementation
Date Fri, 13 Jan 2017 19:34:21 GMT
Repository: flex-asjs
Updated Branches:
  refs/heads/develop 2e52060f3 -> b0b41aefe


MDL Table component and example initial implementation


Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/b0b41aef
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/b0b41aef
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/b0b41aef

Branch: refs/heads/develop
Commit: b0b41aefe2a419d310c010299430ba56bf87d974
Parents: 2e52060
Author: Carlos Rovira <carlosrovira@apache.org>
Authored: Fri Jan 13 20:34:17 2017 +0100
Committer: Carlos Rovira <carlosrovira@apache.org>
Committed: Fri Jan 13 20:34:17 2017 +0100

----------------------------------------------------------------------
 .../src/main/flex/MainNavigation.mxml           |   1 +
 .../flexjs/MDLExample/src/main/flex/Tables.mxml |  41 ++++++
 .../src/main/flex/models/MainNavigationModel.as |   1 +
 .../src/main/flex/models/TablesModel.as         |  41 ++++++
 .../MDLExample/src/main/flex/vos/MaterialVO.as  |  35 +++++
 .../main/flex/org/apache/flex/mdl/Navigation.as |   2 +-
 .../src/main/flex/org/apache/flex/mdl/Table.as  |  30 ++--
 .../flex/mdl/itemRenderers/TableItemRenderer.as | 145 +++++++++++++++++++
 .../src/main/resources/defaults.css             |  10 ++
 .../src/main/resources/mdl-manifest.xml         |   2 +
 10 files changed, 293 insertions(+), 15 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b0b41aef/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml b/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml
index f056f18..a2414b8 100644
--- a/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml
@@ -74,6 +74,7 @@ limitations under the License.
         <local:Toggles id="toggles_panel"/>
         <local:Snackbar id="snackbar_panel"/>
         <local:Lists id="lists_panel"/>
+        <local:Tables id="tables_panel"/>
         <local:Loading id="loading_panel"/>
         <local:Menus id="menus_panel"/>
         <local:Badges id="badges_panel"/>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b0b41aef/examples/flexjs/MDLExample/src/main/flex/Tables.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/Tables.mxml b/examples/flexjs/MDLExample/src/main/flex/Tables.mxml
new file mode 100644
index 0000000..a5591d7
--- /dev/null
+++ b/examples/flexjs/MDLExample/src/main/flex/Tables.mxml
@@ -0,0 +1,41 @@
+<?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:TabBarPanel 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:models="models.*">
+    
+    <mdl:model>
+        <models:TablesModel/>
+	</mdl:model>
+
+    <mdl:Grid>
+        <mdl:Table labelField="materialName" shadow="2">
+            <mdl:beads>
+                <js:ConstantBinding
+                    sourceID="model"
+                    sourcePropertyName="materials"
+                    destinationPropertyName="dataProvider" />
+            </mdl:beads>
+        </mdl:Table>
+    </mdl:Grid>
+    
+</mdl:TabBarPanel>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b0b41aef/examples/flexjs/MDLExample/src/main/flex/models/MainNavigationModel.as
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/models/MainNavigationModel.as b/examples/flexjs/MDLExample/src/main/flex/models/MainNavigationModel.as
index 5330ae4..12fbbf3 100644
--- a/examples/flexjs/MDLExample/src/main/flex/models/MainNavigationModel.as
+++ b/examples/flexjs/MDLExample/src/main/flex/models/MainNavigationModel.as
@@ -63,6 +63,7 @@ package models
             new NavigationLinkVO("Snackbar", "snackbar_panel"),
             new NavigationLinkVO("Toggles", "toggles_panel"),
             new NavigationLinkVO("Lists", "lists_panel"),
+            new NavigationLinkVO("Tables", "tables_panel"),
             new NavigationLinkVO("Loading", "loading_panel"),
             new NavigationLinkVO("Menu", "menus_panel"),
             new NavigationLinkVO("Badges", "badges_panel"),

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b0b41aef/examples/flexjs/MDLExample/src/main/flex/models/TablesModel.as
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/models/TablesModel.as b/examples/flexjs/MDLExample/src/main/flex/models/TablesModel.as
new file mode 100644
index 0000000..19e355e
--- /dev/null
+++ b/examples/flexjs/MDLExample/src/main/flex/models/TablesModel.as
@@ -0,0 +1,41 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 models
+{
+	import org.apache.flex.events.EventDispatcher;
+	import vos.*;
+
+	public class TablesModel extends EventDispatcher
+	{
+		/**
+		 * Used in the Tables example.
+		 */
+		private var _materials:Array = [
+			new MaterialVO("Acrylic (Transparent)", "25", "$2.90"),
+			new MaterialVO("Plywood (Birch)", "50", "$1.25"),
+			new MaterialVO("Laminate (Gold on Blue)", "10", "$2.35")
+		];
+		
+		public function get materials():Array
+		{
+			return _materials;
+		}		
+
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b0b41aef/examples/flexjs/MDLExample/src/main/flex/vos/MaterialVO.as
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/vos/MaterialVO.as b/examples/flexjs/MDLExample/src/main/flex/vos/MaterialVO.as
new file mode 100644
index 0000000..b7dc69e
--- /dev/null
+++ b/examples/flexjs/MDLExample/src/main/flex/vos/MaterialVO.as
@@ -0,0 +1,35 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 MaterialVO
+	{
+		public function MaterialVO(materialName:String = null, quantity:String = null, unitPrice:String
= null)
+		{
+			this.materialName = materialName;
+			this.quantity = quantity;
+			this.unitPrice = unitPrice;
+		}
+
+		public var materialName:String = "";
+		public var quantity:String = "";
+		public var unitPrice:String = "";
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b0b41aef/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Navigation.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Navigation.as
b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Navigation.as
index a638d1e..708983d 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Navigation.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Navigation.as
@@ -64,7 +64,7 @@ package org.apache.flex.mdl
 			positioner = element;
             element.flexjs_wrapper = this;
             
-            return positioner;
+            return element;
         }
 	}
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b0b41aef/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Table.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Table.as
b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Table.as
index 0ac0377..b23b834 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Table.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Table.as
@@ -18,7 +18,7 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.flex.mdl
 {
-	import org.apache.flex.core.ContainerBase;
+	import org.apache.flex.mdl.List;
     
     COMPILE::JS
     {
@@ -41,7 +41,7 @@ package org.apache.flex.mdl
 	 *  @playerversion AIR 2.6
 	 *  @productversion FlexJS 0.0
 	 */
-	public class Table extends ContainerBase
+	public class Table extends List
 	{
 		/**
 		 *  constructor.
@@ -67,14 +67,8 @@ package org.apache.flex.mdl
 			typeNames = "mdl-data-table mdl-js-data-table";
 
             element = document.createElement('table') as WrappedHTMLElement;
-            element.className = typeNames;
             
 			positioner = element;
-            
-            // absolute positioned children need a non-null
-            // position value in the parent.  It might
-            // get set to 'absolute' if the container is
-            // also absolutely positioned
             element.flexjs_wrapper = this;
 
             return element;
@@ -96,15 +90,20 @@ package org.apache.flex.mdl
         }
         public function set shadow(value:Number):void
         {
-			if(value == 0 || value == 2 || value == 3 || value == 4 || value == 6 || value == 8 ||
value == 16)
+			COMPILE::JS
 			{
-				_shadow = value;
+				element.classList.remove("mdl-shadow--" + _shadow + "dp");
+				
+				if(value == 2 || value == 3 || value == 4 || value == 6 || value == 8 || value == 16)
+				{
+					_shadow = value;
 
-				className += (_shadow != 0 ? " mdl-shadow--" + _shadow + "dp" : "");
-			}  
+					element.classList.add("mdl-shadow--" + _shadow + "dp");
+				}
+			}
         }
 
-		protected var _selectable:Boolean;
+		protected var _selectable:Boolean = false;
         /**
 		 *  A boolean flag to activate "mdl-data-table--selectable" effect selector.
 		 *  Applies all/individual selectable behavior (checkboxes)
@@ -123,7 +122,10 @@ package org.apache.flex.mdl
         {
 			_selectable = value;
 
-			element.classList.toggle("mdl-data-table--selectable", _selectable);
+			COMPILE::JS
+            {
+				element.classList.toggle("mdl-data-table--selectable", _selectable);
+			}
         }
 	}
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b0b41aef/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/TableItemRenderer.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/TableItemRenderer.as
b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/TableItemRenderer.as
new file mode 100644
index 0000000..c5ae510
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/TableItemRenderer.as
@@ -0,0 +1,145 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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
+{
+    COMPILE::JS
+    {
+        import org.apache.flex.core.WrappedHTMLElement;        
+    }
+
+	import org.apache.flex.html.supportClasses.MXMLItemRenderer;
+    
+	/**
+	 *  The TableItemRenderer defines the basic Item Renderer for a MDL Table Component.
+	 *
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class TableItemRenderer extends MXMLItemRenderer
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function TableItemRenderer()
+		{
+			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
+        private var textNode:Text;
+
+		/**
+		 *  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.0
+		 */
+		override public function set data(value:Object):void
+		{
+			super.data = value;
+
+            var text:String;
+			if (labelField || dataField) {
+                text = String(value[labelField]);
+            } else {
+                text = String(value);
+            }
+            
+			COMPILE::JS
+			{
+				if(textNode != null)
+				{
+					textNode.nodeValue = text;
+				}	
+			}
+		}
+
+        /**
+         * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
+         */
+        COMPILE::JS
+        override protected function createElement():WrappedHTMLElement
+        {
+            element = document.createElement('td') as WrappedHTMLElement;
+            
+			if(MXMLDescriptor == null)
+			{
+				textNode = document.createTextNode('') as Text;
+				element.appendChild(textNode);
+			}
+
+            positioner = element;
+            element.flexjs_wrapper = this;
+            
+            return element;
+        }
+
+		private var _nonNumeric:Boolean;
+        /**
+         * Activate "mdl-data-table__cell--non-numeric" class selector, for use in table
td item.
+		 * Optional 
+         */
+        public function get nonNumeric():Boolean
+        {
+            return _nonNumeric;
+        }
+        public function set nonNumeric(value:Boolean):void
+        {
+            _nonNumeric = value;
+
+            COMPILE::JS
+            {
+                element.classList.toggle("mdl-data-table__cell--non-numeric", _nonNumeric);
+            }
+        }
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b0b41aef/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 9f2dbd6..566875e 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css
@@ -56,6 +56,16 @@ List
     IItemRenderer: ClassReference("org.apache.flex.mdl.itemRenderers.ListItemRenderer");
 }
 
+Table
+{
+    IBeadView: ClassReference("org.apache.flex.mdl.beads.views.ListView");
+    IBeadModel: ClassReference("org.apache.flex.html.beads.models.ArraySelectionModel");
+    IBeadLayout: ClassReference(null); /*"org.apache.flex.html.beads.layouts.VerticalLayout"*/
+    IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.beads.DataItemRendererFactoryForArrayData");
+    IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
+    IItemRenderer: ClassReference("org.apache.flex.mdl.itemRenderers.TableItemRenderer");
+}
+
 Navigation
 {
     IBeadView: ClassReference("org.apache.flex.mdl.beads.views.ListView");

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b0b41aef/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 1b8b2a0..b4d2c9a 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
@@ -56,6 +56,8 @@
     <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="Table" class="org.apache.flex.mdl.Table"/>
+    <component id="TableItemRenderer" class="org.apache.flex.mdl.itemRenderers.TableItemRenderer"/>
     <component id="NavigationLayout" class="org.apache.flex.mdl.NavigationLayout"/>
     <component id="LayoutTitle" class="org.apache.flex.mdl.LayoutTitle"/>
     <component id="Navigation" class="org.apache.flex.mdl.Navigation"/>


Mime
View raw message