JUI Framework: Basic

UI Ready

The JUI library can be used only in markup where a jui class is configured and <!DOCTYPE HTML> is declared in the uppermost part of the document.

<body class="jui">
	...
</body>

Use a component module inside of the ready method callback.

jui.ready([ "ui.combo", "grid.table" ], function(combo, table) {
	var combo = combo(selector, options),
		table = table(selector, options);

	//...
});

A method for creating a component object dynamically, even outside of the callback of the ready method. OHowever, the create method can only be used once the callback of the ready method is complete.

var combo = jui.create("ui.combo", selector, options),
	table = jui.create("grid.table", selector, options);

//...

UI Objects

When creating a component object, if there are multiple selectors rather than a single selector, the result value is retrieved as an array, not an object.

<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 is a template-based UI library. To set a template, there are two methods, as follows.
First, input the selector of the target table in the data-jui property of the template script tag, then configure the template type in the data-tpl property.

<table id="table" class="table 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" }
	]);
});

As shown above, the method of adding as a tpl option when creating a table object after getting the content of an applicable template script tag is also provided. Configuring a template using this method minimizes code redundancy as the template can be commonly used in multiple table objects.

<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" }
	]);
});

In the JUI library, a total of 10 types of UI component use a template.
table, xtable, tree-table, dropdown, tab, tree, paging, autocomplete, datepicker, notify

Module Definition

In order to define a new component module to set the module name to the list to create a load module name and parameters for the method. And a module object is loaded through the callback function can be the last in the order.

jui.defineUI("ui.test", [ "util.base" ], function(_) {
	var UI = function() {
		this.init = function() {
			// initially implemented part
		}

		this.func1 = function(val) {
			// open method 1
		}
	}

	UI.setup = function() {
		return { // default UI option settings
			option1: 1000,
			option2: true
		}
	}

	return UI;
});

UI.setup is a method to define the options available in the component, init is a method that is executed first when an object is created components. To define a new component therefore it must implement essential.