You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ca...@apache.org on 2017/01/13 19:34:21 UTC
git commit: [flex-asjs] [refs/heads/develop] - MDL Table component
and example initial implementation
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 <ca...@apache.org>
Authored: Fri Jan 13 20:34:17 2017 +0100
Committer: Carlos Rovira <ca...@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"/>
Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table
component and example initial implementation
Posted by sankar <sa...@gmail.com>.
If I'm not wrong, present FlexJS MDL style is little out-of-date. I found
this link to MDL git site, where it's mentioned that
'mdl-data-table--selectable' use is deprecated. But present FlexJS Table
class still using this specific style:
https://github.com/google/material-design-lite/wiki/Deprecations#automatic-selection-checkboxes.
Anyway, following the current style way, I able to address the selected
items problem to some extent. Please, check this link for a demo:
http://moonshine-ide.com/wp-tests/santanu/mdlTests/MDLExampleTableOnly.html.
*Known Issue: *
# Clicking on column header checkbox do not updates selected items to Table
class.
# At present working with Table having checkbox only
*Covered:*
# Click on row selects/highlights the row, along with it's associated
checkbox selection
# Clicking on row or selecting by checkbox both works similar way
# Row selection now dispatches table's Event.CHANGE event
# New field added to table 'selectedItems', an Array of selected objects
Carlos, if you want to take a look into the Table and renderer
implementation, I can pass you the code files. I'm sure mine implementation
may not be as fine as if others will do, and having more understanding to
these, but anyway I able to do this much and it's working for me.
Thanks!
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/Re-git-commit-flex-asjs-refs-heads-develop-MDL-Table-component-and-example-initial-implementation-tp58260p58727.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table
component and example initial implementation
Posted by sankar <sa...@gmail.com>.
I added a new listener into TextField component to listen Enter key (as I
haven't found one except text change); If this helps, Carlos.
Initially I tried to add a Function type of field in TextField component
(i.e. public var enter:Function;), but I had many unknown problems setting
the field value from the owner component.
Thus, I ended by dispatching an event:
> // inside createElement() of TextField.as
> ..
> goog.events.listen(input, "keypress", function(a:BrowserEvent):void
> {
> // enter key
> if(a.keyCode == 13) {
> dispatchEvent(new Event("enter"));
> }
> });
> ..
This worked for me at least.
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/Re-git-commit-flex-asjs-refs-heads-develop-MDL-Table-component-and-example-initial-implementation-tp58260p58705.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table
component and example initial implementation
Posted by sankar <sa...@gmail.com>.
I maybe thinking ahead of time and my abilities, and maybe you already had
explored these parts and possibilities, Carlos, while searching Table
height/checkbox-generation, selection etc. I came through this modified
version of MDL Table, at here: https://github.com/daniel-nagy/md-data-table.
Do you think it's possible to borrow some of the styling to FlexJS MDL to
get some tailored features, i.e. click-selectable etc.?
Thanks!
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/Re-git-commit-flex-asjs-refs-heads-develop-MDL-Table-component-and-example-initial-implementation-tp58260p58704.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table
component and example initial implementation
Posted by sankar <sa...@gmail.com>.
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/Re-git-commit-flex-asjs-refs-heads-develop-MDL-Table-component-and-example-initial-implementation-tp58260p58692.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table
component and example initial implementation
Posted by Carlos Rovira <ca...@codeoscopic.com>.
Hi sankar,
I think we can make this part of MDL swc
I was trying to test it in MDLExample but compiler breaks with this part of
CSS:
table.tableSection tr>td:last-child {
/* removing fraction of width i.e 2% to align the tbody columns
with thead columns. */
/* It is must as we need to consider the tbody scroll width too */
/* if the width is in pixels, then (width - 18px) would be enough */
width: 31%;
}
/** for older browsers (IE8), if you know number of columns in your
table **/
table.tableSection tr>td:first-child + td + td {
width : 31%;
}
/Users/carlosrovira/Dev/Flex/source/flexjs/flex-asjs/examples/flexjs/MDLExample/src/main/flex/App.mxml]
Unexpected exception 'java.util.NoSuchElementException'.
/Users/carlosrovira/Dev/Flex/source/flexjs/flex-asjs/examples/flexjs/MDLExample/src/main/flex/App.mxml
Internal error in ABC generator subsystem, when generating code for:
/Users/carlosrovira/Dev/Flex/source/flexjs/flex-asjs/examples/flexjs/MDLExample/src/main/flex/App.mxml:
java.util.NoSuchElementException: can't look backwards more than one token
in this stream
at org.antlr.runtime.misc.LookaheadStream.LB(LookaheadStream.java:159)
at org.antlr.runtime.misc.LookaheadStream.LT(LookaheadStream.java:120)
at
org.antlr.runtime.RecognitionException.extractInformationFromTreeNodeStream(RecognitionException.java:144)
at
org.antlr.runtime.RecognitionException.<init>(RecognitionException.java:111)
at
org.antlr.runtime.MismatchedTreeNodeException.<init>(MismatchedTreeNodeException.java:42)
at
org.antlr.runtime.tree.TreeParser.recoverFromMismatchedToken(TreeParser.java:135)
at org.antlr.runtime.BaseRecognizer.match(BaseRecognizer.java:115)
at
org.apache.flex.compiler.internal.css.CSSTree.declarationsBlock(CSSTree.java:1722)
at org.apache.flex.compiler.internal.css.CSSTree.ruleset(CSSTree.java:783)
at
org.apache.flex.compiler.internal.css.CSSTree.stylesheet(CSSTree.java:286)
at
org.apache.flex.compiler.internal.css.CSSDocument.parse(CSSDocument.java:81)
at
org.apache.flex.compiler.internal.tree.mxml.MXMLStyleNode.getCSSDocument(MXMLStyleNode.java:88)
at
org.apache.flex.compiler.internal.as.codegen.MXMLClassDirectiveProcessor.processMXMLStyle(MXMLClassDirectiveProcessor.java:4253)
at
org.apache.flex.compiler.internal.as.codegen.MXMLClassDirectiveProcessor.processNode(MXMLClassDirectiveProcessor.java:987)
at
org.apache.flex.compiler.internal.as.codegen.MXMLClassDirectiveProcessor.traverse(MXMLClassDirectiveProcessor.java:861)
at
org.apache.flex.compiler.internal.as.codegen.MXMLClassDirectiveProcessor.traverse(MXMLClassDirectiveProcessor.java:831)
at
org.apache.flex.compiler.internal.as.codegen.MXMLClassDirectiveProcessor.processMainClassDefinitionNode(MXMLClassDirectiveProcessor.java:653)
at
org.apache.flex.compiler.internal.as.codegen.GlobalDirectiveProcessor.declareMXMLDocument(GlobalDirectiveProcessor.java:518)
at
org.apache.flex.compiler.internal.as.codegen.DirectiveProcessor.processNode(DirectiveProcessor.java:232)
at
org.apache.flex.compiler.internal.as.codegen.DirectiveProcessor.traverse(DirectiveProcessor.java:188)
at
org.apache.flex.compiler.internal.as.codegen.ABCGenerator.generate(ABCGenerator.java:122)
at
org.apache.flex.compiler.internal.units.MXMLCompilationUnit.handleABCBytesRequest(MXMLCompilationUnit.java:199)
at
org.apache.flex.compiler.internal.units.CompilationUnitBase.processABCBytesRequest(CompilationUnitBase.java:873)
at
org.apache.flex.compiler.internal.units.CompilationUnitBase.access$300(CompilationUnitBase.java:108)
at
org.apache.flex.compiler.internal.units.CompilationUnitBase$4$1.call(CompilationUnitBase.java:310)
at
org.apache.flex.compiler.internal.units.CompilationUnitBase$4$1.call(CompilationUnitBase.java:306)
at
org.apache.flex.compiler.internal.units.requests.RequestMaker$1.call(RequestMaker.java:228)
at
org.apache.flex.compiler.internal.units.requests.RequestMaker$1.call(RequestMaker.java:222)
at java.util.concurrent.FutureTask.run(FutureTask.java:266)
at
java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
at
java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
at java.lang.Thread.run(Thread.java:745)
[INFO]
------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO]
------------------------------------------------------------------------
[INFO] Total time: 3.196 s
....
We need some help in the compiler part to fix this.
Regarding your question, in theory only adding "tableSection" so className
will be sufficient to make it work
(className="customTableRowItemRenderer tableSection"), but I'll need to try
and see if something more is needed
when fixing the compiler issue, I'll try to make it a property of table
(for example we could have : scrollable="true")
2017-01-25 12:27 GMT+01:00 sankar <sa...@gmail.com>:
> Hi Carlos,
>
> I do agree for the first phase of release, whatever you did, is spell
> bounding. And there is no question on that.
>
> I'll be happy to help you to make the MDL components more feature-rich per
> real-life application needs. Although, I'm not very familiar with
> JavaScript/CSS parts but trying to learn their behavior as I'm going :)
>
> For 1, it that checkbox problem somehow fix, then it'll also help us
> resolve
> the runtime update to Table component implementation. At this moment, I'm
> taking that checkbox is the only way to select a row of item. But we shall
> need an event dispatcher by Table upon checkbox selection, though.
>
> The scrolling stuff, I think those solution (you supplied the links)
> exactly
> what we need. But I'm unable to put the correct style in correct place
> (thanks to my unfamiliarity to CSS).
>
> I assume this part only what we needed to make the Table specific height
> and
> scroll (?)
>
> > table.tableSection tbody {
> > overflow: auto;
> > height: 300px;
> > }
>
> My MDL Table already has a class name assigned, where and how am I suppose
> to add the above mentioned style, can you please guide?
>
> > <mdl:Table shadow="2" selectable="true"
> > className="customTableRowItemRenderer" percentWidth="100">
>
> Thanks!
>
>
>
> --
> View this message in context: http://apache-flex-
> development.2333347.n4.nabble.com/Re-git-commit-flex-asjs-
> refs-heads-develop-MDL-Table-component-and-example-initial-
> implementation-tp58260p58679.html
> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>
--
Carlos Rovira
Director General
M: +34 607 22 60 05
http://www.codeoscopic.com
http://www.avant2.es
Este mensaje se dirige exclusivamente a su destinatario y puede contener
información privilegiada o confidencial. Si ha recibido este mensaje por
error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
proceda a su destrucción.
De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos
que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
S.A. La finalidad de dicho tratamiento es facilitar la prestación del
servicio o información solicitados, teniendo usted derecho de acceso,
rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras
oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
necesaria.
Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table
component and example initial implementation
Posted by Carlos Rovira <ca...@codeoscopic.com>.
Sankar,
I get it work partially. If you put this in you CSS
.tableSection {
display: table;
width: 100%;
}
.tableSection thead, .tableSection tbody {
float: left;
width: 100%;
}
.tableSection tbody {
overflow: auto;
height: 150px;
}
.tableSection tr {
width: 100%;
display: table;
text-align: left;
}
.tableSection th, .tableSection td {
width: 33%;
}
and declare table as this:
<mdl:Table className="customTableRowItemRenderer tableSection" ...
You get scrolling, but: columns are not aligned, a problem that seems to be
commented in the link that provide the solution.
At this point, don't know if this can be solved or not, will need more
research
El 25 de enero de 2017, 14:09, Carlos Rovira <ca...@codeoscopic.com>
escribió:
> Hi Sankar,
>
> no, that seems from material design components an not MDL (but don't know
> really if is part or not). We talked here to wait until MDC was more
> finished. MDL will be left fro MDC, is the next clear step for Google
>
> 2017-01-25 13:14 GMT+01:00 sankar <sa...@gmail.com>:
>
>> One more question, Carlos. Is the said pagination available to present
>> Table
>> component state?
>>
>> Thanks!
>>
>>
>>
>> --
>> View this message in context: http://apache-flex-development
>> .2333347.n4.nabble.com/Re-git-commit-flex-asjs-refs-heads-
>> develop-MDL-Table-component-and-example-initial-implementa
>> tion-tp58260p58680.html
>> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>>
>
>
>
> --
>
> Carlos Rovira
> Director General
> M: +34 607 22 60 05 <607%2022%2060%2005>
> http://www.codeoscopic.com
> http://www.avant2.es
>
> Este mensaje se dirige exclusivamente a su destinatario y puede contener
> información privilegiada o confidencial. Si ha recibido este mensaje por
> error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
> proceda a su destrucción.
>
> De la vigente Ley Orgánica de Protección de Datos (15/1999), le
> comunicamos que sus datos forman parte de un fichero cuyo responsable es
> CODEOSCOPIC S.A. La finalidad de dicho tratamiento es facilitar la
> prestación del servicio o información solicitados, teniendo usted derecho
> de acceso, rectificación, cancelación y oposición de sus datos dirigiéndose
> a nuestras oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la
> documentación necesaria.
>
>
--
Carlos Rovira
Director General
M: +34 607 22 60 05
http://www.codeoscopic.com
http://www.avant2.es
Este mensaje se dirige exclusivamente a su destinatario y puede contener
información privilegiada o confidencial. Si ha recibido este mensaje por
error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
proceda a su destrucción.
De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos
que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
S.A. La finalidad de dicho tratamiento es facilitar la prestación del
servicio o información solicitados, teniendo usted derecho de acceso,
rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras
oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
necesaria.
Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table
component and example initial implementation
Posted by Carlos Rovira <ca...@codeoscopic.com>.
Hi Sankar,
no, that seems from material design components an not MDL (but don't know
really if is part or not). We talked here to wait until MDC was more
finished. MDL will be left fro MDC, is the next clear step for Google
2017-01-25 13:14 GMT+01:00 sankar <sa...@gmail.com>:
> One more question, Carlos. Is the said pagination available to present
> Table
> component state?
>
> Thanks!
>
>
>
> --
> View this message in context: http://apache-flex-
> development.2333347.n4.nabble.com/Re-git-commit-flex-asjs-
> refs-heads-develop-MDL-Table-component-and-example-initial-
> implementation-tp58260p58680.html
> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>
--
Carlos Rovira
Director General
M: +34 607 22 60 05
http://www.codeoscopic.com
http://www.avant2.es
Este mensaje se dirige exclusivamente a su destinatario y puede contener
información privilegiada o confidencial. Si ha recibido este mensaje por
error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
proceda a su destrucción.
De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos
que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
S.A. La finalidad de dicho tratamiento es facilitar la prestación del
servicio o información solicitados, teniendo usted derecho de acceso,
rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras
oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
necesaria.
Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table
component and example initial implementation
Posted by sankar <sa...@gmail.com>.
One more question, Carlos. Is the said pagination available to present Table
component state?
Thanks!
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/Re-git-commit-flex-asjs-refs-heads-develop-MDL-Table-component-and-example-initial-implementation-tp58260p58680.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table
component and example initial implementation
Posted by sankar <sa...@gmail.com>.
Hi Carlos,
I do agree for the first phase of release, whatever you did, is spell
bounding. And there is no question on that.
I'll be happy to help you to make the MDL components more feature-rich per
real-life application needs. Although, I'm not very familiar with
JavaScript/CSS parts but trying to learn their behavior as I'm going :)
For 1, it that checkbox problem somehow fix, then it'll also help us resolve
the runtime update to Table component implementation. At this moment, I'm
taking that checkbox is the only way to select a row of item. But we shall
need an event dispatcher by Table upon checkbox selection, though.
The scrolling stuff, I think those solution (you supplied the links) exactly
what we need. But I'm unable to put the correct style in correct place
(thanks to my unfamiliarity to CSS).
I assume this part only what we needed to make the Table specific height and
scroll (?)
> table.tableSection tbody {
> overflow: auto;
> height: 300px;
> }
My MDL Table already has a class name assigned, where and how am I suppose
to add the above mentioned style, can you please guide?
> <mdl:Table shadow="2" selectable="true"
> className="customTableRowItemRenderer" percentWidth="100">
Thanks!
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/Re-git-commit-flex-asjs-refs-heads-develop-MDL-Table-component-and-example-initial-implementation-tp58260p58679.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table
component and example initial implementation
Posted by Carlos Rovira <ca...@codeoscopic.com>.
I found this for scroll tables:
http://jsfiddle.net/venkateshwar/5KJka/1/
http://stackoverflow.com/questions/17584702/how-to-add-a-scrollbar-to-an-html5-table
That seems to conform to the MDL table HTML output
2017-01-25 11:00 GMT+01:00 Carlos Rovira <ca...@codeoscopic.com>:
> About scrolling (4), What I'm seeing in
>
> https://material.io/guidelines/components/data-tables.html#data-tables-
> interaction
>
> is nothing about "scrolling" but "pagination"
>
> but this doesn't make clear to me...for example in a mobile screen, some
> table scrolling could be what you want :?
>
>
>
> 2017-01-25 10:44 GMT+01:00 Carlos Rovira <ca...@codeoscopic.com>:
>
>> Hi Sankar,
>>
>> 0.- For the insertion of rows, MDL do its duty introducing the checkbox
>> by its own is "selectable" is true. If adding at runtime is not making the
>> insertion automatically we should see how to solve it.
>>
>> I see this example : http://codepen.io/pespantelis/pen/pjbvBL
>>
>> And seem they are generating the CheckBox by its own... maybe is more
>> natural...don't know...I must to think about it
>>
>> For 1, 2 and 3: I'm right now trying to end a first version of MDL. This
>> first version covers all MDL components, but is basic, or what MDL web site
>> shows.
>> We can introduce more "Flex"-y stuff like this. If you need it soon, I
>> propose that you help me with this. help is much appreciated :) We need to
>> figure needed things like this an introduce it in MDL swc, I think all are
>> great enhancements
>>
>> 4.- I'm looking for this, and learning as you. Trying to setup a height,
>> makes the table grows but the rows grow proportional and that's not what
>> we want. I google for a solution and only found a horizontal scroll that I
>> think is not what we are searching for, and nothing for vertical scroll. I
>> assume that MDL has support for make things like this and we should find
>> and implement some example in MDL Example. I'll try to try it as I have
>> some time.
>>
>>
>>
>>
>
>
> --
>
> Carlos Rovira
> Director General
> M: +34 607 22 60 05 <607%2022%2060%2005>
> http://www.codeoscopic.com
> http://www.avant2.es
>
> Este mensaje se dirige exclusivamente a su destinatario y puede contener
> información privilegiada o confidencial. Si ha recibido este mensaje por
> error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
> proceda a su destrucción.
>
> De la vigente Ley Orgánica de Protección de Datos (15/1999), le
> comunicamos que sus datos forman parte de un fichero cuyo responsable es
> CODEOSCOPIC S.A. La finalidad de dicho tratamiento es facilitar la
> prestación del servicio o información solicitados, teniendo usted derecho
> de acceso, rectificación, cancelación y oposición de sus datos dirigiéndose
> a nuestras oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la
> documentación necesaria.
>
>
--
Carlos Rovira
Director General
M: +34 607 22 60 05
http://www.codeoscopic.com
http://www.avant2.es
Este mensaje se dirige exclusivamente a su destinatario y puede contener
información privilegiada o confidencial. Si ha recibido este mensaje por
error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
proceda a su destrucción.
De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos
que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
S.A. La finalidad de dicho tratamiento es facilitar la prestación del
servicio o información solicitados, teniendo usted derecho de acceso,
rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras
oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
necesaria.
Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table
component and example initial implementation
Posted by Carlos Rovira <ca...@codeoscopic.com>.
About scrolling (4), What I'm seeing in
https://material.io/guidelines/components/data-tables.html#data-tables-interaction
is nothing about "scrolling" but "pagination"
but this doesn't make clear to me...for example in a mobile screen, some
table scrolling could be what you want :?
2017-01-25 10:44 GMT+01:00 Carlos Rovira <ca...@codeoscopic.com>:
> Hi Sankar,
>
> 0.- For the insertion of rows, MDL do its duty introducing the checkbox by
> its own is "selectable" is true. If adding at runtime is not making the
> insertion automatically we should see how to solve it.
>
> I see this example : http://codepen.io/pespantelis/pen/pjbvBL
>
> And seem they are generating the CheckBox by its own... maybe is more
> natural...don't know...I must to think about it
>
> For 1, 2 and 3: I'm right now trying to end a first version of MDL. This
> first version covers all MDL components, but is basic, or what MDL web site
> shows.
> We can introduce more "Flex"-y stuff like this. If you need it soon, I
> propose that you help me with this. help is much appreciated :) We need to
> figure needed things like this an introduce it in MDL swc, I think all are
> great enhancements
>
> 4.- I'm looking for this, and learning as you. Trying to setup a height,
> makes the table grows but the rows grow proportional and that's not what
> we want. I google for a solution and only found a horizontal scroll that I
> think is not what we are searching for, and nothing for vertical scroll. I
> assume that MDL has support for make things like this and we should find
> and implement some example in MDL Example. I'll try to try it as I have
> some time.
>
>
>
>
--
Carlos Rovira
Director General
M: +34 607 22 60 05
http://www.codeoscopic.com
http://www.avant2.es
Este mensaje se dirige exclusivamente a su destinatario y puede contener
información privilegiada o confidencial. Si ha recibido este mensaje por
error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
proceda a su destrucción.
De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos
que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
S.A. La finalidad de dicho tratamiento es facilitar la prestación del
servicio o información solicitados, teniendo usted derecho de acceso,
rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras
oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
necesaria.
Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table
component and example initial implementation
Posted by Carlos Rovira <ca...@codeoscopic.com>.
Hi Sankar,
0.- For the insertion of rows, MDL do its duty introducing the checkbox by
its own is "selectable" is true. If adding at runtime is not making the
insertion automatically we should see how to solve it.
I see this example : http://codepen.io/pespantelis/pen/pjbvBL
And seem they are generating the CheckBox by its own... maybe is more
natural...don't know...I must to think about it
For 1, 2 and 3: I'm right now trying to end a first version of MDL. This
first version covers all MDL components, but is basic, or what MDL web site
shows.
We can introduce more "Flex"-y stuff like this. If you need it soon, I
propose that you help me with this. help is much appreciated :) We need to
figure needed things like this an introduce it in MDL swc, I think all are
great enhancements
4.- I'm looking for this, and learning as you. Trying to setup a height,
makes the table grows but the rows grow proportional and that's not what
we want. I google for a solution and only found a horizontal scroll that I
think is not what we are searching for, and nothing for vertical scroll. I
assume that MDL has support for make things like this and we should find
and implement some example in MDL Example. I'll try to try it as I have
some time.
Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table
component and example initial implementation
Posted by sankar <sa...@gmail.com>.
And as I continuing my queries :)
4. How can I make Table has specific height and vertically scrolled?
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/Re-git-commit-flex-asjs-refs-heads-develop-MDL-Table-component-and-example-initial-implementation-tp58260p58671.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table
component and example initial implementation
Posted by piotrz <pi...@gmail.com>.
Carlos,
Case 1 with problem of styling in Table looks like bug.
The other things that's something like missing features. Maybe will be good
if Sankar could raise a jiras.
1 Bug and for other things feature:
- Add selectedItems property to MDL Table
- Add possibility to select rows without using check boxes in MDL Table
What do you think ?
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/Re-git-commit-flex-asjs-refs-heads-develop-MDL-Table-component-and-example-initial-implementation-tp58260p58670.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table
component and example initial implementation
Posted by sankar <sa...@gmail.com>.
Few more queries on these,
1. When a Table has selectable=true, how can I get the event when a
particular item being selected?
2. How can I get the list of items being selected?
3. Is there any way to make a row selected other than selecting by it's
checkbox?
I have another query but with Cards API. Inside it's
<mdl:CardSupportingText> how can I lay contents vertically?
Thanks for your helps!
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/Re-git-commit-flex-asjs-refs-heads-develop-MDL-Table-component-and-example-initial-implementation-tp58260p58669.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table
component and example initial implementation
Posted by sankar <sa...@gmail.com>.
Hi,
Somehow I manage to work adding new rows to the MDL Table component at
runtime. It works great, but I saw one particular style is not affecting to
the newly added item renderer component from it's parent (Table) -
checkbox/select.
Initial table code is simple:
> <mdl:Table shadow="2" selectable="true"
> className="customTableRowItemRenderer">
>
> <mdl:columns>
>
> <mdl:TableColumn headerText="Material" nonNumeric="true"/>
>
> <mdl:TableColumn headerText="Quantity"/>
>
> <mdl:TableColumn headerText="Unit price"/>
>
> </mdl:columns>
>
> <mdl:beads>
>
> <local:DataProviderChangeNotifierForArrayData sourceID="model"
> propertyName="materials"/>
>
> <js:ConstantBinding
> sourceID="model"
> sourcePropertyName="materialsSource"
> destinationPropertyName="dataProvider" />
>
> </mdl:beads>
>
> </mdl:Table>
When adding a new row at runtime, it shows like as following cutting-off
selection style from it's Table component:
<http://apache-flex-development.2333347.n4.nabble.com/file/n58668/Untitled.png>
Above, 4th and 5th column being added.
Can you suggest which particular style I may explicitly needs to apply to
the item renderer components?
Thanks!
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/Re-git-commit-flex-asjs-refs-heads-develop-MDL-Table-component-and-example-initial-implementation-tp58260p58668.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table
component and example initial implementation
Posted by piotrz <pi...@gmail.com>.
Carlos fantastic Job! I hope we will be able to see soon that someone is
using this library in his app!
Congrats! :)
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/Re-git-commit-flex-asjs-refs-heads-develop-MDL-Table-component-and-example-initial-implementation-tp58260p58302.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table
component and example initial implementation
Posted by Carlos Rovira <ca...@codeoscopic.com>.
So we have now the Table component finished :)
This code:
<mdl:Table shadow="2" selectable="true" className="customTableItemRenderer">
<mdl:columns>
<mdl:TableColumn headerText="Material" nonNumeric="true"/>
<mdl:TableColumn headerText="Quantity"/>
<mdl:TableColumn headerText="Unit price"/>
</mdl:columns>
<mdl:beads>
<js:ConstantBinding
sourceID="model"
sourcePropertyName="materials"
destinationPropertyName="dataProvider" />
</mdl:beads>
</mdl:Table>
outputs this: https://getmdl.io/components/index.html#tables-section
I'll try some enhancements like to have a "dataField" in column like in
DataGrid so we can filter columns or reorder.
As well there's a support in MDL for column ascending and descending, but
although the visuales are available through the flexjs table component,
don't know yet how it works (I'll try to check some examples out there and
see if we can introduce a click event or something like that)
as well It would be great to make the basic TableRowItemRenderer output all
row info, so the basic table with the basic IR could be used in a very
basic way :)
2017-01-14 0:45 GMT+01:00 Carlos Rovira <ca...@codeoscopic.com>:
> Yeah! :)
>
> 2017-01-13 20:43 GMT+01:00 Piotr Zarzycki <pi...@gmail.com>:
>
>> Love this commit :)
>>
>> On Fri, Jan 13, 2017, 20:34 <ca...@apache.org> wrote:
>>
>> > 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/b0b4
>> 1aef
>> > 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 <ca...@apache.org>
>> > Authored: Fri Jan 13 20:34:17 2017 +0100
>> > Committer: Carlos Rovira <ca...@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/b0b41a
>> ef/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml
>> > ----------------------------------------------------------------------
>> > diff --git a/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mx
>> ml
>> > 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/b0b41a
>> ef/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/b0b41a
>> ef/examples/flexjs/MDLExample/src/main/flex/models/MainNavigationModel.as
>> > ----------------------------------------------------------------------
>> > diff --git
>> > a/examples/flexjs/MDLExample/src/main/flex/models/MainNaviga
>> tionModel.as
>> > b/examples/flexjs/MDLExample/src/main/flex/models/MainNaviga
>> tionModel.as
>> > index 5330ae4..12fbbf3 100644
>> > ---
>> > a/examples/flexjs/MDLExample/src/main/flex/models/MainNaviga
>> tionModel.as
>> > +++
>> > b/examples/flexjs/MDLExample/src/main/flex/models/MainNaviga
>> tionModel.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/b0b41a
>> ef/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/b0b41a
>> ef/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/b0b41a
>> ef/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/b0b41a
>> ef/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/b0b41a
>> ef/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.WrappedHT
>> MLElement
>> > + */
>> > + 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/b0b41a
>> ef/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.fle
>> x.mdl.beads.views.ListView");
>> > + IBeadModel:
>> > ClassReference("org.apache.flex.html.beads.models.ArraySelec
>> tionModel");
>> > + IBeadLayout: ClassReference(null);
>> > /*"org.apache.flex.html.beads.layouts.VerticalLayout"*/
>> > + IDataProviderItemRendererMapper:
>> > ClassReference("org.apache.flex.html.beads.DataItemRendererF
>> actoryForArrayData");
>> > + IItemRendererClassFactory:
>> > ClassReference("org.apache.flex.core.ItemRendererClassFactory");
>> > + IItemRenderer:
>> > ClassReference("org.apache.flex.mdl.itemRenderers.TableItemRenderer");
>> > +}
>> > +
>> > Navigation
>> > {
>> > IBeadView: ClassReference("org.apache.fle
>> x.mdl.beads.views.ListView");
>> >
>> >
>> > http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b0b41a
>> ef/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.Lay
>> outTitle"/>
>> > <component id="Navigation" class="org.apache.flex.mdl.Nav
>> igation"/>
>> >
>> >
>>
>
>
>
> --
>
> Carlos Rovira
> Director General
> M: +34 607 22 60 05 <607%2022%2060%2005>
> http://www.codeoscopic.com
> http://www.avant2.es
>
> Este mensaje se dirige exclusivamente a su destinatario y puede contener
> información privilegiada o confidencial. Si ha recibido este mensaje por
> error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
> proceda a su destrucción.
>
> De la vigente Ley Orgánica de Protección de Datos (15/1999), le
> comunicamos que sus datos forman parte de un fichero cuyo responsable es
> CODEOSCOPIC S.A. La finalidad de dicho tratamiento es facilitar la
> prestación del servicio o información solicitados, teniendo usted derecho
> de acceso, rectificación, cancelación y oposición de sus datos dirigiéndose
> a nuestras oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la
> documentación necesaria.
>
>
--
Carlos Rovira
Director General
M: +34 607 22 60 05
http://www.codeoscopic.com
http://www.avant2.es
Este mensaje se dirige exclusivamente a su destinatario y puede contener
información privilegiada o confidencial. Si ha recibido este mensaje por
error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
proceda a su destrucción.
De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos
que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
S.A. La finalidad de dicho tratamiento es facilitar la prestación del
servicio o información solicitados, teniendo usted derecho de acceso,
rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras
oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
necesaria.
Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table
component and example initial implementation
Posted by Carlos Rovira <ca...@codeoscopic.com>.
So we have now the Table component finished :)
This code:
<mdl:Table shadow="2" selectable="true" className="customTableItemRenderer">
<mdl:columns>
<mdl:TableColumn headerText="Material" nonNumeric="true"/>
<mdl:TableColumn headerText="Quantity"/>
<mdl:TableColumn headerText="Unit price"/>
</mdl:columns>
<mdl:beads>
<js:ConstantBinding
sourceID="model"
sourcePropertyName="materials"
destinationPropertyName="dataProvider" />
</mdl:beads>
</mdl:Table>
outputs this: https://getmdl.io/components/index.html#tables-section
I'll try some enhancements like to have a "dataField" in column like in
DataGrid so we can filter columns or reorder.
As well there's a support in MDL for column ascending and descending, but
although the visuales are available through the flexjs table component,
don't know yet how it works (I'll try to check some examples out there and
see if we can introduce a click event or something like that)
as well It would be great to make the basic TableRowItemRenderer output all
row info, so the basic table with the basic IR could be used in a very
basic way :)
2017-01-14 0:45 GMT+01:00 Carlos Rovira <ca...@codeoscopic.com>:
> Yeah! :)
>
> 2017-01-13 20:43 GMT+01:00 Piotr Zarzycki <pi...@gmail.com>:
>
>> Love this commit :)
>>
>> On Fri, Jan 13, 2017, 20:34 <ca...@apache.org> wrote:
>>
>> > 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/b0b4
>> 1aef
>> > 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 <ca...@apache.org>
>> > Authored: Fri Jan 13 20:34:17 2017 +0100
>> > Committer: Carlos Rovira <ca...@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/b0b41a
>> ef/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml
>> > ----------------------------------------------------------------------
>> > diff --git a/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mx
>> ml
>> > 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/b0b41a
>> ef/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/b0b41a
>> ef/examples/flexjs/MDLExample/src/main/flex/models/MainNavigationModel.as
>> > ----------------------------------------------------------------------
>> > diff --git
>> > a/examples/flexjs/MDLExample/src/main/flex/models/MainNaviga
>> tionModel.as
>> > b/examples/flexjs/MDLExample/src/main/flex/models/MainNaviga
>> tionModel.as
>> > index 5330ae4..12fbbf3 100644
>> > ---
>> > a/examples/flexjs/MDLExample/src/main/flex/models/MainNaviga
>> tionModel.as
>> > +++
>> > b/examples/flexjs/MDLExample/src/main/flex/models/MainNaviga
>> tionModel.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/b0b41a
>> ef/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/b0b41a
>> ef/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/b0b41a
>> ef/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/b0b41a
>> ef/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/b0b41a
>> ef/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.WrappedHT
>> MLElement
>> > + */
>> > + 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/b0b41a
>> ef/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.fle
>> x.mdl.beads.views.ListView");
>> > + IBeadModel:
>> > ClassReference("org.apache.flex.html.beads.models.ArraySelec
>> tionModel");
>> > + IBeadLayout: ClassReference(null);
>> > /*"org.apache.flex.html.beads.layouts.VerticalLayout"*/
>> > + IDataProviderItemRendererMapper:
>> > ClassReference("org.apache.flex.html.beads.DataItemRendererF
>> actoryForArrayData");
>> > + IItemRendererClassFactory:
>> > ClassReference("org.apache.flex.core.ItemRendererClassFactory");
>> > + IItemRenderer:
>> > ClassReference("org.apache.flex.mdl.itemRenderers.TableItemRenderer");
>> > +}
>> > +
>> > Navigation
>> > {
>> > IBeadView: ClassReference("org.apache.fle
>> x.mdl.beads.views.ListView");
>> >
>> >
>> > http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b0b41a
>> ef/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.Lay
>> outTitle"/>
>> > <component id="Navigation" class="org.apache.flex.mdl.Nav
>> igation"/>
>> >
>> >
>>
>
>
>
> --
>
> Carlos Rovira
> Director General
> M: +34 607 22 60 05 <607%2022%2060%2005>
> http://www.codeoscopic.com
> http://www.avant2.es
>
> Este mensaje se dirige exclusivamente a su destinatario y puede contener
> información privilegiada o confidencial. Si ha recibido este mensaje por
> error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
> proceda a su destrucción.
>
> De la vigente Ley Orgánica de Protección de Datos (15/1999), le
> comunicamos que sus datos forman parte de un fichero cuyo responsable es
> CODEOSCOPIC S.A. La finalidad de dicho tratamiento es facilitar la
> prestación del servicio o información solicitados, teniendo usted derecho
> de acceso, rectificación, cancelación y oposición de sus datos dirigiéndose
> a nuestras oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la
> documentación necesaria.
>
>
--
Carlos Rovira
Director General
M: +34 607 22 60 05
http://www.codeoscopic.com
http://www.avant2.es
Este mensaje se dirige exclusivamente a su destinatario y puede contener
información privilegiada o confidencial. Si ha recibido este mensaje por
error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
proceda a su destrucción.
De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos
que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
S.A. La finalidad de dicho tratamiento es facilitar la prestación del
servicio o información solicitados, teniendo usted derecho de acceso,
rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras
oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
necesaria.
Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table
component and example initial implementation
Posted by Carlos Rovira <ca...@codeoscopic.com>.
Yeah! :)
2017-01-13 20:43 GMT+01:00 Piotr Zarzycki <pi...@gmail.com>:
> Love this commit :)
>
> On Fri, Jan 13, 2017, 20:34 <ca...@apache.org> wrote:
>
> > 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 <ca...@apache.org>
> > Authored: Fri Jan 13 20:34:17 2017 +0100
> > Committer: Carlos Rovira <ca...@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"/>
> >
> >
>
--
Carlos Rovira
Director General
M: +34 607 22 60 05
http://www.codeoscopic.com
http://www.avant2.es
Este mensaje se dirige exclusivamente a su destinatario y puede contener
información privilegiada o confidencial. Si ha recibido este mensaje por
error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
proceda a su destrucción.
De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos
que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
S.A. La finalidad de dicho tratamiento es facilitar la prestación del
servicio o información solicitados, teniendo usted derecho de acceso,
rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras
oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
necesaria.
Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table
component and example initial implementation
Posted by Carlos Rovira <ca...@codeoscopic.com>.
Yeah! :)
2017-01-13 20:43 GMT+01:00 Piotr Zarzycki <pi...@gmail.com>:
> Love this commit :)
>
> On Fri, Jan 13, 2017, 20:34 <ca...@apache.org> wrote:
>
> > 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 <ca...@apache.org>
> > Authored: Fri Jan 13 20:34:17 2017 +0100
> > Committer: Carlos Rovira <ca...@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"/>
> >
> >
>
--
Carlos Rovira
Director General
M: +34 607 22 60 05
http://www.codeoscopic.com
http://www.avant2.es
Este mensaje se dirige exclusivamente a su destinatario y puede contener
información privilegiada o confidencial. Si ha recibido este mensaje por
error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
proceda a su destrucción.
De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos
que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
S.A. La finalidad de dicho tratamiento es facilitar la prestación del
servicio o información solicitados, teniendo usted derecho de acceso,
rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras
oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
necesaria.
Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table
component and example initial implementation
Posted by Piotr Zarzycki <pi...@gmail.com>.
Love this commit :)
On Fri, Jan 13, 2017, 20:34 <ca...@apache.org> wrote:
> 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 <ca...@apache.org>
> Authored: Fri Jan 13 20:34:17 2017 +0100
> Committer: Carlos Rovira <ca...@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"/>
>
>
Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table
component and example initial implementation
Posted by Piotr Zarzycki <pi...@gmail.com>.
Love this commit :)
On Fri, Jan 13, 2017, 20:34 <ca...@apache.org> wrote:
> 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 <ca...@apache.org>
> Authored: Fri Jan 13 20:34:17 2017 +0100
> Committer: Carlos Rovira <ca...@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"/>
>
>