Sencha Touchメモ – Ext.TabPanel -

Sencha Touch をちまちま触っています。
Sencha Touch を始めようや Sencha Touch Examples を参考に、いろいろとAPIを試している所です。

少しずつ覚えた事を載せていければな～と思います。

まずは、Ext.TabPanelです。

ソースコード

Ext.setup({

	// onReady
	onReady: function() {
		new Ext.TabPanel({
			fullscreen: true,

			// TabBarの設定
			tabBar: {

				// タブを上部に配置
				dock: 'top',

				// スタイル設定
				ui: 'dark',

				layout: {

					// タブを中央寄せ
					pack: 'center'
				}
			},

			// Tab切り替えのアニメーション
			animation: 'slide',

			// 各Panelのデフォルト値設定
			defaults: {

				// スクロールを縦スクロール
				scroll: 'vertical'
			},
			items: [{
				title: 'About',
				html: '
About Page

',
				iconCls: 'info',
				cls: 'card1'
			},{
				title: 'User',
				iconCls: 'user',
				html: '
User Page

',
				cls: 'card2'
			}]
		});
	}
});

プロパティの説明

上記サンプルのTabPanelで使ったプロパティです。
tabBar プロパティでタブの設定、animation プロパティでタブ切り替えのアニメーション、
items プロパティで表示するコンポーネントをそれぞれ指定しています。

Ext.TabPanelのプロパティ

Ext.TabBarのプロパティ

実行

以下のリンクからサンプルを実行できます。
Firefoxだとレイアウトがかなり崩れますが、Google Chromeだと綺麗に見れます。
dock が top の場合
dock が bottom の場合

jsdo.itにも載せてみました。
Sencha Touch – Ext.TabPanel – - jsdo.it

使ったAPIのリンク

Sencha Touch API Documentation – Ext.TabPanel -
Sencha Touch API Documentation – Ext.TabBar -
Sencha Touch API Documentation – Ext.Panel -

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の実行スコープ

所感

簡単にモバイル用のページが作れるのが、単純に楽しいです。

ネイティブアプリの知識なくてもSencha Touchを使えば、
基本的なHTMLやJavaScript、CSSの知識だけで
ネイティブアプリちっくなページが作れるなぁと。

Ext Japanのブログで、Sencha Touch を始めようが公開されているので
次はこれを試してみます。

xtypeにcontainerを指定した場合の描画速度

先週、ExtJS勉強会 に行ってきました。
その中で小堤さんがパフォーマンス向上のテクニックについて
紹介されていたのでそれを試してみました。

内容は･･･

大枠のパネルの中にカラムレイアウトなどでテキストフィールドとか
フォームのアイテムのレイアウトを行う場合は、”container”を指定すると
パフォーマンスが向上する

という内容です。

詳しい内容については、小堤さんのブログで紹介されています。

サンプルソース

ソースは、フォームレイアウトの中にfieldsetを入れて、
さらにカラムレイアウトの中にテキストフィールドを4つ入れたセットを100個配置しているサンプルです。
それぞれ、カラムレイアウトとフォームレイアウトにcontainerを指定する場合と指定しない場合での
描画時間をアラートで表示します。
時間測定ってこんなので良いのだろうか･･･。

Ext.onReady(function() {
	Ext.BLANK_IMAGE_URL = 'http://extjs.cachefly.net/ext-3.2.0/resources/images/default/s.gif';
	Ext.QuickTips.init();

	var start = new Date().getTime();

	var form = new Ext.Panel({
		renderTo: Ext.getBody(),
		title: 'FormPanel - Speed Test2 -',
		layout: 'form',
		width: 800,
		height: 600,
		padding: '20',
		autoScroll: true,
		items: [{
			xtype: 'fieldset',
			title: 'fieldset',
			items: [{
				layout: 'column',
				xtype: 'container',
				items: [{
					columnWidth: '.50',
					layout: 'form',
					xtype: 'container',
					items:[{
						xtype: 'textfield',
						fieldLabel: 'Sample1'
					},{
						xtype: 'textfield',
						fieldLabel: 'Sample2'
					}]
				},{
					columnWidth: '.50',
					layout: 'form',
					xtype: 'container',
					items:[{
						xtype: 'textfield',
						fieldLabel: 'Sample3'
					},{
						xtype: 'textfield',
						fieldLabel: 'Sample4'
					}]
				}]
			}]
		}

		・
		・
		・

	});

	var end = new Date().getTime();
	alert((end-start)/1000);
});

実行結果

containerを指定しない場合

containerを指定した場合

※ブラウザが固まるので注意して下さい！！

Core2 2.0GHzのchromeで7秒くらい違いました。
フィールドを100個も配置する様な画面は無いと思いますが。。。
IE6とか遅い環境だともっと早くなるでしょうね。
それよりもなによりも、ボーダーとか背景とか無駄な描画がされないことが嬉しいです。
フォームアイテムのレイアウトに限らず、Panelの中にPanelを入れたりする場合は多々あるので、
その時にボーダーが重なったりしないのは嬉しいです。
まさに一石二鳥。

Ext JS – Ext.tree.TreePanel その2 -

今回はTreePanelに表示するTreeNodeをサーバからJSON形式で取得するサンプルです。

TreePanel2.html

<html>
	<!-- head -->
	<head>
		<!-- content-type -->
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta http-equiv="content-script-type" content="text/javascript" />
		<meta http-equiv="content-style-type" content="text/css" />
		<!-- /content-type -->
		<!-- Title -->
		<title>ExtJS Examples - TreePanel2 -</title>
		<!-- /Title -->

		<!-- Ext JS -->
		<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.0/resources/css/ext-all.css" />
		<!-- /Ext JS -->

		<!-- Ext JS -->
		<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/adapter/ext/ext-base.js" charset="utf-8"></script>
		<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/ext-all.js" charset="utf-8"></script>
		<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/src/locale/ext-lang-ja.js" charset="utf-8"></script>
		<!-- /Ext JS -->

		<!-- App -->
		<script type="text/javascript" src="../../src/Panel/TreePanel2.js" charset="utf-8"></script>
		<!-- /App -->
	</head>
	<!-- /head -->
	<!-- body -->
	<body style="margin: 20 0 0 30;">
	</body>
	<!-- /body -->
</html>

TreePanel2.js

Ext.onReady( function() {
	Ext.BLANK_IMAGE_URL = 'http://extjs.cachefly.net/ext-3.2.0/resources/images/default/s.gif';
	Ext.QuickTips.init();

	// rootのツリーノードを生成
	var root = new Ext.tree.AsyncTreeNode({
		text: 'forum',
		leaf: false
	});

	var treePanel = new Ext.tree.TreePanel({
		title: 'Tree Panel',		// PanelのTitleを指定
		renderTo: Ext.getBody(),	// 表示する要素を指定
		width: 225,					// 幅
		height: 200,				// 高さ
		minSize: 150,				// 最小の幅
		maxSize: 300,				// 最大の幅
		rootVisible: false,			// rootのツリーノードを表示するか
		root: root,					// rootのツリーノードを指定
		loader: new Ext.tree.TreeLoader({
			url: '../../data/TreePanel.json'	// 取得元URLを指定
		})
	});
});

TreePanel.json

[{
	text: 'friend',
	leaf: false,
	children: [{
		text: 'taro',
		leaf: true
	},{
		text: 'hanako',
		leaf: true
	},{
		text: 'jiro',
		leaf: true
	}]
},{
	text: 'work',
	leaf: true
}]

実行結果

Ext.tree.TreePanelのサンプル

Ext.tree.TreeLoaderをTreePanelのプロパティで指定しています。
TreeLoaderでは、取得元URLを指定しています。

TreePanel.jsonでは、Ext.tree.TreeNodeを生成する際のコンフィグを
JSON形式の配列で記載しています。
TreeLoaderが指定されたURLからTreePanel.jsonを取得し、
内部でExt.tree.TreeNodeを展開するノードに追加してくれます。

Ext JS -Ext.tree.TreePanel-

社内学習の一環として、Ext JSを使って掲示板を作成しています。

メモレベルですが、備忘録として残しておきたいと思います。

まずは、Ext.tree.TreePanelです。
Ext.tree.TreePanelでは、ツリービューを表示するためのクラスです。

TreePanel1.html

<html>
	<!-- head -->
	<head>
		<!-- content-type -->
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta http-equiv="content-script-type" content="text/javascript" />
		<meta http-equiv="content-style-type" content="text/css" />
		<!-- /content-type -->
		<!-- Title -->
		<title>ExtJS Examples - TreePanel1 -</title>
		<!-- /Title -->

		<!-- Ext JS -->
		<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.0/resources/css/ext-all.css" />
		<!-- /Ext JS -->

		<!-- Ext JS -->
		<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/adapter/ext/ext-base.js" charset="utf-8"></script>
		<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/ext-all.js" charset="utf-8"></script>
		<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/src/locale/ext-lang-ja.js" charset="utf-8"></script>
		<!-- /Ext JS -->

		<!-- App -->
		<script type="text/javascript" src="../../src/Panel/TreePanel1.js" charset="utf-8"></script>
		<!-- /App -->
	</head>
	<!-- /head -->
	<!-- body -->
	<body style="margin: 20 0 0 30;">
	</body>
	<!-- /body -->
</html>

TreePanel1.js

Ext.onReady( function() {
	Ext.BLANK_IMAGE_URL = 'http://extjs.cachefly.net/ext-3.2.0/resources/images/default/s.gif';
	Ext.QuickTips.init();

	// rootのツリーノードを生成
	var root = new Ext.tree.AsyncTreeNode({
		text: 'forum',
		leaf: false
	});

	var treePanel = new Ext.tree.TreePanel({
		title: 'Tree Panel',		// PanelのTitleを指定
		renderTo: Ext.getBody(),	// 表示する要素を指定
		width: 225,					// 幅
		height: 200,				// 高さ
		minSize: 150,				// 最小の幅
		maxSize: 300,				// 最大の幅
		rootVisible: false,			// rootのツリーノードを表示するか
		root: root					// rootのツリーノードを指定
	});

	// 子ノードを生成

	var node1 = new Ext.tree.TreeNode({
		text: 'thread1',
		leaf: true
	});

	var node2 = new Ext.tree.TreeNode( {
		text: 'thread2',
		leaf: true
	});

	var node3 = new Ext.tree.TreeNode( {
		text: 'thread3',
		leaf: true
	});

	// 生成した子ノードをrootノードに追加
	root.appendChild(node1);
	root.appendChild(node2);
	root.appendChild(node3);

});

実行結果

Ext.tree.TreePanelのサンプル

上のリンクは、サンプルソースを実際に動かした場合のリンクです。
このサンプルでは、ベタでツリーノードを指定していますが、
TreeLoaderを使ってサーバ側から処理結果を、XMLやJSON形式で受け取ることもできます。

参考

Ext 3.0 API Documentation 日本語版 Ext.tree.TreePanel

ブラウザ上での文字編集機能(WYSIWYGエディタ)

div等のブロック要素で、文字編集をしたい場合、JavaScriptなどで
contenteditable=true
とすると、ブロック要素での文字編集が可能になる。

FireFoxの場合は、
designMode=true
にすると編集可能になる。

これすごい。

初めて知ったときは本当に驚いた。。。

ボールドやイタリックとか文字サイズ変更とかもできるみたい。

思えば、ブログ書くときに使う編集機能はこれが使われてるのかな。

ネットで検索するとたくさん出てくるから、かなり昔の情報だと思うのですが
最近知って驚いたので、載せておきます。

Google Web Toolkitを触る　その２　-Eclipseプラグインを導入する-

GWTをEclipseで動作させるプラグイン、Cypal Studioを入れてみます。

1.ダウンロード

下記のURLからダウンロードする。

http://code.google.com/p/cypal-studio/

ダウンロードしたZIPファイルを解凍し、eclipseのpluginフォルダへコピーします。

2.初期設定

コピー後、eclipseを起動し、初期設定。

ウィンドウ -> 設定を開き、「Cypal Studio」を選択。

下の画像の赤い部分に、GWTのインストールフォルダを指定します。

3.プロジェクトの作成

初期設定が終わったら、早速プロジェクトを作成します。

右クリックから、新規 -> 動的Webプロジェクトを選択。

プロジェクト作成ウィザードで、構成に、「Cypal Studio for GWT」を選択する。

4.アプリケーションファイルの作成

次に、GWTのアプリケーションファイルを作成します。

作成したプロジェクトを選択して右クリックから、新規 -> その他を選択。

新規ウィザードで、Cypal Studio -> GWT Moduleを選択する。

「次へ」ボタンをクリックすると、「New GWT Module」という画面が開く。

この画面で、パッケージ・名前を任意に入力する。

「Select the GWT Themes you want to use in the module:」部分に、

デフォルトで「標準」にチェックがついているがこれを外す。

外さないとうまく動かなかった。

たぶんクラスが足りないと思われるが、調べる気もなくとりあえず外した。。。

入力が終わったら、「終了」をクリック。

XMLファイル、HTMLファイル、JAVAファイルが作成されていると思います。

5.モジュールの編集

HelloWorldを表示したいと思います。

作成されたJAVAファイルを編集。

package my.gwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;

public class MyGwt1 implements EntryPoint {

	private Button button;

	public void onModuleLoad() {

		button = new Button("Click me");

		button.addClickListener(new ClickListener() {
			public void onClick(Widget sender) {
				Window.alert("Hello World!");
			}
		});
		RootPanel.get().add(button);
	}
}

6.実行

作成されたモジュールのなかにXMLファイルがあるので

それを右クリックし、実行 -> Gwt ホスト・アプリケーションを選択すると、

Hostedブラウザが開き、実行される。

こんな感じ。

Hostedブラウザにある「Compile/Browse」ボタンをクリックすると

HTMLファイルとJavaScriptファイルが、プロジェクトのbuildフォルダに生成される。

このサンプルだと「MyGWT1.html」と「my.gwt.sample.MyGwt1.nocache.js」が生成されている。

Javaファイルを書くとJavaScriptファイルが生成されるのが素敵。

デフォルトでタブ表示とかのクラスも用意されているみたい。

Google Web Toolkitを触る　その１

今更ながら、Google Web Toolkit（以下、GWT）を触ってみたので

動かす手順について記載しておきます。

以下のURLで公開されているGWTのモジュールをダウンロードし、

解凍後のファイルを任意のディレクトリへ配置。

http://code.google.com/intl/ja/webtoolkit/

コマンドプロンプトから以下のコマンドを入力し、プロジェクトを作成する。

>cd D:\gwt>projectCreator.cmd -eclipse GwtSample -out D:\workspace\GwtSample

projectCreatorでは、以下の引数を指定できる。

• -ant <projectName>

Antファイルを作成する。<projectName>にはプロジェクト名を指定。

• -eclipse <projectName>

Eclipseプロジェクトを作成する。<projectName>にはプロジェクト名を指定。

• -out <dir>

出力先を指定する。

• -overwite

出力先に同名のファイルがある場合、上書きする。

• -ignore

出力先に同名のファイルがある場合、ファイルを作成しない。

次に、アプリケーションファイルを作成する。

>applicationCreator.cmd -eclipse GwtSample -out D:\workspace\GwtSample my.gwt.sample.client.MyGwt

applicationCreatorでは、以下の引数を指定できる。

• -ant <projectName>

Eclipseプロジェクトファイル名でデバッグ用のlaunch定義ファイルを作成する。<projectName>にはプロジェクト名を指定。

• -out <dir>

出力先を指定する。

• -overwite

出力先に同名のファイルがある場合、上書きする。

• -ignore

出力先に同名のファイルがある場合、ファイルを作成しない。

• <className>

アプリケーションクラスの名前を指定する

必ず最後のパッケージ名に「client」を含めなければいけない。

アプリケーションファイルを作成後、作成したフォルダに『<クラス名>-shell.cmd』

というファイルが作成されている。

実行するとHostedモードで起動し、Hostedブラウザが表示される。

所感としては、Javaで書いた方がソース管理はし易そう。

JUnitも搭載されているみたいだし。

ただ、Javaのクラスがどこまで使えるのか、

JavaScriptをどこまでカバーしているのかが不明なので、

もう少し勉強してみよう。

それにしても、おもしろい。

今日はここまで。。。

明日はEclipseでの作成方法でも。