Titanium (Ti) menyediakan 3 kategori elemen visual berdasarkan fungsinya. Berikut ini beberapa komponen yang paling banyak digunakan:
Layout | Input | Info |
---|---|---|
|
|
|
Dalam bagian ini saya akan mengenalkan beberapa komponen dasar untuk pembuatan user iterface.
Window & View
Window (Ti.UI.Window
) adalah komponen yang berfungsi seperti canvas di mana semua elemen lain dimuat. Tanpa window aplikasi nggak akan bisa menampilkan apa-apa, jadi semua aplikasi harus memiliki minimal satu window. Selain itu, window juga merepresentasikan layar (screen) yang sedang aktif.
View (Ti.UI.View
) mirip dengan window, yaitu sebuah elemen visual kosong yang berfungsi untuk menampung elemen lainnya. Bedanya, view bisa kita pake untuk layout karena posisi & ukurannya bisa diatur sementara window nggak bisa karena ukurannya otomatis memenuhi layar.
Kita bisa bikin window, view, & komponen UI pake xml atau javascript.
<Alloy> <Window class="container"> <View id="view1"></View> </Window> </Alloy>
".container": { backgroundColor:"white" }, "#view1":{ top:'20', bottom:'50%', left:'30', right:'50%', backgroundColor:'red' }
$.index.open(); //bikin button var btn1 = Ti.UI.createButton({ title:'Button 1' }) //masukin btn1 ke view1 $.view1.add(btn1); //bikin view baru var view2 = Ti.UI.createView({ bottom:'20', left:'50%', right:'30', top:'50%', backgroundColor:'green' }) //masukin view2 ke window $.index.add(view2); var btn2 = Ti.UI.createButton({ title:'Button 2' }) //masukin btn2 ke view2 view2.add(btn2);
Button
Semua komponen visual dalam Ti bersifat interaktif. Salah satu yang pasti sering kita pake adalah Ti.UI.Button
. Untuk membuat sebuah button, kita pake xml atau skrip:
<Button id="myButton" >My Button Label</Button>
var myButton = Ti.UI.createButton({ title:"My Button Label" })
Untuk membuat button jadi interaktif, kita set event listener untuk event “click”.
<Alloy> <Window class="container"> <Button id="btn1">Button 1</Button> <Button id="btn2" onClick="clickHandler">Button 2</Button> </Window> </Alloy>
$.btn1.addEventListener('click',clickHandler); function clickHandler(e){ //btn yg diklik var btn = e.source; alert(btn.title+' clicked'); } $.index.open();
Dalam kode untuk file index.xml
di atas, ada dua cara mengeset event listener.
- Di controller (
index.js
) pake functionaddEventListener
- Langsung di view (
index.xml
) pake atributonClick
Menurut saya, cara yang pertama lebih baik daripada yang kedua karena dalam struktur MVC, view seharusnya nggak tau apa-apa tentang controller. Kalo pake atribut onClick
berarti ada ketergantungan antara button dengan controller-nya.
Tab & TabGroup
Ti.UI.TabGroup
kita pake untuk bikin menu berbentuk tab di bagian atas layar (Android) atau bawah (iOS). Setiap Tab
dalam TabGroup
berisi window yang ditampilkan bergantian tergantung tab mana yang diklik. Untuk menampilkan Window
kita nggak perlu nulis kode khusus karena Ti nanti yang bikin kodenya pada waktu kompilasi.
<Alloy> <TabGroup backgroundColor="white" > <Tab id="tab1" title="Tab 1"> <Window id="win1" title="Tab 1"> <Label id="label1" >I am Window 1</Label> </Window> </Tab> <Tab id="tab2" title="Tab 2"> <Window id="win2" title="Tab 2"> <Label id="label2" >I am Window 2</Label> </Window> </Tab> <Tab id="tab3" title="Tab 3"> <Window id="win2" title="Tab 2"> <Label id="label3" >I am Window 3</Label> </Window> </Tab> <Tab id="tab4" title="Tab 4"> <Window id="win4" title="Tab 4"> <Label id="label4" >I am Window 4</Label> </Window> </Tab> </TabGroup> </Alloy>
TableView & TableViewRow
TableView (Ti.UI.TableView
) adalah kontainer untuk menampilkan data dalam bentuk baris (TableViewRow
). Baris-baris ini bisa juga dikelompokkan dalam TableViewSection
.
<Alloy> <Window backgroundColor="white"> <TableView> <TableViewSection headerTitle="Fruit"> <TableViewRow title="Apple"/> <TableViewRow title="Bananas"/> </TableViewSection> <TableViewSection headerTitle="Vegetables"> <TableViewRow title="Carrots"/> <TableViewRow title="Potatoes"/> </TableViewSection> <TableViewSection headerTitle="Fish"> <TableViewRow title="Cod"/> <TableViewRow title="Haddock"/> </TableViewSection> </TableView> </Window> </Alloy>
Dalam artikel selanjutnya, saya akan bahas Controller dan Model plus contoh pembuatan aplikasi sederhana (kalo ga terlalu panjang).
Also in this category ...
- » Belajar Titanium - Bagian 1 : Hello World
- » Learning Gideros (and Lua) : Porting Advanced AS3 Animations code