PhoneGapでSencha Touchを使っためも

Javascript Android iPhone

PhoneGapでSencha Touchを使ったときに、PhoneGapのJavascriptブリッジを有効にする方法が少し特殊だったため、メモしておきます。あわせてSench(Ext JS)風味の書き方ものせておきます。

参考サイト

Sencha Touch
http://www.extjs.co.jp/
Sencha Touchドキュメント
http://www.extjs.co.jp/deploy/touch/docs/

Tutorial:A Sencha Touch MVC application with PhoneGap
http://www.sencha.com/learn/Tutorial:A_Sencha_Touch_MVC_application_with_PhoneGa

PhoneGap
http://www.phonegap.com/home/

概要

PhoneGapでは、onDevideReadyイベント後にJavascriptブリッジが有効になるため、以下のようにコーディングしていると思います。

  • body onloadに登録する例
<script type="text/javascript">
funciton onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
}
</script>
...

<body onload="onLoad();">
...
</body>


ただ、PhoneGapでSencha Touchを利用する場合、上記の方法ではうまくいかないようです。そのためここでは、PhoneGap.jpの初期化後にSencha Touchのアプリケーションクラスを初期化するにします。おおまかな手順は以下のようになります。

  • Sencha Touchのアプリケーションクラス(Ext.Application)の作成
  • onDevicereadyイベントでSencha Touchのアプリケーションクラスの初期化を行うコードを追加
  • Viewクラス(Ext.Panel)の作成
  • PhoneGapのJavascriptブリッジクラスを使ってみるクラスを追加

サンプルコード

Sencha Touchのアプリケーションクラス(Ext.Application)の作成

Sencha Touchのアプリケーションクラスを作成します。
view、controller、modelをサポートした、MVCアプリケーションとして利用できますが、ここではviewのみ設定します。

  • js/sample.js
/**
 * アプリケーションクラス登録
 */
Ext.regApplication({
    name: 'app',
    
    launch: function() {
        this.launched = true;
        this.mainLaunch();
    },
    mainLaunch: function() {
        console.log('start mainLaunch');
        if (!device || !this.launched) {return;}
        console.log('mainLaunch');

        // ページView生成。後の手順で宣言している「Ext.app.views.Viewport」です
        this.views.viewport = new this.views.Viewport();
    }
});

mainLaunchメソッドでdevice変数のチェックを行っていますが、スマートフォンのときのみ有効な変数です。デスクトップで動作の確認を行いたい場合は、この部分をコメントアウトすると動作します。

onDevicereadyイベントでSencha Touchのアプリケーションクラスの初期化を行うコードを追加

PhoneGapの初期化が終わってからSencha Touchのアプリケーションクラスを初期化します。

  • index.html
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="css/sencha-touch.css">
        <script type="text/javascript" charset="utf-8" src="js/sencha.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/phonegap.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/sample.js"></script>
        <script type="text/javascript">
            document.addEventListener("deviceready", app.mainLaunch, false);
        </script>
    </head>
    <body></body>
</html>

onDevicereadyイベントにapp.mainLaunchを登録します。

Viewクラス(Ext.Panel)の作成

ヘッダとフッダのパネルのあるページです。

  • js/sample.js
/**
 * View
 */
app.views.Viewport = Ext.extend(Ext.Panel, {
	tabletStartupScreen: 'images/startup.png',
	phoneStartupScreen: 'images/startup.png',
	icon: 'icon.png',
	glossOnIcon: false,

	initComponent: function() {
		var me = this;
		
		var panel = new Ext.Panel({	// Ext.Panelクラスを拡張する
			fullscreen: true,
			cls: 'cards',
			componentCls: 'bodycls',	// cssのclassを指定できる
			centered: true,
			layout: {
				type: 'vbox',
				align: 'stretch'
			},
			defaults: {
				flex: 1
			},
			html: [
				'<p>hello sencha touch</p>',
				'<button onclick="vibrate();">vibrate</button>'
			],
			// ツールバーなどのdock item定義
			dockedItems: [
			    {
					dock : 'top',
					xtype: 'toolbar',	// Ext.Toolbarクラスを指定
					title: 'HELLO SENCHA TOUCH',
					cls  : 'topcls',
			    },
			    new Ext.Toolbar({	// Ext.Tollbarを直接生成してもよい
					dock : 'bottom',
					title: 'copylight hoge',
					cls  : 'bottomcls',
			    }),
			],
		});
		
		// パネル構築
		panel.doComponentLayout();
	}
});


以下の部分がツールバーに囲まれた部分に表示されます。

			html: [
				'<p>hello sencha touch</p>',
				'<button onclick="vibrate();">vibrate</button>'
			],
PhoneGapのJavascriptブリッジクラスを使ってみるクラスを追加

PhoneGap APIのnavigator.notification.vibrateを使ってみます。


js/sample.js

/**
 * 振動
 */
Ext.app.Vibrate = Ext.extend(Object, {
    name: 'vibrate',
    vibrateCount: 0,
    vibrateTime: 0,
	
    constructor: function(config) {
        var me = this;
        Ext.apply(me, config);	// configのキーと値をインスタンスのフィールドとして設定する
    },

	play: function() {
		console.log("vibrate play");
		navigator.notification.vibrate(this.vibrateTime);
	}
});

/**
 * 振動呼び出し
 */
function vibrate() {
	var v = new Ext.app.Vibrate({'vibrateTime':200});
	v.play();
}

Ext.extendを使って、Objectの拡張クラスを作成します。Ext.applyを利用して、パラメータの設定を行います。
app.views.Viewportの以下の部分で呼び出しています。

<button onclick="vibrate();">vibrate</button>


以上です。起動すると、以下のように表示されると思います。