Prerequisit
- Sencha Touch 2
- Web server (saya menggunakan Xampp)
- IDE (saya menggunakan EasyEclipse)
- Browser support HTML5, preferred Chrome atau Safari
- Simulator Android (optional), didapat dari Android SDK
Hasil
Pernah saya ditanya, “Selain buat aplikasi native di Blackberry, kamu bisa bikin HTML5 juga kan? Soalnya kita akan bikin aplikasi untuk iPhone dan Android juga. “. Setelah mendapat pertanyaan tersebut, saya tertegun sejenak dan menjawab, “Ya, kekuatan saya selama ini di native. Tapi kalau memang itu dibutuhkan, saya rasa tidak ada masalah.”. Sebenarnya ketika bicara seperti ini, saya harus sudah sadar dengan resikonya, yaitu saya harus segera menguasai teknologi baru ini. Yang dimaksud si penanya adalah, saya akan diminta membuat aplikasi hybrid agar mudah diimplementasikan untuk ketiga platform itu.
Inilah sebabnya saya mencoba mulai belajar Sencha Touch. Dan saya pilih rilis yang kedua (masih developer preview) untuk mendapatkan fitur terbaru. Tutorial ini sebagian besar berasal dari tutorial Sencha Touch. Saya hanya menambahkan apa yang tidak ada di sana. Percayalah, Anda baru akan merasakan manfaat tutorial ini kalau sudah membaca tutorial Sencha Touch dan merasakan ada sesuatu yang kuran … :D
Sencha Touch adalah framework untuk membangun aplikasi web (HTML5) untuk perangkat bergerak, baik tablet maupun telepon genggam, dengan layar sentuh. Sencha Touch menyatakan dirinya sebagai yang terbaik dengan memberikan app yang tampak native di iPhone, Android maupun Blackberry dengan layar sentuh. Sencha Touch menggunakan lisensi GPL dan, versi Free commercial (saya belum tahu maksudnya) dan ada commercial OEM (berbayar). Saat ini Sencha Touch baru merilis versi 1.1.1. Tetapi versi Developer Preview untuk Sencha Touch 2 sudah tersedia dan bisa didownload di link ini. File ini cukup besar, sekitar 25 MB karena di dalamnya sudah termasuk dokumentasi dan tutorial-nya.
Setelah Anda download file tersebut, Anda akan mendapatkan direktori touch di dalamnya. Nanti kita akan menggunakan direktori ini di dalam proyek tutorial kita. Selain memerlukan Sencha Touch, Anda juga akan memerlukan server. Saya sarankan menggunakan Xampp, jika Anda menggunakan Windows, dan saya berharap teman-teman sudah biasa menggunakan Xampp (dengan demikian, sudah cukup paham bahwa nanti source code program kita akan diletakkan di direktori htdocs). Selain itu, saya menggunakan EasyEclipse IDE, distro PHP.
Dalam tutorial ini, Anda perlu membukan browser ke alamat proyek Anda, atau jika Anda ingin melihat tampilannya di ponsel, silakan gunakan browser di simulator Android Anda. Tetapi alamatnya tidak bisa menggunakan localhost, Anda harus ganti localhost menjadi IP address Anda.
Bagian 1
Baik, inilah yang saya lakukan ketika memulai pembelajaran tentang Sencha Touch 2:
- Saya siapkan direktori proyek dengan nama senchatutorial, diletakkan di dalam htdocs
- Saya nyalakan Xampp control panel, kemudian saya tekan tombol start pada Apache
- Saya buat 2 file di dalam senchatutorial, yaitu index.html dan app.js
- Saya tambahkan direktori touch (yang saya dapatkan dari dalam Sencha Touch 2)
- Saya buang direktori docs dan examples (langkah ini tidak harus, tapi di kasus saya, saya ingin menghemat harddisk)
Dengan demikian, di dalam senchatutorial akan ada 3 isinya:
- index.html
- app.js
- direktori touch
Berikut ini adalah isi index.html dan app.js
Ext.application({ name: 'App', launch: function() { alert("Yaa. Akhirnya jalan juga."); }});<!DOCTYPE html><html><head> <title>Getting Started</title> <link rel="stylesheet" href="touch/resources/css/sencha-touch.css" type="text/css"> <script type="text/javascript" src="touch/sencha-touch-all.js"></script> <script type="text/javascript" src="app.js"></script></head><body></body></html>Sampai di sini, aplikasi sudah bisa dicoba. Arahkan browser ke http://localhost/senchatutorial/ kemudian tekan Enter. Anda akan mendapatkan alert khas JavaScript yang bertuliskan, “Yaa, akhirnya jalan juga”.
Bagian 2
Mari kita lanjutkan tutorial ini. Di bagian 1 kita hanya mendapatkan layar putih dan alert JavaScript yang sederhana sekali. Berikutnya, kita tidak akan mengubah index.html, tapi kita akan fokuskan di app.js. Silakan ubah code app.js menjadi seperti berikut:
Ext.application({ name: 'App', launch: function() { Ext.create("Ext.TabPanel", { fullscreen: true, items: [ { title: 'Home', iconCls: 'home', html: 'Assalamu alaikum' } ] }); }});Code di atas akan mulai menampilkan yang ‘benar-benar’ Sencha. Anda akan mendapatkan Toolbar di bawah, khas iPhone dengan icon Home. Di bagian atas screen, Anda akan mendapatkan tulisan “Assalamu alaikum”.
Sampai di sini, mulai tampak menyenangkan. Web app ini sudah mulai mirip aplikasi native. Di sini kita menggunakan komponen TabPanel. Komponen ini meniru gaya aplikasi iPhone yang hampir selalu memiliki tab di bagian bawah. Benar, kita baru memiliki 1 tab saja. Umumnya aplikasi iPhone memiliki 5 tab. Juga perhatikan property iconCls yang bernilai home. Ini yang membuat tab kita kali ini bergambar rumah. Nanti kita akan belajar jenis tab lain.
Buka http://localhost/senchatutorial/ melalui browser atau simulator Android.
Bagian 3
Di bagian 2 kita sudah bisa membuat web app kita nampak seperti aplikasi native. Tapi ini masih belum cukup bagus. Kita baru bisa menampilkan teks sederhana sekali. Kali ini kita akan mencoba membuat semacam halaman informasi, tentang Sencha Touch 2. Tentu saja Anda bisa menuliskan versi Anda.
Perhatikan code berikut:
Ext.application({ name: 'App', launch: function() { Ext.create("Ext.TabPanel", { fullscreen: true, tabBarPosition: 'bottom',
items: [ { title: 'Home', iconCls: 'home', html: [ '<img src="http://staging.sencha.com/img/sencha.png" />', '<h1>Belajar Sencha Touch</h1>', "<p>Kali ini Anda mempelajari Sencha Touch 2. Tutorial ini ", "akan menunjukkan kepada Anda cara menggunakan tab, list dan ", "form untuk membangun aplikasi untuk perangkat bergerak</p>", '<h2>dengan Sencha Touch (2.0.0pr1)</h2>' ].join("") } ] }); }});Mari kita perhatikan bahwa kita bisa menggunakan tag-tag HTML di dalam property html. Juga perhatikan bahwa untuk menyambung String, kita menggunakan tanda koma setelah menutup String tersebut.
Buka http://localhost/senchatutorial/ melalui browser atau simulator Android.
Bagian 4
Di bagian 4 ini kita akan membuat 3 tab (sebelumnya kita hanya punya 1). Kita akan masih tetap menggunakan tab pertama yang sebelumnya sudah kita buat. Kemudian di tab 2 kita akan membuat contoh list sederhana. Dan di tab 3 kita akan membuat sebuah form standar dengan input berupa nama (text), email (email) dan pesan (textarea).
Ext.application({ name: 'App', launch: function() { Ext.create("Ext.TabPanel", { fullscreen: true, tabBarPosition: 'bottom',
items: [ { title: 'Home', iconCls: 'home', cls: 'home', html: [ '<img src="http://staging.sencha.com/img/sencha.png" />', '<h1>Belajar Sencha Touch</h1>', "<p>Kali ini Anda mempelajari Sencha Touch 2. Tutorial ini ", "akan menunjukkan kepada Anda cara menggunakan tab, list dan ", "form untuk membangun aplikasi untuk perangkat bergerak</p>", '<h2>dengan Sencha Touch (2.0.0pr1)</h2>' ].join("") }, { xtype: 'list', title: 'Blog', iconCls: 'star',
itemTpl: '{title}', store: { fields: ['title', 'url'], data: [ {title: 'Ext Scheduler 2.0', url: 'ext-scheduler-2-0-upgrading-to-ext-js-4'}, {title: 'Previewing Sencha Touch 2', url: 'sencha-touch-2-what-to-expect'}, {title: 'Sencha Con 2011', url: 'senchacon-2011-now-packed-with-more-goodness'}, {title: 'Documentation in Ext JS 4', url: 'new-ext-js-4-documentation-center'} ] } }, { xtype: 'formpanel', title: 'Contact Us', iconCls: 'user', url: 'contact.php', layout: 'vbox',
items: [ { xtype: 'fieldset', title: 'Contact Us', instructions: 'Email address is optional',
items: [ { xtype: 'textfield', label: 'Name', name: 'name', id: 'name' }, { xtype: 'emailfield', label: 'Email', name: 'email' }, { xtype: 'textareafield', label: 'Message', name: 'message', height: 90 } ] }, { xtype: 'button', text: 'Send', ui: 'confirm',
//the handler is called when the button is tapped on handler: function() { } } ] } ] }).setActiveItem(1); }});Mari kita perhatikan code di atas. Perhatikan property title yang setelah kita perhatikan rupanya property ini mengatur nama tab dan akan tampil di bagian bawah icon tab tersebut. Berikutnya, kita mengenal 2 variasi lain dari iconCls, yaitu star dan user. Anda sudah tahu bahwa ini gunanya untuk menentukan jenis icon untuk masing-masing tab.
Lalu, apa itu xtype? xtype adalah nama simbolis yang diberikan kepada class. Di tab kedua kita menggunakan xtype bernilai list, artinya kita akan menambahkan komponen Ext.dataview.List ke atas tab kedua. Sedangkan di tab ketiga, xtype bernilai formpanel, yang artinya kita akan menambahkan Ext.form.Panel.
Mari perhatikan cara penggunaan Ext.dataview.List. Di sana ada property itemTpl. itemTpl digunakan sebagai template bagi setiap item yang akan ditampilkan dalam DataView. List adalah salah satu keturunan DataView. Dalam kasus kita, itemTpl bernilai {title}.
Berikutnya, perhatikan property store. Property ini digunakan untuk mengumpulkan item-item yang akan dirender di dalam List. Jika Anda ingin menanyakan tentang apa itu Store, saya akan menjawab, “Mari kita tunda pertanyaan ini untuk pertemuan minggu depan.”. Hehehe. Yang perlu diperhatikan adalah bahwa begitulah cara menggunakan List.
Berikutnya, silakan Anda bermain-main dengan isi tab berikutnya, Ext.form.Panel. Di sini kita menggunakan Panel dengan layout vbox. Konsep tidak asing jika Anda pernah bermain-main di Android. Di Blackberry, ini seperti VerticalFieldManager. Item-item yang ingin Anda tampilkan di dalam Panel tersebut Anda masukkan ke dalam items. Perhatikan dengan seksama, bahwa di dalam Panel ini kita hanya menambahkan 2 item. Hati-hati, benar 2 item saja. Yang pertama adalah fieldset (Ext.form.FieldSet) dan yang kedua adalah button (Ext.Button). Baru di dalam fieldset itu kita tambahkan 3 komponen, yaitu textfield, emailfield dan textareafield.
Sampai di sini, saya yakin Anda sudah bisa mencoba-coba mengubah-ubah code yang saya berikan di atas. Selamat mencoba dan sampai jumpa di tutorial berikutnya (semoga).
Buka http://localhost/senchatutorial/ melalui browser atau simulator Android.
October 28, 2011
5 responses to Development: Mulai Belajar Sencha Touch 2
manteb pak dhe
Hehehe biasa aja Oom. Masih nubitol.
“Percayalah, Anda baru akan merasakan manfaat tutorial ini kalau sudah membaca tutorial Sencha Touch dan merasakan ada sesuatu yang kuran …
”
bikin buku aja mas, judulnya “The Missing Manual of Sencha” kan mantep tu..
Mas,,
mantap tutorial nya
tambahin lgi lah..
crud dong,,
makasih..
bagus pa tutorialnya,
saya mau nanya bagaimana cara switch antar view yg sudah kita buat dengan button(onButtonTap) event handler.. ??
terima kasih.