Dojo Tutorials: Dojo Mobile navigation between View programmatically

Dojo Mobile navigation between View programmatically

In this tutorial i will running through the basic step by step process of creating a View in Dojo mobile,

then including the require (modules) and then how to nvaigate between view through code (programmatically)

var w = Registry.byId(currentPageId);
w.performTransition('#'+pagetoId,1,"fade",null);

Here Registry is the instance of "dijit/registry" which has to included in ur require statement. in the call back function we have to have a instance of it and assign it to a global vairable so that we can access it any where in the page <script>

like

var Registry;

require(["dojox/mobile/parser",
"dijit/registry"
],
function(parser, _registry) {
parser.parse();
Registry = _registry;
});

The entire code look like..


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <title>Sonata Software - View Example</title>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" data-dojo-config="async: true"></script>
        <script>
            
            var Registry;
            var currentPage = "view1";
            
            require(["dojox/mobile/parser", 
                     "dijit/registry",
                     "dojox/mobile",
                     "dojox/mobile/Heading", 
                     "dojox/mobile/deviceTheme",
                     "dojox/mobile/View",
                     "dojox/mobile/Button"
                     ], 
                     function(parser, _registry) {
                        parser.parse();
                        Registry = _registry;
            });
            
            
            function navigateTo(pagetoId)
            {
                //currentPage is a global varibale holding the present page(view) Id
                var w = Registry.byId(currentPage);
                w.performTransition('#'+pagetoId,1,"fade",null);
                currentPage = pagetoId;
            }
            
        </script>
    </head>
    <body>
        <div id="view1" data-dojo-type="dojox.mobile.View" align="center">
          <h1 data-dojo-type="dojox.mobile.Heading">View 1</h1>
          <button data-dojo-type="dojox.mobile.Button" onclick="navigateTo('view2')">Page 2</button>
          <button data-dojo-type="dojox.mobile.Button" onclick="navigateTo('view3')">Page 3</button>
        </div>
        <div id="view2" data-dojo-type="dojox.mobile.View" align="center">
          <h1 data-dojo-type="dojox.mobile.Heading" >View 2</h1>
          <button data-dojo-type="dojox.mobile.Button" onclick="navigateTo('view1')">Page 1</button>
          <button data-dojo-type="dojox.mobile.Button" onclick="navigateTo('view3')">Page 3</button>
        </div>
        <div id="view3" data-dojo-type="dojox.mobile.View" align="center">
          <h1 data-dojo-type="dojox.mobile.Heading" >View 3</h1>
          <button data-dojo-type="dojox.mobile.Button" onclick="navigateTo('view1')">Page 1</button>
          <button data-dojo-type="dojox.mobile.Button" onclick="navigateTo('view2')">Page 2</button>
        </div>
    </body>
</html>

View Live Demo Click Here

4 comments:

rajat23 July 2012 at 23:17
Hi kiran, I'm unable to link multiple .html files using the code above. Is there any way to do that in Dojox mobile?
kiran Ignatious23 July 2012 at 23:39
Hi Rajat

First is it like you will be loading that HTML inside the existing page?
If Yes

You should first load the External HTML and then append that to a View (ie a Div with the DIv's Id) and then Do page Transition

the code for loading external HTML files is

var url = require.toUrl("demos/updatedhtml/salesanalysis.html");
xhr.get({
url: url,
load: function(html){
dom.byId("ViewDivsID").innerHTML = html;
CallFunctiontoNavigatetoPage();
}
});

If its No
Ie ue loading a fully page afresh
u can use
window.location.href = "demos/updatedhtml/salesanalysis.html";

to navigate to new page
rajat24 July 2012 at 02:20
Hi kiran, I wish to apply a transition effect while loading the .html page. The code :

"window.location.href = "demos/updatedhtml/salesanalysis.html";

loads the page without a dojo transition.
kiran Ignatious24 July 2012 at 02:29
Then the only option is append the HTML content to the existing page as shown in the Step one...
and then call the transition....

Monday, 16 April 2012

Dojo Mobile navigation between View programmatically

4 comments: