Table Cell Selection dan UIAllertController di iOS – FoodPin App

Sebelumnya kita telah berhasil Memodifikasi Table View menggunakan Prototype Cell di postingan sebelumnya. Yang akan kita lakukan selanjutnya adalah membuat sedikit aksi ketika kita meng-klik salah satu data yang ada di cell, seperti memunculkan pesan atau pemberitahuan lebih detail mengenaik cell yang dipilih. So, check this out ..

Table Cell Selection

Mari kita perjelas dulu apa saja fitur yang akan kita tambahkan pada aplikasi di postingan ini:

  • Menampilkan menu ketika kita menekan salah satu cell. Seperti pilihan phone call atau I’ve been here.
  • Menampilkan icon love ketika user memilih “I’ve been here”.

 

Memahami UITableViewDelegate

Ketika kite pertama kali membuat Simple Table View di postingan sebelumnya, kita telah mengimplementasikan dua delegate yaitu UITableViewDelegate dan UITableViewDataSource di TableViewController. Kita juga pernah membahas tentang protocol UITableViewDataSource walapun hanya sedikit.

Delegate pattern ini sangat sering di gunakan di pemograman iOS, dimana setiap delegate bertanggung jawab pada kegitan yang spesifik atau tugas yang membuat sistem menjadi lebih ringan dan bersih. Contohnya sewaktu-waktu sebuah object akan menjalankan beberapa tugas, dimana object tersebut juga bergantung dengan object lainnya untuk bisa menjalankannya. Inilah yang dinamakan “separation of concerns” dalam software design.

Class UITableView juga mengaplikasikan konsep design ini. Dua protocol yang disebutkan sebelumnya telah di design untuk tugas berbeda. Dimana protocol UITableViewDataSource bertugas untuk mengatur data tabel dan protocol UITableViewDelegate bertugas untuk mengatur headings dan footers dari UITableView.

Nah itulah gambaran delegate yang bertanggung jawab untuk mengatur row selection (data yang dipilih pada aplikasi). Selanjutnya kita akan mengimplementasikan beberapa method untuk mengatur menangani row selection.


 

Menangani Table Row Selection

Sebelum mengimplementasikan sebuah method, mungkin muncul pertanyan seperti ini:

Bagaimana kita tahu method mana yang akan diimplementasikan pada UITableViewDelegate?

Jawabannya adalah “Baca Dokumentasi”. Kita bisa dengan bebas mengakses referensi Official dari Apple Developer di https://developer.apple.com/library/ios/. Sebagai iOS Developer, kita harus membaca API documentation, karena disitu telah dijelaskan sangat lengkap tentang iOS SDK. Misalnya terjadi perubah pada SDK, kita hanya perlu membaca API document untuk memahaminya kembali. Oya, ada cara mudah membaca dokumentasi ini melalui Xcode tanpa perlu membukanya lewat browser yaitu dengan mengarahkan cursor ke class/protocol (contohnya UITableViewController) dan tekan “control-command-?”. Ini nantinya akan menampilkan sebuah pop-over yang menampilkan penjelasan lengkap tentang class seperti protocol. Jika mengklik UITableViewDelegate secara langsung maka akan diarahkan ke documentation browser, seperti gambar dibawah.

Mengakses API documentation menggunakan tombol shortcut
Mengakses API documentation menggunakan tombol shortcut

Dengan melihat sekilas dokumentasi, kita akan menemukan dua method yang digunakan untuk mengatur row selection:

  • tableView(_:willSelectRowAtIndexPath:)
  • tableView(_:didSelectRowAtIndexPath:)

Kedua method tersebut telah di design untuk row selection. Perbedaanya hanya ketika tableView(_:willSelectRowAtIndexPath:) di panggi, ini hanya akan digunakan untuk row yang spesifik sewaktu kita memilih cell. Tapi khususnya kita akan menggunakan method tableView(_:didSelectRowAtIndexPath:) yang di panggile setelah user memilih sebuah row untuk menangani row selection. Dan method ini kita implementasikan untuk tugas seperti menampilkan menu ketika data di cell di pilih.


 

Mengatur Row Selection di Code

Di Xcode, buka file RestaurantTableViewController.swift dan tambahkan method berikut pada class RestaurantTableViewController:

Menampilkan Action SheetCode diatas nantinya akan membuat menu option dengan menggunakan class UiaAllertController. Ketika salah satu cell di row dipilih, maka aplikasi akan menampilan pesan “What do you want to do” dan tombol cancel. Coba jalankan aplikasi untuk melakukan testing, seharunsya akan tampil seperti gambar disamping.


 

Lebih detail tentang UIAlertController

Sebelum kita melanjutkan pengembangan aplikasi, mari kita bahas sedikit terlebih dahulu tentang UIAlertController ini. Kita telah mengimplementasikan UIAllertController tanpa tau lebih detail tentang bagaimana class ini. Class UIAllertController pertama kali di perknalkan di iOS 8 untuk menggantikan class UIAllertView dan UIActionSheet dari versi iOS SDK yang dulu. Ini di design untuk menampilkan pesan pemberitahuan kepada user.

Berdasarkan code diatas, kita bisa menggunakan style yang spesifik dari UIAllertController menggunakan parameter preferredStyle. Kita bisa mengganti valuenya menjadi “.ActionSheet” atau “.Alert” seperti gambar dibawah ini.

Actionsheet alert
Actionsheet alert

Untuk menampilkan pesan kepada user, kita bisa menghubungkan action dengan alert controller untuk mendapatkan respon dari user. Untuk melakukannya, buat object UIAlertAction dengan judul, style, dan code yang kita inginkan. Setelah object UIAlertAction telah dibuat, kita bisa menghubungkannya dengan alert controller menggunakan method addAction.

Ketika alert controller telah dikongfigurasikan, kita bisa dengan mudah menampilkannya dengan menggunakan method presentViewController.

UIAlertControllerStyleInilah bagaimana cara menggunakan class UIAllerController. Sebagai pemula, kita mungkin agar bingung dengan:

  • Bagaimana kita bisa tahu value yang tersedia dari paramater preferedStyle ketika membuat UIAlertController?
  • Syntax dot masih baru bagi kita, apakah kita juga menulinya dengan ActionSheet?

Untuk pertanyaan pertama, jawabannya adalah baca kembali dokumentasi. Di Xcode, kita bisa menempatkan cursor di parameter preferredStyle dan menekan control-command-?. Xcode nantinya akan menampilkan deklarasi method dan kita bisa menemukan petunujuk yang lebih jelas mengenai API tersebut. Seperti yang bisa dilihat di gambar diatas, UIAlertControllerStyle sebenarnya terdiri dari dua nilai, yaitu ActionSheet dan Alert.

Kita bisa menunjukkan niainya menggunakan UIAllertControllerStyle.ActionSheet atau UIAllertControllerStyle.Alert. Jadi kita bisa menulis codenya seperti yang dibawah ini untuk membuat UIAlertController:

Tidak ada yang salah dengan code diatas, Swift memberikan developer cara gambang untuk menuliskan code yang ringkas. Nah karena tipe dari parameter preferredStyle telah diketahui (UIAllertControllerStyle), maka Swift mempermudah kita lagi dengan hanya menggunakan sytax dot untuk menunjukkan UIControllerStyle. Seperti code berikut:


 

Menambahkan Action ke Alert Controller

Sekarang mari kita tambahkan dua action ke alert controller:

  • Action “Call” – Digunakan untuk memanggil no telpn restaurant yang dipilih.
  • Action “I’ve been here” – Ketika ini dipilih, maka akan menambahkan tanda centang ke restaurant yang di pilih.

Di method tableView(_:didSelectRowAtIndexPath:), tambahkan code Call Action, dengan cara menambahkan code dibawah ini setelah tombol Cancel:

Ada beberapa code yang mungkin agak asing, yaitu callActionHandler. Ketika membuat sebuah object UIAllertAction, kita bisa menspesifikasikan beberapa code untuk pemelihara. Beberapa code tersebut akan mengeksekusi ketika user memilih action, disinilah code menampilkan pemberitahuan kepada kita bahwa fitur call belum bisa digunakan.

Di Swift, code tersebut dinamakan dengan Closure. Clousure ini terdiri dari beberapa fungsi yang berada di sekitar code. Ini sudah umum di Objective-C, seperti contoh diatas, cara untuk memberikan action pada closure adalah mendeklarasikannya sebagai konstanta atau variavel dengan beberapa code sebagai value-nya. Di code diatas, in lah yang didefinisikan sebagai paramter closure, dan ketika nilai kembalinya telah kembali maka fungsi closure dibawahnya mulai dijalankan. Ilustrasi dari code ini dapat dilihat pada gambar dibawah.

Closure
Closure

Nah untuk implementasi action Call selanjutnya, tambahkan code dibawah ini untuk pembuatan action “I’ve been here”:

Code diatas adalah cara lain untuk menggunakan closure.


 

Optional di Swift

Cell diketahui sebagai salah satu tipe optional di Swift, Optional merupakan tipe baru yang di perkenalkan di Swift. Optional disini berarti “memiliki value” atau “tidak memiliki value sama sekali”. Nilai kembalian dari Cell oleh tableView.cellForRowAtIndexPath adalah berupa optional. Untuk mengakses property accessoryType dari cell, kita harus menggunakan tanda tanya. Untuk kasus kita, Swift akan mengecek jika cell memang sudah ada atau belum lalu memperbolehkan kita untuk memasang value dari accessoryType jika memang ternyat cell sudah ada. Di banyak kasus, fitur autocomplete dari Xcode akan menambahkan tanda tanya untuk kita ketika mengakses sebuah property dari optional tersebut.

Ketika user memilih “I’ve been here” untuk restaurant yang dipilih, kita menambahkan tanda centang ke cell yang terpilih. Coba jalankan aplikasi, pilih restaurant dan pilih juga salah satu action, maka akan tampil seperti gambar dibawah ini.

Call action dan I've been here
Call action dan I’ve been here

Untuk sekarang, ketika kita memlih salah satu row, row yang terpilih ditandai dengan warna abu-abu sebagai pilihan yang sedang dipilih. Tambahkan code dibawah ini di akhir method tableView(_:didSelectRowAtIndexPath:) untuk memperlihatkan pilihan yang sedang tidak dipilih.


Menghilangkan Bug

Aplikasi sudah terlihat keren, tapi jika kita perhatikan lagi dengan teliti, di aplikasi ini terdapat sebuah bug. Contohnya jika kita telah menggunakan action “I’ve been here” di restaurant “Café Deadend”, jika kita coba scroll kebawah maka kita akan menemukan restaurant lainnya (contohnya Palomino Espresso) ternyata juga ikut tercentang. Lah apa yang terjadi, kenapa bisa ini juga ikut ter-centang?

Masalahnya terletak di penggunakan cell kembali yang telah kita bahas di postingan sebelumnya. Dimanna UITableView mempunya 30 cell untuk ditamiplkan, tapi untuk alasan performa kita hanya membuat 10 cell dan 10 cell tersebut digunakan kembali untuk menampilkan 20 cell lainnya begitu seterusnya. Untuk kasus ini, UITableView menggunakan kembali cell ke-1 (yang digunakan untuk Café Deadend yang juga ikut tercentang) untuk menampilkan restaurant lainnya. Di code kita, kita hanya mengupdate gambar dan label ketika table view digunakan kembali di cell yang sama, padahal accessory nya tidak ikut terupdate. Sehingga restaurant selanjutknya akan terus ikut tercentang.

Nah solusinya bagaimana ?

Bagaimana jika kita membuat array tambahan untuk menampung restaurang yang telah di centang? Di file RestaurantTableViewController.swift, deklarasikan array dengan tipe Boolean seperti berikut:

Bool merupakan tipe data di Swift yang menunjukkan nilai Boolean, yaitu true dan false. Ya Kita deklarasikan array restaurantVisited untuk menampung nilai Boolean dari data yang dipilih. Setiap nilai yang ada di array mengindikasikan restaurant telah di tandai. Contohnya, lihat nilai dari restaurantVisited[0] untuk mengecek jika “Café Deadend” ikut tercentang atau tidak.

Nilai yang ada di array tersebut di inisialiasikan dengan false. Dengan kata lain setiap item (restaurant belum tercentang) secara default. Code diatas menunjukkan pengulangan nilai array, sama halnya seperti dibawah ini:

Kita telah menyelesaikan bugnya, pertama kita harus mengupdate nilai dari array Boolean ketika restaurang telah di centang. Tambahkan code dibawah ini setelah isVisitedAction:

Sehingga terlihat seperti berikut:

Terkahir agar code diatas dapat berfungsi, tambahkan code dibawah ini untuk mengupdate accessory view di method tableView(_:cellForRowAtIndexPath:) sebelum “return cell”:

Disinilah kita mengecek jika restaurant yang ditmapilakan dicentak atau belum. Jika kondisinya true, maka akan menampilkan tanda centang, dan sebaliknya.

Sekarang kita bisa mengcompile aplikasi dan menjalankannya untuk melihat apakah masih ada bug atau tidak. Karena seharunya bug yang sebelumnya telah terselesaikan.

Well, mungkin cukup segitu pembahasan kali ini karena akan dilanjutkan di postingan selanjutnya. Oya, untuk contoh code bisa di download disini: https://www.dropbox.com/s/h8lz80g86r74e79/FoodPinCellSelection.zip.

Semoga bermanfaat, and See Yaa .. 😉

Iklan

Good People write good comments ..

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s