Transcript presentasi is 3 - Perguruan Tinggi Raharja

GUI MENGGUNAKAN HANDPHONE
BERFASILITAS J2ME
INDEPENDENT STUDY
0733458648
0733458607
0733458307
0733459212
ACHMAD TAUFIK
ELIA DWI CHANDRA
RINDHY ANTHIKA NADYA
TRI SETYO
SISTEM KOMPUTER
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.
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
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
2.2 cakupan J2ME
Device yang bisa diprogram dengan J2ME mulai dari smart card sampai PDA. Masingmasing 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
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
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.
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.
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.
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.
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
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) {
}
}
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() {
}
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.
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);
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 :
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).
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
3.
4.
Klik menu File | New Project
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
6.
7.
8.
Klik kanan pada Project yang
baru dibuat, pilih New |
JFrame Form…
Beri nama Form yang baru
dibuat dengan nama
frmHelloWorld. Klik finish. Kita
akan diberi
satu buah form yang bisa
didesain secara leluasa.
Jika di IDE Visual Basic kita
mengenal Toolbox, di Netbeans
kita mendapatkan sesuatu
yang mirip dengan nama
Pallete
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
Klik kanan lagi juga pada
tombol dan pilih menu Events |
Actions | actionPerformed.
Event ini bisa diumpamakan
sebagai event Command_Click
pada Visual Basic
12.
13.
Kita akan mendapatkan layar kode.
Ketikkan kode berikut :
14.
view plaincopy to clipboardprint?
–
JOptionPane.showMessageDial
og(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.
17.
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
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
18.
19.
20.
21.
Setelah kita pilih, Netbeans
secara otomatis akan
menambahkan tulisan import
javax.swing.JOptionPane;
pada bagian atas kode.
Simpan project
Klik kanan pada form yang
baru dibuat dan klik Run atau
tekan tombol SHIFT + F6
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
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() {
}
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.
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) {
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);
/* 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.
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 {
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);
}
}
Hasil dari contoh di atas adalah sebagai berikut :
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) {
}
}
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) {
}
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 = new Alert("Alert!!");
alert.setString("Link2 ditekan, silakan tunggu..");
display.setCurrent(alert);
}
else if (mainMenu.isSelected(2)) {
destroyApp(false);
notifyDestroyed();
}
}
}
}
Berikut adalah tampilan pada emulator Nokia Seri 60 ketika Link1 atau
Link2 dipilih.
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) {
}
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);
}
}
}
}
Berikut adalah tampilan
pertama dari aplikasi dan
ketika tombol untuk Menu
ditekan.
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.
4.6.1.1 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 langkahlangkah 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 :
public void commandAction(Command c, Displayable d) {
}
Perhatian
Untuk lebih jelasnya tentang class CommandListener dan method commandAction
bisa dibaca pada referensi tentang MIDP API.
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();
}
}
}
}
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) {
}
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) {
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);
}
}
}
}
Berikut adalah tampilan dari
CommandAddMidlet pada emulator
Siemens M55.
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.
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();
}
}
}
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.
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() {
}
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 :
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){
}
}
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(){
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){
}
}
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.
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 v1.4.2.
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.
Sekian….
dan Terima
Kasih