Tutorial 1 : Membuat Aplikasi iPhone untuk Pemula dengan Interface Builder

Pada tutorial pertama ini, saya akan memberikan tutorial untuk membuat aplikasi iPhone sederhana. Pada tutorial ini, kita akan menggunakan bantuan Interface Builder untuk menciptakan aplikasi sederhana tersebut.

Berikut ini Langkah-langkahnya :
1. Buka XCode, pilih New Project

2. Pilih templatenya : View-based Application, kemudian klik Choose…

3. Simpan dengan nama “Tutorial 1”

4. Drop-down folder Resource yang terdapat “Group & Files”, kemudian double klik “Tutorial1_ViewController.xib” seperti gambar di bawah ini

5. Setelah itu akan muncul Interface Builder seperti gambar di bawah ini :

6. Pada window Library, cari object yang bernama Label, kemudian drag and drop ke window View

7. Ganti nama Label menjadi “Input :” dengan cara double klik di object Label yang terdapat di window View

8. Lakukan langkah seperti no 6, untuk TextField dan Button, sehingga tampilannya menjadi seperti dibawah ini :

9. Klik 1 kali di object File’s Owner yang terdapat di window Tutorial_1ViewController.xib, kemudian klik menu Tools -> Inspector

10. Akan muncul suatu window baru yaitu : Tutorial_1View Controller Identity. Kemudian pilih tab ke 4 (Identity) seperti yang terdapat pada gambar. Setelah itu, pada bagian Class Outlet, tekan tombol (+), kemudian masukkan nama object pada kolom outlet dan tipe dari object tersebut. Dalam hal ini, kita masukkan nama objectnya : teks untuk UITextField

11. Kemudian,apabila kita ingin menambahkan aksi ketika button di klik, maka, kita harus menambahkan aksi tersebut di Class Action. Tekan tombol (+) untuk menambahkan aksi, kemudian masukkan juga Action beserta tipenya seperti yang terlihat pada gambar

12. Setelah itu, pilih menu File -> Write Class Files…

13. Kemudian save dengan nama : “Tutorial_1ViewController”

14. Setelah itu quit Interface Builder, lalu apabila muncul pertanyaan apakah perubahan di interface builder ingin di save? tekan Save. Apabila berhasil, maka di bagian Tutorial_1ViewController.h dan Tutorial_1ViewController.m akan terdapat code seperti ini :

Ajaib bukan? ☺

15. Langkah selanjutnya, kita harus menghubungkan antara object yang kita buat dengan view (tampilan)

16. Kembali ke Interface Builder, kemudian klik 1 kali di object File Owner, kemudian tekan alt, sambil melakukan drag and drop menuju ke TextField (yang terdapat di view). Kalau caranya benar, maka akan terlihat garis biru yang menghubungkan File Owner dengan TextField. Perhatikan gambar dibawah ini :

17. Kemudian, setelah tombol mouse dilepas, maka akan muncul 2 pilihan outlet yaitu teks dan view. Karena kita menghubungkannya dengan TextField, maka kita pilih teks.

18. Setelah itu, kita harus membuat koneksi antara Action dengan Button dengan cara : klik 1 kali di File Owner, kemudian, pada properties, pilih tab ke 2, lalu tarik garis menuju ke Object Button yang terdapat di View seperti gambar dibawah ini :

19. Kemudian pilih Eventnya : Touch Up Inside

20. Setelah itu Save, dan Quit dari Interface Builder

21. Kemudian di Tutorial_1ViewController.m, tambahkan syntax seperti gambar dibawah ini :

KETERANGAN CODE: – UIAlertView untuk menciptakan kotak pesan – [teks text] -> untuk mengambil nilai teks dari object TextField – [alert show] -> method show untuk menampilkan kotak pesan dari UIAlertView

HASIL :

sumber: imajalah.com