Whiteship's Note

[회사일] edit.jsp 화면에 태그 파일 적용하기

프로젝트/SLT : 2010.06.11 14:05


먼저 Code 도메인의 edit.jsp 코드를 보겠습니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="page" tagdir="/WEB-INF/tags/page" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<page:page>
    <page:head/>
    <page:body>
        <div class="ui-layout-center">
            <h2 class="smdis-pane-title" id="smdis-grid-title">
                <ul class="smdis-left-icons">
                    <li id="smdis-save-button" class="ui-state-default ui-corner-all" title="저장"><span class="ui-icon ui-icon-disk"></span></li>
                    <li id="smdis-delete-button" class="ui-state-default ui-corner-all" title="삭제"><span class="ui-icon ui-icon-trash"></span></li>
                    <li id="smdis-reload-button" class="ui-state-default ui-corner-all" title="원래값으로"><span class="ui-icon ui-icon-refresh"></span></li>
                </ul>
                <ul class="smdis-right-icons">
                    <li id="smdis-list-button" class="ui-state-default ui-corner-all" title="목록으로"><span class="ui-icon ui-icon-search"></span></li>
                    <li id="smdis-back-button" class="ui-state-default ui-corner-all" title="뒤로"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li>
                </ul>
                코드 수정
            </h2>
            <form:form commandName="model" action="/base/code/${model.id}" method="PUT">
                <p class="ui-widget-content"><label>코드종류</label><form:select path="cate" items="${ref.codeCateList}" itemValue="value" itemLabel="descr" /><form:errors path="cate" cssClass="smdis-error-message"/></p>
                <p class="ui-widget-content"><label>코드값</label><form:input path="code"/><form:errors path="code" cssClass="smdis-error-message"/></p>
                <p class="ui-widget-content"><label>코드명</label><form:input path="name"/><form:errors path="name" cssClass="smdis-error-message"/></p>
                <p class="ui-widget-content"><label>설명</label><form:textarea path="descr"/></p>
            </form:form>
        </div>

        <%--//검색/정렬--%>
        <div class="ui-layout-east">
            <h2 class="smdis-pane-title">
                <ul class="smdis-left-icons">
                    <li id="smdis-grid-apply" class="ui-state-default ui-corner-all" title="적용"><span class="ui-icon ui-icon-arrowthickstop-1-w"></span></li>
                </ul>
                <ul class="smdis-right-icons">
                    <li class="ui-state-default ui-corner-all" title="적용하고 닫기"><span class="ui-icon ui-icon-arrowthickstop-1-e"></span></li>
                </ul>
                검색
            </h2>
        </div>

    <script type="text/javascript">
        $(function() {
            $("button").button();

            $("#smdis-save-button").click(function(){
                var result = confirm("저장 하시겠습니까?");
                if(!result) return;

                $("form input[name='_method']").attr("value", "PUT");
                $("form").submit();
            });

            $("#smdis-delete-button").click(function(){
                var result = confirm("삭제 하시겠습니까?");
                if(!result) return;
                
                $("form input[name='_method']").attr("value", "DELETE");
                $("form").submit();
            });

            $("#smdis-reload-button").click(function(){
                var result = confirm("변경 사항을 취소 하시겠습니까?");
                if(!result) return;

                $(document).attr("location", '/base/code/${model.id}/form');
            });

            $("#smdis-back-button").click(function(){
                $(document).attr("location", '/base/code/${model.id}');
            });

            $("#smdis-list-button").click(function(){
                $(document).attr("location", '/base/code/mgt');    
            });
        });
    </script>
    </page:body>
</page:page>

일부는 page라는 태그파일을 적용해서 코드를 많이 줄여놨습니다. 그래도 너무 길고.. Member의 edit.jsp 파일을 만들 때 손대는 곳은 굵은 글씨 밖에 없습니다. 신경쓸 곳만 신경쓰게 만들고 나머진 신경쓰고 싶지도 않고 보고 싶지도 않습니다. 그리고 위와 같은 코드가 여러 JSP에 중복되면.. 결국 자바 중복 코드랑 다를께 없습니다. 화면 코드에서도 중복을 제거해야 합니다.

Member 도메인의 edit.jsp 파일은 결국 다음과 같이 바꼈습니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="page" tagdir="/WEB-INF/tags/page" %>
<%@ taglib prefix="osaf" tagdir="/WEB-INF/tags/osaf" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<page:page>
    <page:head/>
    <page:body>
        <page:edit label="계정 수정">
            <osaf:input label="로그인ID" path="loginId"/>
            <osaf:input label="비밀번호" path="password"/>
            <osaf:input label="이름" path="name"/>
            <osaf:input label="이메일" path="email"/>
        </page:edit>
        <page:searchWithoutButtons />
    </page:body>
</page:page>

정말 이게 전부입니다. 잡습 코드도 잡습이 적용될 코드가 들어있는 태그 파일로 넣어놨습니다. Code의 edit.jsp 파일에도 태그 파일을 적용하면..

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="page" tagdir="/WEB-INF/tags/page" %>
<%@ taglib prefix="osaf" tagdir="/WEB-INF/tags/osaf" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<page:page>
    <page:head/>
    <page:body>
        <page:edit label="코드 수정">
            <osaf:select label="코드종류" path="cate" items="${ref.codeCateList}" itemValue="value" itemLabel="descr" />
            <osaf:input label="코드값" path="code"/>
            <osaf:input label="코드명" path="name"/>
            <osaf:textarea label="설명" path="descr"/>
        </page:edit>
        <page:searchWithoutButtons />
    </page:body>
</page:page>

이렇게 됩니다. 사실 저기서 위아래 세줄 정도도 관심 대상이 아니라서 page:editpage 같은 태그 파일을 만들어 줄일 수도 있습니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="page" tagdir="/WEB-INF/tags/page" %>
<%@ taglib prefix="osaf" tagdir="/WEB-INF/tags/osaf" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<page:editpage label="코드 수정">
    <osaf:select label="코드종류" path="cate" items="${ref.codeCateList}" itemValue="value" itemLabel="descr" />
    <osaf:input label="코드값" path="code"/>
    <osaf:input label="코드명" path="name"/>
    <osaf:textarea label="설명" path="descr"/>
</page:editpage>

좋아 좋아!!! 이제부터는 이렇게 딱 다섯줄만 코딩하면...


이런 화면을 만들 수 있는 겁니다.

이대로 끝내면 아쉬우니까 태그파일 코드 몇개만 공개하겠습니다.

WEB-INF/tags/page/editpage.tag

<%@ tag pageEncoding="utf-8" %>
<%@ taglib prefix="page" tagdir="/WEB-INF/tags/page" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ attribute name="label" required="true"%>

<page:page>
    <page:head/>
    <page:body>
        <page:edit label="${label}">
            <jsp:doBody/>
        </page:edit>
        <page:searchWithoutButtons />
    </page:body>
</page:page>

WEB-INF/tags/osaf/select.tag

<%@ tag pageEncoding="utf-8" %>
<%@ taglib prefix="page" tagdir="/WEB-INF/tags/page" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ attribute name="label" required="true"%>
<%@ attribute name="path" required="true"%>
<%@ attribute name="items" type="java.util.List" required="true"%>
<%@ attribute name="itemValue" required="false"%>
<%@ attribute name="itemLabel" required="false"%>

<p class="ui-widget-content">
    <label>${label}</label>
    <form:select path="${path}" items="${items}" itemValue="${itemValue}" itemLabel="${itemLabel}" />
    <form:errors path="${path}" cssClass="smdis-error-message"/>
</p>
top

Write a comment.




: 1 : ··· : 6 : 7 : 8 : 9 : 10 : 11 : 12 : 13 : 14 : ··· : 30 :