JUL Concepts

As we have seen in the introductory article, the JavaScript UI language module (JUL) can be used to convert a substantial programming task into a configuration scripting.
This is possible because JUL deals with the configuration and the instantiation phases in a standardized way for any component-based JavaScript framework. And, because the target of the most of these frameworks is a rich internet application (RIA) working in a browser, JUL provides a simple way to specify the layout and the interface logic for event-driven browser applications.
In order to fully use its capabilities, we will see in the followings the concepts that JUL is based on. All discussion is in the field of JavaScript and DOM programming where otherwise not specified.

Configuration object

A configuration object is a JavaScript object which may have the following member types:

all valid JSON types: string, number, boolean, null, object, array
a RegExp instance
a function definition (i.e. a Function instance)
a configuration object
an array of configuration objects

Example:

APP.codeUi = {
	tag: 'dialog',
	id: 'dialog-code',
	title: 'Code',
	hidden: true,
	width: 700,
	height: 330,
	children: [
		{tag: 'textbox', id: 'textbox-code', width: '100%', multiline: true, flex: 1}
	],
	listeners: {
		dialogaccept: function() {
			APP.saveCode();
			return false;
		},
		dialogcancel: function() {
			APP.cancelCode();
			return false;
		}
	}
};

Configuration tree

A configuration tree is a hierarchy of configuration objects with the root object having certain members as (arrays of) configuration objects and so on.

Configuration namespace

A configuration namespace is a configuration object whose methods may be constructor functions.
Example:

JUL.UI = {
lassProperty: 'xclass',
	defaultClass: 'Object',
	...
	// next function is used as a constructor
	Parser: function(oConfig) { ... },
	...
};

Dotted path

A dotted path or an object path is the string that represents the JavaScript variable to access the object as a member starting from the root global JavaScript object (e.g. window). A dotted path uses only dots to separate its segments (even for numeric segments).
Example:

APP.mainWindow = {
	xclass: 'Window',
	align: 'center',
	width: 1100,
	height: 500,
	children: [
		{xclass: 'Toolbar', items: [
			{xclass: 'Button', icon: 'img/open.png', caption: 'Open'},
			{xclass: 'Button', icon: 'img/save.png', caption: 'Save'},
			{xclass: 'List', label: 'Export', options: ['pdf', 'text', 'xml']}
		]},
		...
	]
};
// get the list options array using a dotted path
var aOptions = JUL.get('APP.mainWindow.children.0.items.2.options');

Reliable serialization

Reliable serialization means the serialization of a JavaScript object that produces equivalent JavaScript code across different runtime environments (e.g. browsers). The resulting code must produce object having the same non-prototypal members across these environments. In JUL, reliable serialization must produce the same configuration object as JavaScript source code across all major browsers.
Note: The object been serialized may not be necessary the same as the object produced by the serialized JavaScript code.
Example:

var oTest = {
	name: 'type',
	maxLength: 10,
	allowedValues: /^(boolean|numeric|string)$/i,
	listeners: {
		onBlur: function() {
			if (!this.value) { return false; }
		}
	}
};
// next line produces equivalent JavaScript code under all major browsers
var sCode = JUL.UI.obj2str(oTest);

Special members

A configuration object may have, among others, certain special members as follows:

class property – a string representing the name of the class of the component created by the configuration object.
children property – an array of configuration object for which JUL will create children properties.
‘other members’ property – serves the same purpose as the children property, allowing multiple hierarchies under the same configuration object. They also allow writing a more compact form of the configuration tree.
ID property – If present, this property provide the basis of the layout and logic separation of the configuration trees. It can be also used to identify the instantiated components.

For a full list of special members, please see the next paragraph regarding JUL parser.

JUL parser

A JUL parser is an instance of JUL.UI.Parser used to create an entire tree of runtime components from a configuration tree. The creation process instantiates the components in a given order (e.g. from parent to children).
Example:

var oParser = new JUL.UI.Parser({
	defaultClass: 'xul',
	useTags: true,
	customFactory: JUL.UI.createDom,
	topDown: true
});

The parser routine accepts a configuration object which gives the necessary information for the construction of the component tree.
The configuration properties of the parser are:

classProperty – the name of the class property in the configuration object – defaults to ‘xclass’.
defaultClass – the name of the default class if the class name is not specified by the configuration object – defaults to ‘Object’.
childrenProperty – the name of the property of the configuration object which is an array of configuration objects – defaults to ‘children’.
membersProperties – is an array of names with the purpose similar to childrenProperty allowing several hierarchies under the same parent configuration – defaults to [].
IdProperty – the name of the ID property of the configuration object – defaults to ‘id’. It allows identification of the components, runtime publishing under given paths, and layout and logic separation for the configuration object.
bindingProperty – allows layout and logic separation similar to idProperty but it will not get passed to the component constructor – defaults to ‘cid’. Ii cannot be used for component identification bur provides a way for the inheritance of the included objects – see includeProperty.
topDown – boolean that specifies if the parser will initialize the components top-down or bottom-up – defaults to false. For the bottom-up instantiation, the children are created first, and for the top-down process, the parent is created first.
customFactory – a function that will be passed the configuration object. It’s used instead of the ‘new’ constructor – defaults to null.
parentPropery – the name of a property of the configuration object that will be automatically assigned the instance of the parent component – defaults to ‘parent’. It is used only for the top-down instantiation.
useTags – whether to use a tag property instead of classProperty – defaults to false. For DOM languages (e.g. HTML, XML, SVG, XUL etc.), you can set the defaultClass to ‘html’ for example, and use the tag property to specify which component to construct.
tagProperty – the name of the tag property for a DOM element to be instantiated – defaults to ‘tag’. JUL.UI has also a custom factory named ‘createDom’ to help constructing DOM elements.
includeProperty – allows explicit inclusion of another configuration object in the current one – defaults to ‘include’. The current object is applied over the included object.

For the complete documentation of the parser configuration, please see the corresponding API Reference topic.