2015年4月4日 星期六

Processing環境設定

Processing是由MIT Media Lab的Ben Fry與Casey Reas於2001年所共同開發的,並於2005年獲得Prix Ars Electronica的Golden Nica (Net Vision/Net Excellence) 大獎。Processing定位在電子藝術與視覺互動設計,Processing建立在Java的基礎上,但使用更簡化的語法。

jQuery Mobile應用程式與一般的HTML網頁程式不同,HTML網頁不需Web Server則可直接在本機電腦以瀏覽器執行,但jQuery Mobile應用程式必須在Web Server環境才能正常執行。模擬用的Web Server有很多免費的軟體,其中XAMPP可以說是其中的佼佼者,XAMPP為Apache+MySQL+PHP +Perl之縮寫,因此其中XAMPP亦支援MySQL, PHP, Perl之執行。

XAMPP安裝程式可至 https://www.apachefriends.org 下載,目前版本為5.6.3,支援Microsoft Windows, Mac OS X, Linux等作業系統,以Microsoft Windows作業系統為例,自XAMPP網站下載XAMPP安裝程式 (xampp-win32-5.6.3-0-VC11-installer.exe) 之後,直接執行安裝程式,其中安裝目錄選擇預設目錄C:\xampp,待安裝完成之後,安裝程式將詢問是否啟動XAMPP Control Panel,如下圖所示,勾選選項並按「Finish」按鈕,則完成安裝並啟動XAMPP Control Panel。

XAMPP Control Panel如下圖所示,預設支援Apache, MySQL, FileZilla, Mercury與Tomcat服務,jQuery Mobile應用程式需以Apache執行,因此點選Apache服務右側的「Start」按鈕則可啟動Apache服務。
啟動Apache服務時,將出現以下之防火牆警告訊息,分別依需求,勾選「私人網路」或「公用網路」選項,並點選「允許存取」按鈕則完成XAMPP之設定。
為執行jQuery Mobile,需自 http://jquerymobile.com 網站下載jQuery Mobile套件,目前版本為1.4.5,檔案包括:
  • jquery.mobile-1.4.5.min.css
  • jquery.mobile-1.4.5.min.js
此外,並需要jQuery電腦版之JS檔案,可自 http://jquery.com 網站下載,例如jquery-2.1.0.min.js。其中檔案名稱含有「min」,代表此檔案經過壓縮處理,較沒有「min」字樣的檔案為小,因此下載與匯入時間較短。

接著在XAMPP的安裝目錄C:\xampp\htdocs下建立一目錄如mobile,並在mobile目錄下分別建立css與js目錄,將上述之jquery.mobile-1.4.5.min.css複製至css目錄下、jquery-2.1.0.min.js與jquery.mobile-1.4.5.min.js複製至js目錄下,如此則完成jQuery Mobile的環境設定。

為測試是否安裝正確,接著在C:\xampp\htdocs\mobile目錄下建立一index.html網頁,其內容如下:

...
黃嘉輝教學網站 






...
  

...
內容基本上類似於一般的HTML網頁,但為能執行jQuery Mobile,因此在網頁標題 (Head) 部份加入上述之css與js檔案設定:
黃嘉輝教學網站 






...
【執行結果】

欲執行上述程式,可使用平版電腦或智慧型手機的瀏覽器執行http://<主機IP Address>/mobile/index.html,以下為以Apple iPad平版電腦執行的結果:
以下為以Android智慧型手機執行的結果:
【參考資料】

[1] XAMPP:https://www.apachefriends.org
[2] jQuery Mobile:http://jquerymobile.com
[3] jQuery:http://jquery.com

© Chia-Hui Huang

沒有留言:

張貼留言