2. XML Js Filter

XML Js Filter

http://doc.zeroboard.com/classXmlJsFilter.html (클래스 구조)

XML JS Filter는 XML문법으로 정의되고 Javascript로 동작으로 하는 Filter의 의미입니다.
웹페이지에서 form문에서 특정 field의 not null, min/max length, value 체크등을 쉽게 하고 AJAX로 서버의 특정 Module과 Action와 통신을 하는 과정까지 모두 제어를 할 수 있습니다.

문법 소개 및 예제

아래는 XE내에서 실제로 사용하는 예제입니다.

<filter name="insert_board" module="board" act="procBoardAdminInsertBoard" confirm_msg_code="confirm_submit" extend_filter="module.method_name">
<form>
    <node target="mid" required="true" filter="alpha_number" />
    <node target="browser_title" required="true" maxlength="250" />
    <node target="list_count" required="true" filter="number" />
    <node target="page_count" required="true" filter="number" />
</form>
<parameter>
    <param name="board_name" target="mid" />
    <param name="module_srl" target="module_srl" />
    <param name="module_category_srl" target="module_category_srl" />
    <param name="layout_srl" target="layout_srl" />
    <param name="skin" target="skin" />
    <param name="browser_title" target="browser_title" />
    <param name="use_category" target="use_category" />
    <param name="list_count" target="list_count" />
    <param name="page_count" target="page_count" />
    <param name="is_default" target="is_default" />
    <param name="description" target="description" />
    <param name="header_text" target="header_text" />
    <param name="footer_text" target="footer_text" />
    <param name="admin_id" target="admin_id" />
    <param name="open_rss" target="open_rss" />
</parameter>
<response callback_func="completeInsertBoard">
    <tag name="error" />
    <tag name="message" />
    <tag name="module" />
    <tag name="act" />
    <tag name="page" />
    <tag name="module_srl" />
</response>
</filter>

<filter>의 attribute
- name : form에서 필터를 연동하기 위한 이름입니다. (javascript의 function name으로 등록이 됩니다)
- module : form문내의 데이터를 전송하기 위한 Module 이름입니다.
- act : 전송대상 module의 특정 Action을 지정합니다.
- confirm_msg_code : 언어팩의 언어코드를 지정하여 전송 전에 confirm message를 사용할 수 있습니다.
- extend_filter : field가 유동적일 경우 모듈이름.method이름 을 지정하여 해당 모듈의 model객체의 method의 결과를 이용하여 xml js filter에 지정된 내용외의 항목을 추가할 수 있습니다.
<form> filtering이 일어나는 form문내의 특정 field에 조건을 부여할 수 있습니다.
<form>..</form> 자체를 생략하거나 <form />처럼 명시적으로 체크할 field 가 없으면 지정할 수 있습니다.
- <form>
  <node target="field이름" required="true|false" filter="alpha_number..." minlength="10" maxlength="250" equalto="다른 field name" />
  </form>
- target : form - field의 이름
- required : 필수 여부 (생략 가능)
- filter : 정규표현식을 통해서 value의 형식 체크 가능 (생략 가능)
- email : email의 형식 ( aaa.aaa@aaa.com)
  userid : 영문+숫자+_, 첫 글자는 영문, 소문자
  alpha : 영문값만 허용
  number : 숫자만 허용
- minlength : 최소 길이 체크 (생략 가능)
- maxlength : 최대 길이 체크 (생략 가능)
- equalto : 해당 field와 대상의 값이 동일함을 체크

<parameter> form문 내에서 특정 field를 다른 이름으로 변경해서 전송할 수 있습니다.
<parameter>..</parameter> 자체를 생략하거나 <parameter />처럼 명시적으로 지정하지 않음을 알릴 수 있습니다.
parameter을 이용시 지정된 field이외의 field는 모두 무시가 되니 주의 바랍니다.

<parameter>
<param name="field이름" target="변경하고자 하는 이름" />
</parameter>

name : form - field의 이름
target : 서버에 전송할때 바꾸고자 하는 이름

<response> 서버의 특정 모듈과 통신을 한 후에 어떤 변수를 return 받을 것이며 javascript callback function을 어떤것을 이용할 것인지 지정할 수 있습니다.
지정하지 않을 경우 return message가 success가 아닌 경우 message를 alert하고 현 페이지를 reload하게 됩니다.

<response callback_func="J/S Callback Function">
<tag name="error" />
</response>

내부 동작 방식

XML JS Filter는 템플릿 코드내에서 요청이 이루어집니다.

TemplateHandler는 import되는 XML JS Filter를 보고 컴파일된 JS 파일을 찾아서 <head>..</head>사이에 script file 추가를 하게 됩니다.
이 때 언어팩과의 연동을 시도하게 되며 컴파일된 JS 파일에 JavaScript변수로 직접 메세지를 기록합니다.

컴파일 파일의 위치 : ./files/cache/js_filter_compiled/{md5(path.filtername)}.언어.compiled.js

템플릿에서의 실제 사용 예

<form actoin="./" method="get" onsubmit="procFilter(this, test)">
...
</form>

위에서 procFilter()는 첫번째 인자로 해당 폼의 object를 받는데 this로 지정하면 되고, 2번째 인자인 test는 적용하고자 하는 filter의 name 입니다.
이 form이 submit될때 test filter는 동작을 하게 됩니다.