<P align=left><a href="javascript:checkVirus('grpid%3Ddug7%26fldid%3D2NUd%26dataid%3D27%26fileid%3D1%26regdt%3D20081022185034&url=http%3A%2F%2Fpds99.cafe.daum.net%2Fattach%2F8%2Fcafe%2F2008%2F10%2F22%2F18%2F50%2F48fef766890ff%3F.zip')"><img src="https://t1.daumcdn.net/cafe_image/cf_img2/bbs2/p_zip_s.gif" border="0" alt="첨부파일" class="vam"/> layerwindow2.zip</a></P>
<P>지난 번 글에 layer window의 기능에 대해서 설명하였습니다.<BR>(layer window는 popup window가 아닙니다. html layer 기능을 하용하여 popup window를 구현한 것입니다.)</P>
<P>1. window에 Layer 구조로 popup iframe이 뜨고 그 iframe에 원하는 url이 submit되는 기능<BR>2. layer 구조의 window는 title이 있고, icon이 있고, close button이 있는 구조<BR>3. layer 구조의 window는 title을 mouse로 drag하여 위치를 이동할 수 있는 기능<BR>4. layer 구조의 window의 border를 mouse로 drag하여 resize 할 수 있는 기능</P>
<P>이번에는 layer window를 사용하여 xxjavascript debug message를 출력하는 window를 만들어 보겠습니다.<BR>web application을 개발하면서 xxjavascript 기능 테스트를 하면서 alert 기능을 많이 사용합니다.<BR>xxjavascript가 실행되면서 특정 값을 보기 위해서 alert 기능을 사용하기도 합니다.<BR>하지만 alert 기능은 프로그램의 흐름을 막습니다. 또한 debug하는데 불편하기도 하죠<BR>물론 windows의 visual studio dot net에 있는 xxjavascript debug 기능을 사용해도 됩니다.<BR>하지만 실시간으로 실행되는 xxjavascript에서 trace log를 확인하고자 할때 <BR>log를 layer window에 출력을 한다면 실시간으로 실행 상황을 monitor할 수 있습니다.<BR>예를 들어 mouse가 drag함에 따라 mouse 위치의 tag element 정보를 실시간으로 점검하고자 한다면<BR>layer window처럼 좋은게 없습니다.<BR>layer window는 실행하고 있는 jsp page의 xxjavascript 혹은 jsp page의 html에 전혀 영향을 주지 않고<BR>별도의 window에서 메시지를 출력할 수 있습니다.</P>
<P>아래의 jsp 소스에서 WCPage_printLog를 호출하면 layer window에 로그가 출력됩니다.</P>
<P>-- layerwindow2.jsp 시작<BR><%@ page language="java" import="wdl.*,wdl.board.*,wdl.board.*,java.util.*,java.sql.*,java.lang.*,<BR>java.io.*,java.io.File " contentType="text/html; charset=EUC-KR"%><BR><%<BR> WCPage oPage = new WCPage();<BR> if (oPage.initCtrl(pageContext) > 0)<BR> {<BR> return;<BR> }<BR> oPage.printCtrl();<BR>%><BR><script><BR>setTimeout("WCPage_openDebug(window)",10);<BR>function printDebugMessage()<BR>{<BR> WCPage_printLog(window,"hello world");<BR>}<BR></script><BR><a href="xxjavascript:printDebugMessage();">print debug message</a><BR>-- layerwindow2.jsp 끝</P>
<P>layerwindow에서 debug message 를 출력하는 sample 화면은 아래의 URL을 보시면 확인하실 수 있습니다.</P>
<P><A href="http://www.webdevlib.net/wdl/doc/sample/page_sample/container.jsp">http://www.webdevlib.net/wdl/doc/sample/page_sample/container.jsp</A></P>
<P>// WCPage_openDebug 관련 xxjavascript 일부분 시작<BR>function WCPage_openDebug(wSrcWnd)<BR>{<BR> try<BR> {<BR> if (WCPage_isInit(wSrcWnd) == false)<BR> {<BR> }<BR> try<BR> {<BR> var nWidth = wSrcWnd.document.body.clientWidth / 2;<BR> var nHeight = wSrcWnd.document.body.clientHeight / 2;<BR> if (nWidth < 50)<BR> nWidth = 50;<BR> if (nWidth > 600)<BR> nWidth = 600;<BR> if (nHeight < 50)<BR> nHeight = 50;<BR> if (nHeight > 400)<BR> nHeight = 400;<BR> WCPage_openDebugWindow(wSrcWnd,45,50,nWidth,nHeight);<BR> }<BR> catch (ex)<BR> {<BR> wSrcWnd.setTimeout("WCPage_openDebug(window)",50);<BR> return;<BR> }<BR> WCPage_printLog(wSrcWnd,"In order to print log, call WCPage_printLog(window,\"log message\")");<BR> }<BR> catch (ex)<BR> {<BR> }<BR>}<BR>function WCPage_openDebugWindow(wSrcWnd,nLeft,nTop,nWidth,nHeight)<BR>{<BR> if (WCPage_getImgPath(wSrcWnd) == null)<BR> {<BR> return null;<BR> }<BR> var oCtrl = WCLayerWindow_create(wSrcWnd,"_debugWindow");<BR> var sHtml = "";<BR> sHtml += "<body id=elBody scroll=auto bgcolor=\"#ffffff\" text=\"#000000\" leftmargin=\"0\" topmargin=\"0\" marginwidth=\"0\" marginheight=\"0\">";<BR> sHtml += "</body>";<BR> WCLayerWindow_setResizable(wSrcWnd,oCtrl,true);<BR> WCLayerWindow_setBorder(wSrcWnd,oCtrl,2);<BR> WCLayerWindow_setBorderColor(wSrcWnd,oCtrl,"#2f5596"); <BR> WCS.WCLayerWindow_setBorder(window,oCtrl,2);<BR> var bRet = WCLayerWindow_open2(wSrcWnd,oCtrl,null,"Debug Message","/wdl/doc/img/icon/icon_popup.gif",nLeft,nTop,nWidth,nHeight,sHtml);<BR> if (bRet == false)<BR> {<BR> throw "";<BR> }<BR> var wClient = WCLayerWindow_getClientWindow(wSrcWnd,oCtrl);<BR> WCPage_setDebugWindow(wSrcWnd,oCtrl);<BR> return oCtrl;<BR>}<BR>function WCPage_setDebugWindow(wSrcWnd,oCtrl)<BR>{<BR> g_oPage.debugWindow = oCtrl;<BR>}<BR>function WCPage_printLog(wSrcWnd,sMsg)<BR>{<BR> try<BR> {<BR> if (g_oPage.debugWindow == null)<BR> return;<BR> var oCtrl = g_oPage.debugWindow;<BR> if (g_oPage.debugMsgCount == null)<BR> g_oPage.debugMsgCount = 1;<BR> var sMsgEsc = WCString_stringToHtml(sMsg);<BR> WCLayerWindow_insertHtml(wSrcWnd,oCtrl,"<font style=\"FONT: 8pt; font-family:tahoma, Arial, Helvetica, sans-serif, 굴림\">["+g_oPage.debugMsgCount+"]"+sMsgEsc+"</font><br>");<BR> g_oPage.debugMsgCount ++;<BR> }<BR> catch (ex)<BR> {<BR> }<BR>}<BR>function WCLayerWindow_insertHtml(wSrcWnd,oCtrl,sHtml)<BR>{<BR> try<BR> {<BR> var wClient = WCLayerWindow_getClientWindow(wSrcWnd,oCtrl);<BR> var oBody = wClient.document.body; <BR> oBody.insertAdjacentHTML("beforeEnd",sHtml);<BR> oBody.scrollTop = 100000;<BR> <BR> }<BR> catch (ex)<BR> {<BR> }<BR>}<BR>// WCPage_openDebug 관련 xxjavascript 일부분 끝</P>
<P>첨부파일 소스는 WCPage.js와 WCLayerWindow.js 소스입니다.<BR>아래의 xxjavascript 이외에도 WCPage.java WCProperties.java등의 java source가 필요합니다.<BR>이러한 source code는 Web Development Library( <A href="http://www.webdevlib.net">http://www.webdevlib.net</A> )에서 무료로 다운로드<BR>받아서 설치하여 실행 할 수있습니다. 고의로 일부분만 공개하는 것은 아닙니다. WDL site에 가시면 <BR>모든 소스는 download할 수 있습니다. 모든 것을 설명하기에 너무 복잡할 것 같아<BR>중요한 부분을 별도로 설명하고 있습니다.</P>
<P>첨부파일 : layerwindow2.zip<BR>layerwindow1.jsp<BR>WCLayerWindow.js<BR>WCPage.js</P>
<P>지금까지 글을 올리면서<BR>개발자님들이 행여 도움이 될만한 프로그램을 올리려고 하고 있습니다만, <BR>부족한 부분도 많을 것입니다.<BR>모든 소스를 올리기가 지면상 허락하지 않아 일부의 소스코드만을 올리게 됩니다.<BR>또는 이번의 경우처럼 첨부파일로만 올리고, 실제 application sample은 <BR>URL을 참조하는 형태로 올리고 있습니다. 너그러이 이해 바랍니다.</P>
<P>출처 : 고급 웹 UI 개발 라이브러리 Web Development Library 소스공개 : <A href="http://www.webdevlib.net">http://www.webdevlib.net</A><BR></P>
<!-- -->
