งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

PhoneGap Mobile web Framework for JavaScript and HTML5.

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "PhoneGap Mobile web Framework for JavaScript and HTML5."— ใบสำเนางานนำเสนอ:

1 PhoneGap Mobile web Framework for JavaScript and HTML5

2 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

3 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)

4 Mobile Applications

5 Mobile feature != web application feature

6 Input method

7 Location Awareness Push Notification

8

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

10 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;

11 Multiple Teams/Products

12 Consistent User Experience

13 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

14 Development Environment Fragmentation xx

15

16 PhoneGap

17 Cross-Platform Mobile Application Browser Component As the Common Platform

18 Mobile Browsers cv

19 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

20 PhoneGap Architecture

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

22 Setting up an Environment on the Android ADT JRE PhoneGap API http://vimeo.com/album/2173109

23 ADT : Android Development Tools ติดตั้ง ADT โดยดาวน์โหลดได้จาก http://developer.android.com/sdk/index.html

24 PhoneGap API

25 Create AVD

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

27 Android SDK Manager

28 Emulator

29 Start Emulator

30 Create a New Android Project

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

32 Create new application

33

34

35 Project

36 Step 3 : Add PhoneGap Libraries to the Project Create www

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

38 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. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index.html") ; } }

39 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); }...

40 Deploy to Simulator c

41 HTML5 HyperText Markup Languages......

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

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

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

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

46 Jquery Jquery.com

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

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

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

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

51 ตัวอย่าง selector

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

53 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"); });

54 การอานคาแทกผานทาง 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"); });

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

56

57 Using PhoneGap with jQuery Mobile

58 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.

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

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

61

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

63

64 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.

65 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.

66 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.

67 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.

68 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 e-mails.

69 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

70 Example s


ดาวน์โหลด ppt PhoneGap Mobile web Framework for JavaScript and HTML5.

งานนำเสนอที่คล้ายกัน


Ads by Google