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.

Advertisements

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.
%d bloggers like this: