Dojo Tutorials

Monday, 16 April 2012

Dojo Mobile Swap View Example

Dojo Mobile SwapView Demo Sample Example

Demostrates the Basic Example of how to code 3 Swap Views and add contents to it with Dojo 1.7 or higher

Live Demo Click Here

<!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 - Swap 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>
        
            require(["dojox/mobile/parser", 
                     "dojox/mobile",
                     "dojox/mobile/Heading", 
                     "dojox/mobile/deviceTheme",
                     "dojox/mobile/SwapView",
                     "dojox/mobile/RoundRect"
                     ], 
                     function(parser) {
                        parser.parse();
            });
            
        </script>
    </head>
    <body>
        <div data-dojo-type="dojox.mobile.SwapView" >
          <h1 data-dojo-type="dojox.mobile.Heading">View 1</h1>
           <div data-dojo-type="dojox.mobile.RoundRect">
                   Swipe the screen left or right to flip between the views.
           </div>
        </div>
        <div data-dojo-type="dojox.mobile.SwapView" >
          <h1 data-dojo-type="dojox.mobile.Heading">View 2</h1>
           <div data-dojo-type="dojox.mobile.RoundRect">
                   Swipe the screen left or right to flip between the views.
           </div>
        </div>
        <div data-dojo-type="dojox.mobile.SwapView" >
          <h1 data-dojo-type="dojox.mobile.Heading">View 3</h1>
           <div data-dojo-type="dojox.mobile.RoundRect">
                   Swipe the screen left or right to flip between the views.
           </div>
        </div>
        
    </body>
</html>

Live Demo Click Here

Dojo Mobile navigation between View programmatically

Dojo Mobile navigation between View programmatically

View Live Demo Click Here

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

Sunday, 1 April 2012

Dojo Simple Build tutorial mobile Pie Chart

Author:Kiran Ignatius+

In this Tutorial, i will be running through a Step by Step , simple programtically generating Pie Chart in Dojo, and Creating a simple build Profile and through Command SDK making a build.

First download the DOJO latest version 1.7.1 or 1.7.2 SRC version (source version)
Download Click Here Version 1.7.2

Extract to a any folder , the Structure much contain 4 folders , DIJIT, DOJOX, DOJO, util.
Create a new folder named "demos" , the structure will look like below picture.

Now go into "demos" folder and create a new directory(folder) named "simpleChart"
inside that create a new file "index.html"

the contect of it will be as below
File name: "index.html"

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Basic Programmatic Chart</title>
<link rel="stylesheet" href="style.css" media="screen">

<script src="../../dojo/dojo.js"
data-dojo-config="async: true, isDebug: true, parseOnLoad: true">
</script>
<script src="src.js"></script>
<script>

// x and y coordinates used for easy understanding of where they should display
// Data represents website visits over a week period
chartData = [
{ x: 1, y: 19021 },
{ x: 1, y: 12837 },
{ x: 1, y: 12378 },
{ x: 1, y: 21882 },
{ x: 1, y: 17654 },
{ x: 1, y: 15833 },
{ x: 1, y: 16122 }
];
</script>
</head>
<body>
<h1>Demo: Basic Programmatic Chart</h1>


<div id="chartNode" style="width: 550px; height: 550px;"></div>

</body>
</html>

Now create a new file called "src.js" where we will be putting all the Script for creating the Pie Chart, the contents/source is as below.
File Name: "src.js"

require([
// Require the basic 2d chart resource
"dojox/charting/Chart",

// Require the theme of our choosing
"dojox/charting/themes/Claro",

// Charting plugins:

// Require the Pie type of Plot
"dojox/charting/plot2d/Pie",

// Wait until the DOM is ready
"dojo/domReady!"], function(Chart, theme, PiePlot) {

// Create the chart within it's "holding" node
var pieChart = new Chart("chartNode");

// Set the theme
pieChart.setTheme(theme);

// Add the only/default plot
pieChart.addPlot("default", {
type : PiePlot, // our plot2d/Pie module reference as type value
radius : 200,
fontColor : "black",
labelOffset : "-20"
});

// Add the series of data
pieChart.addSeries("January", chartData);

// Render the chart!
pieChart.render();

});

Now once u open the "index.html" in a browser it would look like

Now we will start writing the code for Build, in other words we will create a simple profile file for our project and then make a build.

First create a new file called "build.profile.js" and type in the code below,
file Name: "build.profile.js"

dependencies = {
layers: [
{
name: "../demos/simpleChart/src.js",
resourceName: "demos.simpleChart.src",
dependencies: [
"demos.simpleChart.src"
]
}
],

prefixes: [
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ],
[ "demos", "../demos" ]
]
}

Now it time to make a build, open command promt, by typing "cmd" in run command, or directly opening CMD

In command promt, first go to location of our root directory
the folder which contains : dojo, dojox, dijit, util, and demos folder

Further get into : util/buildscripts

Now start typing the run command
"build profile=../../demos/simpleChart/build action=release releaseDir="simpleChartRelease"

*build is the command to initiate the build (build.bat for windows or build.sh for Mac or only build)
*profile name i have give only build, but if u observe the file name is "build.profile.js" the compiler which dojo has automatically appends .profile.js to any profile name we give, but if u want to give full name, no issues.
*action=release
*releaseDir is the directory were ur release files will gets generated/written

and hit enter on keyboard
after some minutes it will display finished as below

Now goto the folder util/buildscripts/simpleChartRelease/dojo
you will find the entire release folder which you can deploy for your project.