PhoneGap Mobile web Framework for JavaScript and HTML5

Understanding Cross-Platform Mobile Application Development There are many smartphone platforms on the market: Android, iPhone, BlackBerry, Nokia, the Windows 7 Phone, and WebOS. Newer platforms are on the rise as well, such as Samsung’s Bada and Meego. In the year 2000, we saw a similar situation in the desktop world Microsoft Windows, Apple’s Mac, and various versions of Linux and UNIX Sun’s Java came to the rescue and provided us with a common platform on which to build. With Java’s build– once–and–run–anywhere strategy

Types of Mobile Applications – Standalone mobile applications – Mobile applications (based on web services) Understanding Web Services Web applications that are accessible via browsers (meant for human interfacing) Web services that are accessible via protocols like RESTful web services (meant for programmatic interfacing)

Mobile Applications

Mobile feature != web application feature

Input method

Location Awareness Push Notification

Challenges in Cross-Platform Mobile Application Development 1.OS Fragmentation

First, you have to set up different environments for each platform. Second, you need a bit of expertise with each respective OS. For a mobile developer, the learning curve may be long. Different programming languages are required for different mobile platforms. You need to be familiar with the features supported by each mobile platform;

Multiple Teams/Products

Consistent User Experience

Feature Fragmentation the fact is the same application will have some features turned off on some mobile platforms is a reality; the application’s logic needs to be written in that manner

Development Environment Fragmentation xx

PhoneGap

Cross-Platform Mobile Application Browser Component As the Common Platform

Mobile Browsers cv

Mobile Application Webviews All of these mobile platforms support embedding browsers in applications. This means one of the screens of your mobile application can actually be a browser that shows an HTML page. HTML5 and CSS3: The Standards for Writing Applications

PhoneGap Architecture

Required Installations for PhoneGap Android Project Install ADT Create AVD for the Emulator. Install the PhoneGap libraries.

Setting up an Environment on the Android ADT JRE PhoneGap API

ADT : Android Development Tools ติดตั้ง ADT โดยดาวน์โหลดได้จาก

PhoneGap API

Create AVD

Emulator Windows > Android SDK & AVD Manager Virtual Devices > New

Android SDK Manager

Emulator

Start Emulator

Create a New Android Project

First Step File>New> Android Project ApplicationName:HelloAndroid ProjectName:HelloAndroid Packagename: com.training.helloandroid Finish

Create new application

Project

Step 3 : Add PhoneGap Libraries to the Project Create www

Modify Android Permissions <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />

Step 4: Modify the Main Activity package org.examples.phonegap.helloworld; import android.os.Bundle; import com.phonegap.DroidGap; public class HelloWorld extends DroidGap { /** Called when the activity is first created. public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index.html") ; } }

Write the HelloWorld Application PhoneGap /** Called when phonegap javascript is loaded */ function onDeviceReady(){ document.getElementById("helloworld").innerHTML ="Hello World! Loaded PhoneGap Framework!"; } /** Called when browser load this page*/ function init(){ document.addEventListener("deviceready", onDeviceReady, false); }...

Deploy to Simulator c

HTML5 HyperText Markup Languages......

body {background-color:yellow} p {color:blue}

function greeting(){ alert("hello world"); }

Body This sentence consists of the bold, italic, and under line word.

ul,ol,li AAA BBB CCC AAA BBB CCC 1.AAA 2.BBB 3.CCC

Jquery Jquery.com

ไวยากรณของ jQuery ไวยากรณของ jQuery ประกอบไปดวยสองส วนไดแก – ส่วนของการเลือก (selection) และการกระทํา (action) สําหรับสมาชิกตางๆของแท็ก html ซึย่งเข ยีนไวในรปูแบบของ $(selector).action() โดยท่ี $ เป็น การกําหนดใหตัวแปลภาษาเขาใจวา เป นสวนของ jQuery –(selector) เปนสวนสําหรับการคนหาแทก html ที่สนใจ – action() เป็น ฟงกชั่น ที่กระทําตอแทก html ที่กําหนดใน selector

ตัวอย่าง $(this).hide()- สําหรับซอนแท็กปจจุบันที่ กำลังชี้อยู่ $("p").hide()- ซอนแท็ก ที่ที่วัตถุปรากฎ ในเอกสาร $(".test").hide() - ซ่อนเท็กทุกตัวที่มีคลาสเป น test (class = “test”) $("#test").hide()- ซ่อนเท็กทุกตัวที่มี id เป็น test(id=“test”)

DocumentReady เปนเหตุการณ์หรือฟงกชั่นที่จะถูกเรียกใช งานหากเว็บเบราเซอรไดโหลดไฟลเว็บ นั้น จนเสร็จสมบูรณไวยากรณของฟังกชั่น เขียนได้ดังนี้ $(document).ready(function(){ alert(“hello world”); });

jQuery Selectors click me line 1 line $(function(){ $("button").click(function(){ $("#test").hide(); }); });

ตัวอย่าง selector

การจัดการเหตุการณ เมื่อผู้ใช้กระทําการใดๆกับวัตถุตางๆบนจอภาพ แลวสิ่งท่ีเกิดขึ้นตามมาคือเหตกุารณ (event) ซึ่ง เหตุการณตางๆนั้นจะเป็นจดุที่ ใชสําหรับการตรวจสอบและอ้างอิงวาเกิด อะไรกับหนาเว็บแลวสิ่งท่ีจะเกิดขึ้น ตามมา คืออะไร

Event $("p").click(function(){ // action goes here!! }); $("p").dblclick(function(){ alert(“this button is dblclicked”); }); $("button").mouseenter(function(){ console.log("mouse enter"); }); $("button").mouseleave(function(){ console.log("mouse leave"); });

การอานคาแทกผานทาง jQuery click me Line 1 Line 2 $("button").click(function(){ var myname = $("input#name").val(); $("p.line1").text(" "+ myname +" "); $("p.line2").html(" "+ myname +" "); $("input#name").val(”TEST2"); });

GET และ POST $("button").click(function(){ $.get("get.php?name=TEST",function(data,st){ $("p").html("Data: " + data + " Status: " + st); }); }); <?php print "Hello ". $_GET["name"]; ?>

Using PhoneGap with jQuery Mobile

Not all browsers are same; you need a cross-browser framework to be successful. Even if most mobile browser are webkit based, its best to use a framework that abstracts the browser differences from a developer. If you were coding by hand, most of your code would be of drawing the UI, modifying the DOM, and making Ajax calls. A framework that lets you write less and do more would help you actually focus on the business logic. Creating an aesthetically good-looking HTML UI requires designer skills. At the same time, most mobile clients have predefined themes or schemas. It would help a developer if a framework provides good-looking UI out of the box. That way, the developer could focus on the business logic.

JQM open source cross-platform UI framework. It is built using HTML5, CSS3, and the very popular jQuery JavaScript library

First JQM Welcome Welcome! The jQuery Mobile Cookbook Enjoy reading the book...

Pages and Dialogs Header of Main Page Open Custom Dialog Footer of Main Page

Exploring PhoneGap Features 1.The accelerometer API of PhoneGap enables the application to sense change in the device’s orientation, therefore, it is able to act accordingly. This can be useful in creating applications that have a bubble level (making sure the phone is aligned horizontally to the ground). There is an option to fetch one reading of change in device orientation or to continuously receive the changes in device orientation. 2.The camera API of PhoneGap allows applications to retrieve a picture from either the camera (which is very useful for Facebook and Picasa applications) or fetch the images from already existing photo galleries.

The compass API of PhoneGap helps the applications know the bearing of the phone. This proves to be useful for map and navigation applications, since the map rotates as the user changes the bearing of the phone There is an option to fetch one reading of change in device heading or to continuously receive the changes in device heading. The contacts API of PhoneGap is a way for applications to read and write contacts. Many social applications can benefit from syncing phone contacts with contacts on social channels.

The file API of PhoneGap allows applications to read, write, and list directories and file systems. This is handy if the application is planning to change the contents of a file in the file system of the phone. This API can also help write file explorer applications. The geolocation API helps to retrieve the device’s geolocation. This is good for many applications, including map-based applications, and applications like foursquare, where the user can check-in to a place by using their GPS location. There is an option to fetch one reading of change in device geo location or to continuously receive the changes in device geo location.

The media API allows applications to control the media sensors and applications on the device. This API allows applications to record and playback audio and video recordings. The network API of PhoneGap provides the applications with the ability to see the state of the network. Instead of this state being just online and offline, this tells the application whether the device is on a 2G/3G/4G network or a Wi-Fi network. Such information often helps the application decide when to retrieve certain kinds of information.

The notification API allows applications to notify the user that something has occurred, by making a beep, vibration, or providing a visual alert. The storage API of PhoneGap provides a built-in SQL database for the applications. An application can insert, retrieve, update, and delete data through SQL statements. Applications can query data in the database, and search for a specific e- mail in a locally stored list of s.

Example PhoneGap /** Called when phonegap javascript is loaded */ function onDeviceReady(){ document.getElementById("deviceName").innerHTML = device.name; document.getElementById("version").innerHTML = device.phonegap; document.getElementById("mobilePlatform").innerHTML = device.platform; document.getElementById("platformVersion").innerHTML = device.version; document.getElementById("uuid").innerHTML } = device.uuid; /** Called when browser load this page*/ function init(){ document.addEventListener("deviceready", onDeviceReady, false); } Device Info Device Name PhoneGap Version Mobile Platform Platform Version UUID

Example s