http://doc.xpressengine.com/classXmlJsFilter.html (클래스 구조)
XML Js Filter는 XML을 기반으로 하여 자바스크립트로 동작하는 Filter입니다.
폼의 입력 항목의 유효성 검사를 쉽게할 수 있고 AJAX를 이용해 서버의 특정 Module과 Action 통신을 하는 과정까지 모두 제어할 수 있습니다.
필수 항목 체크, 최소/최대 길이 제한, 입력값 확인 등의 기능을 지원합니다.
아래는 XE내에서 실제로 사용하는 XML Js Filter의 예입니다.
<filter name="insert_board" module="board" act="procBoardAdminInsertBoard" confirm_msg_code="confirm_submit">
<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" />
</filter><form> filtering이 일어나는 form문내의 특정 field에 조건을 부여할 수 있습니다.
<form>..</form> 자체를 생략하거나 <form />처럼 명시적으로 체크할 field 가 없으면 지정할 수 있습니다.
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
<!--%import("filter/test.xml")-->
<form action="./" method="get" onsubmit="procFilter(this, test)">
제목 : <input type="text" name="title" value="" class="inputTypeText w200" />
내용 : <textarea name="content" class="inputTypeTextArea w200"></textarea>
<span class="button"><input type="submit" value="전송" /></span>
</form>위에서 procFilter()는 첫번째 인자로 해당 폼의 object를 받는데 this로 지정하면 되고, 2번째 인자인 test는 적용하고자 하는 filter의 name 입니다.
폼의 내용이 전송 될 때 test filter는 동작을 하게 됩니다.
위 예제에서는 아래의 filter가 적용되어 있습니다.
아래는 test.xml 파일의 내용입니다.
<filter name="test">
<form>
<node target="title" required="true" maxlength="10" maxlength="50" />
<node target="content" required="true" maxlength="1" maxlength="250" />
</form>
<parameter>
<param name="title" target="title" />
<param name="content" target="content" />
</parameter>
<response />
</filter>절대 동감입니다.
zb4 사용자가 zbxe로 옮겨오지 않는 대표적인 이유가 이런데 있는 게 아닐까 싶네요.
저만해도 정식으로 html 배워본 적이 없는데 zb4로는 웹게임까지 만들 수 있었던 데에 반해
zbxe는.. 솔직히 말해서 게임은커녕 회원 연동하는 메모장조차 못 만들겠습니다 ㅡ;
무작정 보안에 문제 있다며 zb4는 서서히 축소시켜 나가며 목졸라 죽인다(고 느낍니다)기보다는
zbxe가 사용자뿐만 아니라 개발자에게도 어느 정도 접근성을 허락했으면 좋겠습니다....
당장 자료실도 추후 업데이트에 대비할 수 있는 자기들의 문법을 지키지 않는 것은 심사에서 떨어뜨리는 등
그 문제 때문에 zb4가 위기를 맞았다고 하지만 저같은 아마추어(또는 짜깁기) 코더들은 xe에서 더 소외되네요.
1. html form의 origin 항목을 a로 바꾸고자 할때 아래와 같이 사용하는 방법이 맞군요.
설명을 보면 오히려 반대로 되어있는 듯한데.. (설명 : <node target="field이름"> <param name="field이름" target="변경하고자 하는 이름" /> )
2. Xml JS Filter의 parameter와 xml query의 복합 사용시에위 상황에서 이렇게 쿼리를 주면 값 전달이 안되는군요? 위 설명에선 서버에 전송시에 "target" 값으로 한다고 했는데.. 이럴 때는 parameter 값을 그냥 나두고 ( <node target="origin" required="true" /> ) 컬럼 var 을 바꾸어 주어야 되는군요 ( <column name="db_column" var="a" /> ) 위 두가지 사항이 설명이 틀린 것인지 실제 core구현이 잘못되어 있는 것인지,
아니면 제가 잘못 이해한 것인지;;
test 후에 사용하는데에는 문제가 없습니다만,
문서와 같이 보니 이상하군요 <form>
<node target="a" required="true" />
</form>
<parameter>
<param name="origin" target="a" />
</parameter>
<!-- testQuery.xml -->
<column name="db_column" var="a" />
동작 설명이 중급이상의 사용자나 알아들을 수 있겠네요.
좀 더 자세하게 그리고 친절하게 초급자도 어려움없이 이해할 수 있게 작성되면 좋겠습니다.