iOS Tutorial 02 : IBOutlet dan UISlider

Hari ini saya mencoba XCode 4.0.1 yang cukup impresif, terutama pada penggabungan Interface Builder dan Code Editor menjadi satu window.  Jauh lebih mudah karena tidak perlu lagi berganti window untuk desain interface dan menuliskan kode.

Pada tutorial ini saya akan membahas mengenai IBOutlet dan contoh penggunaan UISlider.  Apa itu IBOutlet? sebenarnya ini berkaitan dengan pattern MVC.  Perlu anda ketahui, iOS development menggunakan pattern MVC (Model View Controller).  Lalu apa hubungan IBOutlet dengan MVC?  Salah satu tugas Controller adalah mengatur jalur data dan respon dari Model dan View.  Misalnya saja pada View terdapat satu Label (untuk menampilkan teks).  Controller suatu saat ingin mengubah teks yang ditampilkan oleh label tersebut.  Pada saat seperti ini, Controller akan berkomunikasi dengan View menggunakan Object yang namanya IBOutlet.  Secara mudah, IBOutlet akan kita gunakan bila Controller kita ingin mengubah tampilan/nilai pada komponen yang ada pada View🙂

Kasus yang akan saya bahas kali ini adalah pembuatan aplikasi Termometer.  KIra-kira berikut adalah tampilan dari program:

Jika slider pada Celcius diubah, maka secara otomatis program akan menampilkan nilai suhu pada skala-skala lainnya.  Kita juga dapat mengubah slider pada Fahrenheit, Kelvin atau Reamur.  Pada kesempatan ini saya hanya akan memberikan contoh implementasi slider hanya untuk Celcius.  Sisanya bisa anda praktekkan sendiri untuk latihan🙂

OK, langkah pertama, buka XCode, create New Project.  Pilih template View Based Application, simpan dengan nama TermometerSlide pada tempat yang anda inginkan.

Buka file TermometerSlideViewController.xib, lalu buatlah desain interface seperti ini:

Pada aplikasi ini saya membatasi suhu Celcius antara -50 sampai 150.  Yang harus anda lakukan adalah mengubah property Slider pada Celcius seperti berikut:

Lakukan hal yang sama untuk slider lainnya, sesuaikan dengan skala suhu masing-masing.  Berikut adalah contekannya (berpatokan pada skala Celcius antara -50 sampai 150:

Fahrenheit : Max 302, Min -58
Kelvin : Max 423.15, Min 223.15
Reamur : Max 120, Min -40

Suhu awal saat aplikasi dijalankan adalah 100 derajat Celcius (skala suhu lainnya mengikuti Celcius).  Sampai di sini desain user interface sudah selesai.  Berikutnya kita perlu mendefinisikan IBOutlet.  Pada kasus ini, yang kita inginkan adalah label dari masing-masing suhu akan berubah mengikuti hasil perhitungan sekarang.  Untuk mengubah label ini, kita perlu mendefinisikan IBOutlet.  Kita akan mengubah 4 label untuk 4 skala suhu, sehingga kita perlu mendeklarasikan 4 IBOutlet.  Mari mulai menulis kode !

Buka file TermometerSlideViewController.h, tambahkan deklarasi IBOutlet ke dalamnya seperti berikut :

[codesyntax lang=”objc”]

@interface TermometerSlideViewController : UIViewController {
    IBOutlet UILabel *labelCelcius;
    IBOutlet UILabel *labelFahrenheit;
    IBOutlet UILabel *labelReamur;
    IBOutlet UILabel *labelKelvin;
}

[/codesyntax]

Deklarasikan property untuk masing-masing IBOutlet tersebut (agar kita langsung dapat menggunakan getter dan setter dari masing-masing label) seperti berikut:

[codesyntax lang=”objc”]

@property(nonatomic, retain) IBOutlet UILabel *labelCelcius;
@property(nonatomic, retain) IBOutlet UILabel *labelFahrenheit;
@property(nonatomic, retain) IBOutlet UILabel *labelReamur;
@property(nonatomic, retain) IBOutlet UILabel *labelKelvin;

[/codesyntax]

Saat slider Celcius berubah, maka aplikasi perlu menghitung ulang suhu yang ditampilkan, begitu juga dengan skala suhu lainnya.  Deklarasikan sebuah IBAction yang akan dijalankan bila slider diubah nilainya.  Berikut adalah deklarasi event-handler tersebut:

[codesyntax lang=”objc”]

-(IBAction) sliderValueChanged:(UISlider *)sender;

[/codesyntax]

Ok, kita sudah mendeklarasikan beberapa hal yang diperlukan, berikutnya adalah membuat implementasinya.  Bukalah file TermometerSlideViewController.m, lalu lakukan synthesize dari keempat IBOutlet yang telah kita deklarasikan sebelumnya.  Berikut adalah kodenya (taruh tepat di bawah @implementation):

[codesyntax lang=”objc”]

#import "TermometerSlideViewController.h"

@implementation TermometerSlideViewController

@synthesize labelCelcius;
@synthesize labelFahrenheit;
@synthesize labelKelvin;
@synthesize labelReamur;

[/codesyntax]

Berikutnya adalah membuat implementasi event-handler yang akan dijalankan saat nilai slider berubah.  Berikut adalah implementasi sliderValueChanged: tersebut

[codesyntax lang=”objc”]

-(IBAction)sliderValueChanged:(UISlider *)sender {
    float celciusValue = [sender value];
    float reamurValue = celciusValue * 0.8;
    float kelvinValue = celciusValue + 273.15;
    float fahrenheitValue = celciusValue * 1.8 + 32;
    [labelCelcius setText:[NSString stringWithFormat:@"%.2f", celciusValue]];
    [labelFahrenheit setText:[NSString stringWithFormat:@"%.2f", fahrenheitValue]];
    [labelKelvin setText:[NSString stringWithFormat:@"%.2f", kelvinValue]];
    [labelReamur setText:[NSString stringWithFormat:@"%.2f", reamurValue]];
}

[/codesyntax]

untuk mengambil nilai slider sekarang, gunakan [sender value].  Setelah kita dapatkan nilai Celcius, tugas berikutnya adalah mengubahnya ke skala suhu lainnya.  Setelah skala suhu lainnya didapatkan, langkah berikutnya adalah mengubah tampilan teks pada user interface.  Untuk mengubah teks pada label dapat dilakukan dengan memanggil method setText.  Method stringWithFormat dipanggil karena kita ingin menampilkan nilai suhu sekarang dalam format 2 digit di belakang koma (misal: 22.30, 100.00).

Langkah terakhir adalah berkaitan dengan memory management.  Ingat, iPhone/iPod/iPad adalah device dengan resource terbatas, karena itu memory management sangatlah penting.  Untuk melakukan dealokasi memory pada 4 IBOutlet yang telah kita buat, lakukan pada method dealloc seperti berikut:

[codesyntax lang=”objc”]

- (void)dealloc
{
    [super dealloc];
    [labelCelcius release];
    [labelFahrenheit release];
    [labelKelvin release];
    [labelReamur release];
}

[/codesyntax]

Build, lalu jalankan :)  Aplikasi TermometerSlide akan dijalankan, tapi bila anda menggeser slider tidak terjadi apa-apa.  Di sini ada bagian yang terlewat :)  Kita sudah membuat user interface, kita sudah membuat kode programnya, yang kurang adalah menghubungkan user interface dengan kode program yang telah kita buat.  Yang pertama adalah Slider.  Ingat, bila slider berubah, maka akan menjalankan method sliderValueChanged.  Bagaimana caranya? mudah saja. Buka file TermometerSlideViewController.xib. Pilih slider Celcius, tahan tombol Ctrl, lalu drag ke arah icon File Owner seperti pada gambar berikut:

Pilih sliderValueChanged.

Untuk Label, prosesnya adalah kebalikannya (ingat, IBOutlet berarti controller ingin mengubah View).  Pilih File Owner, lalu tahan tombol Ctrl, drag sampai pada label Celcius.  Pilih labelCelcius.  Lakukan hal yang sama untuk ketiga label lainnya.

Simpan, lalu jalankan.  Sekarang aplikasi TermometerSlide akan berfungsi sesuai dengan yang diinginkan🙂

Bagaimana dengan slider pada skala suhu lainnya? silahkan anda mencoba menambahkannya.  Saya hanya akan memberi beberapa petunjuk berikut:

  1. Untuk membedakan slider satu dengan slider lainnya, anda dapat memanfaatkan propery Tag
  2. Untuk mengubah nilai slider, anda perlu membuat IBOutlet lagi

2 thoughts on “iOS Tutorial 02 : IBOutlet dan UISlider”

    1. yup, kita bisa saja sama sekali tidak menggunakan IBOutlet, dalam artian seluruh user interface dan event handlernya dicreate secara dinamis dalam controller. Tapi untuk View yang sederhana akan lebih cepat bila menggunakan Interface Builder.

      isi dari nib/xib file sebenarnya juga hanyalah XML yang berisi definisi property dari setiap komponen yang digunakan. Isi file nib/xib ini akan dibaca saat program dijalankan dan seluruh komponen yang terdefinisikan di sana akan dicreate secara dinamis juga.

      tutorial ini menggunakan Interface Builder untuk memudahkan menyusun komponen dan mengatur event handlernya, sehingga konteksnya akan menggunakan IBOutlet🙂

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