Category: JavaScript

0 RESPONSES comments
7月 21ST, 2010
By ISPERN

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のプロパティ

プロパティ 説明
tabBar Ext.TabBarのプロパティをオブジェクトリテラルで指定する。
※下記、Ext.TabBarのプロパティを参照。
tabBarPosition タブを配置する場所を指定する。
指定できる値は ‘top’ , ‘bottom’
※’left’ , ‘right’ も指定できるけど、とりあえず動くという感じ。
ui タブのテーマを指定。
指定できる値は ‘light’ , ‘dark’ , ‘metal’
animation タブを切り替えるときのアニメーションを指定。
指定できるアニメーションは、 ‘fade’ , ’slide’ , ‘flip’ , ‘cube’ , ‘pop’ , ‘wipe’。
kitchensinkのアニメーションで動きを確認できる。
sortable true にすると、タブをホールドしてドラッグすることができる。
activeItem 初期表示でアクティブにするコンポーネントを items のインデックスで指定する。
items 表示するコンポーネントを配列で指定。

Ext.TabBarのプロパティ

プロパティ 説明
dock Ext.TabPanel の tabBarPosition と同様。
layout Ext.TabBarのレイアウトの設定。
上記サンプルコードでは、pack プロパティでタブの配置位置を指定している。
’start’ , ‘center’ , ‘end’を指定できる。
ui Ext.TabPanel の ui と同様。
sortHoldThreshold タブのホールド時間をミリ秒で指定する。指定した時間の間、タブをホールドすると、ドラッグ可能になる。
デフォルトは300ミリ秒。

実行

以下のリンクからサンプルを実行できます。
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 -

Tags: ,

categories JavaScript, Sencha Touch

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

所感

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

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

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

Tags: ,

categories JavaScript, Sencha Touch

0 RESPONSES comments
5月 27TH, 2010
By ISPERN

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を入れたりする場合は多々あるので、
その時にボーダーが重なったりしないのは嬉しいです。
まさに一石二鳥。

Tags: ,

categories Ext JS, JavaScript

0 RESPONSES comments
5月 6TH, 2010
By ISPERN

MacVimでHTML,CSS,JavaScriptの文法チェック

MacVimでHTML、CSS、JavaScriptを文法チェックできるようにしたのでその手順を。
HTMLとCSSはmakeコマンド、JavaScriptはファイル保存でチェックできるようにしました。

HTML

HTML Tidyを使って、チェックします。

  1. ここからHTML Tidyをダウンロード

    2. http://tidy.sourceforge.net/

  2. ダウンロードしたファイルを、パスの通っているディレクトリに置く。
  3. 「.vim/ftplugin」下に”html.vim”を作成する。
  4. “html.vim”に以下を記述する。
    5. 	html.vim
	compiler tidy
	setlocal makeprg=tidy\ -raw\ -quiet\ -errors\ \"%\"

CSS

“WebService::Validator:CSS::W3C”というperlモジュールを使って、チェックします。

  1. “WebService::Validator:CSS::W3C”のモジュールをCPAN経由でインストール。
  2. css.vimをダウンロードする。

    3. http://www.vim.org/scripts/script.php?script_id=1577

  3. “css.vim”を「.vim/compiler」に置く。
  4. “validate_css”をパスの通っているディレクトリに置く。
  5. 「.vim/ftplugin」に”css.vim”を作成する。
  6. 以下を記述する。
    7. 	css.vim
	compiler css

JavaScript

JavaScript LintというチェックツールとjavaScriptLint.vimというプラグインを使います。

  1. JavaScript Lintをダウンロード。

    2. http://www.javascriptlint.com/

  2. “jsl”を、パスの通っているディレクトリに置く。
  3. javaScriptLint.vimをダウンロードする。

    http://www.vim.org/scripts/script.php?script_id=2578

  4. “javaScriptLint.vim”を、「.vim/plugin」に置く。

これでファイル保存時にチェックできるようになります。
エラーがある場合、下の画像のようにエラーメッセージが表示されて、
エラーのある行にカーソルが移動します。

ファイル保存時のエラーチェック

所感

普段はHTMLやCSSよりもJSを書く方が多いのですが、保存したときに自動でチェックしてくれるのは
かなり便利です。今までvimでコード書いているときは、エラーを事前に知る術がなかったので。
あとよくやるのが、「カンマが余計に付いていてFireFoxじゃエラーにならないけどIEでエラーになる」
とかですが、それもきちんとチェックしてくれるので助かっています。

Tags:

categories JavaScript, vim

3 RESPONSES comments
2月 15TH, 2009
By ISPERN

EclipseでExtJSのAPIを補完する

ExtJSのソースコードのフォルダに、「ext.jsb」というファイルがありますが

Eclipseでこのファイルを読み込むことで、ExtJSのAPIを補完することができます。

ext.jsbを読み込むには、Spket IDEというプラグインを利用します。

Spket IDEについては、ここに詳しく載っていました。

Spket IDEはスタンドアロンとプラグインどちらでも動作が可能です。

私の環境には既にEclipse環境があるのでプラグインの方を利用しました。

利用方法

1.インストール

Eclipseのソフトウェア更新より「http://www.spket.com/update」のURLを追加して

プラグインをインストールします。

プラグインは、このページからもダウンロードできます。

2.JavaScriptプロファイルの作成

以下の流れで、ExtJSのプロファイルを作成します。

  • 「ウィンドウ」→「設定」で設定ウィンドウを開く。
  • 設定ウィンドウの「Spket」→「JavaScript Profiles」を選択。
  • 「新規(N)…」ボタンをクリックし、適当な名前で新規にJavaScriptプロファイルを作成。
  • 作成したプロファイルを選択し、「ライブラリの追加(B)」ボタンをクリック。
  • 「ライブラリ(L)」のプルダウンより「ExtJS」を選択し、「OK」ボタンをクリック。
  • 追加されたExtJSのライブラリを選択し、「ファイルの追加(F)」ボタンをクリック。
  • ExtJSのsourceフォルダにある「ext.jsb」ファイルを選択する。
  • 選択後、「OK」ボタンをクリック。

これで、「Spket JavaScript Editor」でJavaScriptファイルを編集するときにExtJSのAPIが補完されます。

AptanaにもExtJSを補完するプラグインがありましたが、Spket IDEのJavascript editorの方が使いやすかったです。

Tags: ,

categories JavaScript

0 RESPONSES comments
11月 30TH, 2008
By ISPERN

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を展開するノードに追加してくれます。

Tags: ,

categories Ext JS, JavaScript

0 RESPONSES comments
10月 28TH, 2008
By ISPERN

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

Tags: ,

categories Ext JS, JavaScript

0 RESPONSES comments
10月 14TH, 2008
By ISPERN

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

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

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

これすごい。

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

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

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

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

Tags:

categories JavaScript