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 4901f84 left from last committodomvc-jewel-example: persist data in
local storage with SharedObject
4901f84 is described below
commit 4901f8454e4a967ffba3562e947d42888b855e82
Author: Carlos Rovira <[email protected]>
AuthorDate: Thu Jan 30 22:52:59 2020 +0100
left from last committodomvc-jewel-example: persist data in local storage
with SharedObject
---
examples/jewel/todomvc/pom.xml | 15 +++++
.../todomvc/src/main/resources/todomvc-styles.css | 65 +++++++++++++---------
examples/jewel/todomvc/src/main/royale/App.mxml | 22 +++++++-
.../jewel/todomvc/controllers/TodoController.as | 60 ++++++++++++++++----
.../main/royale/jewel/todomvc/models/TodoModel.as | 23 +++++++-
.../royale/jewel/todomvc/views/TodoFooter.mxml | 5 +-
.../royale/jewel/todomvc/views/TodoHeader.mxml | 9 +--
.../jewel/todomvc/views/TodoListSection.mxml | 3 +-
.../src/main/royale/jewel/todomvc/vos/TodoVO.as | 15 +++++
9 files changed, 170 insertions(+), 47 deletions(-)
diff --git a/examples/jewel/todomvc/pom.xml b/examples/jewel/todomvc/pom.xml
index 7e1207b..eba4bfb 100644
--- a/examples/jewel/todomvc/pom.xml
+++ b/examples/jewel/todomvc/pom.xml
@@ -46,6 +46,7 @@
<additionalCompilerOptions>
-js-dynamic-access-unknown-members=true;
-source-map=true;
+
-compiler.exclude-defaults-css-files=MXRoyale-${royale.framework.version}-js.swc:defaults.css
</additionalCompilerOptions>
</configuration>
</plugin>
@@ -62,6 +63,13 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
+ <artifactId>MXRoyale</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>
@@ -87,6 +95,13 @@
<type>swc</type>
<classifier>swf</classifier>
</dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>MXRoyale</artifactId>
+ <version>0.9.7-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
</dependencies>
</profile>
</profiles>
diff --git a/examples/jewel/todomvc/src/main/resources/todomvc-styles.css
b/examples/jewel/todomvc/src/main/resources/todomvc-styles.css
index 24264b3..6002d7a 100644
--- a/examples/jewel/todomvc/src/main/resources/todomvc-styles.css
+++ b/examples/jewel/todomvc/src/main/resources/todomvc-styles.css
@@ -84,9 +84,7 @@ todomvc|TodoListSection
}
.jewel.button:hover, .jewel.button:hover:focus {
background: none;
- border: 1px solid transparent;
-
- text-decoration: underline;
+ border: 1px solid transparent;
}
.jewel.button:active, .jewel.button:active:focus {
background: none;
@@ -98,6 +96,7 @@ todomvc|TodoListSection
box-shadow: none;
}
+/* ToggleButton */
.jewel.togglebutton {
margin: 3px;
padding: 3px 7px;
@@ -129,9 +128,30 @@ todomvc|TodoListSection
box-shadow: none;
}
+.jewel.togglebutton.toggleAll {
+
+}
+.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: #737373;
+}
+.jewel.togglebutton.toggleAll.selected .fonticon {
+ color: #e6e6e6;
+}
+
/* TextInput */
-.jewel.textinput.new-todo input
-{
+.jewel.textinput.new-todo input {
padding: 16px 16px 16px 60px !important;
border-radius: 0px;
border: none;
@@ -161,12 +181,10 @@ todomvc|TodoListSection
font-style: italic;
}
-.jewel.item .jewel.textinput
-{
+.jewel.item .jewel.textinput {
margin-left: 46px;
}
-.jewel.textinput input
-{
+.jewel.textinput input {
background: none;
border-radius: 0px;
font-weight: 300;
@@ -187,21 +205,18 @@ todomvc|TodoListSection
}
/* List */
-.todo-list
-{
+.todo-list {
IItemRenderer:
ClassReference("jewel.todomvc.renderers.TodoItemRenderer");
}
-.jewel.list
-{
+.jewel.list {
border-radius: 0px;
border: none;
background: none;
}
/* ItemRenderer */
-.jewel.item
-{
+.jewel.item {
padding: 0px;
}
@@ -221,8 +236,7 @@ todomvc|TodoListSection
}
/* CheckBox */
-.jewel.checkbox
-{
+.jewel.checkbox {
margin: 8px;
}
@@ -259,20 +273,17 @@ todomvc|TodoListSection
*/
/* ItemRenderer label */
-.todolabel
-{
+.todolabel {
padding-left: 13px;
}
-.completed
-{
+.completed {
color: #d9d9d9;
text-decoration: line-through;
}
/* ItemRenderer destroy button */
-.destroy
-{
+.destroy {
color: #af5b5e !important;
}
@@ -300,11 +311,15 @@ todomvc|TodoListSection
}
/* BarRow */
-.jewel.barrow
-{
+.jewel.barrow {
height: unset;
}
+/* Clear Completed Button */
+.jewel.button.clearCompleted {
+ text-decoration: underline;
+}
+
/* Footer Info */
.info {
text-align: center;
diff --git a/examples/jewel/todomvc/src/main/royale/App.mxml
b/examples/jewel/todomvc/src/main/royale/App.mxml
index 546447b..04f752e 100644
--- a/examples/jewel/todomvc/src/main/royale/App.mxml
+++ b/examples/jewel/todomvc/src/main/royale/App.mxml
@@ -19,7 +19,8 @@
<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:views="jewel.todomvc.views.*">
+ xmlns:views="jewel.todomvc.views.*"
+ initialize="setUp()">
<fx:Style source="../../main/resources/todomvc-styles.css"/>
@@ -27,6 +28,25 @@
<js:SimpleCSSValuesImpl />
</j:valuesImpl>
+ <fx:Script>
+ <![CDATA[
+ import org.apache.royale.reflection.registerClassAlias;
+ import org.apache.royale.collections.ArrayList;
+
+ /**
+ * Register ArrayCollection alias to map to ArrayList
+ */
+ public function setUp():void
+ {
+
registerClassAlias("flex.messaging.io.ArrayCollection", ArrayList);
+ }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ClassAliasBead/>
+ </j:beads>
+
<j:initialView>
<views:TodoListSection/>
</j:initialView>
diff --git
a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/controllers/TodoController.as
b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/controllers/TodoController.as
index c630e46..a8c6343 100644
---
a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/controllers/TodoController.as
+++
b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/controllers/TodoController.as
@@ -22,6 +22,7 @@ package jewel.todomvc.controllers
import jewel.todomvc.models.TodoModel;
import jewel.todomvc.vos.TodoVO;
+ import org.apache.royale.collections.ArrayList;
import org.apache.royale.core.IBeadController;
import org.apache.royale.core.IBeadModel;
import org.apache.royale.core.IStrand;
@@ -63,7 +64,18 @@ package jewel.todomvc.controllers
IEventDispatcher(_strand).addEventListener(TodoEvent.ITEM_REMOVED,
itemRemovedHandler);
model = _strand.getBeadByType(IBeadModel) as TodoModel;
+
+ // retrieve local items and use it if exists
+ var localAllItems:Array = model.storage.data["items"];
+ if(localAllItems)
+ model.allItems = new ArrayList(localAllItems);
+ else
+ model.allItems = new ArrayList();
+
+ model.setUpFilteredCollections();
model.listItems = model.allItems;
+
+ updateInterface();
}
/**
@@ -72,29 +84,48 @@ package jewel.todomvc.controllers
private var model:TodoModel;
/**
- * Add the todo item to the list and refresh the list state
+ * Saves the actual data to the local storage via Local SharedObject
+ */
+ protected function saveDataToLocal():void {
+ try {
+ model.storage.data["items"] =
model.allItems.source;
+ model.storage.flush();
+ } catch (error:Error) {
+ trace("You need to be online to store locally");
+ }
+ }
+
+ /**
+ * Add the todo item to the list, save data and refresh the list
state
*/
protected function addTodoItem(event:TodoEvent):void {
model.allItems.addItem(event.todo);
- updateInterface();
+
+ saveDataToLocal();
+ updateInterface();
}
+
+
/**
- * Mark all todo items as completed and update items left and clear
completed button visibility
+ * Mark all todo items as completed, save data and update the
interface accordingly
*/
protected function markAllComplete(event:TodoEvent):void {
- var len:int = model.allItems.length
+ model.toggleAllSelectedState =
!model.toggleAllSelectedState;
+
+ 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 = true;
+ item.done = model.toggleAllSelectedState;
}
+ saveDataToLocal();
updateInterface();
}
/**
- * Remove all completed todo items, update footer and toggle all
button visibility
+ * Remove all completed todo items, save data and update footer and
toggle all button visibility
*/
protected function removeCompleted(event:TodoEvent):void {
var l:uint = model.allItems.length;
@@ -106,8 +137,8 @@ package jewel.todomvc.controllers
}
}
- model.footerVisibility = model.allItems.length != 0 ?
true : false;
- model.toogleAllVisibility = model.allItems.length != 0
? true : false;
+ saveDataToLocal();
+ updateInterface();
}
/**
@@ -117,6 +148,7 @@ package jewel.todomvc.controllers
{
if(model.filterState != event.label) {
model.filterState = event.label;
+
setListState();
}
}
@@ -159,25 +191,31 @@ package jewel.todomvc.controllers
}
/**
- * When some todo item change state (done/undone), we must
update the interface accordingly
+ * When some todo item change state (done/undone), we must
save data and update the interface accordingly
*/
public function itemStateChangedHandler(event:TodoEvent = null):void {
event.todo.done = event.completion;
+
+ saveDataToLocal();
updateInterface();
}
/**
- * Commit the label changes to the item
+ * Commit the label changes to the item and save data
*/
public function itemLabelChangedHandler(event:TodoEvent = null):void {
event.todo.label = event.label;
+
+ saveDataToLocal();
}
/**
- * When the user click in the renderer destroy button we must
remove the item and update the interface
+ * When the user click in the renderer destroy button we must
remove the item, save data and update the interface
*/
public function itemRemovedHandler(event:TodoEvent):void {
model.allItems.removeItem(event.todo);
+
+ saveDataToLocal();
updateInterface();
}
diff --git
a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/models/TodoModel.as
b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/models/TodoModel.as
index edba1aa..2d449fc 100644
--- a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/models/TodoModel.as
+++ b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/models/TodoModel.as
@@ -20,6 +20,8 @@ package jewel.todomvc.models
{
import jewel.todomvc.vos.TodoVO;
+ import mx.net.SharedObject;
+
import org.apache.royale.collections.ArrayList;
import org.apache.royale.collections.ArrayListView;
import org.apache.royale.core.IBeadModel;
@@ -46,8 +48,6 @@ package jewel.todomvc.models
*/
public function TodoModel():void
{
- activeItems = filterItems(isActive);
- completedItems = filterItems(isCompleted);
}
private var _strand:IStrand;
@@ -69,6 +69,11 @@ package jewel.todomvc.models
public var router:Router;
/**
+ * Local storage for the todo items
+ */
+ public var storage:SharedObject = SharedObject.getLocal("todomvc");
+
+ /**
* the list of items binded to the todo list component
*/
public var listItems:Object;
@@ -76,7 +81,7 @@ package jewel.todomvc.models
/**
* the real list with all items
*/
- public var allItems:ArrayList = new ArrayList();
+ public var allItems:ArrayList;
/**
* the filtered list with active items
@@ -89,6 +94,13 @@ package jewel.todomvc.models
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 {
@@ -118,6 +130,11 @@ package jewel.todomvc.models
public var filterState:String = TodoModel.ALL_FILTER;
/**
+ * toggleAll button selected state
+ */
+ public var toggleAllSelectedState:Boolean = false;
+
+ /**
* how many items left to do
*/
public var itemsLeftLabel:String = "0 items left";
diff --git
a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/views/TodoFooter.mxml
b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/views/TodoFooter.mxml
index 1f85b6f..71756ae 100644
--- a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/views/TodoFooter.mxml
+++ b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/views/TodoFooter.mxml
@@ -23,8 +23,8 @@ limitations under the License.
<fx:Script>
<![CDATA[
- import jewel.todomvc.models.TodoModel;
import jewel.todomvc.events.TodoEvent;
+ import jewel.todomvc.models.TodoModel;
[Bindable]
public var todoModel:TodoModel;
@@ -96,7 +96,8 @@ limitations under the License.
</j:BarSection>
<j:BarSection width="15%" gap="3" itemsHorizontalAlign="itemsRight">
- <j:Button localId="clearCompleted" text="Clear Completed"
click="removeCompleted()" visible="{todoModel.clearCompletedVisibility}"/>
+ <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/jewel/todomvc/src/main/royale/jewel/todomvc/views/TodoHeader.mxml
b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/views/TodoHeader.mxml
index 3487343..877742e 100644
--- a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/views/TodoHeader.mxml
+++ b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/views/TodoHeader.mxml
@@ -19,7 +19,8 @@ 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">
+ xmlns:js="library://ns.apache.org/royale/basic"
+ height="61">
<fx:Script>
<![CDATA[
@@ -63,12 +64,12 @@ limitations under the License.
</j:beads>
</j:TextInput>
- <j:IconButton localId="toogleAll"
visible="{todoModel.toogleAllVisibility}"
- width="40" x="10" y="10" className="toggle-all"
+ <j:ToggleButton localId="toogleAll"
visible="{todoModel.toogleAllVisibility}"
+ width="34" height="55" className="toggleAll"
click="markAllComplete(event)">
<j:icon>
<js:FontIcon
text="{MaterialIconType.KEYBOARD_ARROW_DOWN}" material="true"/>
</j:icon>
- </j:IconButton>
+ </j:ToggleButton>
</j:Group>
\ No newline at end of file
diff --git
a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/views/TodoListSection.mxml
b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/views/TodoListSection.mxml
index 20bfbe5..d3f5298 100644
---
a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/views/TodoListSection.mxml
+++
b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/views/TodoListSection.mxml
@@ -27,6 +27,7 @@ limitations under the License.
<fx:Script>
<![CDATA[
import jewel.todomvc.models.TodoModel;
+
import org.apache.royale.core.IBeadModel;
import org.apache.royale.routing.RouteState;
@@ -42,7 +43,7 @@ limitations under the License.
todoModel.router = router;
header.todoModel = todoModel;
footer.todoModel = todoModel;
-
+
updateRouting();
}
diff --git a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/vos/TodoVO.as
b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/vos/TodoVO.as
index 08f922e..1ef8d62 100644
--- a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/vos/TodoVO.as
+++ b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/vos/TodoVO.as
@@ -19,11 +19,26 @@
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 local storage
+ */
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;
