[JSP] 항목별 동적 툴팁 적용

웹 개발을 하면서 툴팁은 생각보다 많이 쓰인다. 항목별 도움말과 같이 동작할때가 가장 큰데, 이걸 관리자가 직접 관리할 수 있었으면 좋겠다는 요구사항이 나왔다. 허미 대체 이게 뭔말이래. 그러니까 간단하게 요약하자면 다음과 같다.

 

요구사항

1. 관리자가 툴팁관리 메뉴를 통해, 항목별로 툴팁을 등록/수정 등 관리를 할 수 있을 것

2. 등록된 툴팁은 화면상에서 보여질 것

 

대충 뭐 이런건데, 우리가 예시를 들자면 '저장'버튼 에 마우스 오버를 하면 '저장을 하기 위한 버튼이에용' 이라고 툴팁이 뜰 것이다.

그런데 저 툴팁메세지를 관리화면을 통해 추후에 바꾸겠다는거다. 이게 유동적으로 돼? 처음에는 반신반의 했는데, 이게 되네?

 

 

구현 - ModelAndView

결론적으로는 매우 쉽게 유동적으로 관리가 된다.

간단히 설명하자면, 해당 화면을 로딩하기 위한 controller 에서 ModelAndView에 jsp 경로를 리턴해줄것인데, 이 ModelAndView에 툴팁 Object를 함께 넣어주는 것.

그리고 해당 jsp 에서 툴팁Object 에서 html렌더링시 해당 value를 뽑아다 쓸 수 있는 것이다. 다음의 소스코드를 보자.

public ModelAndView viewReturns(HttpServletRequest req,HttpServletResponse res) throws Exception {
    
    // 중략
    ModelAndView mav = new ModelAndView("/common/jsp/TEST1.jsp"); //jsp 경로 반환
    
    //이걸 추후에는 DB쿼리로 변경하면 된다
    Map<String, String> tooltipMap = new HashMap<>();
    tooltipMap.put("product", "상품명");
    tooltipMap.put("productId", "상품아이디");
    tooptilMap.put("productType", "상품구분");
 
    // ModelAndView에 tooltipMap 으로 오브젝트 담    
    mav.addObject("tooptilMap", tooltipMap);
 
    return mav;
}

 

소스코드에 작성된 주석과 같이 Map 형태로 툴팁 메시지를 담고, 저걸 modelandview에 넣어준다.

현재 디비가 준비되어있지 않아Map형태로 구현하긴 했지만, 실제로 db 쿼리 시에도 vo 형태로 가져올것이기에 크게 문제가 될 부분은 없다.

 

그리고 jsp에서는 다음과 같이 꺼내쓰면 끝이다. 완전 쉬움.

<div title="${tooltipMap.product}"><dl><dt>Product</dt></dl></div>
<div title="${tooltipMap.productId}"><dl><dt>Product Id</dt></dl></div>
<div title="${tooltipMap.productType}"><dl><dt>ProductType</dt></dl></div>

그럼 툴팁이 별도 처리 없이 바로 저렇게 보인다. 이렇게 간단하다고?

 

 

응용 - 그리드

javascript 형태로 되어진 그리드는 거의 대부분 적용될 것으로 보인다.

ModelAndView로 tooltipMap오브젝트를 담아 jsp로 던졌으니, jsp는 해당 페이지에 매핑된 js로 값을 넘겨주면 된다.

그리고 js에서는 그리드 컬럼을 구성할 때 tooltipMap에서 꺼내 매핑하면 된다.

다음의 소스코드를 보자.

<script>
    // ModelAndView 에서 JSP 로 전달한 tooltipMap을 JS로 주입
    var tooltipObj = {
        product : "${tooltipMap.product}"
        ,productId : "${tooltipMap.productId}"
        , productType : "${tooltipMap.productType}"
    }
 
    // 중략
 
    // 그리드 컬럼 설정부
    const columnParam = [
        {name:'상품명',dataType:'text', fieldName:'product', tooltip:tooltipObj.product}
        ,{name:'상품아이디',dataType:'text', fieldName:'productId', tooltip:tooltipObj.productId}
        , {name:'상품타입',dataType:'text', fieldName:'productType', tooltip:tooltipObj.productType}
    ]
 
    //생략
</script>

 

3번째와 같이 JSP에서 JS로 오브젝트 주입을 시도한다.

그리고 js의 그리드 컬럼 설정부에서 tooltip을 저러한 형태로 작성해주면 된다.

 

이렇게하면 상단의 검색조건/항목의 툴팁과 그리드의 툴팁을 모두 JAVA 에서 가져올 수 있게 된다. 한 건 해결!