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

 

Advertisements

What’s new in Windows Azure SDK 2.1, Visual Studio 2013 Preview along with .NET framework 4.5.1


Recently announced the release of Windows Azure SDK 2.1 which can downloaded here comply with .NET framework 4.5.1 along with support of Visual Studio 2013 preview. 

Windows Azure for .NET SDK version number (2.1) is determined by the core Windows Azure service runtime assembly using semantic versioning. Other client libraries packaged inside the Windows Azure SDK for .NET, along with their respective NuGet packages, follow independent versioning based on the semantic versioning scheme.

The Windows Azure SDK for .NET 2.1 includes Windows Azure Storage 2.0.6, Windows Azure Service Bus 2.1, Windows Azure Caching 2.0, and Windows Azure Configuration Manager 2.0.1 libraries. You can also download these libraries from their respective NuGet packages.

  • you need to install separately windows azure SDK 2.1 for VS 2013 preview.

Azure

 

  • Install Windows Azure emulators, SDK as well as VS integrator components for 2.1 version. But this version would be final version to be supported on VS 2010 as per as Side by Side debugging policy.
  • Side-by-Side Cloud Service Debugging is only supported with Windows Azure SDK for .NET versions 1.7, 1.8, 2.0, and 2.1. For a full debugging experience, projects built using versions prior to version 1.7 must be upgraded. For more information, see Windows Azure Cloud Services Support Lifecycle Policy.

    For example, when running a project built on Windows Azure SDK for .NET version 1.6 on a machine with version 2.1 installed, you will see the following error message- “The system is missing a prerequisite to execute the service.”

    To work around this error, uninstall the compute emulator included in version 2.1 and install thecompute emulator for version 1.6. If you do this, however, you will not be able to run an application built on SDK version 2.1 on this machine.

SDK

 

 

SDKsetup

 

  • Lets start to work with Windows Azure SDK 2.1 & start a new cloud project  selecting .net framework 4.5.

AzureSDK

 

  • Select the suitable webrole/worker role needs to be added to the project to start execution.

Azureproject

 

  • One noticeable change is the deprecation of Silverlight Business app webrole, instead of a new worker role template of service bus queue has been added.
  • For my demo, lets select an ASP.NET 4.5 webrole.

asp.net4.5

 

  • In order to have custom settings , asp.net 4.5 settings , it offers different options for webrole selection from webforms , MVC, webAPI, Facebook & mobile apps. 
  • One latest addition is SPA app on asp.net 4.5 which is an interactive frontend based app using HTML5, CSS3, javascript , jquery.
  • This template has a built – in ‘todolist‘ app which I selected for my demo app preview. so , lets select the app.

SPa

 

  • After selecting the app, start the execution of the app. The app starts in built to-do list sign in page.

Todolist

 

  • After sign up , you would be prompted to the home page of the app, where you can add your latest schedule of todo programs.

list

 

 

The following are breaking changes in the Windows Azure SDK for .NET 2.1:

  • Creating an ASP.NET MVC 5 Web API project or SPA project in a new Cloud Service in Visual Studio 2013 Preview– When creating these project types through File->New->Windows Azure Cloud Service->ASP.NET Web Application, you must manually add an assembly redirect to ODataLib version 5.5 if you are using the Storage Client Library in your project.  This can be done in one of two ways:
    • Remove and re-add the Storage Client Library NuGet package by right-clicking your project References in Solution Explorer and selecting Manage NuGet Packages
    • Or, add the assembly redirect as called out in the build warning:
      C:\Program Files (x86)\MSBuild\12.0\bin\Microsoft.Common.CurrentVersion.targets(1613,5): warning MSB3247: 
      Found conflicts between different versions of the same dependent assembly. 
      Please add the following binding redirects to the "runtime" node in your application configuration file: 
      <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
        <dependentAssembly>
          <assemblyIdentity name="Microsoft.Data.Edm" culture="neutral" publicKeyToken="31bf3856ad364e35" />
          <bindingRedirect oldVersion="0.0.0.0-5.5.0.0" newVersion="5.5.0.0" />
        </dependentAssembly>
      </assemblyBinding>
      <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
        <dependentAssembly>
          <assemblyIdentity name="System.Spatial" culture="neutral" publicKeyToken="31bf3856ad364e35" />
          <bindingRedirect oldVersion="0.0.0.0-5.5.0.0" newVersion="5.5.0.0" />
        </dependentAssembly>
      </assemblyBinding>
      <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
        <dependentAssembly>
          <assemblyIdentity name="Microsoft.Data.OData" culture="neutral" publicKeyToken="31bf3856ad364e35" />
          <bindingRedirect oldVersion="0.0.0.0-5.5.0.0" newVersion="5.5.0.0" />
        </dependentAssembly>
      </assemblyBinding>
  • Running the Windows Azure compute emulator on the Windows 8.1 Preview– Internet Explorer in Windows 8.1 Preview has a new Enhanced Security mode which breaks the Start Without Debugging (CTRL+F5) functionality of the compute emulator. When the compute emulator starts, Internet Explorer launches and fails to load the web application hosted at the local host IP because http://127.0.0.x is not listed in Trusted sites. Start With Debugging (F5) functionality is not affected.
  • Loading the ServiceRuntime from SDK 2.0 or later in a startup task throws an exception– To resolve, add the useLegacyV2RuntimeActivationPolicy attribute with a value of true to the startup element of the App.config file for the executable, as in the following example:
    <?xml version="1.0" encoding="utf-8" ?>
    <configuration>
        <startup useLegacyV2RuntimeActivationPolicy="true">
             ...
             ...
             ...
        </startup>
    </configuration>
  • WebPI feed failure conditions
    • The WebPI feed will fail to install if the Microsoft Root Certificate Authority 2010 or 2011 is missing.  For more information seehttp://support.microsoft.com/kb/931125.
    • The WebPI feed will silently fail on computers that are pending a reboot after installing updates or new software. To resolve this issue, restart the computer and then restart the setup.

How to add Glossy App Icon for Mobile Web App on iOS platform?


Here is a short note on how to add glossy app icon for mobile web apps built in HTML5, ASP.NET MVC, jQuery Mobile/Sencha on iPad, iPhone platform. You need to select a standard .PNG file with proper icon formats (aka 114 x 114) for iPad , (54 X 54) for iPhone & add the .icon file in your mobile web app project root directory.

Simply add it in your HTML5 code after meta name viewport tag as:

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

<meta name=”viewport”content=”width=device-width, initial-scale=1, maximum-scale=1″/>

<link rel=”apple-touch-icon”href=”icon.png”/>

Now, on iOS device, add the mobile web app on homescreen, then you can find your app icon along with the caption options.

AppIcon

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.

 

REST Services for Mobile ASP.NET MVC 4 with Code-First Entity Framework & Web API with SQL Azure on Visual Studio 2012 Ultimate


REST based services are quite easier to access via ASP.NET MVC 4 Mobile Web applications with Web API framework. With REST , each object can be uniquely identified & accessed via Code Access URL with its own Routing logic & behaviour. To implement a REST services for Mobile ASP.NET MVC 4 application with Web API & entity framework , lets start by creating a new ASP.NET MVC 4 web applivation from VS 2012 Ultimate.

  • Select the Project type as Internet Application by default.

  • Delete the default Model  folders file & create a new class & name it as Contacts.cs. Add the following code into it.

using  System;

using  System.Collections.Generic;

using  System.Linq;

using System.Web;

using System.Globalization;

namespace  ContactsApp.Models

{

public class Contact

{

public int ContactId { get; set; }

public string Name { get; set; }

public string Address { get; set; }

public string City { get; set; }

public string State { get; set; }

public string Zip { get; set; }

public string Email { get; set; }

public string Twitter { get; set; }

public string Self

{

get

{

returnstring.Format(CultureInfo.CurrentCulture,“api/contacts/{0}”, this.ContactId);

}

set { }

}

}

}

  • Delete the default controllers & Build thee solution & create a new Controller by selecting the Contact Model class.

  • Now select Tools -> Library Extension Manager -> Package Manager Console & paste the following commands.

enable-migrations

 add-migration Initial

Now , select the Configuration.cs file from Migrations folder & paste the following code.

namespace

ContactsApp.Migrations

{

using System;

using System.Data.Entity;

using System.Data.Entity.Migrations;

using System.Linq;

using ContactsApp.Models;

internalsealedclassConfiguration : DbMigrationsConfiguration<ContactsApp.Models.ContactsAppContext>

{

public Configuration()

{

AutomaticMigrationsEnabled = false;

}

protected override void Seed(ContactsApp.Models.ContactsAppContext context)

{

context.Contacts.AddOrUpdate(p => p.Name, new Contact

{

Name = “Debra Johnson”,

Address = “1234 Main St”,

City = “Redmond”,

State = “WA”,

Zip = “10999”,

Email = “debra@example.com”,

Twitter = “debra_example”

},

new Contact

{

Name = “Thorsten Weinrich”,

Address = “5678 1st Avenew W”,

City = “Redmond”,

State = “WA”,

Zip = “10999”,

Email = “thorsten@example.com”,

Twitter = “thorsten_example”

},

new Contact

{

Name = “Yuhong Li”,

Address = “9012 State St”,

City = “Redmond”,

State = “WA”,

Zip = “10999”,

Email = “yuhong@example.com”,

Twitter = “yuhong_example”

},

new Contact { Name = “Jon Orton”, Address = “3456 Maple St”, City = “Redmond”, State = “WA”, Zip = “10999”, Email = “jon@example.com”, Twitter = “jon_example” },

newContact { Name = “Diliana Alexieva-Bosseva”, Address = “7890 2nd Street E”, City = “Redmond”, State = “WA”, Zip = “10999”, Email = “diliana@example.com”, Twitter = “diliana_example” }

);

}

}

}

  • In the package-Manager console , enter the following code :

update-database

Build the solution & add the following code in index.cshtml :

@model IEnumerable<ContactsApp.Models.Contact>

@{

ViewBag.Title = “Home”;

}

@section Scripts {

@ Scripts.Render(“~/bundles/knockout”)

<script type=”text/javascript”>

function ContactsViewModel() {

var self = this;

self.contacts = ko.observableArray([]);

self.addContact =

function () {

$.post(“api/contacts”,

$( “#addContact”).serialize(),

function (value) {

self.contacts.push(value);

},

“json”);

}

self.removeContact = function (contact) {

$.ajax({

type: “DELETE”,

url: contact.self,

success:

function () {

self.contacts.remove(contact);

}

});

}

$.getJSON( “api/contacts”, function (data) {

self.contacts(data);

});

}

ko.applyBindings(new ContactsViewModel());

</script>

}

<ul id=”contacts”data-bind=”foreach:contacts”>

<li class=”ui-widget-content ui-corner-all”>

<h1 data-bind=”text:Name”class=”ui-widget-header”></h1>

<div><spandata-bind=”text:$data.Address ||      ‘Address?'”></span></div>

<div>

<span data-bind=”text:$data.City || ‘City?'”></span>

<span data-bind=”text:$data.State || ‘State?'”></span>

<span data-bind=”text:$data.Zip || ‘Zip'”></span>

</div>

<div data-bind=”if:$data.Email”><adata-bind=”attr:{href:  ‘mailto:’+Email},text:Email”></a></div>

<div data-bind=”ifnot:$data.Email”><span>Email?</span></div>

<div data-bind=”if:$data.Twitter”><adata-bind=”attr:{href:     ‘http://twitter.com/&#8217; +Twitter},text:’@@’+Twitter”></a></div>

<div data-bind=”ifnot:$data.Twitter”><span>Twitter?</span></div>

<p><a data-bind=”attr:{href:Self},click:$root.removeContact”

class=”removeContact ui-state-default ui-corner-all”>Remove</a></p>

</li>

</

ul>

<form id=”addContact”data-bind=”submit:addContact”>

<fieldset>

<legend>Add New Contact</legend>

<ol>

<li>

<label for=”Name”>Name</label>

<input type=”text”name=”Name”/>

</li>

<li>

<label for=”Address”>Address</label>

<input type=”text”  name=”Address”/>

</li>

<li>

<label for=”City”>City</label>

<input type=”text”name=”City”/>

</li>

<li>

<label for=”State”>State</label>

<input type=”text”name=”State”/>

</li>

<li>

<label for=”Zip”>Zip</label>

<input type=”text”name=”Zip”/>

</li>

<li>

<label for=”Email”>E-mail</label>

<input type=”text” name=”Email”/>

</li>

<li>

<label for=”Twitter”>Twitter</label>

<input type=”text”name=”Twitter”/>

</li>

</ol>

<input type=”submit”value=”Add”/>

</fieldset>

</form>

  • Render the View on IE 10 & Check the script & view on iPhone & BlackBerry browsers.

Build Medical Radiology DICOM Viewer in HTML 5 & jQuery for iPhone


For Medical Radiology domain, it’s indispensable to develop DICOM Viewer in order to view medical images (CT, MR, Endoscopy,X-Ray) on smartphones. For desktop it’s easy to build for webkit browsers (Mozilla Firefox, Chrome) on HTML 5 & jQuery. Lets develop such app for iPhone.

To build this app, several js libraries are needed which is available @ github.

  • Lets check for the code to build the DICOM Web viewer on HTML 5 :

<html>

<head>

<title>DICOM Web Viewer</title>

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

<meta name=”viewport” content=”width=device-width”/>

<meta http-equiv=”content-type”content=”text/html; charset=ISO-8859-1″>

<link rel=”stylesheet” href=”css/style.css”>

<link rel=”stylesheet” href=”css/ui-darkness/jquery-ui-1.8.16.custom.css”>

</head>

<body>

<!– Third party –>

 

<script type=”text/javascript”src=”ext/jquery/jquery-1.7.1.min.js”></script>

<script type=”text/javascript”src=”ext/jquery/jquery-ui-1.8.18.custom.min.js”></script>

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

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

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

<!– Local –>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<script type=”text/javascript”>

function

toggle(dialogName)

{

if( $(dialogName).dialog(‘isOpen’) )

{

$(dialogName).dialog(‘close’);

}

else

{

$(dialogName).dialog(‘open’);

}

}

// main application

var  app = new dwv.App();

// jquery

$(document).ready(function(){

// create buttons and dialogs

$(“button”).button();

$(“#openFile”).dialog({ position: [10, 110] });

$(“#toolbox”).dialog({ position: [10, 280] });

$(“#history”).dialog({ position: [10, 450], autoOpen: false });

$(“#tags”).dialog({ position: [‘right’, 110], autoOpen: false, height: 400, width: 400 });

$(“#layerContainer”).dialog({ position: [340, 110],

width: [550], height: [570] });

// initialise the application

app.init();

});

</script>

<!– Title –>

<h1>DICOM Web Viewer </h1>

<!– Buttons –>

<button onclick=”toggle(‘#openFile’)”>Open File</button>

<button onclick=”toggle(‘#toolbox’)”>Toolbox</button>

<button onclick=”toggle(‘#history’)”>History</button>

<button onclick=”toggle(‘#tags’)”>Tags</button>

<button onclick=”toggle(‘#layerContainer’)”>Image</button>

<!– Open file –>

<div id=”openFile”title=”Open File”>

<p><form>

Path:

<input type=”file”id=”files”name=”files[]”multiple/>

</form></p>

<div id=”progressbar”></div>

</div>

<!– Toolbox –>

<div id=”toolbox”title=”Toolbox”>

</div>

<!– History –>

<div id=”history”title=”History”></div>

<!– Tags –>

<div id=”tags”title=”Tags”style=”display:none;”></div>

<!– Layer Container –>

<div id=”layerContainer”title=”Image”>

<canvas id=”imageLayer”width=”512″height=”512″></canvas>

<canvas id=”drawLayer”width=”512″height=”512″></canvas>

<canvas id=”infoLayer”width=”512″height=”512″></canvas>

<canvas id=”tempLayer”width=”512″height=”512″></canvas>

</div>

</body>

</html>

  • Lets run the Viewer on iPhone 4s.

Develop Cross-Platform Mobile Frameworks with Monocross , MonoTouch & MonoDroid for Android,Windows Phone 7.5 & iOS


Its feel great if possible to develop apps for Android, Windows Phone 7.5 & iOs using C# & with .NET Framework. The oppurtunity is well defined for Monocross, MonoDroid & MonoTouch framework. Let us find a suitable template with Monocross framework which would install a Monocross template for Visual Studio extension. Lets download it @ http://monocross.net/download.

Now install the .vsix template installer for Visual studio 2010.

  • Next check in the Extension Manager of Visual Studio 2010 where you can see the Monocross template for Visual studio is to be installed.

  • Lets start with a new Monocross Project from Visual Studio 2010 for Android Web kit. Next select a Webkit container project.

  • Add reference for the Monocross class library with the web-kit Container project.

  • Now run the Webkit project on Android emulator & check the web app sample built in HTML5 & ASP.NET MVC .

 

 

%d bloggers like this: