iGoogleっぽいことをやるには
ユーザーが再配置可能なWedgetを実装するJavaScript （Prototype Portal Class）やPrototype.jsでiGoogleっぽいポータルな仕組みを作れるJSライブラリ「Xilinus」で紹介されているPrototype Portal Classなるものを使うことで、簡単にできそうな雰囲気を見せているのだが、実際にどうやってつくっていけばいいのか（たとえば、移動した状態の取得や設定らしきボタンの振る舞い）を読み取れないので、svnにあったtest/index.html(現物は本家のlive exampleです)を元にもう少し具体的な使い方に踏み込んでみたいと思います。
移動した結果を知るには
Xilinus.Portalのserialize()メソッドを実行すると、
widget_col_0[]=widget-1_0&widget_col_0[]=widget-2_0&widget_col_0[]=widget-1_1&widget_col_0[]=widget-1_2&widget_col_1[]=widget-2_1&widget_col_2[]=widget-1_4&
という結果を得られます。widget_col_xはウィジェットを置いている（？）横に３つ並んだdivのidです。そして、wiget-x_xは個々のウィジェットとなるdivのidです。これの解釈はwidget_col_0には上からwidget-1_0,widget-2_0,widget-1_1、widget-1_2があり、widget_col_1にはwidget-2_1だけが、widget_col_2にはwidget-1_4だけがあるというのがわかります。PHPなら$_POSTから見るとうまい具合に配列になっているはず。
それをサーバに通知するには 【ajax編】
コンストラクタでurl パラメータを用いてpost先を指定します。そうすることで、ウィジェットを移動後にAjax.UpdateでサーバにPOSTされます。
-
portal = new Xilinus.Portal("#page div.col", {onOverWidget: onOverWidget, onOutWidget: onOutWidget, onChange: onChange, onUpdate: onUpdate, url : "http://www.akky.org/xilinux/test/index.php"});
それをサーバに通知するには【ボタン編】
グローバル変数で portal変数を宣言しているので、onlickイベントでportal.serialzie()を実行すると値を得られます。あとは、適宜Formを用意してsubmitすることになります。
-
<input type="button" value="serialize" onclick="alert(portal.serialize())">
-
-
<script type="text/javascript">
-
var portal;
-
/* 途中省略 */
-
function init() {
-
portal = new Xilinus.Portal("#page div.col", {onOverWidget: onOverWidget, onOutWidget: onOutWidget, onChange: onChange, onUpdate: onUpdate, url : "http://www.akky.org/xilinux/test/index.php"});
-
// Fake widgets
-
portal.add(new Xilinus.Widget(null,'widget-1_0').setTitle("Widget #1.0").setContent(latin1), 0);
-
portal.add(new Xilinus.Widget(null,'widget-1_1').setTitle("Widget #1.1").setContent(latin2), 0);
-
portal.add(new Xilinus.Widget(null,'widget-1_2').setTitle("Widget #1.2").setContent(latin3), 0);
-
-
portal.add(new Xilinus.Widget(null,'widget-2_0').setTitle("Widget #2.0").setContent(latin2 + latin3), 1);
-
portal.add(new Xilinus.Widget(null,'widget-2_1').setTitle("Widget #2.1").setContent(latin3), 1);
-
-
portal.add(new Xilinus.Widget(null,'widget-1_4').setTitle("Widget #1.4").setContent(latin1+latin2+latin3), 2);
-
// Add controls buttons
-
portal.addWidgetControls("control_buttons");
-
}
-
Event.observe(window, "load", init);
-
</script>
実際に動くもの
これを試してみてください
http://www.akky.org/xilinux/test/index.html
移動した後には、画面下部にserialize()結果を表示しています。他にも手を加えているので、、、続きます。
