mobile application development using cross-platform...
TRANSCRIPT
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
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
UNDERSTANDING PHONEGAP/CORDOVA
Image from - https://developer.salesforce.com17
PHONEGAP/CORDOVA ARCHITECTURE
https://html5hu.files.wordpress.com 18
UNDERSTANDING PHONEGAP/CORDOVA
Mobile Application ไมใช Web Application
การท างานและสวนตดตอผใชท างานอยบนอปกรณมอถอทงหมด ไมไดดงหนาเวบมาจากเครองเซรฟเวอร แตในบาง
กรณอาจจะมการดงขอมลมาจากเครองเซรฟเวอร แตไมไดดงหนาเวบทงหนามาทงหมด
ในทางเทคนคสามารถหนาเวบมาจากเครองเซรฟเวอรได แตไมควรท า
เมอสรางแอพพลเคชนเสรจแลว สามารถ build ข น Store ของแตระบบปฏบตการไดเลย เปรยบไดเปน Native อนหนง
19
UNDERSTANDING PHONEGAP/CORDOVA
หลายๆ ทานอาจจะรสกวาแอพพเคชนบนอปกรณมอถอทพฒนาดวยวธการแบบนแลวท างานชา หรอรสกหนวงๆ
จรงๆ แลว 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
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
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
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
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
PAGE
71
PAGE DETAIL
โครงสรางภายใน Page แบงเปน 3 สวน คอ
สวน Header
สวน Container
สวน Footer
72
0-PAGE/PAGE1.HTML<body>
<div data-role="page" id="page1">
<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="page" id="page2">
<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="page" id="page1">
<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
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
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
BUTTON: 2-BUTTON/BUTTON1.HTML
ส าหรบ Footer ท าการสรางปมโดยการเพมแทก <a> เขาไป
กจะเปนการสรางปมโดยอตโนมต เชนเดยวกบ Header
แตปมจะเรยงจากซายไปขวา
<div data-role="footer">
<a> ลงก3 </a><a> ลงก4 </a>ฟตเตอร
</div>
83
BUTTON: 2-BUTTON/BUTTON2.HTML
ส าหรบ Container นน การสรางแทก <a> จะไมเปนการสรางปมโดยอตโนมต
จะตองเพมแอตทรบวต data-role="button" ลงไปในแทก <a> ดวย
<div data-role="content">
<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
BUTTON: 2-BUTTON/BUTTON3.HTML
88
BACK BUTTON: 2-BUTTON/BUTTON4.HTML
ปม "Back" เปนปมทใชส าหรบกลบไปยงหนากอนหนา โดยก าหนดแอตทรบวต data-rel="back" ไวทแทก <a> โดยสามารถก าหนดไดทงท Header, Container และ Footer
<div data-role="content">
<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="page" id="page1">
<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
LIST: 6-LIST/LIST3.HTML
การจดกลมลสตรายการ โดยใช "ตวแบง" โดยการก าหนดแอตทรบวต data-role="list-divider" ทแทก <li>
<ul data-role="listview">
<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
LIST: 6-LIST/LIST3.HTML
อกทงยงสามารถแสดงจ านวนรายการโดยใชตวบอกจ านวน ทมสญลกษณทมลกษณะคลายฟองอากาศ และมตวเลขภายใน
หรอ (Count bubble)
โดยการใชแทก <span class="ui-li-count"></span> ครอบขอมลเอาไว
<li data-role="list-divider">ภาษาไทย<span class="ui-li-count">3</span></li>
108
LIST: 6-LIST/LIST4.HTML
เราสามารถเพมรปภาพ และไอคอนจากไฟลรปภาพเขาไปในลสตได
ในกรณทตองการเพมไอคอนไวหนาลสต สามารถใชแทก <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
LIST: 6-LIST/LIST5.HTML
การกรองขอมลในลสต (Filter)
การกรองขอมลท าไดโดยก าหนดแอตทรบวต data-filter="true" ไวทแทก <ul>
ซงขอความเรมตนในชอง filter จะเปนค าวา "Filter items..." โดยสามารถเปลยนเปนค าอนไดดวยเพมแอตทรบวตdata-filter-placeholder="คนหา"
หากตองการใหท างานแบบ auto-complete คอ ในครงแรกรายการทงหมดจะถกซอนไว เมอพมพขอความลงในชองคนหา จงจะแสดขอมลลง ท าไดดวยเพมแอตทรบวต data-filter-reveal="true"
111
LIST: 6-LIST/LIST5.HTML
<div data-role="content">
<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">
<li>รายการท 1</li><li>รายการท 2</li><li>รายการท 3</li>
</ul>
</div>
<div data-role="collapsible"><h3>English</h3>
<ul data-role="listview">
<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">
<li>รายการท 1</li><li>รายการท 2</li><li>รายการท 3</li>
</ul>
</div>
<div data-role="collapsible"><h3>English</h3>
<ul data-role="listview">
<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 บรรทด
<ul data-role="listview">
<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 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>
<div class="ui-grid-b">
<div class="ui-block-a"> Block 2-1 </div>
<div class="ui-block-b"> Block 2-2 </div>
<div class="ui-block-c"> Block 2-3 </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"> คลมในสวนทตองการ ซงมผลท าใหใหปมอยตดกน และหากเปดขอมลปมใดออกมา ปมอนๆทแสดงขอมลอยท าการซอนอตโนมต
<div data-role="collapsible-set">
122
<div data-role="collapsible">
<h3>ระดบท 1</h3><div data-role="collapsible">
<h3>ระดบท 2</h3>รายละเอยด<ul data-role="listview" data-inset="true">
<li>รายการท 1</li><li>รายการท 2</li><li>รายการท 3</li>
</ul>
</div>
</div>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>ป ม 1</h3> ขอความ 1</div>
<div data-role="collapsible">
<h3>ป ม 2</h3> ขอความ 2</div>
<div data-role="collapsible">
<h3>ป ม 3</h3> ขอความ 3</div>
<div data-role="collapsible">
<h3>ป ม 4</h3> ขอความ 4</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="page" id="page1">
<div data-role="panel" id="panel1">
<b>This is a Panel</b>
</div>
<div data-role="header" data-position="fixed">
<h1>เฮดเดอร</h1></div>
<div data-role="content">
<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
TABLE: 11-TABLE/TABLE2.HTML
หากก าหนดแอตทรบวต data-role="table" จะท าใหมการจดเรยงตารางในรปแบบ
การวางเรยงแบบแนวนอน
<table id="mytable" data-role="table">
<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> 139
TABLE: 11-TABLE/TABLE3.HTML
หากก าหนด 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: 11-TABLE/TABLE4.HTML
<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>
<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>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
FORM: 12-FORM/FORM2.HTML
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"> ครอบกลมฟลดทตองการ
<fieldset data-role="controlgroup">
การจดกลม Radio ใหจดวางในแนวนอน สามารถท าไดโดยใชแอตทบวต data-type="horizontal" ทแทก
<fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
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>
<option value="r2">Record2</option>
<option value="r3">Record3</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">
<option>Sample</option>
<option value="r11">Record11</option>
<option value="r12">Record12</option>
<option value="r13">Record13</option>
</optgroup>
<optgroup label="Group2">
<option value="r21">Record21</option>
<option value="r22">Record22</option>
<option value="r23">Record23</option>
</optgroup>
</select>156
FORMในกรณทตองการใหเลอกไดหลายตวเลอก สามารถก าหนดแอตทรบวต multiple="multiple" ทแทก <select> (ใชงานรวมกบแอตทรบวต data-native-menu="false")
<select name="select" id="select6" multiple="multiple"
data-native-menu="false">
<optgroup label="Group1">
<option>Sample</option>
<option value="r11">Record11</option>
<option value="r12">Record12</option>
<option value="r13">Record13</option>
</optgroup>
<optgroup label="Group2">
<option value="r21">Record21</option>
<option value="r22">Record22</option>
<option value="r23">Record23</option>
</optgroup>
</select>157
FORM
การจดกลมใหกบ Select เพอใหอยในกลมเดยวกน โดยใชแทก <fieldset data-role="controlgroup"> ครอบกลมฟลดทตองการ
<fieldset data-role="controlgroup">
การจดกลม Select ใหจดวางในแนวนอน สามารถท าไดโดยใชแอตทบวต data-type="horizontal" ทแทก
<fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
158
FORM: 12-FORM/FORM2.HTML
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))));
?>
<div data-role="content">
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 data-role="content">
<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
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: 13-EVENT/EVENT2.HTML
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: 13-EVENT/EVENT3.HTML
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
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
EXAMPLE: ACCELEROMETER
ทดลองดวยค าสง
ค าสงตรวจสอบวามการเพมความสามารถของ 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
EXAMPLE: ACCELEROMETER
ไดเรกทอร 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