Sabtu, 19 Februari 2011

Jquery Mobile Framework




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.
framework ini cukup canggih, versi alpha pertama dirilis bulan lalu – tapi sudah memungkinkan untuk melakukan beberapa hal besar.
Pada artikel ini saya melihat beberapa fitur kunci dan manfaat dari Jquery mobile dan menunjukkan beberapa contoh bagaimana framework baru ini dapat membantu Anda membangun aplikasi mobile berkualitas dan dalam waktu singkat.
Apa yang dapat jQuery Mobile lakukan?
  • 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 bahwauser-interfcae bekerja pada web browser.
  • Menggunakan theme untuk memudahkan untuk costumized tampilan aplikasi Anda.

Struktur halaman Jquery Mobile
Sebagian besar halaman web aplikasi dengan jQuery Mobile akan mengikuti basic template:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
  <head>
  <title>Page Title</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
 
<div data-role="page">
 
  <div data-role="header">
    <h1>Page Title</h1>
  </div>
 
  <div data-role="content">
    <p>Page content goes here.</p>
  </div>
 
  <div data-role="footer">
    <h4>Page Footer</h4>
  </div>
</div>
 
</body>
</html>
Untuk menggunakan jQuery Mobile, pertama anda perlu meng-include 3 file:
  • JQuery CSS Mobile file (jquery.mobile-1.0a1.min.css)
  • Perpustakaan jQuery (jquery-1.4.3.min.js)
  • Mobile perpustakaan jQuery (jquery.mobile-1.0a1.min.js)
Anda dapat mendownloadnya di website jQuerymobile
Seperti yang anda lihat, konten halaman disimpan dalam sebuah div dengan atribut data-role “page”. Hal ini memungkinkan jQuery mobile tahu di mana konten di markup. Dalam div “page”, ada  ”header”, “content” dan “footer” div.
<div data-role=”header”>
div “header” ini berfungsi untuk membuat toolbar di bagian atas halaman, yang digunakan untuk menyimpan  title dan button. (terdapat tombol default “Back” dimana pengguna dapat menekan untuk kembali ke halaman sebelumnya.) Dengan menambahkan data-position = “fixed” untuk header,membuat header selalu tetap di bagian top screen.
<div data-role=”content”>
Berisi konten utama halaman, seperti teks, images, button, list, form, dan sebagainya.
<div data-role=”footer”>
Membuat toolbar di bagian bawah halaman, yang berguna untuk hal-hal seperti buttona. Untuk membuat header selalu tetap top screen. Dengan menambahkan data-position = “fixed” untuk footer.
Halaman di dalam halaman
Salah satu hal baik dari struktur halaman di atas adalah bahwa Anda  dapat membuat beberapa “page” dalam suatu satu halaman HTML. Ini berarti bahwa browser hanya meload 1 halaman. Berikut ini contohnya:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
  <head>
  <title>jQuery Mobile: Pages within Pages</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
 
<div data-role="page" id="home">
 
  <div data-role="header">
    <h1>Home</h1>
  </div>
 
  <div data-role="content">
    <p><a href="#about">About this app</a></p>
  </div>
 
</div>
 
<div data-role="page" id="about">
 
  <div data-role="header">
    <h1>About This App</h1>
  </div>
 
  <div data-role="content">
    <p>This app rocks! <a href="#home">Go home</a></p>
  </div>
 
</div>
 
</body>
</html>

Perpindahan Halaman (Page Transitions)
Kita dapat menerapkan salah satu dari beberapa efek transisi yang berbeda ke halaman baru yang muncul. Untuk membuat itu, cukup tambahkan atribut data-transition ke link. Value nya adalah:
  • 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:
1
<p><a href="#about" data-transition="flip">About this app</a></p>
Dialog
DialogDengan menambahkan data-rel = “dialog” pada link, Anda 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:
1
<p><a href="#about" data-rel="dialog" data-transition="slideup">About this app</a></p>
Dialog tidak akan bekerja jika berada di dalam satu halaman HTML yang sama seperti link, sehingga contoh diatas akan terlihat seperti halaman biasa, bukan dialog. (Remember, this is alpha version :) ) Jadi jika Anda ingin membuat dialog, Anda harus memasukkannya ke dalam halaman HTML terpisah.

Button

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:
<p><a href=”#about” data-role=”button”>About this app</a></p>
Touch-optimized form 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. framework ini mendukung elemen bentuk baru HTML5 seperti searching (untuk pencarian) dan slider. Selain itu, Anda dapat membuat switch “on / off”  flip dengan menggunakan select dengan atribut data-role = “slider”, dan menempatkan 2 option dalam daftar.
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”.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
  <head>
  <title>jQuery Mobile Form Demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
 
<div data-role="page" id="home">
 
  <div data-role="header">
    <h1>Ice Cream Order Form</h1>
  </div>
 
  <div data-role="content">
    <form action="#" method="get">
 
     <div data-role="fieldcontain">
       <label for="name">Your Name:</label>
       <input type="text" name="name" id="name" value=""  />
     </div>
 
     <div data-role="controlgroup">
       <legend>Which flavour(s) would you like?</legend>
 
       <input type="checkbox" name="vanilla" id="vanilla" class="custom" />
       <label for="vanilla">Vanilla</label>
 
       <input type="checkbox" name="chocolate" id="chocolate" class="custom" />
       <label for="chocolate">Chocolate</label>
 
       <input type="checkbox" name="strawberry" id="strawberry" class="custom" />
       <label for="strawberry">Strawberry</label>
 
     </div>
 
     <div data-role="fieldcontain">
       <label for="quantity">Number of Cones:</label>
       <input type="range" name="quantity" id="quantity" value="1" min="1" max="10"  />
     </div>
 
     <div data-role="fieldcontain">
       <label for="sprinkles">Sprinkles:</label>
        <select name="sprinkles" id="sprinkles" data-role="slider">
          <option value="off">No</option>
          <option value="on">Yes</option>
        </select>
     </div>
 
     <div data-role="fieldcontain">
       <label for="store">Collect from Store:</label>
        <select name="store" id="store">
          <option value="mainStreet">Main Street</option>
          <option value="libertyAvenue">Liberty Avenue</option>
          <option value="circleSquare">Circle Square</option>
          <option value="angelRoad">Angel Road</option>
        </select>
     </div>
 
    <div class="ui-body ui-body-b">
      <fieldset class="ui-grid-a">
        <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
        <div class="ui-block-b"><button type="submit" data-theme="a">Order Ice Cream</button></div>
      </fieldset>
    </div>
 
  </div>
 
</div>
 
</body>
</html>
List views: Lists on steroids

List view merupakan fitur yang powerful pada jquery Mobile. Jquery memungkinkan kita untuk membuat unordered lebih stylish. 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. Menempatkan tag dalam list item, dan jQuery Mobile secara otomatis menambahkan ikon panah a ‘>’ di setiap sisi kanan dari setiap list item.
  • Nested List (List bersarang). Jika ada ul li di dalam suatu list item, jQuery secara otomatis membuat “halaman” kedua untuk list didalamnya, terkait dengan dari li asli. Ini sangat membantu apabila kita ingin membuat mentu Tree.
  • Split List Button. Dengan menempatkan 2 link dalam li, Anda dapat membuat daftar item dengan bar pemisah vertikal di sisi kanan item tersebut. kemudian kita dapat mengklik sisi kiri atau kanan list item.
  • Count Bubble. Jika Ada elemen class ui-li-count. Dalam list item Mobil jQuery menciptakan sebuah ikon “bubble” kecil  di sisi kanan berisi isi elemen list item. Ini berfungsi untuk menunjukan jumklah inbox atau notifikasi.
  • Search Filtering. Jika Anda menambahkan data atribut-filter = “true” untuk elemen ul atau ol secara otomatis akan muncul filtering list item di atas list view tersebut.
Berikut ini adalah halaman contoh beberapa tampilan list view di jQuery Mobile:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<pre><code><!DOCTYPE html>
<html>
  <head>
  <title>jQuery Mobile Lists Demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
 
<div data-role="page" id="home">
 
  <div data-role="header">
    <h1>Lists Demo</h1>
  </div>
 
  <div data-role="content">
 
    <h2 style="padding: 1em 0;">A list view</h2>
 
    <ul data-role="listview" data-inset="true">
      <li>Cat</li>
      <li>Dog</li>
      <li>Mouse</li>
      <li>Squirrel</li>
    </ul>
 
    <h2 style="padding: 1em 0;">A list of links</h2>
 
    <ul data-role="listview" data-inset="true">
      <li><a href="#">About this app</a></li>
      <li><a href="#">Buy ice cream</a></li>
      <li><a href="#">Find a store</a></li>
    </ul>
 
    <h2 style="padding: 1em 0;">Nested lists</h2>
 
    <ul data-role="listview" data-inset="true">
      <li>Play
        <ul>
          <li><a href="#">Easy</a></li>
          <li><a href="#">Medium</a></li>
          <li><a href="#">Hard</a></li>
        </ul>
      </li>
      <li>Settings
        <ul>
          <li><a href="#">Graphics</a></li>
          <li><a href="#">Sound</a></li>
          <li><a href="#">Device</a></li>
        </ul>
      </li>
      <li>Highscores
        <ul>
          <li><a href="#">View</a></li>
          <li><a href="#">Submit</a></li>
          <li><a href="#">Reset</a></li>
        </ul>
      </li>
    </ul>
 
    <h2 style="padding: 1em 0;">A split button list with filter</h2>
 
    <ul data-role="listview" data-inset="true" data-filter="true">
      <li>
        <a href="#">The Grapes of Wrath</a>
        <a href="#">Buy This Book</a>
      </li>
      <li>
        <a href="#">The Trial</a>
        <a href="#">Buy This Book</a>
      </li>
      <li>
        <a href="#">A Tale of Two Cities</a>
        <a href="#">Buy This Book</a>
      </li>
    </ul>
 
    <h2 style="padding: 1em 0;">A list with count bubbles</h2>
 
    <ul data-role="listview" data-inset="true">
      <li><a href="#">SuperWidgets</a> <span>14</span></li>
      <li><a href="#">MegaWidgets</a> <span>0</span></li>
      <li><a href="#">WonderWidgets</a> <span>327</span></li>
    </ul>
 
  </div>
 
</div>
 
</body>
</html></code></pre>
Theming
Abu-abu, widget bulat hitam dan biru yang dibuat oleh jQuery Mobil terlihat cukup bagus, tetapi akan sangat membosankan jika kita semua harus menggunakan style yang sama untuk aplikasi mobile kita! Untuk tujuan ini, jQuery Mobile memungkinkan Anda membuat tema khusus yang mengatur hal-hal tersebut seperti:
  • Font family
  • Drop shadow
  • Corner radius values for buttons and boxes
  • Icon set
Selain itu, tema masing-masing dapat berisi hingga 26 swatch warna berbeda (berlabel dari ‘a’ sampai ‘z’), yang mengendalikan warna foreground, warna background, dan gradien. (Tema bawaan jQuery Mobile dilengkapi dengan 5 swatch.) Untuk membuatnya menggunakan attribut data-theme. Sebagai contoh:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
  <head>
  <title>Page Title</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
 
<div data-role="page" id="home">
 
  <div data-role="header">
    <h1>Home</h1>
  </div>
 
  <div data-role="content">
    <a href="#" data-role="button" data-theme="a">About this app</a>
    <a href="#" data-role="button" data-theme="b">About this app</a>
    <a href="#" data-role="button" data-theme="c">About this app</a>
    <a href="#" data-role="button" data-theme="d">About this app</a>
    <a href="#" data-role="button" data-theme="e">About this app</a>
  </div>
 
</div>
 
</body>
</html>

Untuk mengurangi waktu ketika load halaman, jQuery Mobile themes menggunakan CSS3 untuk hal-hal seperti rounded corner, drop shadow dan gradien, daripada menggunakan gambar.
Pada artikel ini kita telah menjelajahi library jQuery Mobile baru, dan melihat bagaimana hal itu bisa menghemat banyak waktu dan usaha ketika membangun aplikasi mobile web. Meskipun saat ini hanya baru ada alfa, dan masih agak kasar, tp ini sangat membantu untuk menciptakan sebuah aplikasi.
Anda dapat mempelajari lebih jauh lagi di situs Mobile jQuery. (jquerymobile.com) Have fun!
sumber: http://www.jquerymobile.com
Diposting oleh di

1 komentar:

  1. Firman18 Maret 2012 pukul 20.39

    selamat malam mas... saya masih nubie tentang jquery mobile, dan saya ingin membuat aplikasi pada mobile yang menggunakan jq mobile ini.

    yang mausaya tanyakan apa bisa jqmobile ini dihubungkan juga dengan php. trus saya juga mau membuat web server sbg server driaplikasinya nanti. apa bisa denga jqmobile ini juga?

    lalu peran jqmobile ini sebenarnya gimana? trimakasih banyak :)

    BalasHapus

Langganan: Posting Komentar (Atom)