close

01_download

 

之前介紹了如何使用PhoneGap去製作包裝iOS App，這次要透過jQuery Mobile(JQM)這套函式庫製作另一個App，去模擬iOS原生程式開發常用到的Table View及導覽控制器(Navigation Controller)轉景效果。

  1.  首先新增一個專案於/demo/projects/view_test資料夾底下，這裡是取名為View_Test，封包名稱為com.demo.viewTest。PhoneGap新增專案的方法為用終端機進入/phonegap-2.7.0/lib/ios/bin資料夾底下再輸入以下指令:./create /demo/projects/view_test/ com.demo.viewTest View_Test
  2. 接下來要下載安裝JQM函式庫，可從jQuery Mobile首頁點選下載連結。目前版本為1.3.1
    01_download    
  3. 這裡要使用最簡單的安裝法，也就是跳過下載直接使用官方推薦的檔案聯結
    011_download         
  4. 用Xcode開啟專案，找到www資料夾內的index.html檔案並注解掉如下圖用紅框圈起來的部分
    012_comment_out           
  5. 於<head>加入官方的JQM函式庫連結
    013_insert        
  6. 輸入新的程式碼如下圖，接著以模擬器執行App
    05_content    
  7. 跟Hello World的時候相比，可愛的PhoneGap機器人不見了，取代的是向各位打招呼的訊息。步驟4注解掉的部分是PhoneGap的預設程式碼，每次新增專案時都會自動填入；雖然制作精美，但跟本文無關只好忍痛刪掉。接下來在body元件內填入以下程式碼06_listview  
  8. 剛剛填入的是常見的HTML<ul>清單語法，但經過JQM包裝過於模擬器執行就產生如下圖般的效果；這種呈現方式跟就跟iOS原生套件中的Table View很接近，光看截圖很難分辨出其中的差異。到目前為止輸入的程式碼有個共通點，就是起始標籤內的data-role屬性；這就是JQM用來指定各種元件功能的語法，而目前已經使用的則有：分頁(page)、標題(header)、內容(content)跟清單(listview)。JQM函式庫會依照輸入的data-role屬性去判斷指定的元件，並作出相對應的呈現
    06_listview_ss      
  9. 剛剛的清單頁面看起來簡單明瞭，但實際上卻缺乏良好的分類結構(三個年級各個分班全部擠在一起)。因此接下來要製作一個可收合式(collapsible)清單介面，程式碼如下
    014_clv      
  10. 跟清單的做法有所不同，可收合式元件需要用到一個<div>元件；除了data-role屬性填入collapsible外，還多了額外的data-collapsed、data-theme及data-content-theme屬性。其中data-collapsed用於控制頁面讀取時元件為展開或收合狀態，而data-theme及data-content-theme則用於控制該元件的預設界面風格。<div>元件內則包含了作為群組標題的<h4>元件(無需另外設定data-role)以及一個清單元件用於呈現一年以下的所有班級；程式碼執行時應呈現如下面左邊的截圖。這裡只修改了一年級的部分，有興趣的話可以將二三年級一併修改成一樣的風格，那看起來就會如同下方右邊的截圖
    08_pt_ss1     07_clp_lv_ss2      
  11. 目前的清單介面已經做到可以自由展開收合，接下來就要加入iOS App常有的推頁轉景效果。先在目前的分頁(page)元件結束的</div>標籤之後再加入一組分頁元件，程式碼如下
    08-pt2  
  12. JQM其實容許單一網頁檔案下存在複數分頁的，各分頁間只要設好獨立的ID就可以互相呼叫。接下來將步驟8修改的清單元件內容作出以下修改015_LINK         
  13. 這裡主要是將原本清單項目內容以超連結<a>的方式重新包裝，超連結的href屬性內容指向要讀取的檔案並在副檔名後方加上井字符號及ID，就可指定讀取該ID所屬的分頁。href屬性內容最前方page-transitions-字串並非路徑的一部分，其功能是標示此超連結要套用轉景(transition)特效；效果的指定則使用data-transition屬性來作設定。App執行的結果如下
    08_pt_ss1    
  14. 跟步驟9呈現出來的效果略有不同，各班級項目的後方都多了一個向右的箭頭，代表該項目後續還有資料。點擊後會產生水平橫移的轉景效果並移至以下頁面
    08_pt_ss2    
  15. 除了標頭文字外，本頁的返回字樣也是使用了超連結元件來製作；特別的是這個超連結的href屬性為空值，且多了個data-rel屬性並設為back。該語法所呈現的效果跟iOS原生App常見的返回鍵如出一撤，屬於超連結語法的一部分，會自動的將介面導回之前的一頁。可嘗試於連接標籤內加入data-role屬性並設為button，這樣一來返回的呈現就會由原本的超連結變成按鈕的形狀
    08_pt_ss3    

以上就是PhoneGap + JQM的App製作方式，這次的介紹主要著重於介面基礎外觀的部分，尚未使用到太多的Javascript及CSS語法。製作出來的效果神似iOS原生App，但仔細一看還是可以發現兩者的不同之處；而最令人擔心的效能問題有二處：1. App初始化時花費了稍長的時間做讀取，但轉景的效果則感受不太出有任何延遲。2. 細項收合的部分預設並無明顯的轉景特效，與iOS版本相比是略遜一籌。

下次會帶大家看看更為進階的實例：要試著以Javascript語法做到分頁間數值的傳遞，再運用AJAX的方式去修飾轉景及頁面讀取的部分，讓使用上更為順暢。下次見。

arrow
arrow
    全站熱搜

    AppNote 發表在 痞客邦 留言(1) 人氣()

    E-mail轉寄