Image 1. Wim! Screenshot

It is a simple java application to keep your computer in awake condition and not sleep (or maybe auto log off). This application will wiggle the mouse in certain period of time automatically. I usually use this app when I am in computer laboratory in my faculty, so auto log off on my computer login will not happens.

You can try this app. Download here. Furthermore, I will show my code here. Learn it for fun. It is just simple code, just 3 java files.

The following is Main.java that contains main method.

//--------------------------------------------------------------------------
// Wim! (c) 2011. v01.
// By Ardi, Computer Science UI 2008
//
// Main class for running application.
//--------------------------------------------------------------------------

import javax.swing.JFrame;
import javax.swing.ImageIcon;
import javax.swing.SwingUtilities;

public class Main
{
	//constructor
	public Main()
	{
                //create instance from JFrame
		JFrame frame = new JFrame ("Wim!");

		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		Panel application = new Panel();
                //add instance of application to frame
		frame.getContentPane().add(application);
		//set frame imageIcon
		ImageIcon icon = new ImageIcon("image/swii_logo.png");
		frame.setIconImage(icon.getImage());

                //set window size
                frame.setSize(220,105);
		frame.setVisible(true);
	}

	//main method is executed first by compiler.
	public static void main(String[] args)
	{
		SwingUtilities.invokeLater(new Runnable(){
			public void run()
			{
				new Main();
			}
		});
	}
}

Next is Panel.java that extends JPanel. Here GUI component like JButton, JTextField, and JLabel, is constructed. Inner class Listener for event-handling is in Panel.java.

//--------------------------------------------------------------------------
// Wim! (c) 2011.
// By Ardi, Computer Science UI 2008
//
// Panel class for managing and drawing
// GUI components like button, textfield, and toolbar.
//--------------------------------------------------------------------------

import javax.swing.JPanel;
import javax.swing.JToolBar;
import javax.swing.JOptionPane;

import javax.swing.JLabel;
import javax.swing.JButton;
import javax.swing.JTextField;

import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
import java.awt.BorderLayout;
import java.awt.Color;

public class Panel extends JPanel
{
	//button to start wiggle process
	private JButton btnStart;
	//button to end wiggle process
	private JButton btnEnd;
	//button for state
	private JButton state;
	//button to exit from program
	private JButton btnExit;
	//field to type time in seconds for wiggling
	private JTextField tfTime;
	//instance of WiggleProcess class
	private WiggleProcess wp;

	//constructor to initialize GUI component and add listener
	public Panel()
	{
		//set border layout
		setLayout(new BorderLayout());
		//create instance for wiggle process
		wp = new WiggleProcess();

		//listener for button
		Listener lis = new Listener();

		//button start
		btnStart = new JButton(" Start ");
		btnStart.addActionListener(lis);

		//button end, disabled in beginning
		btnEnd = new JButton(" End ");
		btnEnd.addActionListener(lis);
		btnEnd.setEnabled(false);

		//textfield for time
		tfTime = new JTextField(5);

		//button for state
		state = new JButton(" off ");
		state.addActionListener(lis);
		state.setBackground(Color.DARK_GRAY);
		state.setForeground(Color.WHITE);

		//button for exit from program
		btnExit = new JButton(" Exit ");
		btnExit.addActionListener(lis);

		//panel for button
		JToolBar tb = new JToolBar();
		tb.add(btnStart);
		tb.add(btnEnd);
		tb.add(btnExit);
		tb.addSeparator();
		tb.add(state);

		//panel for time textfield
		JPanel panel = new JPanel();
		panel.add(new JLabel("wiggle every: "));
		panel.add(tfTime);
		panel.add(new JLabel("sec"));

		//add component
		add(tb, BorderLayout.NORTH);
		add(panel, BorderLayout.SOUTH);
	}

	//inner class for event-handling
	private class Listener implements ActionListener
	{
		//invoked when action occurs
		public void actionPerformed(ActionEvent e)
		{
			//stop wiggle process when btnEnd is clicked
			if(e.getSource() == btnEnd)
			{
				wp.stop();
				//setting button
				btnStart.setEnabled(true);
				btnEnd.setEnabled(false);
				//set state
				state.setText(" off ");
				state.setBackground(Color.DARK_GRAY);
			}
			//start wiggle proces when btnStart is clicked
			if(e.getSource() == btnStart)
			{
				try
				{
					//get value from textfield
					int sec = Integer.parseInt(tfTime.getText());
					//it is valid condition
					if(sec > 0 && sec <= 600)
					{
						//set time for wiggle mouse
						wp.setTime(sec);
						//running process with thread
						new Thread(wp).start();
						//setting button
						btnStart.setEnabled(false);
						btnEnd.setEnabled(true);
						//set state
						state.setText(" on ");
						state.setBackground(new Color(15, 130, 5));
					}
					//if more than 600 sec, not valid
					else if(sec > 600)
					{
						JOptionPane.showMessageDialog(Panel.this,
						"Number too big", "Warning", JOptionPane.WARNING_MESSAGE);
					}
					else
					{
						JOptionPane.showMessageDialog(Panel.this,
						"Error: Negative number or zero", "Warning", JOptionPane.WARNING_MESSAGE);
					}
				}
				catch(Exception exc)
				{
					JOptionPane.showMessageDialog(Panel.this,
						"Error: "+exc.getMessage(), "Warning", JOptionPane.WARNING_MESSAGE);
				}
			}
			//show information when it is clicked
			if(e.getSource() == state)
			{
				//author info
                                String aboutAuthor =
                                        "Wim! wiggle ur mouse. \n\n"+
				        "Author:\n"+
                                        "Ardi \n\n"+
                                        "Email:\n"+
                                        "Ardialhaidar@yahoo.co.id\n\n"+
                                        "Computer Science UI 2008\n"+
                                        "Visit: Ardialhaidar.wordpress.com\n";
                                JOptionPane.showMessageDialog(Panel.this, aboutAuthor,
                                        "About Author", JOptionPane.INFORMATION_MESSAGE);
			}
			//exit from program when btnExit is clicked
			if(e.getSource() == btnExit)
			{
				System.exit(0);
			}
		}
	}
}

The last is WiggleProcess.java. In this class, wiggling process happens. WiggleProcess is handled by thread, so it implements class Runnable. With separated thread, wiggling process will not disturb UI thread. Oh ya, main class for wiggling process is in Robot in java.awt package.

//--------------------------------------------------------------------------
// Wim! (c) 2011.
// By Ardi, Computer Science UI 2008
//
// Wiggle Process for wiggling mouse automatically in periodic time.
//--------------------------------------------------------------------------

import java.awt.PointerInfo;
import java.awt.Point;
import java.awt.MouseInfo;

import java.awt.Robot;
import java.awt.AWTException;

public class WiggleProcess implements Runnable
{
	//a flag for running process
	private boolean isRunning;
	//field periodic time
	private int sec;
	//instance of Robot
	private Robot robot;

	//default constructor for initializing
	public WiggleProcess()
	{
		//false means process is not running
		isRunning = false;
		sec = 1;
		try
		{
			//create instance of Robot class
			robot = new Robot();
		}
		catch(AWTException e)
		{ e.printStackTrace();}
	}

	//run main code
	public void run()
	{
		//set isRunning true
		isRunning = true;

		//check what process is running
		while(isRunning)
		{
			//get location of pointer
			Point p = MouseInfo.getPointerInfo().getLocation();
			int x = (int) p.getX();
			int y = (int) p.getY();

			//move mouse by robot
			robot.mouseMove(x,y);
			robot.delay(250);
			robot.mouseMove(x+20, y+20);
			robot.delay(250);
			robot.mouseMove(x,y);
			robot.delay(sec*1000);
		}
	}

	//stop running process
	public void stop()
	{
		isRunning = false;
	}

	//set time for wiggling
	public void setTime(int sec)
	{
		this.sec = sec;
	}
}

That’s all the code. It simple, is’nt it?

Sebagai tahap awal, buatlah project Android ‘HiLayout’. Silakan diisi dengan detail project sebagai berikut.

Project name : HiLayout
Application name : hiLayout
Package name : alh.apps
Create Activity : HiLayout
Build Target : Android 2.2
Min SDK Version : 8

Jika project sudah sukses dibuat, kita akan temukan file HiLayout.java dalam folder src/alh.apps dan file main.xml dalam folder res/layout di bagian Package Explorer. Untuk keperluan demo layout, file main.xml tidak digunakan. Sebagai gantinya, kita akan membuat file xml baru, satu file untuk satu demo layout.

Linear Layout

LinearLayout adalah layout yang menampilkan elemen-elemen view dalam arah linear, vertikal atau pun horizontal. Ini adalah layout paling sederhana di Android. Mari lihat implementasinya di Android.

Buat file xml baru dengan nama linearlayout.xml. Caranya, klik kanan di folder res/layout di project ‘HiLayout’. Pada menu pop-up yang muncul, pilih New > Android XML File. Selanjutnya, silakan isikan nama file XML dengan linerlayout.xml.

Gambar 1. Pembuatan File XML

Jika sudah diisi dan tidak ada pesan error, klik Finish. Default-nya, file linearlayout.xml yang dibuat akan berisi sebagai berikut. File xml tersebut tidak berisi elemen view apapun di dalamnya.

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout
xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”>
</LinearLayout>

Nah, sekarang ubah isinya menjadi berikut ini.

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”>

<TextView
android:text=”innovation for Indonesia..”
android:background=”#4c0000″
android:textSize=”10pt”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
/>
<TextView
android:text=”turn on our dreams!”
android:textSize=”13pt”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
/>
<Button
android:text=”ya!”
android:layout_marginTop=”30pt”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
/>
</LinearLayout>

Bisa kita lihat, tampilan yang dibuat akan memiliki tampilan teks (TextView) dan tombol (Button). Ukuran teks diatur melalui atribut android:textSize. Salah satu teks juga diberi warna background (latar belakang) dengan kode warna #4c0000 melalui atribut android:background.

Sekarang buka file HiLayout.java. Default-nya, isi file adalah sebagai berikut.

package alh.apps;

import android.app.Activity;
import android.os.Bundle;

public class HiLayout extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Lakukan perubahan kecil pada method onCreate() sehingga kode berubah menjadi berikut.

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.linearlayout);
}

Saat ini tampilan aplikasi sudah mengacu ke linearlayout.xml yang berada di folder res/layout. Mari lihat hasilnya melalui emulator. Kita akan dapatkan tampilan sebagai berikut.

Gambar 2. Tampilan Aplikasi dengan linearlayout.xml

Relative Layout

RelativeLayout adalah layout yang menampilkan elemen-elemen view dalam posisi relatif. Posisi dari sebuah view dapat diletakkan relatif terhadap posisi elemen view di sekitarnya atau relatif terhadap area layout utama. Sebuah desain tampilan aplikasi bisa dibuat lebih mudah dan sederhana menggunakan RelativeLayout dibandingkan dengan LinearLayout. Mari lihat implementasinya.

Buat file xml baru dengan nama relativelayout.xml. Detail pembuatannya ada di bagian awal pembahasan LinearLayout. Jika sudah, ubah isinya menjadi berikut ini. Perhatikan bedanya dengan linearlayout.xml.

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”>
<TextView
android:id=”@+id/text”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:padding=”7dip”
android:text=”My Notes in the morning…”
/>
<EditText
android:id=”@+id/tf”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:layout_marginBottom=”30dip”
android:hint=”write ur day here…”
android:layout_below=”@id/text”
/>
<Button
android:id=”@+id/share”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_below=”@id/tf”
android:layout_alignParentRight=”true”
android:width=”160dip”
android:drawableLeft=”@android:drawable/ic_input_get”
android:text=”Share”
/>
<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_toLeftOf=”@id/share”
android:layout_alignBottom=”@id/share”
android:layout_alignParentLeft=”true”
android:drawableLeft=”@android:drawable/ic_input_add”
android:text=”Add”
/>
</RelativeLayout>

Tampilan yang dibuat akan memiliki tampilan teks (TextView), tombol (Button) dengan gambar, dan text field (EditText). Beberapa elemen view diberi id. Id ini akan menjadi sebuah identitas atau nama untuk suatu elemen view agar bisa diacu oleh elemen view lainnya.

Kita lihat dari xml di atas, text field dengan id tf berada di bawah teks dengan id text melalui pengaturan atribut android:layout_below. Tombol dengan id share pun berada di bawah text field tf. Atribut android:layout_marginBottom pada text field tf digunakan agar ada jarak tambahan di bawah view text field. Dalam hal ini, jaraknya adalah sebesar 30 dip. Atribut android:layout_alignParentRight pada tombol dengan id share akan memposisikan tombol tersebut rata kanan relatif terhadap parent-nya. Parent dari tombol share adalah RelativeLayout. Lalu tombol tanpa id ditempatkan di kiri tombol share melalui atribut android:layout_toLeftOf. Untuk mempercantik tampilan tombol, digunakanlah gambar yang sudah menjadi bawaan Android. Hal ini dilakukan melalui atribut android:drawableLeft. Ini artinya, gambar yang ditempatkan berada di kiri teks.

Lakukan perubahan kecil kembali pada method onCreate() di file HiLayout.java. Ubah menjadi berikut ini.

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.relativelayout);
    }

Nah, acuan tampilan aplikasi sudah diubah ke relativelayout.xml. Mari lihat hasilnya melalui emulator. Kita akan dapatkan tampilan sebagai berikut.

Gambar 3. Tampilan Aplikasi dengan relativelayout.xml

Hasil yang didapat cantik kan? Untuk mengetahui lebih dalam tentang penggunaan RelativeLayout ini, silakan utak-atik atribut elemen view dalam relativelayout.xml. Silakan gunakan dokumentasi offline untuk membantu pemahaman.

Table Layout

TableLayout adalah layout yang menampilkan elemen view dalam suatu posisi baris dan kolom dalam suatu representasi tabel. Bagi Anda yang sudah pernah mempelajari HTML, penggunaan TableLayout disini seperti penggunaan table dengan tag <table> dan <tr>. Mari lihat seperti apa bedanya.

Buatlah file tablelayout.xml di dalam folder res/layout. Setelah itu, ubah isinya menjadi sebagai berikut.

<?xml version=”1.0″ encoding=”utf-8″?>
<TableLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
>

<TextView
android:text=”Safia Bookstore”
android:textSize=”11pt”
android:background=”#70a2c1″
android:padding=”3dip”
android:layout_marginBottom=”20dip”
/>

<TableRow>
<TextView
android:layout_column=”0″
android:text=”Email”
android:padding=”3dip”
/>
<TextView
android:text=”:”
android:padding=”3dip”
/>
<EditText
android:padding=”3dip”
android:width=”240dip”
/>
</TableRow>

<TableRow>
<TextView
android:layout_column=”0″
android:text=”Password”
android:padding=”3dip”
/>
<TextView
android:text=”:”
android:padding=”3dip”
/>
<EditText
android:padding=”3dip”
android:password=”true”
android:width=”240dip”
/>
</TableRow>

<Button
android:text=”Sign In”
android:layout_marginTop=”20dip”
android:drawableRight=”@android:drawable/ic_menu_compass”
android:padding=”3dip”
/>
</TableLayout>

File tablelayout.xml akan merepresentasikan tabel dengan 4 baris. Baris pertama ada teks “Safia Bookstore”. Di baris kedua terdapat TableRow yang merepresentasikan sebuah baris dalam suatu tabel. TableRow seperti tag <tr> pada HTML. TableRow sendiri sebenarnya adalah layout untuk menyusun elemen-elemen view di dalamnya secara horizontal. Jika di dalam tag <TableRow> ada tiga buah elemen view, berarti dalam posisi baris ini terdapat tiga kolom yang terisi. Bagaimanapun, penempatan awal elemen view bisa kita atur melalui atribut android:layout_column pada view. Kita lihat dari file xml, android:layout_column=”0″ menandakan elemen view ditempatkan di kolom ke-0. Jika elemen selanjutnya tidak didefinisikan penempatan kolomnya, penempatan elemen view akan berada kolom sebelah kanannya dari view yang ada.

Jika kita bandingkan baris 1 dengan baris 2, mungkin muncul pertanyaan “kenapa baris pertama tidak menggunakan tag <TableRow>?” Baris pertama dalam xml ini langsung menggunakan elemen view, yaitu TextView. Ini berarti, satu baris hanya terdiri dari satu elemen view. Hal ini bisa dilakukan, tidak harus sebuah baris selalu direpresentasikan dengan TableRow.

Lakukan perubahan kecil kembali pada method onCreate() di file HiLayout.java. Ubah menjadi berikut ini.

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tablelayout);
    }

Mari lihat hasil tata letak elemen view dengan TableLayout. Kita akan dapatkan tampilan sebagai berikut.

Gambar 4. Tampilan Aplikasi dengan tablelayout.xml

Itulah ketiga buah layout sederhana yang bisa digunakan saat membuat aplikasi berbasis Android. Masih ada jenis layout yang lain di Android. Silakan dieksplorasi lebih lanjut.

Image 1. Swii Writer

Swii Writer is simple text editor app for writing information what you like. It is featured with file management, editing, and formatting. Moreover, i then add cryptography touch to this app to keep the confidentiality of your documents and introduce cryptography. There are three simple cryptography methods: caesar, vigenere, and rail fence. these methods is used for encryption (transforming an intelligible message into one that is unintelligible) or decryption (retransforming encrypted message back to its original form).

Let’s see more screen shots from Swii Writer.

Image 2. Swii Writer Screen shots

Click here to download this app. To running this app, you must install JRE (Java Run-Time Environment) before. Please send your feedback about this app for better development in the future. I’ll wait. Enjoy this app.

Thank you.

Gambar 1. Aplikasi dengan Background Berpola

Gambar 2. Image untuk Membuat Background Berpola

Background aplikasi di atas tidak sekedar hitam, tapi ada pola yang terbentuk. Menarik, kan? Untuk membuat background berpola seperti di atas, digunakanlah sebuah image (gambar) seperti pada gambar 2. Image yang ukurannya relatif lebih kecil terhadap layar ini digambar ulang hingga memenuhi semua layar. Mari kita lihat caranya dalam beberapa langkah berikut.

1. Pada project Anda, buatlah folder drawable dalam folder res.
2. Buatlah sebuah file bernama black_pattern.xml. Isi denga kode berikut.

<?xml version=”1.0″ encoding=”utf-8″?>
<bitmap
xmlns:android=”http://schemas.android.com/apk/res/android”
android:src=”@drawable/image”
android:tileMode=”repeat”
/>

3. Karena dalam black_pattern.xml terdapat acuan ke file drawable bernama image, letakkan file image.jpg di salah satu folder drawable, misalnya di folder drawable-hdpi. Image.jpg ini adalah gambar yang digunakan untuk membuat background berpola. Dalam tulisan ini, digunakanlah image dalam gambar 2.
4. Pilih file dalam folder layout yang ingin ditambahkan background berpola. tambahkan atributandroid:background=”@drawable/black_pattern” pada elemen root xml.

Misalkan, file main.xml dalam folder layout akan diberi background berpola. Sebagai contoh, isi dengan kode berikut.

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:background=”@drawable/black_pattern”
>
<TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”Lorem ipsum dolor sit amet, consectetur adipisicing elit”
/>
</LinearLayout>

5. Atur main.xml sebagai tampilan utama aplikasi. Lalu jalankan emulator dan kita akan melihat hasilnya seperti gambar 1.

Sekarang saatnya buat Anda untuk membuat pola background yang menarik dan elegan sesuka hati.

Met mencoba.

Semester ini merupakan semester yang cukup sulit untukku. Dari hal akademis, tugas begitu menumpuk dan materi kuliah terasa sulit dimengerti. Meskipun sudah berusaha mengerjakan, tugas-tugas kuliah tersebut jarang ada yang selesai dengan baik, jauh dari memuaskan. Seringkali tugas dikirim di detik-detik terakhir pengumpulan tugas. Dari luar akademis, aku juga sedang mengalami masalah dengan kos-kosan yang ditempati. Sampah-sampah penghuni kosan berserakan di luar begitu saja. Jarang dibersihkan oleh penjaga kosan. Padahal aku sudah beberapa kali memberitahu bapak penjaga kosan. Bau ‘sedap’ yang muncul dari berserakannya sampah tersebut membuat kosan tidak lagi nyaman. Kalau sudah di kampus, tidak ada gairah untuk pulang ke kosan.

“Malas ah ke kosan. Lingkungannya lagi ga enak.” gerutuku dalam hati.

Bagaimanapun, masalah-masalah seperti ini kerap mengganggu. Konsentrasi belajar di kosan pun buyar. Masih ada masalah-masalah lainnya yang membuat kuliah yang kujalani makin tidak tentu arah.

—

Liburan semester akhirnya tiba. Suasana indahnya liburan berubah seketika saat kenyataan pahit datang: nilai kuliah semester yang baru saja dilalui hancur berantakan. IP-ku jatuh dalam. Tertera di website akademis kampus dengan akunku, angka 2.97. Bagiku, ini tamparan yang sangat keras. Setelah pernah mencicipi IP cum laude, akhirnya aku dipaksa mencicipi IP dua koma. Bingung, sedih, marah, dan kesal bercampur aduk. Duh, bagaimana aku mempertanggungjawabkan hasil nilai seperti ini kepada orangtua? Masa sih gara-gara masalah saat kuliah?!

“Aaargh, kenapa nilainya nyaris banget sih. Tambahan 0.03 lagi kan IP dah jadi 3.00. Nanggung banget sih. 2.97 dan 3.00 kan beda rasa.” keluhku.

Dengan ini, aku resmi bergabung dengan mahasiswa PMDK (Persatuan Mahasiswa Dua Koma). Ya, bolehlah sedikit berbangga karena aku adalah mahasiswa PMDK ‘paling senior’. Aku tersenyum miris.

—

Sore hari di area terbuka kantin kampus, aku duduk termenung ditemani dengan lemon tea hangat memikirkan apa yang salah dengan diri ini di akademis semester yang baru saja berlalu. Termenung bersama lemon tea hangat, minuman kesukaanku, adalah pilihan yang pas. Hangat dan menenangkan hati.

“Hi Putra, ngapain ngelamun sore-sore gini?” tanya suara yang membuyarkan lamunanku.

Ternyata suara itu suara teman satu angkatan, namanya Rian. Wah, kebetulan nih, Rian adalah teman yang asyik diajak curhat.

“Hai rian. Silakan duduk. Ya, aku lagi terpikir masalah nilai yang baru aja keluar. Nilaiku lagi ga banget nih.” ucapku dengan ekspresi sedih.

Tiba-tiba raut muka Rian yang tadinya biasa saja berubah menjadi sedih, lebih sedih daripada yang baru saja aku ungkapkan.

“Putra, aku ga lulus mata kuliah pak Yadi.” ungkap Rian dengan suara agak berat sambil menunduk.

Aku terhenyak mendengar ucapannya. Kaget, tidak percaya Rian bisa tidak lulus di mata kuliah tersebut. Aku sendiri pun sebenarnya merasa beruntung bisa lulus.

“Serius, rian?” tanyaku masih tidak percaya. Rian mengangguk tanda serius. Sepertinya dia tidak lagi sedang bercanda.

“sabar ya. lu harus tetap semangat. ke depannya harus lebih baik.” ucapku menyemangatinya. Agak aneh sih, padahal aku sendiri juga lagi butuh untuk disemangati. Apa boleh buat, niat curhat karena hancurnya nilai harus disimpan dulu.

“rasanya udah berusaha keras semester kemarin. tapi kok kenyataan berkata lain.” ucap Rian kembali.

“nilai kurang baik atau tidak lulus berarti tanda kita harus berusaha lebih baik lagi. anggap aja ini tantangan lebih buat kamu.” ujarku sambil tersenyum kecil.

“memang ketidaklulusan ini buatku sedih. tapi sepertinya hal ini tidak perlu untuk disedihkan lama-lama. aku punya rumah yang nyaman, kuliah di universitas favorit, uang yang lumayan buat jalan-jalan, air yang menyegarkan untuk diminum, waktu libur yang panjang, tidur yang nyenyak, dan kesehatan untuk melakukan apapun yang disukai.” balas Rian.

“Waaaw, aku suka banget kata-kata kamu barusan, ian.” ucapku dengan semangat.

Pembicaraan saling menyemangati terus berlanjut. Sore itu, sambil menikmati lemon tea hangat, aku dan Rian ngobrol lebih santai. Ada begitu banyak hal yang perlu disyukuri di kala seseorang sedang mendapat hal yang tidak menyenangkan. Tidak boleh ada kata putus asa. Tidak boleh ada kata menyerah. Perjalanan masih panjang, masih ada harapan di depan. Hal pahit yang baru saja dialami hanyalah satu warna kehidupan yang membuat hidup jadi berwarna, lebih bermakna. Jangan bersedih diri ini!

“Emang, IP kamu berapa, ian?” iseng-iseng, aku tanya saja IP Rian.

“Sedikit di atas 3.00 kok. Masih lebih baik darimu lah. Aku kan masih ada nilai A-nya.” ucapnya sambil tertawa. Rasanya seperti menertawakanku.

“Siaaal, apaaaa maksud rian?! kok dia bisa tahu?” ucapku dalam hati. Apakah aku melewatkan sesuatu hal. Aku mengingat-ingat perjalanan waktu hari ini. Dan ketika di suatu titik waktu, aku teringat hal penting. Oh iya, aku lupa logout dari website akademis kampus!!!

Dan, janganlah kamu bersikap lemah dan jangan (pula) bersedih hati

——-

Kutek, Depok, Semester 4, 2010

Introduction to Android

Hii Android

Selamat datang di pengembangan aplikasi Android. Sebagai perkenalan awal kita dengan aplikasi Android, kita akan mencoba aplikasi bernama “Hii”.

Pengenalan Awal

Sebelumnya, pastikan dulu instalasi Android SDK, pengaturan IDE, dan pembuatan AVD sudah dilakukan dengan benar. Jika sudah, mari kita melangkah lebih jauh lagi.

1. Langkah pertama adalah melakukan pembuatan Android project. Pilih File > New > Android Project.

Gambar 1. Pemilihan Android Project

2. Isi detail dari project yang akan dibuat pada halaman yang muncul. Silakan diisi dengan nilai sebagai berikut.

Project name: HelloWorld
Application name: Hii
Package name: cs.mobile.apps
Create Activity: HelloWorld
Build Target: Android 2.2

Berikut ini adalah penjelasan singkat dari detail di atas.

• Project name: nama project dalam Eclipse. Project name juga merupakan nama folder yang mengandung dokumen-dokumen project.
• Application name: nama aplikasi yang akan muncul di Android device.
• Package name: tempat nama package dimana semua source code yang dibuat disimpan di dalamnya. Kita bisa tentukan nama package sesuai keinginan, tapi pastikan nama package unik, tidak sama dengan project lain yang sudah ada.
• Create activity: nama untuk class yang menjadi subclass dari Activity di Android. Activity adalah class yang dapat dijalankan dan melakukan suatu kerja. Activity hampir selalu digunakan sebagai dasar untuk sebuah aplikasi.
• Build Target: Platform Android yang akan digunakan. Dalam hal ini, platform yang digunakan adalah Android 2.2 Froyo.

Gambar 2. Detail Project

3. Jika semua detail project sudah diisi, klik Finish. Dapat dilihat struktur project yang baru saja dibuat di bagian Package Explorer.

Gambar 3. Struktur Project Android “HelloWorld”

4. Buka file HelloWorld.java yang berada di HelloWorld > src > cs.mobile.apps. Kita akan melihat source code sebagai berikut.

package cs.mobile.apps;

import android.app.Activity;
import android.os.Bundle;

public class HelloWorld extends Activity {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 }
}

Bisa dilihat, class HelloWorld yang dibuat adalah class turunan dari class Activity. Sebagaimana penjelasan sebelumnya, sebuah Activity merepresentasikan sebuah entitas yang dapat melakukan kerja. Sebuah aplikasi dapat memiliki banyak Activity, tapi user hanya bisa berinteraksi dengan satu buah entitas saja dalam satu waktu. Method onCreate() dieksekusi ketika Activity mulai dijalankan. Di method inilah inisialisasi dan pengaturan User Interface (UI) aplikasi dilakukan.

5.Sekarang ubah source code di atas menjadi berikut ini.

package cs.mobile.apps;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView; //jangan lupa import ini

public class HelloWorld extends Activity {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 TextView tview = new TextView(this);
 tview.setText("Tutorial Perkenalan Android SIG Mobile Apps ^^");
 setContentView(tview);
 }
}

Dari kode di atas, kita akan menemukan class TextView. Class tersebut merupakan salah satu komponen dalam pembuatan User Interface (UI). Masih banyak komponen yang bisa digunakan untuk membuat tampilan, seperti tombol dan gambar.

6. Jika source code sudah siap, tekan tombol Run pada toolbar atau pilih Run > Run pada menubar. Karena aplikasi baru pertama kali dibuat, akan muncul pilihan berikut. Pilih bagian ‘Android Application’.

Gambar 4. Pemilihan Eksekusi Project

Akhirnya Android Emulator diluncurkan. Emulator biasanya butuh beberapa menit untuk booting. Tunggu sebentar ya. Nantinya kita akan mendapatkan tampilan sebagai berikut. Lihat, nama aplikasi kita yang tadi sudah didefinisikan, yaitu “Hii” muncul di bagian atas layar aplikasi.

Gambar 5. Tampilan Aplikasi “Hii”

Di samping tampilan aplikasi terdapat berbagai macam tombol untuk device maya ini.

Gambar 6. Tampilan Tombol dalam Emulator Android

Dari aplikasi “Hii”, jika kita menekan tombol Back , kita akan berada di menu Android device.

Gambar 7. Tampilan Menu Android Device

Icon yang disorot pada gambar di atas adalah aplikasi “Hii”, aplikasi yang kita buat. Jika kita menekan icon tersebut, kita akan kembali masuk ke dalam aplikasi “Hii”.

Catatan:
Gimana rasanya menunggu proses booting dari emulator? Cukup lama kan. Setelah emulator siap digunakan dan kita sudah mencoba aplikasi yang kita buat, emulator jangan ditutup. Menutup emulator dalam hal ini sama seperti mematikan (turn off) mobile phone yang baru saja dinyalakan. Biarkan emulator terus berjalan selama kita melakukan pengembangan program. Jika kita ingin melakukan update program, kita hanya perlu menekan tombol Run sama seperti menjalankan aplikasi pada awal pembuatan project.

Membangun User Interface (UI) dengan XML

Pada contoh di atas, kita membuat User Interface (UI) dengan pendekatan pemrograman, langsung dari kode Java. Kelemahan dari pendekatan ini adalah saat UI-nya sudah cukup kompleks dan kita ingin melakukan perubahan kecil pada UI, maka diperlukan usaha yang cukup besar untuk melakukannya. Tentu saja hal ini memusingkan developer.

Oleh karena itu, Android menyediakan pendekatan lain dalam membangun User Interface, yaitu dengan XML (EXtensible Mark-up Language). File XML ini ditaruh di tempat yang terpisah dari file Java. Jika Anda belum mengetahui apa itu XML, pelajari dulu mengenai XML di http://w3schools.com/xml/default.asp. Jika sudah mengerti, mari kita lihat bagaimana file XML ini bekerja.

1. Di bagian Package Explorer, buka HelloWorld > res > layout. Di sana kita akan menemukan file main.xml yang sudah dibuatkan secara otomatis sebelumnya. Di folder layout inilah disimpan informasi mengenai User Interface (UI).

Gambar 8. Posisi File main.xml

2. Buka file tersebut. Kita akan melihat isinya kurang lebih sebagai berikut.

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
>
<TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”@string/hello”
/>
</LinearLayout>

3. Gantikan isinya dengan XML berikut ini. Jangan lupa lakukan save pada file. Perhatikan perbedaannya dengan file XML sebelumnya.

<?xml version=”1.0″ encoding=”utf-8″?>
<TextView xmlns:android=”http://schemas.android.com/apk/res/android”
android:id=”@+id/textview”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:text=”Ini tulisan dari file XML lho…”
/>

Penjelasan mengenai file XML di atas akan dijelaskan di bagian selanjutnya.

4. Buka kembali file HelloWorld.java. Sekarang modifikasi isinya menjadi berikut ini.

package cs.mobile.apps;

import android.app.Activity;
import android.os.Bundle;

public class HelloWorld extends Activity {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 }
}

Pada kode di atas, kita mengatur tampilan aplikasi dari R.layout.main. R.layout.main ini merujuk ke file main.xml yang berada di folder layout.

5. Jalankan aplikasi lagi. Klik Run > Run pada menubar. Hasilnya akan didapatkan seperti berikut ini.

Gambar 9. Tampilan dengan File XML

—

Penggunaan file XML untuk pembuatan tampilan atau User Interface (UI) membuat pengerjaan aplikasi menjadi lebih “bersih”. File Java menangani logic dari program, sedangkan file XML menangani tampilan. Asyik kan?

Selanjutnya, mari kita bahas maksud dari file xml berikut ini yang digunakan pada aplikasi “Hii”.

<?xml version=”1.0″ encoding=”utf-8″?>
<TextView xmlns:android=”http://schemas.android.com/apk/res/android”
android:id=”@+id/textview”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:text=”Ini tulisan dari file XML lho…”
/>

Di atas terdapat sebuah elemen View dengan taguntuk merepresentasikan tampilan teks. Selain itu, kita juga dapat membuat elemen View dengan tag yang berasal dari class yang meng-extends class View, seperti class Button dan CheckBox. Elemendi atas memiliki beberapa atribut, yaitu android:id (identitas unik untuk elemen), android:layout_width (lebar elemen terhadap layar), android:layout_height (tinggi elemen terhadap layar), dan android:text (teks yang akan ditampilkan).

Sekarang mari kita buat elemen View yang lain. Ubah file main.xml menjadi berikut ini.

<?xml version=”1.0″ encoding=”utf-8″?>
<Button xmlns:android=”http://schemas.android.com/apk/res/android”
android:id=”@+id/button”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”Tombol Apapaun…”
/>

Jalankan aplikasi kembali. Kita akan dapatkan hasilnya sebagai berikut.

Gambar 10. Tampilan Button dengan XML

Untuk memahami arti fill_parent dan wrap_content, silakan dicoba kombinasi nilai dalam atribut android:layout_width dan android:layout_height.

Penutup

Inilah sedikit perkenalan kita dengan Android. Sebenarnya masih banyak lagi dari Android yang bisa dieksplorasi lebih lanjut. Untuk ekspolarasi Android lebih jauh, silakan buka http://developer.android.com/. Di sana banyak konten-konten pembelajaran menarik yang bisa dibaca secara online. Bagaimana jika kita tidak terhubung internet? Kita juga memiliki konten-konten yang sama dengan http://developer.android.com/ yang bisa dibaca secara offline.

Cari folder android-sdk-windows (untuk pengguna Windows) di komputer kita masing-masing. Dari folder android-sdk-windows, masuk ke folder docs, buka index.html. Selanjutnya kita akan melihat tampilan berikut pada browser.

Gambar 11. Halaman Home pada Dokumentasi Android Offline

Untuk melihat-lihat class yang dapat dipakai di Android, klik tab Reference. Di sini kita bisa mencari dokumentasi class secara lengkap, melalui fitur pencarian atau list yang tersedia.

Gambar 12. Dokumentasi Class

Untuk melihat berbagai macam tutorial pembelajaran Android, klik tab Resources. Tersedia berbagai macam tulisan berbahasa inggris yang lumayan asyik untuk diikuti.

Gambar 13. Tulisan dalam Resources

Semoga tulisan singkat ini bisa menjadi pemahaman dasar untuk mempelajari pengembangan mobile application berbasis Android lebih lanjut. Harapannya, akan ada aplikasi-aplikasi mobile yang hebat dan bermanfaat dari tangan-tangan developer Indonesia.

Referensi

• Burnette, Ed. 2010. Hello, Android: Intoducing Google’s Mobile Development Platform 3rd Edition. Texas, USA: The Pragmatic Bookshelf.
• Google. 2011. Hello, World. Accessed on April, 3 2011.

Silakan dinikmati.

Ikatlah ilmu dengan menuliskannya.

Kata-kata ajaib ini tampaknya bisa memotivasi kita untuk berbagi ilmu dengan menulis di blog gratisan semacam wordpress. Selain bermanfaat bagi orang lain, juga bisa meningkatkan traffic blog dan menambah amal kebaikan kita.

Untuk kamu yang ingin berbagi mengenai ilmu programming dan ingin menuliskannya di blog wordpress.com, ada fitur menarik yang harus dicoba. Namanya syntax highlighter.

Syntax highlighter sebenarnya merupakan aplikasi open source yang dikembangkan melalui JavaScript buatan Alex Gorbatchev dengan lisensi GNU Lesser General Public License. Saat ini, aplikasi ini sudah terintegrasi di engine wordpress sehingga kita bisa langsung menggunakannya. Tanpa syntax highlighter didalamnya, penulisan kode programming di blog wordpress menjadi sulit.

Berikut adalah hasil penggunaan syntax highlighter.

public class HiWorld
{
	public static void main(String[] args)
	{
		//welcome in java programming
		System.out.println("hi world...:)");
	}
}

Bagaimana? bagus, kan?
Untuk mendapatkan tampilan seperti di atas, kita bisa melakukan penulisan kode programming di tempat penulisan wordpress.com sebagai berikut.

Dari kode di atas, kita melakukan highlight kode java. Bisa dilihat, parameter pada atribut language adalah Java. Selain Java, ada beberapa parameter language yang bisa digunakan, yaitu bash, cpp, csharp, css, delphi, html, jscript, php, python, ruby, shell, sql, vb, dan xml.

Akhir kata, selamat menulis.

Terlihat beberapa orang berlari kecil untuk berolahraga. Disana juga terlihat lalu lalang sedikit sepeda motor. Mereka sepertinya orang kerja kantoran yang bekerja di jakarta atau orang warungan yang pergi ke pasar untuk berbelanja. Di sisi lain, masih ada orang yang terlelap tidur di kasurnya, menikmati mimpi indahnya. Entah jam berapa mereka akan bangun.

Aku terus berjalan menuju jalanan ke arah kampus hijau. Di sana ada menu sarapan favoritku, yaitu bubur ayam. Minumnya teh tawar hangat. Emmm, begitu nikmat rasanya di pagi yang dingin ini.

Sebenarnya kuliahku hari ini dimulai nanti jam 8 pagi teng! Tapi rencananya, aku akan berangkat ke kampus pagi-pagi sekali setelah matahari terbit.

Setelah menikmati sabu alias sarapan bubur, aku kembali ke kosan tuk bersiap-siap ke kampus. Tas sudah diisi dengan buku tulis dan laptop. Kamar kosan sudah sedikit dirapikan. Lumayan lah.

Aku ke kampus dengan bersepeda. Sepeda ini aku beli sendiri dari hasil nyambi sebagai asisten dosen. Ternyata pilihanku membeli sepeda adalah pilihan tepat. Selain menyehatkan, bersepeda di pagi hari juga menyenangkan, membawa mood yang baik.

Aku menyusuri jalur khusus sepeda di kampus hijau. Pepohonan hijau dan rindang menemani perjalananku. Di sisi kananku, ada sebaris pepohonan dan rerumputan sepanjang jalur sepeda yang bersebelahan dengan jalan raya kampus. Di sebelah sisi kiri, terlihat banyak sekali pepohonan dan semak belukar, bahkan banyak pohon yang masih tinggi dan diameter lingkarannya lebar, yang menampilkan kesan hutan.

Aku terus mengayuh sepeda. Matahari bersinar dengan hangat. Aku suka sekali beraktivitas di pagi hari. Udaranya masih segar, belum terpolusi dengan banyak kendaraan bermotor. Pemandangan hutan hijaunya menyegarkan mata dan hati. Mood menjadi baik.

Aku pun bisa siap menghadapi perkuliahan nanti. Masih banyak waktu yang tersedia yang bisa dimanfaatkan untuk mempelajari atau sekedar mengulang materi kuliah tertentu. Harapannya IP semester ini bisa membaik dan dapat predikat cumi laut alias cum laude.

Jalur sepeda mulai menurun. Jalur menurun ini sampai beberapa ratus meter ke depan. Tanpa dikayuh pun sepeda mengalami pertambahan percepatan. Inilah jalur yang paling menyenangkan. Sepedaku melaju dengan kencang sekali.

Tiba-tiba aku dikagetkan dengan seekor anak kucing di tikungan jalur sepeda. Gawaat! Posisinya tidak begitu jauh dariku. Anak kucing kecil dan lugu tersebut tidak tahu kalau dia dalam bahaya. Langsung saja aku banting stang sepeda ke arah kanan kucing. Yup, kucing itu selamat, tidak jadi terlindas. Tapi sepedaku menembus separator jalur sepeda dan di depanku sebuah pohon tersenyum ke diriku menyambut dengan ramah. Bruukk…

Semuanya menjadi gelap. Gelap dan sepi.

Aku membuka mata. Aku segera bangkit tapi tidak berdiri. Adrenalin masih berdenyut kencang. Ah, ternyata aku tidak mengalami luka apa-apa. Aku lihat sekeliling adalah kamar kosanku. Ah, sial. Ternyata tadi abis shubuh aku ketiduran lagi. Aku lihat jam, terpampang pukul 07.48 AM di layar hp. Tiiidaaak, waktu kuliah tidak lama lagi.

Hari ini aku rugi lagi. Semuanya menjadi tidak menyenangkan. Ya Allah, aku ingin berubah.

Sesungguhnya Allah tidak akan mengubah keadaan suatu kaum sebelum mereka mengubah keadaan diri mereka sendiri

——-

Kutek, Depok, Semester 3, 2009