전자정부표준프레임워크 paging 추가하기

전자정부표준프레임워크에서 페이징을 추가하려고 한다.

이를테면 관리자와 일반 사용자간의 페이징 디자인이 다른 경우가 해당한다.

(로직추가가 아니고 여러개의 페이징 디자인을 사용하는 경우에 해당한다.)

 

전자정부표준프레임워크의 페이징을 자세히 살펴본적도 없어서.. 페이징 디자인 추가를 위해서 좀 헤맸기에... 그 과정을 중심으로 기술해보고자 한다. 여태 한번도 생각해보지 않고, 그냥 있는대로 사용하기만 했을뿐이었다.

 

1. JSP 파일부터 살펴보자. 

   - 페이징이 항상 아래와 같이 사용이 되고 있는데 type="image" 와 ui:pagination에 대해서 의구심이 있었다.

   - type="image" 는 parameter를 던지는 느낌(또는 함수의 argument)

   - ui:pagination는 커스텀 태그로 보인다.

<!-- paging navigation -->
<div class="pagination">
    <ul><ui:pagination paginationInfo="${paginationInfo}" type="image" jsFunction="fn_egov_select"/></ul>
</div>

 

2. 커스텀태그 확인

   - 상단에 보면 아래와 같이 정의되어 있다. 아마도 전자정부표준프레임워크에서 만든 custom tag 라고 생각을 하고  추적을 해보기 시작하였다.

<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>

   - Ctrl 을 누른 상태로 마우스를 올리니 클릭이 가능해진다. 그래서 파일을 열어본다. 
   - 아래와 같이 custom tag가 정의되어 있다. 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN"
                 "http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd">
 
<taglib>
    <tlib-version>1.0</tlib-version>
    <jsp-version>1.2</jsp-version>
    <short-name>ui</short-name>
    <uri>http://egovframework.gov/ctl/ui</uri>
    <display-name>UI</display-name>
    <description>UI Tag Library</description>
    
    <tag>
        <name>pagination</name>
        <tag-class>egovframework.rte.ptl.mvc.tags.ui.PaginationTag</tag-class>
        
        <body-content>empty</body-content>
        <description>Pagination Tag</description>
        <attribute>
            <name>paginationInfo</name>
            <required>true</required>
            <rtexprvalue>true</rtexprvalue>
        </attribute>
        <attribute>
            <name>type</name>
            <required>false</required>
            <rtexprvalue>true</rtexprvalue>
        </attribute>
        <attribute>
            <name>jsFunction</name>
            <required>false</required>
            <rtexprvalue>true</rtexprvalue>
        </attribute>
    </tag>
</taglib>

 

3. 클래스 확인

   - custom tag에 클래스로 정의된 egovframework.rte.ptl.mvc.tags.ui.PaginationTag 파일을 또 열어본다.

   - 부분적으로 보면 아래와 같은데... ctx.getBean("paginationManager"); 가 눈에 띈다.(소스에 대한 이해는 나중문제로 두자.. 일단은)

public int doEndTag() throws JspException {
 
        try {
 
            JspWriter out = pageContext.getOut();
 
            PaginationManager paginationManager;
 
            // WebApplicationContext에 id 'paginationManager'로 정의된 해당 Manager를 찾는다.
            WebApplicationContext ctx = RequestContextUtils.getWebApplicationContext(pageContext.getRequest(), pageContext.getServletContext());
 
            if (ctx.containsBean("paginationManager")) {
                paginationManager = (PaginationManager) ctx.getBean("paginationManager");
            } else {
                //bean 정의가 없다면 DefaultPaginationManager를 사용. 빈설정이 없으면 기본 적인 페이징 리스트라도 보여주기 위함.
                paginationManager = new DefaultPaginationManager();
            }
 
            PaginationRenderer paginationRenderer = paginationManager.getRendererType(type);
 
            String contents = paginationRenderer.renderPagination(paginationInfo, jsFunction);
 
            out.println(contents);
 
            return EVAL_PAGE;
 
        } catch (IOException e) {
            throw new JspException();
        }
    }

 

4. 설정파일 확인(egov-com-servlet.xml)

   - paginationManager 키워드를 이클립스에서 검색해본다. bean으로 지정된 것이 있을 것이라는 추측으로 검색을 하였다.(아마도 bean 등록을 한 xml 파일이 있지 않을까?)

  - egov-com-servlet.xml 파일하나가 검색된다. 이럴 때는 lucky다.
  -  파일의 내용중에 아래와 같은 부분이 눈에 띈다. 

  - 1번에서 type=image 가 대략적으로 해석되는 듯 하다. 

   - type=image 인 파일이 egovframework.com.cmm.ImagePaginationRenderer 클래스와 연관되어 있는 것으로 추측할 수 있겠다. 

<!-- For Pagination Tag -->
<bean id="imageRenderer" class="egovframework.com.cmm.ImagePaginationRenderer"/>
 
<bean id="paginationManager" class="egovframework.rte.ptl.mvc.tags.ui.pagination.DefaultPaginationManager">
    <property name="rendererType">
        <map>
            <entry key="image" value-ref="imageRenderer"/>
        </map>
    </property>
</bean>

 

5. egovframework.com.cmm.ImagePaginationRenderer 클래스 파일을 열어본다. 

   - 아래와 같은 코드가 들어있다. 잘 찾은 것 같다.
   - 아래 코드가 맞는지 살짝만 바꿔서 테스트를 해봤다. 

public void initVariables(){
 
    firstPageLabel    = "<li class=\"first\"><a href=\"?pageIndex={1}\" onclick=\"{0}({1});return false; \">첫 페이지</a></li>";
    previousPageLabel = "<li class=\"prev\"><a href=\"?pageIndex={1}\" onclick=\"{0}({1});return false; \">이전 페이지</a></li>";
    
    currentPageLabel  = "<li class=\"current\"><a onClick=\"return false;\">{0}</a></li>";
    otherPageLabel    = "<li><a href=\"?pageIndex={1}\" onclick=\"{0}({1});return false; \">{2}</a></li>";
    
    nextPageLabel    = "<li class=\"next\"><a href=\"?pageIndex={1}\" onclick=\"{0}({1});return false; \">다음 페이지</a></li>";
    lastPageLabel    = "<li class=\"last\"><a href=\"?pageIndex={1}\" onclick=\"{0}({1});return false; \">끝 페이지</a></li>";
 
}

6. egov-com-servlet.xml 파일을 수정한다.

   - 대충 느낌을 보니 <bean id="imageRenderer" class="egovframework.com.cmm.ImagePaginationRenderer"/> 와 비슷하게 하나 추가하고  <entry key="image" value-ref="imageRenderer"/> 와 비슷하게 추가하면 되지 않을까? 하는 생각이 든다. 

   - 아래와 같이 추가하였다.(관리자 전용으로 만드는 것이라 아래와 같이 추가하였다.)

   - 추가는 했는데 문제가 있다. egovframework.com.cmm.AdminImagePaginationRenderer 라는 클래스가 아직까진 존재하지 않으니 말이다. 따라서 만들어주면 된다. 

<!-- For Pagination Tag -->
<bean id="imageRenderer" class="egovframework.com.cmm.ImagePaginationRenderer"/>
 
<!-- 페이징 추가 -->
<bean id="adminImageRenderer" class="egovframework.com.cmm.AdminImagePaginationRenderer"/>
 
<bean id="paginationManager" class="egovframework.rte.ptl.mvc.tags.ui.pagination.DefaultPaginationManager">
    <property name="rendererType">
        <map>
            <entry key="image" value-ref="imageRenderer"/>
            <entry key="adminImage" value-ref="adminImageRenderer"/>
        </map>
    </property>
</bean>

7. egovframework.com.cmm.AdminImagePaginationRenderer 클래스 파일 생성

   - egovframework.com.cmm.ImagePaginationRenderer 클래스 파일을 카피하여서 AdminImagePaginationRenderer 클래스 파일을 생성하여서 수정을 해주니 잘 동작한다. (몇번의 수정을 해줬지만)

 

 

8. JSP에 적용

   - 아래와 같이 적용한다.  type="adminImage" 만 변경하니 정상적으로 작동한다. css는 꽤나 수정해줬지만 말이다. 

<ui:pagination paginationInfo="${paginationInfo}" type="adminImage" jsFunction="fn_egov_select"/>

 

 

전자정부표준프레임워크 위키문서에는 더 많은 내용이 있다.

 

www.egovframe.go.kr/wiki/doku.php?id=egovframework:rte:ptl:view:paginationtag

egovframework:rte:ptl:view:paginationtag [eGovFrame]

 

 

Done.