Building ASP.NET MVC 4 application with JQuery Mobile, HTML5 , CSS3 Media Queries in Visual Studio 2011 Developers Preview


Developing MVC 4 applications with Visual Studio 2011 Developers Preview is quite jump-start for developers as it has inbuilt support for JQuery Mobile css & javascripts, nice intellisense for HTML 5 , CSS 3 media queries. MVC 4 developers preview was built keeping in mind the Mobile Web Developers who wants keen support of rich MVC in Mobile Web.

  • Lets jump start to develop MVC 4 mobile application with JQuery Mobile, HTML5, CSS3 in VS 2011 developers preview.

  • Select your MVC 4 application domain either Internet/Intranet/Mobile Web application  with default Razor or ASPX syntaxes. For my demo , selected Mobile Web application in VS 2011 Developer Preview.

  • Next, write some JQuery Mobile application code to check th UI view in SmartPhones while Model & Controller logic remains same & could change according to business requirements.
  • Database -> Entity Framework (EF) -> Model in MVC 4(Entities) (DAL)-> Controllers (Business Logic Layer)(BLL) -> View(s) -> Master(_Layout.cshtml) is the default development path in MVC 4 Web & mobile application.
  • Sample code for JQuery Mobile with HTML5 for MVC 4 in VS 2011:

@{

ViewBag.Title = “Navigation”;

Layout = “~/Views/Shared/_Layout.cshtml”;

}

<h2>Navigation</h2>

<section id=”page1″data-role=”page”>

<header data-role=”header”>

<h1>JQuery Mobile with ASP.NET MVC 4</h1>

<nav data-role=”navbar”>

<ul>

<li><a href=”#”class=”ui-btn-active”>First</a></li>

<li><a href=”#”>Second</a></li>

<li><a href=”#”>Third</a></li>

<li><a href=”#”>Fourth</a></li>

<li><a href=”#”>Fifth</a></li>

</ul>

</nav>

</header>

<div class=”content”data-role=”content”>

<h3>Sample MVC 4 HTML 5 JQuery Mobile</h3>

</div>

<footer data-role=”footer”>

<h3>Footer</h3>

</footer>

</section>

  • Next , Check the nice intellisense support for HTML5 , JQuery Mobile in Visual Studio 2011 Developer Preview.

  • Check out the MVC 4 Mobile Web applications with JQuery Mobile , HTML5 , CSS 3 media queries in Smart Devices.
  •  iPhone & iPad:

 

  • iPhone:

  • JQuery Mobile View in iPhone of MVC 4 Mobile application:

  • View in Windows Phone 7.1 Mango:

  • BlackBerry 9800:

Desktop Utilities from SysInternals to get Virtual Desktops


One of coolest Sysinternals Tool is the Desktop Utilities which helps to get four virtual desktops in your own running desktop. It helps the multitasking way  to work with multiple applications/ softwares  for developers. Lets see , to download the desktop utility which’s developed by Mark Russinovich & Bryce Cogswell.

Download it from here: http://technet.microsoft.com/en-us/sysinternals/cc817881

Current Version is : Desktops v1.02

  • Install the Desktops & check the utility to work with multiple desktops at sametime.

  • You can create 4 additional desktops at a time & switch back & forth to virtual desktops & your main desktop. Click ‘Press to Create Desktop 1/2/3/4’ to start additional virtual desktops.

  • You can select keys from keyboard according to switch from desktops like Alt, Control, Shift, Windows.

  • Supported Operating Systems: Windows XP (X86 & X64 ) & Onwards.
  • Windows Server 2003(X86 & X64) & Onwards.

Consuming OData WCF REST Service from Android Client Device


As in my previous blog , already mentioned to create about OData Service feed in ATOM format which can be consumed in Windows Phone 7, Android, iPhone/iPAD , Silverlight,PHP, Windows Azure Table Storage clients.

  • Lets check , how to consume the OData WCF REST service in Android client. To work with OData Android client lets download Odata4j Android client library from RESTlet: http://www.restlet.org/downloads/ & select the OData4j-Bundle.jar in Java Build Path of your Android project.
  • Next, to consume OData service from android device, we need to host the service in IIS. In my demo, i have hosted it in IIS 7.5.
  • Now, Start develop an android client application which can consume OData feed.
  • Modify AndroidManifest.xml as it can consume feed from internet from native application:

<uses-permissionandroid:name=“android.permission.INTERNET”>

</uses-permission>

   Write code for  Activity.java :

package com.example.android.OData;

import java.util.ArrayList;

import java.util.List;

import org.odata4j.consumer.ODataConsumer;

import org.odata4j.core.OEntity;

import android.app.ListActivity;

import android.os.Bundle;

import android.widget.ArrayAdapter;

public class JsonGrabbingConsumerExampleActivity  extends  ListActivity {

/** Called when the activity is first created. */

@Override

public void  onCreate(Bundle savedInstanceState) {

 super.onCreate(savedInstanceState);

        setListAdapter(new ArrayAdapter<String>(this,   android.R.layout.simple_list_item_1, GetExpenseReports()));

        getListView().setTextFilterEnabled(true);

    }

// read expenses odata feed

    ArrayList<String> GetExpenseReports()

    {

// build a simple array list of strings to test things out

        ArrayList<String> listUI = new ArrayList<String>();

// use odata4j consumer

        ODataConsumer c = ODataConsumer.create(http://10.12.1.223/ODataSample1/Service.svc);

// run a query just for Pending states

        List<OEntity> listExpenses = c.getEntities(“SampleCustomerData”).execute().toList();

for(OEntity expense : listExpenses) {

    listUI.add(expense.getProperty(

“CustomerID”).getValue().toString()

    +

“; “ + expense.getProperty(“CustomerName”).getValue().toString()

    +

“; “ + expense.getProperty(“CustomerNotes”).getValue().toString()

    );

        }

return  listUI;   

    }

}

  • Checkout the output in Android 2.3:

Consuming OData WCF REST service from Windows Phone 7 Panorama Application


Consuming an OData (Open Data Protocol) in Client devices , Client services are quite easy. Open Data protocol , is a web protocol for querying and updating data and it was born of the need to break down data silos and increase their shared value. This allows data silos to interoperate between producers such as SQL Server, SharePoint servers, Cloud Storage Services, and consumers, for example Java, PHP, Silverlight, IIS, ASP.NET, AJAX.

OData incorporates with JSON, AtomPub, RSS to provide access to the  information from a range of applications, services, relational databases, file systems, content management systems (CMS), traditional websites.

Supported Platforms for OData Services:

  1. Microsoft Visual Studio 2008 SP1
  2. Microsoft Visual Studio 2010
  3. Microsoft SQL Server 2008 R2
  4. Microsoft Sharepoint 2010
  5. Microsoft Windows Azure Storage(Blobs, Tables, Queues)
  6. Microsoft SQL Azure
  7. Microsoft Office Excel 2010 PowerPivot
  • Lets create an OData WCF REST Service that for this purpose lets create an empty web application from Visual Studio

  • Lets add a new WCF Service in the application & named it as Service.SVC

  • Next , add the following Code to the service & check the resulting feed in browser.

using System;

using System.Collections.Generic;

using System.Data.Services;

using System.Data.Services.Common;

using System.Linq;

using System.ServiceModel.Web;

using System.Web;


namespace ODataSample1

{

public class Service : DataService<SampleDataSource>

{

// This method is called only once to initialize service-wide policies.

public static void InitializeService(DataServiceConfiguration config)

{

// TODO: set rules to indicate which entity sets and service operations are visible, updatable, etc.

// Examples:

// config.SetEntitySetAccessRule(“MyEntityset”, EntitySetRights.AllRead);

// config.SetServiceOperationAccessRule(“MyServiceOperation”, ServiceOperationRights.All);

config.SetEntitySetAccessRule(“*”, EntitySetRights.All);

config.SetServiceOperationAccessRule(“*”, ServiceOperationRights.All);

config.MaxResultsPerCollection = 100;

config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;

}

}

EntityPropertyMappingAttribute(“CustomerName”, SyndicationItemProperty.Title, SyndicationTextContentKind.Plaintext, true)]

[DataServiceKey(“CustomerID”)]

public class CustomerRecord

{

public int CustomerID { get; set; }

public string CustomerName { get; set; }

public string CustomerEmail { get; set; }

public string CustomerNotes { get; set; }

public DateTime CustomerLastContact { get; set; }

}

public class SampleDataSource

{

private readonly List<CustomerRecord> _sampleCustomerRecordList;

public SampleDataSource()

{

_sampleCustomerRecordList = newList<CustomerRecord>();

for (int i = 0; i < 100; i++)

{

CustomerRecord CR = newCustomerRecord();

CR.CustomerID = i;

CR.CustomerName =string.Format(“FirstName{0} LastName{1}”, i.ToString(), i.ToString());

CR.CustomerEmail =string.Format(“Email{0}@{1}.com”, i.ToString(), i.ToString());

CR.CustomerNotes =string.Format(“Notes{0}.Notes{1}”, i.ToString(), i.ToString());

CR.CustomerLastContact =DateTime.Now.AddDays(-10000).AddHours(i);

_sampleCustomerRecordList.Add(CR);

}

}

public IQueryable<CustomerRecord> SampleCustomerData

{

get

{

return _sampleCustomerRecordList.AsQueryable();

}

}

}

}

  • Now check the Service status in Linqpad (http://www.linqpad.com) by adding the WCF service endpoint to the database/service endpoint connection.

  • Lets check the status of the feed by entering query (<atom:title>)(e.g : SampleCustomerData  for this demo)in the browser

  •  Check after entering query in the URL of the feed

  • Service endpoint shows successful OData feed , next add a Windows Phone Panorama Application with the solution to implement a smartClient to the OData REST application.

datasvcutil /uri:http://localhost:8554/Service.svc/ /out:.\ServiceModel.cs /Version:2.0 /DataServiceCollection

<!–Panorama item one–>

<controls:PanoramaItem Header=”first item”>

<ListBox x:Name=”lst” Margin=”0,0,-12,0″ ItemsSource=”{Binding}”>

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel Margin=”0,0,0,17″ Width=”432″>

<TextBlock Text=”{Binding CustomerID}” TextWrapping=”Wrap” Margin=”12,-6,12,0″ Style=”{StaticResource PhoneTextExtraLargeStyle}” />

<TextBlock Text=”{Binding CustomerName}” TextWrapping=”Wrap” Margin=”12,-6,12,0″ Style=”{StaticResource PhoneTextExtraLargeStyle}” />

<TextBlock Text=”{Binding CustomerEmail}” TextWrapping=”Wrap” Margin=”12,-6,12,0″ Style=”{StaticResource PhoneTextExtraLargeStyle}” />

<TextBlock Text=”{Binding CustomerNotes}” TextWrapping=”Wrap” Margin=”12,-6,12,0″ Style=”{StaticResource PhoneTextExtraLargeStyle}” />

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</controls:PanoramaItem>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

using ODataWP7Panorama.CustomersModel;

using System.Data.Services.Client;

namespace ODataWP7Panorama

{

public partial classMainPage : PhoneApplicationPage

{

public  SampleDataSource ctx = new SampleDataSource(new Uri(http://localhost:8554/Service.svc/&#8221;, UriKind.Absolute));

// Constructor

public MainPage()

{

InitializeComponent();

this.Loaded += newRoutedEventHandler(MainPage_Loaded);

// Set the data context of the listbox control to the sample data

}

// Load data for the ViewModel Items

private void MainPage_Loaded(object sender, RoutedEventArgs e)

{

var ctx = newSampleDataSource(newUri(http://localhost:8554/Service.svc/));

var coll = new  DataServiceCollection<CustomerRecord>(ctx);

lst.ItemsSource = coll;

coll.LoadCompleted +=newEventHandler<LoadCompletedEventArgs>(coll_LoadCompleted);

var qry = “/SampleCustomerData”;

coll.LoadAsync(newUri(qry, UriKind.Relative));

}

void coll_LoadCompleted(object sender, LoadCompletedEventArgs e)

{

if (e.Error != null)

{

MessageBox.Show(e.Error.Message);

}

}

}

}

  • Now , lets the OData REST Service in Windows Phone 7.1 Client :

Accessing REST based service from Windows Phone 7.1 using SAML Token


Accessing REST based services from Windows Phone 7 client devices include two approaches: Active Federation implementation means how the client application uses OAuth protocol and contacts all the issuers in the trust chain in turn to acquire a valid SWT token to access a online enterprise application where as in passive federation mode device ‘s embedded browser requests the identity provider list from Access Control Service(ACS 2.0)  which in turn requests for token from trusted issuer & issuer sends back the SAML 2.0 token which is received by the device then it send a call to the enterprise REST service as Relying Party (RP) with Simple Web Token (SWT) Token.

  • Comparison of the Federation Difference:
  • The passive federation solution that leverages an embedded browser control offers a simpler approach to obtain an SWT token because the embedded web browser control in combination with the WS-Federation protocol handles most of the logic to visit the issuers and obtain the SWT token that the enterprise application needs.
  • In the active federation solution, the Windows Phone Application must include code to control the interactions with the issuers explicitly. Also, the active solution must include code to handle the requests for SAML tokens from the Relying Party(Issuer).
  • An advantage of passive federation approach is that it enables the Windows Phone Application to dynamically build the list of identity providers to your ACS configuration.
  • You must explicitly add any SWT token caching behavior to the Windows Phone application for both the active or passive federation solutions.
  • Download 9WindowsPhoneClientFederation from http://claimsid.codeplex.com to get Visual Studio development system  solution for Claims identity based REST services for Windows Phone .

Building RhoMobile MVC application with HTML 5 , JQuery for iPhone,iPad, Windows Phone, Android,BlackBerry


RhoMobile is an alternative native application environment for smartphones other than PhoneGap. To build applications with RhoMobile , you need to download RhStudio from http://rhomobile.com/products/rhostudio/ & choose your appropriate version for Windows or Mac.

  • Next to create smartphone applications with Rhomobile, you need to install Rhodes , RhoSync, RhoConnect , Gits. The four Rhomobile products – Rhodes, Rhosync, RhoHub, and Rhogallery – provide a complete toolkit for creating a mobile application. Rhomobile is cross-platform and so allows you to build your application for many different types of smartphone – including iPhone and Blackberry – just with a single codebase. This makes it the most preferred and quickest way of developing mobile apps. As you create a native Rhomobile application, you can use the built-in device features such as GPS, Push, and Camera, all with offline capabilities.
  • Select File-> New Project-> Rhodes Application-> Select your Project name.

  •  Set out the Rhodes Model of the application by right clicking on the project of the Project Explorer & Select Rhodes Model. Provide Name & Controllers.

  • Next , you will find three types files inside the app folder of your project & after setting the Models , a seperate folder named as your Model name will be created.
  • The files created as default are basically of  three types :
  • product.erb -> This is the Model file, which contains the Model Definition.
  • product_controller.rb -> This file contains the business logic relates to our Model.
  • *.erb-> The .erb files are the html view template files.
  • Lets the controller view of Rhodes Views for smartphones:

  • Lets  edit the Views as ‘Index.erb’ in HTML 5 for Rhodes application for smartdevices.

<div data-role=“page” data-url=“<%=Rho::RhoConfig.start_path%>/”>

  <div data-role=“header” data-position=“inline”>

    <h1>Storemanager</h1>

    <%if SyncEngine::logged_in > 0 %>

    <a href=“<%=url_for:controller=>:Settings,:action=>:do_sync%>”class=“ui-btn-left” data-icon=“refresh”>

      Sync

    </a>

    <a href=“<%=url_for:controller=>:Settings,:action=>:logout%>”class=“ui-btn-right” data-icon=“star”>

    Logout

  </a>

    <%else %>

        <a href=“<%=url_for:controller=>:Settings,:action=>:login%>”class=“ui-btn-right” data-icon=“star”>Login</a>

    <%end%>

</div>

  <div data-role=“content”>

    <ul data-role=“listview”>

      <li><a href=“Product”>

      <span class=“title”>Products </span>

      </a></li>

    </ul>

  </div>

</div>

    • Run the Project by right clicking project -> Run Configuration -> Right Click on RhodesMobile-> Select New -> Select your simulator Environment.

  • Select your RhoMobile Simulator as iPhone & check the application output native iPhone platform.

  • Web – Inspector View for HTML 5 , JQuery Mobile Codes.

  • Products Sample Entry Screen with MVC HTML 5 , JQuery Mobile in iPhone.

    • Check the Project View in Android Platform:

  • Product Samples Screen in Android:

    • Windows Mobile View for RhoMobile :

Windows Azure Service Bus EDI & EAI & On-Premise Service Bus Connect Tools Available – December 2011 Release


The Windows Azure Service Bus Enterprise Application(Artifacts) Infrastructure & Enterprise Distributed Infrastructure provides integration capabilities for the Windows Azure apps to extend On-Premise application to the cloud, provide Rich Messaging Endpoints to process and transform messages, caching & provides rich support for enterprise integrate disparate application on -premise as well in Windows Azure.

Download the toolkits from here: http://www.microsoft.com/download/en/details.aspx?id=17691

  • Features: Windows Azure Appfabric Service Bus Connect Project Template in Visual Studio.
  • Connectivity between on-premise with cloud apps supporting service bus internal endpoints & on – premise LOB applications.
  • PowerShell cmdlets to manage Service Bus Connect RunTime components.
  • Stable integration with Windows Identity Foundation(4.0) runtime with SAML token, SWT token, STS tokens, Relay services & WRAP 2.0 Protocols.

  • The  installation  of Windows Azure Appfabric Service Bus Connect SDK installation which requires Windows Server Appfabric SDK , IIS 6 metabase & PowerShell cmdlets.
  • It also installs itself Microsoft Bizspark integration components as a integration of Microsoft Biztalk servers with Appfabric Service Bus Queues.

  • Integrating WCF LOB adapters & Biztalk spark components with Service Bus Connect.

Windows Azure Claims based Identity & Access Control ebook available


Most enterprise applications include a certain amount of logic that supports Identity -related features. Applications that can’t rely on Integrated Windows Authentication tend to have more of this than appeared to do. For example : web based applications that store usernames & passwords must handle password reset, lockout and other issues. Enterprise facing applications that use integrated Windows Authentication can rely on the domain controller.

  • Claims based identity allows you to factor out the authentication logic from individual applications instead of application determining who the user is, it receives claims that identifies claims that identify the user.
  • Microsoft annouced the second release of Claims Based Idenity & Access Control Book from Patterns & Practices Team.

Download from here: http://www.microsoft.com/download/en/details.aspx?id=28362

  • For better explanation about SAML (Security Assertion Markup Language) Token 2.0, Simple Web Token (SWT) , Relying Party, Requesting Security Service (RST), Secure Token Service(STS) , ADFS (Active Directory Federation Server 2.0 Single Sign On ) issues with asp.net authentication & far more illustration about Windows Identity foundation 4.0 (WIF) , Identity Runtime, Web Resource Authorization Protocol 2.0 (WRAP) covered in this book.

  • Concise explanation about Claims based identity in Windows Azure Web , Access Control Service(ACS), Service Bus Queues, Claims based identity with Sharepoint 2010 integration, Federated authentication with Sharepoint with Access Control Service(ACS V2)

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:

PhoneGap for Windows Phone,iPhone & Android apps with JavaScript,HTML 5 & CSS 3


  • What is PhoneGap? [http://phonegap.com]
  • PhoneGap is an open – source Mobile Development framework originated by Nitobi Software in iPhoneDevCamp at San Francisco, 2008.
  • Bridges the gap between the SDKs & native apps & Mobile Web apps.

 

  • How Does PhoneGap Work?
  • UIWebView object for iPhone
  • WebView object with Android
  • TemplateView with Windows Phone
  • Interpreted Language: JavaScript
  • Deployment: AppStore , Android Market, Windows Phone Marketplace.
  • Write your first application with PhoneGap for iPhone,Android & Windows Phone :
  • Webkit
  • BlackBerry 6+, Palm WebOS
  • HTML 5 with Canvas, Databases and Geolocation
  • CSS3 with Transitions, Gradients and Rounded Corners.
  • Cross-Domain security policy does not apply:
  • $.getJSON(‘http://search.twitter.com/trends/current.json&#8217;)

 

  • JQTouch:(http://jqtouch.com)
  • A JQuery plugin for Mobile Web development.
  • For iOS, Android & BlackBerry supports Page Transitions(CSS 3)
  • Page History
  • Toolbar
  • Forms
  • Home screen Icons

JQTouch Sample  Code:

<title>JQuery for i-Phone</title>

<meta name=”apple-mobile-web-app-capable”content=”yes”/>

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

<link type=”text/css”rel=”Stylesheet”media=”screen”href=”jqtouch.css”/>

<link type=”text/css”rel=”Stylesheet”media=”screen”href=”default/theme.css”/>

<script type=”text/javascript”src=”jquery.js”></script>

<script type=”text/javascript”src=”jqtouch.js”></script>

<script type=”text/javascript”>

var jQT = $.jQTouch({

icon:‘kilo.png’,

statusBar:‘black’

});

</script>

 

  • IScroll: Provides a scroll content inside a fixed width/height element
  • Android >= 1.5, iPad >= 3.2 , iPhone >=2.0
  • Uses touch JavaScript events:
  • touchstart
  • touchmove
  • touchend
  • Persistence.js:
  • Asynchronus Javascript object-relational mapper library
  • Can be used in web browser:
  • HTML 5 WebSQL database(WebKit)
  • Google Gears(Firefox/IE)
  • Also on the server using node.js:
  • Node-mysql

 

  • Processing.js
  • Port of the processing language to JavaScript
  • Uses canvas element
  • Good replacement for flash
  • Can also used directly as a JavaScript library 

 

  • Meta Tags:
  • Viewport- Changes the window size used when displaying on iOS/Android
  • <meta name=”viewport” content=”width=320,user-scalable=0″ />
  • Full Screen mode:
  • <meta name=”apple-mobile-web-app-capable” content=”yes”>
  • Style of the status bar:
  • <meta name=”apple-mobile-web-app-status-bar-style” content=”black”>

 

  • Link Tags:
  • Add icon to bookmark
  • <link rel=”apple-touch-icon” href=”/custom_icon.png” />
  • Icon with no gloss : <link rel=”apple-touch-icon-precomposed” href=”/icon.png” />
  • Startup Screen: <link rel=”apple-touch-startup-image” href=”/startup.png”>

 

  • Install PhoneGap:
  • iPhone:
  • Install XCode plus iOS SDK
  • Use installer PhoneGap provides
  • Select PhoneGap when making a new project with Xcode

 

  • Android:
  • Install android SDK and add to $PATH
  • Run “android” to grab latest version
  • Setup Eclipse with Android plugin
  • Add PhoneGap.jar to project

 

  • Basic PhoneGap API:
  • Accelerometer
  • Camera
  • Contacts
  • Device
  • Events
  • Geolocation
  • Network
  • Notification
  • Android Menu/Back Buttons
  • Read through Phonegap.js

 

  • Writing iPhone plugins:
  • Create new header file(“Test.h”)
  • Extend new ObjC class(“Test.m”)
  • Import new header file
  • Call ObjC from JavaScript
  • PhoneGap.exec(“Text.test”);
  • Update JS from ObjC
  • [webView stringByEvaluatingJavaScriptFromString:@”alert(‘test’)”]

 

  • Writing Android plugins:
  • WebView features:
  • addJavascriptInterface(JavaObject,”NameInJs”)
  • Allows Java method to be called directly by JavaScript
  • PhoneGap 0.9.2 features JavaScript controlled plugin manager
  • PluginManager.addService(
  • “HelloWorld”,
  • “com.phonegap.HelloWorldPlugin.HelloWorld );”
  • PhoneGap.execAsync(win,fail,”HelloWorld”,”sayHello”,[]);
%d bloggers like this: