Repository: flex-asjs
Updated Branches:
  refs/heads/develop 37dc60031 -> 885e32136


Add MDLDynamicTableExample to ilustrate how add/remove items to MDL Table - 
Currently only adding is working. The rest job will be done as part of 
FLEX-35354


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

Branch: refs/heads/develop
Commit: 885e3213653ce7188d8365a1a8f2a2e2018d351d
Parents: 37dc600
Author: piotrz <pio...@apache.org>
Authored: Sun Aug 27 23:16:17 2017 +0200
Committer: piotrz <pio...@apache.org>
Committed: Sun Aug 27 23:16:17 2017 +0200

----------------------------------------------------------------------
 examples/flexjs/MDLDynamicTableExample/pom.xml  | 74 ++++++++++++++++++++
 .../src/MDLDynamicTableExample.mxml             | 36 ++++++++++
 .../MDLDynamicTableExample/src/MainView.mxml    | 65 +++++++++++++++++
 .../CustomTableRowItemRenderer.mxml             | 46 ++++++++++++
 .../src/models/UserListModel.as                 | 37 ++++++++++
 .../src/resources/mdl-js-index-template.html    | 33 +++++++++
 .../src/resources/mdl-styles.css                | 31 ++++++++
 .../MDLDynamicTableExample/src/vo/UserVO.as     | 40 +++++++++++
 examples/flexjs/pom.xml                         |  1 +
 9 files changed, 363 insertions(+)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/885e3213/examples/flexjs/MDLDynamicTableExample/pom.xml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLDynamicTableExample/pom.xml 
b/examples/flexjs/MDLDynamicTableExample/pom.xml
new file mode 100644
index 0000000..c1603a0
--- /dev/null
+++ b/examples/flexjs/MDLDynamicTableExample/pom.xml
@@ -0,0 +1,74 @@
+<?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.
+
+-->
+<project xmlns="http://maven.apache.org/POM/4.0.0"; 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"; 
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
http://maven.apache.org/xsd/maven-4.0.0.xsd";>
+  <modelVersion>4.0.0</modelVersion>
+
+  <parent>
+    <groupId>org.apache.flex.flexjs.examples</groupId>
+    <artifactId>examples-flexjs</artifactId>
+    <version>0.9.0-SNAPSHOT</version>
+  </parent>
+
+  <artifactId>MDLDynamicTableExample</artifactId>
+  <version>0.9.0-SNAPSHOT</version>
+  <packaging>swf</packaging>
+
+  <name>Apache Flex - FlexJS: Examples: FlexJS: MDLDynamicTableExample</name>
+
+  <properties>
+    <!-- Customize MDL colors using this the tool at : 
https://getmdl.io/customize/index.html -->
+    <primary>indigo</primary>
+    <accent>pink</accent>
+  </properties>
+
+  <build>
+    <sourceDirectory>src</sourceDirectory>
+    <resources>
+      <resource>
+        <directory>src/resources</directory>
+        <filtering>true</filtering>
+      </resource>
+    </resources>
+    <plugins>
+      <plugin>
+        <groupId>org.apache.flex.flexjs.compiler</groupId>
+        <artifactId>flexjs-maven-plugin</artifactId>
+        <extensions>true</extensions>
+        <configuration>
+          <mainClass>MDLDynamicTableExample.mxml</mainClass>
+          <targets>JSFlex</targets>
+          
<htmlTemplate>${basedir}/target/javascript/bin/js-debug/mdl-js-index-template.html</htmlTemplate>
+          
<additionalCompilerOptions>-compiler.exclude-defaults-css-files=Basic-0.9.0-SNAPSHOT-js.swc:defaults.css</additionalCompilerOptions>
+        </configuration>
+      </plugin>
+    </plugins>
+  </build>
+
+  <dependencies>
+    <dependency>
+      <groupId>org.apache.flex.flexjs.framework</groupId>
+      <artifactId>MaterialDesignLite</artifactId>
+      <version>0.9.0-SNAPSHOT</version>
+      <type>swc</type>
+      <classifier>js</classifier>
+    </dependency>
+  </dependencies>
+
+</project>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/885e3213/examples/flexjs/MDLDynamicTableExample/src/MDLDynamicTableExample.mxml
----------------------------------------------------------------------
diff --git 
a/examples/flexjs/MDLDynamicTableExample/src/MDLDynamicTableExample.mxml 
b/examples/flexjs/MDLDynamicTableExample/src/MDLDynamicTableExample.mxml
new file mode 100644
index 0000000..4e2a329
--- /dev/null
+++ b/examples/flexjs/MDLDynamicTableExample/src/MDLDynamicTableExample.mxml
@@ -0,0 +1,36 @@
+<?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.
+
+-->
+<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
+                               xmlns:js="library://ns.apache.org/flexjs/basic" 
+                               xmlns:local="*">
+                               
+       <fx:Style source="resources/mdl-styles.css"/>
+       
+       <js:valuesImpl>
+               <js:SimpleCSSValuesImpl />
+       </js:valuesImpl>
+       
+       <js:initialView>
+               <js:View width="100%" height="100%">
+                       <local:MainView />
+               </js:View>
+       </js:initialView>
+       
+ </js:Application>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/885e3213/examples/flexjs/MDLDynamicTableExample/src/MainView.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLDynamicTableExample/src/MainView.mxml 
b/examples/flexjs/MDLDynamicTableExample/src/MainView.mxml
new file mode 100644
index 0000000..95691fb
--- /dev/null
+++ b/examples/flexjs/MDLDynamicTableExample/src/MainView.mxml
@@ -0,0 +1,65 @@
+<?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:Grid 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:models="models.*">
+       
+       <fx:Script>
+        <![CDATA[
+               import vo.UserVO;
+
+               private function onAddEmployeeClick(event:MouseEvent):void
+               {
+                       usersListModel.users.addItem(new UserVO("piotrz", 
"Piotr", "Zarzycki", "pio...@apache.org"));
+               }
+        ]]>
+    </fx:Script>
+
+       <mdl:beads>
+               <js:ContainerDataBinding/>
+       </mdl:beads>
+
+       <mdl:model>
+               <models:UserListModel id="usersListModel"/>
+       </mdl:model>
+
+       <mdl:GridCell column="12">
+               <mdl:Table id="tblUsers" shadow="2"
+                                  dataProvider="{usersListModel.users}" 
className="customTableStyle">
+                       <mdl:columns>
+                               <mdl:TableColumn headerText="Username" />
+                               <mdl:TableColumn headerText="First Name"/>
+                               <mdl:TableColumn headerText="Last Name"/>
+                               <mdl:TableColumn headerText="Email"/>
+                       </mdl:columns>
+                       <mdl:beads>
+                               <!--Bead for listening changes of collection 
source-->
+                               <js:DataProviderCollectionChangeNotifier 
sourceID="usersListModel" propertyName="users"
+                                                                               
                                 destinationPropertyName="dataProvider" 
changeEventName="dataProviderChanged"  />
+                               <!--Bead for listening items events changes-->
+                               <js:DataProviderItemsChangeNotifier 
sourceID="usersListModel" propertyName="users"
+                                                                               
                        destinationPropertyName="dataProvider" 
changeEventName="dataProviderChanged"  />
+                       </mdl:beads>
+               </mdl:Table>
+       </mdl:GridCell>
+       <mdl:GridCell>
+               <mdl:Button text="Add Employee" width="100" 
click="onAddEmployeeClick(event)"/>
+       </mdl:GridCell>
+</mdl:Grid>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/885e3213/examples/flexjs/MDLDynamicTableExample/src/itemRenderers/CustomTableRowItemRenderer.mxml
----------------------------------------------------------------------
diff --git 
a/examples/flexjs/MDLDynamicTableExample/src/itemRenderers/CustomTableRowItemRenderer.mxml
 
b/examples/flexjs/MDLDynamicTableExample/src/itemRenderers/CustomTableRowItemRenderer.mxml
new file mode 100644
index 0000000..cf92588
--- /dev/null
+++ 
b/examples/flexjs/MDLDynamicTableExample/src/itemRenderers/CustomTableRowItemRenderer.mxml
@@ -0,0 +1,46 @@
+<?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:TableRowItemRenderer 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";>
+
+    <fx:Script>
+               <![CDATA[
+        import vo.UserVO;
+
+                       [Bindable("dataChange")]
+            public function get userVO():UserVO
+            {
+                return data as UserVO;
+            }
+               ]]>
+       </fx:Script>
+
+    <mdl:beads>
+        <js:ItemRendererDataBinding />
+    </mdl:beads>
+    
+    <mdl:TableCell text="{userVO.username}"/>
+    <mdl:TableCell text="{userVO.firstName}"/>
+    <mdl:TableCell text="{userVO.lastName}"/>
+    <mdl:TableCell text="{userVO.email}"/>
+    
+</mdl:TableRowItemRenderer>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/885e3213/examples/flexjs/MDLDynamicTableExample/src/models/UserListModel.as
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLDynamicTableExample/src/models/UserListModel.as 
b/examples/flexjs/MDLDynamicTableExample/src/models/UserListModel.as
new file mode 100644
index 0000000..3952312
--- /dev/null
+++ b/examples/flexjs/MDLDynamicTableExample/src/models/UserListModel.as
@@ -0,0 +1,37 @@
+/*
+ *
+ *  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.collections.ArrayList;
+       import vo.UserVO;
+
+    [Bindable]
+       public class UserListModel
+       {
+               private var _users:ArrayList = new ArrayList([
+                       new UserVO("lstooge","Larry", "Stooge", 
"la...@stooges.com" ),
+            new UserVO("cstooge","Curly", "Stooge", "cu...@stooges.com" )
+               ]);
+               
+               public function get users():ArrayList
+               {
+                       return _users
+               }
+       }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/885e3213/examples/flexjs/MDLDynamicTableExample/src/resources/mdl-js-index-template.html
----------------------------------------------------------------------
diff --git 
a/examples/flexjs/MDLDynamicTableExample/src/resources/mdl-js-index-template.html
 
b/examples/flexjs/MDLDynamicTableExample/src/resources/mdl-js-index-template.html
new file mode 100644
index 0000000..f21943f
--- /dev/null
+++ 
b/examples/flexjs/MDLDynamicTableExample/src/resources/mdl-js-index-template.html
@@ -0,0 +1,33 @@
+<!--
+  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.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+       <meta name="Custom Template for injecting custom style CSS">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, 
minimum-scale=1.0">
+       <link rel="stylesheet" type="text/css" href="${application}.css">
+  <link rel="stylesheet" 
href="https://fonts.googleapis.com/icon?family=Material+Icons";>
+  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.min.css";>
+  <script src="https://code.getmdl.io/1.3.0/material.min.js";></script>
+${head}
+</head>
+<body>
+${body}
+</body>
+</html>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/885e3213/examples/flexjs/MDLDynamicTableExample/src/resources/mdl-styles.css
----------------------------------------------------------------------
diff --git 
a/examples/flexjs/MDLDynamicTableExample/src/resources/mdl-styles.css 
b/examples/flexjs/MDLDynamicTableExample/src/resources/mdl-styles.css
new file mode 100644
index 0000000..5e15f22
--- /dev/null
+++ b/examples/flexjs/MDLDynamicTableExample/src/resources/mdl-styles.css
@@ -0,0 +1,31 @@
+/*
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+*/
+
+@namespace "http://www.w3.org/1999/xhtml";;
+@namespace js "library://ns.apache.org/flexjs/basic";
+@namespace mdl "library://ns.apache.org/flexjs/mdl";
+
+.customTableStyle
+{
+       IDataProviderItemRendererMapper: 
ClassReference("org.apache.flex.html.beads.DynamicItemsRendererFactoryForArrayListData");
+    IItemRenderer: ClassReference("itemRenderers.CustomTableRowItemRenderer");
+}
+

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/885e3213/examples/flexjs/MDLDynamicTableExample/src/vo/UserVO.as
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLDynamicTableExample/src/vo/UserVO.as 
b/examples/flexjs/MDLDynamicTableExample/src/vo/UserVO.as
new file mode 100644
index 0000000..6181ab8
--- /dev/null
+++ b/examples/flexjs/MDLDynamicTableExample/src/vo/UserVO.as
@@ -0,0 +1,40 @@
+/*
+ *
+ *  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 vo
+{
+       [Bindable]
+       public class UserVO
+       {
+           public var username:String;
+           public var firstName:String;
+           public var lastName:String;
+               public var email:String;
+               
+               public function UserVO(username:String = null, 
+                                                          firstName:String = 
null,
+                                                          lastName:String = 
null,
+                                                          email:String = null)
+               {
+                       this.username = username;
+                       this.firstName = firstName;
+                       this.lastName = lastName;
+                       this.email = email;     
+               }
+       }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/885e3213/examples/flexjs/pom.xml
----------------------------------------------------------------------
diff --git a/examples/flexjs/pom.xml b/examples/flexjs/pom.xml
index 2de6a5a..a749153 100644
--- a/examples/flexjs/pom.xml
+++ b/examples/flexjs/pom.xml
@@ -53,6 +53,7 @@
     <!--module>MDLBlogExample</module>-->
     <module>MDLDynamicTabsExample</module>
     <module>MDLExample</module>
+    <module>MDLDynamicTableExample</module>
     <module>ModuleExample</module>
     <module>MobileMap</module>
     <module>MobileStocks</module>

Reply via email to