Copyright Chocolove Mic 2003 IlmuKomputer.Com

(1)

T

i

_i

p

_p

s

_s

-

_-

T

_T

i

_i

p

_p

s

_s

J

2 ₂

M

_M

E

_E

C

h

o

c

o

l

o

v

e

M

i

c

http://www.mycgiserver.com/~chocolove2003

IlmuKomputer.Com

(2)

P

e

n

d

a

h

u

l

u

a

n

J

2

2 M

M

E

Chocolove Mic

http://www.mycgiserver.com/~chocolove2003

Pembagian Paket Java

Tidak perlu panjang lebar untuk memaparkan pada itu Java. Java adalah teknologi dan bahasa

pemrograman yang berjalan pada multiflatform sesuai dengan semboyannya yaitu “Write Once,

Run Anywhere”. Pada site official Java dari Sun yaitu

http://java.sun.com bisa ditemui tiga

pembagian paket Java yaitu :

• Java 2 Enterprise Edition (J2EE).

• Java 2 Standart Editon (J2SE).

• Java 2 Micro Edition (J2ME).

Penjelasan paling simple atas pembagian tersebut berdasarkan atas perangkat keras yang

digunakan.

a. Paket J2EE digunakan pada perangkat keras yang mempunyai spesifikasi dan memory

yang besar seperti pada komputer server.

b. Paket J2SE digunakan pada perangkat keras seperti komputer desktop.

c. Paket J2ME digunakan pada perangkat yang memiliki memory kecil seperti ponsel,

pager atau PDA.

Paparan singkat di atas adalah penjelasan singkat mengenai Java dan sedikit gambaran dimana

paket J2ME digunakan. Sebenarnya masih panjang penjelasan tentang Java dan paket J2ME,

tapi tidak dibahas pada tulisan ini, mungkin bisa menjadi pekerjaan rumah buat para pembaca

yang tertarik akan Java atau J2ME.

Midlet : Aplikasi J2ME

Mungkin sebagain kita telah menganal Applet sebagai aplikasi Java yang berjalan pada internet

yang bersifat client side atau Servlet yang bersifat server side. Sedangkan untuk aplikasi pada

paket J2ME diberi nama Midlet.

Lisensi Dokumen:

Copyright © 2003 IlmuKomputer.Com

Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan

disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat

tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang

disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang,

kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.

(3)

Perangkat untuk Midlet

Untuk penjalankan Midlet tentunya diperlukan perangkat keras (device) yang mendukung Java

artinya perangkat tersebut harus memiliki Java Virtual Machine untuk menjalankan Midlet.

Sekarang tidak susah lagi untuk menemui perangkat yang bisa menjalankan Midlet terutama

untuk jenis ponsel. Hampir setiap ponsel keluaran terbaru telah menyertakan dukungan akan

teknologi Java.

Emulator Ponsel Java

Untuk menjalankan Midlet, programmer tidak perlu memiliki dan mencobanya pada ponsel.

Cukup dengan emulator dari ponsel yang dapat dijalan pada PC. Berikut adalah contoh

emulator :

Siemens M55

Nokia 7210

J2ME WTK

http://www.my-siemens.com

http://forum.nokia.com

http://java.sun.com/j2me

Seri Tulisan Tip J2ME

Tulisan mengenai Tip J2ME ini akan dibagi atas beberapa kelompok bahasan, yaitu :

• User Interface dan Interaksi User.

• Grafik dan Animasi.

• Multimedia (sound dan video).

• Koneksi Internet.

(4)

Seri Interaksi User

L

i

s

t

d

a

n

I

n

t

e

r

a

k

s

i

U

s

e

r

Chocolove Mic

http://www.mycgiserver.com/~chocolove2003

Pada saat kita membuat aplikasi maka diperlukan link, tombol atau item lain yang bisa

digunakan user untuk berinteraksi dengan aplikasi. Gunanya tentu saja untuk mengantarkan

user ke bagian lain dari aplikasi sesuai yang ditunjuk oleh link, tombol atau link tersebut. API

MIDP mempunyai komponen yang dapat digunakan untuk membangun user interface seperti

list, radio button, selection box dan lain-lain. Tip dan Trik ini akan memberikan

langkah-langkah untuk membuat menu dengan menggunakan class List pada aplikasi ponsel.

Membuat Menu dengan List

Berikut adalah contoh kode program yang memuat penggunaan List untuk membuat menu.

MenuMidlet01.java

import javax.microedition.midlet.*; import javax.microedition.lcdui.*;

public class MenuMidlet01 extends MIDlet { private List mainMenu = null;

private Display display;

public MenuMidlet01() {

mainMenu = new List("Menu Midlet", List.IMPLICIT); mainMenu.append("Link 1", null);

mainMenu.append("Link 2", null); mainMenu.append("Keluar", null); }

public void startApp(){

display = Display.getDisplay(this); display.setCurrent(mainMenu); }

public void pauseApp() { }

Lisensi Dokumen:

Copyright © 2003 IlmuKomputer.Com

Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan

disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat

tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang

disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang,

kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.

(5)

public void destroyApp(boolean b) { }

}

SUMBER : MIDP and Game UI

http://forum.nokia.com

Berikut adalah tampilan aplikasi dari beberapa emulator yang biasa digunakan.

Default Nokia

Seri

60 Siemens

Interaksi dengan Menu

Aplikasi di atas masih belum memproses aksi yang diberikan oleh user pada saat memilih menu.

Selanjutnya aplikasi di atas akan dimodifikasi agar bisa memproses aksi sesuai dengan item dari

List yang dipilih. Dan berikut adalah kode programnya.

MenuMidlet02.java

public class MenuMidlet02 extends MIDlet implements CommandListener {

private List mainMenu = null;

private Display display;

private Alert alert;

public MenuMidlet02() {

mainMenu = new List("Menu Midlet", List.IMPLICIT); mainMenu.append("Link 1", null); mainMenu.append("Link 2", null); mainMenu.append("Keluar", null); mainMenu.setCommandListener(this); }

public void startApp(){

display = Display.getDisplay(this); display.setCurrent(mainMenu); }

public void pauseApp() {

(6)

if (d == mainMenu) {

if (mainMenu.isSelected(0)) { alert = new Alert("Alert!!");

alert.setString("Link1 ditekan, silakan tunggu.."); display.setCurrent(alert);

}

else if (mainMenu.isSelected(1)) { alert = new Alert("Alert!!");

alert.setString("Link2 ditekan, silakan tunggu.."); display.setCurrent(alert); } else if (mainMenu.isSelected(2)) { destroyApp(false); notifyDestroyed(); } } } }

Sumber : -

Berikut adalah tampilan pada emulator Nokia Seri 60 ketika Link1 atau Link2 dipilih.

Perhatian :

Aplikasi MenuMidlet02 tidak dapat berjalan dengan baik pada emulator Siemens.

(7)

Seri Interaksi User

C

o

m

a

n

d

,

L

i

s

t

d

a

n

I

n

t

e

r

a

k

s

i

U

s

e

r

Chocolove Mic

http://www.mycgiserver.com/~chocolove2003

Pada tulisan ini akan dibahas tentang penggunaan class Command dan tip-trik penggunaan class

ini dalam sebuah aplikasi.

Menambahkan Command

Objek yang dibentuk dari class Command dapat ditambahkan pada banyak objek, misalnya

objek yang dibuat dari class Form, class TextBox, class Canvas dan lain-lain. Berikut ini

objek-objek yang dibentuk dari class Command akan ditambahkan ke dalam objek-objek yang dibentuk dari

class Form.

CommandMidlet01.java

public class CommandMidlet01 extends MIDlet implements CommandListener {

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

public CommandMidlet01() {

form = new Form("Aplikasi 01");

cmdKeluar = new Command("Keluar", Command.EXIT, 1); cmdAlert = new Command("Alert", Command.SCREEN, 2);

form.addCommand(cmdAlert); form.addCommand(cmdKeluar);

Lisensi Dokumen:

Copyright © 2003 IlmuKomputer.Com

Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan

disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat

tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang

disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang,

kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.

(8)

display.setCurrent(form); }

public void destroyApp(boolean unconditional) { }

public void commandAction(Command c, Displayable d) { if (d == form) { if (c == cmdKeluar) { destroyApp(false); notifyDestroyed(); } else {

alert = new Alert("Alert..!!!");

alert.setString("Tombol Alert ditekan..."); display.setCurrent(alert); } } } }

Sumber : -

Berikut adalah keluaran dari contoh aplikasi di atas.

Di bawah ini adalah tampilan pertama ketika aplikasi dijalankan.

Sedangkan apabila tombol untuk Alert ditekan maka

bisa dilihatan tampilan seperti berikut di samping

kanan ini.

Command dan List

Tahap selanjutnya akan dibuat aplikasi yang didalamnya terdapat perintah (command) untuk

keluar aplikasi dan untuk memanggil menu yang merupakan objek dari List. Pada menu

terdapat item-item yang akan memberikan aksi berupa alert yang merupakan objek yang

dibentuk dari class Alert. Selain itu juga terdapat aksi yang mengembalikan ke tampilan awal

aplikasi.

Berikut adalah kode dari aplikasi yang telah dideskripsikan di atas.

CommandMidlet02.java

public class CommandMidlet02 extends MIDlet implements CommandListener {

private Display display; private Command cmdMenu; private Command cmdKeluar; private TextBox textBox; private List mainMenu;

public CommandMidlet02() {

(9)

cmdMenu = new Command("Menu", Command.SCREEN, 1); cmdKeluar = new Command("Keluar", Command.SCREEN, 1); textBox.addCommand(cmdMenu); textBox.addCommand(cmdKeluar); textBox.setCommandListener(this); }

public void startApp() {

display = Display.getDisplay(this); display.setCurrent(textBox);

}

public void commandAction (Command c, Displayable d) { if (d == textBox) { if (c == cmdKeluar) { destroyApp(false); notifyDestroyed(); } else if (c == cmdMenu) {

mainMenu = new List("Menu Aplikasi 02", List.IMPLICIT); mainMenu.append("Link 1", null); mainMenu.append("Link 2", null); mainMenu.append("Kembali", null); mainMenu.setCommandListener(this); display.setCurrent(mainMenu); } } else if (d == mainMenu) { if (mainMenu.isSelected(0)) {

// Ketik operasi yang diinginkan // ketika tombol untuk Link1 ditekan }

else if (mainMenu.isSelected(1)) { // Ketik operasi yang diinginkan // ketika tombol untuk Link2 ditekan } else if (mainMenu.isSelected(2)) { display.setCurrent(textBox); } } } }

Sumber : -

(10)

Seri Interaksi User

T

a

m

b

a

h

d

a

n

K

u

r

a

n

g

C

o

m

a

n

d

Chocolove Mic

[email protected]

http://www.mycgiserver.com/~chocolove2003

Pada objek dapat ditambahkan objek-objek yang dibuat dari kelas Command. Karena di dunia

ini keseimbangan maka selain proses tambah juga ada proses kurang. Jadi objek command

dapat dihilangkan dari suatu objek lain.

Menambah Objek Command

Ada tulisan sebelumnya sudah banyak yang membahas tentang penambahan objek command

pada objek lain seperti objek dari class List atau Form. Berikut akan diulang sedikit tentang

langkah-langkah penambahan objek command tapi dengan cara yang sedikit berbeda.

Berikut adalah kode dari suatu aplikasi yang akan ditambahkan objek command.

CommandAddMidlet01.java

public class CommandAddMidlet01 extends MIDlet implements CommandListener{ public CommandAddMidlet01() {

}

public void startApp() { }

public void commandAction(Command c, Displayable d) { }

}

Sumber : -

Lisensi Dokumen:

Copyright © 2003 IlmuKomputer.Com

Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan

disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat

tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang

disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang,

kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.

(11)

Yang perlu diperhatikan adalah ada penambahan baris sebagai berikut :

public class CommandAddMidlet01 extends MIDlet implements CommandListener

Dan method berikut :

public void commandAction(Command c, Displayable d) { }

Perhatian

Untuk lebih jelasnya tentang class CommandListener dan method commandAction bisa dibaca

pada referensi tentang MIDP API.

Berikut adalah contoh singkat bagaimana menambahkan objek command pada objek lain.

CommandAddMidlet02

public class CommandAddMidlet02 extends MIDlet implements CommandListener{

private Display display; private Command cmdKeluar; private Form form;

public CommandAddMidlet02() {

cmdKeluar = new Command("Keluar", Command.EXIT, 1); // menambah objek command

form = new Form("Tambah Kurang"); form.addCommand(cmdKeluar);

form.setCommandListener(this); }

display = Display.getDisplay(this); display.setCurrent(form);

}

public void commandAction(Command c, Displayable d) { if (d == form) { if (c == cmdKeluar) { destroyApp(false); notifyDestroyed(); } } } }

Sumber : -

(12)

Mengurangi Objek Command

Berikut adalah contoh aplikasi yang didalamnya ada proses pengurangan objek command.

CommandAddMidlet03.java

public class CommandAddMidlet03 extends MIDlet implements CommandListener{

private Display display; private Command cmdKeluar; private Command cmdPerintah1; private Command cmdPerintah2; private Command cmdKembali; private Form form;

public CommandAddMidlet03() {

cmdKeluar = new Command("Keluar", Command.EXIT, 1); cmdPerintah1 = new Command("Link 1", Command.SCREEN, 1); cmdPerintah2 = new Command("Link 2", Command.SCREEN, 1); cmdKembali = new Command("Kembali", Command.BACK, 1);

form = new Form("Tambah Kurang");

form.addCommand(cmdKeluar); // menambah objek command form.addCommand(cmdPerintah1); // menambah objek command form.addCommand(cmdPerintah2); // menambah objek command

}

public void commandAction(Command c, Displayable d) { if (d == form) { if (c == cmdKeluar) { destroyApp(false); notifyDestroyed(); } else if (c == cmdPerintah1) {

form.removeCommand(cmdPerintah1); // menghilangkan objek form.removeCommand(cmdPerintah2); // menghilangkan objek form.removeCommand(cmdKeluar); // menghilangkan objek form.addCommand(cmdKembali); // menambah objek command form.setTitle("Perintah 1");

else if (c == cmdPerintah2) {

form.removeCommand(cmdPerintah1); // menghilangkan objek form.removeCommand(cmdPerintah2); // menghilangkan objek form.removeCommand(cmdKeluar); // menghilangkan objek form.addCommand(cmdKembali); // menambah objek command form.setTitle("Perintah 2");

(13)

form.addCommand(cmdPerintah1); // menambah objek command form.addCommand(cmdPerintah2); // menambah objek command form.addCommand(cmdKeluar); // menambah objek command form.removeCommand(cmdKembali); // menghilangkan objek form.setTitle("Tambah Kurang"); display.setCurrent(form); } } } }

Sumber : -

(14)

Seri Interaksi User

F

o

r

m

d

a

n

T

e

x

t

f

i

e

l

d

Chocolove Mic

[email protected]

http://www.mycgiserver.com/~chocolove2003

Pada saat membuat aplikasi kadang kita memerlukan suatu masukan yang diisi oleh pengguna

untuk diproses. Untuk maksud tersebut diperlukan form yang didalamnya terdapat kolom

isian.

Membuat Form dan Kolom Isian

Untuk membuat form diperlukan class Form sedangkan untuk membuat kolom isian diperlukan

class TextField. Berikut adalah contoh kodenya.

FormUIMidlet01.java

public class FormUIMidlet01 extends MIDlet implements CommandListener{

private Form form;

private TextField textField; private Display display; private Command cmdKeluar; private Command cmdAksi; private Alert alert; public String strNama;

public FormUIMidlet01() { form = new Form("Form UI");

textField = new TextField("Nama :", "", 10, 0); cmdKeluar = new Command("Keluar", Command.EXIT, 1); cmdAksi = new Command("Aksi", Command.SCREEN, 2); form.addCommand(cmdKeluar); form.addCommand(cmdAksi); form.append(textField); form.setCommandListener(this); }

Lisensi Dokumen:

Copyright © 2003 IlmuKomputer.Com

Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan

disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat

tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang

disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang,

kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.

(15)

}

public void commandAction(Command c, Displayable d) { if (d == form) { if (c == cmdKeluar) { destroyApp(false); notifyDestroyed(); } else if (c == cmdAksi) { strNama = textField.getString(); alert = new Alert("Pesan");

alert.setString("Hallo "+strNama); display.setCurrent(alert); } } } }

Sumber : -

Pada aplikasi di atas user akan memasukkan nama dan setelah menekan tombol Aksi maka akan

ditampilkan alert yang akan menyapa user tersebut seperti yang ditampilkan oleh emulator

Nokia seri 60 di bawah ini.

Transaksi Nilai Antar Kolom Isian

Contoh berikutnya akan memberikan contoh bagaimana mengirimkan nilai yang kita isikan

untuk ditampilkan pada kolom isian yang lain. Sebagai contoh user memasukkan nilai pada

kolom isian pertama dan setelah mengklik tombol Aksi maka nilai tersebut akan ditampilkan

pada kolom isian yang kedua. Kode program dari kasus ini adalah sebagai berikut :

(16)

private Form form;

private TextField textField1; private TextField textField2; private Display display; private Command cmdKeluar; private Command cmdAksi; public String strText;

public FormUIMidlet02() {

form = new Form("Form UI 2");

textField1 = new TextField("Input 1 :", "", 10, 0); textField2 = new TextField("Input 2 :", "", 10, 0); cmdKeluar = new Command("Keluar", Command.EXIT, 1); cmdAksi = new Command("Aksi", Command.SCREEN, 2); form.addCommand(cmdKeluar); form.addCommand(cmdAksi); form.append(textField1); form.append(textField2); form.setCommandListener(this); }

}

public void commandAction(Command c, Displayable d) { if (d == form) { if (c == cmdKeluar) { destroyApp(false); notifyDestroyed(); } else if (c == cmdAksi) { strText = textField1.getString(); textField2.setString(strText); } } } }

Sumber : -

(17)

Seri User Interface

M

e

n

g

a

m

b

a

r

d

i

C

a

n

v

a

s

Chocolove Mic

[email protected]

http://www.mycgiserver.com/~chocolove2003

Canvas, sesuai namanya guna objek ini untuk mengambar. Selain itu sifanya hampir sama

dengan objek lain yang bisa ditambahkan objek-objek lain kedalamnya seperti penambahan

objek command. Objek canvas sering digunakan untuk membuat aplikasi game. Pada bagian

ini akan diberikan contoh bagaimana menggambar di canvas.

Membuat dan Menambahkan Canvas

Yang dilakukan terlebih dahulu adalah membuat class Canvas yang nantinya akan dipanggil

sebagai objek. Berikut adalah contoh kodenya.

GUIMidlet01.java

public class GUIMidlet01 extends MIDlet implements CommandListener {

private Display display; private Canvas canvas; private Command cmdKeluar;

public GUIMidlet01() {

cmdKeluar = new Command("Keluar", Command.SCREEN, 1); canvas = new CanvasGUIMidlet01();

canvas.addCommand(cmdKeluar); }

display = Display.getDisplay(this); display.setCurrent(canvas);

Lisensi Dokumen:

Copyright © 2003 IlmuKomputer.Com

Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan

disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat

tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang

disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang,

kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.

(18)

public void commandAction(Command c, Displayable d) { if (d == canvas) { if (c == cmdKeluar) { destroyApp(false); notifyDestroyed(); } } } }

class CanvasGUIMidlet01 extends Canvas { public void paint(Graphics g) { }

}

Sumber : -

Hasil dari GUIMidlet01 hanya menampilan layar kosong dengan perintah Keluar.

Setting Font

Berikut adalah contoh menggambar tulisan pada canvas.

GUIMidlet02.java

public class GUIMidlet02 extends MIDlet implements CommandListener {

private Display display; private Canvas canvas; private Command cmdKeluar;

cmdKeluar = new Command("Keluar", Command.SCREEN, 1); canvas = new CanvasGUIMidlet01();

canvas.addCommand(cmdKeluar); }

canvas.setCommandListener(this); }

(19)

class CanvasGUIMidlet02 extends Canvas { public void paint(Graphics g) {

g.setFont(Font.getFont(Font.FACE_SYSTEM,Font.STYLE_BOLD, Font.SIZE_LARGE)); g.drawString("Chocolove!", 0, 0, g.TOP|g.LEFT); g.setFont(Font.getFont(Font.FACE_PROPORTIONAL,Font.STYLE_UNDERLINED, Font.SIZE_LARGE));

g.drawString("Chocolove!", getWidth()/2, getHeight()/2, g.TOP|g.HCENTER);

g.setFont(Font.getFont(Font.FACE_SYSTEM,Font.STYLE_ITALIC, Font.SIZE_MEDIUM));

g.drawString("Chocolove!", getWidth(), getHeight(), g.BOTTOM|g.RIGHT); }

}

Sumber : -

Hasil dari contoh di atas adalah sebagai berikut :

Pada kode di atas terdapat baris sebagai berikut :

g.setFont(Font.getFont(Font.FACE_SYSTEM,Font.STYLE_ITALIC, Font.SIZE_MEDIUM));

setFont adalah method yang dimiliki oleh objek g yang berguna untuk melakukan setting font.

Untuk jenis font, style font dan ukuran font digunakan objek Font dan method getFont.

Method ini berguna untuk mengambil nilai jenis, style dan ukuran font. Untuk masing-masing

nilai telah disediakan oleh objek Font dalam fieldnya. Berikut adalah nilai-nilai dari field-field

tersebut.

Kelompok jenis (face) font :

• FACE_MONOSPACE.

• FACE_PROPOTIONAL.

• FACE_SYSTEM.

Kelompok style font :

• STYLE_BOLD.

• STYLE_ITALIC.

• STYLE_PLAIN.

• STYLE_UNDERLINED.

Kelompok ukuran font :

• SIZE_LARGE.

• SIZE_MEDIUM.

• SIZE_SMALL.

(20)

Petunjuk

Untuk lebih lengkapnya bisa dibaca pada referensi tentang MIDP API pada bagian class

Graphics.

Pada kode di atas terdapat baris sebagai berikut :

g.drawString("Chocolove!", getWidth(), getHeight(), g.BOTTOM|g.RIGHT);

Method ini adalah cara untuk melukis string pada canvas. Yang perlu diperhatikan bagian

g.BOTTOM|g.RIGHT

, bagian ini merupakan titik pusat dari objek yang akan digambar.

Menggambar di Canvas

Yang terakhir pada tulisan ini akan diberikan contoh bagaimana menggambar objek seperti

kotak, lingkaran dan mewarnai objek tersebut.

GUIMidlet03.java

public class GUIMidlet03 extends MIDlet implements CommandListener{

private Command cmdKeluar; private Canvas canvas; private Display display;

cmdKeluar = new Command("Keluar", Command.SCREEN, 0);

canvas = new CanvasGUIMidlet03(); canvas.addCommand(cmdKeluar); }

canvas.setCommandListener(this); }

class CanvasGUIMidlet03 extends Canvas { public void paint(Graphics g) {

/* background color luar - COKLAT */ g.setColor(210, 135, 28);

g.fillRect(0, 0, getWidth(), getHeight());

(21)

g.setColor(255, 255, 255);

g.fillRect(3, 20, getWidth()-7, getHeight()-27);

/* warna border - HITAM */ g.setColor(0, 0, 0);

/* border luar */

g.drawRect(0, 1, getWidth()-1, getHeight()-3);

/* border dalam */

g.setStrokeStyle(g.DOTTED);

g.drawRect(3, 20, getWidth()-8, getHeight()-27); g.drawRect(4, 21, getWidth()-10, getHeight()-29);

/* judul */

g.setColor(255, 255, 255);

g.setFont(Font.getFont(Font.FACE_SYSTEM,Font.STYLE_BOLD, Font.SIZE_LARGE));

g.drawString("e-ChocO", getWidth()/2, 1, g.TOP|g.HCENTER);

/* layar dan tombol */ g.setStrokeStyle(g.SOLID); g.setColor(0, 0, 0);

g.drawRoundRect(8, 25, getWidth()-40, getHeight()-37, 3, 3); g.drawRoundRect(getWidth()-28, 25, 19, getHeight()-57, 3, 3); g.drawArc(getWidth()-26, getHeight()-28, 16, 16, 0, 360); } }

Sumber : -

(22)

Seri User Interface

T

i

p

e

M

a

s

u

k

a

n

p

a

d

a

T

e

x

t

F

i

e

l

d

Chocolove Mic

[email protected] http://www.mycgiserver.com/~chocolove2003

Pada bagian sebelumnya telah banyak digunakan class TextField untuk menangani masukan dari

user. Pada bagian ini akan dibahas lebih lanjut tentang class TextField terutama tentang

pengaturan tipe masukkan. Dengan pengaturan ini aplikasi dapat membatasi user untuk

memasukkan karakter ke dalam kolom input.

Nilai Properti Constrains pada TextField

Constrains adalah properti yang dimiliki oleh class TextField. Nilai yang dimiliki oleh properti

ini adalah :

Nilai Constrain

Fungsi dan Keterangan

Nilai

TextField.ANY

_{Menginjinkan seluruh karakter untuk diketikkan ke}

dalam kolom masukan.

0 TextField.EMAILADDR

Kotak input yang hanya bisa diisi dengan aturan

penulisan alamat email yang valid.

1 TextField.NUMERIC

Kotak input hanya dapat diisi dengan nilai bilangan

bulat.

2 TextField.PHONENUMBER Kotak input yang dapat diisi dengan nomor

telephone.

3 TextField.URL

Kotak input akan hanya bisa diisi dengan URL yang

valid.

4 TextField.PASSWORD

_{Kotak input untuk keperluan pengisian password.}

₆₅₅₃₆

Untuk melihat nilai dari properti di atas dapat digunakan dengan program di bawah ini :

TipeTextfieldMidlet01.java

public class TipeTextfieldMidlet01 extends MIDlet implements CommandListener {

private Form form;

Lisensi Dokumen:

Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.

(23)

private Command cmdKeluar; private Display display; private TextField nilaiANY; private TextField nilaiEMAIL; private TextField nilaiNUMERIC; private TextField nilaiPHONE; private TextField nilaiURL; private TextField nilaiPASSWD; private String nilaiTipe;

public TipeTextfieldMidlet01() {

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

nilaiANY = new TextField("ANY", "", 50, TextField.ANY); nilaiTipe = String.valueOf(TextField.ANY);

nilaiANY.setString(nilaiTipe);

nilaiEMAIL = new TextField("EMAIL", "", 50, TextField.ANY); nilaiTipe = String.valueOf(TextField.EMAILADDR);

nilaiEMAIL.setString(nilaiTipe);

nilaiNUMERIC = new TextField("NUMERIC", "", 50, TextField.ANY); nilaiTipe = String.valueOf(TextField.NUMERIC);

nilaiNUMERIC.setString(nilaiTipe);

nilaiPHONE = new TextField("PHONE", "", 50, TextField.ANY); nilaiTipe = String.valueOf(TextField.PHONENUMBER);

nilaiPHONE.setString(nilaiTipe);

nilaiURL = new TextField("URL", "", 50, TextField.ANY); nilaiTipe = String.valueOf(TextField.URL);

nilaiURL.setString(nilaiTipe);

nilaiPASSWD = new TextField("PASSWORD", "", 50, TextField.ANY); nilaiTipe = String.valueOf(TextField.PASSWORD);

nilaiPASSWD.setString(nilaiTipe);

form = new Form("Tipe TextField"); form.append(nilaiANY); form.append(nilaiEMAIL); form.append(nilaiNUMERIC); form.append(nilaiPHONE); form.append(nilaiURL); form.append(nilaiPASSWD); form.addCommand(cmdKeluar); form.setCommandListener(this); }

}

(24)

} } }

Sumber : -

Berikut adalah hasilnya :

Bisa dilihat nilai-nilai dari properti-properti yang telah dituliskan pada tabel di atas adalah benar.

Dengan begitu untuk menentukan tipe masukan dari textfield dapat digantikan dengan

menuliskan nilai dari properti tersebut. Yaitu seperti di bawah ini :

nilaiANY = new TextField("ANY", "", 50, TextField.ANY);

Menjadi :

nilaiANY = new TextField("ANY", "", 50, 0);

Contoh lain :

nilaiEMAIL = new TextField("EMAIL", "", 150, TextField.EMAIL);

Menjadi :

nilaiEMAIL = new TextField("EMAIL", "", 150, 1);

Penggunaan Properti Constrain

Pada bahasan di atas, contoh program yang diberikan hanya untuk menampilkan nilai dari

properti contrain pada TextField. Pada bagian ini akan diberikan contoh penggunaanya. :

TipeTextfieldMidlet02.java

public class TipeTextfieldMidlet02 extends MIDlet implements CommandListener {

private Form form;

private Command cmdKeluar; private Display display; private TextField nilaiANY; private TextField nilaiEMAIL;

(25)

private TextField nilaiNUMERIC; private TextField nilaiPHONE; private TextField nilaiURL; private TextField nilaiPASSWD; private String nilaiTipe;

public TipeTextfieldMidlet02() {

nilaiANY = new TextField("ANY", "", 50, TextField.ANY);

nilaiEMAIL = new TextField("EMAIL", "", 50, TextField.EMAILADDR); nilaiNUMERIC = new TextField("NUMERIC", "", 50, TextField.NUMERIC); nilaiPHONE = new TextField("PHONE", "", 50, TextField.PHONENUMBER); nilaiURL = new TextField("URL", "", 50, TextField.URL);

nilaiPASSWD = new TextField("PASSWORD", "", 50, TextField.PASSWORD|0);

form = new Form("Tipe TextField"); form.append(nilaiANY); form.append(nilaiEMAIL); form.append(nilaiNUMERIC); form.append(nilaiPHONE); form.append(nilaiURL); form.append(nilaiPASSWD); form.addCommand(cmdKeluar); form.setCommandListener(this); }

}

public void commandAction(Command c, Displayable d) { if (c == cmdKeluar) { destroyApp(false); notifyDestroyed(); } } }

Sumber : -

Efek dari pendeklarasian tipe input ini, salah satunya adalah untuk tipe input yang

menggunakan properti contrain

TextField.NUMERIC

dan

TextField.PHONENUMBER

hanya bisa

diisikan dengan angka. Sedangkan untuk yang menggunakan

TextField.ANY

dapat diisikan

apa saja.

Untuk input yang digunakan untuk mengisikan password ada perbedaan dibandingkan tipe input

yang lain yaitu sebagai berikut :

(26)

terdiri abjad, angka atau karakter lain. Penulisannya untuk menggunakan aturan ini adalah

seperti contoh di atas atau sebagai berikut :

TextField.PASSWORD|TextField.ANY

Apabila password yang diinginkan hanya berisi atas angka saja maka deklarasi yang digunakan

adalah sebagai berikut :

TextField.PASSWORD|TextField.NUMBER

Catatan :

Properti

TextField.EMAIL

dan

TextField.URL

tidak dapat memeriksa ke-valid-an suatu

alamat email atau URL yang dimasukkan pada kolom input secara otomatis.

Catatan Penulis :

Penulis adalah pemula dalam mempelajari Java, jadi mohon masukkannya bagi pembaca yang

menemukan kesalahan konsep atau asumsi yang digunakan penulis.

(27)

Seri User Interface

F

o

r

m

d

a

n

T

i

c

k

e

r

Chocolove Mic

[email protected]

http://www.mycgiserver.com/~chocolove2003

Bab sebelumnya pernah dibahas mengenai pembuatan form dan menambahkan objek textfield.

Selain textfield masih banyak objek lain yang bisa ditambahkan pada form. Pada tulisan ini

akan diberikan contoh aplikasi yang menggunakan objek ticker pada form.

Apabila sedang menyaksikan tayangan pada televisi akan sering terlihat berita pada bagian

bawah layar yang berupa tulisan berjalan. Atau pada acara yang berhubungan dengan bursa

efek akan bisa dilihat juga berupa tulisan berjalan yang memberikan informasi mengenai

keadaan saham pada saat itu. Untuk membuat “tayangan” seperti itu pada layar ponsel dapat

digunakan class Ticker.

Membuat Ticker Sederhana

Berikut adalah contoh penambahkan objek ticker pada form.

TickerMidlet01.java

public class TickerMidlet01 extends MIDlet implements CommandListener {

private Form form; private Display display; private Ticker ticker; private Command cmdKeluar;

public TickerMidlet01() {

cmdKeluar = new Command("Keluar", Command.EXIT, 1); ticker = new Ticker("Saham TELKOM naik 10 point");

Lisensi Dokumen:

Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan

disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat

tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang

disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang,

kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.

(28)

}

Sumber : -

Untuk membuat objek ticker digunakan baris berikut :

ticker = new Ticker("Ini text berjalan yang akan ditampilan pada layar ");

Sedangkan untuk menambahkan objek ticker pada form digunakan method

setTicker(objekTicker), seperti di bawah ini :

form.setTicker(ticker);

Berikut adalah tambilan objek ticker pada layar ponsel.

J2ME WTK

Nokia Seri 60

Siemens M55

Perhatian :

Berbeda pada ponsel lainnya, pada Siemens, teks dari objek ticker menempati baris sama

dengan title dari form. Selain itu, teks pada objek ticker hanya berjalan setelah layar saja.

Setting Teks pada Ticker

Pada class Ticker terdapat dua method yaitu getString() dan setString(String str). Berikut adalah

contoh untuk aplikasi yang memberikan fasilitas bagi user untuk mengubah teks yang

ditampilkan oleh objek ticker. Berikut adalah contoh dari aplikasi tersebut.

(29)

TickerMidlet02.java

public class TickerMidlet02 extends MIDlet implements CommandListener {

private Form form; private Display display; private Ticker ticker; private Command cmdKeluar; private Command cmdTicker; private TextField textField;

public TickerMidlet02() {

cmdKeluar = new Command("Keluar", Command.EXIT, 1); cmdTicker = new Command("Ticker", Command.SCREEN, 2);

textField = new TextField("Teks : ", "", 50, TextField.ANY); ticker = new Ticker("");

form = new Form("Ticker"); form.append(textField); form.addCommand(cmdKeluar); form.addCommand(cmdTicker); form.setCommandListener(this); }

}

public void commandAction(Command c, Displayable d) { if (c == cmdKeluar) { destroyApp(false); notifyDestroyed(); } if (c == cmdTicker) { form.setTicker(ticker); ticker.setString(textField.getString()); } } }

Sumber : -

Aplikasi ini merupakan hasil modifikasi dari TickerMidlet01.java. Objek yang ditambahkan

adalah objek textField yang akan digunakan oleh user untuk memasukkan teks yang akan

digunakan oleh objek ticker. Pada konstruktor hanya dilakukan pembuatan objek ticker dan

belum ditambahkan pada objek form. Setelah “tombol” Ticker ditekan baru objek ticker

ditambahkan pada form dengan baris seperti berikut ini:

if (c == cmdTicker) { form.setTicker(ticker);

(30)

Untuk menampilkan teks yang diisikan user pada textField digunakan baris berikut :

ticker.setString(textField.getString());

(31)

Seri User Interface

D

a

t

e

F

i

e

l

d

Chocolove Mic

[email protected] http://www.mycgiserver.com/~chocolove2003

DateField adalah objek yang dapat digunakan untuk menampilkan atau mengedit objek yang

bertipe Date.

Mode pada DateField

Untuk membuat objek DateField dapat digunakan dengan menggunakan dua macam konstruktor,

yaitu :

•

DateField(String label, int mode)

.

•

DateField(String label, int mode, TimeZone timeZone)

.

Keterangan :

label

Label dari objek yang akan ditampilkan ke layar.

mode

Untuk isi nilai variable mode ini digunakan properti dari objek DateField yang

bertipe integer :

•

DateField.DATE

, nilai ini akan membuat objek hanya dapat menset

informasi tanggal saja.

•

DateField.TIME

, nilai ini akan membuat objek hanya dapat menset

informasi waktu (jam, menit dan detik) saja.

•

DateField.DATE_TIME

, adalah gabungan antara informasi tanggal dan

waktu.

timeZone Menentukan zone waktu yang diinginkan.

Berikut adalah contoh sederhana penggunaan objek DateField.

DatefieldMidlet01.java

Lisensi Dokumen:

Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.

(32)

private Form form;

private DateField tanggal; private DateField jam;

private DateField tanggal_jam;

public DatefieldMidlet01() {

cmdKeluar = new Command("Keluar", Command.EXIT, 1); tanggal = new DateField("Tanggal", DateField.DATE); jam = new DateField("Jam", DateField.TIME);

tanggal_jam = new DateField("Tanggal-Jam", DateField.DATE_TIME); form = new Form("Date Field");

form.append(tanggal); form.append(jam); form.append(tanggal_jam); form.addCommand(cmdKeluar); form.setCommandListener(this); }

}

Sumber : -

J2ME WTK

Nokia Seri 60

Siemens M55

(33)

masing-masing emulator.

Untuk emulator Nokia dan Siemens, untuk menset tanggal atau waktu cukup dengan

mengetikan angka yang diinginkan pada keypad. Sedangkan untuk emulator J2ME WTK untuk

men-set waktu atau tanggal hal yang dilakukan adalah dengan menekan tombol SELECT.

Untuk objek yang menggunakan mode DateField.DATE maka setelah menekan tombol

SELECT maka akan ditampilkan seperti pada gambar berikut :

Setelah menemui tampilan berikut ini user tinggal memilih tahun, bulan dan tanggal dengan

menggunakan panah ke atas, bawa, kiri atau kanan.

Untuk objek yang menggunakan mode DateField.TIME maka akan menemui tampilan seperti

berikut :

Setting Nilai DateField

Pada bagian sebelumnya begitu aplikasi dijalankan nilai dari masing-masing objek DateField

masih kosong atau diisi dengan nilai inisial (pada emulator Nokia Seri 60). Pada bagian ini isi

dari masing-masing objek tersebut akan diisi dengan tanggal dan waktu sekarang (current time).

Berikut adalah contoh kode untuk tujuan di atas :

DatefieldMidlet02.java

import java.util.*;

public class DatefieldMidlet02 extends MIDlet implements CommandListener {

private Display display; private Command cmdKeluar;

(34)

public DatefieldMidlet02() {

tanggal = new DateField("Tanggal", DateField.DATE); jam = new DateField("Jam", DateField.TIME);

tanggal_jam = new DateField("Tanggal Jam", DateField.DATE_TIME);

form = new Form("Date Field"); tanggal.setDate(new Date()); jam.setDate(new Date()); tanggal_jam.setDate(new Date()); form.append(tanggal); form.append(jam); form.append(tanggal_jam); form.addCommand(cmdKeluar); form.setCommandListener(this); }

}

Sumber : -

Untuk mengambil nilai tanggal dan waktu sekarang digunakan baris berikut :

tanggal.setDate(new Date()); jam.setDate(new Date());

tanggal_jam.setDate(new Date());

Dari percobaan penulis dengan tiga macam emulator, maka kode di atas hanya berjalan normal

(memberikan hasil tanggal dan waktu yang benar) pada emulator Siemens.

Berikut adalah tampilan dari aplikasi di atas pada tiga macam emulator :

(35)