chapi plus: phonegap+admob+plugin

這些天在搞這個東西...記錄..啊不! 分享一下:D
=====第一步建立 phonegap========
首先先來去找PHONEGAP的SAMPLE
※去官網http://www.phonegap.com/ DOWNLOAD，裡面會有各種OS的LIB跟SAMPLE~直接拿SAMPLE來改比較快~
※目前PHONEGAP版本1.1.0
※版本我習慣選2.3.3

※一開始載入SAMPLE專案的時後會發現有很多ERROR~原因是沒有把phonegap JAR加進LIB裡
點擊專案右鍵選最下面的properties，然後左側選單選JAVA BUILD PATH，點ADD JARS
可以在同專案的LIBS底下找到PHONEGAP1.1.0.jar,加進來就OK了。
如果遇到找不到R 這個CLASS，請CLEAN一下PORJECT就行了。
緊接著可以看到assets/www/底下有sample的index.html跟main.js、master.css 很實用，大家可以自已玩玩看~
不過在這裡不需要這些東西~所以我把main.js,master.css砍掉把index.html改成下面這樣陽春的 hello world~


<html>
  <head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap</title>
   <script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
  </head>
  <body>
    <h1>Welcome to PhoneGap!</h1>
  </body>
</html>

畫面會像這樣~

好了!到了這裡我相信大家已經會使用phonegap了!

=====第二步加入plugin========
接下來是plugin的部份

1.打開 res/xml/plugins.xml 再最下面加入<plugin name="AdMob" value="com.phonegapPlugin.AdmobPlugin">

2.點擊專案右鍵選new一個class，class的name打上 AdmobPlugin, package 打上 com.phonegapPlugin
AdmobPlugin.java的code如下


package com.phonegapPlugin;

import android.widget.Toast;
import com.phonegap.api.Plugin;
import com.phonegap.api.PluginResult;
import com.phonegap.api.PluginResult.Status;
import org.json.JSONArray;

public class AdmobPlugin extends Plugin {
private static final String INIT_AD_ACTION = "init_ad";
private Toast toast = null;
@Override
public PluginResult execute(String pluginAction, JSONArray data, String callbackId) {

if (pluginAction.equals(INIT_AD_ACTION)) {

this.ctx.runOnUiThread(new Runnable() {
@Override
public void run() {
toast = Toast.makeText(ctx, "plugin", Toast.LENGTH_LONG);
toast.show();
}
});
} 
return new PluginResult(Status.OK);
}
}

3.在/assest/www/底下加入一支phonegap-admob.js
phonegap-admob.js的code如下


/*global PhoneGap*/
var AdMob = function() {
};

AdMob.prototype.init_ad = function(win, fail) {
PhoneGap.exec(win, fail, "AdMob", "init_ad", []);
};

navigator.admob = new AdMob();

4.修改index.html如下


<title>PhoneGap</title>
<script charset="utf-8" src="phonegap-1.1.0.js" type="text/javascript">
</script>
<script charset="utf-8" src="phonegap-admob.js" type="text/javascript">
</script>


</plugin>
<h1>
Welcome to PhoneGap!</h1>
<button onclick="navigator.admob.init_ad();">init admob</button>

ok 大功告成~
整個專案結構會像是這樣~

執行的畫面

※附上我參考plugin的code https://github.com/m00sey/Toasty

=====第三步加入 admob========
1.加入admob sdk 請上admob官網註冊~http://zhtw.admob.com/，
下載完後點擊專案右鍵選最下面的properties，然後左側選單選JAVA BUILD PATH，點Add external JARs加入
2.修改AndroidManifest.xml，加入
<activity android:configchanges="keyboard|keyboardHidden|orientation" android:name="com.google.ads.AdActivity">
看起來會像是這樣

3.修改AdmobPlugin.java


package com.phonegapPlugin;

import android.view.ViewGroup.LayoutParams;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.FrameLayout;
import com.google.ads.AdRequest;
import com.google.ads.AdSize;
import com.google.ads.AdView;
import com.phonegap.api.Plugin;
import com.phonegap.api.PluginResult;
import com.phonegap.api.PluginResult.Status;
import org.json.JSONArray;

public class AdmobPlugin extends Plugin {
AdView adView;
private static final String INIT_AD_ACTION = "init_ad";
@Override
public PluginResult execute(String pluginAction, JSONArray data, String callbackId) {

if (pluginAction.equals(INIT_AD_ACTION)) {

this.ctx.runOnUiThread(new Runnable() {
@Override
public void run() {

adView =new AdView(ctx,AdSize.BANNER,"填入你的admob PUBLIC id");
AdRequest request=new AdRequest();
request.setTesting(true);//這一句是測試用的~假如你沒申請admob可以先加上這一句做測試，記得真的要發布的時後 記得要拿掉 不然錢進不來哦~
adView.loadAd(request);

FrameLayout.LayoutParams adsParams =new FrameLayout.LayoutParams(FrameLayout.LayoutParams.WRAP_CONTENT, FrameLayout.LayoutParams.WRAP_CONTENT);
ctx.addContentView(adView, params);
}
});
} 
return new PluginResult(Status.OK);
}
}

成功畫面

※10/24更新廣告位置做法 FrameLayout FrameLayout.LayoutParams(FrameLayout.LayoutParams.WRAP_CONTENT, FrameLayout.LayoutParams.WRAP_CONTENT, android.view.Gravity.BOTTOM); 這樣是放在最底下

chapi plus

2011年10月18日星期二

phonegap+admob+plugin

沒有留言:

張貼留言

2011年10月18日 星期二

phonegap+admob+plugin

沒有留言:

張貼留言

2011年10月18日星期二