谷本 心 in せろ部屋 このページをアンテナに追加 RSSフィード

2006-07-24

[]続・Sortableに閉じるボタンを付けたい。

ダメだ、JavaScript分からん!

と、いきなり弱音から始めましたが。


Sortableに閉じるボタンを付けたい。の続き。


自分で追加したイベントをObserveして、イベント発生時にonUpdateをうまく呼び出す方法が分からなかったので、

結局、「保存」ボタンを押した時に、Sortableの状態をチェックする(serializeを呼ぶ)ようにしました。

つーか、こっちの方が健全かもね。


その辺りも含めたサンプルは、今週中にアップします。

2006-07-20

[]Sortableに閉じるボタンを付けたい。

WebPartsを作る時に、パーツを「閉じる」ためのボタンを付けたいので、

とりあえずscript.aculo.usのSortableに閉じる機能を追加しようかと


、、、思ったんだけど、今ひとつ上手くいかない。

てか、JavaScriptライブラリのソースが理解できん。


Sortableに、ちょこっと手を加えて(removerって属性を追加)

  create: function(element) {
    element = $(element);
    var options = Object.extend({ 
      element:     element,
      tag:         'li',       // assumes li children, override with tag: 'tagname'
      dropOnEmpty: false,
      tree:        false,
      treeTag:     'ul',
      overlap:     'vertical', // one of 'vertical', 'horizontal'
      constraint:  'vertical', // one of 'vertical', 'horizontal', false
      containment: element,    // also takes array of elements (or id's); or false
      handle:      false,      // or a CSS class
      remover:     false,      // or a CSS class
      only:        false,
      hoverclass:  null,
      ghosting:    false,
      scroll:      false,
      scrollSensitivity: 20,
      scrollSpeed: 15,
      format:      /^[^_]*_(.*)$/,
      onChange:    Prototype.emptyFunction,
      onUpdate:    Prototype.emptyFunction
    }, arguments[1] || {});

    // clear any old sortable with same element
    this.destroy(element);

    // build options for the draggables
    var options_for_draggable = {
      revert:      true,
      scroll:      options.scroll,
      scrollSpeed: options.scrollSpeed,
      scrollSensitivity: options.scrollSensitivity,
      ghosting:    options.ghosting,
      constraint:  options.constraint,
      handle:      options.handle,
      remover:     options.remover };

あとは、handleの定義をしている所で、ついでにremoverにもfunctionを定義。

    (this.findElements(element, options) || []).each( function(e) {
      // handles are per-draggable
      var handle = options.handle ? 
        Element.childrenWithClassName(e, options.handle)[0] : e;    
      options.draggables.push(
        new Draggable(e, Object.extend(options_for_draggable, { handle: handle })));
      Droppables.add(e, options_for_droppable);
      if(options.tree) e.treeNode = element;
      options.droppables.push(e);      

      if(options.remover) {
        var remover = Element.childrenWithClassName(e, options.remover)[0];
        if (remover) {
          remover.onclick = function(){Element.remove(e)};
        }
      }
    });

なんてことをすれば(作法的には何かイマイチな気がするけど)

とりあえず、Draggableを閉じるためのCSS Classを定義できる。


で、閉じた時にSortable#onUpdateが走って欲しいんだけど、今ひとつやり方が分からん。

一回ぐらい、上から下まで、ソース読まんとダメかも (^^;

2006-06-05

[]FireBugが便利すぎた。

噂のFireBug0.4を試してみたんだけど、便利すぎた。

  • JavaScriptをステップ実行できる。
  • Ajaxのレスポンスを確認できる
  • HTMLの属性を直接書き換えできる。
  • イベントの発生を確認できる

これ、ホントにJavaScript開発のマストですね。

いままで使ってなくて、すみません。

2006-05-27

[]AdobeのAjaxライブラリが、来るらしい。

WebデザイナーのためのAjaxツール、Adobeの「Spry framework」とは?


Ajaxとか言って、ライブラリがない限り、ただのオモチャだよね。

別に、やろうと思えば何でもできるけど、

仕事で使うことを考えると、コストに見合わない。

逆に、顧客の要件が厳しくなって、困るだけ (^^;;


と言う意味で、こういうライブラリが整備されると単純に嬉しい。

あとは、できる限り、HTMLファイルがScriptに汚染されない事を願う。



そういや、そろそろ、

ASP.NET 2.0のWebパーツライクな機能を、

script.aculo.usとか使って作れるかもね。


勉強がてら、やってみるか。

2006-05-20

[][]javeline teleportって。

S2Javelinと紛らわしいな(汗

さて、以前id:mopemopeさんに、Ajaxを使ったプッシュサーバライクな処理(Cometと呼ばれているらしい)について聞かれたので、簡単にまとめ。チャットを作るイメージで。

  1. Client : Ajaxでサーブレットに問い合わせ。
  2. Server : 現在までのログを返す。
  3. Client : ログを表示。更に現在時刻を「前回問い合わせ時刻」として保持。
  4. Client : Ajaxで再度サーブレットに問い合わせ。引数として「前回問い合わせ時刻」を渡す。
  5. Server : 「問い合わせ時刻」以降に変更があれば、差分を返す。
  6. Server : 変更がなければ、コネクションは繋ぎっ放し。
  7. Server : 変更が発生したら、差分を返す。

以下、繰り返し。

これを実装したのは、もう1年以上も前になるんだけど、当時はHTML + 自前のJS + 生Servletでゴリゴリ実装してました。今回、改めてS2JSF + s2-ajax-SNAPSHOT-5でサクっとチャットでも作ろうかと思って書き始めたら、、、あっさり破綻した orz

なんか、意外と面倒な箇所が多い。


せっかくだから、TeedaのAjax-demoに沿って、やってみるかー。