Home

code:x

2月短いのに。

ども、小堤です。

ありがたい話なんですが、今月やう゛ぁぃくらい忙しいです。

タダでさえ短いのに・・・。

Ext JSの方もいろいろやることありーの、携帯関連のxFrameworkPX対応とか、あとFlashLiteとxFrameworkPXの連携？動的生成？の調査とか・・、おまけにxFrameworkPX 3.5 RCリリースもあるし、さらに制作もあるし・・・てんやわんや。

まぁ何もすることがないより全然いいんですが、気合い入れて乗り切らないとバタンQしてしまいそう。xFrameworkPX は、早めに3.5正式版だしちゃいたいですなぁ・・機能UPリストはある程度できてるので、3.5.1とかUPしていきたいですわ。

いま思い描いているものが実装おわれば、PCサイトも、携帯サイトも、携帯Flashも、Ext JSなどのRIAコンテンツも・・・大概いけるので。もういっぽ。まぁ10月に初めて、3月にリリースできるわけですが、がんばったほうか。

とりあえず、外部的圧力(笑）で、Ext JSの実践開発ガイドをそろそろまじめに考える必要がでてきたので、それも月末あたりから・・という気持ちで・・・はぁ。

実践開発ガイドは、キンドル？っていうんですか？ｗ　Amazonの端末・・あれでだそうかなぁという話だったりして、それから紙ベースかな、みたいな。

で、僕キンドルもってませんけど？(笑）かう？えー、いらなくなーい？でも、作るならいるかぁ。 ぼかぁiPad買うつもりなんですが？

で、さらにググっても、海外から購入しか見当たらない、どっか代理すれや。買う気うせるだろ。そこまでほしくないんだから・・・。

ってことで、Ext JS実践開発ガイドは、アウトプットは、完全に未定ｗｗｗｗ だけどＥｘｔ.Directも含めた、超初心者からのモダンＪａｖａＳｃｒｉｐｔに関する点から、実際のコンポーネント利用までのExt JS 実践開発ガイドは、仕上げちゃいます。

最近、実務でExt JS使ってるんで、実際はその先のアプリケーションのこつとか、そこらへんも考えたい・・・実際だしてみて、みんなが買ってくれれば・・・ （ぇExt JS 実践開発ガイド アドバンスとかありえるかもね。

ってことで、 Ext JS 実践開発ガイドは、TextMate2ばりに気長にまってください（でないってことじゃないよ！）

さー、一回かえろー。

Ext.Fx stopFxの挙動と強制停止拡張

ども、引き続き、小堤です。

さて、ちょいアニメーション関連を調査しているんですが、stopFxの挙動、イメージとちがーーう！（つ＿；）

ってことで、実験してみました。

http://extjs.xenophy.info/2010020301.html

停止ボタンを押すとstopFxをコールするんですが・・・・いきなり終了の状態（アニメーション完了の状態）になります。

え～、こぉ～まぁ～るぅ 。（＞＿＜）。

まぁあまりよろしくはないのですが、強制的にアニメーションを停止させる方法として、次のような拡張を、Ext.extender(前に話したやつ)にぶっ込みます。

// {{{ Ext.Element

Ext.Element.addMethods({
    forceStopFx : function() {
        Ext.lib.AnimMgr.stop();
    }
});

// }}}

Ext.lib.AnimMgr.stop();を呼ぶだけです。
実は、Ext JSのアニメーションは、アダプターによって処理される場所が異なるんですが・・・・Ext.libしたのAnimとかそこらへんがアニメーションをするオブジェクトなんですね。
jQueryアダプターとかまだ試してないんでわからないですが、まぁ・・大丈夫だべ。

で、Elementクラスにインプリメントしちゃいます。
これで、el.forceStopFx()の完成。

具体的に、Ext.lib.AnimMgr.stop();で、一時停止、再開作ってみました。

http://extjs.xenophy.info/2010020302.html

ってことで、これでアニメーション中に強制的に止めて・・次のトランジションにいくとかの、処理を書き始めるなど。

追記

上記の方法だと、その後のアニメーションでcallbackが呼ばれなくなる・・・なんか考えないと・・。

Ext.Fx durationの罠

ども、小堤です。

先ほど、やっと解決？したので・・メモ。

いやぁ・・・durationあるじゃないですかぁ・・・Ext.Fxの。

これ、アニメーションをどれくらいの時間で実行するかを指定するオプションなんですが、これね、0設定すると1になります(笑)

要するに、未指定時は1秒なんですね、0はif文でfalse判定なんで、1になるわけです。

なんで、限りなく0に近い値を設定するしかいまのところナス。

duration: 0.00000001

とかね。

まぁ・・・本来の解決はまだ終わって無くて・・・やってられナス。

Ext.ux.plugins.FocusActive

ども、小堤です。

やっと起きることができた・・・なんだか・・なぁ(笑)

さて、先日書いたExt.ux.plugins.FocusActiveです。

/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */

// {{{ Namespace

Ext.ns(‘Ext.ux’, ‘Ext.ux.plugins’);

// }}}
// {{{ Ext.ux.plugins.FocusActive

/**
 * Ext.ux.plugins.FocusActive
 *
 * @author  Kazuhiro Kotsutsumi <kotsutsumi@xenophy.com>
 * @version 1.0
 */
Ext.ux.plugins.FocusActive = function() {

    var me = this;
    var overCls = ‘x-btn-over’;
    var active = false;

    // {{{ init

    me.init = function(btn) {

        btn.on(‘afterrender’, function() {
            me.targetEl = btn.el;
            btn.btnEl.on(‘focus’, me.onFocus, me);
            btn.btnEl.on(‘blur’, me.onBlur, me);
        }, me);

        btn.on(‘mouseout’, function() {
            if (active) {
                me.targetEl.addClass(overCls);
            }
        }, me);
    },

    // }}}
    // {{{ onFocus

    me.onFocus =  function(e, t) {
        active = true;
        me.targetEl.addClass(overCls);
    }

    // }}}
    // {{{ onBlur

    me.onBlur =  function(e, t) {
        me.targetEl.removeClass(overCls);
        active = false;
    }

    // }}}

};

// {{{ Register ptype

Ext.preg(‘focusactive’, Ext.ux.plugins.FocusActive);

// }}}

/*
 * Local variables:
 * tab-width: 4
 * c-basic-offset: 4
 * c-hanging-comment-ender-p: nil
 * End:
 */

で

http://extjs.xenophy.info/2010020201.html

2つボタンがありますが、2つめがこのプラグインを設置したときの動作です。TABキーで、フォーカス移動してみると違いがわかります。

プラグインなんで、必要なところにぶっこめばOKです。ボタンのコンフィグオプションに、plugins: [’focusactive’]を追加すれば設置完了。もちろん、 Ext.ux.plugins.FocusActiveは読み込んでね。

ってことで、忘れないうちに書いたなり！

最高のログイン画面？

ども、小堤です。

もう、2月ですなぁ・・はぇ～。

spreadoffice.jpg

先日、作る！といったので地道に作ってます。

で、ログインの画面あたりからにょっこりやってるわけですが。

まだ途中半端ですが、もうすぐできます。

スクリーンキャストを見る！

なんだかんだ、このログイン画面とかExt　JSで実装しようと思うと結構労力かかるんですよね。まぁウィンドウでもだして入力させるだけならすぐですけど、フォーカス管理や、キー操作のみでの操作とか、ブラウザの戻るボタンでの制御とか・・・ここら辺をじっくり作ってみました。

で、あと数日でできると思うのですが・・・まぁ悪い癖なんですが・・・またまとめようと・・Spread Office作りながら、実はExt Annexというパッケージも同時に作っています。

先に行っておきます。公開します。GPLライセンスで。

まぁうちの会社のExt アプリケーションを開発する上でのベース。商用はライセンス販売できるくらいまでちゃんとしたい、きぼんぬ。

で、Ext Annexってなによ？って話なんですが、RIA Application Platformという位置づけで、ログイン一つとってもそうだし、ログイン後、Spread　Officeでも実装しますが、ユーザーの管理とか、管理画面系などでよく使うものの基底クラス（そのままでも使えるけど、基本継承してカスタマイズできる）を最初からぶっこんでおくので、カスタマイズして、ページ（前にお話ししたExt.ux.Screen）でページを作ってぶっこんでいく開発スタイルを実現するためのもの。

手前味噌で申し訳ないですが、xFrameworkPXのxFrameworkPX_Controller_ExtDiret（Ext.Directコントローラー）で実装します。まぁ逆に言えば、さっくり使えます。CakePHPのモジュール作成とかと一緒です、ほとんど。基本機能はできあがっているんで、サーバーサイドもすぐ使えます。 というカタチにしたい気持ちでいっぱい。

最近、Ext　JSのお話を色々いただくので、操作せいのいいものや、そもそもアプリケーションのRIAのカタチとしてこういうのがいいんじゃね？っていうのを訴えていければなぁ・・とおもっていたり、まぁ、一応GPLでオープンにするので、手伝ってくれる親切な人がいると好きになります（ぇ

あと、ちょっとわかりにくかったと思いますが、Ext JS標準では、ボタンにキーボードでフォーカスしたときに、見栄え変わらないんですよ。FireFoxとかなら点線でますけど、文字に。他のブラウザだとフォーカスあたってんのか、あたってないのかわからないんで、フォーカス当たると、マウスオーバーと同じ効果をするボタン用のプラグインも作成しました。Ext.ux.plugins.FocusActiveっていうプラグインです。

結構使えると思うので、近々また紹介します。

今日は寒すぎるし・・・やることいっぱいだし・・・でも・・・ねちゃおうかな・・明日がんばろうカナ・・かなぁ・・（・＿・。

Ext.extender.js

Ext JS技術情報

ども、小堤です。

はぁ・・・今日も結局寝ることは許されないのねぇ。

で、Ext.extender.jsについてです。

これは、僕がExtオブジェクトを拡張するために使っているファイルなんですが、紹介します。まだ3個しかないし。まぁまだ全部ネタ帳から移植してないんで。

/*!
 * Ext.extender
 * Copyright (c) 2006-2009 Xenophy.CO.,LTD All rights Reserved.
 * info@xenophy.com
 * http://www.xenophy.com/
 */

// {{{ Ext Extender

Ext.apply(Ext,{

    // {{{ maxZindex

    /**
     * DOMツリー内のzindex最大値を取得します。
     *
     * @return zindex最大値
     */
    maxZindex : function() {

        var ret = 0;
        var els = Ext.select(‘*’);

        els.each(function(el){

            var zIndex = el.getStyle(‘z-index’);
            if(Ext.isNumber(parseInt(zIndex)) && ret < zIndex) {
                ret = zIndex;
            }

        }, this);

        return ret;
    },

    // }}}
    // {{{ getScrollPos

    getScrollPos: function() {

        var y = (document.documentElement.scrollTop > 0)
            ? document.documentElement.scrollTop
            : document.body.scrollTop;
        var x = (document.documentElement.scrollLeft > 0)
            ? document.documentElement.scrollLeft
            : document.body.scrollLeft;

        return {
            x: x,
            y: y
        };

    }

    // }}}

});

// }}}
// {{{ String

String.prototype.endsWith = function(suffix) {
  var sub = this.length - suffix.length;
  return (sub >= 0) && (this.lastIndexOf(suffix) === sub);
};

// }}}

maxZindex

Ext.WindowMgr.zseed = Ext.maxZindex();

のようにしてつかいます。
WindowMsg.zseedはデフォルトで9000なんですね、自分でDIVタグのzindexを10000とかにしちゃうと、普通にExt.Windowを生成すると裏に隠れちゃうんで、そういうときに便利かもですね。
固定で30000とか設定するのかっこわるいでしょ？

getScrollPos

画面がスクロールしたとき（したに、右にながいコンテンツの場合）起点（左上）からどれだけスクロールしているかを取得できます。
xFrameworkPX Debug Toolsのアイコンみたく、スクロールしてもついてくるてきなもののときにやくにたちますね。

ちなみに、つぎのようにつかいます。

// ウィンドウスクロールイベントリスナー追加
Ext.fly(window).on(’scroll’, function(e){
    var pos = Ext.getScrollPos();

}, this);

上記のようにするとスクロールイベントにリスナー追加できます、そのときに位置情報を取得できます。

あと、おまけで。

endsWith

Stringに追加しているので、文字列から直接使えます。
これ、最後がこの文字になってる？っていうチェックにつかいます。

if ("test.html".endsWith('.html')) {
    // 拡張子が.htmlの時の処理
}

まだ、あるんですがネタ帳から移植すんでないので・・そのうちまた更新します。
ちなみに、これもゼノフィサイトにUX共々のっけるともりでーす。

ああ・・最近ブログにまじめ。ファミチキなう！ゞ（・＿・）ノしたい。

スクリプトタグは消してもOK

Ext JS技術情報

ども、小堤です。

実験していてわかったんですが、「スクリプトタグは消してもOK」ということがわかりました。

考えてみれば当たり前か。読み込まれたときにJSコードが実行されるだけだもんね。CSSの場合はlinkタグを消すとCSSが無効になりますけど、スクリプトタグは違います。ちなみにIE8とかCheromeとかFireFoxとかSafariで試してうまくいったので採用。

なんで、そんなことをするのか？

先に書いた、Ext.ux.Screenも同じですが、Ext JSのみならずJSでインタラクティブなコンテンツを作成されてる皆さん。僕もその一員ですが、聞きたいことがあります。

「DOMの掃除って意識していますか？」

はずかしながら、Ext　JSをはじめたころは全くに気にしていませんでした。これ、操作するにつれて隠してあるだけだとCSSセレクタの速度とか、画面に表示される描画速度が遅くなるんです。アプリケーションが大きくなってきたらなおさら。今のうちに何とかしておきたいですよね。

で、題名通り、スクリプトタグも消しましょう(笑）　いらんタグはぽいぽいです。HTMLソース見れば残ってても、DOMツリーからは消えてる。普段の逆ですね。

spreadoffice.jpg

前にお話しした、Spread Officeの開発をちまちまやってて、技術検証しながらやってるんですが、ログイン画面途中までしか作ってないですが、スクリーンキャストでとってみました。

スクリーンキャスト

この、ページを表示するのに、10個以上のJSファイルを読み込んでいますが、最後FireBugで確認したときに、スクリプトタグが存在しないことが確認できます。ちなみに、僕はBODYにスクリプトタグ入れる派です。ローディングマスクをかけて、JSの読み込み時間を演出できますからね。しなくてもいいけど。

ってことで、最近Ext　JSのお仕事も増えてきて、世間的にも去年よりExt JSを聞くようになった気がします。ということは、これからたくさんアプリケーションが作られていくわけで、クリティカルな解決策やセオリーは大事になってきます。 うちの会社では、もう2年近くやってきている実績があるので、業務アプリケーションを作る上でのノウハウはしっかり貯めてあります。

このDOM削除もその一つですけど、こういうのちゃんとできるかできないかで低スペックPCで遅いとか、使ってるとだんだんおそくるんだよねぇとか、お客さんの嫌な(笑)台詞を笑ってかわせるようになればいいですね。

※Spread　Officeの画面は、なにかと出てくるかもしれません・・・ただスクリーンキャストが多いと思います。売り物になる予定なんで、ソースだせません、ごめんなさい。 みれる段階まできたらたぶん前に書いた暗号化します。ただ、小出しになりますが、ノウハウはちょいちょい書いていくつもりです。あと、相変わらず落ち着かないんですが(爆）落ち着いたら、ゼノフィのホームページに各UXのページとか作るつもりでいます。あと、どっかで実践開発ガイド再開させます。

あ、5時すぎてる・・・

Ext.ux.ScriptLoader

Ext JS技術情報

ども、 小堤です。

なんだかJSコード書いてるの、まだギリ楽しいので書いてます。

さて、題名の件です。いくつかぐぐると、JavaScriptのローダーが存在します。

でも、Ext JS使ってるなら、Ext JSっぽくかきたいじゃん。

ってことで作りました。

Ext.ux.ScriptLoaderです。

http://extjs.xenophy.info/ScriptLoader/

処理は、sample1～5.jsを次々読み込んで、それぞれの定義されたファンクションを呼ぶだけなんですが、ポイント！

  • それぞれのJSコードが読み込まれたときのコールバックをExt JS風味にかける。
  • 全部読み込み終わったときのイベントを設定できる。

で、App.jsをみてみると

App.js

Ext.onReady(function(){

    var loader = new Ext.ux.ScriptLoader({
        listeners: {
            ‘load’ : function() {
                alert(“すべての読み込みが完了しました。”);
                sample1();
                sample2();
                sample3();
                sample4();
                sample5();
            }
        },
        items: [{
            src: ‘./scripts/sample1.js’,
            charset: ‘UTF-8′,
            type: ‘text/javascript’,
            callback: function(id, loader) {
                alert(“sample1 loaded”);
            },
            scope: this
        },{
            src: ‘./scripts/sample2.js’,
            charset: ‘UTF-8′,
            type: ‘text/javascript’,
            callback: function(id, loader) {
                alert(“sample2 loaded”);
            },
            scope: this
        },{
            src: ‘./scripts/sample3.js’,
            charset: ‘UTF-8′,
            type: ‘text/javascript’,
            callback: function(id, loader) {
                alert(“sample3 loaded”);
            },
            scope: this
        },{
            src: ‘./scripts/sample4.js’,
            charset: ‘UTF-8′,
            type: ‘text/javascript’,
            callback: function(id, loader) {
                alert(“sample4 loaded”);
            },
            scope: this
        },{
            src: ‘./scripts/sample5.js’,
            charset: ‘UTF-8′,
            type: ‘text/javascript’,
            callback: function(id, loader) {
                alert(“sample5 loaded”);
            },
            scope: this
        }]
    });
    loader.load();

});

まぁ、見ての通りです(笑）
itemsに、読み込みたいJSの定義をオブジェクトリテラルで設定します。callbackとscopeでコールバックの設定をします。これが個々のJSコードが読み込まれたときに呼び出されるコールバック関数です。
で、ScriptLoaderは、全部読み込み終わったらloadイベントを発火しますんで、onかlistenersでイベントリスナー追加すればハンドリングできます。
また、読み込みを開始するのは、ScriptLoaderのloadメソッドです。

以上！

簡単だし、Ext JSテイストな書き方できるでしょ。
ちなみに、個々のイベントハンドラの引数は、スクリプトタグのID、そして、ローダー自身のオブジェクトが格納されてきまーす。

ソースコードは、これ＞http://extjs.xenophy.info/ScriptLoader/ScriptLoader.js

【とりあえずできた編】そのアプリケーション1000ページ出せますか？

Ext JS技術情報

ども、小堤です。

やっぱ動きは早めに！ってことで、実装完了しました。

まだ、いくつか制限はありますが、百聞は一見にしかず！みてみればわかります。

extuxscreen_1264617827206.png

仕様

メニューを1000個作って、ページ（パネル）を1000個切り替え表示する。

通常のやり方で実装した場合

 http://extjs.xenophy.info/Screen/examples/unuse.html

Ext.ux.ScreenPanel/Ext.ux.layout.ScreenLayoutを利用した場合

http://extjs.xenophy.info/Screen/examples/index.html

起動するまでの時間を見比べてください。雲泥の差です。

なぜ、このようなことが起きるか？

Ext.PanelはExt.Containerを継承したクラスです。このExt.Containerは、自分自身をレンダリングする際に、子供のアイテムもレンダリングします。

Cardレイアウトを使用すると、非表示になりますが、DOMは存在しているわけです。従って、起動時にパネル用のDIVタグが1000個生成されます。

Ext.ux.ScreenPanelとExt.ux.layout.ScreenLayoutは、親になるコンテナのアイテムをactiveItemで指定された対象のアイテムしかレンダリングしません。

切り替え時(setActiveItem)に、表示していたコンポーネントを破棄します。

なので、1つしか生成されないので処理は１／１０００になるわけです。

ソースコード

この記事みて「ほぉ～ 」って人はそれなりにやってるひとだとおもうので・・・HTMLないのリンクからDLしてくださいｗソース。

未実装とか

  • activeItemがまだ数値でしか指定できないので、idとオブジェクトに対応する。
  • バグないか探す。
  • ちゃんとリリース用のコメント書く
  • パネルの中にグリッドとかいれてもっと重いパネルにして試す。
  • 一段楽したらフォーラムに書き込んでみる？

業務アプリケーションで、コンポーネントの数が多くなると、表示するまではいいんですが、操作しているとどんどん遅くなる（IE6のメモリリークじゃなくて）可能性は、普通に作っていると多々あるわけです。

これらを解決する策として、もう少し煮詰めマース。

追記

お知らせ

完成しました。

http://extjs.xenophy.info/Ext.ux.Screen.zip

上記からDLしてください。IDの対応はしました。

で、実際やってみたのですが、ここに書いてあるサンプルただパネルにテキストが表示されているだけですが、ArrayGridサンプルのグリッドを表示してみたところ、unuseの場合（通常の場合）ハングします。スクリプトを停止しますか？とかいわれますが、Ext.ux.Screenを使えば1000個でもいけました。ちょっとパネルとかメニューを生成する部分をJSで行っているので、ここも実際に手書きだともっとはやいと思います。

こつとしては、多様せずに、大枠となる機能で利用するといいかなぁと思います。まぁアプリケーションの画面切り替えでCard使う最初の部分をScreenに切り替えるだけでいけちゃうので、便利じゃないっすかね。珍しく（？）クレバーなコード書いた気がする（笑 　ほめてほめてー（・＿・。

Ext.menuアイテムの親はちゃんとクリックできないようにして！

ども、小堤です。

細かいことでもちゃんと書いといた方がいいのかなぁ、と皆さんと会うと思ったりするわけで。

メモっときます。

メニューを多階層にした場合、親のアイテムをクリックしたときに、メニューが消えちゃいますよね？

http://www.extjs.com/deploy/dev/examples/menu/menus.html

このデモの左端のメニュー選んでみてください。まだ子供があるのでそっちを選択したいのに間違ってクリックしちゃったらメニュー消えるんですね。

でも、これ使いにくくないですか？

で、セオリーとして、親にはちゃんと消えないようにする処理を入れてあげましょう。

それは、コンフィグオプションのhideOnClickをfalseに設定するです。

具体的にやってみました。

http://extjs.xenophy.info/2010012801.html

まぁ、Ext.ux.Screenでたくさんのメニュー作ってるときにふと思い出したので。HTML内にJS入れてあります。ソースでみてくだはれ。

ってこで、ちゃんとExt JSのこと書いたからね。

Home

Recent Entries
Categories
Archives
Search
Feeds
Meta
Affiliate

Page Top