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.

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:

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 3 Razor Mobile Ready Website Template & JQuery Mobile Web Template for Visual Studio 2010 SP1

ASP.NET MVC 3 Razor capability with Visual Studio 2010 has rich support for Mobile Devices. But , in Project development we have to keep all CSS, JQuery, JavaScript files to keep in touch , Copy & Paste in Project Folder / Drag & Drop. For Mobile Specific Views keep in mobile Section all Mobile Javascript, mobile.css, JQuery for Mobile files etc..

What If we have a seperate Template in Visual Studio 2010 for Mobile Ready ASP.NET MVC3 Razor Teamplete & JQuery for Mobile like this.

•                  For JQuery for Mobile ASP.NET & ASP.NET MVC .

•  On starting project with Mobile Ready ASP.NET MVC 3 Template, we got inbuilt support of MobileViewEngine file which helps to render the desktop MVC web application to mobile browser by detecting the User-Agent.

• Having help for Mobile Specific View of websites without using any mobile.browser file or WURFL database. No need to write any extra code for mobile browser rendering logic .

•   Put the simple logic here: (Already Available in ApplicationHelper.cs in the default project installed with template)

publicstaticbool IsSupportedMobileDevice(thisHttpRequestBase request)

{

bool isMobile = request.Browser.IsMobileDevice;

string userAgent = request.UserAgent.ToLowerInvariant();

isMobile = isMobile || (userAgent.Contains( “iphone”)

|| userAgent.Contains(“blackberry”)

|| userAgent.Contains(“mobile”)

|| userAgent.Contains(“windows ce”)

|| userAgent.Contains(“opera mini”)

|| userAgent.Contains(“palm”)

|| userAgent.Contains(“fennec”)

|| userAgent.Contains(“adobeair”)

|| userAgent.Contains(“ripple”)

);

return isMobile;

• Next , Run the MVC 3 web application & check the view in desktop as well as in Windows Phone.

                                                                                       Desktop –  View

Mobile-  View

•  To get the Rich Template in Visual Studio 2010 , go to Tools -> Extension Manager -> Search Online Templates -> Select ASP.NET MVC3 Razor Mobile Ready Template & JQuery for Mobile Template.

• JQuery for Mobile with rich .css & javascript support. No need to download seperately & copy, paste or make seperate template.

•  Download it & Install in your Visual Studio 2010 & Enjoy building MVC 3 Razor Website Ready for Mobiles with rich support API of HTML 5, JQuery.

•    Install in Visual Studio 2010 as default template instead of copy & paste in Project/Item Template of Visual Studio 2010 folders.

•    Lets work with Visual Studio 2010 installed templates of Mobile Ready ASP.NET MVC 3 Razor & JQuery for Mobile with HTML 5.