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

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 .

 

 

Develop DICOM Image Viewer app for Android integrated in ASP.NET 4.0 Mobile build in JQuery Mobile, HTML5,& CSS3 Media Queries


While working with HealthCare domain based customers , felt one application is going to be inevitable for EMR Mobile based apps -DICOM Medical Image Viewer for smartphones. For that lets have integrate Android native app Droid Dicom Viewer with your Mobile Medical ASP.NET 4.0 website build with HTML5, JQuery Mobile, PhoneGap,CSS3 media queries.

  • In order to open the .apk file & DICOM Image files(.dcm) from Mobile ASP.NET website, you need to set the MIME Maps for .apk & .dcm files in IIS 7.

  • Lets start download the first DICOM Files downloader .apk which helps to download the Medical DICOM Image files(.dcm) from the remote server.

  • Lets have install the Droid Dicom Viewer & DICOM files downloader .apk on Android 4.0.3 emulator.

  • Proceed to complete installation of the DICOM file downloader .apk to start download .dcm files from remote server.

  • Lets install the Droid DICOM Image Viewer from Mobile asp.net site in Android 4.0.3 emulator.

  • Lets load the DICOM Image File (.dcm) in Droid DICOM Image Viewer .apk in Android 4.0.3 emulator.

  • Lets find your DICOM Image File on SD Card of your droid .apk & start viewing the DICOM Image on viewer in Android 4.0.3 (API 15) platform.

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.

Developing Interactive Mobile Web Apps with HTML5,JS, CSS3 using MoSync SDK 3.0 for Android,Windows Phone 7.5 & iOS.


MoSync is a cross-platform  Mobile App development environment where we can build apps for native UI, Web UI as well as hybrid UI for Windows Phone 7.5, Windows Mobile 6.x , Microsoft SmartPhone 2003 library, Pocker PC , Android  & iOS (iPhone & iPad for Mac OS X). MoSync SDK comes with a built -in Eclipse IDE to build up apps in HTML5/js or native C/C++ API.  To start development with MoSync SDK 3.0 , download it here.

  • Before installing MoSync Reload SDK 3.0 , you need to install first Node.js 0.6 version in order to run MoSync apps. If you are first time coder in MoSync  SDK 3.0, better to start with MoSync SDK 3.0.
  • Create a new MoSync Project in MoSync Eclipse IDE from File-> Project -> MoSync Project -> Select HTML 5 -> Select HTML5/js Web UI App.   

  •  Select a name for your project & click on finish to get the default project template.

  • Now check the default code template & select the Runtime environments. In MoSync you can run apps either directly to smartphone devices (Android USB /Bluetooth USB) or run in device emulators (Android, Windows Phone 7.5, iPhone for OS X).
  • Check out the Android Simulation environment & Click on Active Profile from toolbar of MoSync Eclipse IDE.

  • MoSync SDK will generate .apk file for Android Web UI app & deploy the app to Android emulator or device.

  • Run the MoSync HTML5,js  Web UI app  on Android 4.0 emulator.

  • Click on Change Color Button & check out the color change of the Web UI app.

  • Next deploy the  MoSync HTML5/js Web UI app on Windows Phone 7.5 emulator & Click on Active Profile icon to find the available devices on MoSync Eclipse IDE.

  • Select Windows Phone 7.5 platform as target device/emulator platform.

  • MoSync SDK will deploy the HTML5/js Web UI app as Native .xap file for Windows Phone 7.5 .

  • Check out the HTML5 /js Web App in Windows Phone 7.5 as native app .

 

  •  In the next tutorial, we will see the support of PhoneGap applications on MoSync SDK HTML5/js Web UI apps.
%d bloggers like this: