P4 Bab 4 User Interface

Program Studi Teknik Informatika Fakultas Teknologi Informasi

Universitas Mercu Buana Yogyakarta

Kampus II, Jl. Jembatan Merah, Nomor 84.C. Gejayan, Yogyakarta 55283, Telp: (0274) 6647444, Fax (0274) 550703

P4 Bab 4 – User Interface

4.1 Tujuan Mahasiswa mengerti dasar-dasar mobile computing dan mampu memprogramnya.

4.2 Materi 1. 2. 3. 4. 5. 6.

User Interface Struktur GUI dalam MIDP Paket javax.microedition.lcdgui Arsitektur LCDUI Class High Level API 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.

SQ – http://sidiq.mercubuana-ogya.ac.id – [email protected] - 1




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

Ticker

Canvas

Displayable

Screen

Object

extends

GameCanvas

List

extends Display

extends

extends

Alert

TextBox

Command

Item

adding

Form

Extends

ChoiceGroup

Gaube

Spacer

DataField

ImageItem

CustomItem

StringItem

TextField

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 SQ – http://sidiq.mercubuana-ogya.ac.id – [email protected] - 4




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 : public Displayable getCurrent()





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 Displayable

List

Screen extends extends

Alert

TextBox

Form

Form

• •

Seperti yang telah dibahas sebelumnya bahwa form merupakan tempat dari objectobject yang lain seperti TextField, Datefield, StringItem, ImageItem, Gauge, dll. Form memiliki dua buah constructor, sebagai berikut :





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 public public public public public public

int append (Item items) int append (String s) int append (Image image) void insert (int itemNum, Item item) void delete (int itemNum) void deleteAll () 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.*; import javax.microedition.midlet.*;





9 public class P2_Alert extends MIDlet implements CommandListener 10 { 11 private Display display; 12 private Form form; 13 private Alert alert; 14 private Command cmdKeluar; 15 private Command cmdAlert; 16 17 // constructor 18 public P2_Alert() 19 { 20 display = Display.getDisplay(this); 21 22 // membuat form 23 form = new Form("Contoh Alert"); 24 25 // menambahkan teks ke dalam form 26 form.append("Contoh implementasi penggunaan Alert"); 27 28 // membuat dua buah Command, "Exit" dan "Alert" 29 cmdKeluar = new Command("Exit", Command.EXIT, 1); 30 cmdAlert = new Command("Alert", Command.SCREEN, 2); 31 32 // menambahkan Command ke dalam form 33 form.addCommand(cmdKeluar); 34 form.addCommand(cmdAlert); 35 form.setCommandListener(this); 36 } 37 38 public void startApp() 39 { 40 display.setCurrent(form); 41 } 42 43 public void pauseApp() 44 {} 45 46 public void destroyApp(boolean unconditional) 47 {} 48 49 // mendefinisikan method untuk membuat dan menampilkan Alert 50 private void showAlert() 51 { 52 String info = "Info : \n Ini merupakan contoh Penggunaan Alert "; 53 54 // membuat instance dari kelas Alert 55 alert = new Alert("Informasi", info, null, AlertType.ALARM); 56 57 // mengeset berapa lama Alert akan ditampilkan 58 alert.setTimeout(5000); // 5000 ms = 5 s 59 60 // menampilkan Alert 61 display.setCurrent(alert, form); 62 } 66 67 public void commandAction(Command cmd, Displayable disp) 68 { 69 if (cmd == cmdKeluar) 70 { 71 destroyApp(true); 72 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; private Command cmdKeluar;





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

•

Keterangan

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) List mempunyai tiga tipe class,





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)

Sehingga hasilnya akan terlihat seperti berikut :









Note : • Program dikumpulkan pada hari senin tgl 21 oktober 2014


P4 Bab 4 User Interface

Recommend Documents