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

Twitter Updates for 2010-03-11

野村亮之 — Thu, 11 Mar 2010 06:14:00 +0000

Video Analyticsのアップデートをしたのですが、IEとかのパフォーマンスがよくなった気がします。FFも。いいですね今回のアップデート。 #
@extjapan compositefieldの中にdisplayfieldを入れると表示してくれません、、、バグってフォーラムに入れればいいですかね？ #

Twitter Updates for 2010-03-10

野村亮之 — Wed, 10 Mar 2010 06:14:00 +0000

Composite Fieldsキターーーーー #

Twitter Weekly Updates for 2010-03-07

野村亮之 — Sun, 07 Mar 2010 06:14:00 +0000

名古屋勉強会でちょっとだけお見せしたExt Designer情報http://bit.ly/c1iRXL #
@kosei4583 表示してすぐにあたらない場合は、deferを使うといいですよ in reply to kosei4583 #

Twitter Updates for 2010-03-07

野村亮之 — Sun, 07 Mar 2010 06:14:00 +0000

@kosei4583 表示してすぐにあたらない場合は、deferを使うといいですよ in reply to kosei4583 #

Twitter Updates for 2010-03-02

野村亮之 — Tue, 02 Mar 2010 06:14:00 +0000

名古屋勉強会でちょっとだけお見せしたExt Designer情報http://bit.ly/c1iRXL #

Twitter Weekly Updates for 2010-02-28

野村亮之 — Sun, 28 Feb 2010 06:14:00 +0000

@zokinon たしか、独立してXTemplateだけを書くことで回避方法があったはずですよ in reply to zokinon #
本日は、ExtJS勉強会@名古屋です。本日は人数も少なそうなのでゆったりやる予定です。まったり勉強会好きの皆様どうぞご参加くださいw #

ExtJS入門　Ext.XTemplateの補足

佐竹裕行 — Fri, 26 Feb 2010 02:10:36 +0000

Ext.XTemplateの補足というか真髄の機能にテンプレート内でforやifによる制御ができる点です。

Ext.XTempalteでは、テンプレートにセットするデータの値によって処理を分岐したり、配列の値をループで取り出すことができます。
サンプルではダミーのデータ(data)をオブジェクトで用意して、その内容に対してテンプレート側で制御をしながらHTMLを構築しています。

・HTML




    
    ExtJS名古屋勉強会　xtemplateの使い方(for,ifを使う) 

    
    
    
    
    
    
    


    for,ifを使ったXTemplate

・Javascript


Ext.onReady(function(){

    //ダミーのデータ
    var data = {
        name:'株式会社sus4',
        url:'http://www.sus4.co.jp',
        //この配列をループで読み出す
        array:[
            {key:'C',value:'Major'},
            {key:'D',value:'Minor'},
            {key:'E',value:'7'},
            {key:'F',value:'Minor7'},
            {key:'G',value:'dim'},
            {key:'A',value:'aug'},
            {key:'B',value:'add'}
        ]
    };

    /**
     * テンプレート
     * (HTMLに描いたテンプレートではうまく動作しない。)
     */
    var jsTpl = new Ext.XTemplate(
        //ここは普通に{}でセットする
        '{name}',
        '',
            '',
                '',
                    //数字と比較
                    '',
                        '',
                        '',
                    '',
                    //文字列と比較。比較する文字列をエスケープ下シングルクォートで囲む
                    '',
                        '',
                        '',
                    '',
                    //elseの代わりのif分岐

                    '',
                        '',
                        '',
                    '',
                '',
            '',
        '{key} {value} {key} {value} {key} {value}'
    );

    //JSに描いたテンプレートを使用
    var jsTplHtml = jsTpl.apply(data);
    new Ext.Panel({
		renderTo:'js-tpl',
        title:'XTemplateパネル(for,ifを使用中)',
        bodyStyle:'padding:20px;',
        html:jsTplHtml
    });

});

{key}	{value}	{key}	{value}	{key}	{value}

・実行結果

XTemplate for/if

ダミーのデータはオブジェクトです。このデータのarrayプロパティに配列がセットされています。この配列をテンプレートのループで取り出して、HTML構築しさらに各値によってスタイルを設定するようにします。

テンプレートの記述はJavascript側で行っています。～までが一つの制御のくくりになります。


ループを展開する

    {some_value}


ifで分岐する

    {some_value}

という形でテンプレートに制御を記述します。制御の詳しいルールはAPIドキュメントに詳しく書かれています。
いくつかポイントを挙げておきますと

&&,||ももちろん使える。


ループを展開する

    {some_value}

ifでの文字列比較が特殊
テンプレートのif分で文字列の比較を行う場合は文字列にバックスラッシュとシングルクウォートで括る必要があります。



	シングルクウォートで括る。

elseはかけない
elseがかけない為、ifの否定で制御する。例えば



	一つの条件で分岐


	elseの代わり

html側に書いたテンプレートでは動かないことがある。
ExtJSのバージョンにもよるのかもしれませんが、HTMLに書いたforやifを含むテンプレートはExt.XTemplate.fromで読み込んだ場合上手く動作しないことがあります。
Javascript側に書いた場合は、特に問題が起きませんでした。将来的に改善されるかもしれませんが、現状ではforやifを含むテンプレートはJavascript内で記述して new Ext.XTemplate()で読み込むようにします。

このようにテンプレート側だけで簡単な操作は可能になります。サンプルのように任意の項目のCSSを書き換えるような処理はテンプレートで行うとスマートです。

[ExtJS事例紹介]ウェディングステージグレイセル

佐竹裕行 — Thu, 25 Feb 2010 06:51:14 +0000

今回は弊社で作成したExtJSを活用したサイトの紹介です。

Wedding Stage GRACEL（ウエディングステージグレイセル）は、愛知県の北東部に位置する総合結婚式場です。
今回サイトをリニューアルするにあたり管理画面をExtJSのViewportアプリで構築し、トップページやギャラリーなどではExt Coreを活用しています。

サイトはこちらになります。

Wedding Stage Gracel – 瀬戸、尾張旭、長久手エリアの結婚式場ならウェディングステージ　グレイセル

株式会社sus4ニュースリリースグレイセル様Webサイトをリニューアルしました

管理画面
管理画面では、ニュースの投稿、ギャラリーへの写真の追加、お問い合わせの管理などを1画面にViewportアプリで構築しています。

管理画面のサンプル

各項目の管理パネルではグリッドを使用して一覧表示を行い、ソーティングやフィルタリングしてローカルアプリのような操作感でコンテンツの管理が行えるようになっています。
お客様にも基本的な操作は別途マニュアルを確認しなくても、直感的にわかって頂けたようです。
またサーバーとはJSONをやり取りするだけですので、レスポンスも早く動作も軽快です。UIをExt JSに置き換えたことで業務の効率が良くなったのを実感していただけることと思います。

Ext Coreの活用
今回のサイトリニューアルでは管理画面だけでなく、トップページなど公開されているページにも積極的にExtを使用しました。
ExtJSをフルで丸々読み込むとライブラリのJSファイルだけでかなりの容量になってしまいますが、Ext Coreの場合はライブラリだけなら25kb程度です。Ext CoreではDOM操作やアニメーションなどのための便利な機能が詰まっています。今回はトップページのアニメーション、ギャラリーのLightboxなどに使用しています。

トップページ　アニメーション

トップページ

トップページ上部に展開されるアニメーションにExt Coreのアニメーションを使用しています。アニメーション時のDOMの操作もExt行っています。
フェードイン・フェードアウトアニメーションもスムーズでなかなかです。

ギャラリー　lightbox

Ext Lightbox

ギャラリーページでは写真をクリックするとLigthboxで写真を開きます。
LightboxはPrototype + Scriptaculousが有名ですが、今回はExt Coreのlightboxプラグインを使っています。
見た目は本家のLightboxそっくりですが、中身はExtで動いています。

今回は管理画面だけでなく、公開ページにもExtを使ってリニューアルを図りました。管理画面の直感的な操作に対する反応はなかなかよいので、実際の業務のなかでUIの置き換えによる業務効率の実感していただければありがたいです。またExt Coreを使ったアニメーションの動作もなかなかよさそうなので、これからも積極的に使っていこうと思います。

ExtJS入門　DomHelperの使い方3　位置指定の追加と削除

佐竹裕行 — Thu, 25 Feb 2010 06:47:22 +0000

DomHelperで要素を追加するの追加項目です。
DomHelperで要素の追加を行うときappendでは対象の要素の子の要素として要素を追加しましたが、insertBefore,insertAfterでは対象の要素の前後に要素を追加します。
今回はあえてパネルを使わずにやってみます。

DomHelperについてはこちらにサンプルがあります。

サンプルコード3 DomHelperを使った位置指定の追加とDomQueryを使った削除

・html





    
    ExtJS名古屋勉強会　DOMHelperの使い方 DOMの追加と削除

    
    
    
    
    
    



    位置を指定して追加する

・javascript


Ext.onReady(function(){
    //初期値の設定
    var bcnt = 0;
    var acnt = 0;
    var bias = 3;
    var bchar = 'M';
    var achar = "W";

    var before = function(target) {
        Ext.DomHelper.insertBefore('insert-target',{
            cls:'add',
            html:String.leftPad(bchar,bcnt * bias,bchar)
        });
        bcnt++;
    };

    var after = function(target) {
        Ext.DomHelper.insertAfter('insert-target',{
            cls:'add',
            html:String.leftPad(achar,acnt * bias,achar)
        });
        acnt++;
    };

    var remove = function(target) {
        //任意のDOMを見つけるにはDomQueryを使う。ここではCSSクラスがaddのもの全て。
        var elems = Ext.DomQuery.select('.add');
        Ext.each(elems,function(o,cnt,array){
            Ext.removeNode(o);
        });
        bcnt = acnt = 0;
    };

    //ボタンを作成
    new Ext.Button({
        renderTo:'beforeBtn',
        text:"追加(Before)",
        handler:before
    });

    new Ext.Button({
        renderTo:'afterBtn',
        text:"追加(After)",
        handler:after
    });

    new Ext.Button({
        renderTo:'bothBtn',
        text:"前後に追加",
        handler:function() {
            before();
            after();
        }
    });

    new Ext.Button({
        renderTo:'removeBtn',
        text:"追加したDOMを削除",
        handler:remove
    });
});

・実行結果

DomHelper DOMの追加と削除

ボタンを4つ作って各ボタンに、直前に追加、直後に追加、両方に追加、削除を割り当てています。ボタンが押されると、罫線の前後の所定の位置に要素を追加します。
またこのサンプルではDomQueryクラスを使って追加要素を探して、削除する処理も追加しています。DomHelperはDOMの生成や追加を行いますが、DomQueryはDOMツリーから任意の要素を探すことができます。今回はDomQueryの使い方について詳しく解説しませんが、追加した要素をCSSのクラスから探し出す処理を行っています。

グリッドパネルやツリーパネルの構築はブロックを組み立てるようなイメージですが、Ext.Panelは真っ白のキャンバスに絵を描いていく感覚に近いと気がします。パネルの中のDOMを自由に操れると、ExtJSの派手なUIの裏にある奥深いDOMの世界を体感できるようになります。ExtJSでDOMをいじって初めてExtJSをいじったことになると何処かで聞いたことがありますね。

Twitter Updates for 2010-02-25

野村亮之 — Thu, 25 Feb 2010 06:14:00 +0000

本日は、ExtJS勉強会@名古屋です。本日は人数も少なそうなのでゆったりやる予定です。まったり勉強会好きの皆様どうぞご参加くださいw #