付箋アプリ ver 0.002
今回もJavaScriptだけの検証ですが、だいぶアプリっぽくなってきました。innerHTMLを使ったオブジェクトの生成と、Effect.Moveの使い方など。
今日の成果物
JavaScript上で、付箋や振分ペインを生成できるようにしました。
まだAjaxサーバ通信はしていません。ちょっとずつステップ踏まないと、いろいろとハマりそうな気がしたので・・・。
| 未振分ボックス |
デザインって・・
このシリーズも若干飽きてきてヤル気を失っていたのですが、ペインのデザインを凝ってみたら、やる気を取り戻しましたｗ。なんとなく、劇的に完成に近づいたように見えるし（・・ように見えるだけです）。
デザインって、人のモチベーションをずいぶん変えるんですね。
大事だー。
・・・余談はさておき。
Effect.Move
今回確認したかったことは、２点。
- 任意の座標に復元できるか。
- 付箋やペインを生成したときにおかしなことが起きないか。
前者は、生成したインスタンスのスタイルシートを調整してやるか、Effect.Moveを使うかしてやれば、保存しておいた座標にJavaScriptを使って移動させることができます（「サンプル」を押してみてください）。
//スタイルシートを使って動かす。
element.style.left = 100;
element.style.top = 100;
//Effectを使って動かす。
new Effect.Move(element,
Object.extend({ x: 100, y: 100 }),{});
問題は、後者ですが、ちょっと工夫が必要でした。
オブジェクト生成用のエリア
<div id="create_pane"></div>//生成エリア
<div id="save_pane"><div>//操作用エリア
function create_pane(text,x,y){
var paneId = ・・・;
//create_paneにオブジェクトを生成
$('create_pane').innerHTML
+='<div id="' +paneId+ '">・・</div>';
new Draggable(paneId, {revert:false});
//生成したオブジェクトをsave_paneにappendしなおす。
//（create_paneを空にする）
//appendImplの中身は、前回を参照
appendImpl($(paneId),$('save_pane'));
}
DIV.innerHTMLを使って、新しい振分けペインを生成していきます。ここで、オブジェクトを追加をしていくには、
divObject.innerHTML += "～"
を使うわけですが、前に生成したオブジェクトまで再生成してしまうので、マズいことになります。具体的には、同じIDのオブジェクトが複数生成されてしまい、ブラウザが混乱状態に。
だからといって、
divObject.innerHTML = "～"
とすると、前に生成したオブジェクトは当然消えてしまいます。
そこで、オブジェクトを生成したら直ぐに他のノードにappend（生成エリアから退避）してやればいいかもな。と思い、そうしてみました。それが、上のコードです。
よし、そろそろAjaxするか！
innerHTMLでやってるところを、AjaxUpdaterに置き換えれば、なんとか動くかもしれません。
