P4 Bab 4 User Interface

P4 Bab 4 User Interface 4. Tujuan 4. Materi Mahasiswa mengerti dasar-dasar mobile computing dan mampu memprogramnya.. User Interface. Struktur GUI dalam MIDP. Paket javax.microedition.lcdgui 4. Arsitektur LCDUI 5. Class High Level API 6. Class Low Level API 4. 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 JME 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 dnd_07june07@live.com -

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.. Sedangkan daftar class yang disediakan di dalam paket lcdui, dapat dilihat pada Tabel 4.. Interface Choice CommandListener ItemStateListener Tabel 4. Interface dalam paket lcdui Keterangan Digunakan untuk mendefinisikan API sebagai komponen UI yang mengimplementasikan pemilihan dari sejumlah piihan yang didefinisikan. Digunakan oleh aplikasi-aplikasi yang perlu menerima event-event level tinggi. Digunakan oleh aplikasi-aplikasi yang menerima event yang mengindikasikan perubahan keadaan (state) dari item yang terdapat di dalam object form. SQ http://sidiq.mercubuana-ogya.ac.id dnd_07june07@live.com -

Alert Interface Tabel 4. Class dalam paket lcdui Keterangan Notifikasi, menampilkan data dalam jengka waktu tertentu sebelum kembali ke layar sebelumnya. AlertType Canvas ChoiseGroup Command CommandItem DateField Display Displayable Font Form Gauge Graphics Image ImageItem Item List Screen StringItem TextBox TextField Ticker Mendefinisikan tipe-tipe dari object Alert yang akan ditampilkan. Class dasar yang digunakan oleh aplikasi-aplikasi yang membutuhkan event level rendah atau untuk proses peggambaran. Sekumpulan elemen pemilihan yang ditampilkan di form. Konstruksi yang membungkus informasi-informasi mengenai akses yang dilakukan oleh user. Digunakan untuk membuat elemen user interface baru yang akan ditempatkan di form. Komponen yang digunakan untuk menampilkan tanggal dan waktu. Komponen yang digunakan untuk mampresentasikan manager tampilan. Object yang memiliki kemampuan yang dapat ditempatkan pada layar tampilan. Komponen yang digunakan untuk mempresentasikan format font yang akan ditampilkan di layar. Object layar yang dapat ditambahkan dengan item-item yang lain. Mengimplementasikan tampilan grafish yang menunjukkan nilai tertentu yang ditempatkan ke dalam sebuah form. Menyediakan kemampuan menggambar di object canvas. Menyimpan data dalam format gambar. Menyediakan control layout terhadap gambar-gambar yang ditampilkan dalam form. Class dasar untuk komponen-komponen yang ditempatkan di dalam form. Menampilkan layar yang berisi daftar pilihan. Class dasar dari semua komponen layar dalam user interface level tinggi. Item yang bersisi string yang ditempatkan di form. Menampilkan layar yang mengizinkan user untuk mengedit teks. Komponen untuk menginputkan teks yang ditempatkan di atas form. Teks yang berjalan terus-menerus di layar, setiap tipe layar dapat ditambahkan dengan object Ticker selain Canvas. SQ http://sidiq.mercubuana-ogya.ac.id dnd_07june07@live.com -

4.6 Arsitektur LCDUI Object Ticker Canvas extends GameCanvas Displayable Screen List extends extends Display extends Alert Command TextBox Item adding Form Extends ChoiceGroup Gaube Spacer DataField ImageItem CustomItem StringItem TextField Gambar 4. 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 dnd_07june07@live.com - 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 : 4 public HelloMIDlet() display=display.getdisplay(this); Key this menunjukkan object HelloMIDlet, sehingga dapat juga ditulis seperti berikut : 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. 4 5 6 public void startapp() TextBox sq = new TextBox("Hello MIDlet-JME", "Hello FTI UMBY..!", 56, 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() SQ http://sidiq.mercubuana-ogya.ac.id dnd_07june07@live.com - 5

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 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 extends Screen List 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 : SQ http://sidiq.mercubuana-ogya.ac.id dnd_07june07@live.com - 6

Form (String title) Constructor akan membuat instance dari class Form tanpa ada kontrol di dalalmnya. (hanya akan membuat form kosong dengan judul) 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 ). 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 : 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) 4 5 6 7 8 9 0 4 5 6 7 8 9 0 Contoh program : P_Form.java /* -------------------------------------------- * Program contoh implementasi penggunaan Form * @author : SQ ---------------------------------------------- */ import javax.microedition.lcdui.*; import javax.microedition.midlet.*; public class P_Form extends MIDlet implements CommandListener private Display display; private Form form; private Command cmdkeluar; //contructor public P_Form() display = Display.getDisplay(this); cmdkeluar = new Command("Exit", Command.EXIT, ); SQ http://sidiq.mercubuana-ogya.ac.id dnd_07june07@live.com - 7

4 5 6 7 8 9 0 4 5 6 7 8 9 40 4 4 4 44 45 46 47 48 49 50 5 5 5 54 public void startapp() form = new Form("Contoh Form"); //membuat form // menambahkan teks ke dalam form form.append("identitas Pribadi"); form.append("========================"); form.append(" NIM = 007 "); form.append(" Nama = Annisa Retno Sari "); form.append(" Program Studi = Teknik Informatika "); // menambahkan Command ke dalam form form.addcommand(cmdkeluar); form.setcommandlistener(this); display.setcurrent(form); public void pauseapp() public void destroyapp(boolean unconditional) notifydestroyed(); public void commandaction(command cmd, Displayable disp) if (cmd == cmdkeluar) destroyapp(false); SQ http://sidiq.mercubuana-ogya.ac.id dnd_07june07@live.com - 8

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 : Alert (String title) Costructor akan melakukan inisiasi object alert dengan parameter title. 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. 4 5 6 7 8 Contoh program : P_Alert.java /* -------------------------------------------- * Program contoh implementasi penggunaan Alert * @author : SQ ---------------------------------------------- */ import javax.microedition.lcdui.*; import javax.microedition.midlet.*; SQ http://sidiq.mercubuana-ogya.ac.id dnd_07june07@live.com - 9

9 0 4 5 6 7 8 9 0 4 5 6 7 8 9 0 4 5 6 7 8 9 40 4 4 4 44 45 46 47 48 49 50 5 5 5 54 55 56 57 58 59 60 6 6 66 67 68 69 70 7 7 public class P_Alert extends MIDlet implements CommandListener private Display display; private Form form; private Alert alert; private Command cmdkeluar; private Command cmdalert; // constructor public P_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, ); cmdalert = new Command("Alert", Command.SCREEN, ); // 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(); SQ http://sidiq.mercubuana-ogya.ac.id dnd_07june07@live.com - 0

7 74 75 76 77 78 79 else if (cmd == cmdalert) showalert(); // memanggil method showalert() SQ http://sidiq.mercubuana-ogya.ac.id dnd_07june07@live.com -

TextBox Ilustrasi : misalnya pada saat mengirim SMS, Anda akan melihat layar inputan kosong, layar tersebut dibuat dengan menggunakan TextBox. Constructor dari TextBox akan dideklarasikan : TextBox(String title, String text, int MaxSize, int constraints) Keterangan : Parameter title text MaxSize contraint Judul TextBox Keterangan Teks yang akan ditampilkan pada saat inisiasi awal Jumlah maksimum karekter yang dapat ditampilkan di TextBox 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. ANY Constraint EMAILADDR NUMERIC Sembarang karakter atau teks apapun Keterangan Hanya diizinkan untuk menulis teks yang berupa alamat email Hanya diizinkan untuk menulis bilangan bulat, tetapi karakter pertama dapat berupa tanda minus. PASSWORD Teks yang dituliskan akan terlihat dalam bentuk password (*). PHONENUMBER URL Hanya diizinkan untuk menulis nomor telepon Hanya diizinkan untuk menulis alamat website dalam bentuk URL (Uniform Resource Locator) 4 5 6 7 8 9 0 4 Contoh program : P_TextBox.java /* ----------------------------------------------- * Program contoh implementasi penggunaan TextBox * @author : SQ ------------------------------------------------ */ import javax.microedition.lcdui.*; import javax.microedition.midlet.*; public class P_TextBox extends MIDlet implements CommandListener private Display display; private TextBox textbox; private Form form; private Command cmdkeluar; SQ http://sidiq.mercubuana-ogya.ac.id dnd_07june07@live.com -

5 6 7 8 9 0 4 5 6 7 8 9 0 4 5 6 7 8 9 40 4 4 4 44 45 46 47 48 49 50 5 5 5 54 55 56 57 58 59 60 6 6 6 64 65 66 private Command cmdinfoteks; private Command cmdkembali; public P_TextBox() display = Display.getDisplay(this); textbox = new TextBox("Contoh TextBox", null, 56, TextField.ANY); cmdkeluar = new Command("Exit", Command.EXIT, ); cmdinfoteks = new Command("Info Text", Command.SCREEN, ); cmdkembali = new Command("Back", Command.SCREEN, ); textbox.addcommand(cmdkeluar); textbox.addcommand(cmdinfoteks); textbox.setcommandlistener(this); public void startapp() display.setcurrent(textbox); 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) form = new Form("Infor Text"); form.append("text yang di inputkan: " + textbox.getstring() + "\n"); form.append("jumlah karakter: " + textbox.size() + "\n"); form.append("posisi cursor: " + textbox.getcaretposition()); form.addcommand(cmdkembali); form.setcommandlistener(this); display.setcurrent(form); else if (cmd == cmdkembali) display.setcurrent(textbox); SQ http://sidiq.mercubuana-ogya.ac.id dnd_07june07@live.com -

List Bentuk contructor dari class List : 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() insert() delete() deleteall() Keterangan Menambahkan item dan menempatkannya diposisi terakhir Menambahkan item dan menempatkannya di posisi sebelum posisi item yang sedang dipilih (aktif) Menghapus item yang sedang dipilih Menghapus semua item yang terdapat di dalam object List 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, SQ http://sidiq.mercubuana-ogya.ac.id dnd_07june07@live.com - 4

Tipe EXCLUSIVE MULTIPLE IMPLICIT Keterangan Berupa radio button (hanya dapat dipilih salah satu) Berupa check box (dapat dipilih lebih dari satu) Berupa list standar yang paling banyak digunakan. Untuk mengetahui item yang sedang dipilih, class List mendefinisikan tiga buah method : public int getselectedindex() public getselectedflags(boolean[] selected) public boolean isselected (int elementnum) Method : digunakan untuk mendapatkan indeks dari item aktif yang sedang dipilih dalam List dengan tipe EXCLUSIVE atau IMPLICIT. Method : 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 : 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 : public void setselectedindex(int elementnum, boolean selected) public void setselectedflag(boolean[] selected) 4 5 6 7 8 9 0 4 5 6 7 Contoh program : P4_ListImplicit.java /* ---------------------------------------------------- * 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 list; private Command cmdpilih; private Command cmdkembali; public P4_ListImplicit() SQ http://sidiq.mercubuana-ogya.ac.id dnd_07june07@live.com - 5

8 9 0 4 5 6 7 8 9 0 4 5 6 7 8 9 40 4 4 4 44 45 46 47 48 49 50 5 5 5 54 55 56 57 58 59 60 6 6 6 64 65 66 67 68 69 70 7 7 7 74 display = Display.getDisplay(this); public void startapp() // membuat daftar command yang akan digunakan cmdpilih = new Command("Select", Command.SCREEN, ); cmdkembali = new Command("Back", Command.EXIT, ); // 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 list = new List("List Tipe IMPLICIT", Choice.IMPLICIT); list.append("pilihan I", img); list.append("pilihan II", img); list.append("pilihan III", img); list.append("pilihan IV", img); list.addcommand(cmdpilih); list.addcommand(cmdkembali); list.setcommandlistener(this); display.setcurrent(list); public void pauseapp() public void destroyapp(boolean unconditional) notifydestroyed(); public void commandaction(command cmd, Displayable disp) if (cmd == cmdkembali) destroyapp(false); else int indeks = list.getselectedindex(); Alert info = new Alert("Informasi"); info.setstring("anda memilih: " + list.getstring(indeks)); info.settimeout(alert.forever); display.setcurrent(info, list); SQ http://sidiq.mercubuana-ogya.ac.id dnd_07june07@live.com - 6

4.8 Evaluasi Pada contoh program TextBox, modifikasilah program tersebut dengan menambahkan penggunaan method : 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 : SQ http://sidiq.mercubuana-ogya.ac.id dnd_07june07@live.com - 7

SQ http://sidiq.mercubuana-ogya.ac.id dnd_07june07@live.com - 8

Note : Program dikumpulkan pada hari senin tgl oktober 04 SQ http://sidiq.mercubuana-ogya.ac.id dnd_07june07@live.com - 9