Andi Sunyoto: Jurnal, Artikel, Mobile, Java, Programming, Database, Software Engineering, Rekayasa Web, J2ME

J2ME: Menampilkan Gambar dengan Class Canvas

January 15th, 2010 myandisun No comments

Salah satu kelebihan class Canvas adalah dapat menampilkan gambar. Pada modul ini kita akan membahas kode program untuk menampilkan file gambar di layar handphone.

Pertama anda siapkan file gambar yang akan ditampilkna. Biasanya file gambar yang ditampilkan dalam layar HP bertipe “PNG”.

Siapkan gambar degan nama dan extensi berikut: “btw.png,globe.png,ipod.png,printer.png,sepeda.png”
File di atas dapat diganti sesuai dengan keinginan kita.

MIDShowImage.java

^?View Code JAVA

import javax.microedition.midlet.*;
 
import javax.microedition.lcdui.*;
 
public class ShowImageNext extends MIDlet {
 
private Display display;
 
private Canvas canvas;
 
private Command cmdNExt;
 
private int counter = 0;
 
public ShowImageNext() {
 
canvas = new CanvasShowImg();
 
}
 
public void startApp() {
 
display.getDisplay(this).setCurrent(canvas);
 
}
 
public void pauseApp() {
 
}
 
public void destroyApp(boolean unconditional) {
 
}
 
//End of MIDlet
 
public class CanvasShowImg extends Canvas {
 
private Image currentImg;
 
public CanvasShowImg() {
 
}
 
protected void paint(Graphics g) {
 
try {
 
//set background to white
 
g.setColor(0xFFFFFF);
 
g.fillRect(0, 0, this.getWidth(), this.getHeight());
 
String[] option = {"/btw.png", "/globe.png", "/ipod.png", "/printer.png", "/sepeda.png"};
 
currentImg = Image.createImage(option[counter]);
 
System.out.println(counter);
 
} catch (Exception e) {
 
e.getMessage();
 
}
 
g.drawImage(currentImg, getWidth() / 2, getHeight() / 2, Graphics.VCENTER | Graphics.HCENTER);
 
}
 
public void keyPressed(int keycode) {
 
switch (getGameAction(keycode)) {
 
case Canvas.RIGHT:
 
counter = counter + 1;
 
repaint();
 
break;
 
case Canvas.LEFT:
 
break;
 
default:
 
}
 
}
 
}
 
}

Hasil program di atas adalah sebagai berikut:

Program menampilkan gambar

Keterangan:

Klik panah ke kanan untuk melihat gambar selanjutnya.

Categories: J2ME-Mobile Programming Tags: canvas, image, J2ME

Intro JavaScript and Hello World

September 13th, 2009 myandisun No comments

JavaScript adalah bahasa scripting yang popular di internet dan dapat bekerja di sebagian besar browser popular seperti Internet Explorer (IE), Mozilla FireFox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.

Beberapa hal tentang JavaScript:

JavaScript didesain untuk menambah interaktif suatu web.
JavaScript merupakan sebuah bahasa scripting.
Bahasa scripting merupakan bahasa pemrograman yang ringan.
JavaScript berisi baris kode yang dijalankan di komputer (web browser).
JavaScript biasanya disisipkan (embedded) dalam halaman HTML.
JavaScript adalah bahasa interpreter (yang berarti skrip dieksekusi tanpa proses kompilasi).
Setiap orang dapat menggunakan JavaScript tanpa membayar lisensi.

Contoh skrip JavaScript dapat dilihat pada contoh berikut:

Nama file: js01.html

^?View Code HTML

<html>
<head>
  <title>JavaScript</title>
</head>
 
<body>
  <script type="text/javascript">
    document.write("Hello world!");
    document.write("<p>Apa Kabar <br />" +
                   "<i>anda</i>?</p>");
  </script>
 
  <p>Demo output untuk menampilkan teks.
  </p>
</body>
</html>

Output file: js01.html

Menampilkan skrip pada HTML

Keterangan:

document.write : untuk menampilkan teks di halaman HTML.

Teks yang akan ditampilkan dapat dimasukkan ke dalam tag HTML. Tag akan dieksekusi oleh browser ketika teks ditampilkan. Hal mendasar yang perlu diperhatikan dalam JavaScript adalah:

Seperti pada C++/Java, perintah dalam Java diakhiri dengan ”;” (titik koma).
Komentar menggunakan:

// : untuk satu baris perintah

/*…*/ : untuk kelompok program (banyak baris)

Categories: JavaScript Tags: Hello World, HTML, JavaScript

J2ME: Form dan Ticker

September 11th, 2009 myandisun 2 comments

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.

Class Ticker tampak seperti animasi teks berjalan terus menerus dari kanan ke kiri. Untuk menampilkan obyek Ticker yang telah dibuat, kita perlu memanggil method setTicker() yang didefinisikan pada class Displayable. Ini artinya, method tersebut dapat kita panggil dari obyek turunan dari kelas Screen maupun Canvas.

Pada modul ini akan mengekplorasi ticker. Disini akan membuat obyek Ticker dan mengkaitkannya dengan obyek Form.

^?View Code JAVA

import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
 
public class MIDTicker extends MIDlet implements CommandListener {
	private Form form;
	private Display display;
	private Ticker ticker;
	private Command cmdKeluar;
 
	public MIDTicker() {
		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();
		}
	}
}

Berikut keterangan kode program di atas:

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

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.

1.1. 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. Aplikasi ini dapat memodifikasi aplikasi ticker sebelumnya.

^?View Code JAVA

import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
 
public class MIDTickerLanjut extends MIDlet implements CommandListener {
	private Form form;
	private Display display;
	private Ticker ticker;
	private Command cmdKeluar;
	private Command cmdTicker;
	private TextField textField;
 
	public MIDTickerLanjut() {
		cmdKeluar = new Command("Keluar", Command.EXIT, 1);
		cmdTicker = new Command("Set 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());
		}
	}
}

Aplikasi ini merupakan hasil modifikasi dari MIDTickerLanjut.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());

Categories: J2ME-Mobile Programming Tags: Form, J2ME, MIDlet, ticker

J2ME: Memanfaatkan Class TextBox

July 29th, 2009 myandisun 4 comments

Class TextBox merupakan turunan dari class Screen yang merepresentasikan sebuah kotak untuk mengisi teks.

Konstruktor class TextBox adalah sebagai berikut:

TextBox(String title, String text, int maxSize, int constraints);

Agar lebih jelas untuk memahami tentang class TextBox berikut contoh programnya:

^?View Code JAVA

import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
 
public class MIDTextBox extends MIDlet implements CommandListener {
 
    private Display display;
    private TextBox txt;
    private Form form;
    private Alert alert;
    private Command cmdExit;
    private Command cmdSetText;
    private Command cmdInsertText;
    private Command cmdClearText;
    private Command cmdInfoText;
    private Command cmdBack;
 
    public MIDTextBox() {
        display = Display.getDisplay(this);
        txt = new TextBox("Contoh Midlet TextBox", null, 256, TextField.ANY);
        cmdExit = new Command("Exit", Command.EXIT, 1);
        cmdSetText = new Command("Set Text", Command.SCREEN, 2);
        cmdInsertText = new Command("Insert", Command.SCREEN, 2);
        cmdInfoText = new Command("Info Text", Command.SCREEN, 2);
        cmdBack = new Command("Back", Command.BACK, 2);
 
        txt.addCommand(cmdExit);
        txt.addCommand(cmdSetText);
        txt.addCommand(cmdInsertText);
        txt.addCommand(cmdInfoText);
        txt.setCommandListener(this);
    }
 
    public void startApp() {
        display.setCurrent(txt);
    }
 
    public void pauseApp() {
    }
 
    public void destroyApp(boolean unconditional) {
    }
 
    public void commandAction(Command c, Displayable d) {
        if (c == cmdExit) {
            destroyApp(true);
            notifyDestroyed();
        } else if (c == cmdSetText) {
            txt.setString("Contoh Mengeset Text dalam TextBox");
        } else if (c == cmdInsertText) {
            txt.insert("Text Sisipan", 0);
        } else if (c == cmdClearText) {
            if (txt.size() &gt; 0) {
                txt.delete(0, txt.size());
            }
        } else if (c == cmdInfoText) {
            form = new Form("Informasi Text");
            form.append("Teks Aktif: " + txt.getString() + "\n");
            form.append("Jumlah Karakter: " + txt.size() + "\n");
            form.append("Posisi cursor: " + txt.getCaretPosition());
 
            form.addCommand(cmdBack);
            form.setCommandListener(this);
            display.setCurrent(form);
        } else if (c == cmdBack) {
            display.setCurrent(txt);
        }
    }
}

Hasil program di atas adalah sebagai berikut:

Memanfaatkan Class List

July 23rd, 2009 myandisun 1 comment

Class List merupakan turunan dari class Screen. Class ini berfungsi untuk menampilkan daftar item pilihan yang dapat diakses denagn cara menscroll. Untuk memilih item yang diinginkan dengan menekan tombol select atau menggunakan Command.

Bentuk constructor List adalah sebagai berikut:

List(String title, int listType)
List(String title, int listType, String[] choices, Image[] images)

Daftar method clas List yang digunakan untuk memanipulasi item adalah:

Nama Method	Kegunaan
append()	Menambah item dan menempatkannya pada posisi terakhir.
insert()	Menambah item dan menempatkannya di posisi sebelum item yang aktif(item yang sedang dipilih)
delete()	Menghapus item yang sedang dipilih.
deleteAll()	Menghapus semua item yan gterdapat pada objek List.

Parameter choices digunakan untuk melewatkan item-item yang diisikan, sedangkan images digunakan untuk menyimpan daftar gambar (icon) yang akan ditampilkan.

Dalam class List ada tiga macam tipe:

Tipe	Keterangan
EXCLUSIVE	List ini berbentuk radio button. User hanya dapat memilih satu pilihan.
MULTIPLE	List berupa list yang didalamnya dilengkapi dengan ChecBox. User dapat memilih lebih dari satu pilihan.
IMPLICITE	List standar yang biasa digunakan untuk menampilkan item pilihan.

Untuk mengetahui gambar-gambar mana yang dipilih, class List mendefinisikan method-method sebagai berikut:

public int getSelectedIndex()
public void getSelectedFlags(boolean[] selected)
public boolean isSelected(int elemenNum)

Sebelum memulai menuliskan program kita siapkan dulu icon yang akan dimunculkan pada List. Format gambar yang digunakan untuk icon adalah PNG. Berikut icon yang yang akan digunakan:

Nama File	Images
register.png
tools.png
wizard.png
contact.png
help.png

User Interface pada J2ME

July 23rd, 2009 myandisun 4 comments

Satu hal terpenting dalam sebuah aplikasi adalah Graphical User Interface (GUI). GUI dapat dimanfaatkan sebagai media input dalam sebuah aplikasi.

Class-class untuk membangun GUI dalam MIDP disimpan dalam lcdui (javax.microedition.lcdui), sehingga agar dapat memanfaatkan class tersebut dengan mengimport paketnya.

Struktur GUI dalam MIDP

GUI di dalam MIDP dibagi menjadi dua bagian, yaitu: high-level API (yang didasarkan pada penbentukan window) dan low-level API (yang didasarkan pada pembentukan canvas dan pixel). Penggunaan high-level API lebih mudah disbanding mengunakan low-level API untuk membangun sebuah interface pada suatu aplikasi. Namun dengan menggunakan low level API lebih leluasa dalam mendesain sebuah interface.

Model high-level API menyediakan class-class standar yang digunakan untuk membangun UI (User Interface) seperti component Form, TextBox, List, Alert. Model High-level mengimplementasikan class-class yang diturunkan dari class Screen.

Model Low-level API memberikan akses yang kepada programmer untuk melakukan control terhadap tampilan layer, termasuk pengembaran menggunakan pixel, pembentukan bentuk geometri (segitiga, segiempat,lingkaran,elips, arc, dll). Model ini sering digunakan untuk membuat game. Karena model ini dapat membuat bentuk tek graphic yang lebih spesifik sesaui dengan keinginan. Model ini juga dapat membaca tombol-tombol yang ditekan oleh user.

Dalam paket lcdui yang dimport menggunakan:

import javax.microedition.lcdui.*;

Paket ini terdiri dari interface dan class.

Tabel daftar interface:

Interface	Keterangan
Choice	Mengimplementasikan sejumah item pilihan yang didefinisikan.
CommandListener	Menerima event-event level tinggi.
ItemStateListener	Menerima event yang mengindikasikan perubahan keadaan dari item yang terdapat pada obyek Form

Mengelola Tombol (Object Command)

July 23rd, 2009 myandisun No comments

Suatu aplikasi yang menggunakan object Command terkadang memerlukan penambahan tombol dan pengurangan tombol pada saat run-time. Jadi sebuah object Command dapat di tambahkan maupun di kurangkan.

Mendeklarasikan Obyek Command

Bentuk umum membuat object Command adalah:

Command(label, commandType, priority)

Contoh:

cmdExit = new Command(“Exit”, Command.EXIT, 0);

Berikut macam-macam tipe Command yang dapat dipakai:

Berikut daftar tipe Command yang dapat digunakan:

Tipe	Nilai	Keterangan
SCREEN	1	Tipe Command yang diaplikasikan untuk layer (screen) tertentu.
BACK	2	Tipe Command yang digunakan untuk kembali ke layar sebelumnya.
CANCEL	3	Tipe Comamnd yang digunakan untuk jawaban negatif pada dialog box.
OK	4	Tipe Command untuk jawaban positif pada dialoag box.
HELP	5	Tipe Command yang digunakan untuk menampilkan help.
STOP	6	Tipe Command yang akan menghentikan proses-proses yang sedang berjalan.
EXIT	7	Tipe Command yang digunakan untuk keluar dari aplikasi.
ITEM	8	Tipe Command yang digunakan untuk menghubungkan aksi dalam suatu Command dengan item di dalam layar.

Menambah Obyek Command

Ada tulisan sebelumnya sudah banyak yang membahas tentang penambahan objek command pada objek lain seperti objek dari class List atau Form. Berikut contoh pengunaan obyek Command.

Untuk menambahkan obyek command menggunakan method addComamnd().

Contoh:

frm.addCommand(cmdExit);

Menghapus Obyek Command

Obyek Command yang telah kita tambahkan di dalam obyek frm dapat dihapus dengan menggunakan method removeCommand().

Contoh:

frm.removeCommand(cmdOpen);

Contoh Program

Read more…

Categories: J2ME-Mobile Programming Tags: command, J2ME, object, Program

Menangkap Event pada Tombol

July 22nd, 2009 myandisun 2 comments

Agar sebuah tombol dapat berfungsi, maka event yang terjadi pada tombol harus di tangkap.

Program diatas ketika di klik tombol Exit belum dapat keluar dari program.

^?View Code JAVA

import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
 
public class EventCommand extends MIDlet implements CommandListener{
    private Display display;
    private TextBox mainScreen;
    private Command cmdExit;
 
    public EventCommand(){
        display = Display.getDisplay(this);
        mainScreen = new TextBox("Hello", "Hello World", 512, 1);
        cmdExit = new Command("Exit", Command.EXIT, 1);
        mainScreen.addCommand(cmdExit);
        mainScreen.setCommandListener(this);
    }
 
    public void startApp() {
        display.setCurrent(mainScreen);
    }
 
    public void pauseApp() {
    }
 
    public void destroyApp(boolean unconditional) {
    }
 
    public void commandAction(Command c, Displayable d) {
        if (c==cmdExit){
            destroyApp(false);
            notifyDestroyed();
        }
    }
}

Hal-hal yang harus disertakan dalam menangkap sebuah event adalah:

… implement Command Listener
… setComamndListener
… commandAction

Catatan:

Ketika menambahkan implement CommandListener maka akan terdapat pesan kesalahan. Kesalahan tersebut terjadi karena jika menggunakan interface Command Listener harus disertai dengan method commandAction.

Aksi yang akan terjadi pada event di atur pada method commandAction. Pada aplikasi ini ketika ditekan tombol “Exit”, maka akan keluar dari program.

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

Hasil running program di atas adalah:

Sebelum diklik "Exit"

Setelah diklik "Exit"

Categories: J2ME-Mobile Programming Tags: Add, class, command, Event, J2ME

Menambah Tombol

July 22nd, 2009 myandisun No comments

Tombol pada sebuah aplikasi sangat penting. Tombol biasanya digunakan untuk mengendalikan jalannya program. Pada program ini kita akan menambahkan tombol pada aplikasi J2ME.

^?View Code JAVA

import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
 
public class AddCommand extends MIDlet{
    private Display display;
    private TextBox mainScreen;
    private Command cmdExit;
 
    public AddCommand(){
        display = Display.getDisplay(this);
        mainScreen = new TextBox("Hello", "Hello World", 512, 1);
        cmdExit = new Command("Exit", Command.EXIT, 1);
        mainScreen.addCommand(cmdExit);
    }
 
    public void startApp() {
        display.setCurrent(mainScreen);
    }
 
    public void pauseApp() {
    }
 
    public void destroyApp(boolean unconditional) {
    }
}

Mendefinisikan tombol pada J2ME menggunakan class Command. Berikut mendefinisikan tombol bernama cmdExit:

public class AddCommand extends MIDlet {
   ...
   private Command cmdExit;

Membuat bentuk instant cmdExit dan menambahkannya kedalam Class mainScreen. Class main screen harus turunan dari class Displayable.

public AddCommand(){
...
cmdExit = new Command("Exit", Command.EXIT, 1);
mainScreen.addCommand(cmdExit);
}

Tampilan program di atas adalah sebagai berikut

Tombol Exit Muncul pada Bagian Kiri

Categories: J2ME-Mobile Programming Tags: Add, class, command, J2ME, Remove

Hello World

July 21st, 2009 myandisun No comments

Seperti biasa ketika akan belajar sebuah bahasa pemrograman, program yang pertama kali dibuat adalah “Hello World”. Aplikasi ini dapat mengenal MIDlet Life Cycle. Program ini menggunakan J2ME.

^?View Code JAVA

import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
 
public class HelloWorld extends MIDlet {
    private Display display;
    private TextBox mainScreen;
 
    public HelloWorld(){
        display = Display.getDisplay(this);
        mainScreen = new TextBox("Hello", "Hello World", 512, 1);
    }
 
    public void startApp() {
        display.setCurrent(mainScreen);
    }
 
    public void pauseApp() {
    }
 
    public void destroyApp(boolean unconditional) {
    }
}

Ketika program diatas dijalankan menampilkan tulisan “Hello World”. Untuk menutup aplikasi kita harus lewat tombol di window layar emulator.
Hasil pada emulator adalah:

Tampilan Program Hello World

Categories: J2ME-Mobile Programming Tags: hello, J2ME, world

Archive

J2ME: Menampilkan Gambar dengan Class Canvas

Intro JavaScript and Hello World

J2ME: Form dan Ticker

1.1. Setting Teks pada Ticker

J2ME: Memanfaatkan Class TextBox

Memanfaatkan Class List

User Interface pada J2ME

Mengelola Tombol (Object Command)

Menangkap Event pada Tombol

Menambah Tombol

Hello World

Recent Posts

Categories

Pages

Archives

Links