7
ToolPalette
hanmj edited this page 3 months ago
ToolPalette 소개
toolPalette란 자주 사용하는 소스코드(HTML이나 자바스크립트)를 사용자의 클립보드에 복사하여 원하는 곳에 붙여 넣을 수 있게 하는 기능이다.
사용법
1.ToolPalette라이브러리 삽입
ToolPalette를 사용할 html페이지나 jsp페이지에 아래와 같이 ToolPalette경로를 추가한다.
<script src="<c:url value="/webjars/js/support/toolPalette.js?${ver}"/>"></script>
2.인터넷브라우저 개발자도구 열기
F12 버튼을 눌러 인터넷브라우저의 개발자도구를 띄우고 콘솔(console) 탭에서 "tool."으로 시작하는 명령어를 입력하여 ToolPalette를 실행할 수 있다.
크롬의 개발자도구
엣지의 개발자도구
2-1.명령어 목록 보기
help명령어를 입력하고 실행하면 ToolPalette에서 사용할 수 있는 모든 명령어와 설명을 확인 할 수 있다.
tool.help
- 실행결과
2-2A.명령어 실행으로 클립보드 저장
"tool.명령어이름" 형식으로 실행하면 클립보드에 해당 요소가 저장되며, 키보드의 컨트롤+V로 이클립스나 인텔리제이의 편집기에 붙여 넣을 수 있다.
- 예시
tool.dataGrid
tool.datePicker
tool.button
...등등
2-2B.ToolPalette 팝업 화면의 기능으로 클립보드 저장
개발자도구의 콘솔 탭에서 tool.open()를 실행하면 클립보드에 저장할 수 있는 요소들을 마우스로 선택하여 클립보드에 저장할 수 있는 팝업 화면을 새 창으로 띄운다. 원하는 항목을 클릭하면 해당 요소가 저장되며, 키보드의 컨트롤+V로 이클립스나 인텔리제이의 편집기에 붙여 넣을 수 있다.
tool.open()
- 실행결과
3.붙여 넣기 후 필요한 부분 수정
붙여 넣은 후 수정해야 할 부분이 명시된다면 해당 부분을 수정한다.
- tool.dataGrid의 예시
<div class="card-datatable text-nowrap">
<div class="dataTables_wrapper dt-bootstrap5 no-footer">
<div class="table-responsive ox-scroll oy-scroll h-px-500">
<table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer">
<thead class="sticky-thead">
<tr>
<th style="width: 160px;">한글컬럼명1</th>
<th style="width: 160px;">한글컬럼명2</th>
<th style="width: 160px;">한글컬럼명3</th>
<th style="width: 160px;">한글컬럼명4</th>
<th style="width: 160px;">한글컬럼명5</th>
<th class="dummy-th"></th>
</tr>
</thead>
<tbody name="데이터조회결과가 표시될 영역의 이름을 적으세요">
</tbody>
<template name="이곳에 데이터가 1건이라도조회되었을경우의 템플릿명을 적으세요">
<tr data-key="{이곳에키값으로쓰이는DB컬럼명을넣으세요}">
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
<td class="dummy-td"></td>
</tr>
</template>
<template name="이곳에 데이터가 1건도조회되지않은경우의 템플릿명을 적으세요">
<tr>
<td valign="top" colspan="6" class="dataTables_empty text-center">정보를 찾지 못했습니다.</td>
</tr>
</template>
</table>
</div>
</div>
</div>