Pelatihan Intel XDK. Modul 4 Pengembangan Aplikasi Mobile Learning Menggunakan Intel XDK. Dikembangkan oleh Intel Software

Pop-up, pada bagian seperti di bawah ini: Code: Pop-up

Gambar 14 - Baris Kode untuk Pop-up

Baris kode yang ditambahkan adalah sebagai berikut: Mari kita test, apakah pop-up keluar atau tidak.. Hasilnya sperti ini:

Gamb ar 15 - Prev iew Ap pli kasi

Gambar 16 - Preview Aplikasi: Button Clicked

Langkah 7: Menambahkan Halaman HOME Pada sesi ini kita akan memberikan aksi pada pop-up yang sudah dibuat sehingga ketika ditekan akan berpindah ke halaman lain. Sebelumnya kita terlebih dahulu buat sebuah halaman home.html dengan isi sebuah text ‘Hi, kamu’ lengkap dengan Headernya. Caranya sebagai berikut:

14

New File

Gambar 17 - New File

home.html

Gambar 18 – Nama File

Langkah 8: Mengisi Halaman Home Setelah file dibuat, kita akan mengisinya dengan text. Pilih file home.html, lalu kita masuk mode APP DESIGNER. Seperti halaman index sebelumnya, kita pilih JQuery Mobile sebagai framework. Berikut langkah detailnya:

15

home.html Gambar 19 - Home.html

Gambar 20 - Pilihan Framework

Lalu tambahkan text menggunakan langkah drag-n-drop seperti sebelumnya. Text tersebut berisi ‘Hi, kamu’ namun sebelumnya kita tambahkan Header dengan title:Home

Gambar 21 - Header Home

Selanjutnya tambahkan text seperti di bawah ini:

16

Text: Hi, Kamu Gambar 22 - Text pada Home

Langkah 9: Membuat Aksi Pop-Up Form Pengisian Nama Pengguna Pada sesi ini kita akan mencoba mengeksplor HTML dan Javascript pada Intel XDK ini. Pertama-tama kita buat file Javascript pada folder js dengan nama default.js berikut langkah2nya:

New File pada Folder js

Gambar 23 - File Javascript Baru

17

default.js

Gambar 24 - Default.js

Lalu kita isi file default.js tersebut dengan baris kode di bawah ini: function actionMasuk(event){ $.mobile.changePage('home.html', {reloadPage : true, changeHash : true, transition: "slide" }); } Setelah file default.js terisi, kita import file tersebut pada index.html sehingga actionMasuk() akan berfungsi. Pastikan import default.js di bawah baris import JQuery Mobile seperti berikut ini: <script type="application/javascript" src="js/jquery.min.js"> <script type="application/javascript" src="jqm/jquery.mobile-min.js"> <script type="application/javascript" src="js/default.js"> Jika berhasil, berikut preview nya J

18

Gambar 25 - Preview Aplikasi

Horay J kita sudah berhasil membuat aplikasi html5 menggunakan Intel XDK. Masih banyak komponen yang bisa digunakan pada Intel XDK maupun menggunakan widget dari JqueryMobile lainnya. Materi selanjutnya kita akan mencoba menambahkan beberapa komponen yang sering digunakan pada sebuah aplikasi mobile.

Langkah 10: Menambahkan Common Component JqueryMobile pada Intel XDK Oke mari kita menambahkan beberapa komponen yang sering digunakan pada aplikasi mobile. Berikut list yang akan kita coba yang tersedia pada Intel XDK: -

Collapsible ButtonGroup Footer ListView Select 19

Referensi: http://view.jquerymobile.com/1.3.2/demos/ Selanjutnya mari kita coba satu persatu, namun sebelumnya kita harus mengetahui letak penambahan kode yang tepat J Hal itu bisa kita lakukan setelah mengenal lebih dekat HTML5, JQM dan Intel XDK.

Collapsible

Gambar 26 - Collapsible

Untuk mengambahkan komponen ini kita tinggal melakukan drag-n-drop J lalu selanjutnya tambahkan konten yang ada di dalam collabsible berupa text, gambar dan lain sebagainya. -

Label: Text yang tampil pada layar Theme: Tema JQM yang akan digunakan Current Theme: Tema yang sekarang digunakan Mini: Ukuran komponen menjadi mini Inset: Komponen dalam satu set Rounded Corner: Ujung komponen yang berbentuk rounded Closed Icon: Icon pada saat konten tertutup Open Icon: Icon pada saat konten terbuka Icon Position: Poisi ikon pada option yang tersedia Id: digunakan untuk CSS dan JS 20

ButtonGroup

Gambar 27 - Button Group

Komponen ini memiliki terdiri dari beberapa Button yang digabung menjadi satu kelompok. Namun karakteristik tiap Button unique dan bisa dimanipulasi sesuai kebutuhan. Misal kita bisa membuat grup tombol untuk pengaturan Media seperti di atas. Seperti halnya komponen button, untuk menambahkan group Button ini kita tinggal melakukan Drag-n-drop kemudia mengatur properties tiap Button sesuai kebutuhan J -

Vertical: Orientasi button vertikal Id: digunakan untuk CSS dan JS

21

Footer

Gambar 28 - Footer

Sama halnya dengan Header, komponen Footer ini biasa digunakan untuk menampilkan informasi yang biasanya akan dibawa pada tiap halaman, bisa berupa navigasi atau text biasa. Layout Footer sudah dirancang ‘fixed’ berbeda dengan header yang ada pilihan untuk ‘fixed’ atau tidak. Untuk menambahkannya: Just drag-n-drop J -

Title: Judul yang tampil pada footer Theme: Tema JQM yang akan digunakan Id: digunakan untuk CSS dan JS

22

ListView ListView merupkan salah satu komponen penting yang sering digunakan untuk menampilkan data dinamis maupun statis.

List Item

LISTVIEW

Gambar 29 - ListView

23

Cara menambahkan ListView cukup mudah, seperti yang lainnya tinggal drag-n-drop ke canvas lalu atur properties nya melalui APP DESIGNER atau EDITOR. -

Theme: Tema JQM yang akan digunakan Inset: Rounded Ordered: List tergabung Filter: Menampilkan filter untuk List Auto Devider: Menampilkan pemisah list secara otomatis Mini: Ukuran komponen menjadi mini Id: digunakan untuk CSS dan JS

Select Komponen ini sering digunakan untuk menampilkan data yang disesuaikan dengan aturan yang dibuat. Misal list data provinsi, kota, dll. Berikut cara pembuatannya:

Label

Options

LISTVIEW

Gambar 30 - Select

24

Untuk menambahkan komponen Select, lakukan drag-n-drop seperti komponen lainnya, lalu isi properties yang dibutuhkan. -

Label: Text yang tampil pada layar Label Position: Posisi label pada layar Options: Berisi pilihan yang tersedia Theme: Tema JQM yang akan digunakan Mini: Ukuran komponen menjadi mini Icon Position: Poisi ikon pada option yang tersedia Id: digunakan untuk CSS dan JS

Langkah 11: Project Mobile Learning Menggunakan Intel XDK (lanjutan) Oke, setelah mengenal beberapa komponen dan sekaligus mencobanya, kita akan melanjutkan project ini. Sebelumnya kita sortir dulu komponen yang akan dipakai sebagai berikut: HEADER TEXT

COLLAPSIBLE

BUTTON GROUP FOOTER

Gambar 31 - Project (lanjutan) Tampilah home.html

25

Setelah melakukan penyortiran dari hasil latihan pengenalan komponen sebelumnya, sisakan yang terlihat seperti di atas. Selanjutnya kita akan memberi aksi pada Button Materi 1 sehingga akan membuka halaman Materi 1. Pada tab properties kita tambahakan id: materi1

Selanjutnya kita tambahkan atribut onClick pada tombol materi1, berikut baris kode yang ditambahkan (berwarna orange): Materi 1 Lalu kita tambahkan method materi1() pada default.js seperti berikut: function materi1(event){ $.mobile.changePage( 'materi1.html', { dataUrl : "materi1.html?parameter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true, transition: "pop" }); } Lalu jangan lupa kita import default.js pada home.html ini J <script type="application/javascript" src="js/default.js">

Langkah 12: Membuat Halaman Materi 1 Proses selanjutnya adalah membuat halaman materi1.html yang berisi materi bab 1 pengenalan planet bumi (sesuai nama project: xdk-duniawi J )

26

Gambar 32 - Materi1.html

Langkah 13: Mengisi Halaman Materi 1 Setelah materi1.html dibuat, selanjutnya kita masuk APP DESIGN tentunya dengan framework JQM. Lalu kita isi dengan komponen sebagai berikut: -

Header : Materi 1: Tentang Dunia o BackButton : Tombol kembali ke halaman sebelumnya Text : Berisi overview materi 1 Footer : (c) {nama}, 2013 Accordion : Berisi text deskripsi planet bumi. o Planet Bumi : sekilas tentang plante bumi o Bentuk : sekilas tentang bentuk planet bumi o Komposisi Kimia : sekilas komposisi kimia dari planet bumi o Sumber : sumber : wikipedia

27

HEADER

FOOTER

Gambar 33 - Design materi1.html

Catatan: Header (Back Button) Untuk menambahkan BackButton pada header, kita cukup menambahkan attribut pada elemen header tersebut. Attribut yang ditambahkan seperti di bawah ini: