The tutorial of Bootstrap

The tutorial of Bootstrap

Here, the creation method of an initialization module and directions for use which use Moostrap are explained.

If an initialization module is used, it can collect into one by making initialization processing of Presentation.js into a module.
Thereby, a module can be reused now.
It will become very convenient if an often used setup is mounted.

The data created by this tutorial is downloadable.

Step1 A modular definition

The instance of Moostrap.Module is generated and it stores in suitable name space.
Presentation.Bootstrap.Module can be used for the change which uses its name.

Its namespace is used.

(function(yournamespace){

	var yournamespace = this.yournamespace = yournamespace;

	yournamespace.Module = new Moostrap.Module();

}.call(this, this.yournamespace || {}));

Presentation.Bootstrap.Module is used.

(function(module){

	//Module configurations

}.call(this, Presentation.Bootstrap.Module));

Step2. The definition of initialization processing

Using a register method, initialization processing is registered.
A title and the processing set up and performed are defined.

• title(string) - The title of initialization processing
• configuration(object|array|string|boolean|number) - A default preset value
• handler(function) - Processing to perform

Please be sure to perform success or a failure method as a result of initialization processing.

yournamespace.Module.register('controller', {

	title: 'gui controller setup',

	configuration: {
		prev: 'prevButton',
		next: 'nextButton',
		disabled: 'disabled'
	},

	handler: function(pt, config){
		var helper = null,
			action = this;

		try {
			helper = new yournamespace.Controller(config);
		} catch(exception){
			action.failure(exception);
		}
		pt.addHelper(helper);

		action.success();
	}

});

yournamespace.Module.register('keyword-filter', {

	title: 'keyword filter setup',

	configuration: [],

	handler: function(pt, config){
		var filter = null,
			action = this;

		try {
			filter = yournamespace.KeywordFilter;
			filter.keyword.contat(config);
		} catch(exception){
			action.failure(exception);
		}
		pt.addFilter(filter);

		action.success();
	}

});

yournamespace.Module.register('contents', {

	title: 'presentation content loading',

	configuration: {
		method: 'get',
		url: 'content/document.html'
	},

	handler: function(pt, config){
		var action = this,
			parser = null,
			content = null,
			sections = [],
			container = pt.getContainerElement();

		var request = new Request.HTML({
			url: config.url,
			method: config.method,
			onSuccess: function(tree, elements, html, js){

				parser = new Element('div', { html: html });
				sections = parser.getElements('section');

				sections.each(function(element, key){
					element.inject(container);
					content = new Presentation.Content(element);
					pt.addContent(content);
				});
				action.success();
			},
			onFailure: function(xhr){
				action.failure(xhr);
			}
		});
		request.send();

		action.success();
	}

});

Step3. The code of a final bootstrap

The code of a final bootstrap turns into the following codes.
Download of yournamespace.bootstrap.js

(function(yournamespace){

	var yournamespace = this.yournamespace = yournamespace;

	yournamespace.Module = new Moostrap.Module();

	yournamespace.Module.register('controller', {

		title: 'gui controller setup',

		configuration: {
			prev: 'prevButton',
			next: 'nextButton',
			disabled: 'disabled'
		},

		handler: function(pt, config){
			var helper = null,
				action = this;

			try {
				helper = new yournamespace.Controller(config);
			} catch(exception){
				action.failure(exception);
			}
			pt.addHelper(helper);

			action.success();
		}

	});


	yournamespace.Module.register('keyword-filter', {

		title: 'keyword filter setup',

		configuration: [],

		handler: function(pt, config){
			var filter = null,
				action = this;

			try {
				filter = yournamespace.KeywordFilter;
				filter.keywords.concat(config);
			} catch(exception){
				action.failure(exception);
			}
			pt.addFilter(filter);

			action.success();
		}

	});


	yournamespace.Module.register('contents', {

		title: 'presentation content loading',

		configuration: {
			method: 'get',
			url: 'content/document.html'
		},

		handler: function(pt, config){
			var action = this,
				parser = null,
				content = null,
				sections = [],
				container = pt.getContainerElement();

			var request = new Request.HTML({
				url: config.url,
				method: config.method,
				onSuccess: function(tree, elements, html, js){

					parser = new Element('div', { html: html });
					sections = parser.getElements('section');

					sections.each(function(element, key){
						element.inject(container);
						content = new Presentation.Content(element);
						pt.addContent(content);
					});
					action.success();
				},
				onFailure: function(xhr){
					action.failure(xhr);
				}
			});
			request.send();

			action.success();
		}

	});

}.call(this, this.yournamespace || {}));

Step4. It initializes using a module.

(function(yournamespace){

this.addEvent('domready', function(){

    var pt = new Presentation('presentation');

    var bootstrapper = new Moostrap(Moostrap.ASYNC_EXECUTER, yournamespace.Module, {

        onSuccess: function(){

            pt.displayFullScreen().start();

        },

        onFailure: function(error){
        	if (error instanceof Error){
				throw error;
        	} else {
				throw new Error(error.statusText);
        	}
        }
    });

	bootstrapper.execute(pt);

});

}.call(this, yournamespace));

The tutorial of a bootstrap is an end now.
Thank you for everything.