by Anggie Bratadinata

Belajar Titanium – Bagian 2 : UI

Titanium (Ti) menyediakan 3 kategori elemen visual berdasarkan fungsinya. Berikut ini beberapa komponen yang paling banyak digunakan:

Layout Input Info
  • Window
  • View
  • TableView
  • TableViewRow
  • ScrollView
  • Button
  • TextField
  • TextArea
  • Switch
  • Slider
  • Picker
  • ProgressBar
  • ImageView
  • ActivityIndicator
  • Label
  • TableView
  • AlertDialog
  • WebView

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);

View

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.

  1. Di controller (index.js) pake function addEventListener
  2. Langsung di view (index.xml) pake atribut onClick

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.

Btn listener

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>

Tab group

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>

Tableview

Dalam artikel selanjutnya, saya akan bahas Controller dan Model plus contoh pembuatan aplikasi sederhana (kalo ga terlalu panjang).

Also in this category ...