S2JSFでWebParts その１

前にちょこっとだけ書いたけど、S2JSFでWebPartsライクな機能を作ってみようと思う。

• 元の発想はASP.NET2.0のWebParts。
• ポータルサイトなどで、ユーザがUIをカスタマイズできるもの。
• カスタマイズ画面では、好きなパーツ(HTML)を、好きな位置にドラッグ＆ドロップできる。
• HTMLはポストバックモデル。単一HTMLなので遷移はしないけど、InitActionとActionが実行可。

何はともあれ、技術調査から。まずはドラッグ＆ドロップ。
イメージはscript.aculo.usのSortable Lists Demoが近い。
こいつ適用したいけど、JavaScriptはHTMLに埋め込みたくないので、
class属性だけで定義できるようにする。

loader.jsの抜粋

var lists = document.getElementsByTagName("ul");
for (var i=0; i < lists.length; i++) {
  if (lists[i].className.match("partsLayer")) { // Sortableの適用 }
}

これで、<ul>タグのclass属性にpartsLayerを設定するだけで
ドラッグ＆ドロップのレイヤーになる。

さらに、HTMLにscript.aculo.usのjsを呼び出す宣言も埋め込みたくないから、
自前のloader.jsから、scriptaculous.jsを呼ぶ。

loader.jsの先頭

document.write('<script type="text/javascript" src="./js/prototype.js"></script>');
document.write('<script type="text/javascript" src="./js/scriptaculous.js"></script>');

window.onload=assignStyle;

function assignStyle() { // 省略 }

パス指定がハードコーディングだけど、
この辺りは動的に取得するように、後で修正しよう。
とりあえず、これで大分とスッキリ。

ここまでの成果物
（削除済み）