ch11. 글 쓰는 프로그래머

ajax용 UI중에서 window를 만드는 오픈소스가 있다.
gmail의 gtalk창이나 meebo의 채팅창등과 같이 깜찍하고 룩앤필이 팍오는 UI를 제공한다.
http://prototype-window.xilinus.com

이걸 현재 프로젝트에 사용해고 싶은 욕망이 마구마구 일어났다.

[미션: 프레임으로 레이아웃이 구성되어있다. content프레임에는 전혀 손대지 말고 content프레임에 채팅창을 띄워라]
<xmp>
<frameset frameborder='no' rows='80,0,*' border='0' framespacing='0'>
 <frame name='top' src='top.html' scrolling='no'>
 <frameset frameborder='no' cols='200,*' border='0' framespacing='0'>
  <frame name='menu' src='menu.html' scrolling='no' noResize>
  <frame name='content' src=''content.html scrolling='auto' noResize>
 </frameset>
</frameset>
</xmp>

[시도1: frameset에 prototype-window iframe추가]
<xmp>
<iframe src="inframe.html" name="myFrame" style="width:300px ; height: 300px;"></iframe>
</xmp>
rows='80,0,*' / cols='200,*' 이렇게 되어있는 관계로 추가한 iframe이 아예 보이지도 않는다.
frameset의 길이나 높이를 제한하면 보일지도 모르겠다.

[시도2: top.html에서 prototype-window iframe추가한다음 content프레임으로 복사하기]
<xmp>
 var contentFrame = parent.frames("content");
 var myFrame = document.getElementById("myFrame");
 var _winHtml = myFrame.outerHTML;
 //같은 frame의 context이여야 지만 appendChild가 작동한다.
 //myFrame이 contentFrame의 객체가 아니기 때문에 항상 invalid argument 에러발생
 //contentFrame.document.body.appendChild(myFrame); //invalid argument 에러발생
 //따라서 appendChild를 쓰지 못하고 insertAdjacentHTML()메소드를 사용한다.
 contentFrame.document.body.insertAdjacentHTML("beforeEnd" , _winHtml);

 var alertDes = contentFrame.document.getElementById("myFrame");
 //insertAdjacentHTML를 사용한것은 단순히 문자열을 카피한 것이다.
 //따라서 카피된 iframe의 src속성의 url을 실제로 적용시키는 동작을 수행해야 한다.
 //appendChild의 경우에는 이런 과정이 필요한지 모르겠다.
 alertDes.document.location.reload();

 alert("alert창을 띄워야 myFrame UI가 content프레임쪽에 보인다.");
 //alert창을 띄우지 않으면 보이지 않을 뿐만 아니라 실제로 myFrame이 메모리에 올라가지도 않는것 같다 .
 //만약 alert창을 띄우지 않으면 아래 라인에서 showWin()메소드를 찾지 못한다.
 //이게 location.reload()가 다 되지 못한 문제로 판단할 수 도 있으면 delay를 아무리 많이 줘도 이 문제는 해결되지 않았다.
 //더구나 더 결정적인 문제는 링크를 클릭하면 IE가 비정상종료된다는 점이다.
 contentFrame.myFrame.showWin ();
</xmp>

[참고1: prototype-window창의 html코드]
코드자체는 심플하다. 나머지는 css와 js가 다 제어한다.
<xmp>
<DIV id="dialog0" class="dialog" style="left: 0px; top: 0px; opacity: 0.999999; z-index: 100; width: 304px; height: 242px;">
 <DIV onclick="Windows.close(&quot;dialog0&quot;, event)" id="dialog0_close" class="dialog_close"/>
 <DIV onclick="Windows.minimize(&quot;dialog0&quot;, event)" id="dialog0_minimize" class="dialog_minimize"/>
 <DIV onclick="Windows.maximize(&quot;dialog0&quot;, event)" id="dialog0_maximize" class="dialog_maximize"/>
 <TABLE class="top table_window" id="dialog0_row1">
  <TBODY>
   <TR>
    <TD class="dialog_nw">
        </TD>
    <TD class="dialog_n">
     <DIV class="dialog_title title_window top_draggable" id="dialog0_top">
           </DIV>
    </TD>
    <TD class="dialog_ne">
          </TD>
   </TR>
  </TBODY>
 </TABLE>
 <TABLE class="mid table_window" id="dialog0_row2">
  <TBODY>
   <TR>
    <TD class="dialog_w"/>
    <TD valign="top" class="dialog_content" id="dialog0_table_content">
     <DIV class="dialog_content" id="dialog0_content" style="height: 200px; width: 300px;">
stubbed:getAjax(ajaxArgs)          </DIV>
    </TD>
    <TD class="dialog_e"/>
   </TR>
  </TBODY>
 </TABLE>
 <TABLE class="bot table_window" id="dialog0_row3">
  <TBODY>
   <TR>
    <TD class="dialog_sw">
&nbsp;        </TD>
    <TD class="dialog_s">
     <DIV class="status_bar bottom_draggable" id="dialog0_bottom">
&nbsp;          </DIV>
    </TD>
    <TD id="dialog0_sizer" class="dialog_sizer">
&nbsp;        </TD>
   </TR>
  </TBODY>
 </TABLE>
</DIV>
</xmp>