JUI 프레임워크의 스타일은 jui 클래스가 설정되어 있는 마크업의 하위에서만 사용할 수 있으며, 문서 최상단에 <!DOCTYPE HTML>가 선언되어 있어야 합니다.
<body class="jui">
...
</body>ready 메소드의 콜백 내부에서 컴포넌트 모듈을 사용할 수 있습니다.
jui.ready([ "ui.combo", "grid.table" ], function(combo, table) {
var combo = combo(selector, options),
table = table(selector, options);
//...
});ready 메소드의 콜백 외부에서도 컴포넌트 객체를 동적으로 생성할 수 있는 기능을 제공합니다. 한가지 주의해야 할 사항은 create 메소드는 ready 메소드의 콜백이 실행된 이후에 사용할 수 있습니다.
var combo = jui.create("ui.combo", selector, options),
table = jui.create("grid.table", selector, options);
//...컴포넌트 객체를 생성할 때, 셀렉터가 단일이 아닌 다수일 경우에는 결과 값은 객체가 아닌 배열로 가져옵니다.
<span class="tooltip" title="Tooltip Message">Tooltip 1</span>
<span class="tooltip" title="Tooltip Message">Tooltip 2</span>jui.ready([ "ui.tooltip" ], function(tooltip) {
var tips = tooltip(".tooltip");
tips[0].show();
tips[1].show();
});
JUI는 템플릿 기반의 UI 라이브러리입니다. 템플릿을 설정하는 방법은 아래와 같이 두 가지를 제공합니다.
먼저 템플릿 스크립트 태그에 대상 테이블의 셀렉터를 data-jui 속성에 입력하고, 추가로 템플릿 타입을 data-tpl 속성에 설정합니다.
<table id="table" class="table classic">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
</thead>
<tbody></tbody>
</table><script data-jui="#table" data-tpl="row" type="text/template">
<tr>
<td><!= name !></td>
<td><!= age !></td>
<td><!= location !></td>
</tr>
</script>jui.ready([ "grid.table" ], function(table) {
var table = table("#table");
table.update([
{ name: "Hong", age: 29, location: "Ilsan" },
{ name: "Jung", age: 25, location: "Dangsan" }
]);
});위와 같이 data-jui와 data-tpl 속성을 설정하지 않고, 해당 템플릿 스크립트 태그의 내용을 직접 가져와서 테이블 객체 생성시에 tpl 옵션으로 추가하는 방법도 제공합니다. 이와 같은 방법으로 템플릿을 설정하면 다수의 테이블 객체에서 같이 사용할 수 있기 때문에 중복 코드를 최소화 할 수 있습니다.
<script id="tpl_table" type="text/template">
<tr>
<td><!= name !></td>
<td><!= age !></td>
<td><!= location !></td>
</tr>
</script>jui.ready([ "grid.table" ], function(table) {
var table = table("#table", {
tpl: {
row: $("#tpl_table").html();
}
});
table.update([
{ name: "Hong", age: 29, location: "Ilsan" },
{ name: "Jung", age: 25, location: "Dangsan" }
]);
});
참고로 JUI 프레임워크에서 총 10종의 UI 컴포넌트가 템플릿을 사용합니다.
table, xtable, tree-table, dropdown, tab, tree, paging, autocomplete, datepicker, notify
컴포넌트 모듈을 새로 정의하기 위해서는 해당 메소드의 매개변수를 생성할 모듈명과 로드할 모듈명 리스트를 설정하고, 마지막 콜백 함수를 통해 로드된 모듈 객체를 순서대로 받을 수 있습니다.
jui.defineUI("ui.test", [ "util.base" ], function(_) {
var UI = function() {
this.init = function() {
// 초기 구현부
}
this.func1 = function(val) {
// 공개 메소드 1
}
}
UI.setup = function() {
return { // UI 옵션 기본값 설정
option1: 1000,
option2: true
}
}
return UI;
});UI.setup은 해당 컴포넌트에서 사용할 옵션을 정의하는 메소드이며, init은 컴포넌트 객체가 생성되었을 경우에 최초로 실행되는 메소드입니다. 그렇기 때문에 신규 컴포넌트를 정의하기 위해서는 필수적으로 구현해야 합니다.