Dojo Tutorials: View

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

Monday, 16 April 2012

Dojo Mobile navigation between View programmatically