Copyright Chocolove Mic 2003 IlmuKomputer.Com

Tips-Tips

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

Copyright © Chocolove Mic 2003

IlmuKomputer.Com

Chocolove Mic

Kuliah Berseri IlmuKomputer.Com Copyright © 2003 IlmuKomputer.Com

Pendahuluan J2ME Chocolove Mic

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

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.

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.

Tips J2ME Chocolove Mic

1


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. • Dan lain-lain.


2


Seri Interaksi User

List dan Interaksi User Chocolove Mic



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 langkahlangkah 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 mainMenu.append("Link 1", mainMenu.append("Link 2", mainMenu.append("Keluar", }

Midlet", List.IMPLICIT); null); null); null);

public void startApp(){ display = Display.getDisplay(this); display.setCurrent(mainMenu); } public void pauseApp() { }


1


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 import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class MenuMidlet02 extends MIDlet implements CommandListener { private List mainMenu = null; private Display display; private Alert alert; public MenuMidlet02() { mainMenu = new List("Menu mainMenu.append("Link 1", mainMenu.append("Link 2", mainMenu.append("Keluar",

Midlet", List.IMPLICIT); null); null); null);

mainMenu.setCommandListener(this); } public void startApp(){ display = Display.getDisplay(this); display.setCurrent(mainMenu); } public void pauseApp() { } public void destroyApp(boolean b) { } public void commandAction(Command c, Displayable d) {


2


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.


3


Seri Interaksi User

Command, List dan Interaksi User Chocolove Mic



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 objekobjek yang dibentuk dari class Command akan ditambahkan ke dalam objek yang dibentuk dari class Form. CommandMidlet01.java import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class CommandMidlet01 extends MIDlet implements CommandListener { private private private private private

Command cmdKeluar; Command cmdAlert; Display display; Form form; 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); form.setCommandListener(this); } public void startApp() { display = Display.getDisplay(this);


1


display.setCurrent(form); } public void pauseApp() { } 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 import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class CommandMidlet02 extends MIDlet implements CommandListener { private private private private private

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

public CommandMidlet02() { textBox = new TextBox("Aplikasi 02", "Ini Command Midlet 02", 256, 0);


2


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 pauseApp() { } public void destroyApp(boolean unconditional) { } 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 : Berikut adalah tampilan pertama dari aplikasi dan ketika tombol untuk Menu ditekan.


3


Seri Interaksi User

Tambah dan Kurang Command Chocolove Mic



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 import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class CommandAddMidlet01 extends MIDlet implements CommandListener{ public CommandAddMidlet01() { } public void startApp() { } public void pauseApp() { } public void destroyApp(boolean unconditional) { } public void commandAction(Command c, Displayable d) { } }

Sumber : -


1


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 import javax.microedition.midlet.*; import javax.microedition.lcdui.*; 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); } public void startApp() { display = Display.getDisplay(this); display.setCurrent(form); } public void pauseApp() { } public void destroyApp(boolean unconditional) { } public void commandAction(Command c, Displayable d) { if (d == form) { if (c == cmdKeluar) { destroyApp(false); notifyDestroyed(); } } } }

Sumber : -


2


Mengurangi Objek Command Berikut adalah contoh aplikasi yang didalamnya ada proses pengurangan objek command. CommandAddMidlet03.java import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class CommandAddMidlet03 extends MIDlet implements CommandListener{ private private private private private private

Display display; Command cmdKeluar; Command cmdPerintah1; Command cmdPerintah2; Command cmdKembali; 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 form.setCommandListener(this); } public void startApp() { display = Display.getDisplay(this); display.setCurrent(form); } public void pauseApp() { } public void destroyApp(boolean unconditional) { } 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"); display.setCurrent(form); } 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"); display.setCurrent(form); } else if (c == cmdKembali) {


3


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

Berikut adalah tampilan dari CommandAddMidlet pada emulator Siemens M55.


4


Seri Interaksi User

Form dan Textfield Chocolove Mic



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 import javax.microedition.midlet.*; import javax.microedition.lcdui.*; 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); }


1


public void startApp() { display = Display.getDisplay(this); display.setCurrent(form); } public void pauseApp() { } public void destroyApp(boolean unconditional) { } 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 : FormUIMidlet02.java import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class FormUIMidlet02 extends MIDlet implements CommandListener{


2


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 startApp() { display = Display.getDisplay(this); display.setCurrent(form); } public void pauseApp() { } public void destroyApp(boolean unconditional) { } 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 : Berikut adalah tampilan dari program ini :


3


Seri User Interface

Menggambar di Canvas 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 import javax.microedition.midlet.*; import javax.microedition.lcdui.*; 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); } public void startApp() { display = Display.getDisplay(this); display.setCurrent(canvas); canvas.setCommandListener(this); } public void pauseApp() { }


1


public void destroyApp(boolean unconditional) { } 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 import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class GUIMidlet02 extends MIDlet implements CommandListener { private Display display; private Canvas canvas; private Command cmdKeluar; public GUIMidlet02() { cmdKeluar = new Command("Keluar", Command.SCREEN, 1); canvas = new CanvasGUIMidlet01(); canvas.addCommand(cmdKeluar); } public void startApp() { display = Display.getDisplay(this); display.setCurrent(canvas); canvas.setCommandListener(this); } public void pauseApp() { } public void destroyApp(boolean unconditional) { } public void commandAction(Command c, Displayable d) { if (d == canvas) { if (c == cmdKeluar) { destroyApp(false); notifyDestroyed(); } } } }


2


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.


3


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 import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class GUIMidlet03 extends MIDlet implements CommandListener{ private Command cmdKeluar; private Canvas canvas; private Display display; public GUIMidlet03() { cmdKeluar = new Command("Keluar", Command.SCREEN, 0); canvas = new CanvasGUIMidlet03(); canvas.addCommand(cmdKeluar); } public void startApp() { display = Display.getDisplay(this); display.setCurrent(canvas); canvas.setCommandListener(this); } public void pauseApp() { } public void destroyApp(boolean unconditional) { } public void commandAction(Command c, Displayable d) { if (d == canvas) { if (c == cmdKeluar) { destroyApp(false); notifyDestroyed(); } } } } class CanvasGUIMidlet03 extends Canvas { public void paint(Graphics g) { /* background color luar - COKLAT */ g.setColor(210, 135, 28); g.fillRect(0, 0, getWidth(), getHeight()); /* background color dalam - PUTIH */


4


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 : Berikut adalah tampilan dari aplikasi di atas yang dijalankan pada emulator Nokia seri 60.


5


Seri User Interface

Tipe Masukan pada TextField Chocolove Mic



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. ini adalah : Nilai Constrain TextField.ANY TextField.EMAILADDR TextField.NUMERIC TextField.PHONENUMBER TextField.URL TextField.PASSWORD

Nilai yang dimiliki oleh properti

Fungsi dan Keterangan Menginjinkan seluruh karakter untuk diketikkan ke dalam kolom masukan. Kotak input yang hanya bisa diisi dengan aturan penulisan alamat email yang valid. Kotak input hanya dapat diisi dengan nilai bilangan bulat. Kotak input yang dapat diisi dengan nomor telephone. Kotak input akan hanya bisa diisi dengan URL yang valid. Kotak input untuk keperluan pengisian password.

Nilai 0 1 2 3 4 65536

Untuk melihat nilai dari properti di atas dapat digunakan dengan program di bawah ini : TipeTextfieldMidlet01.java import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class TipeTextfieldMidlet01 extends MIDlet implements CommandListener { private Form form; Tips J2ME Chocolove Mic

1


private private private private private private private private private

Command cmdKeluar; Display display; TextField nilaiANY; TextField nilaiEMAIL; TextField nilaiNUMERIC; TextField nilaiPHONE; TextField nilaiURL; TextField nilaiPASSWD; 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); } public void startApp() { display = Display.getDisplay(this); display.setCurrent(form); } public void pauseApp() { } public void destroyApp(boolean unconditional) { } public void commandAction(Command c, Displayable d) { if (c == cmdKeluar) { destroyApp(false); notifyDestroyed();


2


} } }

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 import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class TipeTextfieldMidlet02 extends MIDlet implements CommandListener { private private private private private Tips J2ME Chocolove Mic

Form form; Command cmdKeluar; Display display; TextField nilaiANY; TextField nilaiEMAIL;

3


private private private private private

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

public TipeTextfieldMidlet02() { cmdKeluar = new Command("Keluar", Command.EXIT, 1); nilaiANY = new TextField("ANY", "", 50, nilaiEMAIL = new TextField("EMAIL", "", nilaiNUMERIC = new TextField("NUMERIC", nilaiPHONE = new TextField("PHONE", "", nilaiURL = new TextField("URL", "", 50, nilaiPASSWD = new TextField("PASSWORD",

TextField.ANY); 50, TextField.EMAILADDR); "", 50, TextField.NUMERIC); 50, TextField.PHONENUMBER); TextField.URL); "", 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 startApp() { display = Display.getDisplay(this); display.setCurrent(form); } public void pauseApp() { } public void destroyApp(boolean unconditional) { } 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 : nilaiPASSWD = new TextField("PASSWORD", "", 50, TextField.PASSWORD|0);

Tipe input ini digunakan properti constrain yang merupakan gabungan TextField.PASSWORD dan TextField.ANY. Artinya input ini digunakan untuk password dan password tersebut Tips J2ME Chocolove Mic

4


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.


5

Tips dan Trik IlmuKomputer.Com Copyright © 2003 IlmuKomputer.Com

Seri User Interface

Form dan Ticker Chocolove Mic



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 import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class TickerMidlet01 extends MIDlet implements CommandListener { private private private private

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

public TickerMidlet01() { cmdKeluar = new Command("Keluar", Command.EXIT, 1); ticker = new Ticker("Saham TELKOM naik 10 point"); form = new Form("Ticker"); form.setTicker(ticker); form.addCommand(cmdKeluar);

1


form.setCommandListener(this); } public void startApp() { display = Display.getDisplay(this); display.setCurrent(form); } public void pauseApp() { } public void destroyApp(boolean unconditional) { } public void commandAction(Command c, Displayable d) { if (c == cmdKeluar) { destroyApp(false); notifyDestroyed(); } } }

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.

2


TickerMidlet02.java import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class TickerMidlet02 extends MIDlet implements CommandListener { private private private private private private

Form form; Display display; Ticker ticker; Command cmdKeluar; Command cmdTicker; 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 startApp() { display = Display.getDisplay(this); display.setCurrent(form); } public void pauseApp() { } public void destroyApp(boolean unconditional) { } 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); ticker.setString(textField.getString()); }

3


Untuk menampilkan teks yang diisikan user pada textField digunakan baris berikut : ticker.setString(textField.getString());

Dan berikut adalah tampilan dari aplikasi di atas :

4


Seri User Interface

DateField 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 import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class DatefieldMidlet01 extends MIDlet implements CommandListener { private Display display; private Command cmdKeluar;


1


private private private private

Form form; DateField tanggal; DateField jam; 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); } public void startApp() { display = Display.getDisplay(this); display.setCurrent(form); } public void pauseApp() { } public void destroyApp(boolean unconditional) { } public void commandAction(Command c, Displayable d) { if (c == cmdKeluar) { destroyApp(false); notifyDestroyed(); } } }

Sumber : J2ME WTK

Nokia Seri 60

Siemens M55

Dari gambar di atas dapat diketahui terdapat perbedaan tampilan dari keluaran aplikasi pada


2


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.*; import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class DatefieldMidlet02 extends MIDlet implements CommandListener { private private private private private private


Display display; Command cmdKeluar; Form form; DateField tanggal; DateField jam; DateField tanggal_jam;

3


public DatefieldMidlet02() { 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"); 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); } public void startApp() { display = Display.getDisplay(this); display.setCurrent(form); } public void pauseApp() { } public void destroyApp(boolean unconditional) { } public void commandAction(Command c, Displayable d) { if (c == cmdKeluar) { destroyApp(false); notifyDestroyed(); } } }

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 : J2ME WTK Nokia Seri 60


Siemens M55

4



5

Copyright Chocolove Mic 2003 IlmuKomputer.Com

Recommend Documents