Dokumen ini membahas tentang penggunaan high level user interface dan low level user interface dalam pengembangan aplikasi mobile. High level user interface lebih portable dan memiliki tampilan yang konsisten di berbagai perangkat, sementara low level user interface memungkinkan pengontrolan tampilan secara langsung. Dokumen ini juga menjelaskan beberapa komponen user interface seperti screen, form, list, text box, dan lainnya beserta cara penggunaannya.
1. High Level User Interface
Versi 0.1
Pembangunan Aplikasi Mobile
2. Tujuan
Mengetahui manfaat menggunakan high level user
interface dan low level user interface
Mengetahui kapan menggunakan library low level user
interface atau high level user interface
Mendesain MIDlet dengan menggunakan high level user
interface
Mengidentifikasi beberapa sub class dari Screen
Mengetahui beberapa items yang dapat diletakkan pada
sebuah object Form
3. High Level vs Low Level
High Level UI Low-Level UI
highly portable across devices may be device-specific
look and feel is the same as device application specific look and feel
interactions like scrolling are
encapsulated
must implement own navigation
cannot define actual appearance can define actual appearance on pixel
level
no access to device specific features access to low-level input like key presses
4. Kapan menggunakan
High Level UI?
Jika Anda akan membangun aplikasi sederhana, berupa
aplikasi text based
Apabila Anda ingin aplikasi Anda dapat digunakan pada
banyak device (portability)
Apabila Anda ingin aplikasi Anda memiliki kesamaan
tampilan pada komponen-komponen UI-nya pada device
yang berbeda
Apabila Anda menginginkan untuk melakukan sedikit
pengkodean, dimana interaksi terbanyak akan telah
dihandle didalam API
5. Kapan menggunakan
Low Level GUI?
Apabila Anda menginginkan untuk mengontrol secara mandiri
tampilan dari sebuah aplikasi
Apabila aplikasi Anda membutuhkan penempatan element UI
secara tepat kedalam screen
Apabila Anda membangun sebuah graphical games, walaupun
Anda tetap dapat menggunakan high level UI pada menu-menu
games, tetapi lebih baik Anda menggunakan menu UI yang Anda
ciptakan sendiri untuk memberikan environment yang lebih baik
bagi user
Apabila aplikasi membutuhkan akses kepada low-level input
seperti tekan key
Apbila aplikasi Anda akan mengimplementasikan layar navigasi
yang diciptakan sendiri
6. Display
Satu-satunya object untuk menampilkan sesuatu
ke layar pada tiap MIDlet
MIDlet dapat meminta reference kepada object
Display dengan menggunakan static
Display.getDisplay(), untuk memberikan
reference pada instance dari MIDlet
MIDlet akan memastikan bahwa object Display
tidak akan berubah selama object dari MIDlet
tersebut tersedia
7. Displayable
Hanya satu displayable yang akan ditampilkan pada tiap
display
Secara default, Displayable tidak ditampilkan ke Display
Sebuah Displayable dapat dipanggil dengan menggunakan
setMethod() dari object Display
Method setCurrent() akan dipanggil pada memulai aplikasi,
jika tidak maka sebuah blank screen akan tampil
9. Title
Posisi dan tampilan dari title sangat bergantung kepada
spesifikasi device dan hanya dapat ditentukan oleh device
Sebuah title ditambahkan pada sebuah Displayable dengan
memanggil method setTitle()
Memanggil method ini berarti secara otomatis akan meng-
update title pada Displayable. Jika Displayable sudah
tampil pada layar, spesifikasi MIDP akan menentukan
bahwa title haruslah diganti oleh implementasi (secepat
mungkin dikenali, dan secepat mungkin dilaksanakan)
10. Command
Didalam menu bar, MIDlet memiliki command
Command biasanya diimplementasikan dalam MIDP
sebagai soft key atau item didalam menu
Sebuah object command berisi informasi mengenai action-
action yang akan dilakukan pada saat command tsb
diaktifkan. Command tidak berisi code yang akan
dieksekusi pada saat command tsb diaktifkan
Diperlukanlah sebuah commandListener sebagai properti
dari Displayable yang berisi action-action yang akan
dieksekusi pada saat Command diaktifkan
12. CommandListener
public void commandAction(
Command command,
Displayable displayable)
Method commandAction() akan dipanggil pada saat
sebuah Command dipilih
Variabel pada command adalah reference pada
Command yang sudah dipilih
displayable adalah object dari Displayable, dimana
Command ditempatkan didalam display tersebut dan
action-action juga terjadi dalam display yang sama
16. Alert
Alert adalah screen yang dapat merepresentasikan sebuah
text dan image
Alert adalah sebuah komponen yang digunakan untuk
menampilkan error, peringatan, menampilkan text dan
image sebagai informasi atau memberikan konfirmasi
kepada user
The Alert is displayed for a specified period of time. This
time is set using the setTimeout() method and is specified
in milliseconds unit. It can be made to be displayed until
the user activates a command ("Done") by specifying a
special timeout of Alert.FOREVER.
18. List
List adalah subclass dari Screen yang berisi
mengenai daftar yang dapat dipilih oleh user
List dapat memiliki tiga tipe : IMPLICIT, EXCLUSIVE
or MULTIPLE.
Jika List adalah IMPLICIT dan user mengeksekusi
button “select”, commandAction() milik
commandListener dari List akan dipanggil
Default Command adalah List.SELECT_COMMAND.
20. Text Box
Sebuah TextBox adalah sub-class dari Screen yang bisa
digunakan untuk mendapatkan masukan text dari user
TextBox memperbolehkan user untuk menginputkan dan
juga mengedit sebuah text.
TextBox sama dengan TextField (lihat item TextFiel) karena
ia memiliki input constraint dan input modes.
Perbedaan utamanya adalah user dapat menginputkan
baris yang baru (apabila input constraint diset ke ANY)
22. Form
Form adalah subclass dari Screen
Form merupakan container dari subclass items seperti
TextField, StringItem, ImageItem, DateField dan
ChoiceGroup.
Ia menghandle layout dari komponen-komponen GUI.
Ia juga bertanggung jawab terhadap traversal antar
komponen dan kemampuan scrolling pada Screen
23. ChoiceGroup
Item ChoiceGroup adalah daftar dari pilihan-pilihan
Pilihan tersebut bisa berisi text, image, maupun keduanya
Pilihan-pilihan tersebut bisa EXCLUSIVE (hanya satu pilihan
yang dapat diambil) atau MULTIPLE (beberapa pilihan
dapat dipilih pada waktu yang sama )
Jika ChoiceGroup bertipe POPUP, hanya satu pilihan yang
akan ditampilkan. Pop up yang sudah dipilih akan
ditampilkan pada saat item tersebut dipilih. Dari pop up
selection ini, user dapat menentukan pilihannya. Pilihan
yang ditampilkan haruslah pilihan yang telah ditentukan
oleh user tadi.
25. Date Field
Komponen DateField digunakan untuk menerima inputan
dari user berupa date dan time
DateField bisa berisi inputan date (mode DATE), inputan
time (mode TIME), atau keduanya (mode DATE_TIME )
Method getDate() memiliki return, current value yang
dimiliki oleh item tersebut. Method ini akan memiliki
kembalian null apabila item tidak diinisialisasi
Jika mode dari DateField adalah DATE, maka komponen
time diset ke nol, sedangkan apabila digunakan mode
TIME, komponen dari date akan diset ke “1 January 1970”
27. StringItem
StringItem adalah sebuah komponen yang hanya bisa
dibaca sehingga ia biasa diposisikan sebagai label atau
text.
Secara optional StringItem menerima beberapa mode
tampilan yaitu Item.PLAIN, Item.HYPERLINK atau
Item.BUTTON.
Jika mode tampilan itu berupa HYPERLINK atau BUTTON
maka default Command dan ItemCommandListener harus
diset pada item tersebut.
29. Image Item
ImageItem adalah image sederhana dimana sebuah image
dapat diletakkan pada sebuah komponen yang lain seperti
Form
public ImageItem(
String label,
Image img,
int layout,
String altText)
31. Text Field
TextField adalah sebuah item dimana user dapat
memasukkan encode input
Constraint dalam TextField:
◦ TextField.ANY
◦ TextField.EMAILADDR
◦ TextField.NUMERIC
◦ TextField.PHONENUMBER
◦ TextField.URL
◦ TextField.DECIMAL