JavaScriptでウインドウクラスっぽいやつ

技術メモ

prototype.jsを使えば、ウインドウクラスみたいなの作れるかなぁ、と思いつつ、ドラッグ処理がメンドそうだったので、script.aculo.usも併用しつつ、それっぽいのを作ってみた。
つーか、コードは下記の通りだけども、Frameって<frameset>と単語がダブルじゃん、あまり美しくないじゃない、ってことに今気がついた。
やっぱり普通にライブラリ探した方がよかったかな。
JSANからでも見つかったかな･･･、ってそれっぽいのなかったけど。
というか思ったんだけども、java.awt とか javax.swingぐらいに充実したGUIパッケージがあってもよさそうなものだが、どこかにあるのかいな。

<html>
<head>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/effects.js" type="text/javascript"></script>
<script src="js/dragdrop.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript"><!
var Sd = {
　// バージョン番号なんてつけてみた
Version: '0.1'
};

Sd.Frame = Class.create();
Sd.Frame.prototype = {

initialize: function(id){
this.id = id;
this.frame = document.createElement('div');
this.frame.id = this.id;
var style=this.frame.style;
style.visibility='hidden';
style.border='thin solid black';
style.background='white';
style.overflow='auto';
style.position='relative';
document.body.appendChild(this.frame);

this.titlebar=document.createElement('div');
this.titlebar.id=this.id+'titlebar';
var styleTitle=this.titlebar.style;
styleTitle.border='0px solid blue';
styleTitle.background='gray';
styleTitle.overflow='auto';
styleTitle.position='relative';
styleTitle.top='0px';
styleTitle.left='0px';
styleTitle.width='100%';
styleTitle.height='20px';
this.frame.appendChild(this.titlebar);

this.canvas=document.createElement('div');
this.canvas.id=this.id+'canvas';
var styleCanvas=this.canvas.style;
styleCanvas.border='0px solid black';
styleCanvas.overflow='auto';
styleCanvas.position='relative';
styleCanvas.top='0px';
styleCanvas.left='0px';
styleCanvas.width='100%';
styleCanvas.height='0px';
styleCanvas.padding='0px';
this.frame.appendChild(this.canvas);
// effectを空にしておかないと処理が遅くなる気がする
new Draggable( this.frame, {
starteffect: function(element) {},endeffect: function(element){},handle:this.titlebar
});
},

getId: function(){
return this.id;
},
hide: function(){
this.frame.style.visibility='hidden';
},
setBounds: function(x,y,w,h){
this.setLocation(x,y);
this.setSize(w,h);
},
setInnerHTML: function(html){
this.canvas.innerHTML=html;
},
setSize: function(w,h){
this.frame.style.width = w+'px';
this.frame.style.height= h+'px';
this.canvas.style.height=(h24)+'px';
},
setTitle: function(title){
this.titlebar.innerHTML=title;
},
setLocation: function(x,y){
this.frame.style.top = y+'px';
this.frame.style.left= x+'px';
},
show: function(){
this.frame.style.visibility='visible';
}
};

frm = new Sd.Frame('test');
frm.setBounds(10,10,200,200);
frm.setTitle('TITLE');
frm.setInnerHTML('<p><form><input type="text"></form></p>');
frm.show();

//></script>
</body>
</html>