/* syntax highlight */ /* end of syntax highlight */

2010年11月29日 星期一

iphone app 開發 (十三) – MVC 架構說明 (計算機範例)

Bookmark and Share

image

此篇延續之前的 iphone app 開發 (十一) – 程式 MVC 架構說明

但是用程式碼配合  MVC 架構的方式來說明

內容的程式碼來自:斯坦福2010年9月ios 4.0教程系列 (前半部)

如果要看教學影片可以按 這裡

基本程式碼會分成 Model, Controller, View 三方面來看

且用一個計算機程式的概念來進行

 

整個範例的進行則按照以下流程

一、開新專案

二、Model 程式碼邏輯及說明

三、Controller 程式碼邏輯及說明

四、把 View 的樣子擺出來,設計

五、將 Outlet, Action 設定好 (用拉線的方式)

六、填上各部份程式碼

七、編譯

 

 

一、開新專案

螢幕快照 2010-11-29 下午3.54.38

這裡我們設計的是 View-based Application,建議名字取 Calculator

此種模式會自動建立一個 ViewController.h 與 .m 檔,是負責幫你的 Controller 與 View 做溝通用

至於 CalculatorAppDelegate 則是自動產生的指派檔,在此範例當中我們不會動到此檔案

 

 

 

二、Model 程式碼邏輯及說明

由於我們所選的 View Based 專案並沒有自動產生 Model ,所以我們需要增加一個 model file

 

 

CalculatorBrain.h:做為標頭檔,包含所有的公用 API

 

image

(1) 第一行 (import):Foundation 是一個很基本的 class,有 Array, dictionary 等等

(2) @interface {} 是一個抽象的宣告,尚未實作

(3) CalculatorBrain:NSObject :是我們必備的一個 class ,而 NSObject 是它的父類別

(4) NSObject 包含了一些基本功能,像是記憶體管理等等

(5) double operand:宣告變數 (instance variable),而且要放在 interface {} 當中,以隱藏起來

(6) 預設所有變數都是 private 且 protected 的,方法可以取用但不能改變它

(6) (void)setOperand:(double)anOperand:指的是宣告一個 setOperand 的方法,後面是參數

(7) NSString 是一個 string  object ,必須加上 * 來

(8) calculatorBrain.h 的程式碼如下

 

 

 

calculatorBrain.m:實做方法

image

(1) 第一行要把剛剛的標頭檔 import 進來

(2) 之後要宣告 @implementtation ….. @end ,把實做包起來

(3) 方法前面如果是 + 表示可以將變數傳遞給別的 class, 減號則相反

(4) 注意方法後面是沒有 ; 的

(5) performOperation 方法傳遞 NSString 物件參數

(6) 如果要傳遞 message ,則該行左右邊要加上 [ 與 ]

(7) 所以該行表示我們要傳遞 message 給 operation 這個變數

(8) 我們會用 sendMessage 這個方法來傳遞 argument 這個 message

(9) return 是方法的回傳變數

(10) @end 結束

(11) calculatorBrain.m 的程式碼如下

 

 

 

三、Controller程式碼邏輯及說明

image 

(1) CalculatorViewController 是我們 controller 的方法,繼承自 UiViewController class

(2) UiViewController class 則是從 UIKit.h 裡面而來,讓 UiKit 與我們的程式接起來的方法

(3) UiKit 包含了一些 button, slider, view, view controll 等等

(4) CalculatorBrain 是一個 point ,指向 Model ,可以回想第一張圖片的綠色箭頭

(5) IBOutlet UILabel * display 也是一個 point,指向 View,負責將 model 的數值塞進 view 當中

(6) IBAction 則是 View 上面使用者的行為,是指回 Controller 的,可以參考下圖較好理解

image

 

 

四、View的設計

view 設計的方法請參考之前的 iphone app 開發 (六) – Hello App ‘s world !

總之請按照下圖的地方雙點擊進入 xib 畫面

螢幕快照 2010-11-29 上午11.51.21

請利用  button 與 label 等等拉成以下的 view 的樣子,下面的 0 就是 label

螢幕快照 2010-11-29 下午12.08.05

 

 

五、設定 Outlet 與 Action

image

iphone app 開發 (六) – Hello App ‘s world ! 已經有提過 Action 的拉法

如果要建立一個 bitton 的 action ,我們必須先在 controller 那邊寫好對應的方法

然後從 View 的 button 上面按下 control 拉出一條藍線到 File Owner 上面 (其實就是 model)

並且選擇我們的 action ,在這裡我們選 digitPressed,指的是

然後依序拉出 1.2.3.4~~9 .0 及 + – * / sqrt 等等

這是 View 的 Action ,會傳到 Controller 那裡去,就像下面那張圖

螢幕快照 2010-11-29 下午12.08.05

但是我們還要再放一個 Label ,預設數字填上 0,負責呈現最終數據的

此部份的結果反而是 Controller 去告訴 View 的結果

所以是從 File’s Owner 拉線到該 label ,並且選 operationPressed

 

 

六、填上各部份程式碼

上半部有一些程式碼並不完整,只是講解概念用

下面四張圖分別表示了完整的程式碼 (均來自 Standford 開發式課程)

 

螢幕快照 2010-11-29 下午3.51.55

(1) 此為 Model 部份,負責處理程式運算邏輯部份

(2) double operand 指的是宣告「運算元」這個變數,例如 1.2.3.4 等等

(3) NSString *watiingOperation 指的是「執行的運算」,例如 + – * / 等,以字串的形式存起來

(4) setOperand 是指設定運算元的 method

(5) performOperation 指的是開始運算的 method

 

螢幕快照 2010-11-29 下午3.52.09 

(1) 此為 Model 的實做

(2) 因為 watiingOperation 是一個字串所以前面用字串比對的方式處理

(3) 因為 sqrt 是直接按下去就會運算,不需要等到使用者再輸入一個運算子 (+-*/) ,所以用 if 判斷

(4) 如果使用者輸入operation =  + – * / 的話就傳送一個訊息進入 performWaitingOperation

 

螢幕快照 2010-11-29 下午3.52.19

(1) 實做 Controller 部份

(2) IBoutlet 是指宣告一個呈現運算結果的 display 變數,在 View 裡面是以 UILabel 的方式存在

(3) CalculatorBrain 是指宣告一個物件,物件的內容是計算機的 model

(4) userIsInTheMiddleOfTypeingANumber 是指宣告一個布林變數,偵測使用者是否還在輸入

(5) Sender 是指設定使用者在 View 做什麼動作,然後傳到 Controller 對應執行的 method

(5) IBAction 指在 View 上面設定的動作,當使用者按下運算元 ( digitPressed) 時,送出 sender

(6) IBAction 指在 View 上面設定的動作,當使用者按下運算子 ( operationPressed) 時,送出 sender

 

螢幕快照 2010-11-29 下午3.52.27

(1) 實做 Controller

(2) alloc 宣告 Brain 物件時也要分配給它記憶體空間

(3) 實做  digitPressed 時,如果使用者正在輸入,則用  Append 方式加長字串

(4) 如果使用者沒有有輸入,則呼叫 setText 給 display 這個 label 來顯示目前使用者輸入的數字

(5) 實做 operationPressed 時,則呼叫 brain 物件裡的 setOperand 方法,並將 display 上面的數字以 doubleValue 的型態當成 setOperand method 給的參數 input

(6) 上一步驟結束時告知程式使用者並不是在輸入數字 (1.2.3.4…), userIsInTheMiddle…… = NO

(7) NSString *operation 是指設定這個變數來將使用者輸入的運算元 (+-*/) 存成字串變數

(8) [[sender titleLabel] tect] 此行的意思是送一個 message 告知說使用者按下了某個 button ,此行可以取得其 button 上面的字 (titleLabel) ,且比 text 的格式存起來

(8) double result 該行是指用 button 上面的字 (titleLabel) 當成 model 裡面 performOperation 的參數

(9) display 為 UILabel ,本身就有 setText 這個方法,然後我們把剛剛的 result 當成字串傳進去

(10) stringWithFormat 跟 C 裡面的 printf 類似, 而 %g 則是某種數字型態

 

 

七、編譯

如果有出現錯誤,即 Xcode 右小角出現紅色的警示

代表可能哪裡出錯了,快去檢查吧

如果都沒問題,你現在應該在開心的玩著你的計算機了,恭喜!

3 意見:

For M 提到...

請問一下
如果在編譯之後並無發現有任何error
但是再打開模擬器之後
app卻立刻關掉
這樣是怎樣的錯誤呢?
是interface的錯誤嗎?

彭其捷 提到...

回樓上,感謝您的發言,但因為版主也是剛開始學習 app 開發這部份,但我並沒有遇過這樣的問題,不知道你在編輯的時候是否有警告呢?

Jay 提到...

我之前也有相同的情況,
最後終於找到問題所在,
就是需要right click "view", 按"New Referencing Outlet"的圈圈, 把它拉向"File's Owner"就可以解決

張貼留言

Related Posts Plugin for WordPress, Blogger...