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>
