MIT School Muslimah : [XCode] Scene, Brain, dan Hubungan di Antara Mereka

MIT School Muslimah : [XCode] Scene, Brain, dan Hubungan di Antara Mereka

Masih ingat dengan Adi yang baru belajar menjadi iOS developer? Kali ini Adi membuat project yang ia beri nama ‘App Keren’ (alay ya). Karena Adi sudah merasa cukup jago, kali ini dia ingin membuat sebuah apps yang terdiri dari beberapa halaman dan interaktif alias dapat ‘dimainkan’ oleh user. Eksperimen Adi hari ini akan membantu kamu memahami soal scene, brain, dan bagaimana hubungan di antara keduanya.

Adi pun mulai membuat sebuah project dalam XCode, dan menemukan susunan seperti ini pada project navigator:

Screen Shot 2016-04-22 at 16.54.44

Dapat kita lihat bahwa ‘App Keren’ yang dibuat Adi ini terdiri dari dua folder utama: folder App Keren dan folder Products. Untuk kali ini kita belum akan membahas folder Products, jadi abaikan saja dulu. Sementara itu pada folder App Keren terdapat 6 file utama seperti di atas. Kali ini eksperimen Adi berkaitan erat dengan Main.storyboard dan ViewController.

Ini adalah Main Storyboard yang masih kosongan..

Screen Shot 2016-04-22 at 16.56.02

..dan ini adalah file ‘View Controller’..

Screen Shot 2016-04-22 at 16.55.28

Pada titik ini Adi merenung sedikit. Ia melihat bahwa kedua file tersebut memiliki jenis yang berbeda. Yang satu, yakni storyboard, tampak seperti layar yang bisa ia tambahkan berbagai elemen seperti tulisan, button, gambar, dan lain-lain. Sementara itu file view controller adalah kumpulan kode-kode yang dapat ia edit sesuka hati (asal nggak error aja ya). Secara default, layar story board ini sudah nyambung dengan view controller lho. Select Main.storyboard -> View Controller Scene (sebagaimana yang ditampilkan gambar di bawah ini..)

Screen Shot 2016-04-23 at 02.22.21

dan perhatikan identity inspector-nya. Kamu akan melihat yang seperti ini..

Screen Shot 2016-04-22 at 20.11.15

Perhatikan bahwa View Controller Scene yang sedang kamu select ‘terhubung’ dengan class bernama ‘ViewController’. Itu adalah file yang sebelumnya kamu lihat pada project navigator.

Sebentar. Biar nggak membingungkan, kita luruskan sedikit. Kita sudah menyebut dua hal dengan sebutan ‘view controller’. Yang pertama adalah file berjudul ‘ViewController’ yang tertera di navigation bar dan yang kedua adalah View Controller Scene yang ada pada Main Storyboard. Agar tidak membingungkan, mulai sekarang kita sebut ‘ViewController’ yang pertama sebagai sebuah file brain dan View Controller kedua sebagai sebuah scene. Ingat baik-baik ya.

Menghubungkan Scene dengan Brain

Jadi secara default file brain sudah terhubung dengan scene. Tapi keterhubungan yang otomatis ini hanya terjadi untuk scene pertama lho. Jadi jika kamu ingin menambahkan scene lain yang terhubung dengan brain lain, maka kamu harus mengeset secara manual hubungan scene-brain tersebut. Begini caranya:

1. Buat scene baru baru. Tinggal search ‘view controller’ pada kolom object library dan drag ke area scene.

2. Buat file brain baru. Klik File -> New -> File dan pilih Cocoa Touch Class dari daftar iOS Source.
Screen Shot 2016-04-23 at 03.09.14

3. Beri nama file tersebut. Misalnya ‘SceneKeren’ (untuk menyesuaikan dengan ke-alay-an Adi)

4. Sekarang kembali ke scene yang baru dibuat tadi dan hubungkan dengan file brain SceneKeren melalui tab identity inspector. Itu tuh, yang dua dari bawah.

Screen Shot 2016-04-23 at 03.13.03

5. Selesai! Sekarang kamu sudah berhasil menghubungkan scene dengan brain.

Menghubungkan Elemen dalam Scene ke Brain

“Lalu ini scene mau diapakan, Di?” tanyamu barangkali.

Nah ternyata Adi ingin membuat App Keren yang sesimpel ini:

Screen Shot 2016-04-23 at 02.30.50

Adi ingin agar jika button ‘Push Me’ ditekan oleh user, teks pada label berubah menjadi “Memang Paling Keren”. Nah bagaimana cara melakukannya? Pertama, Adi perlu menghubungkan masing-masing elemen (yakni label dan button) dalam scene ke file brain. Kedua, Adi perlu menuliskan sebuah perintah dalam brain. Perintah itu simpelnya berbunyi begini: ketika button Push Me ditekan maka label akan berubah menjadi “Memang Paling Keren”.

Agar kamu tidak kalah jago dari Adi, mari belajar cara menghubungkan elemen ke dalam brain. Kita coba hubungkan label ‘App Keren’ dulu ya.

1. Pastikan bahwa scene dan file brain sudah terhubung dengan melihat bagian identity inspector.

2. Tampilkan assistant editor. Klik pada icon berbentuk dua lingkaran (kedua dari kiri) di bagian kanan atas window.

Screen Shot 2016-04-23 at 09.31.15

Pastikan kamu memilih file brain yang sesuai dengan scene. Jadi jika kamu berada pada View Controller Scene, pilih brain View Controller.

3. Sekarang saatnya menghubungkan label di dalam scene ke file brain. Ada beberapa cara untuk melakukannya:

a. Select label pada scene, lalu control + drag ke area file brain

b. Select label pada document outline, lalu control + drag ke area file brain

c. Select label, lalu perhatikan tab connection inspector (tab paling kanan dalam utilities pane). Karena elemen ini belum terhubung dengan file brain, kamu akan melihat hasil seperti ini. Untuk menghubungkannya, drag dari bulatan di sebelah kanan ‘new referencing outlets’ ke area file brain.

Screen Shot 2016-04-23 at 03.27.28

Ketiga cara ini menghasilkan hal yang sama, jadi pilih saja yang manapun.

Tapi tunggu, kita harus men-drag ke area brain yang sebelah mana?

Pada dasarnya, drag ke sebelah manapun di dalam area class (di antara tanda { dan } utama), sah-sah saja. Tapi agar lebih rapi dan simpel, kita drag saja label ke bagian paling atas, yakni di baris tepat setelah tanda {, sebelum ‘override func viewDidLoad()’

Sekarang, setelah men-drag label ke area file brain, kamu akan diminta untuk memberi nama. Tidak perlu memikirkan nama yang terlalu alay, yang penting jangan menggunakan spasi ataupun simbol. Klik connect, dan voila label yang kamu punya pada scene sudah terhubung pada file brain. Jika berhasil, file brain kamu akan tampak seperti ini:

Screen Shot 2016-04-23 at 09.45.21

Label pada scene sudah masuk ke dalam brain dengan nama variabel ‘labelPertama’. Hover ke bagian bulatan di kiri dan kamu bisa melihat elemen mana yang berkorespondensi dengan baris kode di atas.

Sekarang mari kita hubungkan button pada scene dengan file brain. Caranya sama seperti menghubungkan label, tapi ada sedikit perbedaan. Setelah meng-control+drag ke area brain, kamu harus mengganti tipe connection menjadi ‘action’ dan type menjadi ‘UIButton’, seperti di bawah ini:

Screen Shot 2016-04-23 at 09.50.36

Sekarang file brain kamu pun akan tampak seperti ini:

Screen Shot 2016-04-23 at 09.55.14

Button pada scene sudah terhubung ke dalam brain dengan nama function ‘buttonPertama’. Kita selalu bisa memeriksa hubungan yang sudah terjadi antara suatu elemen scene dengan brain dengan memeriksa connection inspector-nya.

Perhatikan bahwa ada sedikit perbedaan antara label dan button dalam brain ini. Label muncul sebagai @IBOutlet dan button sebagai @IBAction. Nama label merupakan sebuah variabel sedangkan nama button merupakan sebuah function. Maksudnya apa ya?

IBOutlet dan IBAction

IB pada kedua kata tersebut adalah singkatan dari Interface Builder. Interface Builder adalah sistem yang kamu gunakan untuk membangun scene kamu itu, sehingga dengan gampangnya tinggal drag-drop dari library ke layar scene.

IBOutlet, seperti namanya, adalah sebuah ‘outlet’ atau ‘keluaran’. Ia tersimpan sebagai sebuah variabel. Kamu bisa melakukan berbagai manipulasi untuk sebuah label melalui brain, seperti mengganti teks dalam label, mengubah font, mengubah warna, dan lain-lain. Sementara itu IBAction tersimpan sebagai sebuah function. Di dalam function tersebut kamu bisa menentukan apa yang akan terjadi jika user berinteraksi (menekan) button pada layarnya.

Kamu mungkin sudah menyadari bahwa yang menentukan apakah sebuah elemen menjadi IBOutlet atau IBAction adalah jenis connection yang kamu pilih saat hendak menghubungkannya ke dalam brain. Di samping jenis connection outlet dan action, ada juga jenis outlet collection. Apakah itu? Coba carilah melalui sumber-sumber lain ya. 🙂

Untuk menyelesaikan App Keren buatan Adi, kamu masih perlu menuliskan suatu kode dalam function buttonPertama yang akan mengubah teks dalam labelPertama. Bagaimana caranya? Jadilah pembelajar mandiri dan cari sendiri caranya di jagat internet yang luas ini. 🙂 Selamat belajar!

Related posts:

Loading Facebook Comments ...