Advanced modifications to change the whole user interface / control

The generated HTML includes a javascript file that provides most of the map interface functionality. Typically it interacts with controls by use of the class or id property of elements in the HTML. For example, by specifying an element of class controlButton in the generated HTML, the javascript will automatically add event handlers that will call the button control functions in the javascript file if those elements are clicked.

It is recommended that minimal javascript is included in the HTML: wherever possible separate the HTML and Javascript to make maintenance easier.

It is possible to totally reinvent the display by writing your own XSLT, CSS, Javascript system. Alternatively you can extend the existing display by modifying it.

Suppose we want to add a new Print button to the set of map controls using the existing interface.

In the XSL add a new <IMG> element to the <DIV id="Controls"> block:

<img src="mapper/images/print.gif"

	coldsrc="mapper/images/print.gif"

	hotsrc="mapper/images/print.gif"

	toolHint="Print The Map"

	id="Print" i

	name="Print"

	value="Print Map"

	alt="Print"

	class="controlButton"

	title="Print Map"/>

The coldsrc/hotsrc attributes control what to display when the button is active. ToolHint holds the text to display as contextual help. Setting its class to class="controlButton" means that when the button is clicked it will inherit standard control button behaviour.

Find the javascript file by checking the XSLT file. There will typically be several included files that provide standard functionality, e.g. prototype.js or behaviour.js, however we are looking for one similar to:

<script type='text/javascript' src="mapper/kemnh/style/scripts/mapdisplay.js" />

In the javascript file:

web/webservices/mapper/kemnh/style/scripts/mapdisplay.js

locate a section that defines behaviour:

var behaviours = {.....}

Here you will see a section similar to:

'.controlButton' : function(element)

	element.onclick = function(ev)

		var toolId = element.getAttribute("id");

		selectTool(toolId);

		stopEvent(ev);

},

Add your specialised print operations here. For example:

'.controlButton' : function(element)

	element.onclick = function(ev)

		var toolId = element.getAttribute("id");

		if (toolId == 'Print')

		window.print();

		else

			selectTool(toolId);

		stopEvent(ev);