CSS 3 | Anindita's Blog

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

December 22, 2011 2 Comments

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”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<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”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<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:

Filed under Mobile ASP.Net, Responsive Design, Windows Phone 8.x/7.x Tagged with Android, Android Tablet, BlackBerry, CSS 3, DOJO, iPad, iPhone, Responsive Design, Sencha Touch, Windows Phone 8.x/7.x

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

December 13, 2011 4 Comments

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”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<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”>

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”

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”

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.

Filed under Mobile ASP.Net, Responsive Design Tagged with Android, BlackBerry, CSS 3, DOJO, iPad, iPhone, JavaScript, JQuery Mobile, Phone Browser, Responsive Design, WebKit

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

November 29, 2011 2 Comments

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”

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

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…

Filed under Microsoft Azure, Mobile ASP.Net, Responsive Design Tagged with .NET 4.5 Client Profile, CSS 3, Responsive Design, VS 2011 Developer Preview, WPF 4.5

Anindita's Blog

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

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

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

Archives

Categories

Like on Facebook

The Cloud

Recent Posts

Follow me on Twitter

Blog Traffic

Blog Stats

Follow Blog via Email

Proud to be an Indiblogger

Most Valuable Blogger

Anindita's Blog

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

Share this:

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

Share this:

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

Share this:

Archives

Categories

Like on Facebook

The Cloud

Recent Posts

Follow me on Twitter

Blog Traffic

Blog Stats

Follow Blog via Email

Proud to be an Indiblogger

Most Valuable Blogger