GUI MENGGUNAKAN HANDPHONE BERFASILITAS J2ME

Presentasi berjudul: "GUI MENGGUNAKAN HANDPHONE BERFASILITAS J2ME"— Transcript presentasi:

1 GUI MENGGUNAKAN HANDPHONE BERFASILITAS J2ME
INDEPENDENT STUDY ACHMAD TAUFIK ELIA DWI CHANDRA RINDHY ANTHIKA NADYA TRI SETYO SISTEM KOMPUTER

2 BAB 1 1.1 Latar Belakang J2me atau Java2 Micro Edition adalah sebuah teknologi yang telah banyak digunakan dalam pengembangan aplikasi pada ponsel dewasa ini, mulai dari aplikasi yang berupa permainan sampai dengan aplikasi ponsel sebagai pendukung aplikasi yang lebih besar seperti aplikasi enterprise. Nama J2ME digunakan sebagai “payung” untuk aneka teknologi Java untuk device micro (di antaranya adalah Personal Java, JavaCard, MIDP, dll). Dalam J2ME dibagi menjadi dua bagian besar yang dikenal sebagai configuration dan profile[1]. Dua istilah ini sangatlah penting dalam pengembangan aplikasi wireless dengan Java sehingga harus dipahami dengan baik. Sebuah profile dibangun dalam sebuah configuration namun menambahkan beberapa API (Application Program Interface) khusus agar dihasilkan sebuah lingkungan yang lengkap untuk membangun aplikasi. Sedangkan sebuah configuration mendeskripsikan sebuah JVM dan sekumpulan API dasar, dan hal ini tidak cukup untuk membangun sebuah aplikasi yang lengkap. Profile-profile biasanya termasuk API-API untuk aplikasi lifecycle, user inteface, dan penyimpanan secara kontinu. J2ME configuration mendefinisikan lingkungan kerja J2ME runtime. Oleh karena handheld devices memiliki fitur-fitur yang berbeda-beda, J2ME configuration dirancang untuk menyediakan library standar yang mengimplementasikan fitur standar dari handheld devices.

3 1.2 Pembatasan masalah Berdasarkan latar belakang di atas penulis mendapatkan masalah yaitu bagaimana membuat GUI (Graphical User Interface) menggunakan J2ME (Java2 Micro Edition). 1.3 Ruang Lingkup Penulis memfokuskan pembahasan pada langkah – langkah membuat GUI menggunakan J2ME. Tujuan Pembahasan Berdasarkan latar belakang masalah yang telah dijabarkan diatas maka tujuan penulisan tugas ini adalah : Adalah sebagai syarat untuk menyelesaikan mata kuliah Independent Study. Sebagai bahan pembelajaran mengenai perkembangan ilmu pengetahuan dan teknologi. Dapat memahami, mengerti dan mendalami tentang teknologi Java pada ponsel. Dapat tertarik dengan pemrograman Java2 Micro Edition. Metode Penulisan Di dalam pelaksanaan penulisan yang dilakukan, penulis menggunakan beberapa metode yaitu: Referensi Melakukan studi kepustakaan dengan membaca buku-buku dan mencari berita dari internet mengenai seputar topik permasalahan yang diambil. Eksperimen Pada tahapan ini langsung melakukan percobaan-percobaan atau praktek pemrograman java. Sistematika Penulisan Sistematika penulisan laporan ini terdiri dari 5 ( lima ) bab, dengan uraian sebagai berikut. BAB I : PENDAHULUAN Pada bab ini berisi penjelasan atau latar belakang, pembatasan masalah, tujuan penulisan, ruang lingkuppenulisan , metode penulisan , dan sistematika penulisan. BAB II : LANDASAN TEORI Pada bab ini berisi penjelasan mengenai pengenalan J2ME, pengertian J2ME, configurasi CLDC dan CDC,pengenalan MIDP, pengenalan GUI. BAB III : PEMBAHASAN Pada bab ini berisi mengenai penjelasan mengenai pemrograman GUI menggunakan Java2 Micro Edition. BAB IV : PERANCANGAN Pada bab ini berisi mengenai penjelasan mengenai rancangan-rancangan yang ada didalam program GUI. BAB V : KESIMPULAN Pada bab ini berisi tentang kesimpulan dan saran-saran yang dikemukakan dari hasil penulisan yang dilakukan. DAFTAR PUSTAKA

4 BAB 2 LANDASAN TEORI 2.1 PENGERTIAN J2ME
Java 2 Micro Edition (J2ME) merupakan subset dari J2SE (Java 2 Standard Edition) yang ditujukan untuk implementasi pada peralatan embeded system dan handhled yang tidak mampu mendukung secara penuh implementasi mengunakan J2SE. Embedded system adalah produk-produk dengan komputer kecil di dalamnya, namun aplikasi yang bisa dimanfaatkan dari peralatan tersebut sangatlah spesifik. Hal ini tentu saja berbeda dengan komputer PC (Personal Computer) yang kita kenal sehari-hari, yang mampu digunakan untuk berbagai aplikasi. Contoh embedded system yang ada misalnya adalah aplikasi-aplikasi yang memanfaatkan mikroprosesor seperti Televisi, sistem keamanan gedung, dan lain sebagainya. Nama J2ME digunakan sebagai “payung” untuk aneka teknologi Java untuk device micro (di antaranya adalah Personal Java, JavaCard, MIDP, dll). Gambaran arsitektur Java

5 2.2 cakupan J2ME Device yang bisa diprogram dengan J2ME mulai dari smart card sampai PDA. Masing-masing jenis device memiliki kemampuan komputasi yang berbeda. Smartcard memiliki memori <1Mb, dengan kecepatan prosessor yang rendah. PDA saat ini memiliki memori >8Mb dengan kecepatan prosessor yang tinggi. Device dengan kemampuan komputasi yang sama dibagi ke dalam Configuration. Sebuah konfigurasi (configuration) mendefinisikan satu set library minimum dan kemampuan Virtual Machine minimum yang dimiliki sebuah device. Device yang memiliki kemampuan pemrosesan yang sama dan batasan memori yang sama memiliki konfigurasi yang sama Contoh configuration CDC (Connected Device Configuration) CLDC (Connected Limited Device Configuration) Contoh Configuration: CLDC Punya koneksi terbatas (limited) artinya user bisa online jika diperlukan Tidak mendukung tipe data floating point dan double Device mungkin hanya memiliki memori non volatile 128 Kb, memori volatile 8 kb untuk data persisten, dan 32 Kb untuk runtime Java Contoh device CLDC: Ponsel J2ME, PDA dengan koneksi wireless, pager dua arah Contoh Configuration: CDC Punya koneksi jaringan yang selalu online (connected) Mendukung seluruh fitur bahasa Java (JDK1.3) Device setidaknya memiliki 512kb memori non volatile dan 256 Kb memori volatile Contoh Device: PDA Phone

6 2.2.1 Profile Profile adalah API yang diimplementasikan di atas (on top of) sebuah konfigurasi yang ditujukan untuk device dengan jenis/kegunaan yang serupa. Sebuah profile berdiri di atas sebuah configuration. Contoh device serupa: ponsel 2.3 MIDP 1.0 Mobile Information Device Profile versi 1.0 berada di atas CLDC. Hampir semua Ponsel J2ME mendukung profile ini. MIDP memberikan batasan minimum bagi device dan satu Set API untuk peralatan mobile. API yang sangat generik yang pasti bisa didukung semua jenis device MIDP. Aplikasi MIDP disebut dengan MIDlet. 2.3.1 API Non Standar Selain API Standar, mungkin ada API dari Vendor yang tersedia di device. Contoh: API untuk backlight atau vibrator (nada getar), API ini tidak masuk standar karena tidak semua device punya backlight atau vibrator. Device yang memakai API non standar tidak dijamin bisa berjalan di device lain. API MIDP 1.0 adalah API Standar. Program yang hanya memakai API ini pasti berjalan di aneka device MIDP 1.0. 2.4 MIDlet MIDlet adalah aplikasi yang dibuat menggunakan Java 2 Micro Edition dengan profile Mobile Information Device Profile (MIDP) [4].. MIDP dikhususkan untuk digunakan pada handset dengan kemampuan CPU, memori, keyboard, dan layar yang terbatas, misalnya pada handphone, pager, PDA, dan sebagainya. Arsitektur tingkat tinggi dari sebuah aplikasi MIDP ditunjukkan oleh Gambar 1 sebagai berikut. Gambar 1. Arsitektur Sebuah Aplikasi MIDP

7 Secara umum, terdapat beberapa hal penting dalam membuat sebuah aplikasi MIDlet, yaitu menyangkut lifecycle, user interface, command handling, deployment dan Application Management. Paket javax.microedition.midlet memiliki kelas MIDlet yang mendefinisikan MIDPJava 2 Micro Edition adalah edisi Java untuk device dengan kemampuan komputasi terbatas. 2.4.1 API GUI GUI dapat dibuat dengan komponen standar yang sudah disediakan (dalam package lcdui). List,Textbox, dll. Java akan secara otomatis menangani perbedaan antar device (ukuran layar,warna, dll). GUI dapat dibuat dengan canvas. Programmer menggambar sendiri semua yang diperlukan dan menangani perbedaan jenis layar (tidak akan dijelaskan di sini). Umumnya dipakai oleh game.

8 BAB 3 PEMBAHASAN 3.1 Display
Display merupakan objek yang mempresentasikan pengelola layar pada perangkat. Pada sebuah MIDlet hanya terdapat satu objek display. Objek display menyediakan metode untuk menggambar dan menampilkan elemen antarmuka grafis pada layar. Objek display juga menyediakan metode untuk mengetahui properti layar perangkat seperti apakah layar perangkat mendukung layar berwarna atau tidak. 3.2 Displayable Diplayable adalah kelas abstrak dari antarmuka pemakai (user interface). Dispalyable memiliki dua buah subkelas yaitu Canvas sebagai antarmuka level endah dan Screen sebagai antarmuka level tinggi. Pada sekali waktu hanya dapat ditampilkan satu buah objek Displayable yang disebut sebagai current Displayable. Displayable berbeda dengan display, jika dalam sebuah MIDlet hanya boleh ada sebuah display, lain dengan displayable, pada sebuah MIDlet boleh terdapat lebih dari satu displayable tetapi ada atu waktu hanya apat ditampilkan satu displayable oleh objek display, misalnya dalam satu MIDlet diperbolehkan ada banyak Canvas (subkelas displayable) yang ditampilkan secara bergantian oleh display. 3.3 Screen Screen adalah kelas di atas semua antarmuka pemakia level tinggi atau biasa di sebut superclass. Sebagian besar komponen Screen tidak mengizinkan penambahan komponen lain dan penghapusan pada komponen tersebut, komponen – kompoen itu antara lain List, Textbox, dan Alert, misalnya jika sebuah TextBoxt telah diset sebagai diplayable yang ditampilkan maka pengembang tidak dapat lagi menambahkan komponen lain dengan level sejajar TextBox. Jenis lain dari komponen screen adalah form yang mengizinkan pengembang untuk menambah elemen grafis untuk ditampilkan. 3.4 Canvas Canvas merupakan subkelas dari Displayable yang menggunakan antarmuka grafis level rendah. 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.

9 3.5 Font Sebuah font digunakan pada antarmuka pemakai level rendah. Font digunakan untuk mendefinisikan mode sebuah karakter atau string ke layar. Font ini hanya dapat digunakan pada antarmuka pemakai level rendah separti pada canvas. 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.6 List dan Interaksi User 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. Class List (javax.microedition.lcdui.List) merupakan class turunan dari class abstract javax.microedition.lcdui.Screen yang menyediakan masukan pilihan (multiple choice) pada layar.

10 3.7 Alert Alert adalah sejenis pesan yang tampil di layar yang menampilkan teks maupun gambar ke layar yang berguna utuk menginformasikansesuatu ke pemakai. 3.8 Command, List dan Interaksi User Pada tulisan ini akan dibahas tentang penggunaan class Command dan tip-trik penggunaan class ini dalam sebuah aplikasi. 3.8.1 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. 3.9 Form dan Textfield 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. Bekerja dengan Form Bekerja dengan Form memungkinkan Anda untuk menampilkan beberapa komponen GUI semacam daftar pilihan, masukan teks (textbox) dalam satu layar. Form diimplementasikan oleh class javax.microedition.lcdui.Form. Form dapat menampung komponen-komponen yang disebut item dalam satu layar. Item tersebut adalah textfield, image, date field, gauge dan choice group.

11 ChoiceGroup Class ChoiceGroup(javax.microedition.lcdui.ChoiceGroup) merupakan class turunan dari class abstract javax.microedition.lcdui.Item yang menyediakan masukan pilihan (multiple choice) pada layar. Konstruktor dari class ChoiceGroup ini ada dua yaitu: public ChoiceGroup(String title, int choiceType) public ChoiceGroup(String title, int choiceType, String[] choiceElement, Image[] choiceImages) Parameter-parameter: • String title Untuk memberikan title pada daftar pilihan yang ditampilkan. • int choiceType Tipe pilihan yang digunakan dapat berisi: Choice.EXCLUSIVE Berarti setiap saat hanya bisa dipilih 1 buah pilihan saja. Choice.MULTIPLE Berarti pengguna bisa memilih lebih dari 1 pilihan. Berbeda dengan class List sebelumnya yang bisa memiliki tipe Choice.IMPLICIT class ini tidak memiliki tipe yang bersangkutan. • String[] choiceElement Merupakan array dari elemen yang akan ditampilkan • Image[] choiceImages

12 Merupakan array dari gambar(javax. microedition. lcdui
Merupakan array dari gambar(javax.microedition.lcdui.Image) elemen yang akan ditampilkan. import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class ChoiceGroupDemo extends MIDlet { private Display d ; private Form form; private ChoiceGroup cg ; public ChoiceGroupDemo(){ form = new Form("Ini ChoiceGroup"); //ubah dengan Choice.EXCLUSIVE dan Choice.MULTIPLE cg = new ChoiceGroup("Pilihan Buah",Choice.MULTIPLE); cg.append("Apel", null); cg.append("Jeruk", null); cg.append("Semangka", null); form.append(cg); } public void startApp() { d = Display.getDisplay(this) ; d.setCurrent(form); public void pauseApp() { public void destroyApp(boolean unconditional) {

13 3.9.1 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); } public void startApp() { display = Display.getDisplay(this); display.setCurrent(form); public void pauseApp() {

14 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); 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.

15 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{ 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);

16 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); Berikut adalah tampilan dari program ini :

17 3.9.4 Image Objek Image digunakan untuk meletakkan objek gambar yang bisa bersifat immutable atau mutable. Gambar yang bersifat immutable artinya tidak bisa diubah-ubah oleh aplikasi dan umumnya berupa gambar yang diambil dari sebuah file gambar, URL atau tempat lain. Sebaliknya gambar yang bersifat mutable bisa diubah-ubah oleh aplikasi. Konstruktor dari class Image ini bersifat statik, sehingga Anda tidak menggunakan new untuk membuat sebuah objek Image melainkan mengacu ke fungsi createImage() pada objek Image ini: public static void createImage(String name) public static void createImage(Image img) public static void createImage(int width, int height) Konstruktor pertama dan kedua digunakan untuk membuat objek Image yang bersifat immutable. Jenis file gambar yang mendukung, hanya file dengan format PNG (Portable Network Graphics).

18 BAB 4 PERANCANGAN 4.1 Aplikasi GUI menggunakan IDE
Kita akan menggunakan Netbeans IDE untuk melakukan hal ini. Berikut adalah langkah-langkahnya : 1. Install Netbeans 2. Jalankan Netbeans sehingga muncul layar utama IDE

19 3. Klik menu File | New Project
4. Pilih Java - Java Application 5. Beri nama Project AppHelloWorld dan hilangkan pilihan Create Main Class, karena kita langsung membuat main class pada form Hello World

20 6. Klik kanan pada Project yang baru dibuat, pilih New | JFrame Form…
7. Beri nama Form yang baru dibuat dengan nama frmHelloWorld. Klik finish. Kita akan diberi satu buah form yang bisa didesain secara leluasa. 8. Jika di IDE Visual Basic kita mengenal Toolbox, di Netbeans kita mendapatkan sesuatu yang mirip dengan nama Pallete

21 9. Drag dan drop komponen Button dari Pallet ke form yang baru kita buat sehingga muncul 1 buah tombol dengan text jButton1 10. Klik kanan pada tombol tersebut dan pilih Change Variable Name. Ubah nama tombol menjadi btnHello 11. Klik kanan lagi pada tombol dan pilih Edit Text. Ganti text menjadi Hello World 12. Klik kanan lagi juga pada tombol dan pilih menu Events | Actions | actionPerformed. Event ini bisa diumpamakan sebagai event Command_Click pada Visual Basic

22 13. Kita akan mendapatkan layar kode. Ketikkan kode berikut :
14. view plaincopy to clipboardprint? JOptionPane.showMessageDialog(null, "Hello World !");   15. Kita akan melihat bahwa Java sudah pintar dengan langsung membuat tanda kutif tutup pada saat kita hendak mengetik “Hello World !”. 16. Seperti halnya VB, Java juga memiliki feature autocomplete untuk method dan properties. Disini kita juga akan menemukan 1 keunggulan penggunaan IDE dibandingkan mengetik program menggunakan konsole / text editor, yaitu feature Auto Import 17. Lihat pada bagian kiri kode ada semacam bohlam lampu kecil. Ini menandakan “ada sesuatu” dengan kode yang kita ketik. Karena kita menggunakan JOptionPane, kita membutuhkan librarynya agar Java mengenali komponen ini. Klik pada pada bohlam lampu tersebut dan pilih Add Import for javax.swing.JOptionPane

23 18. Setelah kita pilih, Netbeans secara otomatis akan menambahkan tulisan import javax.swing.JOptionPane; pada bagian atas kode. 19. Simpan project 20. Klik kanan pada form yang baru dibuat dan klik Run atau tekan tombol SHIFT + F6 21. Kita akan mendapatkan form dengan 1 buah tombol yang jika diklik akan memunculkan sebuah Message Box “Hello World !” Mengapa menggunakan JOptionPane dan bukannya Label untuk sekedar menampilkan tulisan Hello World ? Karena JOptionPane ini akan banyak kita gunakan pada tutorial mendatang. Kalau sekedar Label, semestinya tanpa perlu setting macam-macam kita sudah bisa memahaminya

24 4.2 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() {

25 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) { Hasil dari GUIMidlet01 hanya menampilan layar kosong dengan perintah Keluar.

26 4.2.1 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) {

27 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 */ 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);

28 /* 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); } Berikut adalah tampilan dari aplikasi di atas yang dijalankan pada emulator Nokia seri 60.

29 Berikut adalah contoh menggambar tulisan pada canvas.
4.3 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(); class CanvasGUIMidlet02 extends Canvas {

30 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, 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); } Hasil dari contoh di atas adalah sebagai berikut :

31 4.4 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() { public void destroyApp(boolean b) {

32 4.5 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 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() { public void destroyApp(boolean b) {

33 public void commandAction(Command c, Displayable d) {
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.setString("Link2 ditekan, silakan tunggu.."); else if (mainMenu.isSelected(2)) { destroyApp(false); notifyDestroyed(); Berikut adalah tampilan pada emulator Nokia Seri 60 ketika Link1 atau Link2 dipilih.

34 4.6 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 Display display; private Command cmdMenu; private Command cmdKeluar; private TextBox textBox; private List mainMenu; public CommandMidlet02() { textBox = new TextBox("Aplikasi 02", "Ini Command Midlet 02", 256, 0); 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) {

35 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)) { // ketika tombol untuk Link2 ditekan else if (mainMenu.isSelected(2)) { display.setCurrent(textBox); Berikut adalah tampilan pertama dari aplikasi dan ketika tombol untuk Menu ditekan.

36 4.6.1 Tambah dan Kurang Command
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.*; mport 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) { Yang perlu diperhatikan adalah ada penambahan baris sebagai berikut : public class CommandAddMidlet01 extends MIDlet implements CommandListener Dan method berikut : Perhatian Untuk lebih jelasnya tentang class CommandListener dan method commandAction bisa dibaca pada referensi tentang MIDP API.

37 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();

38 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 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 form.setCommandListener(this); } public void startApp() { display = Display.getDisplay(this); display.setCurrent(form); public void pauseApp() { public void destroyApp(boolean unconditional) {

39 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.setTitle("Perintah 2"); else if (c == cmdKembali) { 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"); Berikut adalah tampilan dari CommandAddMidlet pada emulator Siemens M55.

40 4.7 Form dan Ticker 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. Ticker merupakan teks yang berjalan pada bagian atas layer aplikasi MIDlet. Sebuah ticker dapat ditempatkan pada objek-objek turunan class Screen yang telah disebutkan yaitu TextBox, List, Form dan Alert. Untuk menambahkan ticker ke screen lakukan (lihat pada contoh sebelumnya) : Ticker tick = new Ticker("J2ME") ; t.setTicker(tick); display.setCurrent(t); keterangan : t adalah Objek dari Textbox, sedangkan display adalah Objek Display. Kemudian fungsi penting lainnya : • public void setString(String str); untuk menetapkan teks yang akan ditampilkan sebagai ticker • public String getString(); Menghasilkan teks yang ditampilkan oleh objek Ticker yang sedang aktif pada objek screen. Perlu Anda perhatikan bahwa tidak ada fungsi yang bisa digunakan untuk menghentikan gerakan teks pada Ticker, jadi teks akan terus berputar secara kontinu. Arah dan kecepatan teks yang bergerak pada Ticker ditentukan oleh implementasi MIDP.

41 4.7.1 Membuat Ticker Sederhana
Berikut adalah contoh penambahkan objek ticker pada form. import javax.microedition.midlet.*; import javax.microedition.lcdui.*; 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"); form = new Form("Ticker"); form.setTicker(ticker); 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();

42 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 tampilan 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.

43 4.7.2 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. import javax.microedition.midlet.*; import javax.microedition.lcdui.*; 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 startApp() { display = Display.getDisplay(this); display.setCurrent(form); public void pauseApp() {

44 Aplikasi ini merupakan hasil modifikasi dari TickerMidlet01. java
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()); } Untuk menampilkan teks yang diisikan user pada textField digunakan baris berikut : ticker.setString(textField.getString()); Dan berikut adalah tampilan dari aplikasi di atas :

45 4.8 Image Contoh kodenya: import java.io.IOException;
import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class imageDemo extends MIDlet { private Display d ; private Form form; private Image img ; public imageDemo(){ form = new Form("Tentang Image"); try{ img = Image.createImage("/com/duke.png"); form.append(img); }catch(IOException e){ } public void startApp() { d = Display.getDisplay(this) ; d.setCurrent(form); public void pauseApp() { public void destroyApp(boolean unconditional){

46 Kita harus menggunakan try{} catch{} karena fungsi createImage() melemparkan eksepsi berupa java.io.IOException. Exception ini untuk menangani kesalahan input/output. Contoh lain dengan menggunakan konstruktor kedua yaitu dengan objek Image yang telah ada maka kita bisa membuat objek Image lain. package com; import java.io.IOException; Import javax.microedition. midlet.*; lcdui.*; public class imageDemo2 extends MIDlet { private Display d ; private Form form; private Image img1, img2 ; public imageDemo2(){

47 Kita harus menggunakan try{} catch{} karena fungsi createImage() melemparkan eksepsi berupa java.io.IOException. Exception ini untuk menangani kesalahan input/output. Contoh lain dengan menggunakan konstruktor kedua yaitu dengan objek Image yang telah ada maka kita bisa membuat objek Image lain. package com; import java.io.IOException; import javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class imageDemo2 extends MIDlet { private Display d ; private Form form; private Image img1, img2 ; public imageDemo2(){ form = new Form("Tentang Image"); try{ img1 = Image.createImage("/com/duke.png"); img2 = Image.createImage(img1); form.append(img1); form.append(img2); }catch(IOException e){ } public void startApp() { d = Display.getDisplay(this) ; d.setCurrent(form); public void pauseApp() { public void destroyApp(boolean unconditional){

48 Fungsi-fungsi penting dalam class Image adalah:
• public Graphics getGraphics() Menghasilkan objek Graphics yang bersesuaian dari objek Image yang bersangkutan. • public int getHeight() menghasilkan tinggi objek gambar yang ada. • public int getWidth() Menghasilkan lebar objek gambar yang ada. • public boolean isMutable() Menghasilkan nilai true jika objek gambar bersifat mutable.

49 BAB 5 KESIMPULAN J2ME atau Java Micro Edition adalah sebuah teknologi yang telah banyak digunakan dalam pengembangan aplikasi pada ponsel dewasa ini, mulai dari aplikasi yang berupa permainan sampai dengan aplikasi ponsel sebagai pendukung aplikasi yang lebih besar seperti enterprise. Membuat aplikasi J2ME tidak memerlukan banyak software yang rumit atau besar, salah satu software yang pasti diperlukan adalah J2SE SDK/JDK, dalam J2SE SDK/JDK ini terdapat runtime dan library untuk program Java secara umum termasuk juga untuk J2ME, pada saat artikel ini ditulis telah ada J2SE SDK v Untuk menulis source-code J2ME, maka kita memerlukan sebuah J2ME IDE (integrated development environment), ada beberapa pilihan IDE yang diantaranya adalah Netbean, Sun One Java Studio Mobility, CodeWarrior dan notepad (atau text editor lainnya), untungnya semua software IDE yang disebutkan ini dapat di download gratis di website resmi masing masing perusahaan. Jadi untuk membuat program J2ME maka pihak developer tidak perlu mengeluarkan uang sama sekali untuk membeli software IDE. pada artikel ini yang diulas adalah IDE dari Netbean v4.1 dengan tambahan Netbean Mobility Pack v4.1, tambahan ini diperlukan untuk membuat aplikasi J2ME, karena jika hanya dengan Netbean v4.1 hanya dapat membuat aplikasi Java saja, Netbean Mobility Pack adalah module-module aplikasi J2ME dan emulator device untuk testing dalam PC. IDE lainnya boleh dicoba tapi dianjurkan memakai Netbean v4.1 karena versi ini sangat mudah dioperasikan dan dirasakan cukup cepat dibanding IDE lainnya dalam hal loading, compiling, running dan debugging.. GUI dapat dibuat dengan komponen standar yang sudah disediakan (dalam package lcdui). List, Textbox, dll. Java akan secara otomatis menangani perbedaan antar device (ukuran layar, warna, dll) dan juga dapat dibuat dengan canvas.

50 Sekian…. dan Terima Kasih