2013年11月30日 星期六

ExtJS 4 測試 (二) : 主題佈景切換 (Look and Feel)

jQuery UI 提供了 24 種主題佈景, 只要匯入不同主題的 CSS 檔就能切換主題 (詳見 : jQuery UI 執行環境配置, 測試範例), ExtJS 也是如此, 在免費的 GPL 4.2.1 版裡, 它在 resources 目錄下提供了四種預置的主題佈景 : classic(預設), neptune (藍), gray (灰), access (黑), ExtJS 描繪出美美外觀的秘密就是在這 resources 目錄下.

在準備本地的 ExtJS 檔案時, 以 4.2.1 版為例, 解開 zip 檔後, 除了 ext-all.js 這個主檔外, 還需要 resources 這目錄下的 css 與 ext-theme-classic 兩個子目錄, 這是 ExtJS 描繪網頁最基本的配備 (只有預設主題背景 classic), 所以如果要在自己的伺服器上自備 ExtJS 框架, 那麼最基本的目錄結構是 :

extjs-4.2.1
    |___ ext-all.js
    |___ resources
                 |___ css
                 |___ ext-theme-classic

這樣大約只需要 3.44MB 的大小, 對於容量有限的主機而言, 這是算輕量級的. 如果要能切換主題佈景, 那麼 resources 下的其他三個子目錄也要上傳主機才行, 其目錄架構如下 :

extjs-4.2.1
    |___ ext-all.js
    |___ resources
                 |___ css
                 |___ ext-theme-classic
                 |___ ext-theme-neptune
                 |___ ext-theme-gray
                 |___ ext-theme-access
                 |___ ext-theme-classic-sandbox
                 |___ themes

可以說, ExtJS 能描繪出美美外觀的秘密就是在這 resources 目錄下了 (themes 與 ext-theme-classix-sandbox 這兩個不需要), 這樣總共約需 9.79MB 大小. 以下我們就以簡單的訊息框來做布景切換測試 :

測試範例 1 : http://tony1966.xyz/test/extjstest/extjstest_look_and_feel.htm [看原始碼]

在範例一中, 我們放置了四個佈景的按鈕, 在事件處理函式中, 呼叫 Ext.util.CSS.swapStyleSheet() 方法, 切換頁面的 css 布景檔案, 例如下列為切換至 neptune 主題的程式碼 :

      var neptune=new Ext.Button({
          text : "Neptune",
          width : 100,
          renderTo : Ext.getBody(),
          handler : function() {
            var url="extjs-4.2.1/resources/css/ext-all-neptune.css";
            Ext.util.CSS.swapStyleSheet("theme",url);
            }
          });


參考資料 :
# Change the theme and align right
# Easy way For Applying themes


2013年11月26日 星期二

紅衫軍與鄭王詛咒

這幾天泰國政局動盪, 反政府民眾甚至攻佔財政部等機關, 照以前的規律, 軍方可能會鎮壓, 然後德高望重的泰王蒲美蓬會出來調停安撫, 軍方統治過一陣子又會舉行民主選舉 ... 但我覺得這次可能不一樣, 因為當家的正是被保守派反對的美女總理盈拉, 也就是前總理塔克辛的么妹. 保守派的軍方暗地裡叫好都來不及了, 豈有鎮壓之理? 除非紅衫軍壓過反對派 !

這次反對派搞動亂就是因為盈拉打算特赦其兄, 讓他能返國造成的. 塔克辛 Taksin 這名字與兩百多年前的吞武里王朝鄭皇同名, 故泰國民間流傳已久的鄭王詛咒與此事件似乎關聯越來越明顯. 支持塔克辛的紅衫軍也出來跟反對派抗衡, 看來這回泰國局勢很難善了.

泰王詛咒!?泰國紅潮暴動添神秘色彩
# Wiki : 拉瑪一世
# Wiki : 鄭信
泰大規模反政府示威 盈拉堅稱不下台
# 泰王傳奇
# 泰國潮州王的詛咒

2013年11月25日 星期一

HTML5 測試 : 檢測函式庫 Modenizr 的用法

在 HTML5 網頁程式開發時第一個要處理的便是檢測客戶端的瀏覽器是否支援 HTML5 與 CSS3, 但是 HTML5 許多新功能在各瀏覽器實作上還有些差異 (特別是 video 的 codec 特別麻煩), 這需要使用稱為 User Agent sniffing 的方法來一一偵測, 要記得這些還真是一種負擔 (又不是狗狗, sniffing 啥?). 不過, 現在有一個 Modernizr 函式庫可以解決這個困擾, 它可以測試超過 40 種 HTML5 功能, 讓我們可以用較簡單的方式去扮狗狗到處 sniffing.

下載 Modernizr 請到其首頁 :

# Modernizr 首頁

目前是 2.7.0 版, 請按中央 "Development" 按鈕進入下載頁面 :


Modernizr 函式庫可以客製化 (可以下載只包含想要測試之功能的程式碼), 預設除了右下角 Extra 項下的 Media Queries 外, 其他檢測功能都已經預設選取, 建議把 Media Queries 也選取, 而且勾選左下角的 "Don't Minify Source", 這樣我們就可以研究原始碼是如何檢測 HTML5 功能的, 全功能開發版只有 29KB 而已 :


然後按 "Generate!" 鈕, 下方就會顯示函式庫原始碼, 再按 "Download" 即可下載此客製化函式庫, 其檔名可能像是 modernizr.custom.28923.js 這樣, 為了簡短, 可改為 modernizr.js 就好, 然後複製到專案目錄下, 然後在網頁中匯入 modernizr.js. 我把它放在測試目錄下 :

# modernizr.js 2.7.0 版 (按滑鼠右鍵另存新檔)

下面就來看看其用法, 測試用範本如下 :

<!DOCTYPE html>
<meta charset=utf-8>
<head>
  <title>HTML5 Test</title>
  <script src="modernizr.js"></script>
</head>
<body>
  <script>
  </script>
</body>

此函式庫匯入後會建立一個 Javascript 物件 Modernizr, 它會將 HTML5 與 CSS3 支援情形記錄在所提供的相關屬性上, 例如要測試是否支援 canvas 功能. 其語法為 :

if (Modernizr.canvas) {
    //支援 canvas
    }
else {
    //不支援 canvas
    }

要特別注意, Modernizr 所用的的屬性名稱跟用 Javascript 去存取 DOM 物件之屬性有一些不同, Modernizr 省略符號, 全部使用小寫字母, 例如新表單輸入元件 datetime-local 在 Modernizr 要改為 datetimelocal, 不需 dash.

在下列範例一中, 我用三元運算子 ? : 來做判斷 :

Modernizr.canvas? document.write("O"): document.write("X");

測試範例 1 : http://tony1966.16mb.com/html5test/modernizr.htm [看原始碼]

在 Chrome 31.0 上測試, 其未支援項目只有兩項, Web SQL 與 IndexedDB 都有支援, 僅新表單輸入元件 datetime, datetimelocal 未支援, 堪稱模範生 :
 datetime, datetimelocal

於 Opera 18.0 測試, 未支援項目僅六項 :
h264, mp3, m4a, datetime, datetimelocal,

在 Firefox 25.0.1 上測試, 其未支援項目有十四項 :
h264, mp3, m4a, websqldatabase, datetime, date, month, week, time, datetimelocal, number, color, flexbox, cssreflections

總之, Firefox 在新表單輸入元件方面支援度還不是很好, 其他還不錯 (不支援 Web SQL).

在 Windows 系統的 Safari 5.1.7 上測試, 其未支援項目有十四項 :
ogg, webm, indexeddb, webgl, datetime, date, month, week, time, datetimelocal, color, autocomplete, list, flexbox

在 iPad2 之 iOS 5.1.7 的 Safari 測試, 未支援項目比 Windows 版 Safari 較少僅八項 (改天升級 iOS7 後再來測試一遍) :
ogg, webm, indexeddb, datetimelocal, color, autocomplete, list, flexbox

Safari 跟 Firefox 差不多, 也是新表單輸入元件方面支援度還不全, Safari 支援 Web SQL, 未支援 IndexedDB.

至於 IE8, 那就慘不忍睹, 與其列出其未支援項目, 不如列出其支援項目較快 :
draganddrop, localstorage, sessionstorage, postmessage, fontface

而 IE 9 聲稱要支援 HTML5, 但也只是進步一些而已, 同樣列出其支援項目較快 :
canvas, canstext, video, h264, mp3, m4a, draganddrop, localstorage, sessionstorage, geolocation, postmessage, svg, inlinsvg, svgclippaths, hashchange, fontface, backgrounsize, borderradius, boxshadow, hsla, multiplebgs, opacity, rgba, generatedcontent, csstransforms

微軟會軟趴趴, 不是沒有原因的.

好消息是 IE 11.0 有進步, 我在 Win8.1 上的 IE 11 測試結果, 其未支援項目有 13 項 :
ogg, webm, wav, websqldatabase, smil, datetime, date, month, week, time, datetimelocal, color, cssreflections

看起來跟 Firefox 差不多了, 主要也是新表單輸入元件尚未完全支援, 但 IE 11 未支援 wav 有點奇怪.

而我的 HTC Desire S 上的 Android 2.3.6 瀏覽器未支援項目 23 項 :
ogg, webm, wav, webworkers, indexeddb, websockets, svg, inlinesvg, svgclippaths, smil, webgl, url, datetime, date, month, week, time, datetimelocal, color, autocomplete, list, flexbox, csstransforms3d

在升版為 Android 4.0.3 版的三星 P7510 瀏覽器測試結果明顯比 2.3.6 好很多, 未支援項目有 9 項 :
ogg, wav, webworkers, webgl, datetimelocal, color, list, flexbox, generatedcontent

 參考資料 :

# Modernizer Documentation
# Dive Into HTML5 (電子書)
HTML5 Modernizr Tutorial
# Modernizr Features Detection Helper

誰是樋口一葉?

今天在新浪網看到一張圖片, 這是日本央行 2004 年新版日元面額 5000 元紙鈔上的圖像, 主角是 19 世紀末日本女性文學家樋口一葉, 有人把港星劉青雲的妻子郭藹明拿來對比, 很像對不對? 這裡有更多郭藹明照片, 真的越看越像. 郭藹明是我學生時代的偶像耶.

來源 : 新浪香港 (微博)

樋口一葉是日元紙鈔肖像中的第一位女性, 原名樋口奈津, 一葉是其筆名, 其作品偏古文, 量雖少但才華洋溢, 有現代紫式部美譽, 可惜 24 歲便死於肺結核.

「郭藹明」肖像印日本鈔票
# Wiki :  樋口一葉
日本紙鈔上的人物

2013年11月23日 星期六

乳品問題

商周這期刊出 "爭議" 專題 "牛奶駭人", 把乳品業者, 政府機關, 官員 "駭" 得雞飛狗跳.我同事說說, 如果這也不能吃, 那也不能吃, 那要吃什麼? "呷后死, 麥死某呷", 真達觀ㄚ. 但我想, 這種達觀其實就是典型的 "陪考式達觀". 據我觀察, 陪考的人都會安撫考生說, 緊張又不會加分, 幹嘛那麼緊張. 放輕鬆. 在台下聽簡報的同事也常安撫我, 就是上台講一講而已, 有什麼好緊張的? 好, 那不然你代替我上台好了. 這樣陪考式達觀馬上原形畢露, 哈哈哈.

現在 "平均每5分鐘48秒,就有一人診斷出癌症。" (見 : 台灣癌症發生率最新報告),  對於生病的看法, 通常活繃亂跳時都比較達觀, 而且內心堅信那不會是自己. 若生病的是自己, 平常說大話的恐怕達觀不起來吧. 對於食品安全與癌症的關係, 經過這麼多毒食品事件 (照龍應台說法, 還有很多沒被火燒到的), 我們能達觀嗎?.

至於農委會, 食藥署, 政府官員的官方說法, 我想, 現在全民都得老人癡呆症了嗎 (搞不好這也是食安問題)? 上回大統棉籽油事件這麼快就忘了? 官員的話若能聽, XX 都能吃了 (馬上檢測一下, 你該不會忘了 XX 是啥了吧?).

我只有一個想法, 在自助餐的菜裡發現鋼絲或蟑螂, 大家就受不了, 為什麼牛奶中出現抗生素避孕藥成分反而沒那麼激烈? 因為它看不到ㄚ. 你有本事看到嗎? 就算你看到了, 你有勇氣講嗎? 上回榮總檢驗深海魚含重金屬問題造成喧然大波後, 陪官員吃生魚片的畫面, 至今仍在我腦海中印象深刻. 總之, 資本主義的本質就是, 各行各業都要養家活口, 創造利潤, 只要沒人檢查, 機器檢查不出來, 管你去 X.

# 維基 : 乳牛

2013年11月22日 星期五

全真教三大祖庭

最近聽說大陸重拍神雕, 讓我想起以前看過劉亦菲演的版本, 或許新版會令人驚艷. 想到神雕就會想到活死人墓, 重陽宮, 跟全真教. 全真教道士在金庸筆下似乎很差勁, 其實在金, 元朝時代可是聲勢浩大的宗派, 重陽宮跟活死人墓不是金庸虛構的, 重陽宮在西安市戶縣.

《神鵰》曝光童年版小龍女 萌翻網友
全真三大祖庭
http://zh.wikipedia.org/wiki/%E5%85%A8%E7%9C%9F%E6%95%99

上馬英九臉書

今日看到 Yahho 新聞報導一位單親媽誤買到凶宅, 結果連主辦法拍的銀行都拒絕貸款, 唉, 雖然網路有凶宅網可查, 但窮人沒上網怎查? 現在規定房屋買賣要告知是否為凶宅, 這銀行辦理法拍時不用告知嗎? 這單親媽想說算了, 凶宅沒關係, 有房子住就行, 結果連拍房子給她的銀行也不貸款, 這到底是哪家銀行啊?

我突然心生一計, 去馬英九臉書留言看看, 雖然我對馬英九已經沒期待了, 也常批評, 但想說這家人太無助了, 所以看看有沒有點作用, 就去馬英九臉書留言.

# 買法拍凶宅銀行拒貸款 單親媽儲蓄泡湯
# 馬英九臉書

PS: 我覺得是沒啥鳥用. 馬英九臉書是取暖用的.

2013年11月21日 星期四

豆渣餅

每週四晚上菁菁去上科見後我都會用九陽豆漿機做豆漿 (上班前要先浸豆子),但剩下的豆渣丟掉又很可惜,放在冰箱又越堆越多,所以上週開始我就做完豆漿馬上將豆渣做成餅,好處是豆渣不用壓得很乾 (很花時間又費力),留些豆漿在裡面以免加麵粉後還要加水. 用平底鍋煎成餅滋味還不錯,除了他們下課回來吃幾塊, 剩下的就是我明日的早餐囉. 做法如下 :
  1. 豆渣加五湯匙低筋麵粉 (量剛好配九陽黃豆之豆渣), 三茶匙二砂糖, 一茶匙鹽, 加水攪拌, 水不要太多, 能將麵粉與豆渣和成糊狀即可.
  2. 平底鍋均勻滴些油, 將豆渣麵糊以湯匙舀起來放入鍋中成圓餅狀, 蓋上鍋蓋, 以小火煎五分鐘翻面續煎, 直到兩面都呈金黃色微焦即可.
我發現做餅光加糖不會好吃, 就是甜而已. 餅好吃的秘訣之一就是要酌量加些塩, 這樣就會有甘甜的滋味了.

 

網頁開發者最需要的速查表

今天看到這網站 "The best cheat sheets for web developers (網頁開發者最需要的速查表)", 裡面介紹了 PHP, ExtJS, jQuery, Javascript 等網頁開發常用語法之速查表, 非常實用. 要記的東西太多了, 寫程式時熊熊記不起來時, 谷歌當然是最方便的. 但若將速查表印出來, 壓在書桌玻璃下, 無聊時看一看, 腦海中就會比較清晰了.
我也發現 ExtJS 有一本新書出來 : Mastering Ext JS (Packt)

2013年11月19日 星期二

逐漸商業化接軌的 Arduino

這是今天在 Ctimes 上看到的一篇文章, 篇名如題. 摘要如下 :

  1. 2011年5月Google I/O盛會上,Google提出Android Open Accessory,期望廣泛業者發展支援Android的配件,Google並提供開發套件ADK(Accessory Development Kit),該套件即是基於Arduino平台所構成。
  2. Intel為了推行Quark選擇與Arduino合作,用Quark處理器為基礎開發出Galileo系統電路板,該電路板與Arduino相容,並執行Arduino的函式庫及Sketch描述語言(Script Language)。
  3. Google、Sony、Intel等大廠均擁抱Arduino,從某種角度看,Arduino正逐漸成為電子週邊(Peripheral)、智慧型配件(Smart Accessory)的主流共通平台,除了非常細膩、即時的控制外,多數電子功效均可透過Arduino來實現。

可見, 大廠都看到了 Arduino 的潛力, 雖然市場還未成熟, 但這時才是開始學習的契機啊. 全文詳見 :
逐漸商業化接軌的 Arudino

2013年11月16日 星期六

jQuery Mobile 測試 (一) : 環境佈置與頁面控制

jQuery Mobile 是針對 HTML5+CSS3 行動網頁應用 (mobile web ) 所推出的使用者介面框架 (UI framework), 相當於行動網頁上的 jQuery UI, 與 jQuery 搭配使用, 優雅地解決了行動網頁跨平台問題, 也使程式設計者不再為陽春的 UI 設計而煩惱. 與 PhoneGap 或 jsWaffle, Titanium 等搭配使用更能將行動網頁轉成 App 發布到 Google Play 或 App Store. 以下是關於 jQuery Mobile 的一些基本觀念 :
  1. jQuery Mobile 並不是行動版的 jQuery,  而是一個以 jQuery 框架為基礎, 用在行動裝置 (手機與平板) 上的跨平台使用者介面系統, 使用時仍然需要匯入 jQuery, 無法單獨使用. 它跟 jQuery UI 一樣都是屬於 UI 層的框架, 可以說是行動版的 jQuery UI. 
  2. jQuery Mobile 並不是一個行動 App 的 SDK, 以 jQuery Mobile 創建的行動網頁程式只能在瀏覽器中執行, jQuery Mobile 並無法將行動網頁編譯成原生的 App 程式, 要藉助 PhoneGap, jsWaffle 等框架與原生程式的 SDK 才行.  
以下一邊摘要整理 jQueryMobile 的用法, 一邊進行功能測試.

首先要佈置一下測試環境. 如果只是要建一個行動版網頁, 則使用者一定要連網, 這樣我們什麼都不須要下載, 只要利用 CDN 所提供的框架檔案即可, jQuery 與 jQuery Mobile 的官網都有提供最新的版本 (latest) :
  1. jQuery CDN :
    http://code.jquery.com/jquery-latest.js 
    http://code.jquery.com/jquery-latest.min.js (壓縮檔)
  2. jQuery Mobile CDN :
    http://code.jquery.com/mobile/latest/jquery.mobile.css
    http://code.jquery.com/mobile/latest/jquery.mobile.js
    http://code.jquery.com/mobile/latest/jquery.mobile.min.css   (壓縮檔)
    http://code.jquery.com/mobile/latest/jquery.mobile.min.js   (壓縮檔) 
我們只需要使用壓縮檔即可, 因為檔案比較小, 第一次存取網站時下載速度會比較快, 而且我們又不是要研究 jQuery Mobile 是怎麼寫的, 現在主要是研究怎麼用而已. 所以網頁的標頭可以這麼寫 :

  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js "></script>
  </head>

注意第二個 meta 標籤是一個 viewport, 用來宣告顯示內容時的寬度設定與縮放比設定. 其中 width=device-width 表示顯示的內容將佔滿整個螢幕寬度; 而 initial-scale=1 表示預設內容不縮放, 以 1 倍顯示. 如果網頁想禁止使用者縮放, 那麼 initial-scale 就設定為 no 即可.

如果我們將來要把行動網頁透過 PhoneGap 或 jsWaffle 轉成 App, 那麼就不適合使用 CDN 來匯入框架, 因為使用者不一定會連網, 如果要讓 App 離線也可以使用, 那就一定要自備框架檔案. 當然, 如果我們的 App 應用一定要連網才行 (例如有用到 Google Map), 那用 CDN 就行了. 如果要自備檔案, 直接在上面 CDN 的三個壓縮檔超連結上按滑鼠右鍵, 另存新檔到我們的專案目錄下即可 (注意, 它們都是 ANSI 編碼, 最好開啟後另存為 utf-8 格式). 網頁的標頭設定如下 :

  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link type="text/css" rel="stylesheet" href="jquery.mobile.min.css">
    <script type="text/javascript" src="jquery-latest.min.js"></script>
    <script type="text/javascript" src="jquery.mobile.min.js"></script>
  </head>

CDN 提供的框架檔案通常是最近的穩定版本, 如果要試用最新的開發版 (Alpha, beta 或 RC), 就要去 jQuery 官網jQuery Mobile 官網下載. jQuery 目前是 2.0.2 版, 可以在下載頁最底下找到 minified 的下載聯結, 只下載 jquery.js 檔即可, 不需下載 zip 檔. 而 jQuery Mobile 目前最新版是 1.3.2, 在其下載頁最底下也可以找到 js 與 css 檔的下載連結 :

# jQuery 2.0.2 (minified  js)
# jquery.mobile-1.3.2.min.js (full library, ready to deploy)
# Minified with Default theme: jquery.mobile-1.3.2.min.css (full library, ready to deploy)

在進行測試之前, 還需要準備一個測試工具, 那就是手機瀏覽器的模擬器. Chrome 本身就內建了這個模擬器, 在 Chrome 右上角有一個三條槓, 點一下在出現選單中選 "工具/開發人員工具", 這樣 Chrome 就會分裂成兩個框, 下半部右下角有一個齒輪, 按下去就會出現設定單, 在 General 項目中, 請務必勾選 Disable cache 這一項, 否則我們對網頁程式所做的改變可能無法馬上呈現 (因為都看到瀏覽器 Cache 的舊網頁), 如下圖 :


其次, 切到 Override 項目,  請勾選  Enable (啟動模擬器) 與 User Agent 這兩項, 選擇要模擬的瀏覽器, 例如 iPhone-iOS6,  再勾選 Device Metrics 後, 按 F5 重新載入網頁即可 :


詳細操作說明可以參考 香腸炒魷魚網站 的介紹. 或者可以安裝 Chrome 應用程式 Window Resizer :

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh

安裝後 Chrome 右上角三條槓控制按鈕左邊會出現一個按鈕, 點一下可以設定瀏覽器視窗大小 :


除了 Chrome 以外, Firefox 也有模擬手機瀏覽器的外掛, 但我建議下載 Opera Mible Emulator (需安裝), 因為這樣可以在獨立視窗測試, 不用去改 Chrome 設定, 而且 Opera 對 HTML5 的支援也不輸 Chrome.

jQuery 與 jQuery Mobile 框架檔案準備妥當後, 便可以撰寫 HTML5 檔案來測試  jQuery Mobile 所提供的功能了. 首先介紹 jQuery Mobile 的架構, 它採用 page view 方式來呈現行動網頁或 App 畫面, 並利用 HTML5 的 dataset 來控制 UI 的呈現. 如下為一單頁結構範例 :

   <section data-role="page">
      <header data-role="header">
        <h1>頁頭</h1>
      </header>
      <article data-role="content">
        <p>內容</p>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>

其中 section, article, header, footer 等標籤都有一個 data-role 屬性, jQuery Mobile 利用 HTML5 的 dataset 新規格, 制定了一系列的 data-xxx 屬性來為我們的原始網頁 "修改門面", 將原始網頁加上一堆樣式類別 (style class) 來把網頁改頭換面, 變成美美的行動網頁. Dataset 屬性是 W3C 在 HTML5 中訂定的客製化資料屬性 (custom data attributes), 允許我們為 HTML 標籤自訂屬性. 所以別誤以為 data-role 是 HTML5 的屬性, 那是 jQuery Mobile 所定義的.

注意, 不一定要使用 HTML5 的語意標籤, 如果把 HTML5 的語意標籤 section, header, article, footer 全部使用 div 也是可以的, 但一堆 div 會讓人看得眼花'撩亂, 所以還是採用語意標籤為宜.

以上將 jQuery Mobile 測試所需之環境安排好後, 便可用下列單頁範本開始測試其各項功能 :

單頁範本

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link type="text/css" rel="stylesheet" href="jquery.mobile.min.css">
    <script type="text/javascript" src="jquery-latest.min.js"></script>
    <script type="text/javascript" src="jquery.mobile.min.js"></script>
  </head>
  <body>
    <section data-role="page">
      <header data-role="header">
        <h1>頁頭</h1>
      </header>
      <article data-role="content">
        <p>內容</p>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
  </body>
</html>

關於此 template 架構有三點必須要注意 :
  1. 上述 header, content, footer 三段結構並非必要, 每一個都是 optional, 有些應用程式可能不需要 footer, 有的則 header 與 footer 都不需要, 端視功能設計而定.
  2. 屬性 data-role="page" 只有在多頁面時才需要, 在單頁情況下可以省略, 但在多頁情形下則一定要有, 否則會顯示全部頁面.
  3. jQuery Mobile 框架檔案必須在 jQuery 框架與自行撰寫的 Javascript 檔之後匯入. 
範例一就是上述單頁範本的實際測試連結 :

測試範例 1 : http://tony1966.xyz/test/jquerymobile/template.htm [看原始碼]

以 Opera 模擬器瀏覽結果如下圖, 與直接用手機瀏覽效果類似 :


如果用 Chrome 瀏覽, 這個 header 與 footer 會橫貫整個螢幕, 我們可以利用 Chrome 的 "工具/Javascript 控制台/Element" 來看看到底 jQuery Mobile 幫我們的原始網頁加了哪些料 :



可見原始網頁中多了許多的 ui class, 事實上 jQuery Mobile 是透過添加樣式類別, 添加元素以及事件三個方式來增強 (enhance) 網頁的 UI 運作. 從上面的單頁範本可知, jQuery Mobile 是以 data-role="page" 屬性來定義一個顯示頁面 (page view), 其內再用 data-role="header" 來定義頁面的頁頭, 用 data-role="footer" 定義頁尾, 而內容則放在 article 元素內, 其 data-role 設定為 content.

多頁控制

一個網頁應用可能需要兩個以上頁面來完成其功能, jQuery Mobile 支援在單一網頁檔案中嵌入多個頁面, 它採用以內部連結 # 為基礎的多頁面瀏覽系統 (hash-based navigation system), 利用 id 屬性與超連結的 hash 可以在多個頁面間切換, 因此每一個頁面都須指定 id 屬性來識別 :

    <section data-role="page" id="page1">
      <header data-role="header">
        <h1>第一頁</h1>
      </header>
      <article data-role="content">
        <a href="#page2">到第二頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>
   <section data-role="page" id="page2">
      <header data-role="header">
        <h1>第一頁</h1>
      </header>
      <article data-role="content">
        <a href="#page1">回第一頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>

實際測試如範例二 :

測試範例 2 : http://tony1966.xyz/test/jquerymobile/two-pages.htm [看原始碼]

範例二中, 原始網頁裡有兩個 section, 其 data-role 都是 page, 表示此網頁有兩個頁面容器 (page container), 其 id 分別為 page1 與 page2, 但是 jQuery Mobile 只會載入第一個 page 加以改造後顯示, 並且在 DOM 中儲存其參考 (此參考在行動網頁作用期間都會一直存在). 其他頁面都不會載入, 直到透過超連結被要求時才會被 jQuery Mobile 載入, 並加以改造後呈現, 成為 active page. 這時第一頁會被隱藏起來 (但不會被消滅). 我們必須在第一頁中擺放超連結或按鈕, 其 href 值設為 "#目的頁面之 id" 方式切換頁面, 例如前往 id=page2 之超連結要設為  href="#page2".



當瀏覽器載入網頁建立 DOM 樹後, jQuery Mobile 框架就會讀取並剖析原始網頁, 拜訪每一個具有 data-role 屬性的元素, 為其所有子元素套上跨平台行動網頁所需之 CSS3 樣式, 以增強 (enhance) 其 UI 效果 (也就是加料啦).

關於 jQuery Mobile 的多頁控制有下列三點要注意 :
  1. 當一個多頁面網頁文件載入時, 並不是整份文件中的所有頁面都被改造載入到 DOM 中, 而是只有第一個 page 會被 jQuery Mobile 改造後載入到 DOM 中顯示, 我們必須在第一頁中透過超連結的 href="#id" 來切換到其他頁面. 當切換到其他內部頁面時, jQuery Mobile 是以 Ajax 方式載入該頁面內容進行改造後加入到現有的 DOM 中, 並被 Cache 在 DOM 中以加快切換時的反應速度.
  2. 每一個視圖頁面都必須有獨一無二之 id 屬性, 利用 a 元素的 hash (#) 來切換內部頁面. 如果是切換到外部頁面, 則須指定檔案名稱, jQuery Mobile 會以 Ajax 方式讀取該外部網頁的第一頁, 加以增強後加入目前網頁的 DOM 中 (不是直接載入外部網頁), 例如 :
    <a href="file2.htm">到 file2 的第一頁</a>
    注意, 不能在網頁檔後面指定頁面 id, 例如 :
    <a href="file2.htm#page2">到 file2 的第二頁</a>
  3. 每一個頁面都可以載入 javascript 檔, 但其作用域 (scope) 只限於該頁面, 其他頁面無法存取此 Javascript 內的變數.
下面範例三與範例四我們來測試兩個網頁檔的頁面切換 :

測試範例 3 : http://tony1966.xyz/test/jquerymobile/file1.htm [看原始碼]
測試範例 4 : http://tony1966.xyz/test/jquerymobile/file2.htm [看原始碼]

上面的 file1.htm 與 file2.htm 內各有兩個內部 page, 每一頁中都有超連結用來切換到其他頁面, 其中可能有些不會動作, 分析如後.

如果用瀏覽器或模擬器開啟 file1.htm, 它會顯示第一頁, 透過超連結的 href="#page1-2" 就可以切換到第二頁, 這沒問題 :


    <section data-role="page" id="page1-1">
      <header data-role="header">
        <h1>file1.htm 第一頁</h1>
      </header>
      <article data-role="content">
        <a href="#page1-2">到第二頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>

在第二頁中有六個超連結, 按前三個 "回第一頁" 就會切回第一頁, 但做法有些不同, 第一個 a 元素用 #page1-1 指定頁面 id 切回; 第二個與第三個 a 元素使用 data-rel="back" 切回且有給 href="#", 有超連結底線, 其中第三個不給 href 屬性, 所以沒有超連結底線, 三個都能切回第一頁.


 第四個超連結 href="file2.htm" 是載入外部網頁, jQuery Mobile 會以 Ajax 方式載入 file2.htm 的第一頁, 並將其改造後加入 file1.htm 的 DOM 裡, 所以看起來像是原來的 file1.htm 被置換了, 事實上不然. 第五個超連結 href="#page2-2" 意圖指定載入 file2.htm 中的第二頁, 但這樣是不會切換的, 因為 jQuery Mobile 並不知道 page2-2 在哪. 即使指定檔名與頁面 id, 如第六個超連結 href="file2.htm#page2-2" 也是不會切換的, 因為 jQuery Mobile 只會載入外部網頁的第一頁.

    <section data-role="page" id="page1-2">
      <header data-role="header">
        <h1>file1.htm 第二頁</h1>
      </header>
      <article data-role="content">
        <a href="#page1-1">回第一頁</a><br>
        <a href="#" data-rel="back">回第一頁</a><br>
        <a data-rel="back">回第一頁</a><br>
        <a href="file2.htm">載入 file2.htm 第一頁</a><br>
        <a href="#page2-2">回 file2.htm 第二頁</a><br> (無動作)
        <a href="file2.htm#page2-2">載入 file2.htm 第二頁</a> (無動作)
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>

現在假定我們按第四個超連結, 這時 jQuery Mobile 會以 Ajax 載入 file2.htm 的第一頁並加入 file1.htm 的 DOM 中後切換至此頁, 但原來 file1.htm 的 page1-1 與 page1-2 仍然存在 Cache 中. 我們先看看 file2.htm 的第一頁內容 :

   <section data-role="page" id="page2-1">
      <header data-role="header">
        <h1>file2.htm 第一頁</h1>
      </header>
      <article data-role="content">
        <a href="#page2-2">到第二頁</a><br>  (沒作用)
        <a href="file2.htm#page2-2">載入 file2.htm 第二頁</a><br> (沒作用)
        <a href="#page1-1">回 file1.htm 第一頁</a><br>
        <a href="#page1-2">回 file1.htm 第二頁</a>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>

如下圖所示, 第一個 a 元素為 href="#page2-2" 意圖切換至 file2.htm 的第二頁, 但這不會動作, 因為目前 DOM 內容事實上是由 file1.htm 改造而來, 只是添加了 file2.htm 的第一頁 page2-1 在 DOM 中而已, 所以 jQuery Mobile 並不知道 page2-2 是啥東西. 在第二個 a 元素我們改用 href="file2.htm#page2-2" 指定載入 file2.htm 的 page2-2 仍然無作用, 不會切到 file2.htm 的第二頁, 如上所述, 這 DOM 目前是 file1.htm 的, 僅載入外部網頁的第一頁.


但第三個與第四個 a 元素按下去就會切回 file1.htm 中的 page1-1 與 page1-2 了, 原因是之前從 file1.htm 的第二頁切換到 file2.htm 的第一頁時, 這 page1-1 與 page1-2 被隱藏起來, 但仍存在 Cache 裡, 所以用 href="#page1-1" 與 href="#page1-2" 就可以回到 file1.htm 了.

以上載入 file1.htm 所做的測試結果顯示, 同一文件內的多頁可以自由切換無礙, 但若切換到外部文件, 那麼只能存取到其第一頁內容, 因為 jQuery Mobile 以 Ajax 讀取外部文件時, 它會去搜尋第一個具有 data-role="page" 的頁面容器 (div 或 section 等), 而忽略其他頁面.

現在反過來, 在瀏覽器或模擬器網址列載入 file2.htm (點上面的測試範例四), 這時會顯示其第一頁 (就是上面那張圖, 外觀完全一樣, 但效果不同), 裡面有四個連結, 其中第一個連結 href="#page2-2" 會切換到其第二頁, 第二個連結 href="file2.htm#page2-2" 也是沒問題, 可以切到自己的第二頁, 雖然這裡加了文件名稱 file2.htm, 但檢視 Chrome 的 Network 發現 jQuery Mobile 並沒有重新載入 file2.htm. 而第三個與第四個連結分別是意圖切換到 file1.htm 的第一頁與第二頁, 但皆無作用, 這是因為此網頁之 DOM 是由 file2.htm 文件建立, 裡面沒有 page1-1 與 page1-2 這兩個頁面之故, 存取外部文件需使用檔名 (而且只載入第一頁).

    <section data-role="page" id="page2-1">
      <header data-role="header">
        <h1>file2.htm 第一頁</h1>
      </header>
      <article data-role="content">
        <a href="#page2-2">到第二頁</a><br>
        <a href="file2.htm#page2-2">載入 file2.htm 第二頁</a><br>
        <a href="#page1-1">回 file1.htm 第一頁</a><br> (沒作用)
        <a href="#page1-2">回 file1.htm 第二頁</a> (沒作用)
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>

當 file2.htm 切到第二頁後, 顯示如下 :



其中有兩個連結, 第一個 href="#page2-1" 會切回自己的第一頁, 而第二個連結 href="file1.htm" 則是載入外部文件 file1.htm, 按此連結時 jQuery Mobile 會以 Ajax 方式載入 file1.htm 的第一頁, 經過增強後添加到目前的 DOM 中, 但這時按到第二頁就沒作用了, 因為 Ajax 只載入 file1.htm 的第一頁, 因此 jQuery Mobile 並不知道 page1-2 在哪裡.

    <section data-role="page" id="page2-2">
      <header data-role="header">
        <h1>file2.htm 第二頁</h1>
      </header>
      <article data-role="content">
        <a href="#page2-1">回第一頁</a><br>
        <a href="file1.htm">載入 file1.htm 第一頁</a><br>
      </article>
      <footer data-role="footer">
        <h3>頁尾</h3>
      </footer>
    </section>

從以上測試可知, 行動網頁若採用單一文件多頁面方式設計, 頁面切換完全由 jQuery Mobile 自動處理, 我們只要在連結上指定 hash 與 id 即可. 這方法好處是各頁面之間切換很快, 網頁載入後即使關閉連線, 網頁程式仍可運作, 缺點是第一次下載時比較費時 (特別是複雜之應用, 單一檔案包含非常多 page 時). 若採用多文件設計, 被載入的外部文件必須使用單頁面設計, 因為 Ajax 只會載入外部文件的第一頁, 其餘頁面都會被忽略. 此法好處是起始下載很快 (首頁不會很大), 缺點是切換頁面需要維持網路接續, 否則 Ajax 會失敗. 此外, 載入外部文件還要特別注意, 其頁面 id 不可以跟目前網頁中的各頁面相衝突.

下面範例五是多文件設計的例子, 由 main1.htm, page-a.htm, page-b.htm, 以及 page-c.htm 四個網頁文件組成, 每一個文件內都只有一個頁面, 裡面的超連結都要求載入下一個文件, 直到最後 page-c.htm 用 #main1 回到首頁 :

測試範例 5http://tony1966.xyz/test/jquerymobile/main1.htm [看原始碼]
                      page-a.htm 原始碼
                      page-b.htm 原始碼
                      page-c.htm 原始碼

如果打開 Google Chrome 的 "工具/Javascript 控制台/Network" 觀察, 可發現每點一次外部連結, jQuery Mobile 就用 Ajax 載入目的文件的第一頁, 並加入目前網頁的 DOM 之中 :


另外, 觀察 page-a/b/c.htm 的原始碼可以發現, 這三個檔案並未匯入 jQuery 與 jQuery Mobile 框架檔案, 為何仍能顯示正常的 UI? 原因是 jQuery Mobile 載入外部文件時, 僅僅是去搜尋第一頁的 data-role="page" 區塊, 加入到當前網頁之 DOM 中, 因此有沒有匯入框架都無所謂. 但是若它們被單獨拜訪時就無法顯示 jQuery Mobile 的 UI 功能了, 因此還是加上匯入框架的 markup 為宜.

下面範例六則是單文件設計的例子, 當走訪各頁時, 直接在 Cache 中找到目的頁面後更新 DOM, 因此反應速度較快, 而且在 Chrome 的 "工具/Javascript 控制台/Network" 中也不會出現 Ajax 的載入動作.

測試範例 6http://tony1966.xyz/test/jquerymobile/main2.htm [看原始碼]

在上面的頁面切換測試中, 可以發現頁面切換時具有動畫效果, 這是 jQuery Mobile 利用 CSS3 的 transition 屬性做出來的. 事實上, 它提供了六種切換動畫.

總結以上關於頁面的測試, 摘要如下 :
  1. 作為頁面容器之元素有兩種, 即 div 或 section 元素, 其 data-role 屬性須設為 page. 
  2. 對於 href="other.htm" 這樣的連結, jQuery Mobile 預設會以 Ajax 方式載入該外部網頁, 搜尋其第一頁內容予以增強後加入現在網頁的 DOM 中成為一個頁面, 並切換至此頁面. 但對於 href="#otherpage" 這樣的連結, jQuery Mobile 直接切換到指定頁面.

~未完待續~

2020-09-14 補充 :

在暫停多年之後最近突然對 Web app 設計有了興趣, 當然就用自己最熟悉的 jQuery Mobile 了, 搜尋資料時看到下面這篇值得參考 :

# 基於JQuery Mobile的Web App實踐

2013年11月14日 星期四

舊金山

報載 Apple 公司將在舊金山灣區 Cupertino 建立新總部, 讓我想起 2006 年底去舊金山受訓所拍的照片仍存在大硬碟中, 到現在已七年了都還沒時間整理沖洗, 該動手啦 (明天我可能就會忘記). 以前對此城毫無印象, 查了 GMAP 方知位置正好在山景城南方不遠處, 或許去優勝美地時有經過, 但沒下來逛.


七年變化實在很大啊, 當時參訪的 Nokia 如日中天, 如今卻兵敗如山倒, 高科技沒有不敗的企業, 看來只有低科技的企業較能長存, 這就是巴菲特不碰科技股的原因啊. 位於山景城的 Nokia 研究中心裡面設施很漂亮, 當時的副總裁林博士係台灣人, 待人非常和藹, 年紀輕輕就在矽谷創業, 後來陸續被 Notel, Nokia 購併, 擠身國際級企業經營者, 但如同其他幾位來自台灣的 Nokia 工程師一樣, 談到是否每年回鄉過節, 都有一股思鄉的無奈. 但是看現在的經濟與就業環境, 他們留在美國還是對的.

蘋果精益求精 百億美元拚研發

2013年11月13日 星期三

如何刪除 Aptana 上的 Project

今天早上發現  jsWaffle 產生的專案無法匯入 Aptana, 說 jsWaffleTeplate 這個專案已存在, 花了很多時間還是無法搞定, 我是從 "File/New/Project/Android/Android project from existing codes", 用 Browse 選取 jsWaffle 產生的專案目錄後, Finish 按鈕就是無法按 (disabled), 我把 Workspace 下的資料殺光還是一樣, 最後在下面這個網站找到解法 :

http://stackoverflow.com/questions/7017409/need-to-manually-delete-a-project-from-app-explorer





容忍的原因

今天收 email 看到如下故事 :

有一對父子坐火車外出旅遊,途中有位查票員來檢查乘客的車票,父親因為找不到車票而受查票員怒言以對。 事後,兒子就問父親,為什麼剛才不反目以對呢?父親說:「兒子,倘若這個人能忍受他自己的脾氣一輩子,為何我不能忍受他幾分鐘呢?

「幾分容忍,幾分度量,終必能化干戈為玉帛。」


Aptana Studio 教學網站

這幾天使用 Aptana 實在很不習慣, 專案匯入就是搞不定, 於是上網搜尋了一些教學文章, 其中 Yuxin 寫的很不錯, 值得參考 :
  1. 推薦Aptana Studio網頁開發者程式編輯軟體,專案功能、程式碼自動完成!
  2. 如何將Aptana Studio繁體中文化? (適用Eclipse)
  3. Aptana 技巧使用教學,自動完成、更換風格、支援jQuery、支援WordPress函數
  4. Aptana Studio 使用教學 – 下載、中文化、jQuery提示
  5. Aptana 使用入門

2013年11月10日 星期日

別笑北韓

這兩天因為蔣家第四代鬧了些新聞, 早已被台灣人民遺忘的蔣家, 又突然浮現. 今天剛好看了新浪這篇 "扶不起的蔣三世:李敖揭蔣家為何后繼無人", 讓我感嘆啊, 都說蔣經國晚年解嚴解除黨禁報禁, 是台灣民主的奠基者, 我當然覺得那是屁話 (因為我看過很多小蔣的黑資料啊). 蔣家沒能成為北韓金氏那樣的三代世襲王朝, 不是蔣經國要為台灣民主打下啥根基, 完全是人算不如天算. 所以別笑人家北韓, 如果不是蔣經國失算, 咱們台灣現在還在蔣總統領導之下呢.

而這一切, 都是 1984 年江南之死造成的. 把這些事件按年排列之後就會比較清楚了 :

1984 : 江南在美國被槍殺, 一個月後蔣經國發動一清專案掃黑 (推給黑道)
1985 : 美國驅逐國民黨特務, 蔣經國昭告, 蔣家人既不能, 也不會再主政
1986 : 蔣孝武被外放駐新代表, 解除黨禁, 馬可仕垮台, 流亡夏威夷
1987 : 蔣經國宣佈解嚴, 開放大陸探親
1988 : 解除報禁, 1 月 13 日蔣經國死亡

See? 這五年, 年年有新意, 蔣經國不希望蔣家人再涉足政治? 愛說笑, 那是莫可奈何啊. 馬可仕的下場讓他感受到一股涼意, 老美不是好惹的. 搞懂歷史, 就別再吹捧蔣經國了. 台灣民主的道路是江南的鮮血潑灑出來的啊.

參考 :
維基百科 : 蔣經國 江南案 臺灣省戒嚴令 馬可仕
蔣第四代嗆屠殺 蔣孝文傷人往事遭掀

2013年11月9日 星期六

使用 Aptana Studio + jsWaffle 開發 Android App

    設計行動網頁應用其實只要用 HTML5+CSS3+Javascript 就可以了, 如果加上 jQueryMobile 或SenchaTouch, 那麼使用起來感覺就跟安裝在手機或平板電腦內的 App 一樣了. 但問題是, 這樣的應用程式必須發佈到伺服器的網站, 而且使用者必須記住其網址, 每次要使用時必須連網到該網址才行. 所以對於不須連網或需要時才連網的應用程式而言, 把它打包成 App 安裝在行動裝置上會比較方便. 這種以 HTML5 為基礎的 App 稱為混合式應用程式 (hybrid) .
    將 HTML5 hybrid 應用程式轉成 App 的解決方案已有 PhoneGap, Titanium, jsWaffle 等, 各家功能比較如下表, 其中 Web 是指以網站形式運作之意. Titanium 僅支援 Android 與 iOS 兩大平台, 但著重於追求原生 App UI 的相似度; 而 PhoneGap 的跨平台支援數量多, 且可以使用 jQueryMobile 或 SenchaTouch 等函式庫. 而 jsWaffle 目前只限於 Android 平台而已.

 功能 Web jsWaffle PhoneGap Titanium
 震動X  O O O 
 錄音X O O  O 
 相機 X  O O O
 電子羅盤X O O O
 SD 卡存取X OX O 
 SQL 資料庫 X  OXO
 Google PlayX  O  O  O 
 瀏覽器測試O OOX
 免費授權使用O OOX


 跨平台支援
All Android
Android
iOS
Windows
BlackBerry
Symbian
Palm
Android
iOS

這個 jsWaffle 是日本 Aoikujira 公司開發的, 其主要功能是自動製作出 Android 應用程式雛型架構, 匯入 Aptana編輯好 HTML5 網頁程式後, 利用 Aptana 將 HTML5 網頁程式編譯成原生的 Apk 檔, 再發布到 Google Play 市集, 以下摘要整理其開發環境佈置與開發流程. 首先說明開發環境佈置, 因為 Aptana 是以 Eclipse 為基礎的, 因此安裝 JDK 是必要的. 以下是我今天實裝心得 :
  1. 安裝 JDK : 
    http://www.oracle.com/technetwork/java/javase/downloads/index.html

    JDK 是 Eclipse 家族之根本.
  2. 安裝 Aptana Stidio :
    http://www.aptana.com/products/studio3/download (150MB)
    預設是下載 standalone 版, 直接按下方藍色 Download 鈕就對了.
  3. 安裝 Android SDK :
    http://developer.android.com/sdk/index.html#download
    因為 Google 現在把 Eclipse 與 SDK 打包成 ADT Bundle, 如果已經下載 Bundle, 在 Aptana 裡設定 SDK 位置指向 Bundle 中的 sdk 目錄即可. 若不需要 Bundle, 那就單獨下載 Android SDK, 請點開 "USE AN EXISTING IDE" 就會出現 "Download the SDK tools for Windows" 鈕, 目前是 r22.3 版連結如下 :
    http://dl.google.com/android/installer_r22.3-windows.exe (84.7MB)
    這個 Android SDK 預設是安裝到 C:\ProgramFile\Android\android-sdk 目錄下, 安裝時也可以改為 C:\android-sdk 或 D:\android-sdk 較好記. 單獨的 SDK 裡面並沒有像 Bundle 那樣預載 最新的 Android API, 因此安裝完會自動彈出 API 下載列表, 勾選最新版 API 以及其他可能需要的版本 (例如我的手機還是 2.3.3 版, 為了實機測試, 所以我需要下載此版).
    下載 API 過程非常緩慢, 特別所選的版本較多時更慢 (睡覺前開始下載吧), 最好只挑選最新版下載, 以後有需要再下載其它版本. 這就是 Google 要推出 ADT Bundle 的原因了, 因為一下載完就可以馬上進行開發 (用最新版 API). 
  4. 在 Aptana 上安裝 ADT 插件 :
    事實上必須先安裝 JDT 再安裝 ADT, 因為 Aptana Studio 4.3.2 並未預載 JDT. 而安裝 ADT 必須要有 JDT 才行, 否則就會找不到檔案的錯誤 (dependence), 詳見 :
    Aptana Studio 安裝 ADT 的問題
    .
  5. 安裝 Adobe AIR :
    http://get.adobe.com/tw/air/

    因為 jsWaffle 是以 AIR 寫的, 所以需要安裝 AIR 才能執行 jsWaffle 安裝程式..
  6. 安裝 jsWaffle :
    http://code.google.com/p/jswaffle/downloads/list
    或 Aoikujira 公司官網 :
    http://d.aoikujira.com/jsWaffle/wiki/ (按 Download 後再按中央的 jsw 圓圖)
    請下載 jsWaffleForAndroid.air 檔安裝即可 (www.zip 是範例, 而 jsWaffle.jar 是 Java 版).
可參考 玩安卓 APP 之說明.

以上依序安裝完成後, 還有一個重要工作, 那就是幫 Aptana 設定 Android SDK 的位置. 打開 Aptana 就會出現一個錯誤提示, 說找不到 Android SDK :


按 Open Preference 鈕就會進入設定視窗 (也可以從 Window/Preference), 若 Android SDK 安裝在預設目錄, 則輸入 :

C:\ProgramFile\Android\android-sdk

如果有下載 ADT Bundle, 那就指定其解壓縮目錄下的 sdk 目錄即可, 如下圖 :


這樣就可以開始開發 App 了. 執行桌面的 jsWaffleForAndroid 如下圖 :


設定專案名稱, 套件名稱與輸出路徑後 (例如每本程式語言第一課必備的 HelloWorld), 按 MakeProject 鈕, 就會在輸出路徑下產出 Android App 的應用程式架構 :


這裡要特別注意, 輸出路徑如果不存在, 則會自動建立; 若已經存在, 那麼裡面全部內容含子目錄會被 jsWaffle 全部清乾淨, 再輸出所製作之 Android App 雛型檔案至該目錄下, 也就是原專案資料會完全被覆蓋掉.

接著開啟 Aptana, 點選 "File/New/Project", 在 New Project 視窗中打開 Android 項目 :


點選 "Android Project from Existing Code", 在 Import Project 視窗中, 按 "Browse" 鈕, 點選剛剛用 jsWaffle 產生的 App 模板所在目錄 D:\jsWaffle\HelloWorld :


這樣就會將模版匯入到 Aptana 了, 下面介紹如何修改此模板為顯示 "Hello World!". 點開左方 Package Explorer 中的樹狀結構之 "assets/www" 目錄, 就可以看到三個檔案 :


點其中的 index.html, 中間就會顯示網頁原始碼, 但這是 jsWaffle 的模板, 將其刪減成如下的 HelloWorld :


按功能列的 Run (或 Ctrl+F11) , 就會打開瀏覽器顯示結果, 按一下 "hi" 也會顯示 "Hello World!" 訊息窗 :


接著說明如何將此網頁程式轉成可上傳 Google PLAY 或在手機安裝之 APK 檔. 打開樹狀結構 res 目錄下的 AndroidMenifest.xml 檔, 第一個頁籤是一般設定如版本號碼 (Google Play 不允許同一 version code 再次上傳, 必須變更版本號碼), 這裡只需要把下方預設的 SD 卡存取取消掉 (按 Remove), 因為 HelloWorld 用不到 :



接著切到第三頁籤 Permission, 同樣因為用不到, 把這些全部權限 Remove 掉 :



然後點選 "File/Save" 將改好的 manifest 檔存檔, 再點選 "File/Export" 來輸出成 APK 檔. 請點選 Android/Export Android Application :


然後用 Browse 點選 Package 名稱 HellowWorld :



接下來是要設定 APK 簽章用的金鑰, 因為是第一次, 所以要選 "Create new keystore", 須輸入密碼兩次 :





最後按 Finish, 就完成 APK 輸出了 (112KB). 我用 Blue Stack 這個 Android 模擬器執行此 APK 結果如下, 大功告成 ! (不過是個簡單的 Hello World, 不知道在高興什麼)  :


如果使用 AVD 模擬器, 那速度真是慢到受不了.

APK 下載 http://mybidrobot.allalla.com/android/HelloWorld.apk
原始檔下載 http://mybidrobot.allalla.com/android/HelloWorld.zip

# BlueStacks 0.7.18 中文版 ~ MAC / Windows上 的 Android 系統模擬器

為了方便下載到手機實際安裝看看 (我直接在 HTC Desire S 手機打開 Blogger 點上面超連結卻沒下載), 所以利用中華電信 emome 的我的行動條碼製作了上面 APK 檔下載網址的 QR Code :

http://qrcode.emome.net/qrcpromote/QRDIYManager   (我的行動條碼)


下載完別忙著點 APK 檔安裝, 因為若沒有把 "設定/應用程式/未知的來源" 打開, 應該無法安裝成功, 如下圖所示要在 "未知的來源" 打勾才能安裝 (只要不是從 Google Play 下載的 APK, 包括從 USB 存入的, 都必須打開這選項~~申請 Google Play 要 25 美金ㄚ) :

# 參考 : 把APP安裝到手機裡


應用程式安裝執行結果跟模擬器幾乎一模一樣 :