High Level User Interface

Versi 0.1

Pembangunan Aplikasi Mobile

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

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 areencapsulated

must implement own navigation

cannot define actual appearance can define actual appearance on pixellevel

no access to device specific features access to low-level input like key presses

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

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

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

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

Displayable

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)

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

Command

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

Screen

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)

Item

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.

Tipe-tipe Alert

INFO Alert Modal Alert Alert w/ gauge indicator

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.

List

List.IMPLICIT List.EXCLUSIVE List.MULTIPLE

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)

Text Box

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

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.

Choice Group

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”

DateField

DateField input modes Selecting a date Time input

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.

String Item

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)

Image Item

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

Text Field