なんとなくメモ: 2008

2008年4月28日月曜日

SpketIDE1.6.11がでてます

Ext Theme Builderという機能が用意されていて、サンプル画像を見た感じで、resourceディレクトリ配下にあるCSSファイルを編集するようです。
ただしこの機能はEclipse3.3以上が必要なようで、試せてません。

ExtJS2.1がでてます

ExtJS2.1が出ています。
SliderやStatusBarコンポーネントが追加されているみたいです。
サンプルが追加されているのがうれしいですね。

2008年2月26日火曜日

ExtJS2.0.2が出てます

ExtJS2.0.2が出てます。

Air対応ってことでExt.Airパッケージが追加されています。
Ext.isArrayメソッドが追加されたようで、多くのクラスでExt.isArrayを利用するように修正があったようです。

Ext.form.Labelが追加されたのと、Ext.form.BasicFormでAjaxでないHTMLフォーム送信が行えるようになったみたいです。

2008年2月24日日曜日

Ext.Elementもしくは、Ext.EventManagerに用意されているaddListener() かon()を利用して、Elementに対応するイベントを登録します。（on()はaddListener()の別名になりどちらも同じ処理になります）
※イベントタイプはDom Level2で規定されているイベントタイプと同じようです。

Ext.EventManagerは引数にイベントを登録する要素のID（もしくは要素そのもの（HTMLElement)）を指定する以外はExt.Elementで指定するのと同じなのですが、ExtJS2.0のAPIドキュメントでは推奨しないと書かれていたので、ここではExt.ElementのaddListener()を使ったイベント処理の登録方法をメモしておきます。

addListener( String eventName, Function fn, [Object scope], [Object options] ) : void

String eventName : 登録対象のイベント名
Function fn : イベントに対する処理を行う関数オブジェクト
[Object Scope] : 関数実行時のスコープ
[Object options]: イベントに対するオプション

記述例）clickイベントに対して、処理を登録

Ext.onReady(function(){
var myDiv=Ext.get('mydiv');
myDiv.addListner('click',function(){alert("Click!!"),this,{delay: 100});
myDiv.addListner('dblclick',function(){alert("Double Click!!"),this,{delay: 100}});
myDiv.addListner('mouseover',function(){alert("MouseOver!!"),this,{delay: 100}});
});

複数のイベントを一度に登録したい場合は、引数にオブジェクトを指定することでできます。
先ほどの例を書き換えると

Ext.onReady(function(){
var myDiv=Ext.get('mydiv');
myDiv.addListner({
'click':{
fn:function(){alert("Click!!"),this}),
scope:this,
delay: 100
},
'dblclick':{
fn:function(){alert("Double Click!!"),this}),
scope:this,
delay: 100
},
'mouseover':{
fn:function(){alert("MouseOver!!"),this}),
scope:this,
delay: 100
}
}
});

こんな書き方もできます。

Ext.onReady(function(){
var myDiv=Ext.get('mydiv');
myDiv.addListner({
'click':function(){alert("Click!!"),this}),
'dblclick':function(){alert("Double Click!!"),this}),
'mouseover':function(){alert("MouseOver!!"),this}),
scope:this,
delay: 100
}
});

イベントに対するオプションなどを個別に設定する必要がない場合は、これが短くていいかも。

複数の要素に対して同じイベント処理の登録を行う場合は、Ext.select()で設定した要素のCSSセレクタを指定してExt.CompositeElementを取得し、取得したExt.CompositeElementに含まれるElementに対してまとめてaddListener()でイベントをすることができます。

Ext.onReady(function(){
var myDivs=Ext.select('#foo a');
myDivs.addListner({
'click':function(){alert("Click!!"),this}),
'dblclick':function(){alert("Double Click!!"),this}),
'mouseover':function(){alert("MouseOver!!"),this}),
scope:this,
delay: 100
}
});

このほかに、Ext.addBehaviors()を利用しても同様にCSSセレクタを指定して複数の要素のまとめてイベントを登録することができます。
Ext.addBehaviors()はDomが構成された後に実行されるため、Ext.onReady()の中で記述しなくてもイベントの登録が行えます。

Ext.addBehaviors( Object obj ) : void

引数のオブジェクトは、{'CSSセレクタ@イベント名:functionオブジェクト}というように指定します。
イベントが複数ある場合は、プロパティを増やしていけばいいです。

また、'CSSセレクタ1,CSSセレクタ2・・,CSSセレクタN@イベント名'というようにCSSセレクタをカンマで区切ると複数のCSSセレクタの指定に対して同じ関数をイベント処理として登録することができます。

Ext.addBehaviors({
'#foo a@click' : function(e, t){alert("Click!!")},
'#foo a@dblclick' : function(e,t){alert("Double Click!!")},
'#foo a@mouseover' : function(e,t){alert("MouseOver!!")}
});

});

単に、イベントを登録したいだけなら、Ext.addBehavious()を使うと簡単に書けていいかもしれません。

ExtJSが適用するUIコンポーネントに対してイベント処理を登録する場合は、ここのコンポーネントに対してaddListener()やon()が用意されているので同じように設定することになります。
コンポーネントに対するイベントのイベント名は、APIドキュメントに書かれているのでそちらを参考にしてください。

2008年2月23日土曜日

JS Builder

JavaScriptの結合、圧縮、コメント除去ができます。
結合するときに、ヘッダーコメントをつけることもできるのでいいですね。
ExtJSライブラリでも利用しているようです。
ダウンロードはこちらから。

難読化は行わないので、難読化が必要な場合は、別のツールを使うか、JS Builderで圧縮した後に難読化する必要があります。

ビルドするときにJS　Docのドキュメントも同時に出力ができるようです。
設定項目を見るとjs docのPerlプログラムを実行するようなので、ActivePerlなどの環境を別途用意する必要でしょう。

【画面サンプル】

2008年2月21日木曜日

Spket IDE 1.6.8リリース

Spket IDE 1.6.8が出てます。こちらから

2008年2月17日日曜日

JSONデータへのデコード/JSONデータへのエンコード処理

（１）オブジェクトをJSONデータ（String）へ変換する場合
Ext.util.JSON.encode ( Mixed o ) : String
Ext.encode()を使っても同じことができます。

（２）JSONデータをオブジェクトへ変換する場合
Ext.util.JSON.decode ( String json ) : Object
Ext.decode()を使っても同じことができます。

Domが構成された後に処理を実行する方法

HTMLドキュメントが読み込まれDocumentの準備が終了したとき（画像を読み込む前）に処理を実行する場合は、Ext.OnReady()で実行する処理を関数オブジェクトで指定します。

Ext.onReady( Function fn, Object scope, boolean override ) : void

ネームスペースを設定する方法

Ext.namespace()を利用すると、手軽にネームスペースの設定ができます。

Ext.namespace(String namespace1,String namespace2,String etc ) : void

引数に複数のネームスペースを設定できるし、ひとつの指定で複数階層も設定できます。

環境を確認する方法

ExtJSでは、ブラウザやOS等の環境の確認をできるプロパティをExtクラスで提供している。

（ブラウザの判別）
　Ext.isIE : Boolean - InternetExploreの場合にtrue
　Ext.isIE6 : Boolean - InternetExplore6の場合にtrue
　Ext.isIE7 : Boolean - InternetExplore7の場合にtrue
　Ext.isGecko : Boolean - Gecko系ブラウザの場合にtrue
　Ext.isSafari : Boolean - Safariの場合にtrue
　Ext.isOpera : Boolean - Operaの場合にtrue

（実行環境の判別）
　Ext.isWindows : Boolean - Windowsの場合にtrue
　Ext.isLinux : Boolean - Linuxの場合にtrue
　Ext.isMac : Boolean - Macの場合にtrue
　Ext.isAir : Boolean - Airで実行されている場合にtrue

（そのほか）
　Ext.isSecure : Boolean - SSLのページである場合にtrue

ExtJSで必ずしたほうがいい設定

ExtJSではブランク用イメージとしてs.gifというファイルを使用しているのですが、デフォルトではExtJSのHPのURLが指定されているので、Ext.BLANK_IMAGE_URL の値を変更する。

Ext.BLANK_IMAGE_URL = 'ext2.0.1/resources/images/default/s.gif'

要素やコンポーネントの情報の取得方法

ExtJSでは、ドキュメントに配置されされている要素を取得するためにいくつかの手段を用意してくれています。

（１）IDやnodeを指定してExt.Elementを取得する

Ext.get( Mixed el ) : Element

Element要素をひとつだけ取得するときに利用します。
このほか、Documentやbodyを直接取得できるメソッドが用意されています。
　HTMLのBody要素を取得する=> Ext.getBody() : Ext.Element
　HTMLのドキュメント要素を取得する=> Ext.getDoc() : Ext.Element

（２）CSSセレクタを指定して、Ext.CompositeElementで取得する

Ext.select( String/Array selector, [Boolean unique], [HTMLElement/String root] ) : CompositeElementLite/CompositeElement

※Ext.CompositeElementは簡単に言うと、複数のExt.Elementをまとめて扱うことのできるクラス。

CSSセレクタに一致するすべて要素を取得できるので、複数の要素にまとめてイベントやStyleを設定するときに利用します。

（３）XPATHを指定して、Ext.Elementの配列を取得する

Ext.query( String path, [Node root] ) : Array

Ext.select()だとCompositeElementが取得でき、要素に対してまとめて設定しやすいので、あまり利用シーンはないかも。
CSSセレクタよりもXPathの方が複雑な指定が可能なので、複雑な指定をする場合に利用する。

（４）IDやnodeを指定してDomを取得する

Ext.getDom( Mixed el ) : HTMLElement

プレーンなDOMを扱い場合に利用する。

（５）IDを指定してExt.Componetを取得する

Ext.getCmp( String id ) : Ext.Component

Ext.PanelやExt.formオブジェクトなど、Ext.Componetを継承したオブジェクトを取得するときに利用します。
オブジェクトの生成時にidオプションを指定すれば任意のIDを割り当てることができます。
また、idオプションを指定しない場合はExtJSが自動で重複しないIDを割り当ててくれます。
自動的に割り当てられたIDはExt.ComponetのgetId()メソッドで取得することができます。

2008年2月16日土曜日

ExtJSのテーマの変更方法

ExtJSはテーマを切り替えることにより、見栄えを変更することができます。

ExtJS2.0では標準以外にxtheme-gray.cssというCSSが用意されているので追加で読み込むことでgrayテーマが適用されます。
【grayテーマを適用する場合のサンプル】

ExtJSのメッセージを日本語化する方法

ExtJSは日本語のリソースファイルが用意されているので、コンポーネント等が表示するメッセージを日本語にしたい場合は、source/locale/ext-lang-ja.jsを追加で読み込めばいいです。
【日本語リソースを適用する場合のサンプル】

ext-lang-ja.jsでは、通常のメッセージの日本語に置き換えているだけなので、日本語化されていない箇所があれば、自分で同じように定義してしまえばいいです。

ExtJSで必要なファイル

ExtJSを使う場合には、JavaScripファイルのext-base.js、ext-all.jsと、リソースファイルとして、ext-all.cssファイルを読み込む必要があります。

※ExtJSはPrototype.jsやjQuery,YahooUIなどのライブラリを利用できるようになっており、それらのライブラリを利用する場合は、ext-base.jsファイルの代わりにそれぞれのライブラリのアダプターとなるをファイルを指定する必要があります。

ExtJSライブラリがext-2.0.1ディレクトリに配置されていることとすると以下のように記述することができます。
【サンプル】

上のサンプルはExtJSの用意するすべての機能を利用することを想定してext-all.jsを読み込んでいますが、http://extjs.com/download/buildで、必要な機能だけのJavaScriptファイルを作ることができるので、余分な機能を取り入れずライブラリのサイズを少なくすることができます。

Javascriptのデバック環境

Javascriptのデバックをするなら、FirefoxのエクステンションでFirebugが便利。
日本語版はここから入手できます。

エラー内容はもちろんのこと、ブレークポイントを設定できて、その時の変数の内容も確認できるので重宝してます。

ExtJS2.0対応のIDE Spketプラグインの設定

以下の順で設定してみました。
事前にExtJSライブラリがどこかに展開しました。

[Spketプラグインの設定]

SpketのページからEclipse用のプラグインをダウンロードする。（今回ダウンロードしたのは1.6.7）
ダウンロードしたファイルを展開して、pluginフォルダと、featuresフォルダをEclipseをインストールしたフォルダ配下にコピーして、Eclipseを起動する。
Eclipseを起動して、ウィンドウ=>設定をクリックして設定パネルを起動。
SpketのJavascriptProfileという項目を選択する。
[New]ボタンをクリックしてExtJS2用のプロファイルを作成する。
名前は適当で一応extjs2としました。
[Add Library]ボタンをクリックするとExtJSが選択できるので、ExtJSを選択した状態でOKボタンをクリックする。
[Add File]ボタンが使えるようになるのでクリックし、ExtJSのsorce/ext.jsbと言うファイルを選択する。
プラグインを設定を終了する。

※インストールすれば使えると思ってたけど、うまくいかずかなり悩みました。7番目以降をしないとコードアシストしてくれません。
※ext.jsbはJSBuilderというJavascriptの圧縮ツールのプロジェクトファイルのようです。JS　Builderについては後日調査予定

ExtJS2.0対応のIDE

ExtJS2.0対応のIDEの紹介がExtJSのブログで紹介されていました。

http://extjs.com/blog/2008/02/01/ides-plugins-and-tools-for-ext-js-20/

AptanaStudio、Eclipse、Dreamweaverで利用できるプラグインがあるみたい。
関数やプロパティのコードアシストできるだけでもずいぶんと楽です。

普段Eclipseを使うことが多いので、Spketを使ってみようと思う。

なんとなくはじめてみました

最近調べ使い始めたJavaScriptやExtJSについてのメモを書いていく予定です。

登録: 投稿 (Atom)