Ajax와 자바 개발을 간단하게, Part 2: 규약을 사용하여 설치와 설정을 최소화하자

                
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
...
<h:inputTextarea value="#{dataModel.address}" rows="3" cols="30"/>

                
<managed-bean>
    <managed-bean-name>dataModel</managed-bean-name>
    <managed-bean-class>formsdemo.AddressBean</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
</managed-bean>

                
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<jsp:useBean id="dataModel" scope="request" class="formsdemo.AddressBean"/>

<form method="POST">
    <c:if test="${pageContext.request.method == 'POST' && !empty param.address}">
        <c:set target="${dataModel}" property="address" value="${param.address}"/>
    </c:if>
    <textarea name="address" rows="3" cols="30"
        ><c:out value="${dataModel.address}"/></textarea>
    <br><input type="submit" value="Submit"/>
</form>

                
<%@ attribute name="name" required="true" rtexprvalue="true" %>
<%@ tag dynamic-attributes="dynAttr" body-content="scriptless" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<c:if test="${pageContext.request.method == 'POST' && !empty param[name]}">
    <c:set target="${dataModel}" property="${name}" value="${param[name]}"/>
</c:if>

<textarea name="${name}"
    <c:forEach var="attr" items="${dynAttr}">
        ${attr.key}="${fn:escapeXml(attr.value)}"
    </c:forEach>
><c:out value="${dataModel[name]}"/></textarea>

                
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="df" tagdir="/WEB-INF/tags/dynamic/forms" %>

<jsp:useBean id="dataModel" scope="request" class="formsdemo.AddressBean"/>

<form method="POST">
    <df:textarea name="address" rows="3" cols="30"/>
    <br><input type="submit" value="Submit"/>
</form>

                
<%@ attribute name="tag" required="true" rtexprvalue="true" %>
<%@ attribute name="map" required="true" rtexprvalue="true"
    type="java.util.Map" %>
<%@ tag body-content="empty" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<c:if test="${!empty initParam.skin}">
    <c:set var="classAttr" value="${initParam.skin}_${tag}"/>
</c:if>

<c:forEach var="attr" items="${map}">
    <c:if test="${attr.key != 'class'}">
        ${attr.key}="${fn:escapeXml(attr.value)}"
    </c:if>
    <c:if test="${attr.key == 'class'}">
        <c:set var="classAttr" value="${classAttr} ${attr.value}"/>
    </c:if>
</c:forEach>

<c:if test="${!empty classAttr}">
    class="${fn:escapeXml(classAttr)}"
</c:if>

                
<web-app ...>
    <context-param>
        <param-name>skin</param-name>
        <param-value>default</param-value>
    </context-param>
</web-app>

                
<%@ attribute name="name" required="true" rtexprvalue="true" %>
<%@ tag dynamic-attributes="dynAttr" body-content="scriptless" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="dfu" tagdir="/WEB-INF/tags/dynamic/forms/util" %>

<c:if test="${pageContext.request.method == 'POST' && !empty param[name]}">
    <c:set target="${dataModel}" property="${name}" value="${param[name]}"/>
</c:if>

<textarea name="${name}" <dfu:attrList tag="textarea" map="${dynAttr}"/>
><c:out value="${dataModel[name]}"/></textarea>

                
.default_textarea
    { border-color: #A0A0A0; border-style: solid; border-width: thin; }

                
<%@ attribute name="name" required="true" rtexprvalue="true" %>
<%@ attribute name="action" required="false" rtexprvalue="true" %>
<%@ attribute name="method" required="false" rtexprvalue="true" %>
<%@ attribute name="model" required="true" rtexprvalue="true"
    type="java.lang.Object"%>
<%@ tag dynamic-attributes="dynAttr" body-content="scriptless" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="dfu" tagdir="/WEB-INF/tags/dynamic/forms/util" %>

<c:set var="formName" scope="request" value="${name}"/>
<c:set var="formModel" scope="request" value="${model}"/>
<c:if test="${!empty action}">
    <c:set var="formAction" scope="request" value="${action}"/>
</c:if>
<c:set var="formPost" scope="request"
    value="${fn:toUpperCase(pageContext.request.method) == 'POST'}"/>
<jsp:useBean id="formErrors" scope="request" class="java.util.HashMap"/>

<form name="${name}" method="POST" <dfu:attrList tag="form" map="${dynAttr}"/>>
    <jsp:doBody/>
</form>

<c:if test="${formPost && empty formErrors && !empty formAction}">
    <c:set var="forwardURL" value="${formAction}"/>
</c:if>

<c:remove var="formName" scope="request"/>
<c:remove var="formModel" scope="request"/>
<c:remove var="formAction" scope="request"/>
<c:remove var="formPost" scope="request"/>
<c:remove var="formErrors" scope="request"/>

<c:if test="${!empty forwardURL}">
    <jsp:forward page="${forwardURL}"/>
</c:if>

                
<df:form name="..." model="${...}" action="...">
    ...
    <df:textarea .../>
    ...
</df:form>

                
<%@ attribute name="name" required="true" rtexprvalue="true" %>
<%@ attribute name="array" required="false" rtexprvalue="true"
    type="java.lang.Boolean" %>
<%@ attribute name="bool" required="false" rtexprvalue="true"
    type="java.lang.Boolean" %>
<%@ tag body-content="empty" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="dfu" tagdir="/WEB-INF/tags/dynamic/forms/util" %>

<c:set var="propValue" value="${null}"/>
<c:if test="${formPost && empty formErrors[name]}">
    <c:if test="${!array && !bool && !empty param[name]}">
        <c:set var="propValue" value="${param[name]}"/>
    </c:if>
    <c:if test="${!array && bool}">
        <c:set var="propValue" value="${!empty param[name]}"/>
    </c:if>
    <c:if test="${array && fn:length(paramValues[name]) > 0}">
        <c:set var="propValue" value="${paramValues[name]}"/>
    </c:if>
</c:if>

<c:if test="${propValue != null}">
    <c:catch var="exception">
        <c:set target="${formModel}" property="${name}" value="${propValue}"/>
    </c:catch>
    <c:if test="${exception != null}">
        <dfu:addError name="${name}" msg="${exception.message}"
            exception="${exception}"/>
    </c:if>
</c:if>

                
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ attribute name="name" required="true" rtexprvalue="true" %>
<%@ attribute name="msg" required="true" rtexprvalue="true" %>
<%@ attribute name="exception" required="false" rtexprvalue="true"
    type="java.lang.Throwable" %>

<c:if test="${!empty formErrors[name]}">
    <c:set var="msg" value="${formErrors[name]}; ${msg}"/>
</c:if>
<c:set target="${formErrors}" property="${name}" value="${msg}"/>

<c:if test="${exception != null}">
    <% ((Throwable) jspContext.getAttribute("exception")).printStackTrace(); %>
</c:if>

                
<%@ attribute name="name" required="true" rtexprvalue="true" %>
<%@ tag dynamic-attributes="dynAttr" body-content="scriptless" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="dfu" tagdir="/WEB-INF/tags/dynamic/forms/util" %>

<dfu:setProp name="${name}"/>

<c:set var="textareaValue" value="${formModel[name]}"/>
<c:if test="${empty textareaValue}">
    <jsp:doBody var="textareaValue"/>
</c:if>

<textarea name="${name}" <dfu:attrList tag="textarea" map="${dynAttr}"/>
><c:out value="${textareaValue}"/></textarea>

                
<%@ attribute name="name" required="true" rtexprvalue="true" %>
<%@ attribute name="multiple" required="false" rtexprvalue="true"
    type="java.lang.Boolean" %>
<%@ tag dynamic-attributes="dynAttr" body-content="scriptless" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="dfu" tagdir="/WEB-INF/tags/dynamic/forms/util" %>

<c:set var="selectName" scope="request" value="${name}"/>
<c:set var="selectMultiple" scope="request" value="${multiple}"/>

<dfu:setProp name="${name}" array="${multiple}"/>

<select name="${name}"
    <c:if test="${multiple}">
        multiple
    </c:if>
    <dfu:attrList tag="select" map="${dynAttr}"/>
>
    <jsp:doBody/>
</select>

<c:remove var="selectName" scope="request"/>
<c:remove var="selectMultiple" scope="request"/>

                
<%@ attribute name="value" required="false" rtexprvalue="true" %>
<%@ tag dynamic-attributes="dynAttr" body-content="scriptless" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="dfu" tagdir="/WEB-INF/tags/dynamic/forms/util" %>

<jsp:doBody var="optionLabel"/>

<c:set var="optionValue" value="${value}"/>
<c:if test="${empty optionValue}">
    <c:set var="optionValue" value="${optionLabel}"/>
</c:if>

<option
    <c:if test="${!empty value}">
        value="${fn:escapeXml(value)}"
    </c:if>
    <dfu:isSelected name="${selectName}" value="${optionValue}"
        array="${selectMultiple}">
        selected
    </dfu:isSelected>
    <dfu:attrList tag="option" map="${dynAttr}"/>
><c:out value="${optionLabel}"/></option>

                
<%@ attribute name="name" required="true" rtexprvalue="true" %>
<%@ attribute name="value" required="true" rtexprvalue="true" %>
<%@ attribute name="array" required="false" rtexprvalue="true"
    type="java.lang.Boolean" %>
<%@ tag body-content="scriptless" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<c:set var="selected" value="false"/>

<c:if test="${!array}">
    <c:set var="selectedValue" value="${formModel[name]}"/>
    <c:if test="${!empty selectedValue}">
        <c:if test="${selectedValue == value}">
            <c:set var="selected" value="${true}"/>
        </c:if>
    </c:if>
</c:if>

<c:if test="${array}">
    <c:set var="selectedValues" value="${formModel[name]}"/>
    <c:if test="${fn:length(selectedValues) > 0}">
        <c:forEach var="selectedValue" items="${selectedValues}">
            <c:if test="${selectedValue == value}">
                <c:set var="selected" value="${true}"/>
            </c:if>
        </c:forEach>
    </c:if>
</c:if>

<c:if test="${selected}">
    <jsp:doBody/>
</c:if>

                
<%@ attribute name="name" required="true" rtexprvalue="true" %>
<%@ attribute name="type" required="true" rtexprvalue="true" %>
<%@ attribute name="value" required="false" rtexprvalue="true" %>
<%@ attribute name="action" required="false" rtexprvalue="true" %>
<%@ tag dynamic-attributes="dynAttr" body-content="empty" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="dfu" tagdir="/WEB-INF/tags/dynamic/forms/util" %>

<c:set var="inputType" value="${fn:toLowerCase(type)}"/>
<c:set var="inputValue" value="${value}"/>
<c:set var="inputChecked" value="${false}"/>

<c:choose>
    <c:when test="${inputType=='text' || inputType=='password' || inputType=='hidden'}">
        <dfu:setProp name="${name}"/>
        <c:set var="inputValue" value="${formModel[name]}"/>
    </c:when>
    <c:when test="${inputType == 'radio'}">
        <dfu:setProp name="${name}"/>
        <dfu:isSelected name="${name}" value="${value}">
            <c:set var="inputChecked" value="${true}"/>
        </dfu:isSelected>
    </c:when>
    <c:when test="${inputType == 'checkbox'}">
        <dfu:setProp name="${name}" bool="true"/>
        <c:if test="${formModel[name]}">
            <c:set var="inputChecked" value="${true}"/>
        </c:if>
    </c:when>
    <c:when test="${inputType=='submit'}">
        <c:if test="${formPost && !empty param[name] && !empty action}">
            <c:set var="formAction" scope="request" value="${action}"/>
        </c:if>
    </c:when>
</c:choose>

<input name="${name}" type="${type}"
    <c:if test="${!empty inputValue}">
        value="${fn:escapeXml(inputValue)}"
    </c:if>
    <c:if test="${inputChecked}">
        checked
    </c:if>
    <dfu:attrList tag="input_${type}" map="${dynAttr}"/>
>

                
package formsdemo;

public class SupportBean implements java.io.Serializable {
    private String name;
    private String email;
    private String versions[];
    private String platform;
    private String browser;
    private boolean crash;
    private String problem;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
    ...
}

                
<%@ taglib prefix="df" tagdir="/WEB-INF/tags/dynamic/forms" %>

<jsp:useBean id="supportBean" scope="request" class="formsdemo.SupportBean"/>

<html>
<head>
    <title>Support Form</title>
    <link rel="stylesheet" href="forms.css" type="text/css">
</head>
<body>

    <h1>Support Form</h1>

    <df:form name="supportForm" model="${supportBean}"
            action="SupportConfirm.jsp">

        <p>Name: <br>
        <df:input name="name" type="text" size="40"/>

        <p>Email: <br>
        <df:input name="email" type="text" size="40"/>

        <p>Versions: <br>
        <df:select name="versions" multiple="true" size="5">
            <df:option>2.0.1</df:option>
            <df:option>2.0.0</df:option>
            <df:option>1.1.0</df:option>
            <df:option>1.0.1</df:option>
            <df:option>1.0.0</df:option>
        </df:select>

        <p>Platform: <br>
        <df:input name="platform" type="radio" value="Windows"/> Windows <br>
        <df:input name="platform" type="radio" value="Linux"/> Linux <br>
        <df:input name="platform" type="radio" value="Mac"/> Mac <br>

        <p>Browser: <br>
        <df:select name="browser" size="1">
            <df:option value=""></df:option>
            <df:option value="IE">IE</df:option>
            <df:option value="Firefox">Firefox</df:option>
            <df:option value="Netscape">Netscape</df:option>
            <df:option value="Mozilla">Mozilla</df:option>
            <df:option value="Opera">Opera</df:option>
            <df:option value="Safari">Safari</df:option>
        </df:select>

        <p><df:input name="crash" type="checkbox"/> Causes browser crash

        <p>Problem: <br>
        <df:textarea name="problem" rows="10" cols="40"/>

        <p><df:input name="submit" type="submit" value="Submit"/>

    </df:form>

</body>
</html>

                
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>Support Confirmation</title>
</head>
<body>

    <h1>Support Confirmation</h1>

    <p>Your information was received.

    <p>Name: <c:out value="${supportBean.name}"/><br>
    <p>Email: <c:out value="${supportBean.email}"/><br>
    <p>Versions: <c:forEach var="version" items="${supportBean.versions}">
        <c:out value="${version}"/></c:forEach><br>
    <p>Platform: <c:out value="${supportBean.platform}"/><br>
    <p>Browser: <c:out value="${supportBean.browser}"/><br>
    <p>Causes browser crash: <c:out value="${supportBean.crash}"/>
    <p>Problem: <c:out value="${supportBean.problem}"/><br>

</body>
</html>

                
<jsp:useBean id="supportBean" scope="request" class="java.util.HashMap"/>
...
<df:form name="supportForm" model="${supportBean}" action="SupportConfirm.jsp">
    ...
</df:form>

                
function getFormData(form) {
    var dataString = "";

    function addParam(name, value) {
        dataString += (dataString.length > 0 ? "&" : "")
            + escape(name).replace(/\+/g, "%2B") + "="
            + escape(value ? value : "").replace(/\+/g, "%2B");
    }

    var elemArray = form.elements;
    for (var i = 0; i < elemArray.length; i++) {
        var element = elemArray[i];
        var elemType = element.type.toUpperCase();
        var elemName = element.name;
        if (elemName) {
            if (elemType == "TEXT"
                    || elemType == "TEXTAREA"
                    || elemType == "PASSWORD"
                    || elemType == "HIDDEN")
                addParam(elemName, element.value);
            else if (elemType == "CHECKBOX" && element.checked)
                addParam(elemName, element.value ? element.value : "On");
            else if (elemType == "RADIO" && element.checked)
                addParam(elemName, element.value);
            else if (elemType.indexOf("SELECT") != -1)
                for (var j = 0; j < element.options.length; j++) {
                    var option = element.options[j];
                    if (option.selected)
                        addParam(elemName,
                            option.value ? option.value : option.text);
                }
        }
    }
    return dataString;
}

                
function submitFormData(form, callback) {
    var xhr;
    if (window.ActiveXObject)
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    else if (window.XMLHttpRequest)
        xhr = new XMLHttpRequest();
    else
        return null;
        
    var method = form.method ? form.method.toUpperCase() : "GET";
    var action = form.action ? form.action : document.URL;
    var data = getFormData(form);

    var url = action;
    if (data && method == "GET")
        url += "?" + data;
    xhr.open(method, url, true);
    
    function submitCallback() {
        if (callback && xhr.readyState == 4 && xhr.status == 200)
            callback(xhr);
        ...
    }
    xhr.onreadystatechange = submitCallback;

    xhr.setRequestHeader("Ajax-Request", "Auto-Save");
    if (method == "POST") {
        xhr.setRequestHeader("Content-Type",
            "application/x-www-form-urlencoded");
        xhr.send(data);
    } else
        xhr.send(null);
    
    return xhr;
}

                
var autoSaveXHR = new Array();

function submitAllForms(callback) {
    var formArray = document.forms;
    for (var i = 0; i < formArray.length; i++) {
        if (autoSaveXHR[i]) {
            var oldXHR = autoSaveXHR[i];
            oldXHR.onreadystatechange = function() { };
            oldXHR.abort();
            delete oldXHR;
        }
        autoSaveXHR[i] = submitFormData(formArray[i], callback);
    }
}

                
<%@ taglib prefix="df" tagdir="/WEB-INF/tags/dynamic/forms" %>

<jsp:useBean id="supportBean" scope="request" class="formsdemo.SupportBean"/>

<html>
<head>
    ...
    <script type="text/javascript" src="AutoSaveScript.js">
    </script>
    <script type="text/javascript">
        function ajaxCallback(xhr) {
            confirmWindow=window.open("", "_blank",
                "menubar=no, resizable=yes, scrollbars=yes, width=600, height=600");
            confirmWindow.document.write(xhr.responseText);
            confirmWindow.document.close();
        }

        function submitSupportForm() {
            submitAllForms(ajaxCallback);
            return false;
        }
    </script>
</head>
<body>
    ...
    <df:form name="supportForm" model="${supportBean}"
            action="SupportConfirm.jsp">
        ...
        <df:input name="ajaxSubmit" type="submit" value="Submit with Ajax"
            onclick="return submitSupportForm()"/>
    </df:form>
</body>
</html>