星期二, 6月 19, 2012

PhoneGap 教學 - Hello World (Android)

Photobucket

今天我們要來說明一下,

如何使用 PhoneGap來打包你使用 JavaScript、Html或是jQuery寫好的程式,


執行在Android上面。
(如果忘記了什麼是 phonegap ,需要複習的可以參考 : phonegap 介紹)


因為目前平台眾多,KT文章很難全面都顧到,


所以目前只舉例,執行在Android上面的例子,其實都一樣畫葫蘆。


其他平台如何使用PhoneGap,


可以參考PhoneGap 官網的 Getting Started Guides (V1.8.1)






PhoneGap (Android) 開發環境:


1. Eclipse Classic  (建議: 3.4以上)
2. Android SDK    (建議: 2.2以上 )
3. ADT Plugin       (目前KT是用18.0.0)
4. Cordova            (目前KT是用1.8.1)

以上4項軟體,理論上缺一不可,^_^ 放心~都是開放式免費下載。

安裝好之後,我們就可以開啟 Eclipse 編輯程式軟體,新建一個 Android 專案。

New > Android Project
Photobucket

輸入專案名稱:「HelloPhoneGap」(^_^ 隨你意)
Photobucket

選擇Android版本:「Android 2.2」(^_^ 隨你意)
Photobucket

輸入套件名稱:「twhkt.demo.hellophonegap(^_^ 隨你意),然後點選Finish (完成)。
Photobucket

再來我們可以將注意力放到「Package Explorer」上,


Photobucket

點選此專案 「HelloPhoneGap」的根目錄,新增兩個資料夾:
  • /libs
  • assets/www
完成之後可以再根目錄底下看到:
Photobucket

再來是將之前 Cordova下載下來的壓縮檔給解開,
壓縮檔內的\lib\android裡面的
1. 「cordova-1.8.0.js」  複製到此專案 assets/www 底下
2. 「cordova-1.8.0.jar」 複製到此專案 /libs 底下
3. 「xml目錄含檔案」  複製到此專案 /res底下

Photobucket

然後右鍵點選 「/libs」 資料夾,「Build Paths/ > Configure Build Path.... 」Photobucket

然後點選「Add JARs...」,
加入路徑指到此專案 /libs 底下的「cordova-1.8.0.jar」,
完成後即可以看到Build Paths底下增加了一個cordova-1.8.0.jar,即可按OK。
Photobucket

開啟此專案src目錄底下的 HelloPhoneGapActivity.java檔,
1.匯入: 「import org.apache.cordova.*;」
2.Activity 更改為「 DroidGap」
3.刪除 setContentView() 此行程式
4.加入「super.loadUrl("file:///android_asset/www/index.html");」

程式碼更改如下:
package twhkt.demo.hellophonegap;

import org.apache.cordova.*;//1.匯入cordova
import android.app.Activity;
import android.os.Bundle;

public class HelloPhoneGapActivity extends DroidGap {  //2.Activity 更改為「 DroidGap」
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        //setContentView(R.layout.main);//3.刪除此行程式
        super.loadUrl("file:///android_asset/www/index.html");//4.加入此行程式
    }
}


開啟「AndroidManifest.xml」<uses-sdk.../> and <application.../>標籤裡加入:













 


<activity>裡加入

android:configChanges="orientation|keyboardHidden"

然後在此專案assets/www的目錄底下新增一個空白的index.html,加入底下程式碼:

<!DOCTYPE HTML>
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.8.0.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
在此專案 「HelloPhoneGap 」按右鍵,Run As > Android Application,

即可將此html程式包裝成Android的程式發佈。

執行結果:
Photobucket

範例程式碼下載:


相關文章:
jQuery 教學目錄

1 則留言 :

  1. 下載您的程式碼下來看,HelloPhoneGapActivity.java這個檔案有錯誤耶
    我也是這個檔案一直有錯 跑不起來...
    請問是什麼原因呢??謝謝~

    回覆刪除

回覆意見時,麻煩輸入一下暱稱
(隨便取個名字也好~ ^_^)
好讓我方便回覆您的問題,
選擇「名稱/網址」輸入您的暱稱,
麻煩一下,謝謝大家。

關閉廣告 [X]