Pattern for widget access from an MCO

[Michael Mikhaylov <mm...@nexaweb.com>]

How to access XAP Element, Handler, Peer and DHTML Element objects from
MCO.


Sometimes there is a need to interact with application objects directly
in JavaScript. For example, in our application there is an instance of
FreePane that we want to show scroll bars instead of default behavior of
clipping its children off. One approach is to code an "onCreate" event
handler that finds corresponding DHTML object and changes its
style.overflow attribute to "auto".

Small XAL snippet with FreePane:

<freePane
	width="100px"
	height="100px"
	onCreate="mco:myMco.changeOverflow(this, event)" />
	... some FreePane children here ...
</freePane>


Here is an MCO function:

MyMco.prototype.changeOverflow = function (element, event) {

	// @param element -- this is XAP "FreePane" object
	// @param event	-- this is XAP "Event" object
	
	// Session is a "context" of XAP application
	// To get Session object use an instance of Event

	var session = event.session;

	// Handler is a logic behind a XAP Element
	// To get Handler object use session and element objects

	var handler =
session.getUiDocumentHandler().getHandlerForElement(element);

	// Dojo Peer object is an instance of Dojo widget
	// To get Dojo "Peer" javascript object use handler object

	var peer = handler.getPeer();

	// DHTML DOM objects are referenced in Peer
	// To get DHTML objects use properties of the peer object

	var htmlDivElement = peer.containerNode;

	// Make style changes directly in DHTML div element	

	htmlDivElement.style.overflow = 'auto';
}

__________________________________________________________
Michael Mikhaylov  |  Software Engineer