2012年3月12日 星期一

【Cordova】環境配置與範例

Cordova 的前身是PhoneGap，但是在前陣子已經將PhoneGap捐給Apache基金會了

並命名為Cordova。以下我以Cordova在Android環境上建立一個簡單的HTML範例

首先先到 http://phonegap.com/download/ 這是PhoneGap的官網下載 library

目前最新版是1.5.0，但是下載下來並解壓縮之後的JAR檔案名稱已經更改為 cordova.jar 了

首先先依照下面步驟建立範例程式

前提是你必須已經具備Android得開發環境，包括Eclipse。Android環境配置

建立Android專案

File > New > Android Project > 輸入專案名稱 > 選擇SDK (這裡我是用Android 3.2)

> 設定package name > Finish

完成之後，就可以來配置Cordova的環境

1. 在專案目錄下建立libs的目錄
2. 在assets目錄下建立www目錄

首先先將下載並解壓縮完成的檔案開啟，並找到以下目錄

\phonegap-phonegap-1.5.0-0-gde1960d\phonegap-phonegap-de1960d\lib\android\

將cordova-1.5.0.jar放到 libs目錄下，並對專案右鍵 > Properties >

如下圖選擇 Add JARs 並找到剛剛專案的 libs目錄內的cordova-1.5.0.jar




















完成之後在到剛剛這個目錄中

\phonegap-phonegap-1.5.0-0-gde1960d\phonegap-phonegap-de1960d\lib\android\

找到 cordova-1.5.0.js 將這個檔案放到專案的 assets/www/目錄下

接著同樣在剛剛那個目錄中找到一個 xml 的資料夾將它複製到

專案的 res目錄下。　　　　目前專案應該是長這個樣子的：























接著要更改你的專案的Acitvity，以下是我的Acitvity ：PhoneGapDemoActivity


將你的Activity繼承

org.apache.cordova.DroidGap

並新增如圖中的最後一段程式，

用意是在讓你的專案啟動之初就

載入你等等要寫的一個html網頁



接著必須要修改一下AndroidManifest.xml

首先加入這一段

    <supports-screens
         android:largeScreens="true"
         android:normalScreens="true"
         android:smallScreens="true"
         android:resizeable="true"
         android:anyDensity="true"
     />


以及這段


<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />


最後在你本專案的主Activity的配治中加入這行
android:configChanges="orientation|keyboardHidden"

完整的細節如下：

<activity
       android:name=".PhoneGapDemoActivity"
       android:label="@string/app_name" >
       <intent-filter>
           <action android:name="android.intent.action.MAIN" 
                   android:configChanges="orientation|keyboardHidden"/>
           <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
</activity>


接著在新增如下這段：

<activity android:name="com.phonegap.DroidGap" android:label="@string/app_name"
                 android:configChanges="orientation|keyboardHidden">
      <intent-filter>
      </intent-filter>
</activity>


到這邊總結一下剛剛新增與修改的部分應該會如下圖：























最後我們在專案目錄下的assets/www/中建立一個 index.html

內容如下


<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" src="cordova-1.5.0.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>


如果要解決中文亂碼問題可以在 head標簽中加上如下這段meta標籤

<meta http-equiv="Content-Type" content="text/html; charset=big5"/>
張貼者： 於
標籤： ,

3 則留言:

  1. episold2012年3月14日 下午4:30

    感謝！比官方的starting guide有用多了

    回覆刪除
  2. 阿陶2012年3月16日 凌晨2:16

    請問我把AndroidManifest.xml修改好後
    明明一模一樣 我卻會出現以下訊息

    The prefix "android" for attribute "android:largeScreens" associated with an element type "supports-screens" is not bound.

    回覆刪除

訂閱： 張貼留言 (Atom)