- Sep 12 Thu 2013 10:04
-
【APP開發素材】iPhone 5S與iPhone 5C設計版型下載
- May 24 Fri 2013 08:39
-
【APP開發技術分享】原生以外另一種思維：PhoneGap X iOS 簡易的Table View及導覽轉景效果
之前介紹了如何使用PhoneGap去製作包裝iOS App，這次要透過jQuery Mobile(JQM)這套函式庫製作另一個App，去模擬iOS原生程式開發常用到的Table View及導覽控制器(Navigation Controller)轉景效果。
首先新增一個專案於/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
接下來要下載安裝JQM函式庫，可從jQuery Mobile首頁點選下載連結。目前版本為1.3.1
這裡要使用最簡單的安裝法，也就是跳過下載直接使用官方推薦的檔案聯結
用Xcode開啟專案，找到www資料夾內的index.html檔案並注解掉如下圖用紅框圈起來的部分
於<head>加入官方的JQM函式庫連結
輸入新的程式碼如下圖，接著以模擬器執行App
跟Hello World的時候相比，可愛的PhoneGap機器人不見了，取代的是向各位打招呼的訊息。步驟4注解掉的部分是PhoneGap的預設程式碼，每次新增專案時都會自動填入；雖然制作精美，但跟本文無關只好忍痛刪掉。接下來在body元件內填入以下程式碼
剛剛填入的是常見的HTML<ul>清單語法，但經過JQM包裝過於模擬器執行就產生如下圖般的效果；這種呈現方式跟就跟iOS原生套件中的Table View很接近，光看截圖很難分辨出其中的差異。到目前為止輸入的程式碼有個共通點，就是起始標籤內的data-role屬性；這就是JQM用來指定各種元件功能的語法，而目前已經使用的則有：分頁(page)、標題(header)、內容(content)跟清單(listview)。JQM函式庫會依照輸入的data-role屬性去判斷指定的元件，並作出相對應的呈現
剛剛的清單頁面看起來簡單明瞭，但實際上卻缺乏良好的分類結構(三個年級各個分班全部擠在一起)。因此接下來要製作一個可收合式(collapsible)清單介面，程式碼如下
跟清單的做法有所不同，可收合式元件需要用到一個<div>元件；除了data-role屬性填入collapsible外，還多了額外的data-collapsed、data-theme及data-content-theme屬性。其中data-collapsed用於控制頁面讀取時元件為展開或收合狀態，而data-theme及data-content-theme則用於控制該元件的預設界面風格。<div>元件內則包含了作為群組標題的<h4>元件(無需另外設定data-role)以及一個清單元件用於呈現一年以下的所有班級；程式碼執行時應呈現如下面左邊的截圖。這裡只修改了一年級的部分，有興趣的話可以將二三年級一併修改成一樣的風格，那看起來就會如同下方右邊的截圖
目前的清單介面已經做到可以自由展開收合，接下來就要加入iOS App常有的推頁轉景效果。先在目前的分頁(page)元件結束的</div>標籤之後再加入一組分頁元件，程式碼如下
JQM其實容許單一網頁檔案下存在複數分頁的，各分頁間只要設好獨立的ID就可以互相呼叫。接下來將步驟8修改的清單元件內容作出以下修改
這裡主要是將原本清單項目內容以超連結<a>的方式重新包裝，超連結的href屬性內容指向要讀取的檔案並在副檔名後方加上井字符號及ID，就可指定讀取該ID所屬的分頁。href屬性內容最前方page-transitions-字串並非路徑的一部分，其功能是標示此超連結要套用轉景(transition)特效；效果的指定則使用data-transition屬性來作設定。App執行的結果如下
跟步驟9呈現出來的效果略有不同，各班級項目的後方都多了一個向右的箭頭，代表該項目後續還有資料。點擊後會產生水平橫移的轉景效果並移至以下頁面
除了標頭文字外，本頁的返回字樣也是使用了超連結元件來製作；特別的是這個超連結的href屬性為空值，且多了個data-rel屬性並設為back。該語法所呈現的效果跟iOS原生App常見的返回鍵如出一撤，屬於超連結語法的一部分，會自動的將介面導回之前的一頁。可嘗試於連接標籤內加入data-role屬性並設為button，這樣一來返回的呈現就會由原本的超連結變成按鈕的形狀
- May 17 Fri 2013 08:56
-
【APP開發工具】Trello－簡單、直覺、多功能的專案管理平台，輕鬆完成工作事項管理及團隊協作
- May 15 Wed 2013 13:54
-
【APP技術分享】蝦米是NFC?怎麼最近聽到智慧型手機就常聽到NFC哩? NFC的過去及未來(下)
鋼鐵人電影中,賈維斯(J.A.R.V.I.S)是主角東尼‧史塔克(Winter is coming)設計的人工智慧系統兼貼身管家.在屋內它可以監控屋外天氣,掌握屋內人員進出,協助史塔克工作測試;在屋外可以協助作戰,調整鋼鐵衣的能源配置,甚至入侵其它電腦系統. 幾乎無所不在史塔克的身旁. (在漫畫原著中,賈維斯原本是主角父親的管家名字)
- May 14 Tue 2013 14:14
-
【APP開發技術】原生開發以外另一種思維：PhoneGap X iOS 起手式
下一個劃時代的程式語言是什麼？以最近的趨勢來看HTML5呼聲似乎是最高的。
一方面因為它是更為新穎先進的網頁語法，另一方面也因為以網頁語法開發行動平台App的技術漸趨成熟所致；這也無法避免的在開發者間引發了網頁App對決原生App的戰爭。
目前來說以HTML5為主的網頁App特色在於入門門檻較低以及可輕易達成跨平台需求，而各平台原生App則是以完整的配套功能及較高的效能勝出。
- May 02 Thu 2013 08:55
-
【APP技術分享】蝦米是NFC?怎麼最近聽到智慧型手機就常聽到NFC哩? NFC的過去及未來(中)
現在只要搭上大眾交通工具,最要緊的事情,就是拿出你的智慧型手機滑滑點點. 無論你是在玩遊戲、看影片、上批踢踢、逛商城、或只是當一面鏡子. 科技都直接或間接的改變你我的生活習慣. 就像那些年,我們一起掛著的MSN一樣.(遠目)
1
