Subscribe to the OnFocus event in a custom page binding

In C1 CMS, the ui:page element has the related page binding 'class' (implemented in JavaScript).

Since the ui:page is used to build the default view (Default.aspx), you can subscribe to the OnFocus event (fired in the tree) in a custom page binding 'class' derived from the C1 CMS standard PageBinding class.

The custom page binding ("MediaPageBinding") will overload the parent PageBinding's functions to handle OnFocus events.

/binding/MediaPageBinding.js

MediaPageBinding.prototype = new PageBinding;
MediaPageBinding.prototype.constructor = MediaPageBinding;
MediaPageBinding.superclass = PageBinding.prototype;

/**
* @class
*/
function MediaPageBinding() {

	/**
	* @type {SystemLogger}
	*/
	this.logger = SystemLogger.getLogger("MediaPageBinding");


	this._tree = null;

	/*
	* Returnable.
	*/
	return this;
}

/**
* Identifies binding.
*/
MediaPageBinding.prototype.toString = function () {

	return "[MediaPageBinding]";
}

/**
 * @overloads {PageBinding#onBindingRegister}
 */
MediaPageBinding.prototype.onBindingRegister = function () {
	MediaPageBinding.superclass.onBindingRegister.call(this);

	var selectedDeck = ExplorerBinding.bindingInstance.getSelectedDeckBinding();
	var selectedView = selectedDeck.getAssociatedView();
	this._tree = selectedView.getContentWindow().bindingMap.tree;

	this._tree.addActionListener(TreeNodeBinding.ACTION_ONFOCUS, this);
}

/**
* @overloads {PageBinding#handleAction}
* @implements {IActionListener}
* @param {Action} action
*/
MediaPageBinding.prototype.handleAction = function (action) {

	MediaPageBinding.superclass.handleAction.call(this, action);
	switch (action.type) {
		case TreeNodeBinding.ACTION_ONFOCUS:
			var win = this.bindingWindow.bindingMap.window;
			win.setURL("List.aspx?EntityToken=" + encodeURIComponent(action.target.node.getEntityToken()));
			break;
	}
}

/**
* Overloads {Binding#onBindingDispose}
*/
MediaPageBinding.prototype.onBindingDispose = function () {
	this._tree.removeActionListener(TreeNodeBinding.ACTION_ONFOCUS, this);
	MediaPageBinding.superclass.onBindingDispose.call(this);
}

Download the source

As you can see above, in the onBindingRegister function (when the view is open), the TreeNodeBinding.ACTION_ONFOCUS event is subscribed for.

The event is handled in the handleAction by setting the URL of the bound window to "List.aspx" with the entity token of the tree node as its query parameter. Thus, when a node gets focused, the ui:window will show proper content.

In the onBindingDispose function (when the view is closed), the event is unsubscribed from.