使用 Ruby on Rails 與 Eclipse 開發 iPhone 應用程式（第 2 部分）：iUI 列表導航與內容呈現

本篇引入 iUI 框架實作 iPhone 風格的鑽取式列表導航，說明 Rails 佈局、Helper 封裝、Ajax 列表載入、分頁替換與分組列表技巧。

iUI 整合步驟

1. 下載 iUI，將 JS、CSS、圖片置於 Rails public 對應目錄
2. 修正 CSS 中圖片路徑為絕對路徑 /images/...
3. 或使用 rails_iui 插件 rake iui:install 自動完成
4. Layout 引入 <%= include_iui_files %>

首頁佈局與工具列

預設路由指向 BrowsersController#index，iPhone 格式僅渲染 Layout 無內容。Layout Body 使用 iui_toolbar 產生頂部工具列（返回鈕、標題、搜尋鈕），iui_list 產生選單列表，項目包含標題與 URL，點擊觸發 Ajax 側向滑動切換。

列表 Helper 實作細節

iui_list 產生 <ul selected="true">，iUI 依此屬性決定可視區塊。列表項目 <li> 含連結與 JavaScript 更新工具列標題與返回鈕行為。頂部與底部可插入任意 HTML（如標題、切換桌面版連結）。

分頁替換

擴充 iui_list 支援 :more 選項，在列表底部加入「Next 25 items」連結，目標設為 _replace，回應時省略 <ul> 標籤直接替換該列表項目，實現無限捲動體驗。

分組列表

iui_grouped_list 使用 group_by 依首字母分組，產生 <li class="group"> 分隔標題，模仿 iPod 音樂列表風格。

相關畫面如下圖。