Membuat Web App Mobile Canggih dengan Sencha Touch 2 - VIEW Oleh: asep saepulloh
Holaa sahabat jaco, aduh udah lama nih gak bermain di website tercinta kitahh. Hehehehe. Abis lagi sibuk, banyak kerjaan pula di kantor. Eniweeeii…. Kali ini saya ingin sharing ilmu sedikit tentang Membuat WebApp Mobile dengan Sencha Touch. Abis klo di liat-liat belom ada nih di website ini. So, langsung aja deh. Apaan sih Sencha Touch? Sencha Touch itu Framework Javascri...
Holaa sahabat jaco, aduh udah lama nih gak bermain di website tercinta kitahh. Hehehehe. Abis lagi sibuk, banyak kerjaan pula di kantor.
Eniweeeii…. Kali ini saya ingin sharing ilmu sedikit tentang Membuat WebApp Mobile dengan Sencha Touch. Abis klo di liat-liat belom ada nih di website ini. So, langsung aja deh. Apaan sih Sencha Touch? Sencha Touch itu Framework Javascript dan Sencha Touch itu salah satu produk dari Sencha. Nah Sencha juga punya banyak produk unggulan. Kamu bisa cek di sini untuk lebih jelasnya. Kita akan fokus di Sencha Touch aja (Karena saya bisanya itu doang :p ). Oke. Dalam Tahap ini kita harus menyiapkan alat perang kita. 1. 2. 3. 4.
Project Sencha Touch. Bisa download di DropBox saya langsung . Klik Pengetahuan tentang MVC Niat dan Sangghuppp. (Klo gak sangghup ya Sanghupppiinn!!) :P Kopii/Susu anget dan Biskuit
Oke. Setelah semua alat perang kita siap. Kita akan mulai membuatnya. Project yang sudah di download. Silahkan simpan di folder Web Server kamu. Nah sekarang tinggal kamu jalankan di http://localhost/MyApps/
Jika yang tampil seperti gambar di atas, berarti kita sukses membuat project Mobile WebApps kita yang pertama :D . Hooreeeeeeee….. Dalam tutorial ini kita akan mencoba membuat aplikasi Blog pribadi kita. Oke langsung aja yah. Buka folder project tadi di Editor kalian. Disini saya menggunakan Netbean 7.2. Yang pertama dilakukan, kita akan edit Page Pertama. Buka file Main.js pada folder app/view/ pada folder ini kita akan menyimpan semua file VIEW untuk aplikasinya. Di dalam file main.js perhatikan pada tag dibawah ini : Ext.define('MyApp.view.Main', { extend: 'Ext.tab.Panel', xtype: 'main', requires:[ 'Ext.TitleBar' ], config: { tabBarPosition: 'bottom', items:[ { title: 'Home',
iconCls: 'home', styleHtmlContent:true, scrollable: true, items: { docked: 'top', xtype: 'titlebar', title: 'Selamat Datang' }, html:[ "
Halo ini aplikasi pertama saya.", "
", "Untuk mengganti text ini. Silahkan buka file app/view/Main.js pada Editor anda.
" ].join("") } ] } });
Bagi sahabat jago yang gak asing sama data json. Pasti gak pusing dong liat script di atas. Oke, buat yang gak ngerti saya jelasin versi saya sendiri. Perhatikan script di bawah ini : title: 'Home', iconCls: 'home', styleHtmlContent:true, scrollable: true, items: { docked: 'top', xtype: 'titlebar', title: 'Selamat Datang' }, html:[ "
Halo ini aplikasi pertama saya.", "
", "Untuk mengganti text ini. Silahkan buka file app/view/Main.js pada Editor anda.
" ].join("")
title : Memberikan text pada tab menu (menu bawah) iconCls : Memberikan icon pada tab menu (menu bawah) scrollable : Menjadikan halaman dapat di scroll styleHtmlContent : Mengaktifkan tag HTML berjalan di dalam konten html : Memberikan konten berupa tag Html dan join untuk jika kamu ingin mengisi lebih dari satu baris items[xtype:titlebar] : Items dengan xtype:titlebar disini untuk membuat titlebar Oke sekarang silahkan kamu edit kata-kata pada html sesuai dengan keinginan kamu. Saya akan mencoba mengubah menjadi , berikut : { title: 'Home', iconCls: 'home', styleHtmlContent:true, scrollable: true,
items: { docked: 'top', xtype: 'titlebar', title: 'Selamat Datang' }, html:[ "
Halo ini aplikasi saya loh" ].join("") } Apa yang terjadi?
Yaps, kata-katanya berganti. (ya iyalah kan tadi suruh ganti!). Nahhhhhh. Sekarang kita coba merubah text pada titlebar “Selamat Datang” menjadi “Welcome” dan docked menjadi “bottom”. Apa yang terjadi?
Yaps, Text pada titlebar berubah menjadi “Welcome” dan posisi titlebar menjadi ke bawah, jadi kita tahu docked adalah untuk mengatur posisi element. Docked juga bisa di rubah menjadi left, top, bottom dan right. Nah. Sekarang kita akan coba memasukan gambar di dalam aplikasi kitahh. Caranya masukan gambar pada folder /resources/ dan buat folder baru yaitu images/ dan simpan gambar tersebut dalam folder itu. Lalu, gimana cara memanggil gambarnya dong mas asheep yang ganteng ? Caranya seperti berikut : { title: 'Home', iconCls: 'home', styleHtmlContent:true, scrollable: true, items: { docked: 'top', xtype: 'titlebar', title: 'Welcome' }, html:[ "
Halo ini aplikasi saya.loh", "
",
'
' ].join("") } hasilnya
Nah gampang kan??? Oke sekarang gimana dong caranya buat file css sendiri di sencha? Duh gampil. Buat file css kamu di folder resource/css/file_css_kamu.css , nah setelah itu, kamu harus mendaftarkan file kamu di app.json. Kenapa? Agar file css yang kamu masukan terbaca oleh aplikasi kamu. Buka file app.json lalu ketikan kode berikut : Cari tag ini : "css": [ { "path": "resources/css/app.css", "update": "delta" } ], lalu kalian tambahkan ini "css": [ { "path": "resources/css/app.css", "update": "delta" }, { "path": "resources/css/my_style.css", "update": "delta" } ], untuk keterangannya kalian bisa baca di bagian komen atas. Nah sekarang kita tinggal buat objek yang ingin kita berikan style. Contohnya , saya akan memberikan style pada gambar saya tadi dengan memberikan class pada gambar terlebih dahulu.
Dan jrengg…..
Kita berhasil memberikan style pada gambar. Hal ini bisa kamu lakukan juga pada div yang kamu buat di html, tapi perlu diingat untuk mengubah tampilan design pada aplikasi kamu. Kamu gak bisa dari file css yang kamu buat barusan. Tapi kamu perlu merubah di file .scss ( ini akan saya bahas nanti klo udah tau MVC sencha :D ) Nah gampang kan? Udah pada mabok belom?? Heheheheh Tenang-tenang buat gini gak usah serius-serius banget mukanya , biasa aja yah :D kita pelan-pelan belajar disini :D Nah selanjutnya kita akan buat Page Kedua , yaitu About Me Caranya? Kamu tinggal copy items menjadi seperti ini.
Ext.define('MyApp.view.Main', { extend: 'Ext.tab.Panel', xtype: 'main', requires:[ 'Ext.TitleBar' ], config: { tabBarPosition: 'bottom', items:[ { title: 'Home', iconCls: 'home', styleHtmlContent:true, scrollable: true, items: { docked: 'top', xtype: 'titlebar', title: 'Welcome' }, html:[ "
Halo ini aplikasi saya.loh", "
", '
' ].join("") }, { title: 'Home',
iconCls: 'home', styleHtmlContent:true, scrollable: true, items: { docked: 'top', xtype: 'titlebar', title: 'Welcome' }, html:[ "
Halo ini aplikasi saya.loh", "
", '
' ].join("") } ] } }); Nah apa yang terjadi? Pagenya nambah gak? Jadi kalian dapat menyimpulkan kalau items yang membungkus (alah bahasanya) title, html, scrollable dll. Itu merupakan page. Sehingga klo di ilustrasikan menjadi seperti ini :
Nah kamu bisa liat pada halaman kedua, sebenarnya ada di sebelah samping. Ketika kita tap button maka akan bergeser. Begitu juga halaman-halaman Ketiga, Keempat dan seterusnya. Nah. Sekarang kamu bisa bereksperimen pada halaman kedua ini.
Selamat belajar sahabat jaco! Kalian bisa download file lengkapnya Disini
Tentang Penulis
asep saepulloh Kode itu alat perang, bung! :D
