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.

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.

A Welcome to Windows 8 Consumer Preview

Windows 8 Consumer Preview has released on February 29th , 2012 at barcelona conference by Windows User Experience Team which reveals the new future for Tablets, Laptops, Slates with great experience of Metro Style Apps. Several new features has been flourished compared to developer preview of Windows 8 & hosting features for Touch centric devices as well as for laptop PCs.

Here is a quick preview of Windows 8 Consumer Preview.

Explore more articles on Windows 8 Consumer Preview on next series.

Building ASP.NET MVC 4 application with JQuery Mobile, HTML5 , CSS3 Media Queries in Visual Studio 2011 Developers Preview

Developing MVC 4 applications with Visual Studio 2011 Developers Preview is quite jump-start for developers as it has inbuilt support for JQuery Mobile css & javascripts, nice intellisense for HTML 5 , CSS 3 media queries. MVC 4 developers preview was built keeping in mind the Mobile Web Developers who wants keen support of rich MVC in Mobile Web.

• Lets jump start to develop MVC 4 mobile application with JQuery Mobile, HTML5, CSS3 in VS 2011 developers preview.

• Select your MVC 4 application domain either Internet/Intranet/Mobile Web application  with default Razor or ASPX syntaxes. For my demo , selected Mobile Web application in VS 2011 Developer Preview.

• Next, write some JQuery Mobile application code to check th UI view in SmartPhones while Model & Controller logic remains same & could change according to business requirements.
• Database -> Entity Framework (EF) -> Model in MVC 4(Entities) (DAL)-> Controllers (Business Logic Layer)(BLL) -> View(s) -> Master(_Layout.cshtml) is the default development path in MVC 4 Web & mobile application.

• Sample code for JQuery Mobile with HTML5 for MVC 4 in VS 2011:

@{

ViewBag.Title = “Navigation”;

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

}

<h2>Navigation</h2>

<section id=”page1″data-role=”page”>

<header data-role=”header”>

<h1>JQuery Mobile with ASP.NET MVC 4</h1>

<nav data-role=”navbar”>

<ul>

<li><a href=”#”class=”ui-btn-active”>First</a></li>

<li><a href=”#”>Second</a></li>

<li><a href=”#”>Third</a></li>

<li><a href=”#”>Fourth</a></li>

<li><a href=”#”>Fifth</a></li>

</ul>

</nav>

</header>

<div class=”content”data-role=”content”>

<h3>Sample MVC 4 HTML 5 JQuery Mobile</h3>

</div>

<footer data-role=”footer”>

<h3>Footer</h3>

</footer>

</section>

• Next , Check the nice intellisense support for HTML5 , JQuery Mobile in Visual Studio 2011 Developer Preview.

• Check out the MVC 4 Mobile Web applications with JQuery Mobile , HTML5 , CSS 3 media queries in Smart Devices.
•  iPhone & iPad:

 

• iPhone:

• JQuery Mobile View in iPhone of MVC 4 Mobile application:

• View in Windows Phone 7.1 Mango:

• BlackBerry 9800:

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 :

• 

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

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

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 :