PhoneGap for Windows Phone,iPhone & Android apps with JavaScript,HTML 5 & CSS 3
December 22, 2011 5 Comments
- 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’)
- 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”,[]);
Anindita's Blog 
You must be logged in to post a comment.