UI Ready

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);

	//...

UI Objects

컴포넌트 객체를 생성할 때, 셀렉터가 단일이 아닌 다수일 경우에는 결과 값은 객체가 아닌 배열로 가져옵니다. 

<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();
});

Template Engine

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

Module Definition

컴포넌트 모듈을 새로 정의하기 위해서는 해당 메소드의 매개변수를 생성할 모듈명과 로드할 모듈명 리스트를 설정하고, 마지막 콜백 함수를 통해 로드된 모듈 객체를 순서대로 받을 수 있습니다. 

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은 컴포넌트 객체가 생성되었을 경우에 최초로 실행되는 메소드입니다. 그렇기 때문에 신규 컴포넌트를 정의하기 위해서는 필수적으로 구현해야 합니다.