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

8. Displayable

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

11. Command

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

13. Screen

14. Item
Property Default Value
Label specified in the subclass constructor
Commands none
defaultCommand null
ItemCommandListener null
Layout directive LAYOUT_DEFAULT
Preferred width and height -1 (unlocked)

15. Item

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.

17. Tipe-tipe Alert
INFO Alert Modal Alert Alert w/ gauge indicator

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.

19. List
List.IMPLICIT List.EXCLUSIVE List.MULTIPLE

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)

21. Text Box

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.

24. Choice Group

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”

26. DateField
DateField input modes Selecting a date Time input

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.

28. String Item

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)

30. Image Item

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

32. Text Field