Header

  1. View current page

    XpressEngine Manual

Profile_img_60x60_01
47

All Pages

Updates

Add to Watch List

2. XML Js Filter

Edit

 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내에서 실제로 사용하는 예제입니다.

  1. <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>

  2. <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>

  3. <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는 모두 무시가 되니 주의 바랍니다.
  1. <parameter>
        <param name="field이름" target="변경하고자 하는 이름" />
    </parameter>
  • name : form - field의 이름
  • target : 서버에 전송할때 바꾸고자 하는 이름

 

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

 

내부 동작 방식#

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

<!--%import("filter/test.xml")-->

 

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

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

 

템플릿에서의 실제 사용 예#
  1. <!--%import("filter/test.filter")-->
    <form actoin="./" method="get" onsubmit="procFilter(this, test)">
    ...
    </form>

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

 

 

History

Last edited on 04/13/2008 13:19 by 민수