FITRIAH KUMALAWATI 7408040031 - PowerPoint PPT Presentation

About This Presentation

Title:

FITRIAH KUMALAWATI 7408040031

Description:

FITRIAH KUMALAWATI 7408040031 HARYO FAJAR PUGUH P 7408040042 USWATUN CHASANAH 7408040047 Mobileinit event Ketika jquery mobile memulai untuk mengeksekusi, hal ... – PowerPoint PPT presentation

Number of Views:36

Avg rating:3.0/5.0

Slides: 47

Provided by: ana1166

Category:

more less

Transcript and Presenter's Notes

Title: FITRIAH KUMALAWATI 7408040031

1

FITRIAH KUMALAWATI 7408040031
HARYO FAJAR PUGUH P 7408040042
USWATUN CHASANAH 7408040047

2
jQuery Mobile overview

jQuery telah lama menjadi JavaScript library yang
populer untuk menciptakan website interaktif yang
kaya dan aplikasi web. Namun, karena ini
dirancang terutama untuk browser desktop, jquery
tidak memiliki banyak fitur yang khusus dirancang
untuk membangun aplikasi web mobile.
jQuery Mobile adalah proyek baru yang membahas
kekurangan ini. Ini adalah framework yang
dibangun di atas jQuery yang menyediakan berbagai
elemen User-interface dan fitur-fitur untuk
digunakan dalam aplikasi mobile.
Sumber http//netindonesia.net/blogs/cahnom/ar
chive/2010/08/14/jquery-mobile.aspx

3
jQuery Mobile overview

jQuery mobile merupakan framework javascript
layaknya jQuery pada desktop namun khusus
ditargetkan untuk mobile device seperti iPad,
iPhone, Blackberry, Symbian, Android, dll.
Dengan menggunakan jQuery kita bisa membuat
aplikasi web yang multi platform, tidak
tergantung pada piranti keras tertentu. Dengan
kode yang sama, aplikasi web kita bisa jalan di
hampir semua piranti mobile yang populer saat
ini. Framework ini juga telah mendukung
penggunaan layar sentuh, sehingga aplikasi kita
bisa mengoptimalkan device yang ada.

4
Fitur jQuery Mobile

jQuery Mobile memudahkan pengembangan
user-interface untuk mobile web apps.
The interface configuration is markup-driven,
yang berarti Anda dapat membuat seluruh aplikasi
antarmuka dasar dalam HTML, tanpa perlu menulis
satu baris JavaScript.
Menyediakan serangkaian custom events baru,
mendeteksi events mobile device dan touchscreen
seperti tap, tap-and-hold, swipe, and
orientation change (i.e. rotating the device).
Memastikan bahwa user-interfcae bekerja pada web
browser.
Menggunakan theme untuk memudahkan untuk
customize tampilan aplikasi Anda.
Sumber http//javan.co.id/jquery-mobile/

5
Kemampuan Jquery Mobile

Mempermudah akses dan manipulasi elemen tertentu
pada dokumen.
Mempermudah modifikasi/perubahan tampilan halaman
web.
Mempersingkat Ajax (Asynchronous Javacsript and
XML).
Memiliki API (Application Programming
Interface).
Mampu merespon interaksi antara user dengan
halaman web dengan lebih cepat.
Menyediakan fasilitas untuk membuat animasi
sekelas Flash dengan mudah.
Sumber http//www.aaezha.com/intro-apa-itu-jqu
ery

6
Kemampuan Jquery Mobile

Dengan menggunakan jQuery kita bisa membuat
aplikasi web yang multi platform, tidak
tergantung pada perangkat keras tertentu.
Dengan kode yang sama, aplikasi web kita bisa
jalan di hampir semua piranti mobile yang populer
saat ini.
Framework ini juga telah mendukung penggunaan
layar sentuh, sehingga aplikasi bisa
mengoptimalkan device yang ada.
Sumber http//blogs.mervpolis.com/roller/naspa
rd/entry/jquery_mobile_part_1

7
SUPPORT PLATFORM
8
Platform Yang Mendukung Jquery Mobile

jQuery Mobile telah mendapat banyak
dukungan untuk sebagian besar dari semua modern
desktop ,smartphone, tablet, dan
e-reader platform.
jQuery Mobile menggunakan sistem dukungan
platform 3-tingkat yaitu A (penuh), B (penuh
dikurangi Ajax), C (dasar).
Ketepatan visual pada jquery mobile sangat
tergantung pada kemampuan rendering CSS dan
platform sehingga tidak semuanya akan mendapatkan
pixel yang sempurna.

9
Platform Kelas A dan B

Kemampuan yang disempurnakan lengkap dengan Ajax
berbasis animasi halaman transisi.
Apple iOS 3.2-5.0 - Tested on the original iPad
(4.3 / 5.0), iPad 2 (4.3), original iPhone (3.1),
iPhone 3 (3.2), 3GS (4.3), and 4 (4.3 / 5.0)
Android Honeycomb- Tested on the Samsung Galaxy
Tab 10.1 and Motorola XOOM
Blackberry 6.0 - Tested on the Torch 9800 and
Style 9670
Peningkatan kemampuan namun tanpa fitur ajax
navigasi
Blackberry 5.0 Tested on the Storm 2 9550, Bold
9770
Opera Mini (5.0-6.0) - Tested on iOS 3.2/4.3
Nokia Symbian3 - Tested on Nokia N8 (Symbian3),
C7 (Symbian3), also works on N97 (Symbian1)

10
Platform Kelas C

Kemampuan HTML Tidak ditingkatkan namun tetap
berfungsi.
Blackberry 4.x - Tested on the Curve 8330
Windows Mobile - Tested on the HTC Leo (WInMo
5.2)
Semua Platform Smartphone yang lebih tua dan
Features Phone

11
jQuery Component
12
Jquery Components

Pages Dialogs.
Toolbars
Button
Forms Elements
List View

13
Pages Dialogs

Pada dasarnya konten halaman dari sebuah pages
adalah di simpan dalam tag div dengan menggunakan
attributes data-role.
Dalam div page, ada header, content dan
footer div.
Dalam Jquery mobile, pages mendukung single pages
ataupun local internal linked "pages" within a
page.

14
Basic page template
15
Page Inside Page
16
Page Transitions

slide Slide right to left (left to right if
tapping the Back button). This is the default.
slideup Slide from the bottom to the top (top to
bottom if tapping the Back button).
slidedown Slide from the top to the bottom
(bottom to top if tapping the Back button).
pop Expand the new page (contract it if tapping
the Back button). Great for dialogs and popups.
fade Fade the new page in (fade it out if tapping
the Back button).
flip Flip the old page out and the new page in,
like flipping a card.

contoh penggunaanya

18
Dialogs

DialogDengan menambahkan data-rel dialog pada
link, Kita dapat membuat halaman yang muncul
sebagai dialog, dengan rounded corners, margin
dan dark background.
kita juga bisa menambahkan transitions seperti
slideup, pop atau flip
Contoh Penggunaan

19
Toolbars

Pada Jquery Mobile standar toolbar ada dua yaitu
header bar dan footer bar.
Header biasanya berisi judul halaman , option
button yang biasanya diletakkan di samping kanan
dan kiri.
Penggunaan header bar
ltdiv data-role"header"gt lth1gtPage Titlelt/h1gt
lt/divgt

20
Toolbar

Pada Jquery mobile juga terdapat nav bar yang
biasanya digunakan untuk berpindah pada halaman
lain.
Penggunaan nav bar
ltdiv data-role"navbar"gt ltulgt ltligtlta
href"a.html" class"ui-btn-active"gtOnelt/agtlt/ligt
ltligtlta href"b.html"gtTwolt/agtlt/ligt lt/ulgt
lt/divgtlt!-- /navbar --gt

21
Buttons

Button adalah bagian penting dari setiap aplikasi
berbasis touchscreen.
Button lebih baik daripada link, karena
memberikan target yang lebih besar ketika
melakukan navigasi (penting jika kita memiliki
jari-jari gemuk!).
Untuk mengaktifkan link ke dalam button di jQuery
Mobile, cukup menambahkan data-role button
code button
ltpgtlta hrefabout data-rolebuttongtAbout
this applt/agtlt/pgt

22
Button

lta href"index.html" data-role"button"gtLink
buttonlt/agt
Tampilan

23
Button

Inline Button
lta href"index.html" data-role"button"
data-inline"true"gtCancellt/agt
lta href"index.html" data-role"button"
data-inline"true" data-theme"b"gtSavelt/agt

24
Forms Elements

jQuery Mobile secara otomatis menggantikan bentuk
kontrol standar HTML, seperti teks, checbox dan
select, dengan kontrol custom yang bekerja lebih
baik dengan interface touchscreen, dan lebih
fleksibel.
Misalnya, checkbox yang dibuat jauh lebih besar
sehingga mereka lebih mudah untuk digunakan.
Fitur lain yang lumayan bagus adalah
pengelompokan radio button dan checkbox. Jika ada
beberapa radio button atau checkbox pada elemen
fieldset dengan atribut data-role
controlgroup.

25
Forms Elements
26
Forms Elements
27
Forms Elements
28
Forms Elements
29
List Views

Untuk mengubah list biasa menjadi list view, kita
tinggal menambahkan data-role ListView untuk
tag ul atau ol.
Berikut adalah beberapa hal yang dapat kita buat
menggunakan listview
Sebuah list teks sederhana, dengan kotak yang
bagus di setiap item.
Sebuah daftar link.
Nested List (List bersarang).
Split List Button
Count Bubble
Search Filtering

30
List Views
31
List Views
32
List Views
33
Option Configuration
34
Mobileinit event

Ketika jquery mobile memulai untuk mengeksekusi,
hal tersebut akan memacu mobileinit event pada
document objek, yang dapat mengikat untuk
menerapkan ovveride ke jQuery Mobile default.
(document).bind("mobileinit", function()
//apply overrides here
)

35
Opsi Konfigurasi

Ns ? Digunakan pada atribut data
autoInitializePage ? Dipanggil ketika DOM telah
siap
subPageUrlKey ? parameter Url untuk reference
sub-pages
activePageClass ? Dipanggil pada saat halaman
ditampilkan maupun pada saat transisi
activeBtnClass ? Digunakan untuk mengaktifkan
button
ajaxEnabled ? jQuery mobile secara otomatis akan
menangani klik link dan pengiriman
form melalui Ajax,bila memungkinkan. Jika
false, url mendengarkan hash akan
dinonaktifkan juga, dan urlakan memuat sebagai
permintaan http biasa.

36
Opsi Konfigurasi

linkBindingEnabled ? jQuery mobile secara
otomatis akan mengikat klik pada anchor tag dalam
dokumen Anda.
hashListeningEnabled ? jQuery mobile secara
otomatis akan mengamati dan menangani
perubahan ke lokasi .hash
pushStateEnabled
defaultPageTransition ?Mengatur transisi default
untuk perubahan halaman yang menggunakan Ajax.
touchOverflowEnabled

37
Opsi Konfigurasi

defaultDialogTransition ? Mengatur transisi defaul
t untuk perubahan dialog yang menggunakan Ajax.
minScrollBack ? Jarak scrool minimal yang akan
diingat ketika kembali ke sebuah halaman
loadingMessage ?Mengatur teks yang muncul saat
halaman sedang loading.
pageLoadErrorMessage ? Mengatur teks yang muncul
ketika halaman gagal untuk beban melalui Ajax.
gradeA ?dukungan kondisi yang harus dipenuhi
untuk melanjutkan proses.

38
Supported Methods and Events
39
.mobile and supported methods and events

Beberapa metode terpapar oleh . Mobile dijelaskan
di bawah ini.

Sumber http//www.ibm.com/developerworks/web/lib
rary/wa-jqmobile/
40
data- attributes
41
HTML5 data- attributes

jQuery mobile bergantung pada HTML5 data
atribut untuk mendukung berbagai elemen
UI, transisi, dan struktur halaman.
data- atribut untuk membuat komponen UI adalah
sebagai berikut