SharePoint 2010 with Windows Phone 7 Traning Kit is now Available

Accessing SharePoint 2010 applications are quite easy with the help of Windows Phone 7 which integrates directly with SharePoint. The training kit helps to leverage custom development using Microsoft SharePoint 2010 applications with Windows Phone 7 for OAuth services, Twitter API, Windows Azure, SQL Azure , Office 365, LinkedIn API, Silverlight Web parts & Bing Maps API.

Download the training kit from here: http://www.microsoft.com/download/en/details.aspx?id=26813

• One of the great tool sharepoint 2010 with Windows Phone 7 toolkit is now available in codeplex which helps the windows phone 7 apps to access the SharePoint 2010 applications using Forms authentication.
• It downloads lists of data with prepackaged filters to limit the data without writing CAML.

 

• The toolkit is available at : http://sharepointwp7.codeplex.com/

Consuming SQL Server/SQL Azure Data in Windows Phone 7.1 & Android through OData WCF Data Services & Entity Frameworks

Consuming data from SQL Server or SQL Azure database in Client Smart Devices like Windows Phone 7.1 , Android , iPhone or iPad is quite easy through the use of OData WCF Services. In previous posts , I already described how to consume data from live OData AtomPub feed showed in XML format. But, in this article I want to show how to consume SQL Server / SQL Azure data in Windows Phone & Android devices with the help of OData WCF services & entity frameworks where the service will be hosted in remote IIS & deployed SQL Server/SQL Azure database instance.

• For creating solutions, let’s first start by creating an empty asp.net web application from Visual Studio.

• Start by connecting with your SQL Server / SQL Azure database with Visual Studio .

• Next, add data in the tables of SQL Server / SQL Azure database.

• Next, Add an ADO.NET Entity Framework Model from Visual Studio to connect with SQL Server / SQL Azure database & save the connection string in web.config.

• Connect with your database with proper credentials

• Click on Next to select Tables, Views , Stored Procedures to select data.

•  Now Add a WCF Service in the project & modify the code as like this:

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 ODataSQLWP7

{

public class CustomerService : DataService<CustomersEntities>

{

// 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( “CustomerInfoes”, EntitySetRights.All);

config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;

}

}

}

•  Now check the service in browser & it looks like this:

• If you would check the URL as http://localhost/ODataSQLWP7/CustomerService.svc/  as to be modified as http://localhost/ODataSQLWP7/CustomerService.svc/CustomerInfoes , you will get an 500 internal error.

• Reason of the error: It’s due to the permission set not configured for IIS to deploy the SQL Server/SQL Azure database data. For SQL Azure database while creating the database in Windows Azure portal , you need to set the firewall settings definitely to 0.0.0.0 to 255.255.255.255 in order to deploy the SQL Azure database in IIS.
• Now Right-Click on the project , select Property -> Package/Publish Web tab: 

• Remember to check the settings: Include all databases in  Package/Publish SQL tab.
•  Next , Click on Package/Publish SQL options: Click on Import from Web.config to generate your SQL Server/SQL Azure database connection strings.
• Click on Connection String for destination database & add your destination database which will be hosted in IIS.
• Click on the checkbox under Source database information: Pull data/or schema from existing database.
• Under database scripting options select Schema only (if you would like generate schema only) or Schema & Data for generating schema & data deployement both.

• Now , add user to login to the deployed database from SQL Server Management Studio by right clicking on Security -> New Login 

• Add user for login as ODataUser from Windows Add Users – Groups utility , alternatively , you can add user from right-clicking My Computer -> Manage-> Users & Groups -> User -> Add User.

• Now under the User Mapping tab add the database that you would like to deploy & click on db_datareader & db_datawriter. Click OK.

• Deploy the Web Service in IIS from Web Deploy wizard in Visual Studio.

• Next, open the Application Pool in IIS manager which holds the deployed service & click on advanced settings : Select Process Model as Application Pool Idenity -> Under Custom account Set the account credentials which you have set under the SQL Server logins section.

• After this settings, now access the Customer Info  with the Service URL settings & it will show the entire RSS feed in AtomPub/ JSON format from the SQL Server / SQL Azure database.

• It means OData WCF service now able to access the SQL Server/ SQL Azure data in AtomPub format hosted in remote IIS. Next , It’s time to create the Client applications:
• First take a Windows Phone Panorama Project & modify the MainPage.XAML as like this:

<controls:PanoramaItem Header=”first item”>

<!–Double line list with text wrapping–>

<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 FirstName}” TextWrapping=”Wrap” Margin=”12,-6,12,0″ Style=”{StaticResource PhoneTextExtraLargeStyle}” />

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

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

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

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

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

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</controls:PanoramaItem>

• Modify MainPage.XAML.CS:

 

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 WP7PanoramaOData.CustomersModel;

using System.Data.Services.Client;

namespace WP7PanoramaOData

{

public partial classMainPage : PhoneApplicationPage

{

// Constructor

public MainPage()

{

InitializeComponent();

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

DataContext = App.ViewModel;

this.Loaded += newRoutedEventHandler(MainPage_Loaded);

}

//   Load data for the ViewModel Items

private void MainPage_Loaded(object sender, RoutedEventArgs e)

{

var ctx = newCustomersEntities(newUri(“http://10.12.1.223/ODataSQLWP7/CustomerService.svc/&#8221;));

var coll = new System.Data.Services.Client.DataServiceCollection<CustomerInfo>(ctx);

lst.ItemsSource = coll;

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

var qry = “/CustomerInfoes”;

coll.LoadAsync(new Uri(qry, UriKind.Relative));

}

void coll_LoadCompleted(object sender, LoadCompletedEventArgs e)

{

if (e.Error != null)

{

MessageBox.Show(e.Error.Message);

}

}

• Remember to add Service Reference to your Windows Phone application by referencing the service hosted in IIS:

• Check the View in Windows Phone 7 :

• Adding View for Android SmartPhones consuming data from SQL Server / SQL Azure database through OData WCF Data Services:

package com.example.ODataAndroid;

import java.util.ArrayList;

import java.util.List;

import android.app.Activity;

import android.os.Bundle;

import org.odata4j.consumer.ODataConsumer;

import org.odata4j.core.OEntity;

import android.app.ListActivity;

import android.widget.ArrayAdapter;

public class ODataSQLAndroidActivity 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);

    }

    ArrayList<String> GetExpenseReports()

    {

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

    ODataConsumer c = ODataConsumer.create( http://10.12.1.223/ODataSQLWP7/CustomerService.svc/);

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

for(OEntity expense:listExpenses) {

    listUI.add(expense.getProperty( “ID”).getValue().toString()

    + “:” + expense.getProperty(“FirstName”).getValue().toString()

    + expense.getProperty(“LastName”).getValue().toString()

    + “\n”+ expense.getProperty(“Address”).getValue().toString()

    + “\n” + expense.getProperty(“City”).getValue().toString()

    + “\n”+ expense.getProperty(“State”).getValue().toString()

    );

    }

return  listUI;

    }

    }

• Check out the SQL Server / SQL Azure database data in Android device:

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.

• Now check the OData Codeplex site:http://odata.codeplex.com/releases/view/54698  & Download ODataClient_BinariesAndCodeGenToolForWinPhone.zip  , extract it in windows explorer & run the following command in the command prompt by browsing the corresponding directory.

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 .

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”,[]);

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: