AtlasCore JavaScript code
http://research.microsoft.com/users/som/blog/AtlasCore.htm

うーん、いまいちAtlasとLiveGadgetの関係が理解しきれない。

いわゆるフローティングレイヤーにFlash載せて、ブラウザ上を動く何かとか作ったりするわけですが、Flash上の閉じるボタンを押した瞬間にFireFoxが音もなく落ちる現象発生。

FlashからはJavaScriptの関数を呼び出して、その関数が当該レイヤーと子であるFlash本体を消していて、とりあえずJS的にはこんなコード。

closeFlash: function() {
  Element.hide('test_div');
  Element.remove('test_swf');
 
  var so = new SWFObject("/swf/test.swf", "test_swf", "100%", "800px", "8", "#000000");
  with (so) {
    addParam("wmode", "transparent");
    addParam("allowScriptAccess", "always");
    write("test_div");
  }
}

あ、閉じたあと、またすぐ復旧できるようにFlashのオブジェクトを再作成しています。

Flash側でExternalInterfaceを使ってJSの関数を読んでいるのですが、どうやらその辺がくさい。
ExternalInterfaceは、戻り値を取るので、JS側の処理が終わると、Flashに制御が戻る。
しかしその時点でFlashのオブジェクトはすでに消されているので、行き場所がなくてブラウザが落ちる、ということでしょう。
IEは落ちないんですけどね。プラグインのアクセス方法とメモリの制御に関する違いか。

とりあえず、解決策として戻り値だけ先に返すようにした。
実際にオブジェクトを消去するのは、タイマーで少し遅延させてから。

closeFlash: function() {
  this.closeFlash2.callTimeout(200, this);
  return true;
},

closeFlash2: function() {
  Element.hide('test_div');
  Element.remove('test_swf');
 
  var so = new SWFObject("/swf/test.swf", "test_swf", "100%", "800px", "8", "#000000");
  with (so) {
    addParam("wmode", "transparent");
    addParam("allowScriptAccess", "always");
    write("test_div");
  }
}

prototype的な書き方で遅延処理を実行するために今回使ってみたのは以下。

Kazuho@Cybozu Labs: setTimeout をオブジェクト指向にしてみる
http://labs.cybozu.co.jp/blog/kazuho/archives/2006/12/oo-settimeout.php

便利だ。

カラーパレットが必要になって少し探してみた。
prototypeとか使って、最近の流行りっぽく作ってるものを主に調査。

付録3　Dojo：Widget カラーパレット (Color Palette)
http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter82/003/index.html

最近話題のDojo。しかしこれはちょっと…
見た目がイマイチ…

というワケで、見つけたのがこちら。

ColorJack: DHTML Color Picker
http://www.colorjack.com/plugin/

イケてる。
しかもクリエイティブコモンズライセンス。

Creative Commons Deed
http://creativecommons.org/licenses/by/2.5/

簡単に組み込めるし超便利。

あー、そっか。背景を一色に塗りつぶして、PNGのアルファブレンディングで合成すれば明度・彩度のカラーチャートが作れるのね。
IE6、FF2.0、Opera9で正しく表示されることも確認。
色減らしたい場合も改造簡単そうだし。
これはJS上のグラフィックステクニックとして色々使えそう。

prototype.jsをちょっと拡張。

Array.prototype.findByTagName = function(tagName) {
  return this.find(function(value, index) {
    return (value.tagName && value.tagName.toUpperCase() == tagName.toUpperCase());
  });
};

ノードリストから、特定のタグの最初の要素を返す。
直下の子ノードの中からある要素を探したりするのに使う。
こんな感じで。

var elem = $A(node.childNodes).findByTagName("DIV");

getElementsByTagNameだとツリー以下を全部検索してしまうのでね…

qooxdoo ≫ News ≫ qooxdoo 0.6.3 released
http://news.qooxdoo.org/qooxdoo-063-released

リリース早いなー。

今回はクラス名の変更とかイベントハンドラ関係が変わったらしい。
あと、自動以降サポートツールが提供されてます。

qooxdoo ≫ Migration Support
http://qooxdoo.org/documentation/user_manual/migration_support

Pythonで記述されたスクリプトで、jsファイルを0.6.2から0.6.3に対応するように変更してくれるようです。
ちょっとまだ未実験。

qooxdoo 0.6.2でサンプルに入ってたtableをちょっと変更してチェックボックスの変更ができるようにしてみた。

基本的には qx.ui.table.SimpleTableModel を作成して、 setColumnEditable で目的の列を true に設定すれば、変更可能になる。
チェックボックス表示にしたい場合は、列の値にbool値を入れて、レンダラをセットすればOK。

setDataCellRenderer(2, new qx.ui.table.BooleanDataCellRenderer());

この状態で値を変更しようとセルをダブルクリックすると、セルにtrue/falseの文字列が出てきてしまうので、CheckBox 用の CellEditorFactory をセットしてやる必要がある。

setCellEditorFactory(2, new qx.ui.table.CheckBoxCellEditorFactory());

そんな感じでまとめたのが以下。
マウス操作だけでテーブル内のチェックボックスを編集可能。

// table model
var tableModel = new qx.ui.table.SimpleTableModel();
tableModel.setColumns([ "ID", "テキスト", "チェック" ]);
var rowData = [];
tableModel.setData(rowData);
tableModel.setColumnEditable(2, true);

// table
var table = new qx.ui.table.Table(tableModel);
with (table) {
  set({ width: '100%', height: '100%', border:qx.renderer.border.BorderPresets.getInstance().thinInset });
  setMetaColumnCounts([1, -1]);
  getSelectionModel().setSelectionMode(qx.ui.table.SelectionModel.SINGLE_SELECTION);
  getTableColumnModel().setDataCellRenderer(2, new qx.ui.table.BooleanDataCellRenderer());
  // CheckBox 用の CellEditorFactory をセット
  getTableColumnModel().setCellEditorFactory(2, new qx.ui.table.CheckBoxCellEditorFactory());
  setColumnWidth(0, 80);
  setColumnWidth(1, 200);
  setColumnWidth(2, 100);
};
HorizontalBoxLayout_1.add(table);

これで解決…と行きたかったのだが、どうにも、
セルをダブルクリックして編集可能状態に→シングルクリックでオン/オフ切り替え→確定
という手順を踏まないといけない…めんどい。
何とかならんものか。

あとついでにセルのデータが変更されたときに何かする方法。

table.get("tableModel").addEventListener("dataChanged", function(e) {
  var col = e.get("data")['firstColumn'];
  var row = e.get("data")['firstRow'];
  var value = e.get("target").getValue(col, row);
  …
});

範囲が必要な場合は lastRow と lastColumn も使える。