Categories

JQLoader Examples

The following examples will give you an idea about how to use jQLoader.

Creating a Simple Class

To register a class simple invoke the .register() API from the $.jqloader plugin. This method takes two parameter. The first one is a key identifier for the class which you will use to request an pointer of the constructor of the registered class; the second one can take an annonymous object with properties and methods or the construstor of your class.

Example #1

?View Code JAVASCRIPT
$.jqloader.register('Hello', {
	constructor: function(){
		alert('Hello jQloader');
	}
});

Example #2

?View Code JAVASCRIPT
function Hello(){
	alert('Hello jQloader');
}
$.jqloader.register('Hello', Hello);

Example #3

?View Code JAVASCRIPT
$.jqloader.register('Hello', (function(){
	return function(){
		alert('Hello jQloader');
	}
 
})());

Getting a Pointer to the Class Constructor

The .get() API will help getting a pointer to the constructor of a registered class.

?View Code JAVASCRIPT
$(function (){
	$.jqloader.load('src/Hello.js', function(){
		var HelloConst = $.jqloader.get('Hello');
		var helloInstance = new HelloConst(); // alert 'Hello jQloader'
	});
});

Including Dependencies

A class dependency must be declare before registering the main primary class. You should use .include() API to let jQLoader know that one or many dependencies are required before flagging the primary class as loaded.

Loader code:

?View Code JAVASCRIPT
$(function (){
	$.jqloader.load('src/HelloApp.js', function(){
		var HelloApp = $.jqloader.get('HelloApp');
		var app = new HelloApp('Raul', 'Sanchez'); // alert 'Hello jQLoader' from 'Hello' class
	});
});

HelloApp.js code:

?View Code JAVASCRIPT
$.jqloader.include('src/Hello.js');
$.jqloader.register('HelloApp', {
	constructor: function(){
		var HelloConstructor = $.jqloader.get('Hello');
		var hello = new HelloConstructor(); // alerts 'Hello jQLoder'.
	}
});

Hello.js code:

?View Code JAVASCRIPT
$.jqloader.register('Hello', {
	constructor: function(){
		alert('Hello jQloader');
	}
});

Employee Class

The following example demostrate how to load a class and create an inistance of it. The Employee class borrows the method .property from the class Person which is loaded automatically.

?View Code JAVASCRIPT
$(function (){
	$.jqloader.load('src/Employee.js', function(){
		var EmployeeConstrutor = $.jqloader.get('Employee');
		var employeeInstance = new EmployeeConstrutor('Raul', 'Sanchez');
			employeeInstance.property('role', 'Serial Architect');
		var info = employeeInstance.getInfo();
		alert(info); // alerts 'Raul Sanchez, Serial Architect'
	});
});

Extending Classes (pseudo-inheritance)

jQLoader allows borrowing member of other classes using the .borrow() API. This is not formal inheritance, but practically speaking it accomplish similar results in a easy way. The .borrow() API can be invoked at any time, but it makes sense to borrow methods and properties from the class constructor. Only the members that have not been defined in the borrower class will be added.  In the example notice that the .methodA() but the value of the key has been already set in ClassB. In some this is similar to an overwrite. Members defined in the borrower take priority over those in the borrowed classes.

Loader code:

?View Code JAVASCRIPT
$(function (){
	$.jqloader.load('src/ClassB.js', function(){
		var ClassBConstrutor = $.jqloader.get('ClassB');
		var classBInstance = new ClassBConstrutor(); // alerts 'ClassA method (key: ClassB)'.
	});
});

ClassB code:

?View Code JAVASCRIPT
$.jqloader.include('src/ClassA.js');
$.jqloader.register('ClassB', {
	constructor: function(){
		$.jqloader.borrow(this, 'ClassA');
		this.methodA();
	}, 
 
	methodB: function(){
		alert('ClassB method (key: '+ this.key +')');
	}
});

ClassA code:

?View Code JAVASCRIPT
$.jqloader.register('ClassA', {
	constructor: function(){
		this.methodA();
	}, 
 
	methodA: function(name, value){
		alert('ClassA method (key: '+ this.key +')');
	}
});

Class Mashup (multiple-inheritance)

You can borrow members from multiple class by passing an array with the keys of the classes you would like to borrow from. When doing so jQLoader will process the classes in the order that they appear in the array. If a member is defined in the first class that you are borrowing from this will not be overwriten by any of the subsequent classes in the array.

Loader code:

?View Code JAVASCRIPT
$(function (){
	$.jqloader.load('src/ClassC.js', function(){
		var ClassConstrutor = $.jqloader.get('ClassC');
		var instance = new ClassConstrutor();
		instance.methodA(); // alerts 'ClassA method (key: ClassC)'
		instance.methodB(); // alerts 'ClassB method (key: ClassC)'
		instance.methodC(); // alerts 'ClassC method (key: ClassC)'
	});
});

ClassC code:

?View Code JAVASCRIPT
$.jqloader.include('src/ClassA.js');
$.jqloader.include('src/ClassB.js');
$.jqloader.register('ClassC', {
	constructor: function(){
		$.jqloader.borrow(this, ['ClassA', 'ClassB']);
	}, 
 
	methodC: function(){
		alert('ClassB method (key: '+ this.key +')');
	}
});

ClassB code:

?View Code JAVASCRIPT
$.jqloader.include('src/ClassA.js');
$.jqloader.register('ClassB', {
	constructor: function(){
		$.jqloader.borrow(this, 'ClassA');
		this.methodA();
	}, 
 
	methodB: function(){
		alert('ClassB method (key: '+ this.key +')');
	}
});

ClassA code:

?View Code JAVASCRIPT
$.jqloader.register('ClassA', {
	constructor: function(){
		this.methodA();
	}, 
 
	methodA: function(name, value){
		alert('ClassA method (key: '+ this.key +')');
	}
});

Creating an Application Class

Any class could be an application class. There are two conditions required to create an application class: first, that class must have a .main() method that will be automatically called when you run your application; second, the class must be registered as Application.

To run your application you should use the .run() API and pass the path to the Javascript file that contains you application main class. You can also pass an custom Object from the HTML to the .main() method of your application as a second parameter in the .run() method.

The goal of an application class is to make easier to startup your application and remove all the initialization code from the HTML page that host you Javascript code. The following examples show a simple application class and the snipped of code that goes in you HTML page. Notice that in this example SimpleApp includes ClassC which includes ClassA and ClassB.

Loader code:

?View Code JAVASCRIPT
$(function (){
	$.jqloader.run('src/SimpleApp.js');
});

SimpleApp.js code

?View Code JAVASCRIPT
$.jqloader.include('src/ClassC.js');
$.jqloader.register('Application', {
	instanceOfC: null,
	constructor: function(){
		var ClassC = $.jqloader.get('ClassC');
		this.instanceOfC = new ClassC();
	}, 
 
	main: function(options){
		this.instanceOfC.methodA(); // alerts 'ClassA method (key: ClassC)'
		this.instanceOfC.methodB(); // alerts 'ClassB method (key: ClassC)'
		this.instanceOfC.methodC(); // alerts 'ClassC method (key: ClassC)'
	}
});

Using Custom Options to Simulate Class Packages

When you load, run, or publish a class you can pass an additional parameters to control the behavior of jQLoader.

You can also include custom parameters that will be passed to the .main() method of your application class or to the .ready() callback function that you had specified. In this example the baseURL has been set to ‘src/’ (must include a slash at the end), which means that all classes will be laoded from that location. In addtion to this the useClassPath variable has bee set to true. This instruct jQloader to treat any class source as a full qualify path. This combination of settings will allow you to move all your classes to a different location (i.e from a dev server to a production server) without modifiying your class code.

In this example jQLoader has been instructed to load the class ‘com.sanraul.demo.Ping’. Since the baseURL has been set to 'src/' and the useClassPath flag is set to true, the .load() request will resolve the class path as 'http://localhost:8080/src/com/sanraul/demo/Ping.js.

jQLoader Options

  • autorun {Boolean}
  • useClassPath {Boolean}
  • baseURL {String}
  • error {Function}
  • ready {Function}

Loader code:

?View Code JAVASCRIPT
$(function (){
	$.jqloader.load('com.sanraul.demo.Ping', {
		baseURL: 'http://localhost:8080/src/',
		useClassPath: true,
		customVariable: document.title,
		ready: function(options){
			alert('Page title: '+ options.customVariable); // alerts 'jQLoader Examples: Using Custom Options'
			var Ping = $.jqloader.get('com.sanraul.demo.Ping');
			var instance = new Ping(); // alerts 'pong...'
		}
	});
});

Ping.js code

?View Code JAVASCRIPT
$.jqloader.include('com.sanraul.demo.Pong');
$.jqloader.register('com.sanraul.demo.Ping', {
	contructor: function(){
		var Pong = $.jqloader.get('com.sanraul.demo.Pong');
		var instance = new Pong();
			instance.pong(); // alerts 'pong...'
	}
});