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

September 22, 2013 1 Comment


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).

 

Filed under OData/Code First-Entity Framework/MVC/jQuery Mobile, PhoneGap, Responsive Design, Windows Phone 8, Windows Phone 8.x/7.x, Windows Store Universal Apps Tagged with , , , ,

PhoneGap 1.2 Installation for Android in Eclipse

January 13, 2012 Leave a comment


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.

Filed under PhoneGap Tagged with , , , , , , ,

ASP.NET MVC Razor Template with JQuery Mobile Web for Android, Windows Phone , BlackBerry

December 5, 2011 9 Comments


ASP.NET MVC 3 Razor applications with JQuery Mobile is pretty straightforward for developing rich web for mobile. This article demonstrates to build asp.net mvc 3 Razor applications with JQuery , HTML 5 & CSS 3 templates running in smartphones . Build an application for ASP.NET MVC Razor application in Visual Studio 2010 & add the following JQuery template in _layout.cshtml:

<!DOCTYPEhtml>

<html>

<head>

<title>@ViewBag.Title</title>

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

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

<link rel=”stylesheet”href=”@Url.Content(“http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css&#8221;)”/>

<scripttype=”text/javascript”src=”@Url.Content(“http://code.jquery.com/jquery-1.5.2.min.js&#8221;)”></script>

<scripttype=”text/javascript”src=”@Url.Content(“http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js&#8221;)”></script>

</head>

<body>

@RenderBody()

</body>

</html>

Next , Put the code in Index.cshtml for SmartPhone View:

@model IEnumerable<MVC3_JQueryMobile.Models.HMS_000ITEM>

@{

ViewBag.Title = “Index”;

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

}

<div data-role=”page”>

<div data-role=”header”>

<h1> Health Record </h1>

</div>

<div data-role=”content”> 

<ul data-role=”listview”>

<li>@Html.ActionLink(“Patients Record”, “Index”, “Home”)</li>

<li>@Html.ActionLink(“Daily Health Record”, “Index”, “Category”)</li>                   

<li>@Html.ActionLink(“View Report”, “Index”, “Expense”)</li>

</ul>

</div>

<div data-role=”footer”>     

<nav data-role=”navbar”>

<ul>

<li><ahref=”#”class=”ui-btn-active”>Patient Details</a></li>

<li><ahref=”#”>Report Chart</a></li>

<li><ahref=”#”>Contact Us</a></li>

</ul>

</nav>

</div>

Check out the output in Android & Windows Phone 7.1 & BlackBerry 9800:

  •    Check in BlackBerry 9800 Browser :

  • Testing Website in Internet Explorer 9 for Windows Phone 7.1 Mango :

Filed under ASP.NET MVC for Mobile, Mobile ASP.Net, Responsive Design, Windows Phone 8.x/7.x Tagged with , , , , ,