() translation by (you can also view the original English article)
Pada tutorial sebelumnya, Anda membuat proyek Swift pertama Anda di Xcode, aplikasi sederhana tentang daftar hal-hal yang harus dilakukan. Dalam serial Swift dari nol ini, kita akan menambahkan kemampuan untuk membuat item baru hal-hal yang harus dilakukan. Sambil jalan, Anda akan belajar tentang aksi, delegasi, dan properti.
Prasyarat
Jika Anda ingin lanjut belajar bersama saya, pastikan Anda memiliki Xcode 6.3 atau yang lebih tinggi terpasang di mesin Anda. Pada saat ditulis, Xcode 6.3 berada dalam versi beta dan tersedia dari iOS Dev Center Apple untuk pengembang iOS yang terdaftar.
Alasan disyaratkannya Xcode 6.3 atau yang lebih tinggi adalah agar bisa memaksimalkan manfaat Swift 1.2, yang dikenalkan oleh Apple beberapa hari lalu. Swift 1.2 memperkenalkan sejumlah tambahan hebat yang akan kita manfaatkan di sepanjang seri ini.
1. Menambahkan Item-item
Di akhir tutorial ini, pengguna akan mampu menambahkan hal-hal baru ke daftar yang harus dillakukan dengan menyentuh suatu tombol di bilah navigasi, menampilkan tampilan dengan isian teks dan suatu tombol. Mari memulai dengan membuat view controller yang akan menangani penambahan item-item baru ke daftar yang harus dilakukan, yakni kelas AddItemViewController.
Langkah 1: Buat AddItemViewController
Pilih New > File... dari menu File Xcode dan pilih templat Cocoa Class dari daftar templat di iOS > Source.
Beri nama kelas tersebut AddItemViewController dan pastikan mewarisi (inherit) dari UIViewController. Periksa dua kali bahwa Language diset ke Swift dan Also create XIB file dalam kondisi dicentang.
Beritahu Xcode di mana Anda ingin menyimpan file untuk kelas AddItemViewController dan klik Create.
Langkah 2: Menambahkan Outlet dan Action
Sebelum kita membuat antar muka pengguna kelas AddItemViewController, harus dibuat suatu outlet untuk isian teks (text field) dan dua action, satu untuk tombol cancel di bilah navigasi dan yang lain untuk tombol create di bawah text field.
Untuk saat ini menambahkan outlet sudah menjadi hal yang akrab bagi Anda. Buat suatu outlet di kelas AddItemViewController dan beri nama textField sebagaimana ditunjukkan di bawah ini.
1 |
class AddItemViewController: UIViewController { |
2 |
@IBOutlet var textField: UITextField! |
3 |
|
4 |
override func viewDidLoad() { |
5 |
super.viewDidLoad() |
6 |
}
|
7 |
|
8 |
override func didReceiveMemoryWarning() { |
9 |
super.didReceiveMemoryWarning() |
10 |
}
|
11 |
}
|
Membuat action sangat mirip dengan membuat suatu instance metode. Kenyataannya, atribut @IBAction tak lebih dari sekedar petunjuk untuk Interface Builder. Dengan cara menempatkan atribut @IBAction sebagai prefiks suatu metode, Interface Builder akan menyadari keberadaan metode tersebut, sehingga memungkinkan kita untuk terhubung dengannya di storyboard. Untuk saat ini kita biarkan badan kedua action tetap kosong.
1 |
class AddItemViewController: UIViewController { |
2 |
@IBOutlet var textField: UITextField! |
3 |
|
4 |
override func viewDidLoad() { |
5 |
super.viewDidLoad() |
6 |
}
|
7 |
|
8 |
override func didReceiveMemoryWarning() { |
9 |
super.didReceiveMemoryWarning() |
10 |
}
|
11 |
|
12 |
@IBAction func cancel(sender: AnyObject) { |
13 |
|
14 |
}
|
15 |
|
16 |
@IBAction func create(sender: AnyObject) { |
17 |
|
18 |
}
|
19 |
}
|
Langkah 3: Ciptakan Antar Muka Pengguna
Buka Main.storyboard di Project Navigator dan seret suatu View Controller dari Object Library di sebelah kanan. Dengan view controller yang dipilih, buka Identity Inspector di sebelah kanan dan atur Custome Class > Class ke AddItemViewController.
Untuk menambahkan bilah navigasi ke tampilan penambahan item (add item view), pilih Add Item View Controller dan pilih Embed In > Navigation Controller dari menu Editor. Ini akan menjadikan Add Item View Controller sebagai root view controllernya navigation controller.
Langkah berikutnya adalah menambahkan item bar button ke bilah navigasi View Controller—bukan Add Item View Controller—dan atur Identifier ke Add di dalam Attributes Inspector.
Ketika pengguna menyentuh tombol Add, Add Item View Controller akan disajikan secara sederhana. Untuk melakukan ini, Control-Drag dari tombol Add ke Navigation Controller, pilih present modally dari menu yang muncul. Ini akan menciptakan suatu segue dari Add Item View Controller ke Navigation Controller yang baru.
Tarik suatu text field dan tombol dari Object Library dan tambahkan ke layar Add Item View Controller. Pilih Add Item View Controller dan sambungkan outlet textField dengan text field dan action create: dengan tombolnya. Action create: akan di-trigger ketika even Touch Up Inside diaktifkan. Ganti judul tombol ke Change dan tambahkan batasan tata letak yang dibutuhkan ke text field dan tombol.
Untuk menyelesaikan antar muka pengguna, tambahkan suatu bar button item di kiri atas bilah navigasi Add Item View Controller dan atur Identifier ke Cancel. Dengan Add Item View Controller dipilih, buka Connections Inspector dan hubungkan action cancel: ke tombol Cancel.
Buat dan jalankan aplikasi dengan menekan Command-R untuk memastikan bahwa semuanya dipasang dengan benar.
2. Implementasikan Delegate Protocol
Ketika pengguna menyentuh tombol Create untuk menambahkan item ke daftar hal yang harus dilakukan, add item view controller harus memberitahu view controller. Delegasi adalah solusi yang sempurna untuk skenario ini. Proses ini cukup sederhana.
Kita membuat suatu delegate protokol kelas ViewController yang selaras. Ketika instance AddItemViewController dibuat—pada saat pengguna menyentuh tombol Add—objek ViewController diset sebagai delegate instance AddItemViewController, memungkinkannya untuk memberitahu instance ViewController ketika dibuat suatu item baru hal-hal yang harus dilakukan. Mari memerincinya untuk memahami proses ini lebih baik.
Langkah 1: Deklarasikan Protokol AddItemViewControllerDelegate
Buka AddItemViewController.swift dan deklarasikan protocol AddItemViewControllerDelegate di bawah import statement di atas. Deklarasi protokol terlihat mirip dengan deklarasi kelas (class). Kata kunci protocol diikuti dengan nama protocolnya.
1 |
import UIKit |
2 |
|
3 |
protocol AddItemViewControllerDelegate { |
4 |
func controller(controller: AddItemViewController, didAddItem: String) |
5 |
}
|
Konsepnya sangat mirip dengan protokol di Objective-C. Nama protokol tersebut adalah AddItemViewControllerDelegate dan mendefinisikan satu metode, controller(controller:didAddItem:).
Langkah 2: Deklarasikan Properti delegate
Objek yang harus diimplementasikan untuk mendelegasikan protokol adalah delegate dari AddItemViewController. Sebelumnya kita harus membuat properti untuk delegate sebagaimana ditunjukkan pada kutipan di bawah ini.
1 |
class AddItemViewController: UIViewController { |
2 |
@IBOutlet var textField: UITextField! |
3 |
|
4 |
var delegate: AddItemViewControllerDelegate? |
5 |
|
6 |
...
|
7 |
}
|
Properti delegate adalah type AddItemViewControllerDelegate?, suatu type opsional, karena kita tidak bisa yakin bahwa properti delegate tidak nil. Perhatikan bahwa nama protokol tidak dilingkupi dengan kurung sudut sebagaimana di Objective-C.
Langkah 3: Implementasikan Action
Metode delegate controller(controller:didAddItem:), akan dipanggil dalam create: action sebagaimana ditunjukkan di bawah ini. Agar contohnya tetap sederhana, kita tidak melakukan validasi apapun pada masukan pengguna. Secara aman kita membuka nilai yang disimpan dalam properti delegate, artinya metode delegate hanya dipanggil jika properti delegate diset. Nilai text field secara sementara disimpan di konstanta yang dinamai item.
1 |
@IBAction func create(sender: AnyObject) { |
2 |
let item = self.textField.text |
3 |
|
4 |
if let delegate = self.delegate { |
5 |
delegate.controller(self, didAddItem: item) |
6 |
}
|
7 |
}
|
Implementasi action cancel: mudah saja. Yang harus dilakukan adalah membubarkan instance AddItemViewController.
1 |
@IBAction func cancel(sender: AnyObject) { |
2 |
self.dismissViewControllerAnimated(true, completion: nil) |
3 |
}
|
Langkah 4: Mengatur Delegate
Tetapi ada sepotong teka-teki yang hilang. Properti delegate dari instance AddItemViewController tidak diatur pada saat ini. Ini bisa dipecahkan dengan mengimplementasikan metode prepareForSegue(_:sender:) dalam kelas ViewController. Meskipun demikian, pertama kita harus mengunjungi kembali storyboardnya.
Buka Main.storyboard dan pilih segue yang menghubungkan tombol Add dengan Navigation Controller. Buka Attributes Inspector lalu set Identifier segue ke AddItemViewController.
Berikutnya, implementasikan metode prepareForSegue(_:sender:) dalam kelas ViewController sebagaimana ditunjukkan di bawah ini. Perhatikan kata kunci override yang menjadi prefiks metodenya. Sekarang Anda sudah akrab dengan hal tersebut.
1 |
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) { |
2 |
if segue.identifier == "AddItemViewController" { |
3 |
let navigationController = segue.destinationViewController as? UINavigationController |
4 |
let addItemViewController = navigationController?.topViewController as? AddItemViewController |
5 |
|
6 |
if let viewController = addItemViewController { |
7 |
viewController.delegate = self |
8 |
}
|
9 |
}
|
10 |
}
|
Kita akan memulai dengan mengecek identifier segue, memastikan bahwa yang disiapkan adalah segue yang benar. Lalu kita akan meminta view controller yang menjadi tujuan segue ini. Mungkin Anda mengekspektasikannya sebagai instance AddItemViewController, tetapi ingatlah bahwa kita membuat view controller tersebut sebagai root view controller suatu navigation controller. Artinya kita harus meminta navigation controller, yang merupakan view controller tujuan segue, akan view controller utamanya.
Konstanta addItemViewController adalah type AddItemViewController? karena penggunaan kata kunci as?. Dengan kata lain, dengan menggunakan as? kita men-downcast nilai properti topViewController menjadi type opsional.
Di pernyataan if, kita membuka opsionalnya dan mengeset properti delegate ke instance ViewController.
Saya yakin Anda menemukan manfaat adanya beberapa opsional di implementasi metode prepareForSegue(_:sender:). Ketika berinteraksi dengan Objective-C API, selalu lebih baik untuk bermain aman. Meskipun mengirimkan pesan ke nil sepenuhnya aman di Objective-C, tapi tidak di Swift. Karena perbedaan utama ini, Anda harus selalu berhati-hati ketika berinteraksi dengan Objective-C API di Swift. Contoh di atas mengilustrasikan ini dengan baik.
Langkah 5: Mengimplementasikan Protokol AddItemViewControllerDelegate
Mengimplementasikan protokol AddItemViewControllerDelegate serupa dengan implementasi protokol UITableViewDataSource. Kita memulai dengan menyesuaikan kelas ViewController ke protokol, sebagaimana ditunjukkan di bawah ini.
1 |
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate, AddItemViewControllerDelegate { |
2 |
...
|
3 |
}
|
Selanjutnya kita mengimplementasikan metode protokol AddItemViewControllerDelegate, yang mempersingkat implementasi metode controller(controller:didAddItem:). Kita menambahkan item baru ke properti items view controller, memuat ulang table view, dan menghentikan add item view controller.
1 |
// MARK: Add Item View Controller Delegate Methods
|
2 |
func controller(controller: AddItemViewController, didAddItem: String) { |
3 |
// Update Data Source
|
4 |
self.items.append(didAddItem) |
5 |
|
6 |
// Reload Table View
|
7 |
self.tableView.reloadData() |
8 |
|
9 |
// Dismiss Add Item View Controller
|
10 |
self.dismissViewControllerAnimated(true, completion: nil) |
11 |
}
|
Langkah 6: Buat dan Jalankan
Buat dan jalankan aplikasinya untuk menguji apakah Anda bisa menambahkan item baru ke daftar hal-hal yang harus dilakukan. Saat ini kita tidak memvalidasi masukan pengguna. Sebagai latihan, tampilkan alert view kepada pengguna jika mereka menyentuh Create tombol dan text field dalam keadaan kosong. Menambahkan kekosongan ke hal yang harus dilakukan tidaklah bermanfaat. Benar bukan?
Pelajari Lebih Banyak di Kursus Pemrograman Swift Kami
Jika Anda tertarik meningkatkan pembelajaran Swift Anda, silakan lihat kursus lengkap kami tentang pengembangan Swift.
Kesimpulan
Di tutorial ini, Anda telah belajar cara mendeklarasikan dan mengimplementasikan suatu protokol sesuaian (custom). Anda juga belajar cara membuat action dan mengaitkannya dalam Interface Builder. Dalam episode pekan depan, kami akan menuntaskan aplikasi hal-hal yang harus dilakukan ini dengan menambahkan kemampuan untuk menghapus item dalam daftar hal yang harus dilakukan dan kita juga akan meningkatkan pengalaman pengguna aplikasi.
