1 |
3032
|
perry
|
<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>
|