Skip to content

The tutorial of Helper

Jump to bottom Edit New page
holyshared edited this page Jan 12, 2012 · 14 revisions

The tutorial of Helper

An original controller is created in this tutorial.
By creating an original controller, style specification by CSS and original processing can be mounted freely.

The controller created here offers the button which changes contents to a front, and the button changed to the following contents.

Step1. A helper is defined.

A helper is defined.
The click of a button is detected and processing is transferred to Presentation instance.
Helper.Delegator is inherited when transferring processing.

The rest describes a setup at the time of transferring to be a name.

(function(yournamespace){

	var yournamespace= this.yournamespace= yournamespace;

	yournamespace.Controller = new Class({

		Extends: Helper.Delegator,

		options: {
			prev: 'prevButton',		//It is a class of a button to a front.
			next: 'nextButton',		//It is a class of a button to the next.
			disabled: 'disabled'	//The class at the time of disable
		},

		_name: 'yournamesapce.Controller', //Helper name

		//A delegate method is performed and it is a setup at the time.
		_methods: {
			prevContent: 'prev',	//this.delegate('prevContent'); -> Presentation.prev 
			nextContent: 'next'		//this.delegate('nextContent'); -> Presentation.next 
		}

	});

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

Step2. A helper initialization processing is defined.

The next processing is performed in processing of a helper initialization.

  1. Search of Button Element.
  2. Event listeners creation when a button is clicked.
  3. Event listeners creation when contents change.

A code is as follows.

setup: function(){
	var layout = this.getTarget().getLayoutElement(),
		prevButton = null,
		nextButton = null,
		options = this.options;

	//Search of the button which changes contents to a front 
	prevButton = layout.getElement('.' + options.prev);
	if (!prevButton){
		throw new Error('The prev button is not found.');
	}

	//Search of the button which changes contents to the next 
	nextButton = layout.getElement('.' + options.next);
	if (!nextButton){
		throw new Error('The next button is not found.');
	}

	this._prevButton = prevButton;
	this._nextButton = nextButton;

	//When creating event listeners, "this" is restricted by a bind method.
	this._prevHandler = this._prevButtonClick.bind(this);
	this._nextHandler = this._nextButtonClick.bind(this);

	this._contentChangeHandler = this._onContentChange.bind(this);
},

_onContentChange: function(current, total, content){
	var currentNumber = current + 1,
		disabled = this.options.disabled;

	if (currentNumber <= 1){
		this._prevButton.addClass(disabled);
		this._nextButton.removeClass(disabled);
	} else if (currentNumber >= total) {
		this._prevButton.removeClass(disabled);
		this._nextButton.addClass(disabled);
	} else {
		this._prevButton.removeClass(disabled);
		this._nextButton.removeClass(disabled);
	}
},

_prevButtonClick: function(evt){
	//Presentation.prev is performed when a button is clicked.
	this.delegate('prevContent');
},

_nextButtonClick: function(evt){
	//Presentation.next is performed when a button is clicked.
	this.delegate('nextContent');
}

Step3. Processing of enable/disable is defined.

Processing when enableHelper and a disableHelper method are performed is defined.
Here, processing when a button is clicked, and processing when contents change are associated using the addEvent method.

enable: function(){
	this.getTarget().addEvent('change', this._contentChangeHandler);
	this._prevButton.addEvent('click', this._prevHandler);
	this._nextButton.addEvent('click', this._nextHandler);
},

disable: function(){
	this.getTarget().removeEvent('change', this._contentChangeHandler);
	this._prevButton.removeEvent('click', this._prevHandler);
	this._nextButton.removeEvent('click', this._nextHandler);
}

An example when enabling

When the enable option was not specified and a helper is added, it is automatically set to enable.
Please specify the enable option, when there are no preparations so.

var helper = new yournamespace.Controller({
	enable: false //The enable option is specified.
});

var p = new Presentation('presentation');

p.addHelper(helper);

//A helper name is specified and it is made enable. 
p.enableHelper('yournamespace.Controller');

An example when disabling

disableHelper is performed to repeal a helper temporarily.
Now, a helper disable method is performed and a helper is set to disable.

var helper = new yournamespace.Controller();

var p = new Presentation('presentation');

p.addHelper(helper);

//A helper name is specified and it is made disable. 
p.disableHelper('yournamespace.Controller');

Step4. Processing when deleted is defined.

When removeHelper is performed and correlation is canceled, this destroy method is performed.
Here, reference etc. of the element which became unnecessary are deleted.

A destroy method is performed after a disable method is called.

destroy: function(){
	delete this._contentChangeHandler;
	delete this._prevButton;
	delete this._nextButton;
	delete this._nextHandler;
	delete this._prevHandler;
}

Step5. The code of a final helper

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

(function(yournamespace){

	var yournamespace = this.yournamespace = yournamespace;

	yournamespace.Controller = new Class({

		Extends: Helper.Delegator,

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

		_name: 'yournamesapce.Controller',
		_methods: {
			prevContent: 'prev',
			nextContent: 'next'
		},

		setup: function(){
			var layout = this.getTarget().getLayoutElement(),
				prevButton = null,
				nextButton = null,
				options = this.options;

			prevButton = layout.getElement('.' + options.prev);
			if (!prevButton){
				throw new Error('The prev button is not found.');
			}

			nextButton = layout.getElement('.' + options.next);
			if (!nextButton){
				throw new Error('The next button is not found.');
			}

			this._prevButton = prevButton;
			this._nextButton = nextButton;

			this._prevHandler = this._prevButtonClick.bind(this);
			this._nextHandler = this._nextButtonClick.bind(this);

			this._contentChangeHandler = this._onContentChange.bind(this);
		},

		enable: function(){
			this.getTarget().addEvent('change', this._contentChangeHandler);
			this._prevButton.addEvent('click', this._prevHandler);
			this._nextButton.addEvent('click', this._nextHandler);
		},

		disable: function(){
			this.getTarget().removeEvent('change', this._contentChangeHandler);
			this._prevButton.removeEvent('click', this._prevHandler);
			this._nextButton.removeEvent('click', this._nextHandler);
		},

		destroy: function(){
			delete this._contentChangeHandler;
			delete this._prevButton;
			delete this._nextButton;
			delete this._nextHandler;
			delete this._prevHandler;
		},

		_onContentChange: function(current, total, content){
			var currentNumber = current + 1,
				disabled = this.options.disabled;

			if (currentNumber <= 1){
				this._prevButton.addClass(disabled);
				this._nextButton.removeClass(disabled);
			} else if (currentNumber >= total) {
				this._prevButton.removeClass(disabled);
				this._nextButton.addClass(disabled);
			} else {
				this._prevButton.removeClass(disabled);
				this._nextButton.removeClass(disabled);
			}
		},

		_prevButtonClick: function(evt){
			this.delegate('prevContent');
		},

		_nextButtonClick: function(evt){
			this.delegate('nextContent');
		}

	});

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

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

Add a custom footer
Add a custom sidebar

Clone this wiki locally