Skip to content

The tutorial of Bootstrap

holyshared edited this page Jan 12, 2012 · 10 revisions

The tutorial of Bootstrap

Step1

(function(yournamespace){

	var yournamespace = this.yournamespace = yournamespace;

	yournamespace.Module = new Moostrap.Module();

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

Step2

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

});

Step3

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

});

Step4.

yournamespace.Module.register('contents', {

	title: 'presentation content loading',

	configuration: {
		method: 'get',
		url: '/document/'
	},

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

		var request = new Request.HTML({
			url: config.url,
			method: config.method,
			onSuccess: function(tree, elements, html, js){
				elements.each(function(element, key){
					content = new Presentation.Content(element);
					pt.addContent(content);
				});
				action.success();
			},
			onFailure: function(xhr){
				action.failure(xhr);
			}
		});
		request.send();

		action.success();
	}

});

Step5. 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.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: '/document/'
		},

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

			var request = new Request.HTML({
				url: config.url,
				method: config.method,
				onSuccess: function(tree, elements, html, js){
					elements.each(function(element, key){
						content = new Presentation.Content(element);
						pt.addContent(content);
					});
					action.success();
				},
				onFailure: function(xhr){
					action.failure(xhr);
				}
			});
			request.send();

			action.success();
		}

	});

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

Step6.

(function(yournamespace){

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

    var pt = new Presentation('presentation');

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

        onSucceess: function(){

            pt.displayFullScreen().start();

        },

        onFailure: function(){
        }

    });

    bootstrapper.execute(pt);

});

}.call(this, yournamespace));

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

Clone this wiki locally