Tutorial 04: Hello World!

Pada tutorial ini saya akan menjelaskan pembuatan aplikasi SimpleLabel yang akan menampilkan tulisan Hello World dan Halo Dunia berdasarkan tombol yang ditekan.  Sebagai gambaran, aplikasinya akan seperti ini:

Jika tombol Indonesia ditekan, label akan menampilkan Halo Dunia!.  Jika tombol English ditekan, label akan menampilkan tulisan Hello World!.

Mari kita mulai.  Jalankan Xcode (saya menggunakan Xcode 4.1).  Buatlah project baru.

Pilih template View-based Application.  Template ini akan menghasilkan view controller dan delegate serta satu window sebagai tampilan awal.

Isikan Product name dengan SimpleLabel, lalu isikan nama anda company identifier.  Pilih iPhone pada Device Family, lalu hilangkan centang pada Include Unit Tests.

Tentukan lokasi penyimpanan project SimpleLabel ini.

Xcode akan menggenerate file-file yang dibutuhkan (sesuai dengan template View-based Application) yang tadi dipilih.

Ok, pertama kali yang akan kita lakukan adalah membuat tampilan (user interface) terlebih dahulu.  Pilih file SimpleLabelViewController.xib.

Kita akan menambahkan satu object Label (untuk menampilkan tulisan) dan dua buah object Button (tombol).  Aktifkan panel sebelah kanan untuk melihat daftar object yang tersedia.

Drag label ke arah view, lalu sesuaikan ukurannya.

Untuk mengubah tulisan yang ditampilkan, klik dua kali (double click) label tersebut, lalu ketikkan tulisan yang ingin ditampilkan.  Misalnya kita ubah menjadi Hallo Dunia !

Berikutnya, tambahkan dua tombol ke view.  Satu tombol untuk Indonesia, satu lagi untuk English seperti gambar berikut:

Sampai tahap ini, user interface sudah siap.  Mari kita mulai menulis kode program🙂.  Buka file SimpleLabelViewController.h.  Kita akan menambahkan beberapa instance variable dan instance method ke dalam class ini.

Tulisan pada label akan berubah sesuai dengan tombol yang ditekan.  Artinya kita akan mengubah tulisan pada label.  Tulisan pada label merupakan View, sedangkan untuk merubah View, kita perlu menghubungkan Controller dengan View tersebut.  Kita akan mendeklarasikan sebuah instance variable bertipe IBOutlet, yaitu berubah UILabel dan kita beri nama *displayText.

Kemudian kita juga perlu mendeklarasikan instance method yang akan dipanggil saat tombol Indonesia atau tombol English ditekan.  Kita beri nama displayIndonesian: dan displayEnglish.  Hasilnya akan seperti berikut:

Berikutnya adalah pembuatan implementasi dari kedua instance method tersebut.  Implementasi akan kita tuliskan pada SimpleLabelViewController.m.  Jadi file .h untuk deklarasi, sedangkan file .m untuk menuliskan implementasinya.

Tuliskan kedua method ini dalam file SimpleLabelViewController.m, tambahkan di bawah @implementation.

Bagi anda yang pernah belajar Java, mungkin bentuk penulisannya terlihat aneh.  Pada Objective-C kita menggunakan notasi [ ] untuk melakukan pemanggilan instance method.  Berikut adalah padanan kode di atas dalam bahasa Java:

[codesyntax lang=”java”]

public void displayEnglish() {
	displayText.setText("Hello World!");
}

[/codesyntax]

Tahapan terakhir adalah menghubungkan kedua instance method yang telah kita definisikan dengan kedua tombol yang ada di view.  Kita akan melakukannya secara drag-and-drop.  Buka kembali SimpleLabelViewController.xib.

Pilih tombol Indonesia, tahan tombol Ctrl, lalu drag ke arah First Responder.  Kemudian akan muncul pilihan method-method yang tersedia.  Pilih displayIndonesian.

Lakukan hal yang sama untuk tombol English (pilih displayEnglish:).

Masih ada lagi yang belum kita kerjakan, yaitu menghubungkan Controller ke View (ingat, kita akan mengubah tulisan pada label).  Kali ini caranya berbeda.  Pilih File’s Owner, tahan tombol Control, drag ke arah label.  Kemudian pilih displayText

Langkah berikutnya: tidak ada!  Aplikasi sudah selesai.  Coba jalankan dengan menekan tombol Run.

Bagaimana? anda sudah bisa memahami tutorial ini?  Silahkan coba kerjakan beberapa tantangan berikut ini:

  • Tambahkan dua label lagi ke view, isikan dengan tulisan Selamat Pagi dan Makan Pagi.
  • Jika tombol English ditekan, maka ketiga label akan menampilkan tulisan dalam bahasa Inggris (Good Morning, Breakfast).  Demikian juga sebaliknya jika tombol Indonesia yang ditekan
  • Tambahkan satu tombol lagi, Italian, yang akan menampilkan ketiga label dalam bahasa Italia (untuk penerjemahannya, silahkan buka Google Translator)

Sampai jumpa di tutorial berikutnya🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s