EAF(Eolin.Application.Framework)을 활용한 AJAX 실습(3)-PageMaster

PageMaster에 대해 알아보자.
PageMaster는 화면에 메시지 표시를 위해 사용된다. 블로그의 글을 저장하는 경우 화면 우상단이나 하단에 "저장되었습니다."라는 표시를 볼 수 있는데, alert 창에 비해 사용자에게 미려한(?) UI를 제공할 수 있다.
코드를 살펴보자.

function PageMaster() { this._status = null; this._messages = new Array(); this._requests = new Array(); this._holders = new Array(); this._timer = null; window.addEventListener("load", PageMaster.prototype._onLoad, false); window.addEventListener("beforeunload", PageMaster.prototype._onBeforeUnload, false); }; PageMaster.prototype._onLoad = function(event) { PM._status = document.createElement("div"); PM._status.style.position = "absolute"; PM._status.style.color = "white"; PM._status.style.backgroundColor = "navy"; PM._status.style.margin = "0px"; PM._status.style.paddingLeft = "10px"; PM._status.style.paddingRight = "10px"; STD.addEventListener(window); window.addEventListener("scroll", PageMaster.prototype._updateStatus, false); window.addEventListener("resize", PageMaster.prototype._updateStatus, false); }; --------- PageMaster.prototype._updateStatus = function() { if (PM._status.parentNode == document.body) { PM._status.style.top = (!STD.isSafari ? document.documentElement.scrollTop: document.body.scrollTop) + "px"; PM._status.style.left = ((!STD.isSafari ? document.documentElement.scrollLeft: document.body.scrollLeft) + document.documentElement.clientWidth - PM._status.offsetWidth) + "px"; }; PM.updateMessages(); }; --------- PageMaster.prototype.updateMessages = function() { for (var i = 0; i < this._messages.length; i++) { if (this._messages[i] == null) continue; switch (this._messages[i]._align) { case "left": this._messages[i].style.left = STD.getScrollLeft() + "px"; break; case "center": this._messages[i].style.left = (STD.getScrollLeft() + (document.documentElement.clientWidth - this._messages[i].offsetWidth) / 2) + "px"; break; case "right": this._messages[i].style.left = (STD.getScrollLeft() + document.documentElement.clientWidth - this._messages[i].offsetWidth) + "px"; break; }; switch (this._messages[i]._valign) { case "top": this._messages[i].style.top = STD.getScrollTop() + "px"; break; case "middle": this._messages[i].style.top = (STD.getScrollTop() + (document.documentElement.clientHeight - this._messages[i].offsetHeight) / 2) + "px"; break; case "bottom": this._messages[i].style.top = (STD.getScrollTop() + document.documentElement.clientHeight - this._messages[i].offsetHeight) + "px"; break; }; }; }; --------- PageMaster.prototype._onBeforeUnload = function(event) { event = STD.event(event); if (PM._requests.length > 0) { event.returnValue = PM.message; return; }; for (var i = 0; i < PM._holders.length; i++) { if (PM._holders[i].isHolding()) { event.returnValue = PM._holders[i].message; return; }; }; };
살펴보면 PageMaster를 생성하면서 필요한 내부 프로퍼티들을 초기화하고 있으며 load, beforeunload이벤트에 각각의 자바스크립트를 매핑해주고 있다.(앞의 소스에서 STD를 통해 window에 event처리시 브라우저compatibility(호환성)를 보장해주고 있다.)
load이벤트시에 수행되는 _onLoad를 살펴보면 div Element를 생성하고, Element의 위치,색등을 지정하고
스크롤(scroll)이벤트발생시와 창의 크기를 바꿔주는 이벤트(resize)발생시에 _updateStatus라는 메소드를 호출한다.

_updateStatus를 살펴보면 PM._status가 document의 body 하단에 존재하는 경우, safari브라우저인지에 따라 현재 화면의 top위치와, 좌측위치에서 창크기를 더한 값에서 PM._status의 크기를 뺀 값의 위치->즉, 현재창의 우측에 딱 맞는 위치가 된다. 그런 후에 updateMessages()를 호출한다.
updateMessages()는 내부의 _messages array에 들어가 있는 메시들의 위치를 재조정한다(스크롤이나 창크기 변화시 message표시 위치를 조절하기 위해 사용된다)

beforeunload 이벤트는 브라우저의 창을 닫는 경우 발생하는 이벤트다.
PageMaster에 있는 _requests값과 _holders값을 확인 하여 창을 닫을 때 값이 있는 경우 각각의 메시지를 알람으로 알려준다.(event.returnValue값에 메시지를 넣어주면 해당 이벤트 발생시 창을 닫는것에 대한 확인알람을 띄운다.)
 
다음은 화면으로 메시지를 표시해주는 showMessage를 살펴보자
PageMaster.prototype.showMessage = function(message, align, valign, timeout) { if ((typeof(message) != "string") || (message.length == 0)) return - 1; if (align == undefined) align = "center"; if (valign == undefined) valign = "middle"; if (timeout == undefined) timeout = 3000; var oMessage = document.createElement("div"); oMessage.innerHTML = message; oMessage.style.position = "absolute"; oMessage.style.color = "white"; oMessage.style.backgroundColor = "green"; oMessage.style.margin = "0px"; oMessage.style.paddingLeft = "10px"; oMessage.style.paddingRight = "10px"; oMessage._align = align; oMessage._valign = valign; document.body.appendChild(oMessage); var index = this._messages.push(oMessage) - 1; this.updateMessages(); window.setTimeout("PM._hideMessage(" + index + ")", timeout); return index; }; PageMaster.prototype._hideMessage = function(index) { document.body.removeChild(this._messages[index]); this._messages.splice(index, 1, null); while ((this._messages.length > 0) && (this._messages[this._messages.length - 1] == null)) this._messages.pop(); }; PageMaster.prototype.updateMessages = function() { for (var i = 0; i < this._messages.length; i++) { if (this._messages[i] == null) continue; switch (this._messages[i]._align) { case "left": this._messages[i].style.left = STD.getScrollLeft() + "px"; break; case "center": this._messages[i].style.left = (STD.getScrollLeft() + (document.documentElement.clientWidth - this._messages[i].offsetWidth) / 2) + "px"; break; case "right": this._messages[i].style.left = (STD.getScrollLeft() + document.documentElement.clientWidth - this._messages[i].offsetWidth) + "px"; break; }; switch (this._messages[i]._valign) { case "top": this._messages[i].style.top = STD.getScrollTop() + "px"; break; case "middle": this._messages[i].style.top = (STD.getScrollTop() + (document.documentElement.clientHeight - this._messages[i].offsetHeight) / 2) + "px"; break; case "bottom": this._messages[i].style.top = (STD.getScrollTop() + document.documentElement.clientHeight - this._messages[i].offsetHeight) + "px"; break; }; }; };
이 메소드는 화면에 보여줄 메시지, 가로위치, 세로위치, 메시지를 보여주는 시간을 파라메터로 받는다.
div Element를 만든 후 이 안에 메시지값을 넣고 크기, 색등을 지정한다. 그런 후 body에 append 하여 일단 메시지를 표시한다. 이때는 div의 위치가 정해지지 않았으므로 메시지가 아무데나 붙는다. 뒤에 있는 updateMessages메소드를 타게 되면 위에서 가져온 가로위치, 세로위치 값을 통해 현재 화면의 좌측, 중앙, 우측을 동적으로 찾아 위치를 바꿔준다.(세로위치도 마찬가지로 진행된다.)
push값으로 _messages array에 메시지를 추가 해 준 후 들어간 갯수를 index값으로 갖고 있는다.
이 값은 showMessage가 여러번 호출되는 경우 이에 대한 값을 message stack에 저장하고 있다가 timeout이 되면 하나씩 없애주는 역할을 한다.(여러번 호출되는 메시지의 관리/응용이 가능하다?)
window의 setTimeout은 다음과 같이 javascript 내장 함수로 정의되어 있다.

  > setTimeout(code, delay);

  code : 일정시간 후 실행시킬 자바스크립트 코드를 포함한 문자열(함수나 alert같은 코드들...)
  delay : 문자열 code 내에 있는 자바스크립트 코드가 실행되기까지 걸리는 시간 (1/1000초 단위)

_hideMessage를 index값을 파라메터로 넣어 timeout시간 후에 실행되도록 요청한다.
_hideMessage 메소드는 message Array에 있는 값을 순서대로 removeChild를 이용하여 화면에 메시지를 삭제하고 호출된 메시지의 값을 null로 바꾼다. message array(stack)의 제일 상단의 값까지 null이 되면 메시지 array안에 있는 값을 pop()을 이용하여 다 비워준다.

addRequest와 removeRequest는 서버에 프로세스 처리 요청시 화면에 요청중을 표시하며 서버단에서 성공/실패 처리 시 화면에 요청중 메시지를 삭제해주는 기능이다. PageMaster.prototype.addRequest = function(request, message) { this._requests.push(new Array(request, message)); if (this._status) { if (message != undefined) { this._status.innerHTML += message; this._showStatus(); } } }; PageMaster.prototype._showStatus = function() { if (PM._status.parentNode == document.body) return; document.body.appendChild(this._status); this._updateStatus(); }; PageMaster.prototype._updateStatus = function() { if (PM._status.parentNode == document.body) { PM._status.style.top = (!STD.isSafari ? document.documentElement.scrollTop: document.body.scrollTop) + "px"; PM._status.style.left = ((!STD.isSafari ? document.documentElement.scrollLeft: document.body.scrollLeft) + document.documentElement.clientWidth - PM._status.offsetWidth) + "px"; }; PM.updateMessages(); };
살펴보면 우선 Request Array에 request,message 배열 값을 push해 넣는다.
그런 후 this._status(onload이벤트시 설정된 div Element값)를 확인하여 message값을 div에 넣고 _showStatus를 실행한다. _showStatus는 이 div를 body에 append 하고 _updateStatus를 통해 메시지를 화면 우상단으로 이동시킨다. updateMessages를 한번 더 호출하지만 _align값이 없으므로 처리되지 않는다.
PageMaster.prototype.removeRequest = function(request) { for (var i = 0; i < this._requests.length; i++) { if (this._requests[i][0] == request) { this._requests.splice(i, 1); break; }; }; var message = ""; for (var i = 0; i < this._requests.length; i++) { if (this._requests[i][1] != undefined) message += this._requests[i][1]; }; if (this._status) { this._status.innerHTML = message; if (message.length == 0) this._hideStatus(); else this._updateStatus(); } }; PageMaster.prototype._showStatus = function() { if (PM._status.parentNode == document.body) return; document.body.appendChild(this._status); this._updateStatus(); }; PageMaster.prototype._hideStatus = function() { if (PM._status.parentNode == document.body) document.body.removeChild(PM._status); };
삭제 대상으로 들어온 request값과 같은 값이 _request에 있는지 확인 후 있으면 그 값을 1개만 잘라낸다.(splice) _request에 있는 message들을 message변수에 for문을 돌면서 넣고(이때 위에서 잘린 request값은 제외된다) div의 값에 집어 넣는다.
메시지가 존재하는 경우는 _updateStatus를 호출하는데 최초 PM._status div가 생성될때 메시지크기만큼의 width가 잡혀 있으므로 offsetWidth값은 width값이 되고 연속된 메시지도 자동으로 맞춰져서 메시지 갯수만큼의 row인것 처럼 보이게 된다. (width값을 줄이거나 늘려주면 메시지가 한줄로 보이게된다. :PM._status.style.width= "10px";)
메시지가 다 삭제되게 되면 _hideStatus를 호출하면서 div를 body에서 삭제하게 된다.

같은 방법으로 나머지 소스를 확인하면 addHolder, removeHolder, showPanel은 쉽게 이해할 수 있다.

다음장에서는 ajax 모듈 부분인 HttpRequest를 살펴보자..