Building Cross – Platform Mobile Native Apps on Android,iOS, Windows Phone & Windows Store using Single Codebase,PCL with VS 2012/2010 & XAMARIN Tools

Cross Platform App development is always better choice for enterprises where we can avail support for Code Sharing, PCL (Portable Class Libraries) which can shared across multiple platforms of Mobility (aka Android, IOS, Windows Phone 8 / 7.x , Windows Store Apps).

Xamarin introduces such facility where a single code base can be shared across all enterprise mobile platforms along with the benefits of coding on .NET Framework 4.5 / 4.0 & Visual Studio 2012 / 2010.

Lets switch to check to build an Android native app on Visual Studio 2012 with C# for latest SDKs 4.2 using Xamarin tools for Android .

Download Xamarin for iOS, Android , Windows Phone & Windows 8 platforms from here

Lets check the structure of theAndroid App on VS 2012. All layout files can be found under Resources folder. 

• Next, we are using a single code base file which contains the Business logic & App models that can be shared as a Link with iOS, Windows Phone & Windows Store apps.
• Lets check the Android 4.2 app built on Visual Studio 2012 & .NET Framework 4.5 platform using Xamarin Tools.

• Lets check, how to build the same app for Windows Phone 8 or 7.x platform using the same code base along with business logic.
• Windows Phone 8 project contains the Main.xaml along with the common code base.

string translatedNumber;

private void Translate_Click(object sender, RoutedEventArgs e)
{
if(!String.IsNullOrEmpty(PhoneNumberText.Text))
{

// *** SHARED CODE
translatedNumber = Core.PhonewordTranslator.ToNumber(PhoneNumberText.Text);

CallButton.Content = “Call ” + translatedNumber;
CallButton.IsEnabled = true;
}
else
{
CallButton.Content = “Call”;
CallButton.IsEnabled = false;
}
}

private void Call_Click (object sender, RoutedEventArgs e)
{
var call = new PhoneCallTask();
call.PhoneNumber = translatedNumber;
call.DisplayName = PhoneNumberText.Text;
call.Show();
}

• The Windows Phone App is compatible along with the Windows Phone 8 as well as 7.x versions.
• For implementing on Windows Store , without altering business logics & models only the views need to be shared.
• Lets check the project structure of this app for Windows Store.

• Asynchronous programming is one of core features related to Windows store, windows phone app developments along with other .net app development. Using PCLs, code sharing approaches too we can take help of simple async methods.
• Shared code for Windows Store App :

string translatedNumber;
public ObservableCollection<PhonewordTranslation> Translations;

private void Translate_Click(object sender, RoutedEventArgs e)
{
if (!String.IsNullOrEmpty(PhoneNumberText.Text))
{

// *** SHARED CODE
translatedNumber = Core.PhonewordTranslator.ToNumber(PhoneNumberText.Text);

CallText.Text = “Call ” + translatedNumber;
// Win8, add to history list
Translations.Add(new PhonewordTranslation() {Phoneword=PhoneNumberText.Text, Phonenumber=translatedNumber });
}
else
{
CallText.Text = “”;
}
}

private void ListItems_Click(object sender, ItemClickEventArgs e)
{
var ci = e.ClickedItem as PhonewordTranslation;
var dialog = new MessageDialog( String.Format (“{0} translates to {1}”, ci.Phoneword, ci.Phonenumber));
dialog.ShowAsync();
}

• For IOS development too, the app uses the same shared code -base which targets to iPhone, iPAD & Universal Mac apps which can be built on C#, .NET 4.5 using Visual Studio editor by Xamarin tools for iOS.
• You can download the entire app over here .

Running SQL Azure Reports on Windows 8 Release Preview Metro Apps, iPad, iPhone, BlackBerry, Android & Windows Phone with SQL Server 2012

Runing SQL Azure Reports on SmartPhones are quite easier as it renders for any HTML 5 compatible browsers (IE10, Mobile Safari etc). So , lets build up a SQL Azure Report & render it on various smartphone platforms.

• Lets open SQL Server 2012 Data Tools to create a new SQL Azure Report.

• Check out the SQL Azure database Tables & render the queries to build the report.

•  Next, Deploy the report properly first on local Report Server & check the report preview.

• Check the SQL Azure Reporting URL & deploy the report on your SQL Azure Reporting Server.

• Now render the SQL Azure report on Windows 8 Release Preview Internet Explorer Metro App.

•  

 

• Next , Check the Report on iPad 2 & render it on mobile safari.

• Lets render the report on Ipad 2.

• Check the preview on iPhone 4S.

• Lets run it on major smartphone platforms(Android HTC, BlackBerry Storm)

Android Screen Brightness Sample

Lets get start how to configure the Brightness settings in Android SmartPhones. In several native apps of Android it’s often required to peoperly set the brightness of the screen according to apps requirement.

So, to develop such an app , lets start in Eclipse by creating a new Android Project.

•  Choose the Runtime environment of Android  & the package settings.

• Lets modify the AndroidManifest.xml :

<? xmlversion=“1.0”encoding=“utf-8”?>

<manifest xmlns:android=“http://schemas.android.com/apk/res/android&#8221;

package=“com.example.BrightnessSample”

android:versionCode=“1”

android:versionName=“1.0”>

<uses-sdk android:minSdkVersion=“10”/>

<application  

android:icon=“@drawable/ic_launcher”

android:label=“@string/app_name”>

<activity 

android:label=“@string/app_name”

android:name=“.BrightnessSampleActivity”>

<intent-filter>

<action android:name=“android.intent.action.MAIN”/>

<category android:name=“android.intent.category.LAUNCHER”/>

</intent-filter>

</activity>

</application>

<uses-permission android:name=“android.permission.WRITE_SETTINGS”/>

</manifest>

• Lets Modify the Main.xml:

<? xml version=“1.0”encoding=“utf-8”?>

<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android

android:layout_width=“fill_parent”

android:layout_height=“fill_parent”

android:orientation=“vertical”>

<TextView

android:layout_width=“fill_parent”

android:layout_height=“wrap_content”

android:text=“@string/hello”/>

<TextView

android:layout_width=“fill_parent”

android:layout_height=“wrap_content”

android:text=“Set BackLight of the App”/>

<SeekBar

android:id=“@+id/backlightcontrol”

android:layout_width=“fill_parent”

android:layout_height=“wrap_content”

android:layout_margin=“10px”

android:max=“100”

android:progress=“50”/>

<TextView

android:id=“@+id/backlightsetting”

android:layout_width=“fill_parent”

android:layout_height=“wrap_content”

android:text=“0.50”/>

<Button

android:id=“@+id/updatesystemsetting”

android:layout_width=“fill_parent”

android:layout_height=“wrap_content”

android:text=“Update Settings.System.SCREEN_BRIGHTNESS”/>

</LinearLayout>

 

• Next, add the following Code in BrightnessSampleAcitivity.java:

package  com.example.BrightnessSample;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.WindowManager;

import android.widget.Button;

import android.widget.SeekBar;

import android.widget.TextView;

public class  BrightnessSampleActivity  extends  Activity {

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

floatBackLightValue = 0.5f;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout. main);

SeekBar BackLightControl  = (SeekBar)findViewById(R.id. backlightcontrol);

         final TextView BackLightSetting = (TextView)findViewById(R.id.backlightsetting);

Button UpdateSystemSetting = (Button)findViewById(R.id. updatesystemsetting);

UpdateSystemSetting.setOnClickListener( new Button.OnClickListener()

{

        public void   onClick(View arg0)

{

         int SysBackLightValue = (int)(BackLightValue * 255);

android.provider.Settings.System.putInt(getContentResolver(),

android.provider.Settings.System. SCREEN_BRIGHTNESS,    SysBackLightValue);

        }});

        BackLightControl.setOnSeekBarChangeListener(new     SeekBar.OnSeekBarChangeListener() {

          public void o nProgressChanged(SeekBar arg0,int arg1,boolean arg2)

{

        BackLightValue = (float)arg1/100;

BackLightSetting.setText(String.valueOf(BackLightValue));

WindowManager.LayoutParams layoutParams = getWindow().getAttributes();

layoutParams. screenBrightness = BackLightValue;

  getWindow().setAttributes(layoutParams);

        }

public void onStopTrackingTouch(SeekBar seekBar) {

// TODO Auto-generated method stub

}

public void  onStartTrackingTouch(SeekBar seekBar) {

// TODO Auto-generated method stub

}});

}

}

• Lets check the output of Screen Brightness Sample in Android  :

• Increase the Progress Bar to check the View in Screen Brightness.

PhoneGap 1.2 Installation for Android in Eclipse

PhoneGap , the open source framework for accessing native features in Mobile Web is quite appealing in the field of accessing Geolocation, Phone Contacts, Toggle Accelerometer, Call, Taking Snapshot, Vibration for Alerts ..

• The installation of PhoneGap 1.2 for Android applications in eclipse is quite easy. Download PhoneGap 1.2 from www.phonegap.com & extract the .ZIP & switch to the Android folder .

•  Create a new Android project in Eclipse for PhoneGap.

• Now create a new folder called /libs & paste the phonegap-1.2.0.js from the Android folder of the PhoneGap SDK .ZIP.

• Lets add a new folder called ‘/assets’ under project node in eclipse & create a subfolder under it called ‘www’ & paste the mobile webcontent of the mobile website including .css, .js & .html. Here, pasting the index.html from the Android folder of the PhoneGap.

• Next , create a new folder names /xml under  /res folder under the project node in eclipse & paste the two .xml files named phonegap.xml & plugins.xml.

• Next , lets add the following code in AndroidManifest.xml for accessing the device native features in Android Mobile Web apps.

<supports-screensandroid:largeScreens=“true”

android:normalScreens=“true”

android:smallScreens =“true”

android:resizeable =“true”

android:anyDensity =“true”

/>

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

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

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

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

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

/>

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

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

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

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

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

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

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

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

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

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

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

<uses-featureandroid:name=“android.hardware.camera”/>

<uses-featureandroid:name=“android.hardware.camera.autofocus”/>

•   Modify the following code in PhoneGapAndroidActivity,java :

package com.android.PhoneGap;

import android.app.Activity;

import android.os.Bundle;

import com.phonegap.*;

import com.android.PhoneGap.*;

public class PhoneGap_AndroidActivity extends DroidGap {

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

   @Override

   public void onCreate(Bundle savedInstanceState) {

       super.onCreate(savedInstanceState);

       super.loadUrl(“file:///android_asset/www/index.html”);

    }

}

• Lets check the PhoneGap activity in Android as native application of Mobile web apps.

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

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 :

• 

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

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.