You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2020/09/04 00:00:20 UTC
[royale-asjs] branch develop updated: blog-example: Live Editing
DataGrid (temporal). Shows WIP implementation about editing cells in
DataContainer,
List and DataGrid. This example is temporal and need more implementation
(events and more infrastructure)
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 6aae6df blog-example: Live Editing DataGrid (temporal). Shows WIP implementation about editing cells in DataContainer, List and DataGrid. This example is temporal and need more implementation (events and more infrastructure)
6aae6df is described below
commit 6aae6dfdbd19de358674abc346790d995086d16c
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Sep 4 02:00:08 2020 +0200
blog-example: Live Editing DataGrid (temporal). Shows WIP implementation about editing cells in DataContainer, List and DataGrid. This example is temporal and need more implementation (events and more infrastructure)
---
.../BE0016_Live_Editing_DataGrid.mxml.as3proj | 117 +++++++++++++++++++++
.../blog/BE0016_Live_Editing_DataGrid/README.txt | 29 +++++
.../BE0016_Live_Editing_DataGrid/asconfig.json | 34 ++++++
examples/blog/BE0016_Live_Editing_DataGrid/pom.xml | 101 ++++++++++++++++++
.../resources/jewel-example-index-template.html | 30 ++++++
.../main/royale/BE0016_Live_Editing_DataGrid.mxml | 112 ++++++++++++++++++++
.../itemRenderers/DataContainerEditorRenderer.mxml | 110 +++++++++++++++++++
.../itemRenderers/DataGridEditorRenderer.mxml | 112 ++++++++++++++++++++
.../royale/itemRenderers/ListEditorRenderer.mxml | 110 +++++++++++++++++++
.../src/main/royale/vos/UserVO.as | 33 ++++++
10 files changed, 788 insertions(+)
diff --git a/examples/blog/BE0016_Live_Editing_DataGrid/BE0016_Live_Editing_DataGrid.mxml.as3proj b/examples/blog/BE0016_Live_Editing_DataGrid/BE0016_Live_Editing_DataGrid.mxml.as3proj
new file mode 100644
index 0000000..150e792
--- /dev/null
+++ b/examples/blog/BE0016_Live_Editing_DataGrid/BE0016_Live_Editing_DataGrid.mxml.as3proj
@@ -0,0 +1,117 @@
+<!--
+
+ 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.
+
+-->
+<?xml version="1.0" encoding="utf-8"?>
+<project>
+ <output>
+ <movie width="800"/>
+ <movie disabled="False"/>
+ <movie path="bin-debug/NewJavaScriptBrowserProject.swf"/>
+ <movie platform="Flash Player"/>
+ <movie fps="60"/>
+ <movie version="11"/>
+ <movie height="600"/>
+ <movie background="#FFFFFF"/>
+ <movie input=""/>
+ </output>
+ <!-- Other classes to be compiled into your SWF -->
+ <jsOutput>
+ <option path="/Users/christofer.dutz/Library/Containers/com.moonshine-ide/Data/Documents/NewJavaScriptBrowserProject"/>
+ </jsOutput>
+ <classpaths>
+ <class path="src"/>
+ </classpaths>
+ <moonshineResourcePaths></moonshineResourcePaths>
+ <moonshineNativeExtensionPaths></moonshineNativeExtensionPaths>
+ <build>
+ <option compilerConstants=""/>
+ <option strict="True"/>
+ <option useResourceBundleMetadata="True"/>
+ <option allowSourcePathOverlap="False"/>
+ <option sourceMap="True"/>
+ <option showDeprecationWarnings="True"/>
+ <option benchmark="False"/>
+ <option showBindingWarnings="True"/>
+ <option warnings="True"/>
+ <option customSDK="/Users/christofer.dutz/Downloads/MoonshineSDKs/Royale_SDK/apache-royale-0.9.6-bin-js/royale-asjs"/>
+ <option showActionScriptWarnings="True"/>
+ <option antBuildPath="build/build.xml"/>
+ <option verboseStackTraces="False"/>
+ <option loadConfig=""/>
+ <option additional="-theme=${royalelib}/themes/JewelTheme/src/main/resources/defaults.css -html-template=src/resources/jewel-index-template.html"/>
+ <option linkReport=""/>
+ <option optimize="False"/>
+ <option locale=""/>
+ <option accessible="False"/>
+ <option staticLinkRSL="False"/>
+ <option showUnusedTypeSelectorWarnings="True"/>
+ <option useNetwork="True"/>
+ <option es="False"/>
+ </build>
+ <mavenBuild>
+ <option settingsFilePath=""/>
+ <option mavenBuildPath="/Users/christofer.dutz/Library/Containers/com.moonshine-ide/Data/Documents/NewJavaScriptBrowserProject"/>
+ <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"/>
+ <element path="Library\AS3\frameworks\Flex4"/>
+ </intrinsics>
+ <library></library>
+ <compileTargets>
+ <compile path="src/NewJavaScriptBrowserProject.mxml"/>
+ </compileTargets>
+ <hiddenPaths></hiddenPaths>
+ <preBuildCommand>null</preBuildCommand>
+ <postBuildCommand alwaysRun="False">null</postBuildCommand>
+ <trustSVNCertificate>False</trustSVNCertificate>
+ <options>
+ <option testMovieCommand=""/>
+ <option defaultBuildTargets=""/>
+ <option isRoyale="True"/>
+ <option isExportedToExistingSource="False"/>
+ <option showHiddenPaths="False"/>
+ <option isPrimeFacesVisualEditor="False"/>
+ <option testMovie=""/>
+ <option visualEditorExportPath=""/>
+ </options>
+ <moonshineRunCustomization>
+ <option launchMethod="Simulator"/>
+ <option urlToLaunch="/Users/christofer.dutz/Library/Containers/com.moonshine-ide/Data/Documents/NewJavaScriptBrowserProject/bin/js-debug/index.html"/>
+ <option targetPlatform="5"/>
+ <option projectType="2"/>
+ <option customUrlToLaunch=""/>
+ <option deviceSimulator="null"/>
+ <deviceSimulator>null</deviceSimulator>
+ <certAndroid>null</certAndroid>
+ <certIos>null</certIos>
+ <certIosProvisioning>null</certIosProvisioning>
+ </moonshineRunCustomization>
+</project>
\ No newline at end of file
diff --git a/examples/blog/BE0016_Live_Editing_DataGrid/README.txt b/examples/blog/BE0016_Live_Editing_DataGrid/README.txt
new file mode 100644
index 0000000..43359df
--- /dev/null
+++ b/examples/blog/BE0016_Live_Editing_DataGrid/README.txt
@@ -0,0 +1,29 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+DESCRIPTION
+
+Using Jewel TileHorizontalLayout
+
+This example shows how to use the Jewel TileHorizontalLayout in Jewel component containers
+and data containers to arrange items as tiles.
+
+The layout allows customization of tile's size, gaps between tiles, and requested columns and/or rows.
+
+https://royale.apache.org/using-jewel-tilehorizontallayout/
diff --git a/examples/blog/BE0016_Live_Editing_DataGrid/asconfig.json b/examples/blog/BE0016_Live_Editing_DataGrid/asconfig.json
new file mode 100644
index 0000000..b2f435a
--- /dev/null
+++ b/examples/blog/BE0016_Live_Editing_DataGrid/asconfig.json
@@ -0,0 +1,34 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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,
+ "html-template": "src/main/resources/jewel-example-index-template.html",
+ "theme": "${royalelib}/themes/JewelTheme/src/main/resources/defaults.css"
+ },
+ "copySourcePathAssets": true,
+ "additionalOptions": "-remove-circulars -js-output-optimization=skipAsCoercions",
+ "files":
+ [
+ "src/main/royale/BE0015_Using_Jewel_TileHorizontalLayout.mxml"
+ ]
+}
diff --git a/examples/blog/BE0016_Live_Editing_DataGrid/pom.xml b/examples/blog/BE0016_Live_Editing_DataGrid/pom.xml
new file mode 100644
index 0000000..3a116c6
--- /dev/null
+++ b/examples/blog/BE0016_Live_Editing_DataGrid/pom.xml
@@ -0,0 +1,101 @@
+<?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.royale.examples</groupId>
+ <artifactId>examples-blog</artifactId>
+ <version>0.9.8-SNAPSHOT</version>
+ </parent>
+
+ <artifactId>BE0016_Live_Editing_DataGrid.mxml</artifactId>
+ <version>0.9.8-SNAPSHOT</version>
+ <packaging>swf</packaging>
+
+ <name>Apache Royale: Examples: Blog: 0016: Live Editing DataGrid.mxml</name>
+
+ <build>
+ <sourceDirectory>src/main/royale</sourceDirectory>
+ <plugins>
+ <plugin>
+ <groupId>org.apache.royale.compiler</groupId>
+ <artifactId>royale-maven-plugin</artifactId>
+ <extensions>true</extensions>
+ <configuration>
+ <mainClass>BE0016_Live_Editing_DataGrid.mxml</mainClass>
+ <targets>JSRoyale</targets>
+ <debug>false</debug>
+ <htmlTemplate>${basedir}/target/javascript/bin/js-debug/jewel-example-index-template.html</htmlTemplate>
+ <additionalCompilerOptions>-source-map=true;</additionalCompilerOptions>
+ </configuration>
+ </plugin>
+ </plugins>
+ </build>
+
+ <dependencies>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel</artifactId>
+ <version>0.9.8-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Icons</artifactId>
+ <version>0.9.8-SNAPSHOT</version>
+ <type>swc</type>
+ <scope>theme</scope>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>JewelTheme</artifactId>
+ <version>0.9.8-SNAPSHOT</version>
+ <type>swc</type>
+ <scope>theme</scope>
+ <classifier>js</classifier>
+ </dependency>
+ </dependencies>
+
+ <profiles>
+ <profile>
+ <id>option-with-swf</id>
+ <dependencies>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel</artifactId>
+ <version>0.9.8-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Icons</artifactId>
+ <version>0.9.8-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ </dependencies>
+ </profile>
+ </profiles>
+
+<properties /></project>
diff --git a/examples/blog/BE0016_Live_Editing_DataGrid/src/main/resources/jewel-example-index-template.html b/examples/blog/BE0016_Live_Editing_DataGrid/src/main/resources/jewel-example-index-template.html
new file mode 100644
index 0000000..140ba98
--- /dev/null
+++ b/examples/blog/BE0016_Live_Editing_DataGrid/src/main/resources/jewel-example-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, minimum-scale=1.0">
+ <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/blog/BE0016_Live_Editing_DataGrid/src/main/royale/BE0016_Live_Editing_DataGrid.mxml b/examples/blog/BE0016_Live_Editing_DataGrid/src/main/royale/BE0016_Live_Editing_DataGrid.mxml
new file mode 100644
index 0000000..a4b1086
--- /dev/null
+++ b/examples/blog/BE0016_Live_Editing_DataGrid/src/main/royale/BE0016_Live_Editing_DataGrid.mxml
@@ -0,0 +1,112 @@
+<?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: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:html="library://ns.apache.org/royale/html"
+ xmlns:vos="vos.*">
+
+ <fx:Style>
+ @namespace "http://www.w3.org/1999/xhtml";
+ @namespace j "library://ns.apache.org/royale/jewel";
+
+ j|DataGrid {
+ IItemRenderer: ClassReference("itemRenderers.DataGridEditorRenderer");
+ }
+ </fx:Style>
+
+ <j:beads>
+ <js:ApplicationDataBinding/>
+ </j:beads>
+
+ <j:initialView>
+ <j:View>
+ <j:beads>
+ <j:HorizontalCenteredLayout/>
+ <j:Paddings padding="50"/>
+ </j:beads>
+
+ <j:Card width="500">
+ <j:CardHeader>
+ <html:H3 text="Live Editing DataGrid" className="primary-normal"/>
+ </j:CardHeader>
+
+ <j:CardPrimaryContent>
+ <j:DataGrid rowHeight="50" width="100%" height="100%"
+ >
+ <!-- itemRenderer="itemRenderers.DataGridEditorRenderer" -->
+ <j:columns>
+ <j:DataGridColumn label="First Name" dataField="firstname"/>
+ <j:DataGridColumn label="Surname" dataField="surname"
+ />
+ </j:columns>
+ <js:ArrayList>
+ <fx:Array>
+ <vos:UserVO firstname="Hugo" surname="Ferreira"/>
+ <vos:UserVO firstname="Carlos" surname="Rovira"/>
+ <vos:UserVO firstname="John" surname="Doe"/>
+ </fx:Array>
+ </js:ArrayList>
+ </j:DataGrid>
+ </j:CardPrimaryContent>
+
+ <j:CardHeader>
+ <html:H3 text="Live Editing List" className="primary-normal"/>
+ </j:CardHeader>
+
+ <j:CardPrimaryContent>
+ <j:List labelField="firstname" width="100%" height="100%"
+ rowHeight="50"
+ itemRenderer="itemRenderers.ListEditorRenderer"
+ >
+ <js:ArrayList>
+ <fx:Array>
+ <vos:UserVO firstname="Hugo" surname="Ferreira"/>
+ <vos:UserVO firstname="Carlos" surname="Rovira"/>
+ <vos:UserVO firstname="John" surname="Doe"/>
+ </fx:Array>
+ </js:ArrayList>
+ </j:List>
+ </j:CardPrimaryContent>
+
+ <j:CardHeader>
+ <html:H3 text="Live Editing DataContainer" className="primary-normal"/>
+ </j:CardHeader>
+
+ <j:CardPrimaryContent>
+
+ <j:DataContainer labelField="firstname" width="100%" height="100%"
+ itemRenderer="itemRenderers.DataContainerEditorRenderer"
+ >
+ <js:ArrayList>
+ <fx:Array>
+ <vos:UserVO firstname="Hugo" surname="Ferreira"/>
+ <vos:UserVO firstname="Carlos" surname="Rovira"/>
+ <vos:UserVO firstname="John" surname="Doe"/>
+ </fx:Array>
+ </js:ArrayList>
+ </j:DataContainer>
+
+ </j:CardPrimaryContent>
+ </j:Card>
+ </j:View>
+ </j:initialView>
+
+</j:Application>
\ No newline at end of file
diff --git a/examples/blog/BE0016_Live_Editing_DataGrid/src/main/royale/itemRenderers/DataContainerEditorRenderer.mxml b/examples/blog/BE0016_Live_Editing_DataGrid/src/main/royale/itemRenderers/DataContainerEditorRenderer.mxml
new file mode 100644
index 0000000..155c810
--- /dev/null
+++ b/examples/blog/BE0016_Live_Editing_DataGrid/src/main/royale/itemRenderers/DataContainerEditorRenderer.mxml
@@ -0,0 +1,110 @@
+<?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:StyledMXMLItemRenderer
+ 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 org.apache.royale.html.util.getLabelFromData;
+
+ /**
+ * commit changes to the data and exit 'editing' state
+ */
+ public function updateLabelAndExit(event:Event):void {
+ commitLabelChanges();
+ }
+
+ /**
+ * Change renderer state to edit mode by clicking in the label
+ */
+ public function goToEditMode(event:Event):void
+ {
+ editfield.text = static.text;
+ currentState = "editing";
+ 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.
+ */
+ public function commitLabelChanges():void {
+ COMPILE::JS
+ {
+ document.removeEventListener('click', commitLabelChanges, true);
+ }
+
+ if(getLabelFromData(this, data) != editfield.text)
+ {
+ static.text = editfield.text; // this should be done really in an event like below in a more generic solution
+ dispatchEvent(new Event("somethingChanged", data, editfield.text));
+ }
+ currentState = 'normal';
+ }
+
+ // public function tih(event:Event):void
+ // {
+ // editfield.element.addEventListener('focus', onInputFocus);
+ // }
+
+ // protected function onInputFocus(event:Event):void{
+ // trace(event);
+ // }
+ ]]>
+ </fx:Script>
+
+ <js:beads>
+ <js:SimpleStatesImpl/>
+ <js:ItemRendererDataBinding/>
+ <j:Paddings padding="0"/><!-- remove all default paddings -->
+ </js:beads>
+
+ <js:states>
+ <js:State name="normal"/>
+ <js:State name="editing"/>
+ </js:states>
+
+ <j:Label localId="static"
+ visible.normal="true" visible.editing="false"
+ width="100%" height="100%"
+ text="{getLabelFromData(this, data)}"
+ doubleClick="goToEditMode(event)"
+ >
+ <j:beads>
+ <j:Paddings padding="18"/>
+ </j:beads>
+ </j:Label>
+
+ <j:TextInput localId="editfield"
+ visible.normal="false" visible.editing="true"
+ width="100%" height="100%"
+ enter="updateLabelAndExit(event)"
+ />
+ <!-- beadsAdded="tih(event)" -->
+
+</js:StyledMXMLItemRenderer>
+
diff --git a/examples/blog/BE0016_Live_Editing_DataGrid/src/main/royale/itemRenderers/DataGridEditorRenderer.mxml b/examples/blog/BE0016_Live_Editing_DataGrid/src/main/royale/itemRenderers/DataGridEditorRenderer.mxml
new file mode 100644
index 0000000..b84877e
--- /dev/null
+++ b/examples/blog/BE0016_Live_Editing_DataGrid/src/main/royale/itemRenderers/DataGridEditorRenderer.mxml
@@ -0,0 +1,112 @@
+<?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:DataGridItemRenderer
+ 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 org.apache.royale.html.util.getLabelFromData;
+
+ /**
+ * commit changes to the data and exit 'editing' state
+ */
+ public function updateLabelAndExit(event:Event):void {
+ commitLabelChanges();
+ }
+
+ /**
+ * Change renderer state to edit mode by clicking in the label
+ */
+ public function goToEditMode(event:Event):void
+ {
+ currentState = "editing";
+ editfield.text = static.text;
+ 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.
+ */
+ public function commitLabelChanges():void {
+ COMPILE::JS
+ {
+ document.removeEventListener('click', commitLabelChanges, true);
+ }
+
+ if(getLabelFromData(this, data) != editfield.text)
+ {
+ static.text = editfield.text; // this should be done really in an event like below in a more generic solution
+ dispatchEvent(new Event("somethingChanged", data, editfield.text));
+ }
+ currentState = 'normal';
+ }
+
+ // public function tih(event:Event):void
+ // {
+ // editfield.element.addEventListener('focus', onInputFocus);
+ // }
+
+ // protected function onInputFocus(event:Event):void{
+ // trace(event);
+ // }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:SimpleStatesImpl/>
+ <js:ItemRendererDataBinding/>
+ <j:Paddings padding="0"/><!-- remove all default paddings -->
+ </j:beads>
+
+ <j:states>
+ <js:State name="normal"/>
+ <js:State name="editing"/>
+ </j:states>
+
+ <!-- visible.normal="true" visible.editing="false" -->
+ <j:Label localId="static"
+ includeIn="normal"
+ width="100%" height="100%"
+ text="{getLabelFromData(this, data)}"
+ doubleClick="goToEditMode(event)"
+ >
+ <j:beads>
+ <j:Paddings padding="18"/>
+ </j:beads>
+ </j:Label>
+
+ <!-- visible.normal="false" visible.editing="true" -->
+ <j:TextInput localId="editfield"
+ includeIn="editing"
+ width="100%" height="100%"
+ enter="updateLabelAndExit(event)"
+ />
+ <!-- beadsAdded="tih(event)" -->
+
+</j:DataGridItemRenderer>
+
diff --git a/examples/blog/BE0016_Live_Editing_DataGrid/src/main/royale/itemRenderers/ListEditorRenderer.mxml b/examples/blog/BE0016_Live_Editing_DataGrid/src/main/royale/itemRenderers/ListEditorRenderer.mxml
new file mode 100644
index 0000000..4f06c7b
--- /dev/null
+++ b/examples/blog/BE0016_Live_Editing_DataGrid/src/main/royale/itemRenderers/ListEditorRenderer.mxml
@@ -0,0 +1,110 @@
+<?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">
+
+ <fx:Script>
+ <![CDATA[
+ import org.apache.royale.html.util.getLabelFromData;
+
+ /**
+ * commit changes to the data and exit 'editing' state
+ */
+ public function updateLabelAndExit(event:Event):void {
+ commitLabelChanges();
+ }
+
+ /**
+ * Change renderer state to edit mode by clicking in the label
+ */
+ public function goToEditMode(event:Event):void
+ {
+ editfield.text = static.text;
+ currentState = "editing";
+ 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.
+ */
+ public function commitLabelChanges():void {
+ COMPILE::JS
+ {
+ document.removeEventListener('click', commitLabelChanges, true);
+ }
+
+ if(getLabelFromData(this, data) != editfield.text)
+ {
+ static.text = editfield.text; // this should be done really in an event like below in a more generic solution
+ dispatchEvent(new Event("somethingChanged", data, editfield.text));
+ }
+ currentState = 'normal';
+ }
+
+ // public function tih(event:Event):void
+ // {
+ // editfield.element.addEventListener('focus', onInputFocus);
+ // }
+
+ // protected function onInputFocus(event:Event):void{
+ // trace(event);
+ // }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:SimpleStatesImpl/>
+ <js:ItemRendererDataBinding/>
+ <j:Paddings padding="0"/><!-- remove all default paddings -->
+ </j:beads>
+
+ <j:states>
+ <js:State name="normal"/>
+ <js:State name="editing"/>
+ </j:states>
+
+ <j:Label localId="static"
+ visible.normal="true" visible.editing="false"
+ width="100%" height="100%"
+ text="{getLabelFromData(this, data)}"
+ doubleClick="goToEditMode(event)"
+ >
+ <j:beads>
+ <j:Paddings padding="18"/>
+ </j:beads>
+ </j:Label>
+
+ <j:TextInput localId="editfield"
+ visible.normal="false" visible.editing="true"
+ width="100%" height="100%"
+ enter="updateLabelAndExit(event)"
+ />
+ <!-- beadsAdded="tih(event)" -->
+
+</j:ListItemRenderer>
+
diff --git a/examples/blog/BE0016_Live_Editing_DataGrid/src/main/royale/vos/UserVO.as b/examples/blog/BE0016_Live_Editing_DataGrid/src/main/royale/vos/UserVO.as
new file mode 100644
index 0000000..ea68339
--- /dev/null
+++ b/examples/blog/BE0016_Live_Editing_DataGrid/src/main/royale/vos/UserVO.as
@@ -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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package vos
+{
+ [Bindable]
+ public class UserVO
+ {
+ public var firstname:String;
+ public var surname:String;
+
+ public function UserVO(firstname:String, surname:String = null)
+ {
+ this.firstname = firstname;
+ this.surname = surname;
+ }
+ }
+}