Skip to content

manual(ver 0.3.0)

Jump to bottom Edit New page
서영아빠 edited this page Feb 15, 2015 · 9 revisions

AXU4J 사용방법

setup

1. download /dist/axu4j.xml (AXU4J config file)

copy to /WEB-INF/classes/ folder

2. add dependency

pom.xml

<dependency>
	<groupId>com.axisj</groupId>
	<artifactId>axu4j</artifactId>
	<version>0.3.0-RELEASE</version>
</dependency>

3. JSP 선언

<%@ taglib prefix="ax" uri="http://axisj.com/axu4j"%>

4. axu4j.xml

axu4j.xml 파일을 /WEB-INF/classes로 복사합니다. 메이븐을 사용하시는 경우는 resources 폴더에 복사하면 됩니다.

Tag API

set

layout 페이지, axu4j.xml, jsp에서 사용할 수 있는 내장객체 변수입니다.

attributes

  • name : 변수 명
  • value: 변수 값
  • scope: 변수의 범위. request, session, cookie 세가지 범위를 지원하며 scope를 생략하는 경우 변수의 범위는 request가 됩니다.

example

<ax:set name="foo" value="req-val" scope="request" /> => {{request.foo}}
<ax:set name="foo" value="ses-val" scope="session" /> => {{session.foo}}
<ax:set name="foo" value="coo-val" scope="cookie"  /> => {{cookie.foo}}

layout

페이지에 사전에 정의한 레이아웃을 적용하는 tag입니다. 레이아웃 페이지는 HTML 파일로 작성을 하며 mustache 문법을 사용해서 원하는 부위에 내용을 위치할 수 있습니다. 레이아웃 페이지에 {{name}}(HTML escaped), {{{name}}}의 표현식을 사용하면 div tag의 내용이 해당 위치에 삽입됩니다.

attributes

  • name 페이지에 사용할 layout name입니다. axu4j.xml에 설정한 prefix(default: /WEB-INF/layouts/)와 suffix(default: .html)를 제외한 파일명을 그대로 사용하면 됩니다.

example

<ax:layout name="base">
	...
</ax:layout>

row

악수 그리드 시스템을 사용하기 위한 row tag입니다.

attributes

  • id tag의 id입니다. 기본값은 자동으로 생성됩니다.
  • css tag에 추가될 class 입니다.
  • style tag에 추가될 style 입니다.

example

<ax:row>
	<ax:col size="12">
		...
	</ax:col>
</ax:row>

col

악수 그리드 시스템을 사용하기 위한 col tag입니다. 하나의 row tag 안에 col tag size의 합은 12가 되어야 합니다.

attributes

  • id tag의 id입니다. 기본값은 자동으로 생성됩니다.
  • size 가로 길이를 의미하며 1 ~ 12 까지 지정할 수 있습니다.
  • css tag에 추가될 class 입니다.
  • style tag에 추가될 style 입니다.

example

<ax:row>
	<ax:col size="4">
		...
	</ax:col>
	<ax:col size="8">
		...
	</ax:col>
</ax:row>

form

HTML form과 동일하며 form외에 레이아웃과 스타일적 요소를 추가적으로 가지고 있습니다.

attributes

  • id tag의 id입니다. 기본값은 자동으로 생성됩니다.
  • name HTML form의 name입니다. 기본값은 id값 입니다.
  • method HTML form의 method입니다. 기본값은 POST값 입니다.
  • action HTML form의 action입니다.
  • css tag에 추가될 class 입니다.
  • style tag에 추가될 style 입니다.

example

<ax:form name="table-form">
	...
</ax:form>

fields

form tag 내부에서 row의 역할을 하는 tag 입니다.

attributes

  • id: tag의 id입니다. 기본값은 자동으로 생성됩니다.
  • css: tag에 추가될 class 입니다.
  • style: tag에 추가될 style 입니다.

example

<ax:form name="table-form">
	<ax:fields>
		...
	</ax:fields>
	<ax:fields>
		...
	</ax:fields>
</ax:form>

field

fields tag 내부에서 컬럼처럼 사용되는 tag입니다.

attributes

  • id tag의 id입니다. 기본값은 자동으로 생성됩니다.
  • label 입력 항목명 입니다.
  • title 입력 항목에 대한 설명을 입력합니다. HTML title attribute입니다.
  • css tag에 추가될 class 입니다.
  • style tag에 추가될 style 입니다.

example

<ax:form name="table-form">
	<ax:fields>
		<ax:field label="번호">
			<input type="text" ... />
		</ax:field>
	</ax:fields>
	<ax:fields>
		<ax:field label="이메일">
			<input type="text" ... />
		</ax:field>
	</ax:fields>
</ax:form>

custom

사용자가 정의한 템플릿을 사용할 수 있습니다.

attributes

  • customid: axu4j.xml > axu4j > customs > custom.id 값

example

axu4j.xml 설정

<axu4j>
    ...
    <customs>
        <custom id="select">
<![CDATA[
<select name="{{name}}">
{{#emptyName}}
	<option value="">{{emptyName}}</option>
{{/emptyName}}
{{#options}}
	<option value="{{value}}">{{name}}</option>
{{/options}}
</select>
]]>
        </custom>
    </customs>
</axu4j>

JSP 사용

<%@ page import="java.util.*"
%><%@ page contentType="text/html; charset=UTF-8"
%><%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core"
%><%@ taglib prefix="ax" uri="http://axis.com/axu4j"
%><%
	List options = new ArrayList();
	HashMap<String, String> one = new HashMap<String, String>();
	one.put("name", "A");
	one.put("value", "one");
	HashMap<String, String> two = new HashMap<String, String>();
	two.put("name", "B");
	two.put("value", "two");
	HashMap<String, String> three = new HashMap<String, String>();
	three.put("name", "C");
	three.put("value", "three");

	options.add(one);
	options.add(two);
	options.add(three);

	request.setAttribute("options",     options);
	request.setAttribute("projectName", "axu4j");
%><ax:layout name="base.jsp">
    ...
    <ax:custom customid="select" name="test-select" options="${options}" />
    ...

Freemarker에서 사용하는 방법

reference http://freemarker.org/docs/pgui_misc_servlet.html#autoid_56

설정방법

  1. web.xml Freemarker 설정 추가
<!DOCTYPE web-app PUBLIC
        "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
        "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
    <display-name>AXU4J Sample Web Application</display-name>
    <servlet>
        <servlet-name>freemarker</servlet-name>
        <servlet-class>freemarker.ext.servlet.FreemarkerServlet</servlet-class>

        <!-- FreemarkerServlet settings: -->
        <init-param>
            <param-name>TemplatePath</param-name>
            <param-value>/</param-value>
        </init-param>
        <init-param>
            <param-name>NoCache</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>ContentType</param-name>
            <param-value>text/html; charset=UTF-8</param-value>
            <!-- Forces UTF-8 output encoding! -->
        </init-param>

        <!-- FreeMarker settings: -->
        <init-param>
            <param-name>incompatible_improvements</param-name>
            <param-value>2.3.21</param-value>
        </init-param>
        <init-param>
            <param-name>template_exception_handler</param-name>
            <!-- Some may prefer "html_debug" for development. -->
            <param-value>rethrow</param-value>
        </init-param>
        <init-param>
            <param-name>template_update_delay</param-name>
            <param-value>0</param-value>
            <!-- 0 is for development only! Use higher value otherwise. -->
        </init-param>
        <init-param>
            <param-name>default_encoding</param-name>
            <param-value>UTF-8</param-value>
            <!-- The encoding of the template files. -->
        </init-param>
        <init-param>
            <param-name>number_format</param-name>
            <param-value>0.##########</param-value>
        </init-param>

        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>freemarker</servlet-name>
        <url-pattern>*.ftl</url-pattern>
    </servlet-mapping>

</web-app>
  1. /WEB-INF/ 폴더에 axu4j.tld 파일 복사
  2. *.ftl 파일 생성
<#assign ax=JspTaglibs["/WEB-INF/axu4j.tld"]>
<@ax.layout name="base">
    <@ax.div name="title">[Feemarker Sample]</@ax.div>
    <@ax.div name="header">
        <h1>Feemarker Sample</h1>
        <p class="desc">
            이 페이지는 Freemarker에서 AXU4J를 사용하는 예제입니다.
        </p>
    </@ax.div>
    <@ax.div name="contents">
        ...
    </@ax.div>
</@ax.layout>

AXU4J 진행 상황은 issue를 참조해 주세요.

Add a custom sidebar

Clone this wiki locally