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 030b618 todomvc-jewel-example: added routing
030b618 is described below
commit 030b6184cf39962965a75a9e660b312c8a45e076
Author: Carlos Rovira <[email protected]>
AuthorDate: Thu Jan 30 14:14:28 2020 +0100
todomvc-jewel-example: added routing
---
.../jewel/todomvc/controllers/TodoController.as | 23 +++++++++-
.../main/royale/jewel/todomvc/events/TodoEvent.as | 1 +
.../main/royale/jewel/todomvc/models/TodoModel.as | 6 +++
.../royale/jewel/todomvc/views/TodoFooter.mxml | 49 ++++++++++++----------
.../jewel/todomvc/views/TodoListSection.mxml | 26 +++++++++++-
5 files changed, 79 insertions(+), 26 deletions(-)
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 62f05d7..c630e46 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
@@ -57,6 +57,7 @@ package jewel.todomvc.controllers
IEventDispatcher(_strand).addEventListener(TodoEvent.MARK_ALL_COMPLETE,
markAllComplete);
IEventDispatcher(_strand).addEventListener(TodoEvent.REMOVE_COMPLETED,
removeCompleted);
IEventDispatcher(_strand).addEventListener(TodoEvent.REFRESH_LIST,
refreshList);
+
IEventDispatcher(_strand).addEventListener(TodoEvent.REFRESH_LIST_BY_USER,
refreshListByUser);
IEventDispatcher(_strand).addEventListener(TodoEvent.ITEM_STATE_CHANGED,
itemStateChangedHandler);
IEventDispatcher(_strand).addEventListener(TodoEvent.ITEM_LABEL_CHANGED,
itemLabelChangedHandler);
IEventDispatcher(_strand).addEventListener(TodoEvent.ITEM_REMOVED,
itemRemovedHandler);
@@ -114,8 +115,26 @@ package jewel.todomvc.controllers
*/
protected function refreshList(event:TodoEvent):void
{
- model.filterState = event.label;
- setListState();
+ if(model.filterState != event.label) {
+ model.filterState = event.label;
+ setListState();
+ }
+ }
+
+ /**
+ * Refresh the todo list to the appropiate filter state (All, Active
or Completed)
+ */
+ protected function refreshListByUser(event:TodoEvent):void
+ {
+ if(model.filterState != event.label) {
+ model.filterState = event.label;
+
+ model.router.routeState.title = "TodoMVC - " +
model.filterState + " State";
+ model.router.routeState.state =
model.filterState;
+ model.router.setState();
+
+ setListState();
+ }
}
/**
diff --git
a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/events/TodoEvent.as
b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/events/TodoEvent.as
index bdb2517..5e869fc 100644
--- a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/events/TodoEvent.as
+++ b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/events/TodoEvent.as
@@ -34,6 +34,7 @@ package jewel.todomvc.events
public static const MARK_ALL_COMPLETE:String =
"mark_all_complete";
public static const REMOVE_COMPLETED:String =
"remove_completed";
public static const REFRESH_LIST:String = "refresh_list";
+ public static const REFRESH_LIST_BY_USER:String =
"refresh_list_by_user";
public static const ITEM_STATE_CHANGED:String =
"item_state_changed";
public static const ITEM_LABEL_CHANGED:String =
"item_label_changed";
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 22dcdc5..edba1aa 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
@@ -25,6 +25,7 @@ package jewel.todomvc.models
import org.apache.royale.core.IBeadModel;
import org.apache.royale.core.IStrand;
import org.apache.royale.events.EventDispatcher;
+ import org.apache.royale.routing.Router;
[Bindable]
/**
@@ -63,6 +64,11 @@ package jewel.todomvc.models
}
/**
+ * The router that updates the browser navigation state.
+ */
+ public var router:Router;
+
+ /**
* the list of items binded to the todo list component
*/
public var listItems:Object;
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 0c76f78..1f85b6f 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
@@ -25,55 +25,58 @@ limitations under the License.
<![CDATA[
import jewel.todomvc.models.TodoModel;
import jewel.todomvc.events.TodoEvent;
-
+
[Bindable]
public var todoModel:TodoModel;
/**
- * All toggle buttons runs select filter
+ * Used for routing. Select the appropiate state for the URL hash
+ */
+ public function selectState(hash:String):void {
+ if(hash == all_btn.text)
+ all_btn.selected = true;
+ else if(hash == active_btn.text)
+ active_btn.selected = true;
+ else if(hash == completed_btn.text)
+ completed_btn.selected = true;
+
+ updateToggles(hash);
+ dispatchEvent(new TodoEvent(TodoEvent.REFRESH_LIST, null,
hash));
+ }
+
+ /**
+ * All toggle buttons use this handler to navigate todo list
*/
public function toggleButtonClickHandler(event:Event):void {
- selectFilter(event.target.text);
+ updateToggles(event.target.text);
+ dispatchEvent(new TodoEvent(TodoEvent.REFRESH_LIST_BY_USER,
null, event.target.text));
}
/**
- * Update buttons states and refresh the list updating the list
model
+ * Update toggle buttons to appropiate state
*/
- public function selectFilter(label:String):void {
- if(label == TodoModel.ALL_FILTER)
- {
+ public function updateToggles(label:String):void {
+ if(label == TodoModel.ALL_FILTER) {
active_btn.selected = false;
completed_btn.selected = false;
}
- else if(label == TodoModel.ACTIVE_FILTER)
- {
+ else if(label == TodoModel.ACTIVE_FILTER) {
all_btn.selected = false;
completed_btn.selected = false;
-
}
- else if(label == TodoModel.COMPLETED_FILTER)
- {
+ else if(label == TodoModel.COMPLETED_FILTER) {
all_btn.selected = false;
active_btn.selected = false;
}
-
- dispatchEvent(new TodoEvent(TodoEvent.REFRESH_LIST, null,
label));
}
/**
- * Remove all completed todo items and update the todo list with
the right filter
+ * Remove all completed todo items and update clear complete
visibility
*/
public function removeCompleted():void {
dispatchEvent(new TodoEvent(TodoEvent.REMOVE_COMPLETED));
clearCompleted.visible = false;
-
- if(all_btn.selected)
- selectFilter(all_btn.text);
- else if(active_btn.selected)
- selectFilter(active_btn.text);
- else if(completed_btn.selected)
- selectFilter(completed_btn.text);
}
]]>
</fx:Script>
@@ -87,7 +90,7 @@ limitations under the License.
</j:BarSection>
<j:BarSection gap="3" itemsHorizontalAlign="itemsCenter">
- <j:ToggleButton localId="all_btn" text="All"
click="toggleButtonClickHandler(event)" selected="true"/>
+ <j:ToggleButton localId="all_btn" text="All"
click="toggleButtonClickHandler(event)"/>
<j:ToggleButton localId="active_btn" text="Active"
click="toggleButtonClickHandler(event)"/>
<j:ToggleButton localId="completed_btn" text="Completed"
click="toggleButtonClickHandler(event)"/>
</j:BarSection>
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 d0b50f4..20bfbe5 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
@@ -28,24 +28,48 @@ limitations under the License.
<![CDATA[
import jewel.todomvc.models.TodoModel;
import org.apache.royale.core.IBeadModel;
+ import org.apache.royale.routing.RouteState;
[Bindable]
public var todoModel:TodoModel;
/**
- * setUp child views
+ * Set up child views
*/
public function setUp():void
{
todoModel = getBeadByType(IBeadModel) as TodoModel;
+ todoModel.router = router;
header.todoModel = todoModel;
footer.todoModel = todoModel;
+
+ updateRouting();
+ }
+
+ /**
+ * Used for routing. If we have a routing state navigate using
that info
+ * In other case (initial state) set to no filters (ALL_FILTER)
+ */
+ private function updateRouting():void {
+ var routeState:RouteState = router.routeState;
+ if(routeState.state)
+ footer.selectState(routeState.state);
+ else
+ footer.selectState(TodoModel.ALL_FILTER);
+ }
+
+ /**
+ * Router used this handler when the URL hash change to update
app state
+ */
+ private function hashChanged():void{
+ updateRouting();
}
]]>
</fx:Script>
<j:beads>
<js:ContainerDataBinding/>
+ <js:Router localId="router" stateChange="hashChanged()" />
</j:beads>
<html:Section className="todoapp">
