P4 Bab 4 User Interface

P4

Bab 4 – User Interface

4.1 Tujuan

Mahasiswa mengerti dasar-dasar mobile computing dan mampu memprogramnya.

4.2 Materi

1.

User Interface

2.

Struktur GUI dalam MIDP

3.

Paket javax.microedition.lcdgui

4.

Arsitektur LCDUI

5.

Class High Level API

6.

Class Low Level API

4.3 User Interface

•

User interface menjadi kebutuhan yang sangat penting dalam pemrograman mobile. Berbeda

dengan aplikasi desktop tentunya, kebutuhan UI di mobile tidak akan mengenal mouse dan

keyboard melainkan diganti dengan keypad.

•

Class's dasar yang dibutuhkan dalam pemrograman mobile disimpan dalam konfigurasi

CLDC, yang harus dilengkapi pada bagian profile.

•

CLDC tidak mendefinisikan class yang dibutuhkan untuk fungsional GUI, class's yang

diperlukan untuk pembuatan GUI dalam J2ME dikembangkan oleh JCP (Java Community

Process) yang telah dimasukkan di dalam profile seperti MIDP.

AWT (Kenapa Tidak Digunakan ?)

•

Alasan :

◦

AWT didesain dan dioptimasi untuk pengembangan aplikasi desktop.

◦

Banyak sekali fitur yang disediakan di dalam paket AWT, sehingga secara

otomatis membutuhkan penggunaan memory yang besar. Padahal seperti yang

kita tahu bahwa perangkat mobile mempunyai memory dan media penyimpanan

yang sangat terbatas.

4.4 Struktur GUI dalam MIDP

•

Struktur GUI dalam MIDP dibagi menjadi dua bagian :

◦

High level API

▪

Digunakan untuk pembuatan window/widget.

▪

Terdiri dari komponen Container dan Item.

▪

Class yang digunakan dalam level ini standard untuk keperluan UI, seperti Form,

TextBox, List, Alert, dan sebagainya.

◦

Low Level API,

▪

Digunakan untuk pembuatan canvas dan pixel

▪

Mempunyai kendali penuh terhadap pembuatan komponen maupun interaksi

komponen dengan user.

▪

Class yang digunakan di level ini adalah class Cancas beserta turunannya

GameCanvas.

4.5 Paket javax.microedition.lcdgui

•

Semua class untuk kebutuhan GUI di dalam MIDP disimpan dalam paket lcdui.

•

Maka dari itu, untuk menggunakan paket lcdui dalam pembuatan aplikasi, sebelumnya paket

tersebut harus diimport terlebih dahulu :

import javax.microedition.lcdgui.*;

•

Paket lcdui terdiri dari beberapa interface dan class, daftar interface yang disediakan di

dalam paket lcdui, dapat dilihat pada Tabel 4.1. Sedangkan daftar class yang disediakan di

dalam paket lcdui, dapat dilihat pada Tabel 4.2.

Tabel 4.1 Interface dalam paket lcdui

Interface Keterangan

Choice Digunakan untuk mendefinisikan API sebagai komponen UI yang mengimplementasikan pemilihan dari sejumlah piihan yang didefinisikan.

CommandListener Digunakan oleh aplikasi-aplikasi yang perlu menerima event-event level tinggi.

ItemStateListener Digunakan oleh aplikasi-aplikasi yang menerima event yang mengindikasikan perubahan keadaan (state) dari item yang terdapat di dalam object form.

Tabel 4.2 Class dalam paket lcdui

Interface Keterangan

Alert Notifikasi, menampilkan data dalam jengka waktu tertentu sebelum kembali ke layar sebelumnya. AlertType Mendefinisikan tipe-tipe dari object Alert yang akan ditampilkan.

Canvas Class dasar yang digunakan oleh aplikasi-aplikasi yang membutuhkan event level rendah atau untuk proses peggambaran.

ChoiseGroup Sekumpulan elemen pemilihan yang ditampilkan di form.

Command Konstruksi yang membungkus informasi-informasi mengenai akses yang dilakukan oleh user. CommandItem Digunakan untuk membuat elemen user interface baru yang akan ditempatkan di form. DateField Komponen yang digunakan untuk menampilkan tanggal dan waktu.

Display Komponen yang digunakan untuk mampresentasikan manager tampilan. Displayable Object yang memiliki kemampuan yang dapat ditempatkan pada layar tampilan.

Font Komponen yang digunakan untuk mempresentasikan format font yang akan ditampilkan di layar. Form Object layar yang dapat ditambahkan dengan item-item yang lain.

Gauge Mengimplementasikan tampilan grafish yang menunjukkan nilai tertentu yang ditempatkan ke dalam sebuah form.

Graphics Menyediakan kemampuan menggambar di object canvas. Image Menyimpan data dalam format gambar.

ImageItem Menyediakan control layout terhadap gambar-gambar yang ditampilkan dalam form. Item Class dasar untuk komponen-komponen yang ditempatkan di dalam form.

List Menampilkan layar yang berisi daftar pilihan.

Screen Class dasar dari semua komponen layar dalam user interface level tinggi. StringItem Item yang bersisi string yang ditempatkan di form.

TextBox Menampilkan layar yang mengizinkan user untuk mengedit teks. TextField Komponen untuk menginputkan teks yang ditempatkan di atas form.

Ticker Teks yang berjalan terus-menerus di layar, setiap tipe layar dapat ditambahkan dengan object Ticker selain Canvas.

4.6 Arsitektur LCDUI

Gambar 4.1 Struktur komponen MIDlet (LCDUI)

Class Display

•

Class display merupakan class inti dari sebuah MIDP UI, class display inilah yang

akan ditampilkan di layar perangkat mobile.

•

Deklarasi method getDisplay() :

public static Display getDisplay (MIDlet m)

•

Method yang terdapat di dalam class Display dapat digunakkan untuk menampilkan

object-object turunan dari class Displayable ke layar.

◦

Object Displayable ini merepresentasikan sebuah tampilan layar.

◦

Object Displayable ini merepresentasikan sebuah tampilan layar, misalnya

seperti Form, TextBox, dll.

•

Perhatikan kembali contoh program :

private Display display;

◦

Penggalan program di atas digunakan untuk mendeklarasikan variable dengan

Object Ticker Displayable Command Item Display Canvas Screen Form List Alert TextBox StringItem ImageItem ChoiceGroup Gaube DataField TextField CustomItem Spacer GameCanvas extends extends extends extends Extends adding

nama display yang mengacu ke class Display.

◦

Selanjutnya untuk mendapatkan instance/pembuatan dari class Display dan

menyimpannya ke dalam variabel display, digunakan method getDisplay()

pada saat constructor HelloMIDlet, seperti berikut :

1 2 3 4 public HelloMIDlet() { display=Display.getDisplay(this); }

◦

Key this menunjukkan object HelloMIDlet, sehingga dapat juga ditulis seperti

berikut :

1 2 3 4 public HelloMIDlet() { display=Display.getDisplay(HelloMIDlet); }

◦

Object Displayable hanya boleh ditampilkan sekali dalam waktu yang sama

(misalnya object Form & TextBox). Sehingga untuk memilih object yang

akan ditampilkan di layar digunakan method setCurrent() dengan deklarasi

seperti berikut :

Public void setCurrent(Displayable d)

public void setCurrent (Alert a, Displayable d)

Sebagai contoh, perhatikan penggalan program berikut.

1 2 3 4 5 6

public void startApp() {

TextBox sq =

new TextBox("Hello MIDlet-J2ME", "Hello FTI UMBY ..!", 256, 0); display.setCurrent(sq);

}

Keterangan :

◦

Pada saat aplikasi dijalankan, object Displayable akan ditampilkan di

layar dengan object sq, yang telah dideklarasikan sebagai object tb.

◦

Jika ingin mendapatkan object yang sedang aktif (sedang ditampilkan di

layar), dapat digunakan method getCurrent() dengan deklarasi seperti

berikut :

Class Displayable

•

Class Displayable memiliki turunan class Screen dan Canvas.

◦

Screen, untuk pembuatan aplikasi GUI yang didasarkan pada pembentukan

window/form.

◦

Canvas, untuk pembuatan gambar, seperti kotak, lingkaran, dll.

•

Instance dari class Displayable dapat berisi beberapa object Command, yang berguna

untuk melakukan inisiasi aksi-aksi tertentu di dalam aplikasi.

•

Untuk mengeset obejct Item yang akan ditempatkan di dalam object Displayable,

dapat digunakan setCurrentItem() dengan deklarasi sebagai berikut.

public void setCurrentItem (Item item)

4.7 Class High Level API

•

Dibagi menjadi 2 kategori :

◦

Turunan class Screen (Alert, TextBox, Form, List)

◦

Turunan class Item (ChoiseGroup, Spacer, CustomItem, StringItem, ImageItem,

TextField, DateField, Gauge)

•

object-object turunan dari class Item selanjutnya akan ditampilkan dalam sebuah object

Form (tipe khusus dari class Screen).

Class Screen

Form

•

Seperti yang telah dibahas sebelumnya bahwa form merupakan tempat dari

object-object yang lain seperti TextField, Datefield, StringItem, ImageItem, Gauge, dll.

•

Form memiliki dua buah constructor, sebagai berikut :

Displayable Screen Form List Alert TextBox extends extends

1 Form (String title)

◦

Constructor akan membuat instance dari class Form tanpa ada kontrol di

dalalmnya. (hanya akan membuat form kosong dengan judul)

2 Form (String title, Item[] items)

◦

Constructor akan melewatkan kontrol-kontrol apa saja yang akan ditempatkan

ke dalam form pada saat membuat form baru. Kontrol-kontrol tersebut

disimpan dalam parameter items (merupakan array dari class Item).

•

Item-item di dalam form akan di indeks dengan 0 (bukan 1). dengan begitu item-item

tersebut dapat dimanipulasi (menambah, menghapus, mengganti).

◦

Penambahan item ke dalam form dapat dilakukan dengan menggunakan

method append() atau insert() dari class Form.

◦

Penghapusan item dapat dilakukan dengan menggunakan method delete()

atau deleteAll().

◦

Penggantian item dapat dilakukan dengan menggunakan method set().

•

Pendeklarasian method :

1 2 3 4 5 6 7

public int append (Item items) public int append (String s) public int append (Image image)

public void insert (int itemNum, Item item) public void delete (int itemNum)

public void deleteAll ()

public void set (int itemNum, Item item)

Contoh program : P1_Form.java 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 /* * Program contoh implementasi penggunaan Form * @author : SQ

--- */ import javax.microedition.lcdui.*;

import javax.microedition.midlet.*;

public class P1_Form extends MIDlet implements CommandListener {

private Display display; private Form form1;

private Command cmdKeluar; //contructor

public P1_Form() {

display = Display.getDisplay(this);

cmdKeluar = new Command("Exit", Command.EXIT, 1); }

21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

public void startApp() {

form1 = new Form("Contoh Form"); //membuat form

// menambahkan teks ke dalam form form1.append("Identitas Pribadi"); form1.append("========================"); form1.append(" NIM = 10111071 ");

form1.append(" Nama = Annisa Retno Sari ");

form1.append(" Program Studi = Teknik Informatika "); // menambahkan Command ke dalam form

form1.addCommand(cmdKeluar); form1.setCommandListener(this); display.setCurrent(form1); }

public void pauseApp() {}

public void destroyApp(boolean unconditional) {

notifyDestroyed(); }

public void commandAction(Command cmd, Displayable disp) { if (cmd == cmdKeluar) { destroyApp(false); } } }

Alert

•

Ilustrasi :

◦

misalnya pada aplikasi desktop, terdapat object yes/no yang digunakan untuk

menampilkan pesan-pesan tertentu misalnya seperti : peringatan, konfirmasi,

error.

•

Alert ditampilkan dengan jangka waktu tertentu.

•

Alert memiliki dua buah constructor :

1 Alert (String title)

◦

Costructor akan melakukan inisiasi object alert dengan parameter title.

2 Alert (String title, String allertText, Image alertImage, AlertType alertType)

◦

Contructor mengijinkan untuk menampilkakn teks, gambar dan tipe Alert

yang akan ditampilkan.

◦

Tipe Alert direpresentasikan oleh class AlertType, MIDP memiliki lima buah

type Alert yang didefinisikan sebagai field static di dalam class AlertType,

tipe-tipe Alert tresebut antara lain :

▪

ALARM

▪

CONFIRMATION

▪

ERROR

▪

INFO

▪

WARNING

◦

Untuk menentukan lama object Alert akan ditampilkan dapat digunakan

method setTimeout() yang terdapat di dalam class Alert. Deklarasinya adalah

sebagai berikut :

Public void setTimeout(int time)

time >> merupakan parameter bertipe int yang digunakan untuk menentukan

lama Alert akan ditampilkan di layar.

Contoh program : P2_Alert.java 1 2 3 4 5 6 7 8 /* * Program contoh implementasi penggunaan Alert * @author : SQ

--- */ import javax.microedition.lcdui.*;

9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 66 67 68 69 70 71 72

public class P2_Alert extends MIDlet implements CommandListener {

private Display display; private Form form; private Alert alert; private Command cmdKeluar; private Command cmdAlert; // constructor

public P2_Alert() {

display = Display.getDisplay(this); // membuat form

form = new Form("Contoh Alert"); // menambahkan teks ke dalam form

form.append("Contoh implementasi penggunaan Alert"); // membuat dua buah Command, "Exit" dan "Alert" cmdKeluar = new Command("Exit", Command.EXIT, 1); cmdAlert = new Command("Alert", Command.SCREEN, 2); // menambahkan Command ke dalam form

form.addCommand(cmdKeluar); form.addCommand(cmdAlert); form.setCommandListener(this); }

public void startApp() {

display.setCurrent(form); }

public void pauseApp() {}

public void destroyApp(boolean unconditional) {}

// mendefinisikan method untuk membuat dan menampilkan Alert private void showAlert()

{

String info = "Info : \n Ini merupakan contoh Penggunaan Alert "; // membuat instance dari kelas Alert

alert = new Alert("Informasi", info, null, AlertType.ALARM); // mengeset berapa lama Alert akan ditampilkan

alert.setTimeout(5000); // 5000 ms = 5 s // menampilkan Alert

display.setCurrent(alert, form); }

public void commandAction(Command cmd, Displayable disp) {

if (cmd == cmdKeluar) {

destroyApp(true); notifyDestroyed();

73 74 75 76 77 78 79 } else if (cmd == cmdAlert) {

showAlert(); // memanggil method showAlert() }

} }

TextBox

•

Ilustrasi :

◦

misalnya pada saat mengirim SMS, Anda akan melihat layar inputan kosong,

layar tersebut dibuat dengan menggunakan TextBox.

•

Constructor dari TextBox akan dideklarasikan :

1 TextBox(String title, String text, int MaxSize, int constraints)

•

Keterangan :

Parameter Keterangan

title Judul TextBox

text Teks yang akan ditampilkan pada saat inisiasi awal

MaxSize Jumlah maksimum karekter yang dapat ditampilkan di TextBox

contraint Batasan untuk menentukan karakter-karakter apa saja yang dapat diinputkan ke dalam TextBox

•

Contraint di dalam TextBox (yang selanjutnya didefinisikan sebagai field), dapat

dilihat pada tabel berikut.

Constraint Keterangan

ANY Sembarang karakter atau teks apapun

EMAILADDR Hanya diizinkan untuk menulis teks yang berupa alamat email

NUMERIC Hanya diizinkan untuk menulis bilangan bulat, tetapi karakter pertama dapat berupa tanda minus.

PASSWORD Teks yang dituliskan akan terlihat dalam bentuk password (*). PHONENUMBER Hanya diizinkan untuk menulis nomor telepon

URL Hanya diizinkan untuk menulis alamat website dalam bentuk URL (Uniform Resource Locator) Contoh program : P3_TextBox.java 1 2 3 4 5 6 7 8 9 10 11 12 13 14 /* * Program contoh implementasi penggunaan TextBox * @author : SQ

--- */ import javax.microedition.lcdui.*;

import javax.microedition.midlet.*;

public class P3_TextBox extends MIDlet implements CommandListener {

private Display display; private TextBox textbox1; private Form form1;

15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66

private Command cmdInfoTeks; private Command cmdKembali; public P3_TextBox()

{

display = Display.getDisplay(this);

textbox1 = new TextBox("Contoh TextBox", null, 256, TextField.ANY); cmdKeluar = new Command("Exit", Command.EXIT, 1);

cmdInfoTeks = new Command("Info Text", Command.SCREEN, 2); cmdKembali = new Command("Back", Command.SCREEN, 2);

textbox1.addCommand(cmdKeluar); textbox1.addCommand(cmdInfoTeks); textbox1.setCommandListener(this); }

public void startApp() {

display.setCurrent(textbox1); }

public void pauseApp() {}

public void destroyApp(boolean unconditional) {}

public void commandAction(Command cmd, Displayable disp) { if (cmd == cmdKeluar) { destroyApp(true); notifyDestroyed(); } else if (cmd == cmdInfoTeks) {

form1 = new Form("Infor Text");

form1.append("Text yang di inputkan: " + textbox1.getString() + "\n"); form1.append("Jumlah karakter: " + textbox1.size() + "\n");

form1.append("Posisi cursor: " + textbox1.getCaretPosition()); form1.addCommand(cmdKembali); form1.setCommandListener(this); display.setCurrent(form1); } else if (cmd == cmdKembali) { display.setCurrent(textbox1); } } }

List

•

Bentuk contructor dari class List :

1 List (String title, int ListType)

◦

Constructor pertama hanya membuat List kosong dengan judul dan tipe.

Sehingga harus dimanipulasi sendiri dengan menggunakan method-method

tertentu melalui source code.

Method Keterangan

append() Menambahkan item dan menempatkannya diposisi terakhir

insert() Menambahkan item dan menempatkannya di posisi sebelum posisi item yang sedang dipilih (aktif)

delete() Menghapus item yang sedang dipilih

deleteAll() Menghapus semua item yang terdapat di dalam object List

2 List (String title, int listType, String[] choises, Image[] images)

◦

Constructor tersebut mempunyai dua buah parameter choises (yang berfungsi

melewatkan item-item yang akan diisikan) dan parameter images (yang

berfungsi menyimpan dafar gambar icon dari item-item yang akan

diinputkan)

Tipe Keterangan EXCLUSIVE Berupa radio button (hanya dapat dipilih salah satu) MULTIPLE Berupa check box (dapat dipilih lebih dari satu) IMPLICIT Berupa list standar yang paling banyak digunakan.

•

Untuk mengetahui item yang sedang dipilih, class List mendefinisikan tiga buah

method :

1 2 3

public int getSelectedIndex()

public getSelectedFlags(boolean[] selected) public boolean isSelected (int elementNum)

◦

Method 1 : digunakan untuk mendapatkan indeks dari item aktif yang sedang

dipilih dalam List dengan tipe EXCLUSIVE atau IMPLICIT.

◦

Method 2 : digunakan untuk mendapatkan flag dari item-item yang sedang

dipilih dalam List dengan tipe MULTIPLE. Selanjutnya nilai yang didapat

akan ditampung di dalam array yang dilewatkan sebagai parameternya.

◦

Method 3 : digunakan untuk memerikasa apakah item dengan indeks tertentu

sedang dipilih atau tidak, yang selanjutnya indeks tersebut dimasukkan

sebagai input parameter.

•

Dalam bekerja dengan List, diijinkan untuk melakukan pilihan terhadap item-item

yang ada melalui kode program secara langsung dengan menggunakan method

setSelectedIndex() dan setSelectedFlag(). Deklarasi :

1

2 public void setSelectedIndex(int elementnum, boolean selected)public void setSelectedFlag(boolean[] selected) Contoh program : P4_ListImplicit.java 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 /* * Program contoh implementasi penggunaan Implicit List * @author : SQ

--- */ import javax.microedition.lcdui.*;

import javax.microedition.midlet.*;

public class P4_ListImplicit extends MIDlet implements CommandListener {

private Display display; private List list1; private Command cmdPilih; private Command cmdKembali;

public P4_ListImplicit() {

18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 display = Display.getDisplay(this); }

public void startApp() {

// membuat daftar command yang akan digunakan

cmdPilih = new Command("Select", Command.SCREEN, 2); cmdKembali = new Command("Back", Command.EXIT, 1); // membuat gambar icon untuk setiap item List Image img; try { img = Image.createImage("/dnd.png"); } catch (Exception e) { img = null; }

// membuat List dengan tipe IMPLICIT

list1 = new List("List Tipe IMPLICIT", Choice.IMPLICIT); list1.append("Pilihan I", img);

list1.append("Pilihan II", img); list1.append("Pilihan III", img); list1.append("Pilihan IV", img); list1.addCommand(cmdPilih); list1.addCommand(cmdKembali); list1.setCommandListener(this); display.setCurrent(list1); }

public void pauseApp() {}

public void destroyApp(boolean unconditional) {

notifyDestroyed(); }

public void commandAction(Command cmd, Displayable disp) { if (cmd == cmdKembali) { destroyApp(false); } else {

int indeks = list1.getSelectedIndex(); Alert info = new Alert("Informasi");

info.setString("Anda memilih: " + list1.getString(indeks)); info.setTimeout(Alert.FOREVER);

display.setCurrent(info, list1); }

} }

4.8 Evaluasi

Pada contoh program TextBox, modifikasilah program tersebut dengan menambahkan penggunaan

method :

1 2 3

public void delete (int offset, int length) public void insert (String src, int position) public void setString(String text)

Note :