Listening to Transition Events¶
| Authors: | Yoshiroh Kamiyama |
|---|
There are two ways to listen to various transition events, connect and pub/sub.
Connect to Transition Events¶
The View widget has five stub methods, onStartView, onBeforeTransitionIn, onAfterTransitionIn, onBeforeTransitionOut, and onAfterTransitionOut, to which you can connect.
onStartView¶
Summary
A method that is called only when this view is shown at startup time. That is, if the view is invisible at startup time and then becomes visible as a result of a view transition, onStartView does NOT fire.
Syntax
onStartView()
Example
// 'connect' is the return value of the module dojo/_base/connect connect.connect(view1, "onStartView", null, function(){ console.log("startView: view="+this); });
onBeforeTransitionIn¶
Summary
A method that is called immediately before a view transition that makes this view visible.
Syntax
onBeforeTransitionIn(moveTo, dir, transition, context, method)
- moveTo - The destination view id to transition the current view to.
- dir - The transition direction. If 1, transition forward. If -1, transition backward.
- transition - The name of transition to perform. Ex. “slide”
- context - The object that the callback function will receive as “this”.
- method - A callback function that is called when the transition has finished.
Example
// 'connect' is the return value of the module dojo/_base/connect connect.connect(view1, "onBeforeTransitionIn", null, function(moveTo, dir, transition, context, method){ print("onBeforeTransitionIn"); });
onAfterTransitionIn¶
Summary
A method that is called immediately after a view transition that makes this view visible.
Syntax
onAfterTransitionIn(moveTo, dir, transition, context, method)
- moveTo - The destination view id to transition the current view to.
- dir - The transition direction. If 1, transition forward. If -1, transition backward.
- transition - The name of transition to perform. Ex. “slide”
- context - The object that the callback function will receive as “this”.
- method - A callback function that is called when the transition has finished.
Example
// 'connect' is the return value of the module dojo/_base/connect connect.connect(view1, "onAfterTransitionIn", null, function(moveTo, dir, transition, context, method){ print("afterTransitionIn"); });
onBeforeTransitionOut¶
Summary
A method that is called immediately before a view transition that makes this view hidden.
Syntax
onBeforeTransitionOut(moveTo, dir, transition, context, method)
- moveTo - The destination view id to transition the current view to.
- dir - The transition direction. If 1, transition forward. If -1, transition backward.
- transition - The name of transition to perform. Ex. “slide”
- context - The object that the callback function will receive as “this”.
- method - A callback function that is called when the transition has finished.
Example
// 'connect' is the return value of the module dojo/_base/connect connect.connect(view1, "onBeforeTransitionOut", null, function(moveTo, dir, transition, context, method){ print("onBeforeTransitionOut"); });
onAfterTransitionOut¶
Summary
A method that is called immediately after a view transition that makes this view hidden.
Syntax
onAfterTransitionOut(moveTo, dir, transition, context, method)
- moveTo - The destination view id to transition the current view to.
- dir - The transition direction. If 1, transition forward. If -1, transition backward.
- transition - The name of transition to perform. Ex. “slide”
- context - The object that the callback function will receive as “this”.
- method - A callback function that is called when the transition has finished.
Example
// 'connect' is the return value of the module dojo/_base/connect connect.connect(view1, "onAfterTransitionOut", null, function(moveTo, dir, transition, context, method){ print("afterTransitionOut"); });
Subscribe Transition Events¶
The View widget publishes five topics that are related to view transition.
/dojox/mobile/startView¶
Summary
A topic that is published only when this view is shown at startup time. That is, if the view is invisible at startup time and then becomes visible as a result of a view transition, the view does NOT publish this topic.
Topic Subscriber
function(view)
- view - A view that initiated the view transition.
Example
// 'connect' is the return value of the module dojo/_base/connect connect.subscribe("/dojox/mobile/startView", function(view){ console.log("startView: view="+view); });
/dojox/mobile/beforeTransitionIn¶
Summary
A topic that is published immediately before a view transition that makes this view visible.
Topic Subscriber
function(view, moveTo, dir, transition, context, method)
- view - The destination view
- moveTo - The destination view id to transition the current view to.
- dir - The transition direction. If 1, transition forward. If -1, transition backward.
- transition - The name of transition to perform. Ex. “slide”
- context - The object that the callback function will receive as “this”.
- method - A callback function that is called when the transition has finished.
Example
// 'connect' is the return value of the module dojo/_base/connect connect.subscribe("/dojox/mobile/beforeTransitionIn", function(view, moveTo, dir, transition, context, method){ print("onBeforeTransitionIn"); });
/dojox/mobile/afterTransitionIn¶
Summary
A topic that is published immediately after a view transition that makes this view visible.
Topic Subscriber
function(view, moveTo, dir, transition, context, method)
- view - The destination view
- moveTo - The destination view id to transition the current view to.
- dir - The transition direction. If 1, transition forward. If -1, transition backward.
- transition - The name of transition to perform. Ex. “slide”
- context - The object that the callback function will receive as “this”.
- method - A callback function that is called when the transition has finished.
Example
// 'connect' is the return value of the module dojo/_base/connect connect.subscribe("/dojox/mobile/afterTransitionIn", function(view, moveTo, dir, transition, context, method){ print("afterTransitionIn"); });
/dojox/mobile/beforeTransitionOut¶
Summary
A topic that is published immediately before a view transition that makes this view hidden.
Topic Subscriber
function(view, moveTo, dir, transition, context, method)
- view - The start view. (A view that initiated the transition)
- moveTo - The destination view id to transition the current view to.
- dir - The transition direction. If 1, transition forward. If -1, transition backward.
- transition - The name of transition to perform. Ex. “slide”
- context - The object that the callback function will receive as “this”.
- method - A callback function that is called when the transition has finished.
Example
// 'connect' is the return value of the module dojo/_base/connect connect.subscribe("/dojox/mobile/beforeTransitionOut", function(view, moveTo, dir, transition, context, method){ print("onBeforeTransitionOut"); });
/dojox/mobile/afterTransitionOut¶
Summary
A topic that is published immediately after a view transition that makes this view hidden.
Topic Subscriber
function(view, moveTo, dir, transition, context, method)
- view - The start view. (A view that initiated the transition)
- moveTo - The destination view id to transition the current view to.
- dir - The transition direction. If 1, transition forward. If -1, transition backward.
- transition - The name of transition to perform. Ex. “slide”
- context - The object that the callback function will receive as “this”.
- method - A callback function that is called when the transition has finished.
Example
dojo.subscribe("/dojox/mobile/afterTransitionOut", function(view, moveTo, dir, transition, context, method){ print("afterTransitionOut"); });