my javanote04

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 javaberbasis konsole, yang kemudian salah satu kelas yang digunakan dalam aplikasi tersebutdapat diterapkan (digunakan kembali) pada program lainnya dalam lingkungan antarmukayang berbeda, yakni : desktop, web, dan Android. Kelas yang akan kita gunakan kembalitersebut, sebelumnya telah dibahas dalam tulisan sebelumnya yakni myJavaNote03.pdf.

Pembahasan masih menggunakan java versi 1.6. Source code ditulis menggunakan texteditor dan dikompilasi melalui terminal, kecuali pembahasan mengenai aplikasi Androidyang sudah menggunakan IDE Eclipse. Tulisan ini hanya membahas masalah pembuatanaplikasi, tidak membahas masalah bagaimana instalasi dari environment yang diperlukan.Jadi dianggap pada sistem komputer Anda telah terinstall Java Runtime Environment, JavaDevelopment Kit, modul java untuk Browser, Eclipse IDE, integrasi modul Android denganEclipse. Jika belum, dan Anda ingin mempraktekan apa yang ada pada tulisan ini, makaAnda 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 yangmengatur antarmuka (bagaimana program tersebut ditampilkan). Hal ini sudah Penulis tunjukandi tulisan sebelumnya (file ’myJavaNote03.pdf’), dimana rutin yang mengatur proses perhitungandituliskan 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

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 :


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


}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

32\n");

System.exit(3);

}

}

}//Akhir Berkas HitungAkarKuadrat.java

Berikut adalah contoh tampilan aplikasi berbasis konsole tersebut :


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 persamaankuadrat, kita akan meneruskan dengan program basis GUI yang memanfaatkan kelas yang samayakni 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 beberapakomponen GUI yang diperlukan, yakni :

(i) Yang pertama adalah Menu yang memiliki item menu yang jika diklik akan menampilkankotak 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 memilikilabel untuk memberikan informasi kepada user bahwa kotak tersebut adalah input darivariabel 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 hasilperhitungan sebelumnya agar dapat melakukan perhitungan lainnya.

Berikut adalah sketsa rancangan antarmuka program tersebut.

2 MERANCANG ANTARMUKA BASIS DESKTOP halaman 5 dari 44

JKuadrat ��HH

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 bernilainegatif.

Langkah-langkah untuk mempersiapkan semua komponen pada gambar adalah sebagai berikut :

(a) Kita mulai dengan mendeklarasikan beberapa variabel yang akan digunakan sebagai variabelyang 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 tempattersebut, melalui pernyataan :


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 kitabuat 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 yangdigunakan untuk menampilkan gambar. Ada dua gambar yang kita gunakan dalam programini, 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 :


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 pathyang disebutkan. Pernyataan ini dapat Anda hilangkan, dan tidak akan berpengaruh jikakelak 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 untukmengosongkan 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.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() {


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


null,"Variabel a tidak boleh bernilai 0","Kesalahan : a = 0",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)))+


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

}



null,nfe.toString(),"Kesalahan : "+ nfe.getMessage(),1

);

}catch(NullPointerException npe) {


null,npe.toString()+"\n(Terdapat variabel bernilai null)",

"Kesalahan : "+ npe.getMessage(),0

;

}

}

});

bersih.addActionListener(new ActionListener() {


a.setText("");

b.setText("");


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’ besertaicon gambar yang disertakan melalui metode ’cekIcon()’ :

(iii) Item menu tersebut jika diklik akan menghasilkan keterangan program sesuai dengan metode’keterangan()’ yang kita buat :


(iv) Berikut adalah tampilan dari beberapa operasi perhitungan yang dilakukan oleh programini, 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 :


Perhatikan bahwa apabila hasil berupa bilangan imaginer, maka di bawah nilai Determinan akanmuncul 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 ditampilkandi halaman web sehingga dapat dibuka dengan Web Browser seperti Mozilla Firefox ataupunGoogle 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 denganbrowser 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, sekarangkita 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

(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’ sesuainama 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 disistem 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 padasistem operasi Ubuntu 12.04 dengan modul IcedTea-Web yang telah terinstall.

• Mozilla firefox 27.0.1 :


• Opera 12.16 :

• Chromium 30.0.1599.114 :

• Google Chrome 33.0.1750.117 :


• 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 dengantampilan dari aplikasi tersebut. Source code inti program tersebut biasanya disimpan dalam fileberekstensi 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 tampilanbiasanya (dan sebaiknya) disimpan dalam file berekstensi xml dalam folder ’res/layout’ (untukorientasi 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 makapenempatan pada subfolder-subfolder tersebut otomatis akan dilakukan oleh Eclipse tanpa perluAnda 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

(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 tombolBrowse, pilih pada harddsik Anda file gambar yang akan Anda gunakan. Pada bagianScaling pilih center, pada bagian Shape pilih square, dan pada bagian Background colorpilih warna gray (abu-abu).


(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 barukita.

• Activity Name : MainActivity

• Layout Name : activity main

• Navigation Type : None


(vii) Otomatis pada halaman Eclipse Anda akan terbuka file ’activity main.xml’ dengan tampilansebagai berikut :

4.2 Mengkonfigurasi Android Virtual Device

Setelah berhasil menciptakan sebuah project baru yakni kita beri nama ’AndKuadrat-1’ dengannama 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 (yangdapat dijalankan dan diset melalui IDE Eclipse) sebelum nantinya dicoba di device Androidsebenarnya yang Anda miliki.

(i) Klik menu Run > Run Configurations, pilih Android Application, lalu klik icon New di sudutkiri atas, ganti namanya di kotak isian menjadi ’AndKuadrat’, dan klik tombo Browse dibawah tab Android.


(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.


(iv) Kemudian klik tab Target, klik tombol Manager

(v) Pada jendela Android Virtual Device Manager, pada tab Android Virtual Device klik tombolNew.

Silahkan isi sesuai kebutuhan, atau ikuti saja sesuai dengan gambar di atas, klik tombolOK (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 yangbarusan Anda buat, klik nama tersebut, lalu klik tombol Start.


(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). Berikutadalah contoh tampilan Android Virtual Device di komputer Penulis.

(ix) Selanjutnya Anda boleh menutup semua kotak dialog yang tadi terbuka sebelumnya (jendelaStarting Android Emulator, Android Virtual Device Manager dan jendela Run Configura-tions), dan tetap membiarkan jendela IDE Eclipse dan Android Virtual Device yang barusanAnda buat terbuka.


(x) Untuk mengetes aplikasi pada project yang barusan Anda buat (AndKuadrat-1), klik namaproject tersebut pada jendela panel Project Explorer di sebelah kiri halaman IDE EclipseAnda, lalu klik Run > Debug As > Android Application. Jika tampilan berikut munculpada jendela Android Virtual Device yang tadi Anda buat, berarti langkah awal Anda telahsukses.

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 IDEEclipse 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 AndroidVirtual Device yang akan kita gunakan, selanjutnya adalah melakukan coding pada aplikasi yangakan kita buat pada project tersebut. Sebagaimana langkah pada tahap awal pembuatan projectAndroid kita, aplikasi yang akan kita buat memiliki nama ’AndKuadrat’.

4.3.1 Menyalin File-file yang Diperlukan

1. Menyalin File AkarKuadrat.javaAplikasi AndKuadrat yang akan kita buat ini nantinya akan memanfaatkan source codekelas 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 kelasutama dari aplikasi AndKuadrat tersebut, yakni file ’MainActivity.java’. Karena packagekita adalah package id.org.sapto.andkuadrat, maka file tersebut oleh Eclipse disimpandi subfolder dengan path ’id/org/sapto/andkuadrat’ dalam subfolder ’AndKuadrat-1/src’dalam folder kerja Eclipse (yang diset saat pertama kali Eclipse dijalankan, default-nyaadalah folder Workspace), sehingga file ’AkarKuadrat.java’ tersebut harus kita salin kesubfolder 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 difolder ’[lokasi folder Eclipse]/AndKuadrat-1/src/id/org/sapto/andkuadrat/’.


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 kerjanyaadalah 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 barispertama yaitu :

package id.org.sapto.andkuadrat;

Selebihnya tidak ada perubahan lain.

2. Menyalin File GambarAplikasi 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’ yangberisi gambar keterangan tersebut dan file ’i none,png’ yang berisi gambar kosong. Salinkedua 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. Doubleklik 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>


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

<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:layout_below="@id/heading1"



android:text="@string/heading2" />

<TextView




android:layout_below="@id/heading2"




<EditText


android:id="@+id/nilaiVar_a"



android:layout_alignLeft="@+id/var_a"

android:layout_alignRight="@+id/var_a"

android:layout_below="@+id/var_a"

android:ems="10"

android:inputType="numberSigned" />

<EditText

android:id="@+id/nilaiVar_b"



android:layout_alignBaseline="@+id/nilaiVar_a"

android:layout_alignBottom="@+id/nilaiVar_a"

android:layout_alignLeft="@+id/var_b"

android:layout_alignRight="@+id/var_b"

android:ems="10"


<EditText

android:id="@+id/nilaiVar_c"



android:layout_alignBaseline="@+id/nilaiVar_b"

android:layout_alignBottom="@+id/nilaiVar_b"

android:layout_alignLeft="@+id/var_c"

android:layout_alignRight="@+id/var_c"

android:ems="10"


<TextView

android:id="@+id/subhead1"



android:layout_below="@+id/heading3"


android:layout_marginTop="12dp"

android:text="@string/subhead1"

android:textAppearance="?android:attr/textAppearanceMedium" />

<LinearLayout

android:id="@+id/linearLayout1"



android:layout_alignParentLeft="true"

android:layout_alignParentRight="true"

android:layout_below="@+id/subhead2"

android:orientation="vertical" >

<TextView

android:id="@+id/determinan"



android:layout_gravity="center_horizontal"



android:text="@string/determinan" />

<TextView

android:id="@+id/nilaiD"

android:layout_width="fill_parent"



android:gravity="center_horizontal"


<TextView

android:id="@+id/x1"





android:text="@string/x1" />

<TextView

android:id="@+id/nilai_x1"






<TextView







<TextView







<ImageView

android:id="@+id/ket_i"





android:contentDescription="@string/ket_i"

android:gravity="center_horizontal" >

</ImageView>

</LinearLayout>

<TextView





android:layout_below="@+id/nilaiVar_b"





<TextView

android:id="@+id/var_a"




android:layout_below="@+id/subhead1"

android:layout_marginLeft="16dp"


android:text="@string/var_a" />

<LinearLayout



android:layout_above="@+id/keterangan"



android:gravity="center"

android:orientation="horizontal" >

<Button

android:id="@+id/hitung"



android:text="@string/hitung" />

<Button

android:id="@+id/clear"



android:text="@string/clear" />

</LinearLayout>

<TextView

android:id="@+id/var_b"



android:layout_above="@+id/nilaiVar_b"


android:text="@string/var_b" />

<TextView

android:id="@+id/var_c"



android:layout_above="@+id/nilaiVar_c"


android:layout_toRightOf="@+id/subhead2"


android:text="@string/var_c" />

<TextView

android:id="@+id/keterangan"



android:layout_alignParentBottom="true"



android:text="@string/keterangan"

android:textSize="10sp" />

</RelativeLayout>

Simpan perubahan. Jika masih ada pesan kesalahan, lihat apa pesannya. Kemungkinan isi darifile ’activity main.xml’ yang ada di folder res > menu tidak sesuai dengan kode dalam file tersebutdi 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 pernyataanberikut :

<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 filetersebut di atas (jika tombol save tidak bisa diakses, tambahkan satu spasi kosong pada bariskosong di masing-masing file untuk memunculkan tombol save tersebut). Jika tidak ada pesankesalahan 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 dantambahkan 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;


@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Button hitung=(Button)this.findViewById(R.id.hitung);

hitung.setOnClickListener(this);

Button clear=(Button)this.findViewById(R.id.clear);

clear.setOnClickListener(this);

nilaiVar_a = (EditText)this.findViewById(R.id.nilaiVar_a);

nilaiVar_b = (EditText)this.findViewById(R.id.nilaiVar_b);

nilaiVar_c = (EditText)this.findViewById(R.id.nilaiVar_c);

nilaiD = (TextView)this.findViewById(R.id.nilaiD);

nilai_x1 = (TextView)this.findViewById(R.id.nilai_x1);

nilai_x2 = (TextView)this.findViewById(R.id.nilai_x2);

ket_i.setImageResource(R.drawable.i_none);

}

public boolean onCreateOptionsMenu(Menu menu){

super.onCreateOptionsMenu(menu);

menu.add("Keterangan");

return true;

}

public boolean onOptionsItemSelected(MenuItem item){

if(item.getItemId()==0){

AlertDialog.Builder alertbox=new AlertDialog.Builder(this);

alertbox.setTitle("AndKuadrat");

alertbox.setMessage("Program Untuk Menghitung Determinan dan\nAkar-Akar

Persamaan Kuadrat\n\nby : Tri Sapto Adji\n@Manokwari, Papua Barat");

alertbox.setNeutralButton("OK",new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface arg0, int arg1) {

// TODO Auto-generated method stub

}

} );

alertbox.show();

}

return true;

}

public void onClick(View view){

if(view==findViewById(R.id.clear)){

nilaiVar_a.setText(null);

nilaiVar_b.setText(null);

nilaiVar_c.setText(null);

nilaiD.setText("");

nilai_x1.setText("");

nilai_x2.setText("");


}

if(view==findViewById(R.id.hitung)){


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


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

}

} );

}


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


nilai_x2.setText(String.valueOf(-Math.sqrt(Math.abs(ak.determinan)))+


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


}

}catch(NullPointerException npe) {


alertbox.setTitle("Problem, Variabel kosong!");

alertbox.setMessage("Kesalahan : "+ npe.getMessage());


@Override


int arg1) {

//TODO Auto-generated method stub

}

} );

alertbox.show();




alertbox.setTitle("Problem, Kesalahan Tipe Data!");

alertbox.setMessage("Kesalahan : "+ nfe.getMessage());


@Override


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 aplikasiAndKuadrat yang berarti Anda telah berhasil membuat aplikasi tersebut.

Coba Anda klik icon Home yang bergambar rumah, lalu klik icon Launcher, nampak bahwa iconAndKuadrat sudah ada dalam menu aplikasi.


Klik icon tersebut untuk membuka aplikasi. Lakukan uji coba perhitungan dengan memasukkannilai Variabel a, Variabel b, dan Variabel C. Otomatis keyboard virtual pada aplikasi Androidtersebut akan muncul. Bila telah selesai mengisi nilai klik Tombol Kembali di sebelah kanantombol Menu untuk menghilangkan tampilan keyboard virtual tersebut.

Klik tombol Hitung untuk menampilkan hasil perhitungan.


Sekarang klik tombol Menu untuk menampilkan menu Keterangan.

Klik menu Keterangan tersebut untuk menampilkan Keterangan mengenai program AndKuadratini.


Sampai disini kita telah berhasil membuat sebuah aplikasi Android sederhana. Dengan demikiantujuan kita untuk memanfaatkan sebuah file AkarKuadrat.java di tiga lingkungan yang berbeda(Terminal/Konsole/Command Prompt, Desktop, Web dan Android Smartphone) berhasil kitalakukan.

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 Smartphonetersebut. Hal ini terjadi jika setting auto rotation diaktifkan pada Smartphone. Agar aplikasikita juga dapat berubah ubah tampilannya sesuai orientasi tersebut, maka kita perlu membuatsatu lagi file ’activity main.xml’ dalam folder ’layout-land’ di folder ’res’. Untuk itu lakukanlangkah-langkah berikut :

(i) Klik kanan folder res tersebut di panel kiri program Eclipse Anda, pilih New > Folder. Padakotak isian Folder name, ketik ’layout-land’, dan klik tombol Finish untuk mengakhiri.


(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 kliktombol Next.

(iii) Ketikan nama ’activity main.xml’ pada kotak isian File. Jika ada peringatan bahwa Filealready exist, biarkan saja (karena kita akan mensetting letak foldernya kemudian), klikNext.

(iv) Pada kotak dialog selanjutnya ketikan pada kotak isian Folder : ’/res/layout-land’. Oto-matis pada panel Chosen Qualifiers akan muncul ’Landscape’ (karena kita menyimpannyadi folder tersebut yang merupakan folder default untuk menyimpan file layout beroirentasilandscape), klik tombol finish.


(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 dibawah file sedang ditampilkan). Untuk menampilkan source code file tersebut.


(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_height="fill_parent"

tools:context=".MainActivity" >

<TextView




android:layout_gravity="center"


android:text="@string/heading1"

android:textSize="18sp"


<TextView







<TextView







<LinearLayout android:id="@+id/linearLayout1"





<LinearLayout android:id="@+id/linearLayout1_1"




<TextView








<LinearLayout android:id="@+id/linearLayout1_1_1"




<TextView

android:id="@+id/var_a"



android:text="@string/var_a" />

<EditText

android:id="@+id/nilaiVar_a"

android:layout_width="97dp"



android:ems="8"


</LinearLayout>





<TextView

android:id="@+id/var_b"



android:text="@string/var_b" />

<EditText

android:id="@+id/nilaiVar_b"




android:ems="8"



</LinearLayout>





<TextView

android:id="@+id/var_c"



android:text="@string/var_c" />

<EditText

android:id="@+id/nilaiVar_c"




android:ems="8"


</LinearLayout>

</LinearLayout>

<LinearLayout

android:id="@+id/linearLayout1_2"



android:layout_gravity="fill_horizontal|left"


android:gravity="left|right"


<TextView








<LinearLayout

android:id="@+id/linearLayout1_2_1"





<TextView

android:id="@+id/determinan"





android:text="@string/determinan" />

<TextView

android:id="@+id/nilaiD"





</LinearLayout>

<LinearLayout






<TextView






<TextView






</LinearLayout>

<LinearLayout






<TextView







<TextView








</LinearLayout>

<ImageView

android:id="@+id/ket_i"



android:layout_gravity="right"

android:gravity="right"

android:layout_marginBottom="3dp"


android:contentDescription="@string/ket_i"

>

</ImageView>

<LinearLayout

android:id="@+id/linearLayout2"




android:gravity="center"


<Button

android:id="@+id/hitung"



android:text="@string/hitung" />

<Button

android:id="@+id/clear"



android:text="@string/clear" />

</LinearLayout>

</LinearLayout>

</LinearLayout>

<TextView

android:id="@+id/keterangan"






android:text="@string/keterangan"

android:textSize="8sp" />

</LinearLayout>

(viii) Simpan perubahan. Kemudian klik kembali tab ’Graphical Layout’ untuk melihat gambaranhasil dari pengaturan tata letak landscape oleh file tersebut.


(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 sebuahAndroid Virtual Device Manager yang baru (masih menggunakan konfigurasi Android Apli-cation AndKuadrat) yang memiliki tampilan widescreen (landscape). Misalnya kita berinama ’AndKuadrat-Landscape’ dengan konfigurasi sebagaimana gambar berikut :

Tentu saja ini tidak dapat mewakili perangkat sesungguhnya karena kedua Android VirtualDevice yang kita buat tersebut memiliki settingan device yang berbeda.

(x) Kemudian jalankan Virtual Device tersebut dengan mengklik tombol Start pada jendelaAndroid Virtual Device Manager. Jangan lupa untuk menutup terlebih dahulu AndroidVirtual Device sebelumnya yang beroirentasi portrait untuk menghemat memori komputerAnda.


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, Andatinggal mengkopi file ’AndKuadrat-1.apk’ di folder ’bin’ ke perangkat Anda tersebut dan mengklikuntuk menginstallnya.

Demikian, semoga bermanfaat :-) .


LAMPIRAN

1. Download semua aplikasi yang dibahas disini di https://db.tt/Kie0bKTc

2. Download icon yang digunakan di https://db.tt/9bZcBM4i

my javanote04

Software