Rev. 2.73

UIZE는 자바스크립트를 사용한 비주얼이펙트를 동반한 다양한 API를 제공한다. 특히 플래시 뺨치는 이미지 전환효과(Wipe Presets)와 오버레이의 마스크를 공식으로 지원한다. Color Cube With Color Pickers는 가히 소프트웨어 수준이다. 이미지 슬라이드쇼에 대한 지원도 막강하다.

uize.jpg

현재 UIZE API는 문서화 작업이 이루어지고 있는 것으로 보인다. 아직 배포된 상태는 아니지만, 앞으로 Ajax가 도입된 다이네믹 웹어플리케이션을 구축하기 위해 필요한 중요 라이브러리 중 하나로 단번에 등극할 것으로 보인다. 단, 프로토타입 기반이 아니라는 것이 약간 아쉽다.

Comments

Form을 이용하여 서버에 자료전송할 때 Ajax를 통해서 필요한 자료만 서버에 보내세요. 빠르고 다이네믹한 웹을 구현해 줄 것입니다. 이 곳에는 프로토타입 자바스크립트 라이브러리(Prototype JavaScript Library를 사용하여 서버에 자료를 전달하고 응답된 자료를 업데이트거나 요청하는 것을 다룰것 입니다.

* Ajax.Request: 자료를 서버에 보내고 응답에 따른 로컬 자바스크립트를 변형한다.
* Ajax.Updater: 자료를 서버에 보내고 지정한 DIV에 있는 응답을 표시한다.

Ajax.Updater 또는 Ajax.Request를 사용하기 위해서는 prototype.js를 해더에서 아래와같이 로드해야 한다.

<script src="prototype.js" type="text/javascript"></script>

다음으로, 간단한 html모양을 만든다. submit 타입이 아닌 버튼을 넣어야 하고, onclick 이벤트 핸들러를 function send() 자바스크립트로 지정한다.

<div id="updateDiv">
<form id="commentsForm">
<input name="name" type="text"><br>
<textarea name="comment" cols="20" rows="3"></textarea><br>
<input name="sendbutton" type="button" value="Send" onclick="send();">
</form>

</div>

자, 이제 마술을 걸어 봅시다. send() 자바스크립트 함수는 서버에 form 정보를 전달하기 위해서 name 또는 value 등을 를 합산해야 할 필요가 있다. 우리는 이것의 전송을 위해 일일히 만들어 줄 수도 있다. 하지만 프로토타입에는 수작업을 줄여주는 Form.serialize 명령과 $를 사용하는 매개변수를 사용하여 매우 간단하게 한다.

<script type="text/javascript">
function send(){
var params = Form.serialize($('commentsForm'));
new Ajax.Updater('updateDiv', 'submit.php', {asynchronous:true, parameters:params});
}
</script>

Ajax.Updater 명령의 사용법을 살펴보자. updateDiv는 서버에서 돌려보내지는 자료를 업데이트할 엘리먼트 영역이다. submit.php는 서버측의 전송요청을 처리하는 파일이름이다. 그리고 매개변수를 지정한다. 메서드의 사용방법은 script.aculo.us의 ajax.updater, ajax.request위키를 참조하자. 폼의 메서드는 기본으로 'post'로 잡혀 있으며 method:'get'을 추가함으로 get방식으로 변경할 수 있다. onLoading과 onComplete 옵션을 사용하여 작동상태에 따른 액션을 지정할 수 있으며, evalScripts 옵션을 사용하면 서버의 응답을 자바스크립트형태로 수신할 수 있게 한다.

ajax.request의 사용방법은 업데이트할 엘리먼트를 지정하지 않는 것 외에 이와 크게 다르지 않다.

덧. 수신되는 데이터는 HTML해더가 제거된 일반 HTML형식이거나 텍스트 또는 XML형식이면 됩니다.
덧. 위에서 사용한 form은 접근성을 떨어뜨린다는 신현석님의 조언으로 아래와 같은 폼으로 작성해 보았습니다. 지적 감사드립니다.

<div id="updateDiv">
<form id="commentsForm" name="commentsForm" action="submit.php" onsubmit="return send(this, 'updateDiv')">
<input name="name" type="text" />
<textarea name="comment" cols="20" rows="3"></textarea>
<input name="sendbutton" type="submit" value="Send" />
</form>

</div>

<script type="text/javascript">
function send(form, element){
var params = Form.serialize($(commentsForm));
new Ajax.Updater(element, 'submit.php', {asynchronous:true, parameters:params});
}
</script>

Comments

짧은기간 안에 만족할 정도로 목표가 달성되어서 1차 업데이트의 막을 내립니다. 종전과 달라진 부분은 방문객의 사용빈도가 낮은 사이드 컨텐츠와 전광판을 제거하였습니다. 이번 업데이트는 대부분 기반 작업으로, HTML과 CSS 그리고 자바스크립트를 최대한 분리하하는 작업과, XHTML 1.1 웹 표준규격을 통과 시켜 접근성을 높이는데 있었습니다.

PrototypeScriptAculoUs 프레임웍을 사용하여 이곳 저곳에서 퍼다 쓰던 스크립트(라이트 박스, 전광판 등)를 정리하였으며, 팝업으로 뜨는 모든 창들(키워드 조회, 댓글에 댓글달기, 편집하기, 삭제하기 등)이 Ajax(비동기식)로 돌아가게 하였습니다. 댓글 달기에도 Ajax가 적용되어 있습니다. 덕분에 Prototype의 Ajax.Request 와 Ajax.Updater의 사용법을 마스터 할 수 있었습니다.

2차 업데이트 부터는 비공개로 진행됩니다. 음훼훼훼훼....

Comments