1 |
3032
|
perry
|
<h2>Skins, CSS and multilingual support</h2>
|
2 |
|
|
|
3 |
|
|
<p>
|
4 |
|
|
It's relatively easy to change the way your application looks,
|
5 |
|
|
including the text and images output by the widgets.
|
6 |
|
|
This is accomplished using a "skin" concept in addition to
|
7 |
|
|
Cascading Stylesheets (CSS).
|
8 |
|
|
</p>
|
9 |
|
|
|
10 |
|
|
<h3>The skin directory</h3>
|
11 |
|
|
<p>
|
12 |
|
|
The skin directory is a property of the config file and points to a directory
|
13 |
|
|
on the web server where images and other items coded into widget stylesheets
|
14 |
|
|
can be located.
|
15 |
|
|
The directory can be an absolute path or relative to the base directory
|
16 |
|
|
of the page being loaded.
|
17 |
|
|
</p>
|
18 |
|
|
|
19 |
|
|
<p>
|
20 |
|
|
Currently only Button images come from the skin dir, but all future Mapbuilder
|
21 |
|
|
extensions using images will come from this directory.
|
22 |
|
|
To create the SRC URL for a button image, the button enabled/disabledSrc path in
|
23 |
|
|
config is appended to the skin directory.
|
24 |
|
|
This directory is also used as the root for the widget text file (see below).
|
25 |
|
|
</p>
|
26 |
|
|
|
27 |
|
|
<p>
|
28 |
|
|
Unless you want to keep the default look and feel of Mapbuilder, you should
|
29 |
|
|
create your own skin directory and set the path to it in the config file.
|
30 |
|
|
This directory should be outside of the mapbuilder directory so that you can
|
31 |
|
|
easily upgrade to newer versions of the package by simply replacing it.
|
32 |
|
|
(This is recommended for your applications as well.)
|
33 |
|
|
</p>
|
34 |
|
|
|
35 |
|
|
<h3>Multilingual support</h3>
|
36 |
|
|
<p>
|
37 |
|
|
All text that is output by widget stylesheets should be passed in to the
|
38 |
|
|
stylesheet as a stylesheet param, and there are two ways to do this
|
39 |
|
|
automatically in Mapbuilder.
|
40 |
|
|
The first way is is to set the text values as a widget property in config,
|
41 |
|
|
however this will only support one language.
|
42 |
|
|
</p>
|
43 |
|
|
|
44 |
|
|
<p>
|
45 |
|
|
To support multiple languages, you can set a <widgetTextUrl> property
|
46 |
|
|
on the config model.
|
47 |
|
|
This property is a partial path to a file containing language dependant text.
|
48 |
|
|
The full path to the file is created from the skinDir value plus language code
|
49 |
|
|
value plus the partial path to the text file.
|
50 |
|
|
</p>
|
51 |
|
|
|
52 |
|
|
<p>
|
53 |
|
|
The language code is a standard language code values, e.g. "en", "fr", etc.,
|
54 |
|
|
and can be set as a parameter passed to the page when it loads,
|
55 |
|
|
or set as a JavaScript "language" variable in the page head.
|
56 |
|
|
This value can be retrieved at any time through the config.lang property.
|
57 |
|
|
</p>
|
58 |
|
|
|
59 |
|
|
<p>
|
60 |
|
|
The widget text file has a structure very similar to the config file, except
|
61 |
|
|
that it only contains Widget elements and the text values to be set as
|
62 |
|
|
parameters for the stylesheet.
|
63 |
|
|
The property name is the same as the stylesheet parameter name.
|
64 |
|
|
</p>
|
65 |
|
|
|
66 |
|
|
<h3>Use of CSS in mapbuilder</h3>
|
67 |
|
|
<p>
|
68 |
|
|
CSS can and should be used to modify how your page looks.
|
69 |
|
|
This is typically done by using the widget ID (or htmlTagId value) from config
|
70 |
|
|
as a CSS selector.
|
71 |
|
|
As an example, the complete demo uses this piece of CSS to give the mainMapContainer
|
72 |
|
|
element an olive 1 pixel border and change the cursor to a crosshair:
|
73 |
|
|
</p>
|
74 |
|
|
|
75 |
|
|
<pre>
|
76 |
|
|
#mainMapContainer {
|
77 |
|
|
border: 1px solid olive;
|
78 |
|
|
cursor: crosshair;
|
79 |
|
|
}
|
80 |
|
|
</pre>
|
81 |
|
|
|
82 |
|
|
<p>
|
83 |
|
|
The CSS file is typically stored in the skin directory as well,
|
84 |
|
|
but this isn't a requirement.
|
85 |
|
|
It must be included manually in the page head, that is CSS files are not
|
86 |
|
|
loaded automatically by Mapbuilder.
|
87 |
|
|
</p>
|
88 |
|
|
|
89 |
|
|
|
90 |
|
|
|
91 |
|
|
<p align="right">
|
92 |
|
|
<a href="?page=config/patterns">previous</a>
|
93 |
|
|
<a href="?page=config/listeners">next</a>
|
94 |
|
|
</p>
|