The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.

Pemrograman Aplikasi Android dengan Sencha Touch

Discover the best professional documents and content resources in AnyFlip Document Base.
Search
Published by Perpus Kota Semarang, 2018-10-30 18:30:15

Pemrograman Aplikasi Android dengan Sencha Touch

Pemrograman Aplikasi Android dengan Sencha Touch

Pemrograman
Aplikasi Android

«[email protected]; il

Diterbitkan Atas Kerjasama

WAHANA KOMPUTER PENERBIT ANDI®

Pemrograman Aplikasi Android dengan Sencha Touch
Hak Cipta © 2015 pada WAHANA KOMPUTER.

Jl. MT. Haryono 637 Semarang Telp. (024) 8314727, 841 3238, 841 3963
Fax. (024) 8413964

Editor : lgnas
Desain Cover : Bowo
Setter : Ery HS
Korektor : Yatmi

Diterbitkan atas kerjasama Penerbit ANDI Yogyakarta
dengan WAHANA KOMPUTER Semarang

Hak Cipta dilindungi undang-undang.
Dilarang memperbanyak atau memindahkan sebagian atau seluruh isi buku ini dalam
bentuk apapun, baik secara elektronis maupun mekanis, termasuk memfotocopy,
merekam atau dengan sistem penyimpanan lainnya, tanpa izin tertulis dari Penulis.

Penerbit: C.V ANDI OFFSET (Penerbit ANDI)
Jl. Beo 38-40, Telp. (0274) 561881 (Hunting), Fax. (0274) 588282
Yogyakarta 55281

Percetakan: ANDI OFFSET
Jl. Beo 38-40, Telp. (0274) 561881 (Hunting), Fax. (0274) 588282
Yogyakarta 55281

Perpustakaan Nasional: Katalog dalam Terbitan (KDT)

Pemrograman Aplikasi Android dengan Sencha Touch/
- Ed. I. - Yogyakarta: ANDI; Semarang: WAHANA KOMPUTER;

24 23 22 21 20 19 18 17 16 15

vi+ 154 him.; 16 x 23 Cm.

10 9 8 7 6 5 4 3 2
ISBN: 978 - 979 - 29 - 5059 - 5
I. Web Programming
1. WAHANA KOMPUTER Semarang

DDC'23: 006.76

Prakata

M enjamurnya smartphone berbasis Android tidak lain dikarenakan
ragam aplikasi dan permainan yang didukung oleh platform
Android. Sistem operasi Android yang bersifat open source
memang memudahkan para pengembang dalam membuat beragam
aplikasi. Kesuksesan Android ini ternyata juga telah menarik perhatian
para pengembang aplikasi berbasis web. Banyaknya peminat dari ka-
langan pengembang web ini telah memancing para pengembang pro-
gram untuk menghadirkan model pemrograman Android berbasis web.

Sencha adalah salah satu yang tergerak untuk mengakomodasi para pe-
ngembang web dalam membuat aplikasi Android. Dengan Sencha
Touch, Anda dapat membuat aplikasi Android menggunakan bahasa
pemrograman web, yaitu HTML, CSS, dan JavaScript.

Buku Pemrograman Aplikasi Android dengan Sencha Touch ini mem-
bahas secara praktis bagaimana membuat aplikasi Android menggu-
nakan Sencha Touch. Setelah memahami semua materi yang disajikan,
Anda akan mampu membuat program aplikasi Android menggunakan
bahasa pemrograman web.

Buku ini menjelaskan langkah-langkah yang diperlukan untuk membuat
aplikasi Android dengan Sencha Touch. Untuk memudahkan Anda dalam
memahami materi yang disajikan, buku ini telah dibagi menjadi tiga bab,
yaitu:

Bab 1 Mengenal Sencha Touch

Bab ini menjelaskan dasar-dasar penggunaan Sencha Touch, in-
stalasi IDE, memulai proyek baru, mengompilasi program supaya
bisa dijalankan pada perangkat Android, dan sebagainya.

Bab 2 Kontainer dan Komponen Sencha Touch

Bab ini menjelaskan pengaturan layout, library komponen yang
dapat digunakan dalam pembuatan aplikasi, dan pengaturan
masing-masing komponen.

iv Pemrograman Aplikasi Android dengan Sencha Touch

Bab 3 Form dan Controller

Bab ini menjelaskan penggunaan panel form, fieldset, checkbox,
dan radio button pada interface aplikasi.

Buku ini membahas pemrograman aplikasi Android dengan bahasa
pemrograman web menggunakan Sencha Touch. Pada buku ini tidak
akan dibahas teknik dasar pemrograman web dan cara kerja halaman
web. Karena itu, sebaiknya Anda telah mengetahui dasar-dasar pemro-
graman web sebagai bekal mempelajari buku ini. Dengan demikian,
manfaat yang dapat Anda peroleh dari buku ini dapat dimaksimalkan.

Walaupun dalam menyusun buku ini kami telah melakukan pengkajian
dan penelitian yang mendalam, serta berusaha untuk menyampaikan
materi secara lengkap dan terstruktur, tetapi tentunya setiap karya
tidaklah ada yang benar-benar sempurna. Mungkin buku ini kurang dapat
memenuhi kebutuhan para pembaca, atau mungkin para pembaca masih
mengalami kesulitan atau masalah setelah mempelajari buku ini.
Oleh karena itu, Wahana Komputer membuka Iebar kesempatan bagi
para pembaca pada khususnya dan masyarakat pengguna komputer
pada umumnya untuk melakukan konsultasi mengenai berbagai kesulitan
yang dihadapi, khususnya mengenai apa yang telah dijelaskan di dalam
buku ini, melalui situs web kami atau via pos, fax, atau e-mail. Di
samping itu, Anda dapat memanfaatkan pula layanan pelatihan komputer
kami melalui Lembaga Pendidikan Komputer Wahana untuk lebih
mendalami materi-materi yang dipaparkan di dalam buku ini.

Wahana Komputer
Jl. MT Haryono 637, Semarang
Tip. (024) 8314727, 8413238 fax. (024) 8413964
E-mail: [email protected]

Web: www.wahanakom.com

Daftar lsi

Prakata .....................................................................................................iii

Struktur Penulisan Buku ........................................................................ iii
Apa yang Harus Anda Kuasai? ............................................................. iv
Bagi Para Pembaca .............................................................................. iv
Daftar lsi ....................................................................................................v

Bab 1 Mengenal Sencha Touch .............................................................. 1

Apa ltu Sencha Touch? .......................................................................... 2
Aplikasi yang Didukung ...................................................................... 2
Fitur-fitur Utama ..................................................................................3

MenginstaiiDE .......................................................................................4
Distribusi Sencha Touch .....................................................................4
Menginstal Sencha Architect .............................................................. 5

Membuat Aplikasi Baru ........................................................................ 10
Arsitektur MVC.................................................................................. 14
Pengaturan Folder ............................................................................ 15
Sencha Architect............................................................................... 16
Kompilasi Sencha Touch .................................................................. 24

Mengenallnfrastruktur Sencha Touch ................................................. 26
Sistem Kelas .....................................................................................26
Menggunakan Xtype ......................................................................... 27
Library Kelas ..................................................................................... 30

Utilitas-utilitas Dasar ............................................................................. 31
Ext .....................................................................................................31

Bab 2 Kontainer dan Komponen Sencha Touch ................................ 35

Pengaturan Layout ............................................................................... 36
Fit ......................................................................................................36
Hbox ................................................................................................. 39
Vbox ..................................................................................................40
Card ..................................................................................................41
Template ...........................................................................................46

Library Komponen ................................................................................48
Property Component. ........................................................................48
Button ............. ,................................................................................. 50
Label .................................................................................................56

Kontainer ..............................................................................................57
Carousel ...........................................................................................58

vi Pemrograman Aplikasi Android dengan Sencha Touch

View Navigasi ................................................................................... 61
Segmented Button ............................................................................ 61
Panel .................................................................................................... 64
Title Bar dan Toolbar ........................................................................ 70
Viewport ............................................................................................72
Panel .................................................................................................73
Action Sheet ..................................................................................... 75
Messagebox ..................................................................................... 78
Sheet ................................................................................................ 83
View Multimedia ................................................................................... 85
lmage ................................................................................................85
Audio ................................................................................................. 86
Video .................................................................................................88
Data ......................................................................................................89
Kelas Model ...................................................................................... 90
Tipe Field Model ............................................................................... 91
Asosiasi ............................................................................................ 92
Validasi ................................................................................................. 93
Store dan Proxy .................................................................................... 94
Proxy Lokal ....................................................................................... 94
Proxy Remote ................................................................................... 97
Tipe Store ........................................................................................... 101
StoreManager ................................................................................. 102
Store Hierarkis ................................................................................ 104
Control Data-Bound ............................................................................ 106
DataView ........................................................................................ 106
Event DataView .............................................................................. 108
List .................................................................................................. 109
Bab 3 Form dan Controller.................................................................. 111

Panel Form ......................................................................................... 112
Fieldset ............................................................................................... 114

Field Text ........................................................................................ 114
Checkbox dan Radio Group ........................................................... 135
Data di Form ....................................................................................... 141
Controller.......................... .. ............................................................. 142
Membuat Controller ........................................................................ 143
lnisialisasi ....................................................................................... 146
Routing dan Deep Linking .............................................................. 147
Penutup .................................................................................................149
Daftar Pustaka ...................................................................................... 151

M1 en~g~e;na1l Sench1a
To,uch

2 Pemrograman Aplikasi Android dengan Sencha Touch

S ebelum berlatih membuat aplikasi menggunakan Sencha Touch,
Anda perlu terlebih dulu mengenal Sencha Touch. Bab ini men-
jelaskan pendahuluan seputar Sencha Touch.

Sencha Touch adalah framework JavaScript dengan arsitektur MVC (mo-
del, view, controller) yang didesain secara khusus untuk aplikasi mobile
berbasis web untuk perangkat touchscreen seperti Android, iOS, dan
BlackBerry. Dalam bahasa Jepang, sencha sendiri berarti teh hijau.

Gambar 1.1 Logo Sencha Touch

Sencha Touch memungkinkan Anda membuat aplikasi untuk platform
mobile yang mengimplementasikan engine browser standar seperti Web-
Kit.
Sencha Touch termasuk framework yang cukup besar, sepertinya sedikit
menakutkan bagi para pengembang JavaScript pemula. Sencha Touch
ini lebih besar daripada framework seperti JQuery Ul. Sencha Touch le-
bih terintegrasi sebagai paket, termasuk fungsi dan layanan yang di-
tawarkan oleh framework lainnya.
Jadi, dengan menggunakan Sencha Touch, Anda umumnya tidak me-
merlukan library tambahan lainnya. Dukungan terhadap WebKit me-
mungkinkan Sencha Touch digunakan untuk teknologi web modern yang
ada sekarang ini.
Untuk debug, ketika menggunakan Sencha ini, Anda perlu menggunakan
browser yang mendukung WebKit, seperti Safari atau Google Chrome.

Aplikasi yang Didukung

Pada sebuah perangkat mobile dengan fasilitas layar sentuh, umumnya
terdapat tiga jenis kategori aplikasi, yaitu:

e:J Aplikasi utilitas, menampilkan informasi cuaca atau berita ter-
baru.

Mengenal Sencha Touch 3

e:J Aplikasi produktivitas, berupa aplikasi bisnis atau yang berkaitan
dengan dokumen.

e:J Aplikasi imersif, berupa permainan dengan beragam tema.

Sencha Touch paling cocok digunakan untuk membuat aplikasi jenis per-
lama dan kedua. Meski dapat digunakan untuk membuat aplikasi per-
mainan, permainan yang dibuat akan memiliki keterbatasan dalam
memaksimalkan fitur dari perangkat mobile yang digunakan.

Fitur-fitur Utama

Sebagai sebuah framework, Sencha Touch menyediakan banyak fitur
dan fasilitas untuk memudahkan proses pengembangan aplikasi Android,
di antaranya:

E:l Memiliki library widget antarmuka Ul yang sangat banyak, umum-
nya terinspirasi oleh desain dan fungsionalitas iOS.

e:J Mesin rendering berbasis CSS yang andal sehingga dapat di-
proses dengan cepat pada perangkat mobile.

e:J Desain arsitektur yang baik, yaitu menggunakan arsitektur MVC
sebagai fondasi dasar.

e:J Mendukung konektor Data Service, seperti web service Represen-
tational State Transfer (REST) dan mendukung aplikasi web
offline.

e:J Mekanisme pemanggilan kelas, memaksakan adanya penamaan
dan desain arsitektur MVC.

e:J Sistem Command Line, untuk mengatur merger dan meminimal-
kan kode aplikasi, dan juga membangun aplikasi native untuk
Android dan iOS.

e:J Dokumentasi yang lengkap, berupa halaman HTML, termasuk
fasilitas filtering dan pencarian tanpa menggunakan infrastruktur
server-side.

Sencha Touch mendukung beberapa perangkat mobile berikut:

e:J lOS versi 3 ke atas

e:J Android versi 2.3 ke atas

e:J BlackBerry versi 6 ke atas

4 Pemrograman Aplikasi Android dengan Sencha Touch

Sencha Touch juga didistribusikan sebagai bagian dari paket lengkap
Sencha, meliputi:

C-0 Sencha Touch dan Ext JS

e:J Sencha Charts
e:; Sencha Eclipse Plugin

e:J Sencha CMD

e:J Tiket support
~ Lisensi untuk menggunakan Sencha Architect

MENGINSTAL IDE

Untuk membuat aplikasi dengan Sencha Touch, Anda membutuhkan
beberapa toolkit web berikut:

e:J Komputer dengan berbagai platform, seperti Linux, OS X, atau
Windows.

e:J Browser Google Chrome atau Apple Safari.

e:J Editor teks.

El) Framework Sencha Touch.

(:J) lnstalasi Ruby dan RubyGem.

e:J Perangkat Android atau iOS untuk mengetes program yang di-
hasilkan, tetapi Anda juga dapat memprogram tanpa harus
memiliki perangkat ini.

Distribusi Sencha Touch

Anda dapat mengambil distro Sencha Touch dari http://www.Sencha.com/
products/touch/. Setelah diunduh, Anda dapat membuka file zip di mana
di dalamnya terdapat beberapa folder. Bagian yang paling penting
adalah:

(:J) Beberapa file JavaScript di folder utama. File JavaScript yang
utama adalah "Sencha-touch-all-debug.js" dan "Sencha-touch-
all.js". Kedua file JavaScript tersebut sama, hanya saja pada
versi "Sencha-touch-all-debug.js", kode JavaScript masih dalam
kondisi human-readable, sehingga lebih mudah ketika menun-
jukkan lokasi troubleshooting error. lni merupakan library utama

Mengenal Sencha Touch 5

Sencha, dan harus di-link-kan ke dalam "index.html" jika ingin
membuat program menggunakan Sencha Touch.

E9 Folder docs, berisi dokumentasi sistem yang komplet dan siap
pakai. Tersedia secara offline untuk memudahkan Anda dalam
mengakses fitur-fitur Sencha Touch.

E9 Folder examples, berisi beberapa contoh aplikasi yang dibangun
dengan Sencha Touch.

E9 Folder resources, berisi tidak hanya file CSS dan Image yang
disediakan oleh framework, tetapi juga source code SASS yang
digunakan untuk meng-generate style CSS.

E9 Folder src, berisi file source asli JavaScript dari framework
Sencha Touch. lni digunakan untuk meng-generate file Java-
Script final yang diperkecil yang dapat digunakan untuk menguat-
kan aplikasi Anda.

> Computer • local Disk (C:) • xampp ~ htdo.cs ~ touch •

" [J Name

Googh: Drive
Recent p-la.ces

Documents:
Muslc

Picture~

II Vfdeo-s
4 Homegroup

~l(l.)mputer
locatOis.'=:(C:)
Local Disk(D::)

2Ditems

Gambar 1.2 lsi folder touch yang ada di server

Menginstal Sencha Architect

Anda dapat membuat program tanpa menggunakan perangkat IDE
(lntegerated Development Environment) alias secara manual. Tetapi
Sencha juga menyediakan tool IDE yang memudahkan Anda membuat
program. Tool IDE ini bernama Sencha Architect, yang dapat diunduh
dari http://www.Sencha.com/products/architect/. Setelah itu, Sencha da-
pat diinstal dengan cara berikut:

6 Pemrograman Aplikasi Android dengan Sencha Touch
1. Klik ganda pada installer Sencha Architect.
2. Klik Next pada jendela Welcome to the Sencha Architect
Setup Wizard.

Wekome to the Sencha Architect 3 SebJp Wizard,

Gambar 1.3 Welcome to the Sencha Architect Setup Wizard
3. Pilih I accept the agreement, kemudian klik Next.

Gambar 1.4 Pilih I accept the agreement

Mengenal Sencha Touch 7

4. Pilih lokasi instalasi pada Installation Directory.

Gambar 1.5 Pemilihan lokasi di Installation Directory

5. Klik Next pada tahap Ready to Install.

Ready to Install

Gambar 1.6 Halaman Ready to Install

8 Pemrograman Aplikasi Android dengan Sencha Touch

6. Tunggu selama proses instalasi dilakukan. Lihat Gambar 1.7.

Please wait while Setupinstalls Sencha Ard1ilect 3 on your OJmPUter.
Installing

l.!rJpad<:ing C<>program Files\5endlaArd111ect3\1<ds-3.0, 4. 001.186. ion

Gambar 1.7 lnstalasi tengah berlangsung
7. Jika sudah selesai, klik Finish pada Completing the Sencha

Architect Setup Wizard.

Completing the Sencha Architect 3 Setup Waard
Setup has finished installing Sen<na Architect 3 on your computer.

Gambar 1.8 Completing the Sencha Architect Setup Wizard

Mengenal Sencha Touch 9

8. Berikutnya, komponen-komponen lain akan diinstal secara oto-
matis, ini memerlukan koneksi internet. Lihat Gambar 1.9.

Installing Seneha Frama:work: Cmd

11

Gambar 1.9 Komponen-komponen tambahan diinstal secara otomatis

9. Setelah muncul halaman Welcome to Sencha Architect, Anda
siap menggunakan Sencha Architect.

R.,c.,nl Projects

Getting Started

Gambar 1.10 Anda siap menggunakan Sencha Architect

Untuk membangun aplikasi di buku ini, Anda tidak wajib menginstal
Sencha Architect, karena Anda dapat melakukan coding secara manual.
Tetapi dengan Sencha Architect, Anda akan lebih mudah melakukan
coding.

10 Pemrograman Aplikasi Android dengan Sencha Touch

MEl\IIBUAT APLIKASrBARU...

Pertama, Anda akan membuat aplikasi yang paling sederhana, yaitu me-
nampilkan tulisan "Halo Dunia". Program paling dasar di Sencha Touch
terdiri dari beberapa file berikut:

1. Library Sencha Touch.

2. File "index.html".

3. Satu file JavaScript berisi kode dari aplikasi. Pada contoh ini
akan diberi nama "app.js".

Berikut ini langkah-langkah pembuatan contoh program pertama:

1. Letakkan file "Sencha-touch-all-debug.js" dan file "Sencha-
touch.css" dalam satu folder.

2. Mulai dulu dengan membuat file "index.html" dan ketikkan kode
berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Halo Dunia</title>
<!-- Memuat Sencha Touch-->
<link rel="stylesheet" href="Sencha-touch.css" />
<script src="Sencha-touch-all-debug.js"> </script>
<!-- Memuat kode -->
<script src="app.js"></script>
</head>
<body>
</body>
</html>

3. Jangan lupa untuk menambahkan tag <body> dan </body>, kare-
na jika tidak, maka aplikasi tidak akan terlihat di layar. Sencha
Touch akan memanipulasi elemen Root dari tag <body> untuk
mengatur tag antarmuka yang terlihat di layar.

Mengenal Sencha Touch 11

4. Sampai tahapan ini, apabila Anda membuka file "index.html"
menggunakan Google Chrome atau Safari, Anda hanya melihat
layar kosong. Karena file "app.js" belum diberi kode apa-apa.

5. Berikutnya, buka file JavaScript "app.js" dan isi dengan kode se-
perti berikut:

Ext.application({

name: 'Halo Dunia',

launch: function() {

Ext.Msg.alert('Aplikasi Pertama Halo Dunia');

}

});

5. Setiap aplikasi Sencha memiliki paling tidak tiga struktur di atas.
Elemen paling penting adalah Ext.application() yang mengambil
objek sebagai parameter. lni adalah idiom yang umum di Sencha
Touch, berbagai fungsi nantinya dibuat dengan cara seperti ini, di
mana para pengembang perlu mengambil objek literal.

Ext. FungsiTertentu({

parameter!: 'nilail',

parameter2: false

});

6. Teknik ini memungkinkan Anda menghindari error atau masalah.
Pertama, isikan fungsi tertentu.

Ext.FungsiTertentu ({});

7. Kemudian buka tanda kurung kurawal, dan letakkan parameter di
dalamnya.

Ext.FungsiTertentu({ /* memasukkan parameter*/});

8. Di dalam tanda kurung kurawal, parameter-parameter dipisahkan
oleh kama, dan bukan titik kama. Panggilan ke fungsi Ext.appli-
cation() memiliki dua parameter penting berikut:

e Name: Properti ini bertipe string dan menyediakan name-

space root untuk semua objek yang ada di dalam aplikasi.

e Launch: Properti dari fungsi yang akan dieksekusi ketika

kode Framework di-load dan aplikasi siap untuk dieksekusi.

12 Pemrograman Aplikasi Android dengan Sencha Touch

9. Untuk alasan kepraktisan, fungsi Launch adalah titik masuk ke
dalam aplikasi Anda. lni adalah lokasi di mana pengembang siap
untuk dieksekusi.

10. Apabila dijalankan, pada browser akan terlihat tampilan seperti
Gambar 1.11.

Gambar 1.11 Contoh aplikasi pertama Halo dunia

Ext.application dapat diberi parameter lain, misalnya seperti berikut:

Ext.application({
name: 'HaloDunia',
appfolder: 'app',
profiles: ['Phone', 'Tablet', 'Desktop'],
icon: {
57: 'img/Icon.png',
72: 'img/Icon-iPad.png',

114: 'img/[email protected]', II Retina iPhone
144: 'img/[email protected]' II Retina iPad

},
startuplmage: {
'320x460': 'imgiDefault.png',

'640x920': '[email protected]', II Retina iPhone

'768x1004': 'imgiDefault-Portrait.png',
'748x1024': 'img/Default-Landscape.png',

'1536x2008': '[email protected]', II Retina iPad, Portrait
'1496x2048': '[email protected]' II Retina iPad, Landscape

},

Mengenal Sencha Touch 13

models:[],

views: [],

controllers: [],

fullscreen: true,

islconPrecomposed: true,

statusBarStyle: 'black',// can also be 'default'

launch: function() {

Ext.Msg.alert('Aplikasi Pertama Halo Dunia');

}

});

Beberapa penjelasan parameter yang dapat dimasukkan di Ext.appli-
cation antara lain:

E:) appFolder, menentukan lokasi alternatif untuk file aplikasi. Seca-
ra default, Sencha Touch akan memuat secara otomatis. Tetapi
dapat juga di-set on demand, diletakkan di folder app satu folder
dengan file index.html.

E:) profiles, memungkinkan aplikasi dapat menjadi universal, yaitu
dengan menyediakan antaramuka yang berbeda untuk platform
yang berbeda, untuk tablet, ponsel, dan browser desktop. Jadi
antarmukanya berbeda, tetapi controller dan logic untuk low level
tetap sama.

E:) Icon, mengambil dictionary dari pasangan String - Angka. Di ma-
na Angka merepresentasikan piksel dari ikon terpilih, dan String
yang ada di nomor adalah lokasi relatif dari file icon.

E:) startuplmage, berisi dictionary sebagai parameter, dengan kunci
yang merepresentasikan Iebar dan tinggi dari berbagai perangkat
iOS. Nilai dari dictionary ini adalah path ke gambar startup yang
ditampilkan di homescreen.

E:) models, views, dan controllers, berisi array dari nama kelas
yang akan dimuat oleh Sencha Touch.

E:) islconPrecomposed, menentukan apakah ikon dari aplikasi keti-
ka disimpan di homescreen dari perangkat iOS memiliki shading
sebagaimana default-nya.

E:) statusbarStyle, menentukan tipe dari status bar, apakah black,
default, atau translucent ketika ditampilkan di iPhone atau iPod
Touch.

14 Pemrograman Aplikasi Android dengan Sencha Touch

Dengan info dari kunci-kunci di atas, Sencha Touch dapat meng-
generate tag <meta> di DOM-nya browser.

Arsitektur MVC

Arsitektur MVC (model, view, controller) sudah mulai dikenal sejak tahun
1970-an, tepatnya sebagai bagian dari bahasa pemrograman MVC.
Hampir semua bahasa pemrograman beraroma object-oriented memiliki
ciri-ciri MVC sendiri-sendiri, seperti Cocoa, Ruby on Rails, Django, dan
ASP.NET.

Model-View-Controller atau MVC adalah sebuah metode untuk membuat
sebuah aplikasi dengan memisahkan data (model) dari tampilan (Vvew)
dan cara bagaimana memprosesnya (controller).

Dalam implementasinya, kebanyakan framework dalam aplikasi website
adalah berbasis arsitektur MVC. MVC memisahkan pengembangan apli-
kasi berdasarkan komponen utama yang membangun sebuah aplikasi,
seperti manipulasi data, antarmuka pengguna, dan bagian yang menjadi
kontrol dalam sebuah aplikasi web.

Bagian dari MVC:

E::> Model, mewakili struktur data. Biasanya model berisi fungsi-fung-
si yang membantu seseorang dalam pengelolaan basis data,
seperti mengisi, meng-update data, dan lain-lain.

E::> View, bagian yang mengatur tampilan ke pengguna. Dapat di-
katakan berupa halaman web.

E::> Controller, merupakan bagian yang menjembatani Model dan
View. Controller berisi perintah yang berfungsi memproses suatu
data dan mengirimkan hasilnya ke client.

Begitu pula dengan Sencha Touch, menganut pola MVC yang sama.
Struktur MVC dari Sencha Touch beserta komponen-komponennya
(Gambar 1.12):

E::> Stores, adalah abstraksi array dari instance model, seperti kom-
ponen data-bound yang berguna untuk menampilkan list atau
tree dari data. Dapat digunakan untuk mendelegasikan sorting,
pengurutan dan pengelompokan data ke Store. View data-bound
berhubungan dengan Store sehingga semua perubahan data dari
Store akan ter-update di antarmuka secara langsung.

Mengenal Sencha Touch 15

e:> Proxies, adalah entitas abstrak yang mengenkapsulasi koneksi

ke mekanisme basis data tertentu, baik lokal atau remote. Store
menggunakan proxy untuk mengisolasi bagian lain aplikasi dari
lokasi data.

Gambar 1.12 Model View Controller

Pengaturan Folder

Aplikasi MVC dari Sencha Touch memiliki struktur folder standar yang
harus dipatuhi. Seperti terlihat di kode sebelumnya, kode dari aplikasi
Anda terlihat di folder app.

0 Name Date modified

.arcMect 12./07/2014 13:33
12./0712014 14:07
[i!l' appJs 12/07!2:014 14:07
13107/2014 13:00
index.html 12!07/2:014 14:07
• perlama.xds

Gambar 1.13 Contoh folder app di dalam program Sencha

16 Pemrograman Aplikasi Android dengan Sencha Touch

Di dalam folder app, kode aplikasi terstruktur seperti berikut ini:

1. controller: berisi semua kelas yang ditentukan di key controllers
dari fungsi Ext.application() pada file "app.js".

2. model: berisi definisi model data.

3. profile: tempat menyimpan berbagai profil aplikasi yang berbe-
cla-beda.

4. store: berisi definisi Store.

5. view: tempat untuk meletakkan komponen visual khusus/custom
yang digunakan di aplikasi.

Perhatikan bahwa nama folder adalah nama tunggal, seperti app/controll-
er, app/model, atau app/view, sementara key di profile atau di fungsi
Ext.application() pada file "app.js" adalah nama jamak, seperti controll-
ers: [], models: [], views: [], dan seterusnya.

Sencha Architect

Secara garis besar, berikut ini tata cara membuat program di Sencha
Architect. Walaupun Anda belum menguasai infrastruktur pembuatan
program (karena akan dibahas di bab berikutnya), berikut ini garis besar
cara membuat program di Sencha Architect:

1. Pada halaman Welcome, klik Create New.

Recent Projects

Getting Started

Gambar 1.14 Klik Create New

Mengenal Sencha Touch 17

2. Akan muncul jendela New Project. Pilih jenis Blank Project.
Lihat Gambar 1.15.

Gambar 1.15 Halaman New Project

3. Muncul halaman IDE (Integrated Development Environment)
seperti berikut:

Gambar 1.16 Halaman IDE Sencha Architect

18 Pemrograman Aplikasi Android dengan Sencha Touch
4. Geser objek-objek View ke dalam tree item View. Lihat Gambar

1.17.

Gambar 1.17 Menggeser objek ke View

5. View yang dimasukkan akan terlihat, misalnya View Text Field.

Gambar 1.18 View Text Field

Mengenal Sencha Touch 19

6. Anda dapat memasukkan View satu lagi, misalnya Button, maka
terlihat di bagian Views ada beberapa komponen. Lihat Gambar
1.19.

Gambar 1.19 Di bawah Views ada beberapa komponen

7. Anda dapat mengedit properti dari View yang ada. Misalnya un-

tuk text field, Anda dapat mengklik Config > Label dan melihat

label aslinya di situ.

la:tle!Afign jleft

Gambar 1.20 Mengklik label field teks

8. Jika label dari Text Field dikosongkan, maka label tersebut akan
kosong.

Gambar 1.21 Label dari Text Field menjadi kosong

20 Pemrograman Aplikasi Android dengan Sencha Touch
9. Anda juga dapat mengklik pada button dan mengganti tab
Config-nya, misalnya mengganti teks dari button. Lihat Gambar

1.22.

x-butt.on-pr-essi ..~
0

Gambar 1.22 Mengganti teks dari button

10. Tampilan akan berubah karena pengubahan view.

Gambar 1.23 Tampilan view berubah karena pengubahan view

11. Untuk menambahkan action, Anda dapat menambahkan controll-
er. Detail tentang controller, akan dijelaskan di bab terakhir buku
ini.

•I

~ MyTextFiekf IQI

!'

Gambar 1.24 Menambahkan controller

Mengenal Sencha Touch 21

12. Anda dapat menambahkan action dengan mengklik tanda (+) di
samping kanan Config > Actions. Lihat Gambar 1.25.

Gambar 1.25 Menambahkan action
13. Kemudian pilih jenis action, misalnya Controller Action.

Gambar 1.26 Memilih jenis Controller Action
14. Pada tahap 1, pilihlah event yang akan memicu controller action.

E.d.carouseiCarou
Extehart.Legend
Ext Component
Ext.Contamer
Extdataview.componentDataltem

Gambar 1.27 Pemilihan apa yang memicu controller action

22 Pemrograman Aplikasi Android dengan Sencha Touch

15. Pilih event tap pada button.

Gambar 1.28 Pemilihan event dari controller

16. Maka nama controller action yang baru otomatis akan ada di ba-
gian bawah controller yang sudah ada.

I!§] MyTextfield

Eii!J rnyOOlton

0 Stores
II Models

Gambar 1.29 Nama controller action di bawah nama controller

17. Klik MyController, maka akan muncul kode editor.

Gambar 1.30 Tempat untuk memasukkan kode

Mengenal Sencha Touch 23

18. Masukkan kode, misalnya "Ext.Message.Aiert()" atau lainnya se-
suai kebutuhan Anda.

Gambar 1.31 Memasukkan kode

19. Simpan proyek dengan klik File> Save Project As.

Gambar 1.32 File > Save Project As

20. lsikan path dan nama aplikasi yang akan disimpan, klik Save. Li-
hat Gambar 1.33.

Gambar 1.33 Pengisian properti penyimpanan

24 Pemrograman Aplikasi Android dengan Sencha Touch

21. Anda dapat mengklik tombol Preview untuk melihat tampilan pra-
tinjau. Lihat Gambar 1.34.

Archl!e c! wi II
URLPre!ix:

Cancel

Gambar 1.34 Klik Preview untuk mem-preview
22. Maka aplikasi akan muncul di browser.

Gambar 1.35 Aplikasi muncul di browser default
23. Secara garis besar, ini membuat program di Sencha Architect.

Penjelasan sintaksisnya akan dijelaskan di bagian bab berikut-
nya.
24. Anda dapat menerapkan prinsip dasar pembuatan program ini
setelah memahami cara menggunakan Sencha selanjutnya.
25. Untuk contoh-contoh berikutnya, akan dijelaskan dengan menge-
tik secara manual pada program editor teks supaya lebih mudah
dipahami dan dimengerti.

Kompilasi Sencha Touch

1. Misal, awalnya aplikasi ada di folder /Users/wahana/Projects/
touch-2.3.1.

2. Diperlukan minimal Java versi 1.7 dan Node JS. Keduanya dapat
diinstal di doc Sencha Touch.

3. Gunakan Cordova minimal versi 3.2 ke atas. Jika belum punya,
dapat Anda download di cordova.apache.org.

Mengenal Sencha Touch 25

4. Buka Sencha cmd dengan perintah berikut (nama folder dapat
disesuaikan dengan tempat folder Anda):

Sencha -sdk /Usersjwahana/Projects/touch-2.3.1 generate app SenToCo
/Users/wahana/Projectsjcontoh

5. Jalankan aplikasi menggunakan Sencha cmd seperti berikut

cd /Users/wahana/Projects/contoh

Sencha web start

app
appJs
app.json
bootstrapJs
bootstra.p.json
build
tmild.xml
indeduml
packager.json
packages
resources
touch

Gam bar 1.36 Folder yang dihasilkan

6. Tambahkan dukungan Cordova, pastikan direktori Anda adalah
direktori project. Misalnya yang digunakan sebagai AppiD di con-
toh ini adalah "com.mydomain.sentoco" dan AppName adalah
"SenToCo". Anda dapat menggantinya sesuai AppiD dan
AppName yang Anda inginkan. Contoh: "Sencha cordova init
com.mydomain.sentoco SenToCo".

7. Hasilnya, susunan folder ter-update seperti gam bar di bawah.

Gambar 1.37 Folder berubah setelah di-update dengan Apache Cordova

26 Pemrograman Aplikasi Android dengan Sencha Touch

8. Lakukan kompilasi dan jalankan aplikasi dengan perintah berikut:

Sencha app build -run native

9. Jika error, lakukan sekali lagi. Kadang loading Android yang lama
membuat error muncul.

You've just generated anew sencha To!loh 2

project What yoo're looking at right now is tne

contents of ~pp/YiewrM~i!l js -edit thatfile a!'!d

refresh to !lhange what's temlered h~f!!.

Gambar 1.38 Program sudah berjalan di platform Android

MENGEN~..IN.F=RAS· SENCHA

TOUCM

JavaScript adalah bahasa yang menjadi tumpuan utama dari Sencha
Touch. JavaScript memiliki fasilitas berorientasi objek, tetapi tidak memi-
liki kelas, hanya ada fungsi template untuk membuat struktur memori
terhubung satu dengan lainnya. JavaScript hanya memiliki satu objek
literal dan fungsi. Dengan keduanya ini, Anda akan dapat membuat
semua aplikasi web.

Sistem Kelas

Sencha Touch menyederhanakan turunan sistem kelas berdasarkan dua
fungsi utama, yaitu:

Extdefine(), yang membuat pengembang dapat mendefinisikan
kelas baru, termasuk semua opsi konfigurasi, static, member,
instance method, event handler, dan lain sebagainya.

Ext.create(), yang membuat pengembang dapat membuat in-
stance baru dari kelas, menimpa pengaturan pada konfigurasi,
dan menyediakan informasi run-time yang sangat penting.

Contohnya berikut ini cara mendefinisikan kelas:

Ext.define('AppBuku.view.CustomList', {

extend: 'Ext.dataview.List',

xtype: 'customlist',

Mengenal Sencha Touch 27

config: {

II ...

}

});

Pada contoh di atas, ada kelas baru dengan nama
"AppBuku.view.Customlist", di mana kelas ini meng-extend kelas
Ext.dataview.List dan menyediakan properti xtype juga.

Di bagian bawah, ada parameter config yang menyediakan opsi kos-
tumisasi yang digunakan untuk mengostumisasi dari kelas selama
aplikasi masih berjalan.

Berikut ini contoh bagaimana membuat instance baru dari kelas yang
barusan dibuat:

var list = Ext.create('AppBuku.view.Customlist');

II Atau dapat juga dengan kode berikut:
II var list = Ext.widget('customlist');

Pernyataan tunggal ini cukup untuk membuat instance baru dari
AppBuku.view.Customlistclass. Apabila Anda perlu menambahkan
konfigurasi tambahan, tinggal tambahkan parameter kedua untuk me-
manggil ke Ext.create().

var list= Ext.create('AppBuku.view.CustomList', {
items: [

II ...

],

title: 'kasih title tertentu',
II ... parameter tambahan di sini, dipisahkan oleh kama

});

Menggunakan Xtype

Salah satu ciri utama sistem kelas Sencha Touch 2 adalah properti xtype.
Properti ini memiliki makna khusus karena merepresentasikan mapping
antara nama kelas dan nama pendeknya yang lebih mudah untuk diketik-
kan dan diingat.

Jadi, xtype ini adalah nama alias ke nama asli dari kelas di sistem kelas
Sencha Touch. Dengan adanya properti xtype, objek Sencha Touch
dapat diinisialisasikan dengan fungsi Ext.create() yang mensyaratkan

28 Pemrograman Aplikasi Android dengan Sencha Touch

adanya nama kelas dari objek, atau dapat juga dengan menggunakan
dictionary dengan keyword xtype.

Ketika membaca parameter ini, Sencha Touch akan otomatis membuat
objek untuk kelas yang bersangkutan. Begitu juga fungsi Ext.widget()
dapat digunakan untuk membuat objek dengan menentukan xtype-nya
saja.

Berikut ini beberapa tipe xtype yang sudah didefinisikan oleh Sencha
Touch:

Tabel1.1 Xtype yang didefinisikan Sencha Touch

Kategori Xtype Kelas

Basic Button Ext. Button

Component Ext. Component

Container Ext. Container

Dataview Ext.DtaView

Panel Ext. Panel

Tool bar Ext.Toolbar

Spacer Ext. Spacer

Tabpanel Ext.TabPanel

Form Form 1 Ext.form.FormPanel
Checkbox
Select ~-------------j

1 Ext.form.Checkbox

__j_

Ext.form.Select

Field Ext.form. Field

Field set Ext.form. FieldSet

Hidden Ext.form.Hidden

Mengenal Sencha Touch 29

Numberfield Ext.form.NumberField

Radio Ext.form.Radio

Slider Ext.form .Slider

Textarea Ext.form. TextArea

Textfield Ext.form.TextField

Data Store Ext.data.Store

Arraystore Ext.data.ArrayStore

Jsonstore Ext.data.JsonStore

Xmlstore Ext.data.XMLStore

Untuk menggunakan sintaksis xtype, Anda dapat membuat dictionary
standar JavaScript dan menggunakannya di properti i terns dari panel,
sama seperti ketika menggunakan instance yang lain.

Ext.define('AppBuku.view.Customlist', {
extend: 'Ext.dataview.List',
config: {
items: [
{
xtype: 'toolbar',
title: 'Daftar Task',
items: [{
xtype: 'spacer'
}, {
xtype: 'button',
iconCis: 'add',
ui: 'plain'
}]
}

30 Pemrograman Aplikasi Android dengan Sencha Touch

}

});

Ketika kode di atas diproses oleh Sencha Touch, otomatis akan ada tool-
bar, dengan spacer dan button di dalamnya secara otomatis.

library Kelas

Sencha Touch memiliki banyak sekali komponen yang siap digunakan,
ada banyak sekali library kelas yang dapat digunakan, mirip dengan yang
dimiliki oleh Java atau NET runtime. Library dari kelas ini memungkinkan
membuat aplikasi kompleks dengan cepat.

Kelas-kelas di Sencha Touch dikelompokkan menjadi beberapa kelom-
pok berikut:

c:r:> Kelas Model: menyediakan berbagai cara untuk mendeskripsi-
kan entitas bisnis yang dapat dikelola, dibuat, diedit, dan di-
hancurkan oleh aplikasi. Kelas ini dideskripsikan sesuai media
storage yang dibutuhkan, baik itu remote atau lokal, berdasarkan
JSON atau XML.

c:r:> Kelas Communication: ini menjelaskan strategi storage dan ko-
munikasi yang digunakan untuk membuat aplikasi baru. Kelas
paling penting di sini adalah Store, Proxy, dan Reader. lni
menyediakan abstraksi yang memungkinkan aplikasi mengambil
data dari web service remote atau untuk menyimpan informasi di
browser host secara lokal.

c:r:> Kelas View: digunakan untuk menggambarkan tampilan dari se-
mua aplikasi dengan mudah dan konsisten. lni adalah bagian
paling terlihat jelas dari aplikasi dan dapat memanfaatkan fasi-
litas akselerasi hardware dari perangkat mobile modern untuk
melakukan rendering dengan mudah. View di sini hanya meng-
gunakan CSS saja.

E9 Kelas Controller: berfungsi sebagai lem antara view dan model,
mengatur semua interaksi di kelas khusus, yang merupakan ba-
gian penting dari logika aplikasi. Controller memungkinkan
pengembang untuk mengatur kode yang berguna untuk
menggunakan ulang komponen, memisahkan logika bisnis dari
antarmuka, dan menyediakan arsitektur yang lebih mudah diatur
untuk aplikasi.

Mengenal Sencha Touch 31

12) Utilitas Foundation: sangat banyak di framework dan menyedia-
kan berbagai kode siap pakai, dari mulai pengaturan format tang-
gal dan angka, kontainer, proxy, dan kelas lainnya.

UTILITAS-UTILITAS' DASAft

Untuk memudahkan pengembang dan menghilangkan ketergantungan
terhadap library JavaScript lain seperti "JQuery.js", "Backbone.js", atau
"Require.js", maka Sencha Touch menyediakan berbagai fungsi dan
kelas yang siap digunakan. Berikut ini ringkasan beberapa fungsi panting
dari Sencha Touch.

Ext

Ext adalah objek utama dan juga digunakan sebagai inti dari Sencha
Touch engine. Objek ini berisi beberapa fungsi dan properti panting, di
antaranya:

1. emptyFn: Ext.emptyFn berisi fungsi kosong yang dapat diguna-
kan lagi, untuk melewatkan parameter default ke callback atau
event handler.

2. Version: Ext.version mengembalikan versi dari library Sencha
Touch yang dijalankan di browser.

3. Application(): Ext.application() adalah untuk mem-bootstrap apli-
kasi ketika launching.

4. Bind(): Ext.bind() digunakan untuk mengaitkan fungsi ke objek,
mengatur setting pointer pada akhir operasi. Fungsi ini dibutuh-
kan untuk memecahkan beberapa kekurangan yang ada di
Java Script.

5. Clone(): Ext.clone() dapat digunakan untuk membuat salinan dari
objek yang dilewatkan sebagai parameter.

6. Create(), define() dan widget(): Ext.define() adalah shortcut un-
tuk Ext.CiassManager.define() dan digunakan untuk membuat
kelas baru. Ext.create() adalah shortcut untuk Ext.CiassManager.
instantiate() dan digunakan untuk membuat instance baru dari
kelas yang namanya dilewatkan sebagai parameter. Terakhir,
Ext.widget() digunakan untuk membuat instance menggunakan
xtype dan bukannya keseluruhan nama kelas.

32 Pemrograman Aplikasi Android dengan Sencha Touch

7. Decode() dan Encode(): Ext.decode() adalah shortcut ke
Ext.JSON.decode() digunakan untuk mem-parsing string json dan
mengembalikan objek yang berkaitan. Adapun Ext.encode() ada-
lah shortcut untuk Ext.json.encode() dan berguna untuk me-
ngembalikan string json yang merepresentasikan objek yang
dilewatkan sebagai parameter.

8. Defer(): Ext.defer() adalah shortcut untuk Ext.function.defer() dan
digunakan untuk menunda eksekusi fungsi beberapa milidetik.
Fungsi ini juga mengambil parameter sebagai konteks eksekusi.
Untuk fungsi lain penunda eksekusi yang lebih kompleks adalah
kelas Ext.DelayedTasks.

9. Destroy(): Ext.destroy() berguna menghapus objek dari memori
secara komplet. lni menghindari kebocoran memori atau refe-
rensi yang salah. Objek yang dilewatkan sebagai parameter di
fungsi ini akan disingkirkan dari DOM, dan event listener akan
dihapus juga.

10. Each(): Ext.each() adalah shortcut untuk Ext.Array.each(),
fungsinya untuk mengambil array sebagai parameter dan fungsi,
serta mengeksekusi fungsi dengan melewatkan tiap elemen dari
array sebagai parameter. Fungsi callback ini dapat mengem-
balikan nilai false kapan pun untuk menghentikan proses iterasi.

11. getCiass() dan getCiassName(): Fungsi ini digunakan untuk
meng-query objek Sencha Touch tentang informasi kelasnya.
Misalnya kode berikut:

var button = Ext.create('Ext.Button');

var classObject = Ext.getCiass(button);

var className = Ext.getCiassName(button);

12. Ext.getclass: Fungsi ini akan membuat dump objek dari struktur
internal objek kelas.

$className: "Ext.Button"

$isCiass: true

$onExtended: Array[2]

addConfig: function (config, fuiiMerge) {

addlnheritableStatics: function (members) {

addMember: function (name, member) {

addMembers: function (members) {

Mengenal Sencha Touch 33

addStatics: function (members) {
addXtype: function (xtype) {
arguments: null
borrow: function (fromCiass, members) {
caiiParent: function (args) {
caller: null
create: function () {
createAiias: function (a, b) {
displayName: "Ext.Button"
extend: function (parent) {
getName: function() {
implement: function () {
length: 0
mixin: function (name, mixinCiass) {
name:""
onExtended: function (fn, scope) {
override: function (members) {
prototype: Object
superclass: Object
triggerExtended: function () {
xtype: "button"
_proto_: function Empty(){}

Adapun Ext.getCiassName() hanya akan menghasilkan output
Ext. button().

13. getCmp() dan getStore(): Fungsi ini mengembalikan pointer ke
objek tertentu Sencha Touch. getCmp() mengambil ID sebagai
parameter dan mengembalikan pointer ke komponen yang
bersangkutan, bukan elemen HTML-nya, tetapi komponennya. Di
sisi lain, getStore() adalah shortcut untuk Ext.data.Store-
Manager.lookup(). lni menyediakan mekanisme yang ringkas
untuk memperoleh pointer ke semua store yang didefinisikan di
aplikasi yang ada sekarang.

14. id(): Fungsi ini digunakan untuk membuat ID unik untuk kompo-
nen individual.

34 Pemrograman Aplikasi Android dengan Sencha Touch

15. isArray(), isBoolean(), isDate(), isDefined(), isEiement(), dan
lainnya: Objek Ext akan mengekspos beberapa metode yang
mengembalikan nilai Boolean, apakah tipe tersebut benar sesuai
yang diinginkan. Beberapa fungsinya antara lain:
E> isArray{)
E> isBoolean()
E> isDate()
E> isDefined()
E> isEiement()
E> isEmpty()
E> isfunction()
E> islterable()
E> isNumber()
E> isNumeric()
E> isObject{)
E> isPrimitive()
E> isString()

Contoh penggunaannya misalnya:

var array = [];
var bool = Ext.isArray(array);

Kontainer dan
Komponen s,en.ch~a

Touch

36 Pemrograman Aplikasi Android dengan Sencha Touch

S ebuah kontainer adalah komponen yang dapat menyimpan kom-
ponen lain sebagai elemen anak. lni dapat dilakukan menggu-
nakan properti items yang akan mengambil array dari komponen
instance.

Kontainer memerlukan informasi lebih untuk mengatur rendering di layar.
Kontainer perlu tahu bagaimana memosisikan tiap komponen anak
sebelum ditampilkan.

PENGATURANLAYOUT

Untuk memberi tahu kontainer mengenai posisi relatif dari tiap komponen
anak di layar, para pengembang perlu menentukan spesifikasi layout. lni
diakomodasi melalui properti layout yang menjelaskan tentang instance
dari subclass Ext.layout.Default. Ada beberapa layout yang tersedia di
Sencha Touch:

c:9 fit: ini adalah layout yang paling sederhana, yaitu komponen
turunan akan memenuhi space dari induknya.

c:9 Hbox: menumpuk komponen turunan secara horizontal.

c:9 Vbox: menumpuk komponen turunan secara vertikal.

c:9 Card: menumpuk beberapa komponen pada struktur yang sama,
tetapi menampilkan satu saja pada saat yang bersamaan. lni
cocok digunakan di layar smartphone.

Setiap layout adalah komponen dock, yang digunakan untuk memaksa-
kan beberapa komponen diletakkan di bagian sudut, seperti atas, kanan,
bawah, atau kiri.

Fit

Fit adalah komponen paling mudah dipahami karena penerimanya akan
menempati semua komponen yang ada. lkuti langkah berikut untuk
membuat layout Fit:

1. Untuk berlatih membuat layout Fit, edit file "index.html" seperti
berikut:

<!DOClYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="teks/html; charset=utf-8" />

Kontainer dan Komponen Sencha Touch 37

<title>pertama</title>
<script>

var Ext = Ext II {};

Ext.theme = {
name: "Default"
};
</script>
<script src="Sencha-touch-all.js"></script>
<link rel="stylesheet" href="Sencha-touch.css">
<script type= "teks/javascript" src= "app.js"></script>
</head>
<body></body>
</html>

2. Kode di atas terdapat link ke file "app.js", di mana Anda dapat
mengisikan file "app.js" dengan kode seperti berikut:

Ext. Loader.setConfig({});
Ext.application({
views: [ 'Demolayout' ],
name: 'Pertama',
launch: function() {
Ext.create('Pertama.view. Demolayout', {fu IIscreen: true});
}
});

3. Buat folder app. Di dalam folder app tadi, buatlah folder view.

Computer • local Disk (C:) • xampp t htdocs ~ sencha • pertama ~

Gambar 2.1 Folder view

38 Pemrograman Aplikasi Android dengan Sencha Touch

4. Kemudian masukkan di dalamnya file "Demolayout.js".

> Computer > Loc<tl Disk (C:) > xampp ; htdocs > sench<t > pertama • app > view

" 0 Name Date modified

Gambar 2.2 Membuat file "Demolayout.js"

5. lsikan kode seperti berikut di "Demolayout.js".

Ext.define('Pertama.view.Demolayout', {
extend: 'Ext.Container',
xtype: 'Demolayout',
config: {
layout: {
type: 'fit'
},
items: [{
xtype: 'component', margin: 10,
html: 'Komponen Ini diset ke Fit',
style: 'background-color: lightgray'
}]
}
});

6. Ketika file "index.html" dijalankan, maka terlihat komponen Fit
sudah ditampilkan.

Gambar 2.3 Komponen Fit ketika ditampilkan terlihat memenuhi layar

Kontainer dan Komponen Sencha Touch 39

Hbox

Layout kedua adalah Hbox, ini mirip dengan Vbox, hanya saja orientasi-
nya berbeda. View child harus memiliki parameter konfigurasi flex, di
mana layout menjumlahkan nilai dari parameter flex di view child. Dan
jumlah space total untuk view child dibagi secara rata menggunakan
rum us flex/jumlah_nilai_flex.

Pada contoh berikut, nilai flex 1 dan 3, sehingga jumlah totalnya 4. Maka
view pertama akan memperoleh bagian ~. sementara view kedua adalah
o/.i.

Kode di file "view/Demolayout.js" diubah menjadi seperti berikut:

Ext.define('Pertama.view. DemoLayout', {
extend: 'Ext.Container',
xtype: 'hboxdemo',
config: {
defaults: {
margin: 10
},
layout: {
type: 'hbox'
},
items: [
{
xtype: 'component',
flex: 1,
html: 'Flex: 1',
style: 'background-color: pink'
}, {
xtype: 'component',
flex: 3,
html: 'Flex: 3',
style: 'background-color: lightgray'
}

40 Pemrograman Aplikasi Android dengan Sencha Touch

}
});

Apabila dijalankan, hasilnya seperti gam bar di bawah ini.

Gambar 2.4 Tampilan flex pertama menjadi :4 dan flex kedua adalah %

Vbox

Vbox sama seperti Hbox, hanya saja orientasinya vertikal. Anda juga
dapat mengatur nilai flex untuk menentukan porsi horizontal dan vertikal
dari layar. Contoh kode dari file "Demolayout.js" dapat diedit seperti
berikut:

Ext.define('Pertama.view. Demolayout', {
extend: 'Ext.Container',
xtype: 'hboxdemo',
config: {
defaults: {
margin: 10
},
layout: {
type: 'vbox'
},
items: [{
xtype: 'component',
flex: 1,
html: 'Flex: 1',
style: 'background-color: pink'
}, {
xtype: 'component',

Kontainer dan Komponen Sencha Touch 41

flex: 3,
html: 'Flex: 3',
style: 'background-color: lightgray'
}]
}
});

Apabila dijalankan, hasilnya seperti gambar di bawah ini.

Gambar 2.5 Tampilan layout dengan vbox yang berarti horizontal

Card

Layout Card adalah layout paling penting, karena memungkinkan Anda
berpindah antar view di perangkat. Layout Card cocok digunakan pada
layar kecil seperti smartphone.

Di Layout Card, view yang terlihat pertama adalah nomor satu di array
items. Lainnya disembunyikan di belakangnya. Untuk berpindah dengan
view lain, Anda tinggal memanggil fungsi setActiveltem() yang akan
ditambahkan secara otomatis ke kontainer yang menggunakan Layout
Card.

Berikut ini contoh kode di "DemoLayout.js" untuk membuat Layout Card:

Ext.define('Pertama.view.DemoLayout', {

extend: 'Ext.Container',
xtype: 'carddemo',
config: {

defaults: {

margin: 10

42 Pemrograman Aplikasi Android dengan Sencha Touch

},
layout: {
type: 'card'
},
items: [
{
xtype: 'segmentedbutton',
docked: 'top',
items: [
{
teks: 'Pertama',
pressed: true
}, {
teks: 'Kedua'
}, {
teks: 'Ketiga'
}
],
listeners: {
toggle: function(segmentedbutton, button, isPressed, eOpts) {
if (isPressed) {
var container = segmentedbutton.getParent();

var txt = button.getText()

var selectedComponent = container.getComponent(button.getText());

container.setActiveitem(selectedComponent); II

}
}
}
}, {
xtype: 'component',
itemld: 'Pertama',
html: 'Komponen Pertama',


Click to View FlipBook Version
Previous Book
Pembuatan Situs Berita Dengan ASP.NET 2.0 Special Workshop
Next Book
Pemrograman GUI di GNU atau Linux Menggunakan Glade