Building Cross-Platform Mobile apps with Icenium for iOS,Android on Visual Studio 2012


Recently announced, the visual studio ultimate 2012 extension of Icenium (Kendo UI for Mobile) by telerik , a cross- platform mobile app framework based on PhoneGap, jQuery Mobile for iOS & Android. The Visual Studio 2012 ultimate extension can be downloaded from here.

Lets start , what’s new in this version of Icenium template. So, open Visual Studio 2012 ultimate & select Icenium template from Project templates.

Kendo

The latest release contains the following updates :

  • Icenium extension for Visual Studio (Beta): .NET developers can fully leverage Icenium mobile development platform directly from Visual Studio! This allows for quick development of cross-platform apps for both iOS and Android. In addition Team Foundation Server (TFS) and Subversion (SVN), for example, can now be used in addition to Icenium’s default support for GitHub, making it even easier to integrate Icenium into existing development workflows.
  • Apache Cordova 3.0 update: In Apache Cordova 3.0, every core API is taken apart into a plugin on its own-and Icenium can now take advantage of this new architecture. Users will be able to selectively turn on or off any core plugin. The same option will be available for all out-of-the-box advanced custom plugins such as the Barcode Scanner, PushPlugin, and SQLite.
  • Icenium Mist enhancements: Icenium Mist continues to mature with the inclusion of code analysis, code completion, and its new integrated version control plugin, CodeMirror.

 

  • Run the project by selecting the tab ‘ICENIUM‘ from Visual Studio 2012 & select the option ‘Run Project(Specified in Project Name) in simulator‘.

Run

 

  • The device simulator launches with iPhone,iPhone 5S, iPad, Android Phone & Android Tablet simulators.

PieChart

  • The simulator even specifies the geolocation & network connection feasibility options(viz. wifi, cell2G, cell3G,cell4G, limited) connectivity options.

geolocation

  • The Icenium DataViz project template contains default JSON data for populating charts, gauges along with ‘Cordova‘ framework support for iOS & Android.
  • The source code for these controls looks fairly simple by using jQuery Mobile & Cordova scripts using native html5 & minimized css3

<!DOCTYPE html>
<html>
<head>
<title>Kendo UI DataViz</title>
<meta charset=”UTF-8″ />

<link href=”kendo/styles/kendo.dataviz.mobile.min.css” rel=”stylesheet” />

<!–Once the final theme is chosen the redundant css reference should removed–>
<link href=”kendo/styles/kendo.dataviz.flat.min.css” rel=”stylesheet” />
<link href=”kendo/styles/kendo.dataviz.silver.min.css” rel=”stylesheet” />

<link href=”styles/main.css” rel=”stylesheet” />

<script src=”cordova.js”></script>
<script src=”kendo/js/jquery.min.js”></script>
<script src=”kendo/js/kendo.dataviz.mobile.min.js”></script>

<script src=”scripts/app.js”></script>
<script src=”scripts/pie-chart.js”></script>
<script src=”scripts/gauge.js”></script>
<script src=”scripts/qr-code.js”></script>
<script src=”scripts/stock-chart.js”></script>
</head>

<body>
<!–Pie chart–>
<div id=”tabstrip-pie-chart”
data-role=”view”
data-title=”Pie Chart”
data-show=”app.pieChart.createPieChart”
data-hide=”app.pieChart.unbindResizeEvent”
data-stretch=”true”>

<div data-role=”content” class=”view-content”>
<div id=”pie-chart”></div>
</div>

</div>

<!–Gauge–>
<div id=”tabstrip-gauge”
data-role=”view”
data-title=”Gauge”
data-show=”app.gauge.createGauge”
data-hide=”app.gauge.unbindResizeEvent”
data-stretch=”true”>

<div id=”gauge-wrap” data-role=”content” class=”view-content”>
<div id=”gauge”></div>
<div class=”input-content”>
<input id=”gauge-value” type=”range”>
</div>
</div>

</div>

<!–QR code–>
<div id=”tabstrip-qrcode”
data-role=”view”
data-title=”QR Code”
data-show=”app.qrcode.createQRCode”>

<div data-role=”content” class=”view-content”>
<div id=”qrcode”></div>
<div class=”input-content”>
<input type=”text” id=”qrcode-value” value=”http://www.icenium.com/”&gt;
<a data-role=”button” id=”qrcode-generate”>Update QR</a>
</div>
</div>

</div>

<!–Stock chart–>
<div id=”tabstrip-stock-chart”
data-role=”view”
data-title=”Stock Chart”
data-show=”app.stockChart.createStockChart”
data-hide=”app.stockChart.unbindResizeEvent”
data-stretch=”true”>

<div data-role=”content” class=”view-content”>
<div id=”stock-chart”></div>
</div>

</div>

<!–Layout–>
<div data-role=”layout”
data-id=”mobile-tabstrip”>

<!–Header–>
<div data-role=”header”>
<div data-role=”navbar”>
<a data-align=”right” data-role=”button” data-click=”app.changeSkin”>Flat</a>
<span data-role=”view-title”></span>
</div>
</div>

<!–Footer–>
<div data-role=”footer”>
<div data-role=”tabstrip”>
<a href=”#tabstrip-pie-chart” data-icon=”globe”>Pie Chart</a>
<a href=”#tabstrip-gauge” data-icon=”recents”>Gauge</a>
<a href=”#tabstrip-qrcode” data-icon=”camera”>QR Code</a>
<a href=”#tabstrip-stock-chart” data-icon=”featured”>Stock Chart</a>
</div>
</div>

</div>
</body>
</html>

Android chart

In next article, we will cover the PhoneGap / Cordova  3.0 framework to built native apps on HTML5, CSS3 & jQuery for Windows Store & Windows Phone apps using Windows Azure Mobile Services(WAMS).

 

Build Cross Platform App Development for Windows Phone with PhoneGap 1.9 build on Apache Cordova


Cross Platform Application Development for Windows Phone , Android , iOS, Samsung bada, BlackBerry & Palm Web Os devices are possible by the help of PhoneGap tool which is built & supported by Open – Source Apache Cordova Framework. The PhoneGap 1.9 tool is HTML5 platform which bridges the compatibility of native application support on Mobile Web applications. PhoneGap leverages the features of HTML5, CSS 3 & javascript. Download PhoneGap tools from http://phonegap.com/download.

  • Lets start by first downloading the latest PhoneGap version 1.9 supported by Apache Cordova framework & open lib/Windows Phone folder from the PhoneGap tool folder.
  • Copy the Zip archieve named CordovaStarter -1.9.0 & paste it inside the  Visual Studio 2010/ Visual Studio 2012 Templates/Project Templates/Visual C#/Silverlight for Windows Phone folder.
  • Now open the Visual Studio & start a new PhoneGap Cordova Project for Windows Phone.

  • Lets check the new PhoneGap Cordova project created for Windows Phone. The default app page is MainPage.xaml.
  • Inside the www folder , there are three files as index.html, cordova-1.9.0.js & master.css.
  • Inside the GapLib folder , there is the main .dll called WP7CordovaClassLib.dll.
  • The CordovaResourceDictionary.xml contains all the HTML5 resources which is stored in isolated storage of the phone. The default code in the dictionary file as follows:

<CordovaSourceDictionary>

<FilePathValue=www\cordova-1.9.0.js/>

<FilePathValue=www\index.html/>

<FilePathValue=www\master.css/>

</CordovaSourceDictionary>

  • Check the default PhoneGap Cordova web app page on Windows Phone executing on top of native application.

 

Build Cross-Platform Mobile Web+Native apps with Application Craft+PhoneGap platform in HTML5,CSS3 framework


Application Craft is one of the sophisticated cross-platform tool used to build Web App + PhoneGap combined apps for smart devices. The Application Craft is web app which runs in cross -platform(windows,Linux, Mac OS X) compatible with Chrome, Safari, Firefox. To start building apps with Application Craft , lets first sign up @ http://www.applicationcraft.com/

Lets create Mobile App from your developer site & start building apps. You have option either to design & code & put the PhoneGap controls.

  • Keep controls drag & drop & build apps for cross-platform mobile tools.

  • put the app in Live Preview & check in Smart Phone emulators.

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.

PhoneGap 1.2 for Windows Phone 7.1 Mango with VS 2010


PhoneGap is an excellent open-source hub for building mobile web applications wrapped in native mobile application features. It’s a magnificient tool from Nitobi which has excellence on iOS, Android, BlackBerry, Palm Web OS, Symbian, Windows Phone.

  • Let’s download PhoneGap sdk from www.phonegap.com & extract the .ZIP file to get the PhoneGap starter kit.
  • Open the Windows Phone folder & copy the .ZIP named GetAppStarter to C:\Users[Username]\Documents\Visual Studio 2010\Templates\ProjectTemplates\Visual C#\Silverlight for Windows Phone.

 

  • Create a new Project in Visual Studio 2010 for Windows Phone on PhoneGap.

  • Lets check the Project environment for PhoneGap project in Visual Studio for Windows Phone 7.1 Mango.

  • Let’s check the  output in Windows Phone 7.1 Mango for PhoneGap.

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:

%d bloggers like this: