Mobile Application Development using cross-platform …arc.dru.ac.th/arc_th/seminar_downloadfile.php?files=file...UNDERSTANDING PHONEGAP/CORDOVA หลายๆ ท านอาจจะร

MOBILE APPLICATION DEVELOPMENT USING CROSS-PLATFORM FRAMEWORK

23 April 2015 @BSRU

ABOUT MEName:

Sivaphong Niyomphanich

Graduated:

Mobile Application Development (Grad. Dip.)

Computer Engineering (B.Eng)

Certificate:

ITPE (IP, FE, AP) – ITPE Ambassador

Comtia Security+

Contact:

All about IT: Server Network Programming Infrastructure Security, Mail to: [email protected] 2

AGENDA

Mobile technology information update & Overview

Introduction to cross-platform mobile development using PhoneGap/Cordova

HTML5/CSS/JavaScript

jQuery/jQuery Mobile

Viewport, Page, Theme, Button, Dialog, Transition, Navigation Bar, List, Collapsible, Popup, Panel, Table

Form, Event, Device Feature

Publish and Deployment testing on Android device (.apk)

Q&A

3

CROSS-PLATFORM MOBILE APPLICATION DEVELOPMENT – TECHNOLOGY UPDATE

Native Application การพฒนาแอพพลเคชนโดยใชภาษาของแตละระบบปฏบตการ เชน Objective-C/Swift ส าหรบ iOS หรอ Java ส าหรบ Android

Cross-Platform การพฒนาแอพพลเคชนโดยใชภาษาของแตละ framework และสามารถน าไปใชงานไดหลายๆระบบปฏบตการโดยการเขยนโปรแกรมเพยงครงเดยว

Responsive Web การทสามารถเขาใชงานเวบไซตผานเวบบราวเซอรโดยมการปรบขนาด และฟงกชนการท างานให

เหมาะสมกบอปกรณทมาหนาจอตางขนาดกนไดแบบอตโนมต (เปน web application ไมใช mobile application)

E.g. Bootstrap, Foundation 3, Skeleton, YAML 4

4

WHY CROSS-PLATFORM

http://www.statista.com/statistics/263445/global-smartphone-sales-by-operating-system-since-2009/5

WHY CROSS-PLATFORM

องคกรตางๆ มความสนใจ และเรมหนมาใช Smart phone ในการใหบรการ และเผยแพรขาวสารกนมากข น

6

MOBILE APPLICATION IS NOT WEB APPLICATION

Mobile Application ไมใช Web Application

ลกษณะของ Feature จงแตกตางกน

โดยสวนใหญ Mobile Application จะม Feature นอยกวา แตเจงกวา

การทอปกรณมอถอไมม Physical Keyboard จงตองเตรยมการท างานกบผใชทหลากหลายมากข น ซงแตกตางกบการใชงานคอมพวเตอร

7

WHY CROSS-PLATFORM

ความหลากหลายของระบบปฏบตการแตละอปกรณมอถอ ทมแนวโนมจะมมากขน

จ านวนทมพฒนาแอพพลเคชนบนระบบปฏบตการทตางกน

8

WHY CROSS-PLATFORM

การสราง และพฒนา UI/UX ทสอดคลองกนในแตละระบบปฏบตการ

ความแตกตางกนในลกษณะเฉพาะของแตละระบบปฏบตการ และอปกรณมอถอ

9

CURRENT CROSS-PLATFORM FRAMEWORK

Xamarin - http://xamarin.com/

Appcelerator - http://www.appcelerator.com/

Ifactr - http://ifactr.com/

Kony - http://www.kony.com/

AlphaSoftware - http://www.alphasoftware.com/

5app - http://5app.com/

Feedhenry - http://www.feedhenry.com/

Sencha - http://www.sencha.com/

*Qt - http://www.qt.io/10

http://xamarin.com/

http://www.appcelerator.com/

http://ifactr.com/

http://www.kony.com/

http://www.alphasoftware.com/

http://5app.com/

http://www.feedhenry.com/

http://www.sencha.com/

http://www.qt.io/

11

MOBILE APPLICATION DEVELOPMENT FACTOR

Requirement

Functional Design

User Interface Design (UI)

User Experience Design (UX)

System and Network Design/Planning/Administrating

Programmer

Tester

Marketing

12

INTRODUCTION TO PHONEGAP/CORDOVA

13

UNDERSTANDING PHONEGAP/CORDOVA

PhoneGap/Cordova คอ ระบบการพฒนาแอพพลเคชนบนอปกรณมอถอ โดยใชภาษาเวบเชน HTML, CSS และ JavaScript มาใชงานไดในหลายๆ ระบบปฎบตการ ซงสวนใหญจะเขยนโปรแกรมเพยงครงเดยว และสามารถน าไปใชงานไดทงหมด

PhoneGap เปนโครงการ Open Source ถกพฒนาข นโดยบรษท Nitobi หลงจากนนไดถกบรษท Adobe ซอไปเพอน าไปรวมกบโปรแกรม DreamWeaver

Cordova ถกพฒนาข นมาเนองจาก Nitobi และ Adobe ตองการให PhoneGap เปน Open Source ตอไป จงบรจาคซอรสโคดใหเพอท าการพฒนาเปน Cordova

สรปวาคอโปรแกรมทท างานเหมอนกนแตตางกนทกฎหมาย และวธการน าไปใชงาน 14

SUPPORTING PLATFORM

เขยนแลวน าไปใชงานไดบนระบบปฏบตการใดไดบาง

15

PHONEGAP/CORDOVA INFORMATION

PhoneGap/Cordova ใชประโยชนจากสงททกระบบปฏบตการมคอ

Browser Component

Mobile Application Webviews

Native Hook to Expose Device Capabilities

HTML5 CSS3 and JavaScript: The Standard for Writing Application

ใช HTML5, CSS และ JavaScript ในการพฒนาแอพพลเคชนบนอปกรณมอถอ

ท าใหผทพฒนาเวบอยแลวสามารถเรมด าเนนการพฒนาไดงาย และสามารถใชไดหลายระบบปฏบตการ

อกทงยงสามารถเรยกผสานการใชงานคณสมบตของอปกรณ (Device Feature) ไดอกดวย เชน Camera, GPS,

Storage, Vibration, Accelerometer and etc.

16


Image from - https://developer.salesforce.com17

PHONEGAP/CORDOVA ARCHITECTURE

https://html5hu.files.wordpress.com 18


Mobile Application ไมใช Web Application

การท างานและสวนตดตอผใชท างานอยบนอปกรณมอถอทงหมด ไมไดดงหนาเวบมาจากเครองเซรฟเวอร แตในบาง

กรณอาจจะมการดงขอมลมาจากเครองเซรฟเวอร แตไมไดดงหนาเวบทงหนามาทงหมด

ในทางเทคนคสามารถหนาเวบมาจากเครองเซรฟเวอรได แตไมควรท า

เมอสรางแอพพลเคชนเสรจแลว สามารถ build ข น Store ของแตระบบปฏบตการไดเลย เปรยบไดเปน Native อนหนง

19


หลายๆ ทานอาจจะรสกวาแอพพเคชนบนอปกรณมอถอทพฒนาดวยวธการแบบนแลวท างานชา หรอรสกหนวงๆ

จรงๆ แลว PhonfGap/Cordova ไมไดมสวนใดทกระทบตอประสทธภาพการท างานของอปกรณเลย แตสงทเกยวของกบประสทธภาพการท างานของอปกรณจรงๆ แลวมดงน

Webviews และรนของระบบปฏบตการของอปกรณนนๆ

Framework ของเวบทใชในการพฒนา

Optimisation ของการเขยนโปรแกรมของแตละทาน

หากจะสอบถามความรสกจากผใชงาน อาจจะไดรบค าตอบวา ตางกนนดเดยว

20

DEVICE FEATURE

21

BEFORE STARTING

Current application store statistic

http://www.appannie.com/apps/ios/top/thailand/?device=iphone

Online Mobile Application Development

http://www.appypie.com

http://www.como.com

Cross-Platform Mobile Application Development Comparison

http://www.developereconomics.com/pros-cons-top-5-cross-platform-tools

22

PHONEGAP/CORDOVA/ANDROID STUDIO INSTALLATION

โปรแกรมทตองใชงาน

Java SDK (Java Software Development Kit) -http://www.oracle.com/technetwork/java/javase/downloads/index.html

NPM (Node Package Management) - http://nodejs.org/download/

เพอใชในการตดตง PhoneGap/Cordova SDK

ตดตง PhoneGap และ Cordova

npm install –g phonegap

npm install –g cordova

23

http://www.oracle.com/technetwork/java/javase/downloads/index.html

https://nodejs.org/download/

PHONEGAP/CORDOVA/ANDROID STUDIO INSTALLATION

Ant - http://ant.apache.org/bindownload.cgi ตดตงท C:\apache-ant

Android Studio - http://developer.android.com/sdk/index.html SDK อยท C:\Users\USERNAME\AppData\Local\Android\sdk

Genymotion - http://www.genymotion.com เปน Android Emulator ทท างานไดรวดเรวกวาตวทมาพรอมกบ Android Studio มาก (ตองลงโปรแกรม VirtualBox กอน)

XAMPP - https://www.apachefriends.org/index.html ตดตงท C:\xampp

Brackets - http://brackets.io/ ใชเปน IDE ในการพฒนาแอพพลเคชน

24

http://ant.apache.org/bindownload.cgi

http://developer.android.com/sdk/index.html

https://www.genymotion.com/

https://www.apachefriends.org/index.html

http://brackets.io/

PATH VARIABLE SETTING

ท าความเขาใจ Android Studio structure and path

Android IDE คอ สวนของโปรแกรมในชด Android Studio เปนสวนหนาหลกทใชส าหรบเขยนโปรแกรม

โปรแกรมอยท C:\Program Files\Android\Android Studio

Android SDK คอ สวนของโปรแกรมในชด Android Studio ทใชส าหรบจดการท างานเบองหลงตางๆ

โปรแกรมอยท C:\Users\pongier\AppData\Local\Android\sdk

ท าการก าหนดคาตวแปรระบบ PATH ส าหรบ Android SDK และ Ant

setx ANDROID_HOME "C:\Users\USERNAME\AppData\Local\Android\sdk"

setx path "%path%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-

tools;C:\apache-ant\bin"

25

PATH VARIABLE SETTING

เมอส าเรจจะข นค าวา

SUCCESS: Specified value was saved.

26

REQUIRED PACKAGE SETTING

เปดโปรแกรม SDK Manager

คลกเครองหมายถกท Android 4.4.2 (API 19)

1

2

3

4

27

1

2

3

28

PHONEGAP/CORDOVA/ANDROID STUDIO VERIFICATION

ปด Terminal เดม และเปดข นมาใหม เพอท าการทดสอบการท างานวาถกตองหรอไม

phonegap -version

cordova –version

ant -version

29

PHONEGAP/CORDOVA/ANDROID STUDIO VERIFICATION

ant -version

Copy tools.jar from jdk location to expected location

30

FIRST PROJECT - HELLOWORLD

ท Terminal เขาไปท Desktop

C:\Users\pongier>cd Desktop

และสรางไดเรคทอรชอ myapp1 หรอชออนๆ ตามตองการ

C:\Users\pongier\Desktop>md myapp1

31

CREATE APP

ใชค าสง phonegap เพอเตรยมโครงสรางของแอพพลเคชน โดยมรายละเอยดดงน

phonegap create myapp1 th.ac.bsru.hello HelloWorld

DirectoryName AppID AppDisplayName

32

33

ADD PLATFORM

จากนนใชค าสง phonegap เพอเพมโครงสรางแอพพลเคชนทใชงานส าหรบ Android

C:\Users\pongier\Desktop> cd myapp1

C:\Users\pongier\Desktop\myapp1> phonegap platform add android

34

35

BUILD APP

และใชค าสง phonegap เพอสรางแอพพลเคชนเพอน าเขาส Android Studio ในขนตอนตอไป

C:\Users\pongier\Desktop\myapp1> phonegap build android

36

IMPORT TO ANDROID STUDIO

เปดโปรแกรม Android Studio1

2

3

เลอกไดเรคทอรทไดสรางไว

37

IMPORT TO ANDROID STUDIO

38

คลกทน

39

1

2

3

4

แกไขเปน gradle-1.10-all.zip

40

คลกทน 1

2

3

4

41

คลกทน

เมอด าเนนการเรยบรอย จะพบขอผดพลาดอกสวนหนง

42

เปดทงสองไฟล

- ภายใต Project

- ภายใด CordovaLib

แกไขทงสองไฟลเปน 19.1.0

3

1

2

43

โครงสรางของโปรเจคจะเปลยนแปลงโดยอตโนมต

44

แกไขเปน 10

3

เปดไฟล AndroidManifest.xml

ภายใต android -> manifests

2

1

45

แกไขไฟล index.html

1

ทดลองใสชอตวเอง

รนแอพพลเคชน

2

3

4

46

RUNNING THE FIRST APPLICATION -HELLOWORLD

47

PREPARE FOR CODINGท าความเขาใจกบไดเรกทอรทเปนสวนของการสรางและแกไขแอพพลเคชนของ PhoneGap/Cordova

C:\Users\pongier\Desktop\myapp1\www C:\Users\pongier\Desktop\myapp1\platforms\android\assets\www

เมอรนค าสง phonegap build android

ไฟลตางๆ จากดานซาย จะถกคดลอกไปแทนทไฟลดานขวาทงหมด

แกไขไฟล

ทนเทานน

48

PREPARING WEB LANGUAGE DEVELOPMENT

ส าหรบการพฒนาแอพพลเคชนในรปแบบนจะนยมการพฒนาดวยรปแบบภาษาเวบใหเสรจสนกอน แลวจงจะโปรแกรมไป

เปนรปแบบของระบบปฏบตการนนๆ

โปรแกรมทตองใชงาน

XAMPP - https://www.apachefriends.org/index.html ใชในการจ าลองเปนเวบเซรฟเวอรบนเครองคอมพวเตอร (Apache+MySQL+PHP+Perl)

ตดตงท C:\xampp

Brackets - http://brackets.io/ ใชเปน IDE ในการพฒนาแอพพลเคชน

Chrome - http://www.google.com/chrome/

ใชเปนบราวเซอรเพอทดสอบการแสดงผล หรอดบกการท างาน49

https://www.apachefriends.org/index.html

http://brackets.io/

http://www.google.com/chrome/

UNDERSTANDING WEB SERVER DOCUMENT ROOT

โปรแกรม XAMPP ซงใชงานเปนเวบเซรฟเวอรไดถกตดตงท C:\xampp ซงมรายละเอยดไฟลและไดเรกทอรทส าคญ

ดงน

C:\xampp\xampp-control.exe เปนไฟลโปรแกรมควบคมการท างานของเซอรวสตางๆ ใน XAMPP

C:\xampp\htdocs เปนไดเรกทอรทใชเกบไฟลเวบทเราพฒนาขน

โดย XAMPP จะเรยกใชงานไฟลเวบจากทน

50

UNDERSTANDING WEB SERVER DOCUMENT ROOT

ท าการสรางไดเรกทอรชอ app1 ใน C:\xampp\htdocs

และสรางไฟลชอ test1.html โดยใหมขอมลนอยในไฟลดงกลาว

<html>

<head>

<title>My Test</title>

</head>

<body>

Hello, my test.

</body>

</html>

51

TEST TO BROWSING

ท าสอบใชงานผานบราวเซอร chrome โดยพมพ URL เปน

http://localhost/app1/test.html

โปรโตคอล

http คอเวบ

เครองเซรฟเวอร

Localhost คอ เครองตวมนเอง

ไดเรกทอร

ชอ app1 ทสรางข นขางตน

ไฟล

ชอ test.html ทสรางข นขางตน

52

CHROME IS MORE YOU TOUCH BEFORE

ไปท ไอคอนเมน -> More tools -> Developer tools

53

BRACKET IS YOUR IDE

เปดโปรแกรม Brackets

ไปท File -> Open Folder

เลอกไดเรกทอร C:\xampp\htdocs\app1

54

JQUERY MOBILE IS YOUR PARTNER

jQuery Mobile คอ framework ทท าใหสามารถสรางสวนตดตอผใชงาน (UI: User Interface) ใหมความสามารถและท างานไดเหมอน Mobile Application ดวยภาษา HTML, CSS, JavaScript

ท าใหสามารถพฒนาแอพพลเคชนบนอปกรณมอถอรองรบทงอปกรณสมารทโฟน และแทบเลท ทงชนดและขนาดตางๆ ได

อยางด และปจจบนเปนทยอมรบในหมนกพฒนา และสามารถหาขอมลไดงาย

jQuery Mobile มหลกการท างานคอการจดการ UI โดยการใชความสามารถของ CSS และ JavaScript ซงสามารถน าไปประยกตใชงานรวมกบภาษาอนๆ ได เชน PHP, JSP, ASP

55

JQUERY V.S. JQUERY MOBILE

jQuery เปนการออกแบบเพอชวยใหนกพฒนาสามารถเขยนโปรแกม JavaScript ไดงายข น โดยใชการเรยกไลบราร (Library) ของ jQuery ส าหรบการเขยนโปรแกรม

jQuery Mobile เปนปลกอน (Plugin) ของ jQuery ทเพมความสามารถของ jQuery โดยเนนความสามารถในการพฒนาส าหรบการท างานบนอปกรณมอถอ

ดงนน jQuery Mobile จงตองอาศย jQuery ในการท างาน

56

JQUERY MOBILE COMPATIBILITY

ระบบปฏบตการ

iOS

Android

BlackBerry

Windows Phone

Palm WebOS

Symbian

MeeGo

Obada

บราวเซอร

Safari

Firefox

Google Chrome

Firefox Mobile

Opera Mini

Opera Desktop

Internet Explorer

http://jquerymobile.com/gbs

57

LET’S START

ความรพ นฐานทตองการ

HTML

CSS

JavaScript

jQuery

ดาวนโหลด jQuery Mobile

http://jquerymobile.com/download/

เวอรชนปจจบน ณ วนทอบรมคอ 1.4.5 (work with jQuery 1.8-1.11/2.1)

ดาวนโหลด jQuery

http://jquery.com/download/

เวอรชนปจจบน ณ วนทอบรมคอ 2.1.3

58



JQUERY MOBILE FILES STRUCTURE

ท าการแยกไฟล jquery.mobile-1.4.5.zip

จะไดไฟลดงภาพ

ซงไฟลทตองน ามาใชงานคอ

ไดเรกทอรชอ “images”

ไฟลชอ jquery.mobile-1.4.5.min.css

ไฟลชอ jquery.mobile-1.4.5.min.js

และไฟลชอ jquery-2.1.3.min.js

59

SETTING UP TO WORKSPACE

น าไฟลและไดเรกทอรไปวางไวท

C:\xampp\htdocs\app1

60

FIRST APPLICATION

แกไขไฟล test.html ใหมขอมลดงน

<!DOCTYPE html>

<html>

<head>

<title>Test</title>

<link rel="stylesheet" href="jquery.mobile-

1.4.5.min.css" />

<script src="jquery-2.1.3.min.js"></script>

<script src="jquery.mobile-1.4.5.min.js"></script>

</head>

<body>

<div data-role="page" id="page1">

<div data-role="header">

<h1>Header</h1>

</div>

<div data-role="content">

hello world!!!!

</div>

<div data-role="footer">

<h4>Footer</h4>

</div>

</div>

</body>

</html>61

ท าสอบใชงานผาน

บราวเซอร chrome

อกครง

62

HTML5

63

HTML5 BRIEFING

ในไฟล HTML 1 ไฟล จะประกอบดวยแทก <> 3 สวนหลกๆ เปนโครงสรางพ นฐาน

ทตองมในแตละไฟล ไดแก

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

</head>

<body>

The content of the document......

</body>

</html>

64

HTML5 BRIEFING

<html>…</html> เปนแทกแรกทตองม โดยจะอยทจดเรมตนของเอกสารและทายเอกสารในแตละแฟม

<head>…</head> เปนสวนก าหนดรายละเอยดหวเอกสาร HTML

ก าหนดชอเวบเพจ โดยใชแทก <title>…</title> ความยาวไมเกน 64 ตวอกษร

ก าหนดรปแบบของขอความและเลเอาตในหนาเวบเพจ เรยกวา สไตลชต (CSS)

การแทรกหรอใสสครปตโปรแกรม เชน JavaScript

<body>…</body> เปนสวนของเนอหาเวบเพจ

65

HTML5 BRIEFING

viewport การแกไขปญหาตวอกษรเลก

สาเหตทอปกรณจ าลองแสดงผลเปนตวอกษรเลกมาก

เมออปกรณจ าลองแสดงผลจากไฟล HTML ยกตวอยางเชน Safari ซง iPhone มขนาดหนาจอ 320 พกเซล แต Safari ก าหนดคาไว 980

พกเซล จงท าใหขนาดความกวางไมเทากน ท าใหการแสดงผลตวอกษรเลกกวาปกต

แกไขโดยการเพมแทก <meta name="viewport"> เพอบอกใหมการค านวณหาคาความกวางของหนาจอกอน

<head>

<meta name="viewport" content="width=device-width">

</head>

66

HTML5 BRIEFING

67

HTML5 BRIEFING

สามารถใชแทก <meta> และเพมแอตทรบวต initail-scale=1 หรอ 2 (ตวเลขมากคอซมออก) เพอก าหนดขนาด

ของการเรมตนแสดงผลได

ศกษา HTML5 เพมเตมไดจาก

http://www.w3schools.com/html/html5_intro.asp

<head>

<meta name="viewport" content="width=device-width,initail-scale=2">

</head>

68

http://www.w3schools.com/html/html5_intro.asp

HTML5 BRIEFING

การแสดงผลโดยทวไป จะเปนไปตามค าสงทอยในสวนของแทก <body>…</body> คอ 1 ไฟลจะม 1 หนาจอภาพ

(page)

แตในภาษา HTML5 ไดมการเพม "custom data attribute" ข นมา ซงสามารถใชเพมความสามารถ หรอเกบคาขอมลทตองการได

ใชเกบขอมลทผพฒนาตองการสรางข นเอง

สามารถใชไดกบทกแทก

หลกเกณฑการตงชอ คอ ตองขนตนดวย "data-" แลวตามดวยตวอกษรหรอค าทเราตองการ

เชน แทก <div data-myname=“pongier">

69

HTML5 BRIEFING

ดงนน jQuery Mobile จะตองน าเอาแอตทรบวตนมาใชงาน โดยการตงชอและก าหนดคาตามขอก าหนดของ

Framework

http://demos.jquerymobile.com/1.4.5/

Page เปนการท าใหภายในไฟลเวบเพจ (ไฟล HTML) 1 ไฟล สามารถบรรจ “page” ไดหลายอน

โดยทกๆ page อยภายใตแทก <body> ของไฟล

การแสดงผล “page” จะแสดงผลทละ page เทานน

หากไมมการก าหนดวา page ใดเปนอนแรกในการเรมแสดงผล ระบบจะน าเอา page ทพบแรกสดมาแสดง

โดยการสราง page จะใชแทก <div> และใช custom data attribute เปน data-role=“page”

พรอมทงใหก าหนด “id” ใหกบ “page” นนๆ ดวย

<div data-role="page" id="page-1"> </div> 70

http://demos.jquerymobile.com/1.4.5/

PAGE

71

PAGE DETAIL

โครงสรางภายใน Page แบงเปน 3 สวน คอ

สวน Header

สวน Container

สวน Footer

72

0-PAGE/PAGE1.HTML<body>


<div data-role="header"><h1>เฮดเดอรหนาแรก</h1></div><div data-role="content"> หนาแรก <br /> <a

href="#page2">ไปทหนาสอง</a></div><div data-role="footer"><h4>ฟตเตอรหนาแรก</h4></div>

</div>


<div data-role="header"><h1>เฮดเดอรหนาสอง</h1></div><div data-role="content"> หนาสอง <br /> <a

href="#page1">ไปทหนาแรก</a></div><div data-role="footer"><h4>ฟตเตอรหนาสอง</h4></div>

</div>

</body> 73

O-PAGE/PAGE21.HTML

ตวอยางการสลบเพจทอยคนละไฟล

<body>


<div data-role="header"><h1>เฮดเดอรหนาแรก</h1></div><div data-role="content"> หนาแรก <br /> <a

href="page22.html">ไปทไฟลหนาสอง</a></div><div data-role="footer"><h4>ฟตเตอรหนาแรก</h4></div>

</div>

</body>

74

CSS & THEME

75

THEME: 1-THEME/THEME1.HTML

การปรบเปลยน Theme และการปรบแตงรายละเอยดในการแสดงผล (Customise)

สามารถท าการเปลยน theme หรอเปลยนสพ นได ซงโดย jQuery Mobile ไดเตรยมรายการสไว 5 ส ดงน

a - สด า

b - สน าเงน

c - สเงนออน

d - สเงนเขม

e - สเหลอง

โดยท าการเพมแอตทรบวต data-theme = "e" ลงใน <div> ของสวนทตองการ

http://demos.jquerymobile.com/1.4.5/theme-classic/76

http://demos.jquerymobile.com/1.4.5/theme-classic/

CSS CUSTOMIZATION: 1-THEME/FIXED.HTML

การจดต าแหนง Header และ Footer

หากดวยท าใหต าแหนงของ header อยดานบนเสมอ และ footer อยดานลางเสมอ แมกระทงท าการเลอนขอความข นลงกตาม สามารถด าเนนการไดโดยการเพมแอตทรบวต data-position="fixed" ลงในแทก <div>

<div data-role="header" data-position="fixed">

<h1>เฮดเดอร</h1></div>

<div data-role="footer" data-position="fixed">

<h4>ฟตเตอร</h4></div>

77

CSS CUSTOMISATION: 1-THEME/OVERRIDE.HTML

การ override สไตลชต CSS

เราสามารถท าการปรบแตงเพมเตมการแสดงผลไดโดยใช CSS แทรกลงไปในโคดได ยกตวอยางเชนการเปลยนขนาดตวอกษร

ส าหรบ header ก าหนดท .ui-header .ui-title

ส าหรบ footer ก าหนดท .ui-footer .ui-title

ส าหรบ footer ก าหนดท .ui-content

http://www.w3schools.com/css/css3_intro.asp

<head>

<style type="text/css">

.ui-header .ui-title{ font-size: 22px; }

.ui-footer .ui-title{ font-size: 22px; }

.ui-content{

font-size: 18px;

}

</style>

</head>

78

http://www.w3schools.com/css/css3_intro.asp

CSS CUSTOMISATION

การ override สไตลชต CSS ทใชงานบอยๆ คอ การแกปญหาในเรองการแสดงวรรณยกตทม 4 ระดบ ทมการซอนทบ

กน ในภาษาไทยบนอปกรณพกพาของระบบปฏบตการ Android โดยการเพมความสงของบรรทดใหสงข น เพอใหวรรณยกตไมซอนทบกน

โดยก าหนด line-height:2; ท CSS ทตองการ

<head>

<style type="text/css">

.ui-header .ui-title .ui-footer .ui-title {

line-height:2;

}

</style>

</head>

79

80

BUTTON

81

BUTTON: 2-BUTTON/BUTTON1.HTML

การสรางปมท Header

การสรางปมท Container

การสรางปมท Footer

การปรบแตงปม

ส าหรบ Header ท าการสรางปมโดยการเพมแทก <a> เขาไป กจะเปนการสรางปมโดยอตโนมต

จะเหนวามแทก <a> อย 2 แทก

ลงกแรกจะถกแปลงเปนปมและถกจดวางไวดานซาย

สวนลงกทสองจะถกแปลงเปนปมและวางไวดานขวาโดยอตโนมต

<div data-role="header">

<a> ลงก1 </a><a> ลงก2 </a><h1> เฮดเดอร </h1>

</div> 82


ส าหรบ Footer ท าการสรางปมโดยการเพมแทก <a> เขาไป

กจะเปนการสรางปมโดยอตโนมต เชนเดยวกบ Header

แตปมจะเรยงจากซายไปขวา

<div data-role="footer">

<a> ลงก3 </a><a> ลงก4 </a>ฟตเตอร

</div>

83


ส าหรบ Container นน การสรางแทก <a> จะไมเปนการสรางปมโดยอตโนมต

จะตองเพมแอตทรบวต data-role="button" ลงไปในแทก <a> ดวย


<a data-role="button"> ลงกx </a>

<a data-role="button"> ลงกy </a>

คอนเทนเนอร</div>

84

BUTTONการปรบแตงปม

สามารถปรบแตงปมใหมไอคอนตางๆ โดยการเพมแอตทรบวต data-icon ลงไปในแทก <a> ของปมนนๆ

<a data-role="button" data-icon="home">home</a>

85

BUTTON

การปรบแตงปมอนๆ

ปมขาวด า

<a data-role="button" data-icon="arrow-l" class="ui-alt-icon">arrow-l*</a>

ปมไมมวงกลมดานหลง

<a data-role="button" data-icon="arrow-r" class="ui-nodisc-icon">arrow-r*</a>

ปมแบบทไมมขอความ

<a data-role="button" data-icon="plus" data-iconpos="notext">no text</a>

ไอคอนของปมมขนาดเลก

<a data-role="button" data-icon="plus" data-mini="true" >mini icon</a>

86

BUTTON

ไอคอนของปมอยดานขวา

<a data-role="button" data-icon="plus" data-iconpos="right">right plus</a>

ไอคอนของปมอยดานบน

<a data-role="button" data-icon="plus" data-iconpos="top">top plus</a>

ไอคอนของปมอยดานลาง

<a data-role="button" data-icon="plus" data-iconpos="bottom">bottom plus</a>

87


88

BACK BUTTON: 2-BUTTON/BUTTON4.HTML

ปม "Back" เปนปมทใชส าหรบกลบไปยงหนากอนหนา โดยก าหนดแอตทรบวต data-rel="back" ไวทแทก <a> โดยสามารถก าหนดไดทงท Header, Container และ Footer


<a data-role="button" data-rel="back" data-icon="back"> กลบ </a>

คอนเทนเนอร 2</div>

89

BUTTON

การก าหนดปมแบบ inline

โดยปกตปมจะมความกวางเตมพ นทของหนาจอ แตสามารถท าใหปมมความกวางเทาทตองการไดโดย ก าหนดแอตทรบวต data-inline="true" ลงไปในแทก <a>

การก าหนดปมท active

การแสดงใหเหนวา "active" ใหก าหนดแอตทรบวส class="ui-btn-active ui-state-persist" ใหกบแทก <a>

<a data-role="button" data-inline="true">one</a>

<a data-role="button" data-inline="true">two</a>

<a data-role="button" data-inline="true">three</a>

<a data-role="button" data-inline="true">four</a>

90

BUTTON

การจดกลมของปม

โดยปกตปมแตละปมจะอยแยกจากกน แตเราสามารถก าหนดใหปมมาอยรวมกนโดยเพมแอตทรบวต data-role="controlgroup" ในแทก<div> ทครอบปมทตองการใหจดเปนกลมรวมซงจะจดกลมในแนวตง

และหากตองจดกลมในแนวนอน ใหเพมแอตทรบวต data-type="horizontal" เขาไปในแทก <div> นนดวย

<div data-role="controlgroup">

<a data-role="button">หนง</a><a data-role="button">สอง</a><a data-role="button">สาม</a>

</div>

<div data-role="controlgroup" data-type="horizontal">

<a data-role="button">I</a>

<a data-role="button">II</a>

<a data-role="button">III</a>

</div> 91

BUTTON

การก าหนดการท างานของปมกบฟอรม

โดยปกตปมในแบบฟอรมของ HTML จะใชแทก <input> ทมแอตทรบวต type เปน button, submit, reset และ image

ซง jQuery Mobile ไมจ าเปนตองระบแอตทรบวต data-role = "button" เพราะถอวาเปนปมเองอยแลว

<input type="submit" value="ป ม submit"/>

<input type="reset" value="ป ม reset"/>

<input type="button" value="input type=button"/>

<button>tag button</button>

92

2-BUTTON/BUTTON5.HTML

93

DIALOG

94

DIALOG: 3-DIALOG/DIALOG1.HTML

แอตทรบวต

data-rel="dialog"

<body>


<div data-role="header"><h1>เฮดเดอร</h1></div><div data-role="content">หนาแรก<br>

<a href="#page_dialog" data-rel="dialog">แสดง dialog</a>

</div>

<div data-role="footer"><h4>ฟตเตอร</h4></div></div>

<div data-role="page" id="page_dialog">

<div data-role="header"><h1>Dialog</h1></div>

<div data-role="content">นคอ Dialog</div>

</div>

</body>95

DIALOG: 3-DIALOG/DIALOG2.HTML

สามารถท าการปรบแตงปมปดของ Dialog ได โดยก าหนดทแอตทรบวต data-close-btn ลงในแทก <div> ของ

dialog ยกตวอยางเชน

ตองการใหปมปดไปอยดานขวา จะก าหนดแอตทรบวต คอ data-close-btn="right"

ตองการใหไมมปมปด จะก าหนดแอตทรบวต คอ data-close-btn="none"

<div data-role="page" id="page_dialog" data-close-btn="right">

<div data-role="header"><h1>Dialog</h1></div>

<div data-role="content">นคอ Dialog</div>

</div>

96

TRANSITION

97

TRANSITION: 4-TRANSITION/TRANS1.HTMLTransition คอการก าหนดรปแบบในการเปลยนจากหนาหนงไปยงอกหนาหนง

โดยการก าหนดคณสมบตใหกบแอตทรบวต data-trasition ในแทก <a> ดงน

<a href="#nextpage" data-transition="slide">slide</a>

รปแบบ รายละเอยด

fade เปลยนคาแบบปกต (Default)

pop หนาใหมมาแบบการเปด popup/dialog

flip หนาเกาหมนออกหนาใหมหมนมาแทนท

turn เปดหนาจอใหมแบบเปดหนงสอ

flow หนาเกายอลงดานซายหนาใหมขยายมาแทนดานขวา

slide หนาเกาเลอนออกไปดานซายหนาใหมมาแทนทดานขวา

slidefade หนาเกาเลอนออกไปดานซายหนาใหมมาแทนทดานขวาแบบชาๆ

slideup หนาเกาเลอนออกไปดานบนหนาใหมมาแทนท

slidedown หนาเกาเลอนออกไปดานลางหนาใหมมาแทนท98

NAVIGATION BAR

99

NAVIGATION BAR: 5-NAVBAR/NAVBAR1.HTMLNavigation Bar หรอ Tab Bar

โดยใชแทก <ul> ชวยในการสรางซงจะระบแทก <div> ทมแอตทรบวต data-role="navbar“

และก าหนดแอตทรบวต class="ui-btn-active ui-state-persist" เพอใหแทปนนมลกษณะ active

ซงสามารถก าหนดไดทงใน Header และ Footer

<div data-role="navbar">

<ul>

<li>

<a href="#" class="ui-btn-active ui-state-persist">หนง</a></li>

<li>

<a href="#page2">สอง</a></li>

<li>

<a href="#page3">สาม</a></li>

</ul>

</div> 100

NAVIGATION BAR: 5-NAVBAR/NAVBAR2.HTML

จะสงเกตไดวาแทปนนมการแสดงผล transition เมอมการเปลยนหนา (animate) แตโดยปกตส าหรบแอพพลเคชนบนอปกรณบนมอถอนนสวนของแทปจะตองคงท

ดงนนจงควรก าหนดใหในสวนของแทปไมไดท าการแสดงผลเมอมการเปลยนหนา

ก าหนดแอตทรบวต data-id ใหกบ footer และก าหนดใหมคาเหมอนกนในทกๆ page

ก าหนดแอตทรบวต data-position= "fixed" ใหกบ footer ของทกๆ page

<div data-role="footer" data-position="fixed" data-id="mynav">

101

102

LIST

103

LIST – CONTAINER: 6-LIST/LIST1.HTML

List หรอ ลสต

ก าหนดทแทก <ul> หรอ <ol> โดยใชแอตทรบวต data-role="listview"

<ul data-role="listview">

<li>รายการท 1</li><li>รายการท 2</li><li>รายการท 3</li>

</ul>

<ol data-role="listview">

<li>Order 1</li>

<li>Order 2</li>

<li>Order 3</li>

</ol>104

LIST: 6-LIST/LIST2.HTML

หากตองการท าให list นนเชอมโยงไปทอนได สามารถท าไดโดยการแทรกแทก <a> ลงไปในแตละรายการ

และสามารถแยก list เปนสองสวน เพอท าการเชอมโยงไปยงททตางกน โดยการแทรกแทก <a> ลงไปในแตละรายการ 2 อน

<li><a href="#page2">รายการท 1</a></li>

<li><a href="#page2">รายการท 1</a><a href="#page3">Order 1</a></li>

105

106


การจดกลมลสตรายการ โดยใช "ตวแบง" โดยการก าหนดแอตทรบวต data-role="list-divider" ทแทก <li>


<li data-role="list-divider">ภาษาไทย</li><li>รายการท 1</li><li>รายการท 2</li><li>รายการท 3</li>

<li data-role="list-divider">Englist</li>

<li>Order 1</li>

<li>Order 2</li>

<li>Order 3</li>

</ul>

107


อกทงยงสามารถแสดงจ านวนรายการโดยใชตวบอกจ านวน ทมสญลกษณทมลกษณะคลายฟองอากาศ และมตวเลขภายใน

หรอ (Count bubble)

โดยการใชแทก <span class="ui-li-count"></span> ครอบขอมลเอาไว

<li data-role="list-divider">ภาษาไทย<span class="ui-li-count">3</span></li>

108


เราสามารถเพมรปภาพ และไอคอนจากไฟลรปภาพเขาไปในลสตได

ในกรณทตองการเพมไอคอนไวหนาลสต สามารถใชแทก <img> เขาไปอยภายใตแทก <li> ได พรอมทงก าหนดแอตทรบวต class="ui-li-icon"

ในกรณทตองการเพมรปภาพไวหนาลสต สามารถใชแทก <img> เขาไปอยภายใตแทก <li> แตไมตองก าหนดแอตทรบวต class="ui-li-icon" เหมอนอยางไอคอน โดยภาพทแสดงจะถกปรบเปนขนาด 80 พกเซลอตโนมต

<li><a href="#page2"><img class="ui-li-icon" src="icon1.png"/>รายการท 1</a></li>

<li><a href="#page2"><img src="img1.jpg"/>รายการท 3</a></li>

109

110


การกรองขอมลในลสต (Filter)

การกรองขอมลท าไดโดยก าหนดแอตทรบวต data-filter="true" ไวทแทก <ul>

ซงขอความเรมตนในชอง filter จะเปนค าวา "Filter items..." โดยสามารถเปลยนเปนค าอนไดดวยเพมแอตทรบวตdata-filter-placeholder="คนหา"

หากตองการใหท างานแบบ auto-complete คอ ในครงแรกรายการทงหมดจะถกซอนไว เมอพมพขอความลงในชองคนหา จงจะแสดขอมลลง ท าไดดวยเพมแอตทรบวต data-filter-reveal="true"

111



<ul data-role="listview" data-filter="true" data-

filter-placeholder="คนหา" data-filter-reveal="true"><li>รายการท 1</li><li>รายการท 2</li><li>รายการท 3</li><li>Order 1</li>

<li>Order 2</li>

<li>Order 3</li>

</ul>

</div>

112

LIST: 6-LIST/LIST6.HTMLการ ซอน/แสดง รายการลสต (Hide/Show)

ในการท าการซอน/แสดง รายการลสต สามารถก าหนดแอตทรบวต data-role="collapsible" โดยใชแทก <div> ครอบลสตรายการทตองการ

<div data-role="collapsible"><h3>ภาษาไทย</h3><ul data-role="listview">


</ul>

</div>

<div data-role="collapsible"><h3>English</h3>


<li>Order 1</li>

<li>Order 2</li>

<li>Order 3</li>

</ul>

</div> 113

LIST: 6-LIST/LIST7.HTMLหากตองการใหเปดกลมหนงแลวใหปดอกกลมหนง เพอลสตรายการจะไดไมยาวไปเรอยๆ สามารถก าหนดแอตทรบวต

data-role="collapsible-set" ทแทก <div> และน ามาครอมลสตทตองการใหเปดใชงานเปนกลมๆ นน

<div data-role="collapsible-set">

<div data-role="collapsible"><h3>ภาษาไทย</h3><ul data-role="listview">


</ul>

</div>

<div data-role="collapsible"><h3>English</h3>


<li>Order 1</li>

<li>Order 2</li>

<li>Order 3</li>

</ul>

</div>

</div> 114

LIST CUSTOMISATION: 6-LIST/LIST8.HTML

การตกแตงรายการลสตอนๆ

<ul data-role="listview" data-inset="true"> คอ การท าใหลสตไมแสดงเตมพ นท

โดยมการเวนระยะหางจากขอบจอเลกนอย และมเสนโคงมน

<h1>, <p>, <span class="ui-li-aside"> คอการจดขอความในลสต เปน 2 บรรทด


<li>

<h1>รายการท 1</h1><p>ขอความ 1</p>

<span class="ui-li-aside">รายละเอยด 1</span>

</li>

<li>

<h1>รายการท 2</h1><p>ขอความ 2</p>

</li>

</ul> 115

LAYOUT WITH GRID

116

LAYOUT WITH GRID: 7-GRID/GRID1.HTML

Grid เปนการจดวางเลยเอาตดวยเสนกรด สามารถน ามาใชแบงเปนคอลมภ หรอแถวเพอใหสามารถจดวางขอมลลงใน

พ นทตามตองการ

การสรางกรดจะใชแทก <div> โดยก าหนด class ดงน

แบบ 2 คอลมภ ก าหนด class="ui-grid-a"

แบบ 3 คอลมภ ก าหนด class="ui-grid-b"

แบบ 4 คอลมภ ก าหนด class="ui-grid-c"

แบบ 5 คอลมภ ก าหนด class="ui-grid-d"

การสรางบลอกในกรด จะใช class="ui-block-x"

<div class="ui-grid-b">

<div class="ui-block-a"> Block 1-1 </div>

<div class="ui-block-b"> Block 1-2 </div>

<div class="ui-block-c"> Block 1-3 </div>

</div> 117





</div>





</div>

118

COLLAPSIBLE

119

COLLAPSIBLE

สามารถท าการซอน/แสดง ขอมลหรอเนอหาได โดยการใชแทก <div data-role="collapsible"> คลมสวนของเนอหาทตองการไว ซงมรายละเอยดคอ

หวขอของปม ใสอยภายใตแทก <h3>

ขอความทตองการจะซอนไว ใหวางไวหลงแทก <h3>

โดยปกตเมอโหลดเนอหาแลว ขอมลหรอเนอหานนจะถกซอนไวกอน แตถาหากตองการแสดงเนอหานนกอน สามารถท าได

โดยการก าหนดแอตทรบวต data-collapsed="false"

120

COLLAPSIBLE: 8-COLLAP/COLLAP1.HTML

<div data-role="collapsible">

<h3>Touch for Show/Hide</h3>

Message 1

</div>

<div data-role="collapsible" data-collapsed="false">

<h3>Touch for Hide/Show</h3>

Mesage 2

</div>

121

COLLAPSIBLE: 8-COLLAP/COLLAP2.HTML

การท าปมซอนปม ท าไดโดยวางปมหรอลสตทตองการซอนไวภายในปม โดยวางไวภายใตแทก <h3>

การจดกลมใหปม ท าไดโดยก าหนด <div data-role="collapsible-set"> คลมในสวนทตองการ ซงมผลท าใหใหปมอยตดกน และหากเปดขอมลปมใดออกมา ปมอนๆทแสดงขอมลอยท าการซอนอตโนมต


122


<h3>ระดบท 1</h3><div data-role="collapsible">

<h3>ระดบท 2</h3>รายละเอยด<ul data-role="listview" data-inset="true">


</ul>

</div>

</div>



<h3>ป ม 1</h3> ขอความ 1</div>







</div>123

COLLAPSIBLE CUSTOMISATIONการจดต าแหนงไอคอนของปม

data-iconpos="top"

data-iconpos="right"

data-iconpos="bottom"

การก าหนดธมของปม

data-theme="e“

การก าหนดธมของเนอหา

data-content-theme="e"

การก าหนดใหปมมขนาดเลก

data-mini="true"

124

POPUP

125

POPUP

Popup คอหนาตางแสดงขอมลโดยจะแสงดอยภายในพ นทของหนานนๆ

ส าหรบการสราง Popup แบบทลทปเทกซ ท าโดยก าหนดแอตทรบวต data-role="popup" ใหกบแทก <div> และตองก าหนด id เพอใชในการเรยกใชงาน

ส าหรบการเรยกใชงาน Popup จะตองท าการก าหนดแอตทรบวต data-rel="popup" ใหกบแทกทเรยกใชงาน

<a href="#popupid" data-rel="popup">Show Popup</a>

<div data-role="popup" id="popupid">

This is a popup

</div>

126

POPUP: 9-POPUP/POPUP1.HTML

Tooltips popup

Menu popup

Form popup

Dialog like popup

Image popup

Popup with close button

127

POPUP CUSTOMISATION : 9-POPUP/POPUP2.HTML

การก าหนดต าแหนงทแสดง Popup โดยการก าหนดแอตทรบวต data-position-to ดงน

Origin คอ อยตรงกลางของแทกทถกสมผสเพอเปด pop up

Window คอ อยตรงกลางหนาจอของอปกรณ

Id name คอ อยตรงกลางของแทกทระบ id

<a href="#mypopup" data-rel="popup" data-position-to="origin">Show Popup</a>

<a href="#mypopup" data-rel="popup" data-position-to="window">Show Popup</a>

<a href="#mypopup" data-rel="popup" data-position-to="#yourid">Show Popup</a>

128

POPUP CUSTOMISATION : 9-POPUP/POPUP3.HTMLสามารถก าหนดให Popup แสดง animate ไดโดยการก าหนดแอตทรบวต data-transition ซงจะมการก าหนดทแทกทเรยกใชงาน popup นนๆ โดยมรายละเอยดดงน


fade แสดงแบบจางๆ แลวคอยๆ เขมข น

pop แสดงจากเลกไปใหญ

flip แสดงแบบคอยๆ ขยายไปขางๆ

turn แสดงแบบเลอนมาจากทางซายแลวคอยๆ ขยายใหญขน

slide แสดงแบบเลอนจากขวามาซาย

slidefade แสดงแบบคอยๆ เลอน

slideup แสดงแบบเลอนจากขางลาง

slidedown แสดงแบบเลอนจากขางบน

<a href="#mypopup" data-rel="popup" data-transition="slide">Show Popup</a>

129

POPUP CUSTOMISATION : 9-POPUP/POPUP4.HTML

โดยปกตเมอมการสมผสนอกพ นทของ Popup จะท าให Popup นนถกปดโดยอตโนมต

หากตองการปองกนไมให Popup ปดไปโดยอตโนมต ใหก าหนดแอตทรบวต data-dismissible="false" ไวทแทก<div> ของ Popup นนๆ

**ดงนนควรเพมปมปดใหกบ Popup นนๆ ดวย มเชนนนจะไมสามารถปด Popup ได

<div data-role="popup" id="mypopup" data-dismissible="false">

130

PANEL

131

PANELPanel คอ หนาตางทใสขอความหรอเนอหาตางๆ (เชน ลสต, ฟอรม เปนตน) เพอใชเปนพ นทในการก าหนดคาเรมตน

หรอคาส าหรบการท างานของแอพพลเคชน

ส าหรบการสราง Panel นนจะใชแทก <div data-role="panel"> โดยวางไวกอนแทก Header


<div data-role="panel" id="panel1">

<b>This is a Panel</b>

</div>

<div data-role="header" data-position="fixed">

<h1>เฮดเดอร</h1></div>


<a data-role="button" href="#panel1">Show Panel</a>

</div>

<div data-role="footer" data-position="fixed">

<h4>ฟตเตอร</h4></div>

</div> 132

PANEL

การก าหนดต าแหนงของ Panel

โดยปกต Panel จะแสดงอยทางดานซาย หากตองการใหแสดงทางดานขวา ใหก าหนดแอตทรบวต data-

position="right"

<div data-role="panel" id="right_panel" data-position="right">

133

PANEL

สามารถก าหนดให Panel แสดง animate ไดโดยการก าหนดแอตทรบวต data-display


reveal เปนการเลอน page ออกไปทางซายหรอทางขวา เพอแสดง panel ทอยใต page (มเงา)

overlay เลอนออกมาอยเหนอ page (มเงา)

push ดนให page เลอนไปทางซายหรอขวา (ไมมเงา)

<div data-role="panel" id="panel-overlay" data-display="overlay">

134

PANEL: 10-PANEL/PANEL1.HTML

โดยปกตการปดของ Panel จะเกดข น 2 กรณ คอ

เมอมการสมผสนอกพ นท Panel สามารถปองกนไดโดยการก าหนดแอตทรบวต data-dismissible="false" ทแทก <div> ของ Panel นนๆ

มการสมผสแลวลากไปทางซาย หรอขวาในพ นท Panel สามารถปองกนไดโดยการก าหนดแอตทรบวต data-swipe-close="false" ทแทก <div> ของ Panel นนๆ

**ดงนนควรเพมปมปดใหกบ Panel นนๆ ดวย มเชนนนจะไมสามารถปด Panel ได โดยการก าหนดแอตทรบวตdata-rel="close" ทแทก <a> ภายใน Panel นนๆ

<div data-role="panel" id="close_panel" data-swipe-close="false"

data-dismissible="false">

135

136

TABLE

137

TABLE: 11-TABLE/TABLE1.HTML

โดยปกต HTML จะท าการสรางตาราง (Table) ดวยแทก <table>, <tr>, <td>

<table id="mytable">

<thead>

<tr> <th>ล าดบ</th><th>รายละเอยด</th><th>อางอง</th> </tr></thead>

<tbody>

<tr> <th>1</th><td>รายละเอยด1</td><td>11</td> </tr><tr> <th>2</th><td>รายละเอยด2</td><td>22</td> </tr><tr> <th>3</th><td>รายละเอยด3</td><td>33</td> </tr><tr> <th>4</th><td>รายละเอยด4</td><td>44</td> </tr>

</tbody>

</table>

138


หากก าหนดแอตทรบวต data-role="table" จะท าใหมการจดเรยงตารางในรปแบบ

การวางเรยงแบบแนวนอน

<table id="mytable" data-role="table">

<thead>

<tr> <th>ล าดบ</th><th>รายละเอยด</th><th>อางอง</th> </tr></thead>

<tbody>


</tbody>

</table> 139


หากก าหนด class="ui-responsive" จะท าใหการแสดงผลแตกตางกนในอปกรณในแตละขนาด

<table id="mytable" data-role="table" class="ui-responsive">

140

TABLE CUSTOMISATION

สามารถท าใหตารางซอน/แสดงบางคอลมนไดตามขนาดของหนาจอในแตละอปกรณ

โดยการก าหนดแอตทรบวต data-mode="columntoggle" ซงจะท าใหดานบนของตารางมปม "Columns..." ข นมา และเมอกดทปมดงกลาวจะม Popup รายชอคอลมภข นมา

ซงคอลมนในลสตรายชอ Popup จะตองใส data-priority="ตวเลขล าดบความส าคญ" เพอก าหนดวาจะแสดง

คอลมนใด โดยใชตวเลข 1-6 ตวเลข โดยท 1 คอส าคญสด และ 6 ส าคญนอยสด

ซงในอปกรณทมความกวางนอยแตกตางกน jQuery Mobile จะเลอกแสดงคอลมนทมความส าคญมากกอน และซอนคอลมนทมความส าคญนอยสด

141


<table id="mytable" data-role="table" class="ui-responsive"

data-mode="columntoggle">

<thead>

<tr>

<th data-priority="6">ล าดบ</th><th>รายละเอยด</th><th data-priority="1">อางอง</th>

</tr>

</thead>

<tbody>


</tbody>

</table>142

FORM

143

FORM

Form หรอ ฟอรมทถกสรางดวย jQuery Mobile จะมความสวยงาม และสามารถปรบใหเหมาะสมกบขนาดหนาจอของอปกรณแตละขนาดไดงาย รวมทงสามารถเขยนใหรบสงขอมลระหวาง ฟอรม กบ เซรฟเวอร ไดโดยใชเทคโนโลย AJAX โดยอตโนมต

ตวอยางการสรางฟอรม

<form action="#" method="post" name="myformname" id="myformid">

...

</form>

144

FORM

แทกและแอตทรบวตตวชวยทใชงานบอยๆ มดงน

การก าหนดชอแสดง

<label for="ID">MESSAGE</label>

การจดวางใหเหมาะสมกบความกวางของหนาจออตโนมต

<div data-role="fieldcontain"></div>

การแสดงขอความไวในฟลด

placeholder="MESSAGE"

#การลบเสนคนระหวางฟลด<style type="text/css">

.ui-field-content {

border-width: 0;

margin: lem 0;

padding: 0;

}

</style>

145

FORM

การปดฟลดไมใหใชงาน

disabled

การท าใหฟลดมขนาดเลกลง

data-mini="true“

การท าใหฟลดแสดงเหมอนแบบฟอรมธรรมดา

data-role="none“

การก าหนดธมของฟลด

data-theme="b"146

FORM: 12-FORM/FORM1.HTML

147


Text field

<input type="text" name="txt" id="txt" value="" />

Password field

<input type="password" name="pwd" id="pwd" value="" />

การเพมปมลบในฟลด (ปมกากบาท) ใหก าหนดแอตทรบวต data-clear-btn="true" ลงในแทกนน

<input type="text" name="txtclear" id="txtclear" value="" data-clear-btn="true" />

148

FORMSearch field

<input type="search" name="searchtxt" id="searchtxt" value="" data-clear-btn="true" />

Checkbox field

<input type="checkbox" id="chk1" name="chk1" value="Check1"/>

การจดกลมใหกบ Checkbox เพอใหอยในกลมเดยวกน โดยใชแทก <fieldset data-role="controlgroup"> ครอบกลมฟลดทตองการ

<fieldset data-role="controlgroup">

การจดกลม Checkbox ใหจดวางในแนวนอน สามารถท าไดโดยใชแอตทบวต data-type="horizontal" ทแทก

<fieldset>

<fieldset data-role="controlgroup" data-type="horizontal">

149

FORM

Radio button

<input type="checkbox" id="chk1" name="chk1" value="Check1"/>

การจดกลมใหกบ Radio เพอใหอยในกลมเดยวกน โดยใชแทก <fieldset data-role="controlgroup"> ครอบกลมฟลดทตองการ


การจดกลม Radio ใหจดวางในแนวนอน สามารถท าไดโดยใชแอตทบวต data-type="horizontal" ทแทก

<fieldset>


150

FORM

Slider โดยการใชแทก <input type="range">

จะมการก าหนดคาตางๆ โดยใชแอตทรบวตดงน

value คอ คาเรมตน

min คอ คาต าสด

max คอ คาสงสด

step การลดหรอเพมคา (ลดทละ/เพมทละ)

<input type="range" name="slider" id="slider" value="10" min="5" max="100" step="5" />

151

FORM

การก าหนดธมใหกบ Slider

การธมโดยหลก สามารถก าหนดไดทแอตทรบวต data-theme="e"

หากตองการใหสวนแถบเลอนแสดงสแตกตางไปจะตองก าหนดทแอตทรบวต data-track-theme="b"

152

FORM

Select

แทก <select> ซงหากก าหนดตวเลอกเพยง 2 ตวเลอก jQuery Mobile จะแปลงเปนฟลดสวตซเปดปด โดยใชแอ

ตทรบวต data-role="slider"

<select name="select" id="select-id" data-role="slider">

<option value="off">ปด</option><option value="on">เปด</option>

</select>

153

FORM

แทก <select> หากก าหนดใหมตวเลอกมากกวา 2 ตวเลอกข นไป jQuery Mobile จะท าการสรางใหเปนฟลดเลอกรายการ

โดยปกต jQuery Mobile จะท าการตรวจสอบระบบปฏบตการทรนบราวเซอรนนอย ถาท าไดจะท าการสรางฟลดโดยใช UI (User Interface) จากระบบปฏบตการนนๆ กอน

หากตองการใช UI ของ jQUery เองสามารถก าหนดแอตทรบวต data-native-menu="false" ลงไปในแทก <select> ได

154

FORM

หากตองการเพมขอความ เพอใหผใชไดทราบวาตองท าอยางไรตอไป วธการ คอ ในรายการแรกของ <select> เพมแทกตวเลอก <option> โดยไมก าหนดคา value (ใชงานรวมกบแอตทรบวต data-native-menu="false" )

<select name="select" id="select4" data-native-menu="false">

<option>Sample</option>

<option value="r1">Record1</option>



</select>

155

FORM

ในกรณมตวเลอก (<option>) ใหเลอกหลายๆ ประเภท และตองการจดกลมตวเลอก สามารถใชแทก <optgroup label="NAME"> ครอมกลมแทก <option> ทเปนกลมเดยวกน (ใชงานรวมกบแอตทรบวต data-native-menu="false")

<select name="select" id="select5" data-native-menu="false">

<optgroup label="Group1">





</optgroup>





</optgroup>

</select>156

FORMในกรณทตองการใหเลอกไดหลายตวเลอก สามารถก าหนดแอตทรบวต multiple="multiple" ทแทก <select> (ใชงานรวมกบแอตทรบวต data-native-menu="false")

<select name="select" id="select6" multiple="multiple"

data-native-menu="false">






</optgroup>





</optgroup>

</select>157

FORM

การจดกลมใหกบ Select เพอใหอยในกลมเดยวกน โดยใชแทก <fieldset data-role="controlgroup"> ครอบกลมฟลดทตองการ


การจดกลม Select ใหจดวางในแนวนอน สามารถท าไดโดยใชแอตทบวต data-type="horizontal" ทแทก

<fieldset>


158


159

FORM SUBMITTING

การ submit ของ form บน jQuery Mobile นนจะใชรเควสต (request) แบบ AJAX โดยอตโนมต คอ เมอมการรบสงขอมลระหวางฟอรมกบเซรฟเวอร จะไมมการรเฟรซหนาจอ

เมอไดเรสพอนส (response) กลบมาแลว จะน า <div data-role="page"> มาแสดงผลบน DOM (Document Object Model) ปจจบนของระบบทนท

เทคโนโลยอนๆ

DOM (Document Object Model)

AJAX

Web Service (SOAP, RESTFul)

Server side scripting/Client side scripting

160

FORM SUBMITTING

http://www.cnblogs.com/kui447/p/4306952.html161

12-FORM/FORM3.HTML

<form action="server.php" method="post" name="frm1" id="frm1">

<label for="uname">Username :</label>

<input type="text" name="uname" id="uname" value="" data-

clear-btn="true" />

<label for="passwd">Password :</label>

<input type="password" name="passwd" id="passwd" value="" />

<input type="submit" value="Sign-in" />

</form>162

12-FORM/SERVER.PHP

<?php

$uname=htmlspecialchars(stripslashes(trim(filter_var($_POST["uname"],

FILTER_SANITIZE_STRING))));

$pwd=htmlspecialchars(stripslashes(trim(filter_var($_POST["passwd"],

FILTER_UNSAFE_RAW))));

?>


Username is <?=$uname?> <br>

Password is <?=$pwd?> <br>

</div>163

EXAMPLE: 12-FORM/JSON.HTML<script>$.getJSON("http://api.flickr.com/services/feeds/photos

_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",

function(data){

$.each(data.items, function(i,item){

$("<img/>").attr("src",

item.media.m).appendTo("#images");

if (i == 5) return false;

});

});

</script>


<div id="images"></div>

</div>

164

EVENT

165

EVENT

jQuery

DOM (Document Object Model) - https://api.jquery.com/category/manipulation/

Getter and Setter

.attr(), .html(), .val()

Event - https://api.jquery.com/category/events/

bind(), change(), load()

jQuery Mobile

Event - https://api.jquerymobile.com/category/events/

mobileinit, navigate, pageload

166

https://api.jquery.com/category/manipulation/

https://api.jquery.com/category/events/

https://api.jquerymobile.com/category/events/

EVENT

Event ทส าคญคอ event ทเกยวกบ page

เมอมการด าเนนการเกยวกบ page เชน page ถกสรางขน และโหลดเขาส DOM กจะม event เกยวกบ page นนๆ

ส าหรบ event ทเกยวกบ page มดงน

เมอ page พรอมใชงาน

เมอเกดการโหลด page

เมอแสดง animate เปลยน page

เมอเปลยน page

เมอลบ page

mobileinit

เมอเลอนหนาจอ

เมอแตะหนาจอ

167

168

EVENT: 13-EVENT/EVENT1.HTML

<script>

$(document).on("pageinit", "#page1", function(event){

alert("เกดอเวนต pageinit");

$("#hello_id").on("click", function(event){

alert($(this).text());

});

});

</script>

<p id="hello_id">This is Hello</p>

169


Event เมอมการเปลยนทศทางขณะท าการหมนอปกรณ – orientationchange

.orientation = "portrait" แนวตง

.orientation = "landscape" แนวนอน

<h1 id="orientation">orientationchange Not Supported on

this Device.</h1>

<script>

$(window).on( "orientationchange", function(event) {

$("#orientation").text("This device is in " +

event.orientation + " mode!");

});

$(window).orientationchange();

</script>170


Event เมอมการสมผสหนาจออปกรณแบบตางๆ

<script>

$(document).on("tap", "#page1", function(event){

alert("รปแบบ tap");

});

$(document).on("taphold", "#page1", function(event){

alert("รปแบบ taphold");

});

$(document).on("swipeleft", "#page1", function(event){

alert("รปแบบ swipeleft");

});

$(document).on("swiperight", "#page1", function(event){

alert("รปแบบ swiperight");

});

</script>171

DEVICE PLUGIN FEATURE

Device plugin คอการดงเอาความสามารถของอปกรณมาใชงานไดเหมอน Native แอพพลเคชน

For PhoneGap

http://docs.phonegap.com/en/edge/cordova_device_device.md.html

For Cordova

https://cordova.apache.org/docs/en/4.0.0/cordova_plugins_pluginapis.md.html

ขอมล Plugin อนๆ

http://plugins.cordova.io/

172

http://docs.phonegap.com/en/edge/cordova_device_device.md.html

https://cordova.apache.org/docs/en/4.0.0/cordova_plugins_pluginapis.md.html

http://plugins.cordova.io/

EXAMPLE: ACCELEROMETER

ทดลองดวยค าสง

mkdir myaccelerometer

phonegap create myaccelerometer th.ac.bsru.accmeter AccMeter

cd myaccelerometer

ค าสงเพมความสามารถ device-motion (Accelerometer)

phonegap plugin add org.apache.cordova.device-motion173


ทดลองดวยค าสง

ค าสงตรวจสอบวามการเพมความสามารถของ Device อะไรบางphonegap plugin ls

org.apache.cordova.device-motion 0.2.11 "Device Motion"

phonegap platform add android

phonegap build android

หลงจากนน Import ไปยง Android Studio ตามขนตอน174


ไดเรกทอร myaccelerometer

myaccelerometer.txt

175

<html>

<head>

<title>Acceleration Example</title>

<script type="text/javascript" charset="utf-8"

src="cordova.js"></script>

<script type="text/javascript" charset="utf-8">

// The watch id references the current

`watchAcceleration`

var watchID = null;

// Wait for device API libraries to load

//

document.addEventListener("deviceready",

onDeviceReady, false);

// device APIs are available

//

function onDeviceReady() {

startWatch();

}

// Start watching the acceleration

//

function startWatch() {

// Update acceleration every 3 seconds

var options = { frequency: 100 };

watchID =

navigator.accelerometer.watchAcceleration(onSuccess,

onError, options);

}

// Stop watching the acceleration

//

function stopWatch() {

if (watchID) {

navigator.accelerometer.clearWatch(watchID);

watchID = null;

}

}

// onSuccess: Get a snapshot of the current acceleration

//

function onSuccess(acceleration) {

var element = document.getElementById('accelerometer');

element.innerHTML = 'Acceleration X: ' + acceleration.x +

'<br />' +

'Acceleration Y: ' + acceleration.y +

'<br />' +

'Acceleration Z: ' + acceleration.z +

'<br />' +

'Timestamp: ' +

acceleration.timestamp + '<br />';

}

// onError: Failed to get the acceleration

//

function onError() {

alert('onError!');

}

</script>

</head>

<body>

<div id="accelerometer">Waiting for accelerometer...</div>

<button onclick="stopWatch();">Stop Watching</button>

</body>

</html>176

WRAPUP

Wrapup

Q&A

177

REFERENCE

เวบเทคโนโลยส าหรบการพฒนาแอพพลเคชนบนอปกรณมอถอ - ผศ.ดร.วญญ นรนาทล าพงศ, ผศ.ดร.วรสทธ ชชยวฒนา

มหาวทยาลยธรกจบณฑตย

PhoneGap/Cordova

HTML5/CSS3/JavaScript

jQuery/jQuery Mobile

Xcode/Android Studio/Visual Studio

178

Documents

Mobile Application Development using cross-platform …arc.dru.ac.th/arc_th/seminar_downloadfile.php?files=file...UNDERSTANDING PHONEGAP/CORDOVA หลายๆ ท านอาจจะร