ExtJSで楽しくRIA業務アプリ開発

• @KSawada 来月もよろしくお願いしますー in reply to KSawada #
• @tyama 来月もがんばっていきましょー in reply to tyama #

Powered by Twitter Tools

Part1はRIAからライブラリとフレームワークの違いまでを簡単に説明しています。

JSON
ジェーソンといいます。設計段階でプログラマが登場するような会議や打ち合わせになってくると、サーバ側とクライアントUIの橋渡し（交換言語みたいな感じ）をやってくれるのが、JSONやXMLです。
JSONは、JavaScript Object Notationが正式名称で、JavaScriptにおけるオブジェクトの表記法({}を使うやつですね)をベースとした軽量なデータ記述言語というのが正しい解釈のようです。

要するに、サーバ側からテキストでこの記法にのっとったものを出力してやれば、ブラウザが受け取ったそのテキストをJavaScript側でパースするとそのままオブジェクトとして使えちゃうんですよというのが肝です。

ExtJSですと、JsonStore, JsonReaderとかでJSONを受け取るとごにょごにょしてくれて、いつの間にかExtで使えるオブジェクトに変換してくれる感じになります。

Json自体のサンプルは以下の通りです。

オブジェクトの例：

{name: "John Smith", age: 33}

配列の例：

["milk", "bread", "eggs"]

もちろん、入れ子にもできます。

営業的には、打ち合わせでこの言葉が出てきたら、なんのことはないただのテキストで、サーバ側とExtを繋ぐ橋渡し的データ記法のルールだと思っていただければ十分かと思います。

• @KSawada AP用意がありますので、自由に使っていただける予定です。 in reply to KSawada #
• いーえっくすてぃですね #
• みるくるは京都版もあるそうです #
• ext-base.jsはアダプタですのでext単体で使うときに使います #
• extはprototypeとかと一緒に使えます #
• @felicidadept prototype, jqueryとyuiがアダプタとして使えます in reply to felicidadept #
• コードをどこで学びましたか？>7割ぐらい独学 #
• 第2回の第2セッションのチュートリアルは、以下のURLからどうぞhttp://bit.ly/3ZF0oC #extjs_nagoya #

Powered by Twitter Tools

昨日の勉強会の私のセッションは改善の必要がありますね。次回はもっと分かりやすく進められるようにがんばります。

ブログを使って説明していましたが、ブログだと投稿日の降順に記事が並ぶので、どの記事を見ているか探すのが難しかったと思います。
次回からはこんな感じで、その日やることをまとめておきます。

1.ExtJS入門1　開発環境を整える
ExtJSを開発できる環境を作る。ブラウザ選び、ExtJSライブラリのダウンロード
2.ExtJS入門2　Ext JSでHello, Worldを作ってみる
ExtJSを動かしてみる。実際にコードを書いてExtJSを使ってみる。Ext.onReady()を使う。
3.ExtJS入門3　Viewportを使う
ExtJSのViewportという機能を使ってみる。fitとborderレイアウトを使ってViewportを作る。

また分かりにくかった点やご意見・ご感想がありましたら、このブログのコメントをくださるとありがたいです。たくさんのコメントお待ちしています。

• @issm 全然大丈夫ですよー #
• 本日18:30より第2回ExtJS勉強会を開催しますので、お暇な方は是非。 #
• @felicidadept よろしくお願いしますー in reply to felicidadept #
• 本日は、PCやiPhone等のデバイスを持ってきていただくと、Wifi接続が可能です。 #
• また、セッション中に、Twitter経由で質問を受け付けるという試みをやってみようと思います。 #

Powered by Twitter Tools

11月も引き続き名古屋で第3回ExtJS勉強会を開催いたします。

開催日時は、11月27日（金）18:30から20:30までとなります。
前回と同様、そのあとに懇親会も開催いたします。

セッション内容：
1．ユーザー事例紹介（未定）
※実際の業務アプリを例としてExtJSの優位性を説明していただきます。

2. Ext.PanelをViewportに並べる、Ext.data.Gridのお話など（株式会社sus4 佐竹裕行）
※Ext初心者ユーザー向けセッション。これからExtJSを使いはじめる方を対象に、毎回１機能ずつ紹介していきます。
予定しているチュートリアルの内容は、開催前に掲載いたします。

3．ExtJSコードリーディングリレー（未定）
※ExtJSのソースコードを見ながら、JavaScriptについて学ぶセッションです。

開催概要：

• 日時：2009年11月27日（金）18:30～20:30（18:00開場）
• 募集人数：20名程度
• 場所：あいちベンチャーハウス会議室　〒460-0007　名古屋市中区新栄二丁目2番24号
• 参加費：無料（懇親会は有料(1000円））

参加をご希望の方はフォーラムから参加表明をお願いします。

• 参加表明用スレッドはこちら（フォーラムのユーザー登録が必要です）
• フォーラムの登録はちょっとという方は「info@extjs.co.jp」までご連絡ください

本家のextjs.comのラーニングセンターにスクリーンキャストのページがあるのをご存知でしょうか。当然すべて英語ですが、充実した内容です。
extjs.com – Screencasts
http://www.extjs.com/learn/Screencasts
こういったスクリーンキャストのメリットはコーディングのテンポやデバッグの動きや小技が見れるところです。動画の中でなかではFirebugでインタラクティブにパネルを作ったりしていて面白いです。
ただWeb動画のなのにイントロが長かったりして、多少見づらいですが。

ここのコンテンツ自体がまだまとまっていないようで、動画自体の体裁も付随情報(ソースコード)もあったりなかったりで、まだまだこれからな感じです。
(Advanced CSS and Theming of Ext のビデオは見てみたいのですがNot Foundですし)

見ていて結構おもしろいので、週末に暇があれば眺めてみるのもよいのはないでしょうか。
Quick Time形式でダウンロードできるのものもあるのでiPhone / iPod に入れて移動時間に見るのもいいですね。

<<追記>>
http://www.extjs.tv/ていうのもあるみたいです。いい意味でアメリカっぽいゆるさがたまりません。

こちらでViewportにコンフィグについて、もう少し詳しく紹介しています。

http://extjs.blog.sus4.co.jp/2009/11/09/extjs-tutorial4/

Ext JSの花形の機能がViewportです。Viewportを使うことでブラウザの画面全体をExt JSで支配することができます。たった一つの小さなHTMLの上にViewportを使って様々なアプリケーションを構築することができます。Viewportは一言で言うと、ブラウザの画面を支配する特殊なパネルクラスと言えます。

Ext.Viewportのコンフィグ

ExtJSではクラスのインスタンスを生成するときに、様々なコンフィグオプションを設定して、必要なクラスを作っていきます。それぞれのコンフィグがどんな設定をするかはAPIリファレンスで確認することができます。APIリファレンスのクラスの説明のすぐ下にリスト表記されています。

Viewportで使用するコンフィグの基本的な2つがlayoutとitemsです。Viewport内のパネルのレイアウトを指定するのがlayoutコンフィグで、Viewport内に配置するパネルを指定するitemsコンフィグにあります。これらの二つは必須の設定になっているので、必ず指定しなければいけません。

layoutコンフィグ

現在使用できるレイアウトはabsolute、accordion、anchor、auto、border、card、column、fit、form、hbox、menu、table、toolbar、vboxの14種類があります。代表的なものを下に上げておきます。それぞれのlayoutに関してはhttp://www.extjs.com/deploy/dev/examples/layout-browser/layout-browser.htmlにサンプルがあります。

• accordion：アコーディオンのようなパネルがたたみこまれたビューを作ります。
• anchor：Viewport内の任意の位置にパネルを配置します。
• border：上下左右に仕切られたパネルを配置します。
• card：パネルをトランプのカードをめくるように入れ替えて表示します。
• column：縦方向にパネルを仕切ります。
• fit：パネルをViewportの内側にぴったり合わせて表示します。
• form：フォームに特化したパネルを配置します。
• table：表のように行・列方向のグリッドにパネルを並べます。

これらの中でborderとfitがよく使われます。

itemsコンフィグ

Viewportの中に配置されるものはパネルになります。Viewportの中はExt JSで支配されています。配置するパネルはitemsのコンフィグオプションで配列で指定します。layoutコンフィグによってはitemsに設定されるパネルの特定のコンフィグが必須になる場合があります。例えばborderレイアウトの場合はパネルのコンフィグにregionコンフィグを設定しなければいけません。

では実際にViewportを作って見ます。

1.HTMLファイルの準備

典型的なExt JSのHTMLです。Viewportを使うときはext-all.jsを読み込むべきです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xh    tml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Viewport Sample</title>
<!--Ext JS CSS-->
<link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
<!--ext js-->
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all.js"></script>
<!--自分のjs-->
<script type="text/javascript" src="../js/ext/myApp.js"></script>

</head>
<body>
<div class="body">
</div>
</body>
</html>

2.JSファイルの記述

2-1.fitレイアウト

Viewportを作るにはExt.Viewportクラスのインスタンスを作ります。Ext.onReadyの中でExt.Viewportのインスタンスを作ります。今回はまずfitレイアウトでViewportを作ります。

Ext.onReady(function(){
new Ext.Viewport({
layout:'fit',
items:[
{
title:'パネル',
html:'<div style="text-align:center;padding:100px;"><h1>Fit レイアウト</h1></div>',
collapsible:true
}
]
});
});

タイトルのある普通のHTMLに見えますが、よく見ると上下左右に青い枠があります。これがViewportで支配されている証拠です。ここでViewportの中に配置しているパネルはただHTMLを表示するだけの単純なパネルです。グリッドやタブなども配置することがもちろんできます。グリッドやタブパネルはExt.Panelのサブクラスとして定義されています。Ext JSではこのパネルを組み合わせたり拡張したりしながらアプリケーションを構築していきます。
ここではさらにパネルのコンフィグにcollapsible（折りたたみ設定）を追加しています。タイトル右上の三角印をクリックすると、Viewportの中のパネルを折りたたむことができるようになります。このコンフィグオプションは比較的よく使います。gridなどで他のパネルをたたんで表を広く表示したいときなどに有効です。

2-2.borderレイアウト

Viewportにborderレイアウトを設定して、上下左右に区切られたパネルを作ります。

borderレイアウトではitemsに設定するパネルコンフィグでregionという項目を設定しなければ行けません。regionは画面の上下左右のどの位置に配置するかを指定します。borderレイアウトでのregionの設定値は下の図のようになっています。

真ん中の”center”のパネルは必須になります。子要素となる5つのパネルを作って、ボーダーレイアウトのそれぞれの位置に配置します。

Ext.onReady(function(){
new Ext.Viewport({
layout:'border',
items:[
new Ext.Panel({
title:'CENTER',
html:'CENTER PANEL',
width:'100px',
region:'center'
}),
new Ext.Panel({
title:'NORTH',
html:'NORTH PANEL',
margins:'0 3 0 3',
region:'north',
split:true
}),
new Ext.Panel({
title:'SOUTH',
html:'SOUTH PANEL',
margins:'3 3 3 3',
region:'south',
collapsible:true
}),
new Ext.Panel({
title:'EAST',
html:'EAST PANEL',
margins:'0 3 0 3',
region:'east',
collapsible:true
}),
new Ext.Panel({
title:'WEST',
html:'WEST PANEL',
margins:'0 0 0 3',
region:'west',
split:true
}),
]
});
});

eastとsouthのパネルにはcollapsibleの設定も行っています。ボタンのデザインが違っていますが、右上の「>>」を押すとパネルがfitのときと同じようにアニメーション付きでたたまれます。

もう一つよく使うボーダー内のパネルに設定するコンフィグオプションにsplitがあります。splitを指定すると境界線をドラッグして大きさを変更することができます。splitを設定した場合は、ドラッグできるボーダーのマージンが自動的に+2pxされます。そのため他のボーダーよりを太くなって少し不恰好に見える場合もあります。その場合はmarginsコンフィグで対象のボーダーのマージンに-2pxすることで、ボーダーの太さを調整します。

またlayout自体はViewportだけでなくパネルにも設定することができます。そのため各regionをさらに細かくborderレイアウトで分けることもできます。

Ext.onReady(function(){
new Ext.Viewport({
layout:'border',
items:[
new Ext.Panel({
title:'CENTER',
width:'100px',
region:'center',
layout:'border',
items:[
{
title:'Child Center',
html:'Child Center',
margins:'0 0 0 0',
region:'center'
},
{
title:'Child North',
html:'Child North',
margins:'3 3 3 3',
region:'north'
},
{
title:'Child South',
html:'Child South',
margins:'3 3 3 3',
region:'south'
},
{
title:'Child East',
html:'Child East',
margins:'0 3 0 3',
region:'east'
},
{
title:'Child South',
html:'Child West',
margins:'0 3 0 3',
region:'west'
}
]
}),
new Ext.Panel({
title:'NORTH',
html:'NORTH PANEL',
margins:'0 3 0 3',
region:'north',
split:true
}),
new Ext.Panel({
title:'SOUTH',
html:'SOUTH PANEL',
margins:'3 3 3 3',
region:'south',
collapsible:true
}),
new Ext.Panel({
title:'EAST',
html:'EAST PANEL',
margins:'0 3 0 3',
region:'east',
collapsible:true
}),
new Ext.Panel({
title:'WEST',
html:'WEST PANEL',
margins:'0 0 0 3',
region:'west',
split:true
})
]
});
});

このようにパネル内をさらに分けて様々なレイアウトを作ることができます。

Ext JS Designerの最新プレビューが公開されています。
Ext JS DesignerはExtjS + AIRで作られたExtJSのUI構築アプリです。
ExtJS本家のブログにスクリーンキャストが載っています。
http://www.extjs.com/blog/2009/10/08/ext-js-designer-preview/

Mac OSでいうInterface Builderに似ています。ただしUIをこのアプリケーションで構築して書き出すことはできません。見るだけです。将来的に書き出せるようになるということです。今回はEditerGridやSlider等追加されたようですUndo/Redoもついてアプリらしくなりつつあります。
新機能でスクリーンショットを撮る機能もついているので地味に使えそうです。

レイアウトの確認など、ざっくりとしたモックを作るのには最適かもしれません。日本語も入力できます。
色々箇所にバグがたくさんありますが今後に期待です。

前回でExt JSを開発する環境がひとまず整いました。今回は実際にExt JSでどのようにコードを書いていくを紹介したいと思います。まずはHello, WorldをExt JSを３つのパターンで使って書いてみることにします。

HTMLを用意する。

まずHTMLファイルを作成して、Ext JSの読み込みます。ext-base.jsは必須のファイルです。ext-all.jsはExt JSのクラスを全て読み込みます。ext-all.jsを使うと実際に使っていないJSファイルまで読み込んでしまいますが、普段はこちらを使うようにします。ext-all.jsを読み込むことでExt JSの機能をフルで使うことができるので、こちらを読み込んで全部Ext JSでExt JSの機能をバリバリ使いましょう。

ext-all.cssはExt JSのデフォルトのスタイルが定義されています。ボタンやパネルなどのExtJSのユーザーインターフェース（UI）はこのスタイルシートに依存しているため、ExtのUIを使う場合は必ず読み込むようにします。自分で作ることもできるようですが、大変なのでこれも全て読み込んで使うことにします。アイコンなども既に定義されているので別途自分で用意しなくても大丈夫です。(あえてCSSをはずすことでExtJSがどのようなDOMを構築しているかを見ることもできます。)

以下が典型的なHTMLのファイルの形になります。ExtJSのファイルを読み込んだあとで自分のアプリケーションのファイルを読み込みます。下の例ではmyApp.jsになっています。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World 2 Ext JS</title>
    <!--Ext JS CSS-->
    <link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
    <!--Ext JS-->
    <script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../js/ext/ext-all.js"></script>
    <!--My App Root JS-->
    <script type="text/javascript" src="../js/myApp.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div class="body">
</div>
</body>
</html>

Viewportを使ったアプリケーションの場合は、ほとんどこのHTMLと同じようになります。

Read the rest of this entry »