1
|
<h2>Listeners and object methods</h2>
|
2
|
|
3
|
<p>
|
4
|
More advanced applications will likely want to add functionality by
|
5
|
performing specific actions in response to user input.
|
6
|
There are a few methods provided in Mapbuilder to customize your application.
|
7
|
</p>
|
8
|
|
9
|
<p>
|
10
|
An important aspect of the MVC design pattern is that it is event driven.
|
11
|
Almost everything that happens over the course of the application execution
|
12
|
is the result of an event being triggered on a model, which then calls listener
|
13
|
functions registered with that model.
|
14
|
This allows the models, widgets and tools to remain independant of each other
|
15
|
and makes Mapbuilder very modular - objects can be added and removed from the
|
16
|
configuration without affecting the other objects.
|
17
|
</p>
|
18
|
|
19
|
<p>
|
20
|
There is a global "config" object that can be referenced from anywhere.
|
21
|
You can retrieve a reference to all other objects by using the config.objects property.
|
22
|
For example, a model with an ID of "model_x" would be referenced as
|
23
|
config.objects.model_x, or config.objects["model_x"].
|
24
|
</p>
|
25
|
|
26
|
<p>
|
27
|
The following functions are available for carrying out user actions:
|
28
|
</p>
|
29
|
|
30
|
<dl>
|
31
|
<dt>config.loadModel(modelId,docUrl)</dt>
|
32
|
<dd>This method will load the model with the specified <i>modelId</i> from
|
33
|
the <i>docUrl</i> provided.
|
34
|
This will also trigger a "loadModel" event for that model.
|
35
|
</dd>
|
36
|
<dt>model.setParam(param,value)</dt>
|
37
|
<dd>This method updates a parameter and call all interested listeners.
|
38
|
For example, you can set an area of interest on a Context document by
|
39
|
setting the "aoi" parameter.
|
40
|
Any listeners registered to listen for the "aoi" event would then be called and
|
41
|
the value is passed to the listener functions as an argument.
|
42
|
The value can be any Javascript object, e.g. a string, integer, array, or object.
|
43
|
</dd>
|
44
|
<dt>model.setXpath(xpath,value)</dt>
|
45
|
<dd>Updates the value of a node in the model's XML document and
|
46
|
triggers a "refresh" event for this model.
|
47
|
The node updated is specified by the xpath argument.
|
48
|
</dd>
|
49
|
<dt>button action property</dt>
|
50
|
<dd>Buttons in the configuration file accept an <action> property
|
51
|
which specifies an object method to be called when a button is selected.
|
52
|
</dd>
|
53
|
</dl>
|
54
|
|
55
|
<p>
|
56
|
The way to use these functions is to set them as the HREF element of an anchor tag:
|
57
|
</p>
|
58
|
<pre>
|
59
|
<a href="javascript:config.loadModel(...)"/>
|
60
|
</pre>
|
61
|
<p>
|
62
|
or as an event handler (onclick, onmouseover, etc.) on any HTML element that allows it:
|
63
|
</p>
|
64
|
<pre>
|
65
|
<td onclick="config.loadModel(...)"/>
|
66
|
</pre>
|
67
|
</p>
|
68
|
|
69
|
<p>
|
70
|
</p>
|
71
|
|
72
|
<p align="right">
|
73
|
<a href="?page=config/skins">previous</a>
|
74
|
<a href="?page=config/extend">next</a>
|
75
|
</p>
|