Modular Java dapat digunakan di berbagai lingkungan antarmuka seperti konsol, desktop, web dan Android berkat konsep modularnya. Tulisan ini membahas penggunaan kembali kelas yang sama pada berbagai lingkungan tersebut, yakni kelas 'AkarKuadrat' untuk menghitung akar kuadrat yang digunakan pada program berbasis konsol, desktop, web dan Android.
1. MODULAR JAVA
KONSOLE, DESKTOP, WEB DAN ANDROID
TRI SAPTO ADJI
21 April 2014
Ringkasan
Java merupakan salah satu bahasa pemrograman yang paling modular. Sejak awal di-
ciptakan, java telah mengusung konsep modular. Kelas-kelas yang telah dibuat dapat de-
ngan mudah diimplementasikan di berbagai lingkungan antarmuka yang berbeda. Kali ini,
Penulis mencoba berbagi pengalaman penulis saat belajar membuat sebuah aplikasi java
berbasis konsole, yang kemudian salah satu kelas yang digunakan dalam aplikasi tersebut
dapat diterapkan (digunakan kembali) pada program lainnya dalam lingkungan antarmuka
yang berbeda, yakni : desktop, web, dan Android. Kelas yang akan kita gunakan kembali
tersebut, sebelumnya telah dibahas dalam tulisan sebelumnya yakni myJavaNote03.pdf.
Pembahasan masih menggunakan java versi 1.6. Source code ditulis menggunakan text
editor dan dikompilasi melalui terminal, kecuali pembahasan mengenai aplikasi Android
yang sudah menggunakan IDE Eclipse. Tulisan ini hanya membahas masalah pembuatan
aplikasi, tidak membahas masalah bagaimana instalasi dari environment yang diperlukan.
Jadi dianggap pada sistem komputer Anda telah terinstall Java Runtime Environment, Java
Development Kit, modul java untuk Browser, Eclipse IDE, integrasi modul Android dengan
Eclipse. Jika belum, dan Anda ingin mempraktekan apa yang ada pada tulisan ini, maka
Anda harus terlebih dahulu mencari sumber lain mengenai cara instalasi kesemua paket-
paket tersebut.
1 Pembagian Kelas
Salah satu hal terpenting saat merancang sebuah program yang berbasis Object adalah memi-
sahkan antara kelas utama yang mengatur perhitungan dan alur program, dan kelas lainnya yang
mengatur antarmuka (bagaimana program tersebut ditampilkan). Hal ini sudah Penulis tunjukan
di tulisan sebelumnya (file ’myJavaNote03.pdf’), dimana rutin yang mengatur proses perhitungan
dituliskan dalam kelas ’AkarKuadrat.java’ dan yang mengatur tampilan (basis konsole) ditulis-
kan dalam kelas ’HitungAkarKuadrat.java’, yang kemudian masing-masing dikompilasi menjadi
’AkarKuadrat.class’ dan ’HitungAkarKuadrat.class’.
Sekedar untuk mengingatkan kembali, berikut adalah source code kedua kelas tersebut :
(i) Kelas yang merancang proses perhitungan :
//Berkas AkarKuadrat.java
//Author : Tri Sapto Adji
// @Manokwari, Papua Barat
public class AkarKuadrat {//awal blok kelas AkarKuadrat dimulai
private int a;
private int b;
1 PEMBAGIAN KELAS halaman 1 dari 44
2. private int c;
double x1;
double x2;
double determinan;
public AkarKuadrat(int a, int b, int c) {//awal blok
konstruktor
kelas
AkarKuadrat
this.a = a;
this.b = b;
this.c = c;
double d = Math.pow(this.b, 2) - 4*this.a*this.c;
determinan = d;
double x1 = ((-1*(this.b)) + Math.sqrt(determinan))/
(2*this.a);
this.x1 = x1;
double x2 = ((-1*(this.b)) - Math.sqrt(determinan))/
(2*this.a);
this.x2 = x2;
}//akhir blok konstruktor kelas AkarKuadrat
int nilaiA() {
return this.a;
}
int nilaiB() {
return this.b;
}
int nilaiC() {
return this.c;
}
}//Akhir blok kelas AkarKuadrat, Akhir berkas AkarKuadrat.java
(ii) Kelas yang mengatur tampilan pada lingkungan konsole :
//Berkas HitungAkarKuadrat.java
//program ini membutuhkan berkas AkarKuadrat.class pada direktori
kerja
//Author : Tri Sapto Adji @Manokwari, Papua Barat
public class HitungAkarKuadrat {
public static void main(String[] args) {
//jika pemanggilan kelas tidak disertai 3 buah argumen, maka :
if(args.length != 3){
System.err.println("nOops ... Jumlah argumen yang Anda
masukkan tidak sesuai ....");
System.err.println("Harus ada 3 argumen...");
System.err.println("Sintaks penulisan yang benar adalah
: java HitungAkarKuadrat <a> <b> <c>");
System.err.println("Dimana <a> adalah argumen pertama,
<b> adalah argumen kedua dan <c> adalah argumen ketiga
n");
System.exit(1);//keluar dari program
}
try{
//argumen pertama menjadi nilai variabel a :
1 PEMBAGIAN KELAS halaman 2 dari 44
3. nt a = Integer.valueOf(args[0]).intValue();
//argumen kedua menjadi nilai variabel b :
int b = Integer.valueOf(args[1]).intValue();
//argumen ketiga menjadi nilai variabel c :
int c = Integer.valueOf(args[2]).intValue();
//Membuat obyek dari kelas AkarKuadrat dan menjadikan
nilai variabel a, b dan c sebagai argumen dari obyek
tersebut :
AkarKuadrat ak = new AkarKuadrat(a,b,c);
//Membuat Keterangan Program, dilarang menghapus
keterangan ini!
System.out.println("n-------------------------------");
System.out.println("| author : Tri Sapto Adji |");
System.out.println("| @Manokwari, Papua Barat |");
System.out.println("-------------------------------");
System.out.println("nMENGHITUNG AKAR PERSAMAAN KUADRAT
(ax^2 + bx + c = 0)");
System.out.println("===================================
==================n");
//Menginformasikan nilai variabel a, b, c yang telah
Anda masukkan :
System.out.println("Anda memasukkan nilai : a = " + ak.
nilaiA() + ", b = " + ak.nilaiB() + ", c = " + ak.nilaiC
());
//Nilai variabel a tidak boleh 0, karenanya :
if(ak.nilaiA() == 0) {
System.out.println("Ada kesalahan, nilai a tidak boleh
0!");
System.out.println("Silahkan coba lagi ... :)n");
System.exit(2);
}
System.out.println("nHasil perhitungan : ");
System.out.println("-------------------");
//jika determinan bernilai negatif(< 0), maka akarnya adalah
imajiner
//atau bilangan khayal (tidak nyata).
//karenanya bilangan tersebut harus ditampilkan dalam
format i
//dimana i adalah akar dari -1
if(ak.determinan < 0) {
System.out.println("Karena Determinan bernilai
negatif (<0), yakni : Determinan D = " + ak.determinan
+" atau D = " + Math.abs(ak.determinan)+"i^2");
System.out.println("Maka akar-akar yang dihasilkan
adalah bilangan imaginer :");
//jika akar imajiner ini memiliki nilai variabel b=0,
maka :
if(ak.nilaiB() == 0) {
System.out.println("Akar pertama x1 = "+
Math.sqrt(Math.abs(ak.determinan))+"i/" + (2*ak.nilaiA
()));
System.out.println("Akar kedua x2 = "+
-Math.sqrt(Math.abs(ak.determinan))+"i/" + (2*ak.nilaiA
()));
System.out.println("Keterangan : i adalah akar
dari -1 (bilangan imaginer)");
1 PEMBAGIAN KELAS halaman 3 dari 44
4. }else {
System.out.println("Akar pertama x1 = ("+ -ak.nilaiB()
+ " + "+ Math.sqrt(Math.abs(ak.determinan))+"i)/" +
(2*ak.nilaiA()));
System.out.println("Akar kedua x2 = ("+ -ak.nilaiB()
+ " - "+ Math.sqrt(Math.abs(ak.determinan))+"i)/" +
(2*ak.nilaiA()));
System.out.println("Keterangan : i adalah akar dari
-1 (bilangan imaginer)");
}
//jika determinan >=0, maka :
}else {
System.out.println("Determinan D = " + ak.determinan);
System.out.println("Akar pertama x1 = " + ak.x1);
System.out.println("Akar kedua x2 = " + ak.x2);
}
//membuat sebuah baris kosong
System.out.println("");
//jika input argumen bukan berupa angka
}catch(NumberFormatException nfe) {
System.err.println("nAnda memasukan argumen yang bukan
berupa angka ..!");
System.err.println("Sintaks penulisan yang benar adalah :
java HitungAkarKuadrat <a> <b> <c> nNilai <a>, <b>, <c>
harus berupa angka!");
System.err.println("Contoh : java HitungAkarKuadrat 1 -12
32n");
System.exit(3);
}
}
}//Akhir Berkas HitungAkarKuadrat.java
Berikut adalah contoh tampilan aplikasi berbasis konsole tersebut :
1 PEMBAGIAN KELAS halaman 4 dari 44
5. Untuk lebih jelasnya silahkan lihat kembali artikel ’myJavaNote03.pdf’ tersebut di halaman sli-
deshare http://www.slideshare.net/trisaptoadji/my-javanote03.
2 Merancang Antarmuka Basis Desktop
2.1 Mempersiapkan Komponen
Setelah berhasil membuat program berbasis konsol (terminal) untuk menghitung akar persamaan
kuadrat, kita akan meneruskan dengan program basis GUI yang memanfaatkan kelas yang sama
yakni kelas ’AkarKuadrat.class’ yang telah kita buat dan kompilasi pada pembahasan sebelumnya.
Jadi jangan lupa jika Anda bekerja di direktori yang berbeda copy dulu file ’AkarKuadrat.class’
tersebut ke direktori kerja Anda sekarang.
Untuk itu kita perlu membuat desain antarmuka dari program tersebut. Kita akan mem-
beri nama program ini sebagai JKuadrat. Selanjutnya kita harus mempersiapkan beberapa
komponen GUI yang diperlukan, yakni :
(i) Yang pertama adalah Menu yang memiliki item menu yang jika diklik akan menampilkan
kotak dialog keterangan tentang program ini. Ditempatkan paling atas, di bawah title bar.
(ii) Di bawahnya adalah panel yang menampilkan Heading dari program ini.
(iii) Selanjutnya kotak isian untuk menampung input dari user. Kotak isian ini harus memiliki
label untuk memberikan informasi kepada user bahwa kotak tersebut adalah input dari
variabel a, b, dan c pada persamaan kuadrat ax2
+ bx + c = 0.
(iv) Label yang akan menampilkan hasil dari perhitungan.
(v) Tombol yang akan mengeksekusi proses perhitungan nilai determinan dan akar-akar persa-
maan kuadrat.
(vi) Tombol yang akan membersihkan (mengosongkan) kotak input, beserta tampilan nilai hasil
perhitungan sebelumnya agar dapat melakukan perhitungan lainnya.
Berikut adalah sketsa rancangan antarmuka program tersebut.
2 MERANCANG ANTARMUKA BASIS DESKTOP halaman 5 dari 44
6. JKuadrat ¨¨rr
Menu
MENGHITUNG AKAR PERSAMAAN KUADRAT
(ax2
+ bx + c = 0)
Nilai a Nilai b Nilai c
[1] [2] [3]
Determinan : Akar Pertama (x1) : Akar Kedua (x2) :
[4] [5] [6]
[7]
Hitung Bersihkan
Keterangan :
• [1] : Obyek berkelas JFormattedTextField sebagai input dari Nilai variabel a.
• [2] : Obyek berkelas JFormattedTextField sebagai input dari Nilai variabel b.
• [3] : Obyek berkelas JFormattedTextField sebagai input dari Nilai variabel c.
• [4] : Obyek berkelas JLabel sebagai output dari Nilai Determinan.
• [5] : Obyek berkelas JLabel sebagai output dari Nilai Akar Pertama.
• [6] : Obyek berkelas JLabel sebagai output dari Nilai Akar Kedua.
• [7] : Obyek berkelas JLabel untuk menampilkan keterangan apabila Determinan bernilai
negatif.
Langkah-langkah untuk mempersiapkan semua komponen pada gambar adalah sebagai berikut :
(a) Kita mulai dengan mendeklarasikan beberapa variabel yang akan digunakan sebagai variabel
yang dapat diakses di seluruh bagian internal kelas.
private JMenuItem item;
private JFormattedTextField a; //[1]
private JFormattedTextField b; //[2]
private JFormattedTextField c; //[3]
private JLabel determinan; //[4]
private JLabel akar1; //[5]
private JLabel akar2; //[6]
private JLabel ket; //[7]
private JButton hitung;
private JButton bersih;
(b) Mengatur tampilan, mulai dari judul paling atas, yakni menampilkan nama program ’JKua-
drat’. Hal ini dapat kita lakukan dengan pernyataan :
super("JKuadrat");
(c) Menyiapkan tempat untuk meletakkan obyek Menu, kemudian meletakkan Menu pada tempat
tersebut, melalui pernyataan :
2 MERANCANG ANTARMUKA BASIS DESKTOP halaman 6 dari 44
7. JMenuBar batangMenu = new JMenuBar();
setJMenuBar(batangMenu);
JMenu menu = new JMenu("Menu");
batangMenu.add(menu);
(d) Pada obyek Menu, kita meletakkan obyek berkelas JMenuItem yang bila diklik akan menam-
pilkan jendela berisi keterangan tentang Program ini.
item = new JMenuItem("Tentang JKuadrat", cekIcon("JKuadrat.png"));
menu.add(item);
item.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent ae){
if(ae.getSource() == item) keterangan();
}
});
’keterangan()’ yang terdapat pada kode tersebut adalah nama dari sebuah metode yang kita
buat sendiri dengan kode sebagai berikut :
private void keterangan() {
JOptionPane.showMessageDialog(
null,
"<html><h1>JKuadrat</h1><hr> <h3>Program untuk menghitung akar
persamaan kuadrat</h3>" +
"<br>Dibuat oleh Tri Sapto Adji"+
"<br>@Manokwari, Papua Barat Indonesia<br>Oktober 2011"+
"<br><br>JKuadrat by Tri Sapto Adji is is a Freeware."+
"<br>It was created in order to be usefull"+
"<br>but "Without Any Guarantee" for the mistake"+
"<br>or error that’ll happen by using this program." +
"<br>Use it at your own risk!",
"Tentang JKuadrat",
1, cekIcon("JKuadrat2.png")
);
}
Sedangkan ’cekIcon()’ yang terdapat dalam kode-kode tersebut, adalah sebuah metode yang
digunakan untuk menampilkan gambar. Ada dua gambar yang kita gunakan dalam program
ini, yakni :
• gambar logo program JKuadrat.
• gambar keterangan tentang i sebagai symbol dari
√
−1.
Gambar-gambar tersebut dapat Anda unduh di akhir tulisan ini.
Kode dari metode ’cekIcon()’ tersebut adalah sebagai berikut :
private ImageIcon cekIcon(String path) {
URL imgURL = CariAkarKuadrat.class.getResource(path);
if(imgURL != null) {
return new ImageIcon(imgURL);
}else {
System.err.println("Maaf, icon pada " + path + " tidak ada");
return null;
}
}
Perhatikan baris pernyataan :
2 MERANCANG ANTARMUKA BASIS DESKTOP halaman 7 dari 44
8. System.err.println("Maaf, icon pada " + path + " tidak ada");
Baris tersebut berguna saat Anda menjalankan program ini melalui konsole (saat kompilasi),
untuk mengecek apakah gambar yang disebutkan namanya sebagai argumen ada pada path
yang disebutkan. Pernyataan ini dapat Anda hilangkan, dan tidak akan berpengaruh jika
kelak program ini dijalankan melalui desktop (dengan meng-klik mouse).
(e) Mengatur tampilan Heading Program :
JLabel heading = new JLabel("<html><h3><center><b>MENGHITUNG AKAR
PERSAMAAN KUADRAT</b></center></h3><hr>"+
"<center><b>ax<sup>2</sup>+ bx + c = 0</b>
</center><br></html>");
JPanel panel0 = new JPanel();
panel0.add(heading);
getContentPane().add(panel0, BorderLayout.NORTH);
(f) Mengatur tampilan untuk input data :
JPanel panel1 = new JPanel(new GridLayout(5,3,5,5));
JLabel labela = new JLabel("nilai a");
JLabel labelb = new JLabel("nilai b");
JLabel labelc = new JLabel("nilai c");
a = new JFormattedTextField(NumberFormat.getNumberInstance());
b = new JFormattedTextField(NumberFormat.getNumberInstance());
c = new JFormattedTextField(NumberFormat.getNumberInstance());
panel1.add(labela);
panel1.add(labelb);
panel1.add(labelc);
panel1.add(a);
panel1.add(b);
panel1.add(c);
(g) Mengatur tampilan untuk output hasil perhitungan :
JLabel labeld = new JLabel("Determinan (D) :");
determinan = new JLabel();
JLabel labelAkar1 = new JLabel("Akar pertama (x1) :");
akar1 = new JLabel();
JLabel laberAkar2 = new JLabel("Akar kedua (x2) :");
akar2 = new JLabel();
panel1.add(labeld);
panel1.add(labelAkar1);
panel1.add(laberAkar2);
panel1.add(determinan);
panel1.add(akar1);
panel1.add(akar2);
ket = new JLabel();
panel1.add(ket);
getContentPane().add(panel1, BorderLayout.CENTER);
(h) Menambahkan tombol perintah untuk melakukan proses perhitungan dan tombol untuk
mengosongkan input/output data :
JPanel panel2 = new JPanel(new FlowLayout(FlowLayout.CENTER));
hitung = new JButton("Hitung!");
bersih = new JButton("Bersihkan!");
panel2.add(hitung);
panel2.add(bersih);
getContentPane().add(panel2, BorderLayout.SOUTH);
2 MERANCANG ANTARMUKA BASIS DESKTOP halaman 8 dari 44
9. 2.2 Melakukan proses perhitungan
Setelah selesai membuat komponen dan mengatur tata letaknya pada frame, kita harus mencip-
takan rutin yang akan melakukan proses perhitungan.
hitung.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent ae){
try{
int varA = Integer.valueOf(a.getValue().toString()).intValue();
int varB = Integer.valueOf(b.getValue().toString()).intValue();
int varC = Integer.valueOf(c.getValue().toString()).intValue();
AkarKuadrat ak = new AkarKuadrat(varA,varB,varC);
if(ak.nilaiA()==0) {
JOptionPane.showMessageDialog(
null,"Variabel a tidak boleh bernilai 0","Kesalahan : a = 0",0
);
}
if(ak.determinan < 0) {
determinan.setText("<html>"+String.valueOf(ak.determinan)+" atau "
+String.valueOf(Math.abs(ak.determinan))+"i<sup>2</sup></html>");
ket.setIcon(cekIcon("i1.png"));
if(ak.nilaiB()==0) {
akar1.setText(String.valueOf(Math.sqrt(Math.abs(ak.determinan)))+
"i/" + String.valueOf(2*ak.nilaiA()));
akar2.setText(String.valueOf(-Math.sqrt(Math.abs(ak.determinan)))+
"i/" + String.valueOf(2*ak.nilaiA()));
}else {
akar1.setText("("+String.valueOf(-1*ak.nilaiB()) + "+"+String.
valueOf(Math.sqrt(Math.abs(ak.determinan)))+"i)/" + String.
valueOf(2*ak.nilaiA()));
akar2.setText("("+String.valueOf(-1*ak.nilaiB()) + "-"+String.
valueOf(Math.sqrt(Math.abs(ak.determinan)))+"i)/" + String.
valueOf(2*ak.nilaiA()));
}
}else {
determinan.setText(String.valueOf(ak.determinan));
akar1.setText(String.valueOf(ak.x1));
akar2.setText(String.valueOf(ak.x2));
ket.setIcon(null);
}
}catch(NumberFormatException nfe) {
JOptionPane.showMessageDialog(
null,nfe.toString(),"Kesalahan : "+ nfe.getMessage(),1
);
}catch(NullPointerException npe) {
JOptionPane.showMessageDialog(
null,npe.toString()+"n(Terdapat variabel bernilai null)",
"Kesalahan : "+ npe.getMessage(),0
;
}
}
});
bersih.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent ae){
a.setText("");
b.setText("");
2 MERANCANG ANTARMUKA BASIS DESKTOP halaman 9 dari 44
10. c.setText("");
determinan.setText("");
akar1.setText("");
kar2.setText("");
ket.setIcon(null);
}
});
Berikut adalah hasil dari program yang kita buat :
(i) Hasil dari pengaturan tata letak komponen :
(ii) Menu ’Menu’ jika diklik akan menampilkan sebuah item menu ’Tentang JKuadrat’ beserta
icon gambar yang disertakan melalui metode ’cekIcon()’ :
(iii) Item menu tersebut jika diklik akan menghasilkan keterangan program sesuai dengan metode
’keterangan()’ yang kita buat :
2 MERANCANG ANTARMUKA BASIS DESKTOP halaman 10 dari 44
11. (iv) Berikut adalah tampilan dari beberapa operasi perhitungan yang dilakukan oleh program
ini, mulai dari yang hitungan sederhana dengan hasil bilangan bulat, bilangan pecahan,
akar kembar, hingga bilangan imaginer yang dinyatakan dalam i (i =
√
−1) :
• Perhitungan sederhana dengan hasil bilangan bulat :
• Hasil berupa akar kembar :
• Hasil berupa bilangan pecahan :
• Hasil berupa bilangan imaginer :
2 MERANCANG ANTARMUKA BASIS DESKTOP halaman 11 dari 44
12. Perhatikan bahwa apabila hasil berupa bilangan imaginer, maka di bawah nilai Determinan akan
muncul tulisan (penjelasan) Ket: i =
√
−1 (bilangan imaginer), sebab tidak mungkin menuliskan
angka dari akar bilangan negatif, karenanya nilainya dinyatakan dengan i. Misalnya
√
−4 dapat
dinyatakan sebagai 4 · (−1) =
√
4·
√
−1 = 2·
√
−1 = 2i. Dengan demikian -4 dapat dinyatakan
sebagai 4 · (−1) = 4 · (
√
−1)2
= 4i2
, sehingga
√
−4 =
√
4i2 = 2i.
3 Memodifikasi Aplikasi Desktop Menjadi Aplikasi Web
Antar Muka desktop yang barusan kita buat, dapat dengan mudah digunakan untuk ditampilkan
di halaman web sehingga dapat dibuka dengan Web Browser seperti Mozilla Firefox ataupun
Google Chrome. Syaratnya di sistem komputer Anda telah terinstall Java Web Start yang me-
mungkinkan Web Browser di sistem komputer Anda menjalankan aplikasi java. Di berbagai dis-
tribusi linux biasanya Anda dapat menggunakan modul IcedTea-Web yang diintegrasikan dengan
browser Anda.
Kita hanya perlu sedikit merubah source code di bagian awal dari source code sebelumnya
(file ’CariAkarKuadrat.java’). Yakni :
(i) menghapus atau menonaktifkan baris pernyataan :
import javax.swing.text.*
karena tidak kita gunakan.
(ii) Kemudian mengganti kelas induk (super class) yang tadinya menggunakan JFrame, sekarang
kita menggunakan JApplet.
public class CariAkarKuadrat extends JFrame {
menjadi
public class AppletCariAkarKuadrat extends JApplet {
Perhatikan bahwa sebaiknya nama kelas juga diganti menjadi ’AppletCariAkarKuadrat’,
agar tidak menimpa kelas untuk antarmuka desktop sebelumnya (kelas ’CariAkarKuadrat’).
(iii) Menghapus blok metode main. Jadi blok berikut harus Anda hapus :
public static void main(String[] args) {
CariAkarKuadrat cak = new CariAkarKuadrat();
cak.setSize(640,300);
PosisiFrame.center(cak);
cak.setVisible(true);
}
(iv) Mengganti deklarasi konstruktor
public CariAkarKuadrat() {
menjadi
public void init() {
(v) Menghapus dua baris berikut :
super("JKuadrat");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
3 MEMODIFIKASI APLIKASI DESKTOP MENJADI APLIKASI WEB halaman 12 dari 44
13. (vi) Menambahkan kata ’(Web Interface)’ di belakang ’JKuadrat’ dalam blok metode ’keterang-
an()’ :
...
"<html><h1>JKuadrat</h1><hr> <h3>Program untuk menghitung akar persamaan
kuadrat</h3>" +
...
menjadi
...
"<html><h1>JKuadrat (Web Interface)</h1><hr> <h3>Program untuk menghitung
akar persamaan kuadrat</h3>" +
...
(vii) Menyimpan source code hasil modifikasi dengan nama ’AppletCariAkarKuadrat.java’ sesuai
nama kelas yang dideklarasikan, kemudian mengkompilasinya menjadi file ’AppletCariAkar-
Kuadrat.class’.
(viii) Membuat sebuah file html (misalnya ’HitungAkarKuadrat.html’), yang isinya sebagai beri-
kut :
<html>
<head>
<title>JKuadrat (Web Interface) - Hitung Akar Kuadrat</title>
</head>
<body>
<p align="center">
<applet code="AppletCariAkarKuadrat.class" width=640 height=320 border=2>
</applet>
</p>
</body>
</html>
File HTML inilah yang harus Anda eksekusi untuk dijalankan melalui Web Browser di
sistem komputer Anda, dimana dua file sebelumnya yakni ’AppletCariAkarKuadrat.class’
dan ’AkarKuadrat.class’ harus berada pada direktori yang sama.
Berikut adalah hasil dari aplikasi tersebut yang dijalankan melalui beberapa Web Browser pada
sistem operasi Ubuntu 12.04 dengan modul IcedTea-Web yang telah terinstall.
• Mozilla firefox 27.0.1 :
3 MEMODIFIKASI APLIKASI DESKTOP MENJADI APLIKASI WEB halaman 13 dari 44
14. • Opera 12.16 :
• Chromium 30.0.1599.114 :
• Google Chrome 33.0.1750.117 :
3 MEMODIFIKASI APLIKASI DESKTOP MENJADI APLIKASI WEB halaman 14 dari 44
15. • Rekonq 2.3.2 :
4 Merancang Antarmuka untuk Android
Saat awal merancang suatu aplikasi untuk platform Android, pemrogram sudah dihadapkan pa-
da kewajiban untuk memisahkan antara inti program yang mengatur alur logika aplikasi dengan
tampilan dari aplikasi tersebut. Source code inti program tersebut biasanya disimpan dalam file
berekstensi java yang disimpan dalam folder ’src’ dengan hirarki subfolder sesuai nama paket (pac-
kage) yang disebutkan pada awal baris program. Sedangkan source code yang mengatur tampilan
biasanya (dan sebaiknya) disimpan dalam file berekstensi xml dalam folder ’res/layout’ (untuk
orientasi portrait) dan folder ’res/layout-land’ (untuk orientasi landscape). Variabel yang digu-
nakan mengatur tampilan dan nilainya disimpan dalam folder ’res/values’ pada file ’strings.xml’.
Namun demikian, jika Anda menggunakan IDE Eclipse yang menjalankan plugin Android maka
penempatan pada subfolder-subfolder tersebut otomatis akan dilakukan oleh Eclipse tanpa perlu
Anda lakukan secara manual, seperti yang akan kita lakukan berikut ini.
4.1 Memulai Project Baru
Sekarang saatnya kita memulai rancangan program sederhana kita. Kita akan memberinya nama
’AndKuadrat’. Penulis menggunakan IDE Eclipse version 3.7.2 (Indigo).
(i) Pilih File > New > Project... untuk membuka jendela Wizard.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 15 dari 44
16. (ii) Kemudian pilih Android > Android Application Project, dan klik Next. Isi informasi beri-
kut :
• Application name : AndKuadrat
• Project name : AndKuadrat-1
• Package name : id.org.sapto.andkuadrat
• Minimum required SDK : Android 2.2 (Froyo)
• Target SDK : Android 4.2 (Jelly Bean)
• Compile with : Google API’s (Google Inc.)(API 8)
• Theme : None
(iii) Selanjut beri tanda centang pada :
• Create custom launcher icon
• Create activity
• Create Project in Workspace
dan klik Next
(iv) Selanjutnya kita harus memilih gambar icon yang akan kita gunakan. Jika belum punya,
biarkan saja apa adanya dan klik Next. Jika sudah ada, pada bagian Image file klik tombol
Browse, pilih pada harddsik Anda file gambar yang akan Anda gunakan. Pada bagian
Scaling pilih center, pada bagian Shape pilih square, dan pada bagian Background color
pilih warna gray (abu-abu).
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 16 dari 44
17. (v) Kemudian beri tanda centang pada ’Create Activity’ dan pilih ’BlankActivity’, klik Next.
(vi) Terakhir beri nama pada file yang mengatur logika program (pada bagian Activity Name)
dan tampilan program (Layout name). Klik Finish untuk memulai pembuatan proyek baru
kita.
• Activity Name : MainActivity
• Layout Name : activity main
• Navigation Type : None
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 17 dari 44
18. (vii) Otomatis pada halaman Eclipse Anda akan terbuka file ’activity main.xml’ dengan tampilan
sebagai berikut :
4.2 Mengkonfigurasi Android Virtual Device
Setelah berhasil menciptakan sebuah project baru yakni kita beri nama ’AndKuadrat-1’ dengan
nama aplikasi ’AndKuadrat’, maka langkah selanjutnya adalah mengkonfigurasikan Android Vir-
tual Device yang akan kita gunakan untuk mengetest aplikasi yang akan kita selesaikan nantinya.
Android Virtual Device ini akan menjadi Device Virtual yang berjalan di komputer kita (yang
dapat dijalankan dan diset melalui IDE Eclipse) sebelum nantinya dicoba di device Android
sebenarnya yang Anda miliki.
(i) Klik menu Run > Run Configurations, pilih Android Application, lalu klik icon New di sudut
kiri atas, ganti namanya di kotak isian menjadi ’AndKuadrat’, dan klik tombo Browse di
bawah tab Android.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 18 dari 44
19. (ii) Pilih AndKuadrat-1, lalu tombol OK.
(iii) Anda akan kembali ke jendela sebelumnya. Pada bagian Launch pilih id.org.sapto.andkuadrat,
lalu klik tombol Apply.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 19 dari 44
20. (iv) Kemudian klik tab Target, klik tombol Manager
(v) Pada jendela Android Virtual Device Manager, pada tab Android Virtual Device klik tombol
New.
Silahkan isi sesuai kebutuhan, atau ikuti saja sesuai dengan gambar di atas, klik tombol
OK (Jika ada yang tidak sesuai maka tombol OK tidak akan dapat diakses).
(vi) Anda akan kembali ke jendela sebelumnya. Apabila nampak nama dari virtual device yang
barusan Anda buat, klik nama tersebut, lalu klik tombol Start.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 20 dari 44
21. (vii) Selanjutnya atur ukuran device virtual tersebut agar sesuai dengan layar komputer Anda.
(viii) Klik tombol Launch, tunggu beberapa saat hingga jendela virtual Android berhasil mun-
cul (cepat lambatnya tergantung kepada kemampuan Hardware komputer Anda). Berikut
adalah contoh tampilan Android Virtual Device di komputer Penulis.
(ix) Selanjutnya Anda boleh menutup semua kotak dialog yang tadi terbuka sebelumnya (jendela
Starting Android Emulator, Android Virtual Device Manager dan jendela Run Configura-
tions), dan tetap membiarkan jendela IDE Eclipse dan Android Virtual Device yang barusan
Anda buat terbuka.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 21 dari 44
22. (x) Untuk mengetes aplikasi pada project yang barusan Anda buat (AndKuadrat-1), klik nama
project tersebut pada jendela panel Project Explorer di sebelah kiri halaman IDE Eclipse
Anda, lalu klik Run > Debug As > Android Application. Jika tampilan berikut muncul
pada jendela Android Virtual Device yang tadi Anda buat, berarti langkah awal Anda telah
sukses.
Perhatikan bahwa tampilan ini sesuai dengan gambaran yang ditampilkan oleh file ’activi-
ty main.xml’ (di subfolder layout) pada tab ’Graphical Layout’ yang ditunjukan oleh IDE
Eclipse pada saat Anda pertama kali selesai mengkonfigurasikan Project ’AndKuadrat-1’.
Tentu saja bukan ini yang kita inginkan, oleh karenanya kita akan mengubahnya kemudian.
4.3 Programming pada Project Android AndKuadrat-1
Setelah melakukan langkah awal pembuatan project AndKuadrat-1 dan mengkonfigurasi Android
Virtual Device yang akan kita gunakan, selanjutnya adalah melakukan coding pada aplikasi yang
akan kita buat pada project tersebut. Sebagaimana langkah pada tahap awal pembuatan project
Android kita, aplikasi yang akan kita buat memiliki nama ’AndKuadrat’.
4.3.1 Menyalin File-file yang Diperlukan
1. Menyalin File AkarKuadrat.java
Aplikasi AndKuadrat yang akan kita buat ini nantinya akan memanfaatkan source code
kelas java yang telah kita buat sebelumnya, yakni ’AkarKuadrat.java’. Oleh karena itu,
langkah selanjutnya adalah meng-copy file tersebut ke direktori yang sama dengan file kelas
utama dari aplikasi AndKuadrat tersebut, yakni file ’MainActivity.java’. Karena package
kita adalah package id.org.sapto.andkuadrat, maka file tersebut oleh Eclipse disimpan
di subfolder dengan path ’id/org/sapto/andkuadrat’ dalam subfolder ’AndKuadrat-1/src’
dalam folder kerja Eclipse (yang diset saat pertama kali Eclipse dijalankan, default-nya
adalah folder Workspace), sehingga file ’AkarKuadrat.java’ tersebut harus kita salin ke
subfolder tersebut. Caranya :
(i) Dari menu File klik Open File, cari dimana sebelumnya Anda menyimpan file ’Akar-
Kuadrat.java’ tersebut.
(ii) Setelah terbuka di halaman Eclipse Anda, klik menu File > Save As, dan simpan di
folder ’[lokasi folder Eclipse]/AndKuadrat-1/src/id/org/sapto/andkuadrat/’.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 22 dari 44
23. Nampak pada gambar bahwa lokasi kerja Eclipse di komputer Penulis adalah eclipses-
pace, sehingga lokasinya adalah :
’∼/eclipsespace/AndKuadrat-1/src/id/org/sapto/andkuadrat’.
Jika Anda menggunakan pengaturan default dari Eclipse biasanya direktori kerjanya
adalah Workspace sehingga Anda harus menyimpannya di :
’∼/Workspace/AndKuadrat-1/src/id/org/sapto/andkuadrat’.
(iii) Kemudian file tersebut kita modifikasi dengan menambahkan satu pernyataan di baris
pertama yaitu :
package id.org.sapto.andkuadrat;
Selebihnya tidak ada perubahan lain.
2. Menyalin File Gambar
Aplikasi kita memerlukan dua gambar lainnya yang diperlukan untuk menampilkan Kete-
rangan i =
√
−1 apabila hasilnya berupa bilangan imaginer dan file gambar kosong apabila
nilainya bukan bilangan imaginer. Penulis telah mempersiapkannya yakni file ’i1.png’ yang
berisi gambar keterangan tersebut dan file ’i none,png’ yang berisi gambar kosong. Salin
kedua gambar tersebut ke dalam subfolder :
’AndKuadrat-1/res/drawable-hdpi’.
dalam direktori kerja Eclipse Anda.
4.3.2 Menyiapkan Variabel Komponen
Di bawah Project AndKuadrat-1, klik pembuka folder (>atau +) res kemudian value. Double
klik file ’strings.xml’, hapus semua isinya dan isikan kode berikut :
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">AndKuadrat</string>
<string name="heading1">AndKuadrat</string>
<string name="heading2">Menghitung Akar Persamaan Kuadrat</string>
<string name="heading3"><html>ax<sup><small>2</small></sup> + bx + c = 0
</html></string>
<string name="subhead1">Input Data :</string>
<string name="var_a">Variabel a</string>
<string name="var_b">Variabel b</string>
<string name="var_c">Variabel c</string>
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 23 dari 44
24. <string name="subhead2">Output (Hasil) :</string>
<string name="determinan">Determinan (D)</string>
<string name="x1"><html>Akar Pertama (x<sub><small>1</small></sub>)</html>
</string>
<string name="x2"><html>Akar Kedua (x<sub><small>2</small></sub>)</html>
</string>
<string name="hitung">Hitung</string>
<string name="clear">Bersihkan</string>
<string name="keterangan"><html>copyright owned by <b>Tri Sapto Adji</b>,
Manokwari Papua Barat</html></string>
<string name="ket_i">i adalah simbol dari bilangan imaginer (akar kuadrat
dari -1)</string>
</resources>
Simpan perubahan. Jika ada pesan kesalahan pada konsole biarkan saja, karena ini berhubungan
dengan file lain yang belum kita ubah.
4.3.3 Menyiapkan Tampilan
Buka file ’activity main.xml’ di folder res > layout, hapus semua isinya lalu masukkan kode
berikut :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<TextView
android:id="@+id/heading1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="false"
android:text="@string/heading1"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="@+id/heading2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/heading1"
android:layout_centerHorizontal="true"
android:layout_centerVertical="false"
android:text="@string/heading2" />
<TextView
android:id="@+id/heading3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/heading2"
android:layout_centerHorizontal="true"
android:layout_centerVertical="false"
android:text="@string/heading3" />
<EditText
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 24 dari 44
28. android:text="@string/var_c" />
<TextView
android:id="@+id/keterangan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:text="@string/keterangan"
android:textSize="10sp" />
</RelativeLayout>
Simpan perubahan. Jika masih ada pesan kesalahan, lihat apa pesannya. Kemungkinan isi dari
file ’activity main.xml’ yang ada di folder res > menu tidak sesuai dengan kode dalam file tersebut
di atas (file ’activity main.xml’ di folder res > layout). Karenanya buka file ’activity main.xml’
di folder res > menu, kosong semua variabel yang ada, sehingga tingga dua baris pernyataan
berikut :
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
</menu>
Setelah itu, coba Anda klik kanan pada konsole dan pilih clear. Lalu save kembali ketiga file
tersebut di atas (jika tombol save tidak bisa diakses, tambahkan satu spasi kosong pada baris
kosong di masing-masing file untuk memunculkan tombol save tersebut). Jika tidak ada pesan
kesalahan berarti Anda siap ke langkah berikutnya.
4.3.4 Menyiapkan File Utama (MainActivity.java)
Buka file ’MainActivity.java’ di bawah src > id.org.sapto.andkuadrat. Hapus semua isinya dan
tambahkan kode berikut :
package id.org.sapto.andkuadrat;
import android.os.Bundle;
import android.app.Activity;
import android.widget.Button;
import android.widget.TextView;
import android.widget.EditText;
import android.widget.ImageView;
import android.view.View.OnClickListener;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.app.AlertDialog;
import android.content.DialogInterface;
public class MainActivity extends Activity implements OnClickListener {
EditText nilaiVar_a;
EditText nilaiVar_b;
EditText nilaiVar_c;
TextView nilaiD;
TextView nilai_x1;
TextView nilai_x2;
ImageView ket_i;
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 28 dari 44
30. try{
int varA = Integer.valueOf(nilaiVar_a.getText().toString()).intValue();
int varB = Integer.valueOf(nilaiVar_b.getText().toString()).intValue();
int varC = Integer.valueOf(nilaiVar_c.getText().toString()).intValue();
AkarKuadrat ak = new AkarKuadrat(varA,varB,varC);
if(ak.nilaiA()==0) {
AlertDialog.Builder alertbox=new AlertDialog.Builder(this);
alertbox.setTitle("Kesalahan a=0");
alertbox.setMessage("nilai Variabel a tidak boleh 0!nSilahkan Ulangi
...");
alertbox.setNeutralButton("OK",new DialogInterface.OnClickListener(){
@Override
public void onClick(DialogInterface arg0,
int arg1) {
// TODO Auto-generated method stub
}
} );
}
if(ak.determinan < 0) {
nilaiD.setText(String.valueOf(ak.determinan));
ket_i.setImageResource(R.drawable.i1);
if(ak.nilaiB()==0) {
nilai_x1.setText(String.valueOf(Math. sqrt(Math.abs(ak.determinan)))+
"i/" + String.valueOf(2*ak.nilaiA()));
nilai_x2.setText(String.valueOf(-Math.sqrt(Math.abs(ak.determinan)))+
"i/" + String.valueOf(2*ak.nilaiA()));
}else {
nilai_x1.setText("("+String.valueOf(-1*ak.nilaiB()) + "+"+ String.
valueOf(Math.sqrt(Math.abs(ak.determinan)))+"i)/" + String.valueOf
(2*ak.nilaiA()));
nilai_x2.setText("("+String.valueOf(-1*ak.nilaiB()) + "-"+String.
valueOf(Math.sqrt(Math.abs(ak.determinan)))+"i)/" + String.valueOf
(2*ak.nilaiA()));
}
}else {
nilaiD.setText(String.valueOf(ak.determinan));
nilai_x1.setText(String.valueOf(ak.x1));
nilai_x2.setText(String.valueOf(ak.x2));
ket_i.setImageResource(R.drawable.i_none);
}
}catch(NullPointerException npe) {
AlertDialog.Builder alertbox=new AlertDialog.Builder(this);
alertbox.setTitle("Problem, Variabel kosong!");
alertbox.setMessage("Kesalahan : "+ npe.getMessage());
alertbox.setNeutralButton("OK",new DialogInterface.OnClickListener(){
@Override
public void onClick(DialogInterface arg0,
int arg1) {
//TODO Auto-generated method stub
}
} );
alertbox.show();
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 30 dari 44
31. }catch(NumberFormatException nfe) {
AlertDialog.Builder alertbox=new AlertDialog.Builder(this);
alertbox.setTitle("Problem, Kesalahan Tipe Data!");
alertbox.setMessage("Kesalahan : "+ nfe.getMessage());
alertbox.setNeutralButton("OK",new DialogInterface.OnClickListener(){
@Override
public void onClick(DialogInterface arg0,
int arg1) {
//TODO Auto-generated method stub
}
} );
alertbox.show();
}
}
}
}
Klik icon Debug As pada Main Toolbar (di bawah Menu Bar, berupa gambar Bug/Kutu) la-
lu pilih AndKuadrat. Otomatis pada Android Virtual Device Anda sekarang terbuka aplikasi
AndKuadrat yang berarti Anda telah berhasil membuat aplikasi tersebut.
Coba Anda klik icon Home yang bergambar rumah, lalu klik icon Launcher, nampak bahwa icon
AndKuadrat sudah ada dalam menu aplikasi.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 31 dari 44
32. Klik icon tersebut untuk membuka aplikasi. Lakukan uji coba perhitungan dengan memasukkan
nilai Variabel a, Variabel b, dan Variabel C. Otomatis keyboard virtual pada aplikasi Android
tersebut akan muncul. Bila telah selesai mengisi nilai klik Tombol Kembali di sebelah kanan
tombol Menu untuk menghilangkan tampilan keyboard virtual tersebut.
Klik tombol Hitung untuk menampilkan hasil perhitungan.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 32 dari 44
33. Sekarang klik tombol Menu untuk menampilkan menu Keterangan.
Klik menu Keterangan tersebut untuk menampilkan Keterangan mengenai program AndKuadrat
ini.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 33 dari 44
34. Sampai disini kita telah berhasil membuat sebuah aplikasi Android sederhana. Dengan demikian
tujuan kita untuk memanfaatkan sebuah file AkarKuadrat.java di tiga lingkungan yang berbeda
(Terminal/Konsole/Command Prompt, Desktop, Web dan Android Smartphone) berhasil kita
lakukan.
4.3.5 Tampilan Orientasi Landscape
Ada satu hal yang kita tinggalkan, yakni bahwa sebuah aplikasi Android biasanya dapat ditam-
pilkan dalam orientasi portrait maupun landscape. Saat kita memutar Smartphone Android kita,
maka aplikasi akan secara otomatis berubah tampilannya sesuai dengan orientasi Smartphone
tersebut. Hal ini terjadi jika setting auto rotation diaktifkan pada Smartphone. Agar aplikasi
kita juga dapat berubah ubah tampilannya sesuai orientasi tersebut, maka kita perlu membuat
satu lagi file ’activity main.xml’ dalam folder ’layout-land’ di folder ’res’. Untuk itu lakukan
langkah-langkah berikut :
(i) Klik kanan folder res tersebut di panel kiri program Eclipse Anda, pilih New > Folder. Pada
kotak isian Folder name, ketik ’layout-land’, dan klik tombol Finish untuk mengakhiri.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 34 dari 44
35. (ii) Selanjutnya kita akan membuat sebuah file dalam folder tersebut yang akan mengatur an-
tarmuka aplikasi AndKuadrat tersebut dalam orientasi landscape. Caranya klik menu File
> New > Other. Lalu di bawah folder Android pilih Android XML Layout File dan klik
tombol Next.
(iii) Ketikan nama ’activity main.xml’ pada kotak isian File. Jika ada peringatan bahwa File
already exist, biarkan saja (karena kita akan mensetting letak foldernya kemudian), klik
Next.
(iv) Pada kotak dialog selanjutnya ketikan pada kotak isian Folder : ’/res/layout-land’. Oto-
matis pada panel Chosen Qualifiers akan muncul ’Landscape’ (karena kita menyimpannya
di folder tersebut yang merupakan folder default untuk menyimpan file layout beroirentasi
landscape), klik tombol finish.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 35 dari 44
36. (v) Maka otomatis akan terbuka file baru dengan nama yang tertera pada tab l’and/activity main.xml’.
(vi) Klik tab ’activity main.xml’ di sebelah kanan tab ’Graphical Layout’ (tab ini posisinya di
bawah file sedang ditampilkan). Untuk menampilkan source code file tersebut.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 36 dari 44
37. (vii) Hapus semua isi file tersebut, dan isikan dengan kode berikut :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".MainActivity" >
<TextView
android:id="@+id/heading1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center_horizontal"
android:text="@string/heading1"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="@+id/heading2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center_horizontal"
android:text="@string/heading2" />
<TextView
android:id="@+id/heading3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center_horizontal"
android:text="@string/heading3" />
<LinearLayout android:id="@+id/linearLayout1"
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 37 dari 44
42. (ix) Disebabkan aplikasi Android Virtual Device di komputer kita tersebut tidak dapat kita pu-
tar atau diubah orientasinya, maka untuk mencoba hasilnya, kita perlu membuat sebuah
Android Virtual Device Manager yang baru (masih menggunakan konfigurasi Android Apli-
cation AndKuadrat) yang memiliki tampilan widescreen (landscape). Misalnya kita beri
nama ’AndKuadrat-Landscape’ dengan konfigurasi sebagaimana gambar berikut :
Tentu saja ini tidak dapat mewakili perangkat sesungguhnya karena kedua Android Virtual
Device yang kita buat tersebut memiliki settingan device yang berbeda.
(x) Kemudian jalankan Virtual Device tersebut dengan mengklik tombol Start pada jendela
Android Virtual Device Manager. Jangan lupa untuk menutup terlebih dahulu Android
Virtual Device sebelumnya yang beroirentasi portrait untuk menghemat memori komputer
Anda.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 42 dari 44
43. Berikut tampilan yang akan Anda dapatkan.
(xi) Lakukan Debug As > AndKuadrat untuk menampilkan hasil tampilan orientasi landscape.
Selanjutnya, untuk menjalankan aplikasi ini di perangkat Smartphone Android sebenarnya, Anda
tinggal mengkopi file ’AndKuadrat-1.apk’ di folder ’bin’ ke perangkat Anda tersebut dan mengklik
untuk menginstallnya.
Demikian, semoga bermanfaat :-) .
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 43 dari 44
44. LAMPIRAN
1. Download semua aplikasi yang dibahas disini di https://db.tt/Kie0bKTc
2. Download icon yang digunakan di https://db.tt/9bZcBM4i