Enterprise Charts application with Dojo Toolkit & HTML 5 ,CSS 3 for iOS, Android,BlackBerry,Windows Phone Web apps


Enterprise applications cant be imgined without the DataGrids / Charts view. The Open – source Mobile web development frameworks like Sencha Touch, RhoMobile, Dojo Toolkits all have excellent support for this enterprise wide charts & datagrids support for mobile web apps.

  • Line Charts for Mobile Web with Dojo Mobile : Line charts provide excellent support for displaying Linear graphs with enterprise data & to view the data analysis for apps.
  • Code Samples for Line Graphs with Dojo Mobile:

<!DOCTYPE HTML>

<html>

<head>

<title>Dojo Toolkit Mobile Charting</title>

<script type=”text/javascript”src=”dojoroot/dojo/dojo.js”

djConfig=”parseOnLoad: true, isDebug: false”></script>

<script type=”text/javascript”src=”dojoroot/dojox/charting/Chart2D.js”

djConfig=”parseOnLoad:true, isDebug: false”></script>

<script>

dojo.require( “dojox.charting.Chart2D”);

dojo.require(“dojox.charting.themes.Tom”);

var chartData = [10000, 9200, 11811, 12000, 7662, 13887, 14200, 12222, 12000, 10009, 11288, 12099];

dojo.ready(

     function () {

var chart = new dojox.charting.Chart2D(“chartNode”);

chart.setTheme(dojox.charting.themes.Tom);

chart.addPlot( “default”, {

type: “Lines”,

markers: true

});

chart.addAxis(“x”);

chart.addAxis( “y”, { min: 5000, max: 15000, vertical: true, fixLower: “major”, fixUpper: “major” });

chart.addSeries(“SalesThisDecade”, chartData);

chart.render();

});

</script>

<div id=”chartNode”style=”width:800px;height:400px;”></div>

  •  Lets View the Line Graph in iPhone 4S & iPad :

  • iPad View :

  • Code Samples for Pie Charts with Dojo Mobile:
  • Sample Code :

<!DOCTYPEhtmlPUBLIC“-//W3C//DTD XHTML 1.0 Transitional//EN”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head>

<title>Dojo Toolkit Mobile Charting</title>

<script type=”text/javascript”src=”dojoroot/dojo/dojo.js”

djConfig=”parseOnLoad: true, isDebug: false”></script>

<script type=”text/javascript”src=”dojoroot/dojox/charting/Chart2D.js”

djConfig=”parseOnLoad:true, isDebug: false”></script>

<script>

dojo.require(“dojox.charting.Chart2D”);

dojo.require(“dojox.charting.action2d.Tooltip”);

dojo.require(“dojox.charting.action2d.MoveSlice”);

dojo.require(“dojox.charting.themes.Claro”);

var chartData=[10000,9200,11811,12000,7662,13887,14200,12223,13000,10004,11233,12088];

dojo.ready(

function() {

var chart = new dojox.charting.Chart2D(“chartNode”);

chart.setTheme(dojox.charting.themes.Claro);

chart.addPlot(“default”, {

type:“Pie”,

markers:true

});

chart.addAxis(“x”);

chart.addAxis(“y”,{min:5000,max:30000,vertical:true,fixLower:“major”,fixUpper:“major” });

chart.addSeries(“Monthly Sales-2010”, chartData);

var tip = new dojox.charting.action2d.Tooltip(chart,“default”);

var mag = new dojox.charting.action2d.MoveSlice(chart,“default”);

chart.render();

});

</script>

<div id=”chartNode”style=”width:800px;height:400px;”></div>

</head>

<body>

</body>

</html>

 

Lets View Pie Charts in iPhone, iPad & Android:

 

  • iPhone 4s View:

 

  • Android View:

 

  • BlackBerry 9800 View :

  • Columnar Chart for Mobile Web with Dojo Mobile: Developing Columnar chart with HTML 5, CSS 3 media queries with Dojo toolkit is spectacular for Mobile web apps.
  • Sample Code for Columnar Chart:

<!DOCTYPE htmlPUBLIC“-//W3C//DTD XHTML 1.0 Transitional//EN”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head>

<title>Dojo Toolkit Mobile Charting</title>

<script type=”text/javascript”src=”dojoroot/dojo/dojo.js”

djConfig=”parseOnLoad: true, isDebug: false”></script>

<script type=”text/javascript”src=”dojoroot/dojox/charting/Chart2D.js”

djConfig=”parseOnLoad:true, isDebug: false”></script>

<script>

dojo.require(“dojox.charting.Chart2D”);

dojo.require(“dojox.charting.themes.MiamiNice”);

dojo.require(“dojox.charting.widget.Legend”);

dojo.require(“dojox.charting.action2d.Tooltip”);

dojo.require(“dojox.charting.action2d.Magnify”);

dojo.require(“dojox.charting.themes.Claro”);

// Define the Data

var chartData = [10000,9400,11874,13090,7665,13665,14677,12235,18000,11233,13077,10009];

//When the DOM is ready ready and resources are loaded

dojo.ready(

function () {

var chart = new dojox.charting.Chart2D(“chartNode”);

var legend1 = new dojox.charting.widget.Legend({ chart: chart }, “legend”);

// Set the theme

chart.setTheme(dojox.charting.themes.MiamiNice);

//Add the only /default plot

chart.addPlot(

“default”, {

type:

“Columns”,

markers:

true,

gap: 5

});

// Add axes

chart.addAxis(

“x”);

chart.addAxis(

“y”, { vertical: true, fixLower: “major”, fixUpper: “major” });

// Add the series of data

chart.addSeries(

“Monthly Sales”, chartData);

// Render the chart

chart.render();

});

</script>

<div id=”chartNode”style=”width:800px;height:400px;”></div>

<div id=”legend”></div>

</head>

<body>

</body>

</html>

  • Lets View the Graph in iPhone, iPad , Android & Windows Phone:

  • iPhone 4s View  :

  • Android 3 Tablet View: 

 

  • for Windows Phone:

  •  Lets add some Tooltip , Magnify , Highlight section for Enterprise Columnar Chart for Mobile:

<!DOCTYPEHTML>

<html>

<head>

<title>Dojo Toolkit Mobile Charting</title>

<meta name=”viewport”content=”width=device-width; initial-scale=1.0″/>

<script type=”text/javascript”src=”dojoroot/dojo/dojo.js”

djConfig=”parseOnLoad: true, isDebug: false”></script>

<script type=”text/javascript”src=”dojoroot/dojox/charting/Chart2D.js”

djConfig=”parseOnLoad:true, isDebug: false”></script>

<script>

dojo.require(“dojox.charting.Chart2D”);

dojo.require(“dojox.charting.widget.Legend”);

dojo.require(“dojox.charting.action2d.Tooltip”);

dojo.require(“dojox.charting.action2d.Magnify”);

dojo.require(“dojox.charting.themes.Claro”);

var chartData1 = [10000, 9200, 11811, 12000, 7662, 13887, 14200, 12222, 12000, 10009, 11288, 12099];

var chartData2 = [3000, 12000, 17733, 9876, 12783, 12899, 13888, 13277, 14299, 12345, 12365, 15560];

var chartData3 = [4000, 12000, 16755, 14355, 13988, 13277, 14299, 12345, 12865, 18965, 57499, 14299].reverse();

dojo.ready(

function () {

var chart = new dojox.charting.Chart2D(“chartNode”);

chart.setTheme(dojox.charting.themes.Claro);

chart.addPlot(“default”, {

type:“Lines”,

markers:true

});

chart.addAxis(“x”);

chart.addAxis(“y”, { min: 5000, max: 30000, vertical: true, fixLower: “major”, fixUpper: “major” });

chart.addSeries(“SalesThisYear -2009”, chartData1);

chart.addSeries(“SalesThisYear – 2010”, chartData2);

chart.addSeries(“SalesThisYear -2011”, chartData3);

var tip = new dojox.charting.action2d.Tooltip(chart, “default”);

var mag = new dojox.charting.action2d.Magnify(chart, “default”);

chart.render();

var legend = new dojox.charting.widget.Legend({ chart: chart }, “legend”);

});

</script>

<div id=”chartNode”style=”width:800px;height:400px;”></div>

  •  Lets View the output in ipad 2:

  •       Android Tablet  View for Columnar Chart with Dojo Mobile:

  •   Windows Phone 7.1 Landscape View for Columnar Charts with Maginify view, Tooltips:

Advertisements

HTML 5 LocalStorage Mobile Web Application with PhoneGap for Windows Phone 7& i-Os


One of the great feature of HTML 5 is the support of localstorage & sessionstorage which is also redefined in Windows Phone as Isolated Storage. Building Offline Application Cache with manifest  files thus becomes easy for web apps of smartphones.

This article demonstrates how to use localstorage functionality in HTML 5 with PhoneGap support. For this rendering just creating a Mobile JQuery Project from Visual Studio template as like this:

  • Next some HTML 5 Code in Index.aspx as basic CSS 3 styles & JavaScript rendering.

<%

@Page Language=”C#”AutoEventWireup=”true”CodeBehind=”Index.aspx.cs”Inherits=”MobileWeb_App.Index” %>

<!DOCTYPE htmlPUBLIC“-//W3C//DTD XHTML 1.0 Transitional//EN”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head runat=”server”>

<title>Mobile Web without Server</title>

<script>

document.addEventListener(“DOMContentLoaded”, function () {

var foodList = document.getElementById(‘foodList’);

var foodField = document.getElementById(‘foodName’);

document.getElementById(‘foodForm’).addEventListener(‘submit’, function (evt) {

evt.preventDefault();

var newFood = foodField.value;

var newFoodItem = document.createElement(‘li’);

newFoodItem.innerHTML = newFood;

foodList.appendChild(newFoodItem);

foodField.value =“”;

return false;

},

false);

});

</script>

<style>

 body

{

background:white;

}

div#main

{

background:#ccc;

border:black1pxsolid;

height: 82%;

padding:10%;

width:80%;

-webkit-border-radius:8px;

}

</style>

<meta name=”viewport”content=”width=device-width,initial scale=”1.0/>

</head>

<body>

<div id=”main”>

<h1>List Some Food</h1>

<form id=”foodForm”>

<input type=”text”id=”foodName”placeholder=”A name of Food”/>

<button id=”submitFood”>Tell Us</button><br/>

<ul id=”foodList”>

</ul>

</form>

</div>

</body>

</html>

  • Lets look in iPhone 4 Mobile Safari.

  • Lets add some code for localstorage in HTML 5 which will be stored as browser offline cache.

var  l = window.localStorage.length;

var i = 0;

var storedFoodName;

function addNewFoodItem(foodName) {

var newFoodItem = document.createElement(‘li’);

newFoodItem.innerHTML = foodName;

foodList.appendChild(newFoodItem);

}

for (i; i < 1; i++) {

storedFoodName = window.localStorage.key(i);

if (storedFoodName.match(/^food[.]/))

addNewFoodItem(window.localStorage.getItem(storedFoodName))

}

  •  Lets have output for Windows Phone 7 & HTML 5 supported Internet Explorer 9 with GPU acceleration.

  • Internet Explorer 9 renders like this:

DOJO ToolKit with HTML 5 , CSS 3 & JavaScript for iPhone, iPad, Android & BlackBerry


DOJO Toolkit is an open source framework library well known for mobile web development close to native mobile applications for iPhone, iPad,BlackBerry, Android devices. It has close support for PhoneGap & renders controls with JavaScript , CSS 3 with HTML 5. It expects all features of Mobile Webkit browsers like Offline Cache, Browser manifest, local storage & isolation storage for mobile browsers etc.

  • So , It’s just another feather of JQTouch , Sencha Touch , JQuery Mobile but it has some of it’s unique features like Native Mobile application support like Google Maps with Location track, Enterprise Charts for Mobile, Mobile Gauge etc.
  • DOJO Toolkit initially is a project of Sun MicroSystems as open source DHTML based Ajax functionality with DOM support but later it’s divided into JavaScript, Ajax, HTML 5 , CSS 3 different features & provides native app support for mobile web 2.0
  • Though initial it’s support was based on Eclipse IDE of Java but I was keen to explore it’s features in my favourite IDE Visual Studio. So Download the toolkit from  http://dojotoolkit.org/download/   & extract it foundation files in three parts :

  •     Now , Add all the three folders of DOJO Toolkit “dijit, dojo, dojox” in Visual Studio Solution explorer & including “Show All Files” “include all the files in project”.
  •    Now start code by adding a new .aspx or .htm page with DOJO toolkit for Ajax, HTML 5, CSS 3, Google Ajax CDN, Mobile browser Webkit.

Sample Code:

<!DOCTYPE htmlPUBLIC“-//W3C//DTD XHTML 1.0 Transitional//EN”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head>

<script type=”text/javascript”src=”dojoroot/dojo/dojo.js”

djConfig=”parseOnLoad: true, isDebug: false”></script>

<script language=”javascript”type=”text/javascript”>

dojo.require(“dojox.mobile”);

dojo.require(“dojox.mobile.parser”);

dojo.requireIf(!dojo.isWebKit, “dojox.mobile.compat”);

</script>

//For Native iPhone view 

<link rel=”Stylesheet”type=”text/css”href=”dojoroot/dojox/mobile/themes/iphone/iphone.css”/>

//For Native iPad view

<link rel=”Stylesheet”type=”text/css”href=”dojoroot/dojox/mobile/themes/iphone/ipad.css”/>

// For Android View

<link rel=”Stylesheet”type=”text/css”href=”dojoroot/dojox/mobile/themes/android/android.css”

// For BlackBerry View

<link rel=”Stylesheet”type=”text/css”href=”dojoroot/dojox/mobile/themes/blackberry/blackberry.css”

</head>

<body>

<div id=”main”dojoType=”dojox.mobile.View”selected=”true”>

<h1 dojoType=”dojox.mobile.Heading”>

Settings

</h1>

<ul dojoType=”dojox.mobile.EdgeToEdgeList”>

<li dojoType=”dojox.mobile.ListItem”icon=”http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/tests/images/i-icon-1.png”&gt;

Coolness Mode

<div class=”mblItemSwitch”dojoType=”dojox.mobile.Switch”>

</div>

</li>

<li dojoType=”dojox.mobile.ListItem”icon=”http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/tests/images/i-icon-2.png&#8221;

rightText=”mac”moveTo=”disco”>

Disco Room

</li>

<li dojoType=”dojox.mobile.ListItem”icon=”http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/tests/images/i-icon-3.png&#8221;

rightText=”AcmePhone”moveTo=”disco”>

Carrier

</li>

</ul>

</div>

<div id=”disco”dojoType=”dojox.mobile.View”>

<h1 dojoType=”dojox.mobile.Heading”>

Hello

</h1>

<ul dojoType=”dojox.mobile.EdgeToEdgeList”>

<ul dojoType=”dojox.mobile.EdgeToEdgeList”>

<li dojoType=”dojox.mobile.ListItem”moveTo=”main”>

I’m a square , man

</li>

</ul>

</ul>

</div>

</body>

</html>

  • Check out the output for iPhone 4 & iPad View:

 

  • iPAD 2 View

 

  • DOJO Toolkit for Mobile in BlackBerry 9800 View:

  • Android Tablet 3.0 View for DOJO Ajax HTML 5 view :

  • Lets explore with DOJO with Ajax, DOM HTML 5 with CSS 3 for mobile browser WebKit.

Asynchronous Programming in .NET 4.5 , HTML 5 , CSS 3 with Visual Studio 2011 Developer Preview


Asynchronous programming has been started with continuation of Dynamic Programming in .NET 4.0 framework with C# , since in .NET Framework 4.5 Client Profile contains a strong support for Asynchronus programming & portrays a full – fleged .NET programming’s future in Asynchronous programming with MultiBinding Support in ASP.Net 4.5 , Strong API with XHTML 5 , CSS 3 , JQuery.

Advantage of Asynchronous Programming: Parallel Programming or Dynamic Programming shows some facilities of Async client call rather than synchronous processing of method. Those of constrains have been throughly modified in .NET Framework 4.5 & enriches the new feature of Asynchronous programming in C# /VB.

Sample Application:

The Sample Application demonstrates the Asynchronous downloading of web: msdn.microsoft.com with left & corresponding page details in right pane of the WPF Windows.

Sample Application Development :

Create a new WPF 4.5 application in Visual Studio 2011 & named in AsyncApp.

Provide the necessary code of MainWindow.xaml:

<Window x:Class=”AsyncLab.MainWindow”

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

Title=”MainWindow”

Width=”640″ Height=”480″>

<Window.Resources>

<DataTemplate x:Key=”DataTemplateItem”>

<StackPanel Orientation=”Horizontal”>

<TextBlock>

<TextBlock.Text>

<MultiBinding StringFormat=”  {0}  –  {1}  “>

<Binding Path=”Length”/>

<Binding Path=”Title”/>

</MultiBinding>

</TextBlock.Text>

</TextBlock>

</StackPanel>

</DataTemplate>

</Window.Resources>

<Grid>

<TextBox Height=”379″ HorizontalAlignment=”Left” Margin=”12,12,0,0″ Name=”textBox1″ VerticalAlignment=”Top” Width=”294″ />

<ListBox Height=”379″ HorizontalAlignment=”Right” Margin=”0,12,12,0″ Name=”listBox1″ VerticalAlignment=”Top” Width=”294″ ItemTemplate=”{DynamicResource DataTemplateItem}”/>

<Button Content=”Start” Height=”23″ HorizontalAlignment=”Left” Margin=”272,406,0,0″ Name=”Start” VerticalAlignment=”Top” Width=”75″ Click=”Start_Click” />

</Grid>

</Window>

MainWindow.Xaml.Cs:

using System;

using

System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using  System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

using System.Net.Http;

using System.Text.RegularExpressions;

using System.Collections.ObjectModel;

using System.Threading;

namespace AsyncLab

{

///<summary>

/// Interaction logic for MainWindow.xaml

///</summary>

publicpartialclassMainWindow : Window

{

privateCancellationTokenSource cancellationToken;

public MainWindow()

{

InitializeComponent();

}

private sync void Start_Click(object sender,RoutedEventArgs e)

{

ObservableCollection<string> uris = newObservableCollection<string>();

this.Start.IsEnabled = false;

try

{

var response = awaitnewHttpClient().GetAsync(http://msdn.microsoft.com);

string result = response.EnsureSuccessStatusCode().Content.ReadAsString();

this.textBox1.Text = result;

awaitTask.Run(() =>

{

MatchCollection mc = Regex.Matches(result, “href\\s*=\\s*(?:\”(?<1>http://%5B^\”]*)\”)”, RegexOptions.IgnoreCase);

foreach (Match m in mc)

{

uris.Add(m.Groups[1].Value);

}

});

this.listBox1.ItemsSource = awaitTask.WhenAll(from uri in uris select DownloadItemAsync(newUri(uri)));

}

catch (Exception ex)

{

MessageBox.Show(ex.ToString());

}

this.Start.IsEnabled = true;

}

private static asyncTask<LinkInfo> DownloadItemAsync(Uri itemUri)

{

string item;

try

{

HttpClient httpClient = newHttpClient();

httpClient.MaxResponseContentBufferSize = 1000000;

var response = await httpClient.GetAsync(itemUri);

item = response.EnsureSuccessStatusCode().Content.ReadAsString();

}

catch

{

item = string.Empty;

}

LinkInfo linkInfo = newLinkInfo { Length = item.Length, Title = GetTitle(item), Html = item };

return linkInfo;

}

private static string GetTitle(string html)

{

if (html.Length == 0)

{

return“Not Found”;

}

Match m = Regex.Match(html, @”(?<=<title.*>)([\s\S]*)(?=</title>)”, RegexOptions.IgnoreCase);

return m.Value;

}

}

}

  • HTML5 & CSS 3 has Rich Support in VS 2011 developer Preview in .NET Framework 4.5 Client Profile .

  • The future of Web is Web11 with VS 2011 , HTML 5 & CSS 3.

  • Javascript has more indent set of API in .NET Framework 4.5 Client Profile in VS 2011 developer Preview.

If you check WPF 4.5 development environment compared to WPF 4.0 environment , there has been addition of app.config file in VS 2011 developer preview WPF 4.5 development continues richer set of config support with SKU building. (Traditional Winforms Support)

Next article will describe more about HTML 5 & CSS 3…

%d bloggers like this: