Utility Application Template 與 Painter, FlagQuizGame 開發重點

透過兩個練習題目來學習 Utility Application template ，一個是 Painter，另外一個是 Flag quiz game。

Painter 是一個可以讓使用者透過手指接觸螢幕畫圖的應用程式，透過按下 info "i" 切換到設定頁面，來調整畫筆的粗細和顏色，再返回到主畫面繼續畫圖。

Flag quiz game 是一個可以透過國旗題庫，讓使用者猜這是哪一個國家的國旗，共十題，最後會給與成績。透過按下 "i" 切換到後面可以設定考題的選像多寡，和選擇出哪幾個區域的國家國旗就好。

選擇了 Utility Application Template 作為設計的起點。Utility Application 包含前端主畫面給與主要功能，後端畫面讓使用者可以透過設定，返回主畫面進而調整。所以透過這樣開設，會有兩個 View Controller，分別是 MainViewController.h 和 .m、FlipsideViewController.h 和 .m。同時也會幫忙建立出畫面以及它的子視圖 UIView，以及 Info (i) 自動產生兩個視圖間進行切換的界面元素，和 Done 的按鈕作為切還回來的功能。

打開 Xcode，從 MainViewController.h 開始定義 Property 要用到哪些，搭配 IBOutlet, IBAction 規劃出可能會有動向。打開 MainView.xib 開始透過 Interface Builder 將需要的畫面元素拖拉進來，將彼此設定關聯，將 Target/Action 定義好。才再回到 MainViewController.m 開始寫實作部份。

MainViewController 是 UIViewController 的 subclass，implements 了 FlipsideViewControllerDelegate protocol。Protocol 是描述一系列的 methods 可以呼叫到另外一個 object，這概念有點像是 "interface"。FlipsideViewControllerDelegate 是自動建立出來，定義給 FlipsideViewController class。它定義了 flipsideViewControllerDidFinish method 讓當按下了 "Done" 按鈕可以回度 MainView 畫面。

Utility application template 常用 methods

在 MainViewController.m

• - (IBAction)showInfo:(id)sender; 這邊將要導過去的 FlipsideViewController 宣告出來，透過 delegate 技巧，將 MainViewController 上的值傳遞過去給 FlipsideViewController 接收，最後在將 controller release。
  
• - (void)dealloc; 將畫面會用到的 properties 記得 release 掉。

在 FlipsideViewController.m

• - (IBAction)done:(id)sender 將 MainViewController 宣告出來，透過 delegate 將值傳回去
• - (void)dealloc; 將畫面會用到的 properties 記得 release 掉。

Painter 額外加入地方

Sguiggle 來當作 Object 封裝點、顏色、寬度。

• - (void)addPoint:(CGPoint)point; 加入新的點。

MainView 定義了 NSMutableDictionary 來儲存 squiggle 點、UIColor 當下的顏色、float 當下的線條寬度。

• - (void)drawSquiggle:(Squiggle *)squiggle inContext:(CGContextRef)context; 支援畫圖。
  
• - (void)resetView; 畫面歸零重來。
  

FlipsideViewController 儲存了顏色、和畫筆粗細。

• - (IBAction)updateColor:sender; 更新顏色。
• - (IBAction)erase:sender; 清空色彩。
• - (IBAction)clearScreen:sender; 清空畫面。
• - (void)setColor:(UIColor *)c lineWidth:(float)width; 設定顏色，在 delegate 呼叫用。
  

FlagQuizGame 額外加入地方

MainViewController 宣告諸多變數來儲存遊戲進行中的參考值，有國旗圖案、答案、答對幾題、圖案標準答案、總共幾題等等。

• - (IBAction)submitGuess:sender; 提交使用者作答答案。
  
• - (void)loadNextFlag; 載入下一張國旗。
• - (void)setGuessRows:(int)rows; 設定考題選項多寡。
• - (void)resetQuiz; 重新歸零。
• - (NSMutableDictionary *)regions; 取得目前 Regions 資訊。
  

FlipsideViewController 宣告了選項數目、切換是否 on/off 控制考題的國家地理區域。

• - (void)setSwitches:(NSDictionary *)dictionary; 設定只會出現哪些區域作為考題。
• - (void)setSelectedIndex:(int)index; 設定考題選項的多寡。

寫這兩隻練習題目的時候，首先要找出套用 Utility Applicaiton 範本，在因應不同的功能需求，去規劃後面的開發。

當畫面需要哪些元素，搭配 MVC 架構在 Interface Builder 拖拉並且把各個元素連接起來。如果邏輯比較複雜的，在 Xcode 裡面要注意宣告 methods 來符合功能所需。另外當兩個 controller 主畫面副畫面切換，在傳值上要注意彼此是否有串接上。

當碰到程式模擬器跑出來不符合自己預期的結果時候，適當在程式裡面加入 NSLog 和插入中斷點，透過 step by step 去觀看值，再來推敲問題可能會局限在哪邊。最後如果還是無法突破，這代表瞭解還不夠透徹，先把 issue 記起來，作為備忘錄，留著未來學的越多，再回來試著解解看這些問題。相信最後可以做出來自己當初期望的 version 1.0 應用程式的。

相關程式與 issues 改進紀錄可參考 Github：edwardinubuntu/Painter, edwardinubuntu/FlagQuizGame