This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new aa6a86d todomvc-crux: New Crux version of the TodoMVC
aa6a86d is described below
commit aa6a86d3e995a06a109212e37c2dd6a8db46bad0
Author: Carlos Rovira <carlosrov...@apache.org>
AuthorDate: Wed Feb 12 20:18:07 2020 +0100
todomvc-crux: New Crux version of the TodoMVC
---
examples/crux/pom.xml | 1 +
examples/crux/todomvc/asconfig.json | 31 ++
examples/crux/todomvc/build.xml | 56 ++++
examples/crux/todomvc/pom.xml | 125 ++++++++
examples/crux/todomvc/readme.md | 68 +++++
.../todomvc/src/main/config/compile-app-config.xml | 46 +++
.../src/main/resources/todomvc-index-template.html | 30 ++
.../todomvc/src/main/resources/todomvc-styles.css | 323 +++++++++++++++++++++
examples/crux/todomvc/src/main/royale/App.mxml | 83 ++++++
.../main/royale/jewel/todomvc/config/Beans.mxml | 28 ++
.../jewel/todomvc/controllers/TodoController.as | 203 +++++++++++++
.../main/royale/jewel/todomvc/events/TodoEvent.as | 72 +++++
.../main/royale/jewel/todomvc/models/TodoModel.as | 154 ++++++++++
.../jewel/todomvc/renderers/TodoItemRenderer.mxml | 165 +++++++++++
.../royale/jewel/todomvc/views/TodoFooter.mxml | 85 ++++++
.../royale/jewel/todomvc/views/TodoHeader.mxml | 75 +++++
.../jewel/todomvc/views/TodoListSection.mxml | 97 +++++++
.../src/main/royale/jewel/todomvc/vos/TodoVO.as | 65 +++++
examples/crux/todomvc/todomvc.as3proj | 115 ++++++++
19 files changed, 1822 insertions(+)
diff --git a/examples/crux/pom.xml b/examples/crux/pom.xml
index a592967..45091d8 100644
--- a/examples/crux/pom.xml
+++ b/examples/crux/pom.xml
@@ -36,6 +36,7 @@
<module>CruxQuickStart</module>
<module>CruxQuickStartBasic</module>
<module>CruxGitHubCommitLogViewer</module>
+ <module>todomvc-jewel-crux</module>
</modules>
<build>
diff --git a/examples/crux/todomvc/asconfig.json
b/examples/crux/todomvc/asconfig.json
new file mode 100644
index 0000000..14ab179
--- /dev/null
+++ b/examples/crux/todomvc/asconfig.json
@@ -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.
+//
+////////////////////////////////////////////////////////////////////////////////
+{
+ "config": "royale",
+ "compilerOptions": {
+ "debug": false,
+ "targets": ["JSRoyale"],
+ "source-map": true
+ },
+ "additionalOptions": "-remove-circulars
-js-output-optimization=skipAsCoercions",
+ "files":
+ [
+ "src/main/royale/App.mxml"
+ ]
+}
diff --git a/examples/crux/todomvc/build.xml b/examples/crux/todomvc/build.xml
new file mode 100644
index 0000000..36b2dd6
--- /dev/null
+++ b/examples/crux/todomvc/build.xml
@@ -0,0 +1,56 @@
+<?xml version="1.0"?>
+<!--
+
+ 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 name="todomvc" default="main" basedir=".">
+ <property name="ROYALE_HOME" location="../../.."/>
+ <property name="example" value="todomvc" />
+
+ <property file="${ROYALE_HOME}/env.properties"/>
+ <property environment="env"/>
+ <property file="${ROYALE_HOME}/build.properties"/>
+ <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
+
+ <include file="${basedir}/../../build_example.xml" />
+
+
+
+ <target name="main" depends="clean,build_example.compile-js-only"
description="Clean build of ${example}">
+ </target>
+
+ <target name="clean">
+ <delete dir="${basedir}/bin" failonerror="false" />
+ <delete dir="${basedir}/bin-debug" failonerror="false" />
+ <delete dir="${basedir}/bin-release" failonerror="false" />
+ <delete dir="${basedir}/target" failonerror="false" />
+ </target>
+
+ <target name="examine" depends="build_example.get.browser">
+ <property name="which" value="debug" />
+ <echo message="Make sure label appears."/>
+ <exec executable="${browser}" dir="${basedir}/bin-${which}"
failonerror="true">
+ <arg value="${basedir}/bin-${which}/${example}.html"/>
+ </exec>
+ <exec executable="${browser}" dir="${basedir}/bin/js-${which}"
failonerror="true">
+ <arg value="${basedir}/bin/js-${which}/index.html"/>
+ </exec>
+ </target>
+
+</project>
diff --git a/examples/crux/todomvc/pom.xml b/examples/crux/todomvc/pom.xml
new file mode 100644
index 0000000..0d547f7
--- /dev/null
+++ b/examples/crux/todomvc/pom.xml
@@ -0,0 +1,125 @@
+<?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/maven-v4_0_0.xsd";>
+ <modelVersion>4.0.0</modelVersion>
+
+ <parent>
+ <groupId>org.apache.royale.examples</groupId>
+ <artifactId>examples-crux</artifactId>
+ <version>0.9.7-SNAPSHOT</version>
+ </parent>
+
+ <artifactId>todomvc-jewel-crux</artifactId>
+ <version>0.9.7-SNAPSHOT</version>
+ <packaging>swf</packaging>
+
+ <name>Apache Royale: Examples: TodoMVC-Jewel-Crux</name>
+
+ <build>
+ <plugins>
+ <plugin>
+ <groupId>org.apache.royale.compiler</groupId>
+ <artifactId>royale-maven-plugin</artifactId>
+ <extensions>true</extensions>
+ <configuration>
+ <mainClass>App.mxml</mainClass>
+ <targets>${royale.targets}</targets>
+ <debug>false</debug>
+
<htmlTemplate>${basedir}/target/javascript/bin/js-debug/todomvc-index-template.html</htmlTemplate>
+ <additionalCompilerOptions>
+ -js-default-initializers=true;
+
-keep-as3-metadata+=Inject,Dispatcher,EventHandler,PostConstruct,PreDestroy,ViewAdded,ViewRemoved,Bindable,Transient;
+ -keep-code-with-metadata=Inject;
+ -source-map=true;
+
-compiler.exclude-defaults-css-files=MXRoyale-${royale.framework.version}-js.swc:defaults.css;
+ </additionalCompilerOptions>
+ </configuration>
+ </plugin>
+ </plugins>
+ </build>
+
+ <dependencies>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Icons</artifactId>
+ <version>0.9.7-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Storage</artifactId>
+ <version>0.9.7-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Crux</artifactId>
+ <version>0.9.7-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>JewelTheme</artifactId>
+ <version>0.9.7-SNAPSHOT</version>
+ <type>swc</type>
+ <scope>theme</scope>
+ <classifier>js</classifier>
+ </dependency>
+ </dependencies>
+
+ <profiles>
+ <profile>
+ <id>option-with-swf</id>
+
+ <properties>
+ <!-- no point building the swf target -->
+ <royale.targets>JSRoyale</royale.targets>
+ </properties>
+
+ <dependencies>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Icons</artifactId>
+ <version>0.9.7-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Storage</artifactId>
+ <version>0.9.7-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Crux</artifactId>
+ <version>0.9.7-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ </dependencies>
+ </profile>
+ </profiles>
+
+</project>
diff --git a/examples/crux/todomvc/readme.md b/examples/crux/todomvc/readme.md
new file mode 100644
index 0000000..f11545e
--- /dev/null
+++ b/examples/crux/todomvc/readme.md
@@ -0,0 +1,68 @@
+<!--
+ 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.
+-->
+
+# Apache Royale TodoMVC Example (Crux version)
+
+> Apache Royale™ is a productive, open-source frontend application technology
that lets you code in MXML & AS3 and output to different formats, included
Javascript and SWF.
+
+> _[Apache Royale™ Website](https://royale.apache.org)_
+
+
+## Learning Apache Royale
+
+The [Apache Royale getting started
documentation](https://apache.github.io/royale-docs/get-started) is a great way
to get started.
+
+Here are some links you may find helpful:
+
+* [Documentation](https://apache.github.io/royale-docs)
+* [API Reference](https://royale.apache.org/asdoc)
+* [Blog](https://royale.apache.org/blog)
+* [Apache Royale on
GitHub](https://github.com/apache/royale-asjs/wiki/Apache-Royale-Source-Code-Repositories)
+* [Support (Dev Mailing List)](https://royale.apache.org/mailing-lists)
+* [FAQ](https://royale.apache.org/faq/)
+* [Get Involved](https://royale.apache.org/get-involved)
+
+Crux is a microframework for Inversion of Control (IoC), Dependency Injection
(DI) and event handling with metadata.
+
+* [Crux in Apache Royale
Docs](https://apache.github.io/royale-docs/libraries/crux)
+
+Articles and guides from the community:
+
+* [Royale Examples](https://royale.apache.org/category/royale-examples)
+
+Apache Royale social media:
+
+* [Twitter](https://twitter.com/apacheroyale)
+* [Facebook](https://facebook.com/ApacheRoyaleSDK/)
+* [LinkedIn](https://www.linkedin.com/groups/12118437)
+
+Get help from other Apache Royale users:
+
+* [Apache Royale on
StackOverflow](https://stackoverflow.com/questions/tagged/apache-royale)
+* [Discussion Forum (User Mailing
List)](https://royale.apache.org/mailing-lists)
+
+_If you have other helpful links to share, or find any of the links above no
longer work, please [let us
know](https://github.com/apache/royale-asjs/issues)._
+
+
+## Running
+
+The app is built upon [AS3](https://apache.github.io/royale-docs/features/as3)
and [MXML](https://apache.github.io/royale-docs/features/mxml) languages and
compiled with the Apache Royale Compiler.
+We use [Maven](https://maven.apache.org) and [ANT](https://ant.apache.org) to
build the project.
+
+To run the app, go to the generated code and run `index.html` or visit
[https://royale.apache.org/todomvc-jewel].
diff --git a/examples/crux/todomvc/src/main/config/compile-app-config.xml
b/examples/crux/todomvc/src/main/config/compile-app-config.xml
new file mode 100644
index 0000000..a507639
--- /dev/null
+++ b/examples/crux/todomvc/src/main/config/compile-app-config.xml
@@ -0,0 +1,46 @@
+<!--
+
+ 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.
+
+-->
+<royale-config>
+ <js-output-optimization>
+ <optimization>skipAsCoercions</optimization>
+ </js-output-optimization>
+ <js-dynamic-access-unknown-members>true</js-dynamic-access-unknown-members>
+
+ <compiler>
+ <targets>
+ <target>JSRoyale</target>
+ </targets>
+ <keep-as3-metadata>
+ <name>Bindable</name>
+ <name>Transient</name>
+ </keep-as3-metadata>
+
+ <js-library-path append="true">
+
<path-element>../../../../../../frameworks/js/libs/BasicJS.swc</path-element>
+
<path-element>../../../../../../frameworks/js/libs/IconsJS.swc</path-element>
+ </js-library-path>
+ <!--<library-path append="true">
+
<path-element>../../../../../../frameworks/libs/Basic.swc</path-element>
+
<path-element>../../../../../../frameworks/libs/Icons.swc</path-element>
+ </library-path>-->
+ <theme>
+
<filename>../../../../../../frameworks/libs/JewelTheme.swc</filename>
+ </theme>
+ </compiler>
+</royale-config>
diff --git
a/examples/crux/todomvc/src/main/resources/todomvc-index-template.html
b/examples/crux/todomvc/src/main/resources/todomvc-index-template.html
new file mode 100644
index 0000000..764fe53
--- /dev/null
+++ b/examples/crux/todomvc/src/main/resources/todomvc-index-template.html
@@ -0,0 +1,30 @@
+<!--
+ 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="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,
maximum-scale=1.0, user-scalable=no" />
+ <link rel="stylesheet" type="text/css" href="${application}.css">
+ <link href="https://fonts.googleapis.com/css?family=Lato:400,700";
rel="stylesheet">
+${head}
+</head>
+<body>
+${body}
+</body>
+</html>
diff --git a/examples/crux/todomvc/src/main/resources/todomvc-styles.css
b/examples/crux/todomvc/src/main/resources/todomvc-styles.css
new file mode 100644
index 0000000..24e1c4f
--- /dev/null
+++ b/examples/crux/todomvc/src/main/resources/todomvc-styles.css
@@ -0,0 +1,323 @@
+/*
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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";;
+
+/* Application */
+.jewel.application {
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.4em;
+ background: #f5f5f5;
+ color: #4d4d4d;
+ min-width: 230px;
+ max-width: 550px;
+ margin: 0 auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-weight: 300;
+}
+
+/* Main Section */
+.todoapp {
+ background: #fff;
+ margin: 130px 0 40px 0;
+ position: relative;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+ 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+/* Main Title */
+.todoapp h1 {
+ position: absolute;
+ top: -155px;
+ width: 100%;
+ font-size: 100px;
+ font-weight: 100;
+ text-align: center;
+ color: rgba(175, 47, 47, 0.15);
+ -webkit-text-rendering: optimizeLegibility;
+ -moz-text-rendering: optimizeLegibility;
+ text-rendering: optimizeLegibility;
+}
+
+/* Button */
+.jewel.button {
+ margin: 3px;
+ padding: 3px 7px;
+ background: none;
+ border: 1px solid transparent;
+ box-shadow: none;
+ border-radius: 0.25rem;
+ color: #808080;
+ text-shadow: none;
+ font-weight: normal;
+ text-transform: initial;
+}
+.jewel.button:hover, .jewel.button:hover:focus {
+ background: none;
+ border: 1px solid transparent;
+}
+.jewel.button:active, .jewel.button:active:focus {
+ background: none;
+ border: 1px solid transparent;
+ box-shadow: none;
+}
+.jewel.button:focus {
+ border: 1px solid transparent;
+ box-shadow: none;
+}
+
+/* ToggleButton */
+.jewel.togglebutton {
+ margin: 3px;
+ padding: 3px 7px;
+ background: none;
+ border: 1px solid transparent;
+ box-shadow: none;
+ border-radius: 0.25rem;
+ color: #808080;
+ text-shadow: none;
+ font-weight: normal;
+ text-transform: initial;
+}
+.jewel.togglebutton:hover, .jewel.togglebutton:hover:focus {
+ background: none;
+ border: 1px solid rgba(175, 47, 47, .1);
+}
+.jewel.togglebutton:active, .jewel.togglebutton:active:focus {
+ background: none;
+ border: 1px solid rgba(175,47,47,.2);
+ box-shadow: none;
+}
+.jewel.togglebutton:focus {
+ border: 1px solid #b3b3b3;
+ box-shadow: none;
+}
+.jewel.togglebutton.selected {
+ background: none;
+ border: 1px solid rgba(175,47,47,.2);;
+ box-shadow: none;
+}
+
+/* Toggle All */
+.jewel.togglebutton.toggleAll .fonticon {
+ font-size: 1.8em;
+}
+.jewel.togglebutton.toggleAll:hover, .jewel.togglebutton.toggleAll:hover:focus
{
+ border: 1px solid transparent;
+}
+.jewel.togglebutton.toggleAll:active,
.jewel.togglebutton.toggleAll:active:focus {
+ border: 1px solid transparent;
+}
+.jewel.togglebutton.toggleAll:focus {
+ border: 1px solid transparent;
+}
+.jewel.togglebutton.toggleAll.selected {
+ border: 1px solid transparent;
+}
+.jewel.togglebutton.toggleAll .fonticon {
+ color: #e6e6e6;
+}
+.jewel.togglebutton.toggleAll.selected .fonticon {
+ color: #737373;
+}
+
+/* TextInput */
+.jewel.textinput.new-todo input {
+ padding: 16px 16px 16px 60px !important;
+ border-radius: 0px;
+ border: none;
+
+ background: rgba(0, 0, 0, 0.003);
+ box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+
+ font-size: 24px;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-weight: 300;
+ font-stretch: normal;
+ font-style: normal;
+ font-variant-caps: normal;
+ font-weight: 300;
+ line-height: 1.4em;
+ border: 0;
+ color: rgb(77, 77, 77);
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.jewel.textinput.new-todo input:focus {
+ border: none;
+}
+.jewel.textinput.new-todo input::placeholder, .jewel.textinput.new-todo
input:-ms-input-placeholder {
+ color:rgb(230, 230, 230);
+ font-style: italic;
+}
+
+.jewel.item .jewel.textinput {
+ margin-left: 46px;
+}
+.jewel.textinput input {
+ background: none;
+ border-radius: 0px;
+ font-weight: 300;
+ padding: 12px;
+ font-size: 24px;
+ font-family: inherit;
+ font-weight: 300;
+ line-height: 1.4em;
+ height: auto;
+ outline: 0;
+ color: inherit;
+ border: 1px solid #999;
+ box-shadow: inset 0 -1px 5px 0 rgba(0,0,0,.2);
+ -webkit-font-smoothing: antialiased;
+ -moz-font-smoothing: antialiased;
+}
+.jewel.textinput input:focus {
+ border: 1px solid darkgrey;
+}
+
+/* List */
+.todo-list {
+ IItemRenderer:
ClassReference("jewel.todomvc.renderers.TodoItemRenderer");
+}
+
+.jewel.list {
+ border-radius: 0px;
+ border: none;
+ background: none;
+}
+
+/* ItemRenderer */
+.jewel.item {
+ padding: 0px;
+ min-height: 60px;
+}
+
+.todo-list li {
+ position: relative;
+ font-size: 24px;
+ border-bottom: 1px solid #ededed;
+}
+
+.todo-list li:last-child {
+ border-bottom: none;
+}
+
+.todo-list li.editing {
+ border-bottom: none;
+ padding: 0;
+}
+
+/* CheckBox */
+.jewel.checkbox {
+ margin: 8px;
+}
+
+.jewel.checkbox input + span::before {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 -18 100 135'
xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='50'
cy='50' r='50' fill='none' stroke='%23ededed' stroke-width='3'/%3E%3C/svg%3E")
no-repeat center center;
+ border: none;
+ border-radius: 50%;
+}
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 -18 100 135'
xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='50'
cy='50' r='50' fill='none' stroke='%23bddad5' stroke-width='3'/%3E%3Cpath
fill='%235dc2af' d='M72 25L42 71 27 56l-4 4 20 20 34-52z'/%3E%3C/svg%3E")
no-repeat center center;
+ border: none;
+ transition: none;
+ transform: none;
+}
+.jewel.checkbox input:checked + span::after, .jewel.checkbox
input:checked:active + span::after {
+ transform: none;
+}
+.jewel.checkbox input:focus + span::before, .jewel.checkbox
input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus
+ span::before {
+ background: none;
+ border: none;
+ border-radius: 50%;
+}
+.jewel.checkbox span {
+ padding-left: 3px;
+ font-size: 16px;
+}
+
+.completed {
+ color: #d9d9d9;
+ text-decoration: line-through;
+}
+
+/* ItemRenderer destroy button */
+.destroy {
+ color: #af5b5e !important;
+}
+
+/* Footer */
+.footer {
+ color: #777;
+ padding: 10px 15px;
+ text-align: center;
+ border-top: 1px solid #e6e6e6;
+}
+
+.footer:before {
+ content: '';
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ height: 50px;
+ overflow: hidden;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+ 0 8px 0 -3px #f6f6f6,
+ 0 9px 1px -3px rgba(0, 0, 0, 0.2),
+ 0 16px 0 -6px #f6f6f6,
+ 0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+/* BarRow */
+.jewel.barrow {
+ height: unset;
+}
+
+/* Clear Completed Button */
+.jewel.button.clearCompleted {
+ text-decoration: underline;
+}
+
+/* Footer Info */
+.info {
+ text-align: center;
+ margin: 65px auto 0;
+ color: #bfbfbf;
+ font-size: 10px;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+}
+
+.info p {
+ line-height: 1;
+}
+
+.info a {
+ font-weight: 400;
+ color: inherit;
+ text-decoration: none;
+}
+
+.info a:hover {
+ text-decoration: underline;
+}
\ No newline at end of file
diff --git a/examples/crux/todomvc/src/main/royale/App.mxml
b/examples/crux/todomvc/src/main/royale/App.mxml
new file mode 100644
index 0000000..3d5aec4
--- /dev/null
+++ b/examples/crux/todomvc/src/main/royale/App.mxml
@@ -0,0 +1,83 @@
+<!--
+
+ 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.
+
+-->
+<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:js="library://ns.apache.org/royale/basic"
+ xmlns:crux="library://ns.apache.org/royale/crux"
+ xmlns:config="jewel.todomvc.config.*"
+ xmlns:views="jewel.todomvc.views.*"
+ initialize="setUp()">
+
+ <fx:Style source="../../main/resources/todomvc-styles.css"/>
+
+ <j:valuesImpl>
+ <js:SimpleCSSValuesImpl />
+ </j:valuesImpl>
+
+ <fx:Script>
+ <![CDATA[
+ import org.apache.royale.collections.ArrayList;
+ import org.apache.royale.reflection.registerClassAlias;
+
+ /**
+ * Register ArrayCollection alias to map to ArrayList
+ */
+ public function setUp():void
+ {
+
registerClassAlias("flex.messaging.io.ArrayCollection", ArrayList);
+ }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ClassAliasBead/>
+ <!-- support for simulated stage events in javascript (needed for Crux
view processing)-->
+ <!-- packageExclusionFilter="_default_" avoids dispatching events for
royale framework classes.
+ we can expect they will not have Crux metadata tags in any of
them, so we would only avoid this
+ if we needed to use stage-like events for other reasons to
emulate flash outside Crux...
+ -->
+ <crux:JSStageEvents packageExclusionFilter="_default_"/>
+ <!-- BeanProviders simply contain the non-display objects that Crux
should process. -->
+ <crux:Crux>
+ <crux:beanProviders>
+ <config:Beans/>
+ </crux:beanProviders>
+
+ <crux:config>
+ <crux:CruxConfig>
+ <crux:eventPackages>
+ <fx:Array>
+ <fx:String>jewel.todomvc.events.*</fx:String>
+ </fx:Array>
+ </crux:eventPackages>
+ <crux:viewPackages>
+ <fx:Array>
+ <fx:String>jewel.todomvc.views.*</fx:String>
+ </fx:Array>
+ </crux:viewPackages>
+ </crux:CruxConfig>
+ </crux:config>
+ </crux:Crux>
+ </j:beads>
+
+ <j:initialView>
+ <views:TodoListSection/>
+ </j:initialView>
+
+</j:Application>
diff --git
a/examples/crux/todomvc/src/main/royale/jewel/todomvc/config/Beans.mxml
b/examples/crux/todomvc/src/main/royale/jewel/todomvc/config/Beans.mxml
new file mode 100644
index 0000000..c46fd74
--- /dev/null
+++ b/examples/crux/todomvc/src/main/royale/jewel/todomvc/config/Beans.mxml
@@ -0,0 +1,28 @@
+<!--
+/*
+ * Copyright 2010 Swiz Framework Contributors
+ *
+ * Licensed 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. 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.
+ */
+// Apache Royale Crux example based on
https://github.com/swiz/swiz-examples/tree/master/SwizQuickStartExample-Flex4
+-->
+<crux:BeanProvider
+ xmlns:fx="http://ns.adobe.com/mxml/2009";
+ xmlns:crux="library://ns.apache.org/royale/crux"
+ xmlns:models="jewel.todomvc.models.*"
+ xmlns:controller="jewel.todomvc.controllers.*">
+
+ <models:TodoModel id="todoModel"/>
+ <controller:TodoController id="todoController"/>
+
+</crux:BeanProvider>
\ No newline at end of file
diff --git
a/examples/crux/todomvc/src/main/royale/jewel/todomvc/controllers/TodoController.as
b/examples/crux/todomvc/src/main/royale/jewel/todomvc/controllers/TodoController.as
new file mode 100644
index 0000000..0422640
--- /dev/null
+++
b/examples/crux/todomvc/src/main/royale/jewel/todomvc/controllers/TodoController.as
@@ -0,0 +1,203 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 jewel.todomvc.controllers
+{
+ import jewel.todomvc.events.TodoEvent;
+ import jewel.todomvc.models.TodoModel;
+ import jewel.todomvc.vos.TodoVO;
+
+ import org.apache.royale.collections.ArrayList;
+ import org.apache.royale.core.IStrand;
+
+ /**
+ * The Todo Controller holds all the global actions. The views dispatch
events that bubbles and
+ * this class register to these evens and updates the model, so views
can update accordingly using
+ * binding most of the times.
+ */
+ public class TodoController
+ {
+ /**
+ * Common todo model
+ */
+ //example of injection where name of source is different to
local name
+ [Inject(source = "todoModel")]
+ public var model:TodoModel;
+
+ /**
+ * [PostConstruct] methods are invoked after all dependencies
are injected.
+ * In this example, we set up a default user after the bean is
created.
+ */
+ [PostConstruct]
+ public function setUp(value:IStrand):void {
+ // retrieve local items and use it if exists
+ model.allItems = new ArrayList(model.getItemStore());
+
+ model.setUpFilteredCollections();
+ model.listItems = model.allItems;
+
+ updateInterface();
+ }
+
+ /**
+ * Add the todo item to the list, save data and refresh the list
state
+ */
+ [EventHandler(event="TodoEvent.ADD_TODO_ITEM",
properties="todo")]
+ public function addTodoItem(todo:TodoVO):void {
+ model.allItems.addItem(todo);
+
+ saveDataToLocal();
+ updateInterface();
+ }
+
+ /**
+ * Mark all todo items as completed or uncompleted, save data and
update the interface accordingly
+ */
+ [EventHandler(event="TodoEvent.TOGGLE_ALL_COMPLETE")]
+ public function toggleAllComplete(event:TodoEvent):void {
+ model.toggleAllToCompletedState =
!model.toggleAllToCompletedState;
+
+ var len:int = model.allItems.length;
+ var item:TodoVO;
+ for(var i:int = 0; i < len; i++) {
+ item = TodoVO(model.allItems.getItemAt(i));
+ item.done = model.toggleAllToCompletedState;
+ }
+
+ saveDataToLocal();
+ updateInterface();
+ }
+
+ /**
+ * Remove all completed todo items, save data and update footer and
toggle all button visibility
+ */
+ [EventHandler(event="TodoEvent.REMOVE_COMPLETED")]
+ public function removeCompleted(event:TodoEvent):void {
+ var l:uint = model.allItems.length;
+ var item:TodoVO;
+ while(l--) {
+ item = TodoVO(model.allItems.getItemAt(l));
+ if(item.done){
+ model.allItems.removeItem(item);
+ }
+ }
+
+ saveDataToLocal();
+ updateInterface();
+ }
+
+ /**
+ * Refresh the todo list to the appropiate filter state (All, Active
or Completed)
+ */
+ [EventHandler(event="TodoEvent.REFRESH_LIST",
properties="label")]
+ public function refreshList(label:String):void
+ {
+ if(model.filterState != label) {
+ model.filterState = label;
+
+ setListState();
+ }
+ }
+
+ /**
+ * When some todo item change state (done/undone), we must
save data and update the interface accordingly
+ */
+ [EventHandler(event="TodoEvent.ITEM_STATE_CHANGED",
properties="todo, completion")]
+ public function itemStateChangedHandler(todo:TodoVO,
completion:String):void {
+ todo.done = completion;
+ model.allItems.itemUpdated(todo);
+
+ saveDataToLocal();
+ updateInterface();
+ }
+
+ /**
+ * Commit the label changes to the item and save data
+ * if label is empty, remove todo item
+ */
+ [EventHandler(event="TodoEvent.ITEM_LABEL_CHANGED",
properties="todo, label")]
+ public function itemLabelChangedHandler(todo:TodoVO,
label:String):void {
+ if(label != ""){
+ todo.label = label;
+ model.allItems.itemUpdated(todo);
+ }
+ else {
+ model.allItems.removeItem(todo);
+ }
+
+ saveDataToLocal();
+ updateInterface();
+ }
+
+ /**
+ * When the user click in the renderer destroy button we must
remove the item, save data and update the interface
+ */
+ [EventHandler(event="TodoEvent.ITEM_REMOVED",
properties="todo")]
+ public function itemRemovedHandler(todo:TodoVO):void {
+ model.allItems.removeItem(todo);
+
+ saveDataToLocal();
+ updateInterface();
+ }
+
+ /**
+ * Saves the actual data to the local storage via Local SharedObject
+ */
+ protected function saveDataToLocal():void {
+ try {
+ model.setItemStore(model.allItems.source);
+ } catch (error:Error) {
+ trace("You need to be online to store locally");
+ }
+ }
+
+ /**
+ * Update the interface accordingly
+ */
+ protected function updateInterface():void {
+ setListState();
+ var item:String = model.activeItems.length == 1 ? "
item " : " items ";
+ model.itemsLeftLabel = model.activeItems.length + item
+ "left";
+ model.clearCompletedVisibility = model.completedItems.length != 0;
+ model.footerVisibility = model.allItems.length != 0;
+ model.toogleAllVisibility = model.allItems.length != 0;
+ model.toggleAllToCompletedState =
model.activeItems.length == 0;
+ }
+
+ /**
+ * Sets the new state filter and refresh list to match the
filter
+ */
+ protected function setListState():void {
+ // setting to the same collection must cause refreshed
too
+ model.listItems = null;
+
+ model.activeItems.refresh();
+ model.completedItems.refresh();
+
+ if(model.filterState == TodoModel.ALL_FILTER) {
+ model.listItems = model.allItems;
+ }
+ else if(model.filterState == TodoModel.ACTIVE_FILTER) {
+ model.listItems = model.activeItems;
+ }
+ else if(model.filterState ==
TodoModel.COMPLETED_FILTER) {
+ model.listItems = model.completedItems;
+ }
+ }
+ }
+}
diff --git
a/examples/crux/todomvc/src/main/royale/jewel/todomvc/events/TodoEvent.as
b/examples/crux/todomvc/src/main/royale/jewel/todomvc/events/TodoEvent.as
new file mode 100644
index 0000000..42f6b5e
--- /dev/null
+++ b/examples/crux/todomvc/src/main/royale/jewel/todomvc/events/TodoEvent.as
@@ -0,0 +1,72 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 jewel.todomvc.events
+{
+ import jewel.todomvc.vos.TodoVO;
+
+ import org.apache.royale.events.Event;
+
+ /**
+ * Todo Event
+ */
+ public class TodoEvent extends Event
+ {
+ /**
+ * Actions
+ */
+ public static const ADD_TODO_ITEM:String = "add_Todo_Item";
+ public static const TOGGLE_ALL_COMPLETE:String =
"toggle_all_complete";
+ public static const REMOVE_COMPLETED:String =
"remove_completed";
+ public static const REFRESH_LIST:String = "refresh_list";
+
+ public static const ITEM_STATE_CHANGED:String =
"item_state_changed";
+ public static const ITEM_LABEL_CHANGED:String =
"item_label_changed";
+ public static const ITEM_REMOVED:String = "item_removed";
+
+ /**
+ * The todo to pass between layers
+ */
+ public var todo:TodoVO;
+
+ /**
+ * Use to send the filter state label or the changes in a todo
item label
+ */
+ public var label:String;
+
+ /**
+ * To send the state of the item (done/undone)
+ */
+ public var completion:Boolean;
+
+ /**
+ * constructor
+ *
+ * This is just a normal Royale event which will be dispatched
from a view instance.
+ * The only thing to note is that we set 'bubbles' to true, so
that the event will bubble
+ * up the 'display' list, allowing Crux to listen for your
events.
+ */
+ public function TodoEvent(type:String, todo:TodoVO = null,
label:String = null, completion:Boolean = false) {
+ super(type, true);
+
+ this.todo = todo;
+ this.label = label;
+ this.completion = completion
+ }
+ }
+}
\ No newline at end of file
diff --git
a/examples/crux/todomvc/src/main/royale/jewel/todomvc/models/TodoModel.as
b/examples/crux/todomvc/src/main/royale/jewel/todomvc/models/TodoModel.as
new file mode 100644
index 0000000..c3ba82f
--- /dev/null
+++ b/examples/crux/todomvc/src/main/royale/jewel/todomvc/models/TodoModel.as
@@ -0,0 +1,154 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 jewel.todomvc.models
+{
+ import jewel.todomvc.vos.TodoVO;
+
+ import org.apache.royale.collections.ArrayList;
+ import org.apache.royale.collections.ArrayListView;
+ import org.apache.royale.events.EventDispatcher;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.storage.AMFStorage;
+
+ [Bindable]
+ /**
+ * Todo Model stores global model variables that are updated by controller
+ * and used in views to update visuals for the user
+ */
+ public class TodoModel
+ {
+ /**
+ * We have three todo list states: All, Active and Completed
+ */
+ public static const ALL_FILTER:String = "All";
+ public static const ACTIVE_FILTER:String = "Active";
+ public static const COMPLETED_FILTER:String = "Completed";
+
+ /**
+ * The [Dispatcher] metadata tag instructs Crux to inject an
event dispatcher.
+ * Event's dispatched via this dispatcher can trigger event
mediators.
+ */
+ [Dispaqtcher]
+ public var dispatcher : IEventDispatcher;
+
+ /**
+ * Retrieves the array ot items
+ */
+ public function getItemStore():Array
+ {
+ var itemArr:Array = storage.data["items"] || [];
+ return itemArr;
+ }
+
+ /**
+ * Saves the array ot items
+ */
+ public function setItemStore(items:Array):void
+ {
+ storage.data["items"] = items;
+ storage.save();
+ }
+
+ /**
+ * Local storage for the todo items
+ */
+ private var storage:AMFStorage = AMFStorage.getLocal("todomvc");
+
+ /**
+ * the list of items binded to the todo list component
+ */
+ public var listItems:Object;
+
+ /**
+ * the real list with all items
+ */
+ public var allItems:ArrayList;
+
+ /**
+ * the filtered list with active items
+ */
+ public var activeItems:ArrayListView;
+
+ /**
+ * the filtered list with completed items
+ */
+ public var completedItems:ArrayListView;
+
+ /**
+ * Set up the filtered collections for later use
+ */
+ public function setUpFilteredCollections():void {
+ activeItems = filterItems(isActive);
+ completedItems = filterItems(isCompleted);
+ }
+ /**
+ * Filter the items in the list creating an ArrayListView with the
right filter function
+ */
+ public function filterItems(filterFunction:Function =
null):ArrayListView {
+ var alv:ArrayListView = new ArrayListView(allItems);
+ alv.filterFunction = filterFunction;
+ alv.refresh();
+ return alv;
+ }
+
+ /**
+ * filterFunction for the ArrayListView to get active items
+ */
+ public function isActive(item:TodoVO):Boolean {
+ return item && item.done == false;
+ }
+
+ /**
+ * filterFunction for the ArrayListView to get completed items
+ */
+ public function isCompleted(item:TodoVO):Boolean {
+ return item && item.done == true;
+ }
+
+ /**
+ * Stores the current filter for the list
+ */
+ public var filterState:String = TodoModel.ALL_FILTER;
+
+ /**
+ * true, toggle all todo items to completed state, false to all
uncompleted
+ */
+ public var toggleAllToCompletedState:Boolean = false;
+
+ /**
+ * how many items left to do
+ */
+ public var itemsLeftLabel:String = "0 items left";
+
+ /**
+ * footer bar visibility
+ */
+ public var footerVisibility:Boolean = false;
+
+ /**
+ * toggle all button visibility
+ */
+ public var toogleAllVisibility:Boolean = false;
+
+ /**
+ * clear completed button visibility
+ */
+ public var clearCompletedVisibility:Boolean = false;
+ }
+}
diff --git
a/examples/crux/todomvc/src/main/royale/jewel/todomvc/renderers/TodoItemRenderer.mxml
b/examples/crux/todomvc/src/main/royale/jewel/todomvc/renderers/TodoItemRenderer.mxml
new file mode 100644
index 0000000..89e3934
--- /dev/null
+++
b/examples/crux/todomvc/src/main/royale/jewel/todomvc/renderers/TodoItemRenderer.mxml
@@ -0,0 +1,165 @@
+<?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.
+
+-->
+<j:ListItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009";
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:js="library://ns.apache.org/royale/basic"
+ hoverable="false" selectable="false" width="100%"
+ rollOver="rollOverHandler(event)"
+ rollOut="rollOutHandler(event)">
+
+ <fx:Script>
+ <![CDATA[
+ import jewel.todomvc.events.TodoEvent;
+ import jewel.todomvc.vos.TodoVO;
+
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.MouseEvent;
+
+ /**
+ * Used to know if mouse is over this render in order to
+ * show destroy button when exit editing state
+ */
+ private var mouseIsOverRenderer:Boolean = false;
+
+ /**
+ * the item used in bindnigs for this renderer
+ */
+ [Bindable("dataChange")]
+ public function get item():TodoVO {
+ return data as TodoVO;
+ }
+
+ /**
+ * Change the item state between done/undone
+ */
+ public function changeItemState(event:Event):void {
+ dispatchEvent(new TodoEvent(TodoEvent.ITEM_STATE_CHANGED,
item, null, event.target.selected));
+ }
+
+ /**
+ * Destroy this todo item
+ */
+ public function removeItemClickHandler(event:Event):void {
+ COMPILE::JS
+ {
+ document.removeEventListener('click', commitLabelChanges,
true);
+ }
+ dispatchEvent(new TodoEvent(TodoEvent.ITEM_REMOVED, item));
+ }
+
+ /**
+ * commit changes to the todo item and exit 'editing' state
+ */
+ public function updateLabelAndExit(event:Event):void {
+ commitLabelChanges();
+ }
+
+ /**
+ * Change renderer state to edit mode by double clicking in the
todo item label
+ */
+ public function goToEditMode(event:Event):void
+ {
+ editfield.text = description.text;
+ currentState = "editing";
+ destroy_btn.visible = false;
+ editfield.setFocus();
+
+ COMPILE::JS
+ {
+ document.addEventListener('click', commitLabelChanges, true);
+ }
+ }
+
+ /**
+ * remove document listener to stop listening click events. If
user made changes to label, commit
+ * changes to the todo item and exit 'editing' state.
+ * Make destroy button visible if mouse is over renderer.
+ */
+ public function commitLabelChanges():void {
+ COMPILE::JS
+ {
+ document.removeEventListener('click', commitLabelChanges,
true);
+ }
+ if(item.label != editfield.text)
+ dispatchEvent(new TodoEvent(TodoEvent.ITEM_LABEL_CHANGED,
item, editfield.text));
+ currentState = 'normal';
+ if(mouseIsOverRenderer)
+ destroy_btn.visible = true;
+ }
+
+ /**
+ * Show destroy button when user rolls over the renderer
+ */
+ public function rollOverHandler(event:Event):void
+ {
+ mouseIsOverRenderer = true;
+ if(currentState == "normal")
+ destroy_btn.visible = true;
+ }
+
+ /**
+ * Hide destroy button when user rolls out the renderer
+ */
+ public function rollOutHandler(event:Event):void
+ {
+ mouseIsOverRenderer = false;
+ if(currentState == "normal")
+ destroy_btn.visible = false;
+ }
+ ]]>
+ </fx:Script>
+
+ <j:states>
+ <js:State name="normal"/>
+ <js:State name="editing"/>
+ </j:states>
+
+ <j:beads>
+ <js:SimpleStatesImpl/>
+ <js:ItemRendererDataBinding />
+ </j:beads>
+
+ <j:CheckBox selected="{item ? item.done : false}"
+ visible.normal="true" visible.editing="false"
+ click="changeItemState(event);">
+ <j:beads>
+ <j:InputButtonSize width="40" height="40"/>
+ </j:beads>
+ </j:CheckBox>
+
+ <j:Label localId="description" width="84%"
+ text="{item ? item.label : ''}" multiline="true"
+ visible.normal="true" visible.editing="false"
+ className="{item ? (item.done ? 'todolabel completed' : 'todolabel') :
'todolabel' }"
+ doubleClick="goToEditMode(event)"/>
+
+ <j:TextInput localId="editfield" width="100%"
+ visible.normal="false" visible.editing="true"
+ enter="updateLabelAndExit(event)"/>
+
+ <j:IconButton localId="destroy_btn" visible="false" className="destroy"
+ click="removeItemClickHandler(event)">
+ <j:icon>
+ <js:FontIcon text="{MaterialIconType.CLOSE}" material="true"/>
+ </j:icon>
+ </j:IconButton>
+
+</j:ListItemRenderer>
+
diff --git
a/examples/crux/todomvc/src/main/royale/jewel/todomvc/views/TodoFooter.mxml
b/examples/crux/todomvc/src/main/royale/jewel/todomvc/views/TodoFooter.mxml
new file mode 100644
index 0000000..64c2f56
--- /dev/null
+++ b/examples/crux/todomvc/src/main/royale/jewel/todomvc/views/TodoFooter.mxml
@@ -0,0 +1,85 @@
+<?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.
+
+-->
+<j:BarRow xmlns:fx="http://ns.adobe.com/mxml/2009";
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:js="library://ns.apache.org/royale/basic">
+
+ <fx:Script>
+ <![CDATA[
+ import jewel.todomvc.events.TodoEvent;
+ import jewel.todomvc.models.TodoModel;
+
+ [Bindable]
+ [Inject]
+ public var todoModel:TodoModel;
+
+ /**
+ * Refresh list when change state
+ */
+ override public function set currentState(value:String):void {
+ super.currentState = value;
+ dispatchEvent(new TodoEvent(TodoEvent.REFRESH_LIST, null,
value));
+ }
+
+ /**
+ * All toggle buttons use this handler to navigate todo list
+ */
+ public function toggleButtonClickHandler(event:Event):void {
+ event.target.selected = true;
+ currentState = event.target.text;
+ }
+
+ /**
+ * Remove all completed todo items and update clear complete
visibility
+ */
+ public function removeCompleted():void {
+ dispatchEvent(new TodoEvent(TodoEvent.REMOVE_COMPLETED));
+ clearCompleted.visible = false;
+ }
+ ]]>
+ </fx:Script>
+
+ <j:states>
+ <js:State name="All"/>
+ <js:State name="Active"/>
+ <js:State name="Completed"/>
+ </j:states>
+
+ <j:beads>
+ <js:SimpleStatesImpl/>
+ <js:ContainerDataBinding/>
+ </j:beads>
+
+ <j:BarSection width="15%">
+ <j:Label localId="itemsLeft" text="{todoModel.itemsLeftLabel}"/>
+ </j:BarSection>
+
+ <j:BarSection gap="3" itemsHorizontalAlign="itemsCenter">
+ <j:ToggleButton localId="all_btn" selected.All="true"
selected.Active="false" selected.Completed="false" text="All"
click="toggleButtonClickHandler(event)"/>
+ <j:ToggleButton localId="active_btn" selected.All="false"
selected.Active="true" selected.Completed="false" text="Active"
click="toggleButtonClickHandler(event)"/>
+ <j:ToggleButton localId="completed_btn" selected.All="false"
selected.Active="false" selected.Completed="true" text="Completed"
click="toggleButtonClickHandler(event)"/>
+ </j:BarSection>
+
+ <j:BarSection width="15%" gap="3" itemsHorizontalAlign="itemsRight">
+ <j:Button localId="clearCompleted" text="Clear Completed"
className="clearCompleted"
+ visible="{todoModel.clearCompletedVisibility}"
click="removeCompleted()"/>
+ </j:BarSection>
+
+</j:BarRow>
\ No newline at end of file
diff --git
a/examples/crux/todomvc/src/main/royale/jewel/todomvc/views/TodoHeader.mxml
b/examples/crux/todomvc/src/main/royale/jewel/todomvc/views/TodoHeader.mxml
new file mode 100644
index 0000000..ffbe8a0
--- /dev/null
+++ b/examples/crux/todomvc/src/main/royale/jewel/todomvc/views/TodoHeader.mxml
@@ -0,0 +1,75 @@
+<?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.
+
+-->
+<j:Group xmlns:fx="http://ns.adobe.com/mxml/2009";
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:js="library://ns.apache.org/royale/basic"
+ height="65">
+
+ <fx:Script>
+ <![CDATA[
+ import jewel.todomvc.events.TodoEvent;
+ import jewel.todomvc.models.TodoModel;
+ import jewel.todomvc.vos.TodoVO;
+
+ import org.apache.royale.events.Event;
+
+ [Bindable]
+ [Inject]
+ public var todoModel:TodoModel;
+
+ /**
+ * Signal todo item addition from main text box if
text is not empty
+ */
+ private function addItem(event:Event):void {
+ if(event.target.text == "") return;
+ var newTodo:TodoVO = new
TodoVO(event.target.text);
+ dispatchEvent(new
TodoEvent(TodoEvent.ADD_TODO_ITEM, newTodo));
+ event.target.text = "";
+ }
+
+ /**
+ * Toggle all todo items complete or uncomplete
+ */
+ public function toggleAllComplete(event:Event):void {
+ dispatchEvent(new
TodoEvent(TodoEvent.TOGGLE_ALL_COMPLETE));
+ }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ContainerDataBinding/>
+ </j:beads>
+
+ <j:TextInput localId="need" width="100%" className="new-todo"
+ enter="addItem(event)">
+ <j:beads>
+ <j:TextPrompt prompt="What needs to be done?"/>
+ </j:beads>
+ </j:TextInput>
+
+ <j:ToggleButton localId="toogleAll"
visible="{todoModel.toogleAllVisibility}"
+ width="50" height="61" className="toggleAll"
selected="{todoModel.toggleAllToCompletedState}"
+ click="toggleAllComplete(event)">
+ <j:icon>
+ <js:FontIcon
text="{MaterialIconType.KEYBOARD_ARROW_DOWN}" material="true"/>
+ </j:icon>
+ </j:ToggleButton>
+
+</j:Group>
\ No newline at end of file
diff --git
a/examples/crux/todomvc/src/main/royale/jewel/todomvc/views/TodoListSection.mxml
b/examples/crux/todomvc/src/main/royale/jewel/todomvc/views/TodoListSection.mxml
new file mode 100644
index 0000000..5a8d9e4
--- /dev/null
+++
b/examples/crux/todomvc/src/main/royale/jewel/todomvc/views/TodoListSection.mxml
@@ -0,0 +1,97 @@
+<?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.
+
+-->
+<j:View xmlns:fx="http://ns.adobe.com/mxml/2009";
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:js="library://ns.apache.org/royale/basic"
+ xmlns:html="library://ns.apache.org/royale/html"
+ xmlns:views="jewel.todomvc.views.*">
+
+ <fx:Script>
+ <![CDATA[
+ import jewel.todomvc.models.TodoModel;
+
+ [Bindable]
+ [Inject]
+ public var todoModel:TodoModel;
+
+ /**
+ * Provide the appropiate browser window title
+ */
+ private function getTitleLookup():Object {
+ var retVal:Object = {};
+ var states:Array = [
+ TodoModel.ALL_FILTER,
+ TodoModel.ACTIVE_FILTER,
+ TodoModel.COMPLETED_FILTER
+ ]
+ for(var i:int=0; i < states.length ; i++)
+ {
+ retVal[states[i]] = "TodoMVC - " + states[i] + " State";
+ }
+ return retVal;
+ }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ContainerDataBinding/>
+ <js:Router>
+ <js:RouteToState component="{footer}"/>
+ <js:RouteTitleLookup lookup="{getTitleLookup()}"/>
+ </js:Router>
+ </j:beads>
+
+ <html:Section className="todoapp">
+ <html:H1 text="todos"/>
+
+ <html:Header>
+ <views:TodoHeader localId="header"/>
+ </html:Header>
+
+ <html:Section localId="main">
+ <j:List localId="todolist" width="100%"
+ labelField="label" className="todo-list"
+ dataProvider="{todoModel.listItems}">
+ <j:beads>
+ <j:AddListItemRendererForArrayListData/>
+ <j:RemoveListItemRendererForArrayListData/>
+ <j:UpdateListItemRendererForArrayListData/>
+ </j:beads>
+ </j:List>
+ </html:Section>
+
+ <html:Footer className="footer" visible="{todoModel.footerVisibility}">
+ <views:TodoFooter localId="footer" currentState="All"/>
+ </html:Footer>
+ </html:Section>
+
+ <html:Footer className="info">
+ <![CDATA[
+ <p>Double-click to edit a todo</p>
+ <p>
+ Created by
+ <a href="http://github.com/carlosrovira";
target="_blank">Carlos Rovira</a>
+ for
+ <a href="http://royale.apache.org"; target="_blank">Apache
Royale</a>
+ </p>
+ <p>Inspired in <a href="http://todomvc.com";
target="_blank">TodoMVC</a></p>
+ ]]>
+ </html:Footer>
+</j:View>
\ No newline at end of file
diff --git a/examples/crux/todomvc/src/main/royale/jewel/todomvc/vos/TodoVO.as
b/examples/crux/todomvc/src/main/royale/jewel/todomvc/vos/TodoVO.as
new file mode 100644
index 0000000..578be80
--- /dev/null
+++ b/examples/crux/todomvc/src/main/royale/jewel/todomvc/vos/TodoVO.as
@@ -0,0 +1,65 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 jewel.todomvc.vos
+{
+ [Bindable]
+ [RemoteClass(alias="jewel.todomvc.vos.TodoVO")]
+ /**
+ * The todo item definition with a label for description an completion
state
+ * The remote class is used to save and retrieve from amf local storage
(AMFStorage)
+ */
+ public class TodoVO
+ {
+ /**
+ * label description todo
+ */
+ public var label:String;
+
+ /**
+ * completion state (done/undone)
+ */
+ public var done:Boolean;
+
+ /**
+ * constructor
+ */
+ public function TodoVO(label:String)
+ {
+ this.label = label;
+ }
+
+ /**
+ * The following two methods could be used if we were saving and
reading the data as JSON,
+ * but we're actually saving and reading as AMF, that knows how to
encode/decode itself,
+ * so they are not necessary, so we left commented for reference.
+ */
+ // public function toJSON():Object{
+ // return {
+ // "label":label,
+ // "done":done
+ // }
+ // }
+ // public static function fromJSON(data:Object):TodoVO
+ // {
+ // var todo:TodoVO = new TodoVO(data["label"]);
+ // todo.done = data["done"];
+ // return todo;
+ // }
+ }
+}
diff --git a/examples/crux/todomvc/todomvc.as3proj
b/examples/crux/todomvc/todomvc.as3proj
new file mode 100644
index 0000000..1d61005
--- /dev/null
+++ b/examples/crux/todomvc/todomvc.as3proj
@@ -0,0 +1,115 @@
+<?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>
+ <output>
+ <movie fps="60"/>
+ <movie height="600"/>
+ <movie disabled="False"/>
+ <movie background="#FFFFFF"/>
+ <movie path="bin-debug/todomvc.swf"/>
+ <movie width="800"/>
+ <movie platform="Flash Player"/>
+ <movie version="11"/>
+ <movie input=""/>
+ </output>
+ <!-- Other classes to be compiled into your SWF -->
+ <jsOutput>
+ <option path=""/>
+ </jsOutput>
+ <classpaths>
+ <class path="src/main/royale"/>
+ </classpaths>
+ <moonshineResourcePaths></moonshineResourcePaths>
+ <moonshineNativeExtensionPaths></moonshineNativeExtensionPaths>
+ <build>
+ <option es="False"/>
+ <option verboseStackTraces="False"/>
+ <option customSDK=""/>
+ <option loadConfig=""/>
+ <option
additional="-theme=${royalelib}/themes/JewelTheme/src/main/resources/defaults.css
-html-template=src/main/resources/crux-jewel-example-index-template.html
+configname=flex"/>
+ <option optimize="False"/>
+ <option staticLinkRSL="False"/>
+ <option antBuildPath="build/build.xml"/>
+ <option showActionScriptWarnings="True"/>
+ <option compilerConstants=""/>
+ <option locale=""/>
+ <option linkReport=""/>
+ <option showDeprecationWarnings="True"/>
+ <option showUnusedTypeSelectorWarnings="True"/>
+ <option showBindingWarnings="True"/>
+ <option strict="True"/>
+ <option accessible="False"/>
+ <option useNetwork="True"/>
+ <option allowSourcePathOverlap="False"/>
+ <option useResourceBundleMetadata="True"/>
+ <option benchmark="False"/>
+ <option warnings="True"/>
+ </build>
+ <mavenBuild>
+ <option mavenBuildPath=""/>
+ <option settingsFilePath=""/>
+ <option commandLine=""/>
+ <actions>
+ <action action="install" actionName="Build"/>
+ <action action="clean package" actionName="Clean and package"/>
+ <action action="clean" actionName="Clean"/>
+ <action action="clean install" actionName="Clean and Build"/>
+ <action action="war:exploded" actionName="Exploded"/>
+ </actions>
+ </mavenBuild>
+ <includeLibraries></includeLibraries>
+ <libraryPaths></libraryPaths>
+ <externalLibraryPaths></externalLibraryPaths>
+ <rslPaths></rslPaths>
+ <intrinsics>
+ <element path="Library/AS3/frameworks/Flex4"/>
+ <element path="Library\AS3\frameworks\Flex4"/>
+ </intrinsics>
+ <library></library>
+ <compileTargets>
+ <compile path="src/main/royale/todomvc.mxml"/>
+ </compileTargets>
+ <hiddenPaths></hiddenPaths>
+ <preBuildCommand>null</preBuildCommand>
+ <postBuildCommand alwaysRun="False">null</postBuildCommand>
+ <trustSVNCertificate>False</trustSVNCertificate>
+ <options>
+ <option isPrimeFacesVisualEditor="False"/>
+ <option defaultBuildTargets=""/>
+ <option visualEditorExportPath=""/>
+ <option showHiddenPaths="False"/>
+ <option isRoyale="True"/>
+ <option testMovie=""/>
+ <option testMovieCommand=""/>
+ <option isExportedToExistingSource="False"/>
+ </options>
+ <moonshineRunCustomization>
+ <option customUrlToLaunch=""/>
+ <option deviceSimulator="null"/>
+ <option targetPlatform="2"/>
+ <option urlToLaunch=""/>
+ <option projectType="2"/>
+ <option launchMethod="Simulator"/>
+ <deviceSimulator>null</deviceSimulator>
+ <certAndroid>null</certAndroid>
+ <certIos>null</certIos>
+ <certIosProvisioning>null</certIosProvisioning>
+ </moonshineRunCustomization>
+</project>
\ No newline at end of file
