Free Writing

6月 26TH, 2010
By ISPERN

Sencha Touchを試してみた

先週ですが、Sencha Touchのベータ版がリリースされましたね。

Introducing Sencha Touch: HTML5モバイル用フレームワーク
 先週の2つの発表（SenchaとSencha Touch）の件について

ということで早速、触ってみました。
Hello Worldが表示される簡単なページを作りました。
下の様な画面です。

ソースコード

Ext.setup({
	// apple-mobile-web-app-capableの設定
	fullscreen: true,

	// ホーム画面に登録された場合のアイコン設定
	icon: 'icon.png',

	// iPadからアクセスした場合のスプラッシュ画像
	tabletStartupScreen: 'tablet_startup.png',

	// iPhoneからアクセスした場合のスプラッシュ画像
	phoneStartupScreen: 'phone_startup.png',

	// アイコンの光沢効果を無効
	glossOnIcon: false,

	// ステータスバーを半透明表示
	statusBarStyle: 'black-translucent',

	// onReady
	onReady: function() {
		new Ext.Panel({
			fullscreen: true,
			html: 'Hello Sencha Touch',
			dockedItems: [{
				xtype: 'toolbar',
				ui: 'dark',
				dock: 'top',
				items: [{
					xtype: 'button',
					text: 'Back',
					ui: 'green'
				}]
			}]
		});
	}
});

サンプルではExt.setupでページの起動設定、onReadyプロパティではExt.Panelを生成しています。

サンプルを実行

Ext.setup

Ext.setupはページの起動設定をするメソッドです。以下のプロパティが指定できます。
（試しながら確認したのでたぶんあっているハズ･･･）

fullscreen：trueにすると、apple-mobile-web-app-capableが有効になる。
tableStartupScreen：フルスクリーン表示時のスプラッシュ画像を指定。iPad用。
phoneStartupScreen：フルスクリーン表示時のスプラッシュ画像を指定。iPhoneやiPod Touch用
statusBarStyle：フルスクリーン表示のときのステータスバー（時計とかバッテリーとか表示されているバー）の表示を指定。”black”（黒）と”black-translucent”（半透明）が指定できる。
icon：ページをホーム画面に追加したときのアイコンを指定。このプロパティで設定されたアイコンはデバイス共通で使用される。
tabletIcon：iPad用のアイコン設定
phoneIcon：iPhone、iPod Touch、Android用のアイコン設定
glossOnIcon：アイコンに光沢効果を適用するか
preloadImages：事前にキャッシュしておきたい画像ファイルを配列で指定
onReady：セットアップ完了後に実行される関数
scope：onReadyの実行スコープ