使用 Ruby on Rails 與 Eclipse 開發 iPhone 應用程式（第 3 部分）：進階視圖與表單

系列最終回，介紹 iPhone 專用視圖面板、表單元素（切換開關、下拉選單）、裝置旋轉事件處理、主畫面圖示設定等進階功能，打造類原生 App 體驗。

面板與分組顯示

使用 panel Helper 產生 iUI 面板容器，fieldset 產生圓角矩形分組。食譜顯示頁面包含圖片、份量、描述、配料清單（使用 row_label）、步驟（使用 row）與標籤。

搜尋表單

工具列搜尋按鈕目標設為 _self 觸發完整頁面重載。表單包含關鍵字文字框、標籤下拉選單、食材切換開關（toggle Helper 產生隱藏欄位與 iUI 切換 UI）。送出按鈕套用 iUI whiteButton/blueButton 樣式。

裝置旋轉處理

兩種方式回應旋轉：

• CSS 屬性選擇器 body[orient="landscape"] 調整工具列標題寬度邊距。
• Rails observe_orientation_change Helper 註冊 onorientationchange 事件，透過 Ajax 回呼傳送 position 參數（0、90、-90），伺服器端可透過 RJS 動態調整 DOM。

Layout 中加入 register_orientation_change 輸出事件處理屬性。

相容性補充

• 電話號碼自動偵測可用 <meta name="format-detection" content="telephone=no"> 關閉，或用 tel: 連結明確啟用。
• Google Maps/YouTube 連結會啟動原生 App。
• 不支援 Flash、Java Applet、WML、SVG、XSLT、檔案上傳下載、滑鼠懸停事件。
• 圖片尺寸限制：GIF/PNG/TIFF ≤ 2MP，JPEG 子採樣 2-32MP，單檔 < 10MB。
• 主畫面圖示：放置 57x57 PNG 於 /apple-touch-icon.png，系統自動圓角加光澤。

iUI 與 rails_iui 插件持續降低 Mobile Safari 開發門檻，迎接 iPhone 2.0 時代。