Ajax와 자바 개발을 간단하게, Part 3: DOM, 자바스크립트, JSP 태그 파일을 기반으로 동작하는 UI 만들기

                
function Validator(formName, elemName, outId, msg) {
    if (formName)
        this.formName = formName;
    if (elemName)
        this.elemName = elemName;
    if (outId)
        this.outId = outId;
    if (msg)
        this.msgList = ["", msg];
}

Validator.prototype.defaultMsgIndex = 0;

                
Validator.prototype.getFormValues = function() {
    var elemValues = new Array();
    var form = document.forms[this.formName];
    var formElements = form.elements;
    for (var i = 0; i < formElements.length; i++) {
        var element = formElements[i];
        if (element.name == this.elemName) {
            var elemType = element.type.toLowerCase();
            if (elemType == "text" || elemType == "textarea"
                    || elemType == "password" || elemType == "hidden")
                elemValues[elemValues.length] = element.value;
            else if (elemType == "checkbox" && element.checked)
                elemValues[elemValues.length]
                     = element.value ? element.value : "On";
            else if (elemType == "radio" && element.checked)
                elemValues[elemValues.length] = 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) {
                        elemValues[elemValues.length]
                            = option.value ? option.value : option.text;
                    }
                }
        }
    }
    return elemValues;
}

                
Validator.prototype.verify = function(value) {
    return 0;
}

                
Validator.prototype.showMsg = function(index) {
    document.getElementById(this.outId).innerHTML
        = htmlEncode(this.msgList[index]);
}

                
Validator.prototype.execute = function() {
    var msgIndex = this.defaultMsgIndex;
    var elemValues = this.getFormValues();
    for (var i = 0; i < elemValues.length; i++)
        if (elemValues[i]) {
            msgIndex = this.verify(elemValues[i]);
            if (msgIndex != 0)
                break;
        }
    this.showMsg(msgIndex);
    return msgIndex == 0;
}

                

function RequiredValidator(formName, elemName, outId, msg) {
    this.base = Validator;
    this.base(formName, elemName, outId, msg);
    delete this.base;
}

RequiredValidator.prototype = new Validator();

RequiredValidator.prototype.defaultMsgIndex = 1;

RequiredValidator.prototype.verify = function(value) {
    return value.length > 0 ? 0 : 1;
}

                
function LengthValidator(formName, elemName, outId, min, max, msgMin, msgMax) {
    this.base = Validator;
    this.base(formName, elemName, outId);
    delete this.base;
    this.min = min;
    this.max = max;
    this.msgList = ["", msgMin, msgMax];
}

LengthValidator.prototype = new Validator();

LengthValidator.prototype.verify = function(value) {
    if (value.length < this.min)
        return 1;
    if (value.length > this.max && this.max > 0)
        return 2;
    return 0;
}

                
function ValidatorList() {
    this.validatorArray = new Array();
}

ValidatorList.prototype.add = function(validator) {
    this.validatorArray[this.validatorArray.length] = validator;
}

ValidatorList.prototype.execute = function(formName, elemName) {
    var valid = true;
    for (var i = 0; i < this.validatorArray.length; i++) {
        var validator = this.validatorArray[i];
        if (validator.formName == formName)
            if (!elemName || validator.elemName == elemName)
                if (!validator.execute())
                    valid = false;
    }
    return valid;
}

var pageValidators = new ValidatorList();

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

<span id="${id}" class="ValidationError"><jsp:doBody/></span>

                
.ValidationError { color: red; }

                
<%@ attribute name="name" required="true" rtexprvalue="true" %>
<%@ attribute name="msg" required="false" rtexprvalue="true" %>
<%@ tag body-content="empty" %>

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

<c:if test="${empty msg}">
    <dvu:useDefaultMsg/>
    <c:set var="msg" value="${defaultValidMsg.required}"/>
</c:if>

<c:set var="outId" value="${name}Required"/>
<dvu:errMsg id="${outId}">
    <c:if test="${formPost && empty param[name]}">
        <c:out value="${msg}"/>
        <dfu:addError name="${name}" msg="${msg}"/>
    </c:if>
</dvu:errMsg>

<script type="text/javascript">
    pageValidators.add(new RequiredValidator(
        <da:jstring value="${formName}"/>, <da:jstring value="${name}"/>,
        <da:jstring value="${outId}"/>, <da:jstring value="${msg}"/>));
</script>

                
<%@ attribute name="name" required="true" rtexprvalue="true" %>
<%@ attribute name="min" required="false" rtexprvalue="true"
    type="java.lang.Long" %>
<%@ attribute name="max" required="false" rtexprvalue="true"
    type="java.lang.Long" %>
<%@ attribute name="msgMin" required="false" rtexprvalue="true" %>
<%@ attribute name="msgMax" required="false" rtexprvalue="true" %>
<%@ 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="da" tagdir="/WEB-INF/tags/dynamic/ajax" %>
<%@ taglib prefix="dfu" tagdir="/WEB-INF/tags/dynamic/forms/util" %>
<%@ taglib prefix="dvu" tagdir="/WEB-INF/tags/dynamic/valid/util" %>

<dvu:useDefaultMsg/>
<c:if test="${empty msgMin}">
    <c:set var="msgMin" value="${defaultValidMsg.too_short}"/>
</c:if>
<c:if test="${empty msgMax}">
    <c:set var="msgMax" value="${defaultValidMsg.too_long}"/>
</c:if>

<c:set var="outId" value="${name}Length"/>
<dvu:errMsg id="${outId}">
    <c:if test="${formPost && !empty param[name]}">
        <c:if test="${min != null && fn:length(param[name]) < min}">
            <c:out value="${msgMin}"/>
            <dfu:addError name="${name}" msg="${msgMin}"/>
        </c:if>
        <c:if test="${max != null && fn:length(param[name]) > max}">
            <c:out value="${msgMax}"/>
            <dfu:addError name="${name}" msg="${msgMax}"/>
        </c:if>
    </c:if>
</dvu:errMsg>

<script type="text/javascript">
    pageValidators.add(new LengthValidator(<da:jstring value="${formName}"/>,
        <da:jstring value="${name}"/>, <da:jstring value="${outId}"/>,
        ${min != null ? min : 0}, ${max != null ? max : 0},
        <da:jstring value="${msgMin}"/>, <da:jstring value="${msgMax}"/>));
</script>

                
<%@ 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:if test="${defaultValidMsg_en == null}">
    <jsp:useBean id="defaultValidMsg_en" scope="request" class="java.util.HashMap">
        <c:set target="${defaultValidMsg_en}" property="required"  value="Required"/>
        <c:set target="${defaultValidMsg_en}" property="too_short" value="Too short"/>
        <c:set target="${defaultValidMsg_en}" property="too_long"  value="Too long"/>
    </jsp:useBean>
    <c:if test="${!initParam.debug}">
        <c:set var="defaultValidMsg_en" scope="application"
            value="${requestScope.defaultValidMsg_en}"/>
    </c:if>
</c:if>
...
<c:if test="${defaultValidMsg == null}">
    <c:choose>
        <c:when test="${fn:startsWith(pageContext.request.locale, 'en')}">
            <c:set var="defaultValidMsg" scope="request"
                value="${defaultValidMsg_en}"/>
        </c:when>
        ...
    </c:choose>
</c:if>

                
<web-app ...>

    <context-param>
        <param-name>skin</param-name>
        <param-value>default</param-value>
    </context-param>

    <context-param>
        <param-name>debug</param-name>
        <param-value>true</param-value>
    </context-param>

</web-app>

                
<%@ 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" %>

<jsp:useBean id="addMap" class="java.util.HashMap"/>
<c:if test="${!empty initParam.skin}">
    <c:set target="${addMap}" property="class"
        value="${initParam.skin}_${tag}"/>
</c:if>
<c:if test="${tag=='input_text' || tag=='input_password' || tag=='input_radio'
        || tag=='textarea' || tag=='select'}">
    <c:set target="${addMap}" property="onblur"
        value="pageValidators.execute('${formName}', this.name)"/>
</c:if>
<c:if test="${tag=='form'}">
    <c:set target="${addMap}" property="onsubmit"
        value="return pageValidators.execute('${formName}')"/>
</c:if>

<c:forEach var="attr" items="${map}">
    <c:if test="${addMap[attr.key] == null}">
        ${attr.key}="${fn:escapeXml(attr.value)}"
    </c:if>
    <c:if test="${addMap[attr.key] != null}">
        <c:set var="sep" value="${fn:startsWith(attr.key, 'on') ? ';' : ' '}"/>
        <c:set target="${addMap}" property="${attr.key}"
            value="${attr.value}${sep}${addMap[attr.key]}"/>
    </c:if>
</c:forEach>

<c:forEach var="attr" items="${addMap}">
    ${attr.key}="${fn:escapeXml(attr.value)}"
</c:forEach>

                
<%@ page autoFlush="false" buffer="64kb"%>
<%@ taglib prefix="df" tagdir="/WEB-INF/tags/dynamic/forms" %>
<%@ taglib prefix="dv" tagdir="/WEB-INF/tags/dynamic/valid" %>

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

<html>
<head>
    <title>Support Form</title>
    <link rel="stylesheet" href="forms.css" type="text/css">
    <link rel="stylesheet" href="valid.css" type="text/css">
    <script src="encode.js" type="text/javascript">
    </script>
    <script src="valid.js" type="text/javascript">
    </script>
</head>
<body>

    <h1>Support Form</h1>

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

        <p>Name:
        <dv:required name="name"/>
        <dv:length name="name" max="60"/> <br>
        <df:input name="name" type="text" size="40"/>

        <p>Email:
        <dv:required name="email"/>
        <dv:length name="email" max="60"/> <br>
        <df:input name="email" type="text" size="40"/>

        <p>Versions:
        <dv:required name="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:
        <dv:required name="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:
        <dv:required name="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:
        <dv:required name="problem"/>
        <dv:length name="problem" min="100" max="2000"
            msgMin="Cannot have less than 100 characters"
            msgMax="Cannot have more than 2000 characters"/> <br>
        <df:textarea name="problem" rows="10" cols="40"/>

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

    </df:form>

</body>
</html>

                
<html>
<head>
    <title>Support Form</title>
    <link rel="stylesheet" href="forms.css" type="text/css">
    <link rel="stylesheet" href="valid.css" type="text/css">
    <script src="encode.js" type="text/javascript">
    </script>
    <script src="valid.js" type="text/javascript">
    </script>
</head>
<body>

    <h1>Support Form</h1>

    <form name="supportForm" method="POST" class="default_form"
            onsubmit="return pageValidators.execute('supportForm')">
        ...
        <p>Email: 
        <span id="emailRequired" class="ValidationError">
        </span>
        <script type="text/javascript">
            pageValidators.add(new RequiredValidator(
                "supportForm", "email", "emailRequired", "Required"));
        </script>
        <span id="emailLength" class="ValidationError">
        </span>
        <script type="text/javascript">
            pageValidators.add(new LengthValidator(
                "supportForm", "email", "emailLength", 0, 60, 
                "Too short", "Too long"));
        </script>
        <br>
        <input name="email" type="text" size="40" class="default_input_text"
            onblur="pageValidators.execute('supportForm', this.name)">
        ...
    </form>

</body>
</html>