qx.ui.window.WindowをModalWindowで開く時にはDocument本体にaddしないといけない。
そうしないと、開いた瞬間、全てのWidgetが操作を受け付けなくなる。
あ。あと、表示位置がズレたりする。

At a glanceのサンプルから拾ってきたコードをちょっと修正。

var doc = qx.ui.core.ClientDocument.getInstance();
var dialogEditFrage = new qx.ui.window.Window("Edit", "icon/16/editor.png");

with(dialogEditFrage) {
  setSpace(300, 250, 300, 160);
  setModal(true);
  set({ moveable: true, showMinimize: false, showMaximize: false, showClose: false });
 
  …
}

var btnOpen = new qx.ui.form.Button("ダイアログを開く");
btnOpen.addEventListener("click", function(e) {
  dialogEditFrage.open();
});

HorizontalBoxLayout_2.add(btnOpen);
doc.add(dialogEditFrage);

qooxdooのappearイベント

 やっぱりタブ切り替え時に毎回createイベントが発生するというのは幻覚だった。
タブを切り替えて、初回表示したときに発生するけど、そこからさらに他のタブに切り替えて、またそのタブに戻すと発生しない。
まぁ、つまり初回表示時にcreateしているって事ですかね。

結局時間ないので今回は初期状態でタブを選択しないことで回避。
今後の要調査課題。

qooxdooのイベントを列挙してみた

全然OKじゃなかった。
appearにしたら、ページ表示時にイベント発生しまくって困った。
TabViewPageをaddしている最中に出るっぽい？
よくわからない。

TabViewButton_1.setChecked(true);

これを入れなければ発生しまくり事態は回避できるみたいだけど…
タブはあらかじめ選択状態にしておきたいし…

で、とりあえずcreateにしてみたら直った。
ちゃんとタブ切り替え時にイベントが発生する。
うーん、謎。

appearの方は発生タイミング調べてみる必要がありそう。

とりあえず、SjaxでのAPIアクセスを汎用的にすべく、APIのレスポンスを連想配列のオブジェクトで返す関数を書く。

XMLをJavaScriptオブジェクトに変換するために[JSAN] XML.ObjTree – XML～JavaScriptオブジェクト変換クラスを使ってみることにした。

accessToAPIwithSjax : function(method, objParams) {
  // SjaxでAPIにリクエスト
  objParams['Method'] = method;
  var myAjax = new Ajax.Request(
    '/api/',
    {
      method: 'post',
      parameters: $H(objParams).toQueryString(),
      asynchronous: false
    }
  );
  var respXml = myAjax.transport.responseXML;
  var xotree = new XML.ObjTree();
  var data = xotree.parseDOM( respXml.childNodes[1] );
  return data;
},

エラーチェックとかはしてないけど。

var result = accessToAPIwithSjax('GetHogehoge', { param1: 'foo', param2: 'bar' });
alert(result.DocRoot.status);

みたいな感じで使える。ボタン押した時のイベントとかで、同期モードアクセスは便利。

prototype.js 1.4でのAjax同期取得

 あぁ、なんだ。XMLHttpRequestオブジェクトのresponseXMLを読めば良かったのか。
で、XMLHttpRequestオブジェクトはtransportを見ればいいのね。

var myAjax = new Ajax.Request(
  url,
  {
    method: 'post',
    parameters: params,
    asynchronous: true,
    onComplete: function(originalRequest) {
      var respXml = originalRequest.responseXML;
      …
    }
  }
);

これが、

var myAjax = new Ajax.Request(
  url,
  {
    method: 'post',
    parameters: params,
    asynchronous: false
  }
);
var respXml = myAjax.transport.responseXML;
…

こう。

onCompleteの中身を出すだけでほぼ完了。onComplete自体は書いてあっても呼ばれないっぽい。

onLoading: function() {
  alert('onLoading');
},
onCreate: function() {
  alert('onCreate');
},

これらも実行されず。まぁ、しょうがない。

qx.ui.listview.ListViewのメソッドにセレクションに関するものがなかったので、まさかqx.ui.form.Listの方でしかできないのかと思ってたら、やっぱりできた。

var ListView_1 = new qx.ui.listview.ListView(ld, lc);
ListView_1.getPane().getManager().setMultiSelection(false);

…遠い。

ListView_1.getPane().getManager()の中身はqx.manager.selection.VirtualSelectionManagerのようです。
なるほど、これで選択中のアイテムも取れるワケね。

ちなみにqx.ui.form.Listの方にはgetSelectedItemメソッドがあります。

APIのドキュメントにイベント一覧が見つからなかったので、qx.jsから抜き出して列挙してみる。
treeOpenWithContentとかインターネット全体のGoogle検索でも出なかったし。
つまりアレか。このエントリが唯一引っ掛かるページになるワケか。

MOUSEOVER:"mouseover"
MOUSEMOVE:"mousemove"
MOUSEOUT:"mouseout"
MOUSEDOWN:"mousedown"
MOUSEUP:"mouseup"
MOUSEWHEEL:"mousewheel"
CLICK:"click"
DBLCLICK:"dblclick"
CONTEXTMENU:"contextmenu"
KEYDOWN:"keydown"
KEYPRESS:"keypress"
KEYUP:"keyup"
BLUR:"blur"
FOCUS:"focus"
FOCUSIN:"focusin"
FOCUSOUT:"focusout"
SELECT:"select"
SCROLL:"scroll"
INPUT:"input"
CHANGE:"change"
RESIZE:"resize"
INTERVAL:"interval"
EXECUTE:"execute"
CREATE:"create"
LOAD:"load"
ERROR:"error"
SUBMIT:"submit"
UNLOAD:"unload"
BEFOREUNLOAD:"beforeunload"
TREEOPENWITHCONTENT:"treeOpenWithContent"
TREEOPENWHILEEMPTY:"treeOpenWhileEmpty"
TREECLOSE:"treeClose"
BEFOREAPPEAR:"beforeAppear"
APPEAR:"appear"
BEFOREDISAPPEAR:"beforeDisappear"
DISAPPEAR:"disappear"
BEFOREINSERTDOM:"beforeInsertDom"
INSERTDOM:"insertDom"
BEFOREREMOVEDOM:"beforeRemoveDom"
REMOVEDOM:"removeDom"
DRAGDROP:"dragdrop"
DRAGOVER:"dragover"
DRAGOUT:"dragout"
DRAGMOVE:"dragmove"
DRAGSTART:"dragstart"
DRAGEND:"dragend"
CREATED:"created"
CONFIGURED:"configured"
QUEUED:"queued"
SENDING:"sending"
RECEIVING:"receiving"
COMPLETED:"completed"
ABORTED:"aborted"
FAILED:"failed"
TIMEOUT:"timeout"
DIALOGOK:"dialogok"
DIALOGCANCEL:"dialogcancel"
DIALOGCLOSE:"dialogclose"
DIALOGPREVIOUS:"dialogprevious"
DIALOGNEXT:"dialognext"
DIALOGFIRST:"dialogfirst"
DIALOGLAST:"dialoglast"

で、結局何がしたかったかと言うと、タブの各ページを表示した瞬間にイベント発生させたかったわけです。
どうやらAPPEARがそれに該当する模様。タブボタンのCLICKではうまくいかなかった。

var TabViewPage_1 = new qx.ui.pageview.tabview.TabViewPage(TabViewButton_1);
var TabViewPage_2 = new qx.ui.pageview.tabview.TabViewPage(TabViewButton_2);
var TabViewPage_3 = new qx.ui.pageview.tabview.TabViewPage(TabViewButton_3);
TabView_1.getPane().add(TabViewPage_1, TabViewPage_2, TabViewPage_3);
TabViewPage_1.addEventListener("appear", function(e) {
  alert(e);
});

OK

separator.gifが404だというログが大量に残っていたのでチェック。

エントリ画面のTinyMCEのツールバーのセパレータ画像が、Pivot 1.3のフルセットに含まれていなかった。

なので、TinyMCEのページから持ってくる。

TinyMCE Javascript Content Editor by Moxiecode Systems AB
http://tinymce.moxiecode.com/index.php

Pivotの
/extensions/hooks/editor_wysi/themes/advanced/images/separator.gif
に配置して完了。