[XML] tld와 java tag class를 활용한 동적 html 생성

jsp에서 tld와 java 태그 클래스를 활용해서 동적인 html을 만들어봤다..

원래는 jsp 안에 <% %>로 java 코드를 넣는 방식으로 처리하려고 했었는데,

코드가 점점 지저분해질 것 같아서 태그 클래스를 만들어 보기로 했다.

tld를 설정하고, 매개변수를 처리하고, html을 생성하는 과정을 다 만들어야해서 조금 귀찮긴 하지만.. 일단 시행

 

tld 파일 생성

 

tld는 예전에 써본 적이 있었지만, 이번엔 매개변수를 여러 개 받는 태그를 만들어야 해서 새로 설계해야 했다.

selectBox, radio, checkbox 같은 동적인 html 요소를 태그로 작성하고 싶었다.

 

WEB-INF/tld 경로에 custom.tld 파일을 만들었다. 태그 이름과 사용할 속성을 정의해주는 게 핵심이다.

<jakartaee:taglib version="3.0"
    xmlns:jakartaee="https://jakarta.ee/xml/ns/jakartaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-jsptaglibrary_3_0.xsd">

    <jakartaee:tlib-version>1.0</jakartaee:tlib-version>
    <jakartaee:short-name>custom</jakartaee:short-name>
    <jakartaee:uri>/WEB-INF/tld/custom.tld</jakartaee:uri>

    <jakartaee:tag>
        <jakartaee:name>selectBox</jakartaee:name>
        <jakartaee:tag-class>com.example.tag.SelectBoxTag</jakartaee:tag-class>
        <jakartaee:body-content>empty</jakartaee:body-content>
        <jakartaee:attribute>
            <jakartaee:name>name</jakartaee:name>
            <jakartaee:required>true</jakartaee:required>
        </jakartaee:attribute>
        <jakartaee:attribute>
            <jakartaee:name>options</jakartaee:name>
            <jakartaee:required>true</jakartaee:required>
        </jakartaee:attribute>
        <jakartaee:attribute>
            <jakartaee:name>selectedValue</jakartaee:name>
            <jakartaee:required>false</jakartaee:required>
        </jakartaee:attribute>
    </jakartaee:tag>
</jakartaee:taglib>

 

selectBoxTag java 파일 생성

 

Java 태그 클래스를 만드는 것도 생각보다 어렵지 않았다.

JSP에서 태그 속성으로 전달한 데이터를 받아 동적으로 HTML을 만들어주는 역할을 한다.

먼저 SelectBoxTag를 작성해봤다.

public class SelectBoxTag extends SimpleTagSupport {
    private String name;
    private String options;
    private String selectedValue;

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

    public void setOptions(String options) {
        this.options = options;
    }

    public void setSelectedValue(String selectedValue) {
        this.selectedValue = selectedValue;
    }

    @Override
    public void doTag() throws JspException, IOException {
        List<String[]> parsedOptions = parseOptions(options);
        String html = HtmlUtils.selectBox(name, parsedOptions, selectedValue);
        getJspContext().getOut().write(html);
    }

    private List<String[]> parseOptions(String options) {
        return Arrays.stream(options.split(","))
                     .map(option -> option.split(":"))
                     .toList();
    }
}

 

여기서 HtmlUtils라는 클래스를 만들어서 html 생성 로직은 따로 분리했다. 공통으로 쓰기 위함이다.

 

HtmlUtils java 파일 생성

 

html 생성은 HtmlUtils라는 정적 메서드로 처리했다.

처음에는 태그 클래스에서 직접 HTML을 생성하려다가, 코드가 너무 복잡해질 것 같아서 따로 빼냈다.

public class HtmlUtils {

    public static String selectBox(String name, List<String[]> options, String selectedValue) {
        StringBuilder sb = new StringBuilder();
        sb.append("<select name='").append(name).append("'>");

        for (String[] option : options) {
            sb.append("<option value='").append(option[0]).append("'");
            if (option[0].equals(selectedValue)) {
                sb.append(" selected");
            }
            sb.append(">").append(option[1]).append("</option>");
        }

        sb.append("</select>");
        return sb.toString();
    }
}

 

jsp에서 호출

<%@ taglib prefix="custom" uri="/WEB-INF/tld/custom.tld" %>

<!-- SelectBox -->
<custom:selectBox name="gender" options="M:Male,F:Female" selectedValue="F" />