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