Mar 102013
 

Salam,

Dalam post ni, saya akan ajar bagaimana untuk buat Simple Calculator app guna Xcode
Anda akan belajar beberapa perkara

1. Cara menggunakan interface builder
2. Cara connect interface builder dengan code
3. NSButton, NSPopUpButton, NSTextField

1. Buat projek baru Xcode dan pilih Cocoa Application, pada product name guna SimpleCalculator (tak kisah pn apa nama sebenarnya)

)Xcode 10

2. Pastikan uncheck Use Core Data dan check Use Automatic Reference Counting.

*Core Data adalah untuk app yang berasas database. Automatic Reference Counting (ARC) membolehkan kita tidak perlu fikir banyak pasal memory management kerana compiler yang ambil tugas itu.

3. Apabila project telah dibuat, pergi ke MainMenu.xib (xib dalam sebutan dipanggil nib). Apa yang anda lihat dipanggil Interface Builder (IB).

4. Object Library adalah dimana object yang akan diguna untuk interface.

SimpleCalculator.xcodeproj — MainMenu

Interface Builder

4. Pada Object Library, drag object supaya menjadi seperti rajah di bawah. Pada Object Library anda boleh search di bawahnya dan drag ke SimpleCalculator Window

Text Field (NSTextField)
Pop Up Button (NSPopUpButton)
Label (NSTextField)
Push Button (NSButton)

5. Tukar title supaya menjadi seperti dibawah. Anda boleh tukar title dengan double click pada object ataupun dengan tukar title di Attributes Inspector.

Xcode 8

Object yang telah di drag ke Window

5. Tekan butang Run dan anda ia akan memaparkan Window seperti yang telah dibuat di IB tetapi ia masih tidak boleh melakukan apa2.

6. Pada pop up button, kita mahu ia sebagai math operator, double click pada popup button, kemudian double click setiap menu item dan namakan seperti rajah di bawah.

Pada mulanya anda hanya ada 3 menu item, untuk tambah satu lagi menu item, click pada mana2 menu item. Kemudian copy dan paste menggunakan keyboard.

Menu items dalam pop up button

Menu items dalam pop up button

7. Bahagian interface sudah siap. Sekarang kita perlu connect object di dalam IB kepada AppDelegate. Untuk ini tekan Assistant Editor

Xcode

8. Selepas tekan Assistant Editor, sepatutnya view akan terbahagi 2 bahagian seperti di bawah.

SimpleCalculator

9. Untuk connect setiap object ke AppDelegate, hold Ctrl key, kemudian drag object ke AppDelegate.h menggunakan mouse.

Xcode 6

Connect outlet by dragging from IB to AppDelegate.h

10. Pastikan Connection adalah Outlet untuk setiap object melainkan Calculate button gunakan connection Action.

Xcode 4

11. Setelah siap setiap nama sepatutnya seperti berikut.

*IBOutlet bermaksud sesuatu property itu diconnect dengan IB supaya kita boleh mendapat value dan sebagainya. manakala IBAction bermaksud sesuatu Action (method) akan dipanggil setelah diclick di interface

@property (assign) IBOutlet NSWindow *window;
@property (weak) IBOutlet NSTextField *firstTextField;
@property (weak) IBOutlet NSPopUpButton *operatorPopup;
@property (weak) IBOutlet NSTextField *secondTextField;
@property (weak) IBOutlet NSTextField *resultTextField;

- (IBAction)calculate:(id)sender;

12. Sekarang pergi ke AppDelegate.m, anda akan dapati – (IBAction)calculate:(id)sender. Ia secara automatik dibuat oleh Xcode selepas di connect.

13. Sekarang dalam AppDelegate.m tambah seperti dibawah.

- (IBAction)calculate:(id)sender
{
    NSLog(@"In calculate method!");
}

14. Kemudian Run dan tekan butang Calculate. Jika betul maka dalam Output Area iaitu bahagian bawah akan tertulis seperti berikut

2013-03-09 13:53:32.758 SimpleCalculator[4680:303] In calculate method!

14. Dalam method calculate:, tukar code menjadi seperti di bawah

- (IBAction)calculate:(id)sender {
    NSLog(@"In calculate method!");
    CGFloat firstNumber = self.firstTextField.floatValue;
    CGFloat secondNumber = self.secondTextField.floatValue;
    CGFloat result = 0;

    switch (self.operatorPopup.indexOfSelectedItem) {
        case 0: //X
            result = firstNumber * secondNumber;
            break;
        case 1: // /
            result = firstNumber / secondNumber;
            break;
        case 2: //+
            result = firstNumber + secondNumber;
            break;
        case 3: //-
            result = firstNumber - secondNumber;
            break;
        default:
            break;
    }
    self.resultTextField.floatValue =result;
}

15. Run dan cuba kalculator yang telah siap!

16. Dalam code ni mula2 kita ambil nilai daripada textfield di IB dan masukkan dalam firstNumber dan secondNumber.

17. Kemudian untuk tahu operator mana yang dipilih kita gunakan switch dan method dari NSPopupButton indexOfSelectedItem. Index adalah bermula dari 0, daripada nilai index kita buat operasi yang sewajarnya ke dalam variable result.

18. Akhirnya nilai result di pas ke resultTextField untuk update interface.

*Jika tak faham sesuatu fungsi, documentation sangatlah berguna. Pada bahagian sebelah kanan di Quick Help, apabila anda tekan cursor mouse contohnya di indexOfSelectedItem. Quick Help akan tulis description untuk indexOfSelectedItem. Kemudian tekan NSPopUpButton Class Reference untuk maklumat lebih lanjut tentang class NSPopUpButton ni.

Quick Help

Quick Help