You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by pe...@apache.org on 2017/08/30 20:37:41 UTC
[29/32] git commit: [flex-asjs] [refs/heads/feature/dragAndDrop] -
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
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/feature/dragAndDrop
Commit: 885e3213653ce7188d8365a1a8f2a2e2018d351d
Parents: 37dc600
Author: piotrz <pi...@apache.org>
Authored: Sun Aug 27 23:16:17 2017 +0200
Committer: piotrz <pi...@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", "piotrz@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", "larry@stooges.com" ),
+ new UserVO("cstooge","Curly", "Stooge", "curly@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>