1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<title>Crazy Eddies GUI System: Introduction to Falagard 'looknfeel' XML</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<link href="doxygen.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!-- Generated by Doxygen 1.7.4 -->
<script type="text/javascript">
function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}
function toggleVisibility(linkObj) {
var base = linkObj.getAttribute('id');
var summary = document.getElementById(base + '-summary');
var content = document.getElementById(base + '-content');
var trigger = document.getElementById(base + '-trigger');
if ( hasClass(linkObj,'closed') ) {
summary.style.display = 'none';
content.style.display = 'block';
trigger.src = 'open.png';
removeClass(linkObj,'closed');
addClass(linkObj,'opened');
} else if ( hasClass(linkObj,'opened') ) {
summary.style.display = 'block';
content.style.display = 'none';
trigger.src = 'closed.png';
removeClass(linkObj,'opened');
addClass(linkObj,'closed');
}
return false;
}
</script>
<div id="top">
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr style="height: 56px;">
<td style="padding-left: 0.5em;">
<div id="projectname">Crazy Eddies GUI System <span id="projectnumber">0.7.6</span></div>
</td>
</tr>
</tbody>
</table>
</div>
<div id="navrow1" class="tabs">
<ul class="tablist">
<li><a href="index.html"><span>Main Page</span></a></li>
<li class="current"><a href="pages.html"><span>Related Pages</span></a></li>
<li><a href="namespaces.html"><span>Namespaces</span></a></li>
<li><a href="annotated.html"><span>Classes</span></a></li>
<li><a href="files.html"><span>Files</span></a></li>
</ul>
</div>
<div id="nav-path" class="navpath">
<ul>
<li class="navelem"><a class="el" href="fal_man.html">Falagard skinning system for CEGUI</a> </li>
</ul>
</div>
</div>
<div class="header">
<div class="headertitle">
<div class="title">Introduction to Falagard 'looknfeel' XML </div> </div>
</div>
<div class="contents">
<div class="textblock"><p>Before we get to the good stuff, I'd just like to point out that this section (or, indeed, the entire document) is not intended to teach you anything about XML in general. It is assumed the reader has some familiarity with XML and how to use it properly.</p>
<h2><a class="anchor" id="fal_tut1_empty_skin"></a>
Before we begin: An empty skin</h2>
<p>Before we can start adding widget skins, or WidgetLooks as they are known in the system, to our XML file, we need the basic file outline initialised. This is extremely trivial, and looks like this: </p>
<div class="fragment"><pre class="fragment"><?xml version=<span class="stringliteral">"1.0"</span> ?>
<Falagard>
</Falagard>
</pre></div><p>We will be placing our WidgetLook definitions between the <code><Falagard></Falagard></code> pair. It is possible to specify as many sub-elements as we require within these tags, so all of our definitions can go into a single file (in most cases this ends up being a very large file!)</p>
<h2><a class="anchor" id="fal_tut1_button"></a>
Starting Simple: A Button</h2>
<p>Without a doubt, the humble push button is the most common widget we're ever likely to see; without this workhorse, any UI would be virtually useless. So, this is where we will start.</p>
<p>To define any widget skin, you use the WidgetLook element and specify a name for the widget type that you're defining by using the name attribute. So we'll start off by adding the following empty WidgetLook to our initial skin <a href="file:">file:</a> </p>
<div class="fragment"><pre class="fragment"><WidgetLook name=<span class="stringliteral">"TaharezLook/Button"</span>>
</WidgetLook>
</pre></div><p>As you can see from the reference for the Falagard/Button window renderer, we are required to specify imagery for numerous states, namely these are: </p>
<ul>
<li><code>Normal</code> </li>
<li><code>Hover</code> </li>
<li><code>Pushed</code> </li>
<li><code>Disabled</code> </li>
</ul>
<p>Since we now know what states are required for the widget, it's a good idea to add the framework for these first; this effectively makes the WidgetLook complete and usable, although obviously nothing would be drawn for it at this stage since we have not defined any imagery. So, we add empty StateImagery elements for the required states, and we end up with this: </p>
<div class="fragment"><pre class="fragment"><WidgetLook name=<span class="stringliteral">"TaharezLook/Button"</span>>
<StateImagery name=<span class="stringliteral">"Normal"</span>>
</StateImagery>
<StateImagery name=<span class="stringliteral">"Hover"</span>>
</StateImagery>
<StateImagery name=<span class="stringliteral">"Pushed"</span>>
</StateImagery>
<StateImagery name=<span class="stringliteral">"Disabled"</span>>
</StateImagery>
</WidgetLook>
</pre></div><p>To specify rendering to be used for a widget, we use the ImagerySection element. Each imagery section is given a name; this name is used later to 'include' the imagery section within layers defined for each of the state imagery definitions.</p>
<p>For our button, we will have an imagery section for each of the button states. We can add the outline of these to our existing, work-in-progress, widget-look: </p>
<div class="fragment"><pre class="fragment"><WidgetLook name=<span class="stringliteral">"TaharezLook/Button"</span>>
<ImagerySection name=<span class="stringliteral">"normal_imagery"</span>>
</ImagerySection>
<ImagerySection name=<span class="stringliteral">"hover_imagery"</span>>
</ImagerySection>
<ImagerySection name=<span class="stringliteral">"pushed_imagery"</span>>
</ImagerySection>
<StateImagery name=<span class="stringliteral">"Normal"</span>>
</StateImagery>
<StateImagery name=<span class="stringliteral">"Hover"</span>>
</StateImagery>
<StateImagery name=<span class="stringliteral">"Pushed"</span>>
</StateImagery>
<StateImagery name=<span class="stringliteral">"Disabled"</span>>
</StateImagery>
</WidgetLook>
</pre></div><p>Now we can start to define the ImageyComponents for each section; this will tell the system how we want our button to appear on screen.</p>
<p>The imagery for TaharezLook gives us three sections for each button state (except Disabled; for this we'll just re-use the 'normal_imagery' and use some different colours!). The available imagery sections give us a left end, a right end, and a middle section.</p>
<p>There are various ways that we can approach applying these image sections to the widget; although the intended use is to have the end pieces drawn at their 'natural' horizontal size and the middle section stretched to fill the space in between the two ends. This all sounds simple enough, although there is one issue; the actual pixel sizes of the imagery is not fixed. The TaharezLook imageset uses the auto-scaling feature, which means that the source images will have variable sizes dependant upon the display resolution. All this needs to be taken into account when specifying the imagery; this way we ensure the results will be what we expect - at all resolutions.</p>
<p>To specify an image to be drawn, we use the ImageryComponent element. This should be added as a sub-element of ImagerySection. So we'll start by adding an empty imagery component to the definition for 'normal_imagery': </p>
<div class="fragment"><pre class="fragment">...
<ImagerySection name=<span class="stringliteral">"normal_imagery"</span>>
<ImageryComponent>
</ImageryComponent>
</ImagerySection>
...
</pre></div><p>The first thing we need to add to the ImageryComponent is an area definition telling the system where this image should be drawn: </p>
<div class="fragment"><pre class="fragment"><ImageryComponent>
<Area>
</Area>
</ImageryComponent>
</pre></div><p>We'll start by placing the image for the left end of the button. This is the simplest component to place, since its position is known as being (0, 0). To specify these absolute values, we use the AbsoluteDim element.</p>
<p>We start defining the required dimensions for our image area by using the Dim element, and using AbsoluteDim sub-element to indicate values to be used: </p>
<div class="fragment"><pre class="fragment"><ImageryComponent>
<Area>
<Dim type=<span class="stringliteral">"LeftEdge"</span>>
<AbsoluteDim value=<span class="stringliteral">"0"</span> />
</Dim>
<Dim type=<span class="stringliteral">"TopEdge"</span>>
<AbsoluteDim value=<span class="stringliteral">"0"</span> />
</Dim>
</Area>
</ImageryComponent>
</pre></div><p>We have defined the left and top edges which gives our image its position. Next we will specify dimensions to establish the area size.</p>
<p>We want the width of the area to come from the source image itself, to do this we use the ImageDim element and tell it to access the image that we will be using for this component: </p>
<div class="fragment"><pre class="fragment"><Dim type=<span class="stringliteral">"Width"</span>>
<ImageDim
imageset=<span class="stringliteral">"TaharezLook"</span>
image=<span class="stringliteral">"ButtonLeftNormal"</span>
dimension=<span class="stringliteral">"Width"</span>
/>
</Dim>
</pre></div><p>This tells the system that for the width of the area being defined, use the width of the image named ButtonLeftNormal from the TaharezLook imageset.</p>
<p>The last part of our area is the height. This is another simple thing to specify, since we want the height to be the same as the full height of the widget being defined. We could use either the UnifiedDim element or the WidgetDim element for this purpose; we'll use the UnifiedDim here as it does not need to look up the widget by name and so is likely more economical:</p>
<div class="fragment"><pre class="fragment"><Dim type=<span class="stringliteral">"Height"</span>>
<UnifiedDim scale=<span class="stringliteral">"1.0"</span> type=<span class="stringliteral">"Height"</span> />
</Dim>
</pre></div><p>Here we use a scale value of 1.0 to indicate we want the full height of the widget.</p>
<p>Now we have completed our area definition for this first image, and it looks like this: </p>
<div class="fragment"><pre class="fragment"><ImageryComponent>
<Area>
<Dim type=<span class="stringliteral">"LeftEdge"</span>>
<AbsoluteDim value=<span class="stringliteral">"0"</span> />
</Dim>
<Dim type=<span class="stringliteral">"TopEdge"</span>>
<AbsoluteDim value=<span class="stringliteral">"0"</span> />
</Dim>
<Dim type=<span class="stringliteral">"Width"</span>>
<ImageDim
imageset=<span class="stringliteral">"TaharezLook"</span>
image=<span class="stringliteral">"ButtonLeftNormal"</span>
dimension=<span class="stringliteral">"Width"</span>
/>
</Dim>
<Dim type=<span class="stringliteral">"Height"</span>>
<UnifiedDim scale=<span class="stringliteral">"1.0"</span> type=<span class="stringliteral">"Height"</span> />
</Dim>
</Area>
</ImageryComponent>
</pre></div><p>The next thing we need to do here is tell the system which image it should draw, this is done by using the Image element, and this should be placed immediately after the area definition: </p>
<div class="fragment"><pre class="fragment">...
<Image imageset=<span class="stringliteral">"TaharezLook"</span> image=<span class="stringliteral">"ButtonLeftNormal"</span> />
...
</pre></div><p>The final element that we need to add to this ImageryComponent definition is the VertFormat element. Using this we will tell the system to stretch the image vertically so that it covers the full height of our defined area: </p>
<div class="fragment"><pre class="fragment">...
<VertFormat type=<span class="stringliteral">"Stretched"</span> />
...
</pre></div><p>This completes the definition for the left end of the button, and the final xml for this component looks like this: </p>
<div class="fragment"><pre class="fragment"><ImageryComponent>
<Area>
<Dim type=<span class="stringliteral">"LeftEdge"</span>>
<AbsoluteDim value=<span class="stringliteral">"0"</span> />
</Dim>
<Dim type=<span class="stringliteral">"TopEdge"</span>>
<AbsoluteDim value=<span class="stringliteral">"0"</span> />
</Dim>
<Dim type=<span class="stringliteral">"Width"</span>>
<ImageDim
imageset=<span class="stringliteral">"TaharezLook"</span>
image=<span class="stringliteral">"ButtonLeftNormal"</span>
dimension=<span class="stringliteral">"Width"</span>
/>
</Dim>
<Dim type=<span class="stringliteral">"Height"</span>>
<UnifiedDim scale=<span class="stringliteral">"1.0"</span> type=<span class="stringliteral">"Height"</span> />
</Dim>
</Area>
<Image imageset=<span class="stringliteral">"TaharezLook"</span> image=<span class="stringliteral">"ButtonLeftNormal"</span> />
<VertFormat type=<span class="stringliteral">"Stretched"</span> />
</ImageryComponent>
</pre></div><p>The next image we will set up is the right end. To show another approach for image placement, rather than precisely defining the area where the image will appear, here we will define the target area as covering the entire widget and use the image alignment formatting to draw the image on the right hand side of the widget.</p>
<p>The area definition that specifies the entire widget is something that you'll likely use a lot, and looks like this: </p>
<div class="fragment"><pre class="fragment"><Area>
<Dim type=<span class="stringliteral">"LeftEdge"</span>><AbsoluteDim value=<span class="stringliteral">"0"</span> /></Dim>
<Dim type=<span class="stringliteral">"TopEdge"</span>><AbsoluteDim value=<span class="stringliteral">"0"</span> /></Dim>
<Dim type=<span class="stringliteral">"Width"</span>><UnifiedDim scale=<span class="stringliteral">"1"</span> type=<span class="stringliteral">"Width"</span> /></Dim>
<Dim type=<span class="stringliteral">"Height"</span>><UnifiedDim scale=<span class="stringliteral">"1"</span> type=<span class="stringliteral">"Height"</span> /></Dim>
</Area>
</pre></div><p>Next comes comes the image specification: </p>
<div class="fragment"><pre class="fragment"><Image imageset=<span class="stringliteral">"TaharezLook"</span> image=<span class="stringliteral">"ButtonRightNormal"</span> />
</pre></div><p>Then the vertical formatting option: </p>
<div class="fragment"><pre class="fragment"><VertFormat type=<span class="stringliteral">"Stretched"</span> />
</pre></div><p>Finally, we add the horizontal formatting option which tells the system to align this image on the right edge of the defined area: </p>
<div class="fragment"><pre class="fragment"><HorzFormat type=<span class="stringliteral">"RightAligned"</span> />
</pre></div><p>The completed definition for the right end image now looks like this: </p>
<div class="fragment"><pre class="fragment"><ImageryComponent>
<Area>
<Dim type=<span class="stringliteral">"LeftEdge"</span>><AbsoluteDim value=<span class="stringliteral">"0"</span> /></Dim>
<Dim type=<span class="stringliteral">"TopEdge"</span>><AbsoluteDim value=<span class="stringliteral">"0"</span> /></Dim>
<Dim type=<span class="stringliteral">"Width"</span>><UnifiedDim scale=<span class="stringliteral">"1"</span> type=<span class="stringliteral">"Width"</span> /></Dim>
<Dim type=<span class="stringliteral">"Height"</span>><UnifiedDim scale=<span class="stringliteral">"1"</span> type=<span class="stringliteral">"Height"</span> /></Dim>
</Area>
<Image imageset=<span class="stringliteral">"TaharezLook"</span> image=<span class="stringliteral">"ButtonRightNormal"</span> />
<VertFormat type=<span class="stringliteral">"Stretched"</span> />
<HorzFormat type=<span class="stringliteral">"RightAligned"</span> />
</ImageryComponent>
</pre></div><p>The last image we need to place for the "normal_imagery" section is the middle section. Remember that we want this image to occupy the space between to two end pieces. The main part of achieving this is to correctly define the destination area for the image.</p>
<p>The vertical aspects of the image definition for the middle section will be the same as for the two ends, and as such these will not be discussed any further.</p>
<p>The first thing we need is to tell the system where the left edge of the middle section should appear. We know that the left edge of the image for the middle section needs to join to the right edge of the image for the left section. To achieve this we can make use of the ImageDim element to get the width of the left end image, and use this as the co-ordinate for the left edge of the middle section area: </p>
<div class="fragment"><pre class="fragment"><Area>
<Dim type=<span class="stringliteral">"LeftEdge"</span>>
<ImageDim
imageset=<span class="stringliteral">"TaharezLook"</span>
image=<span class="stringliteral">"ButtonLeftNormal"</span>
dimension=<span class="stringliteral">"Width"</span>
/>
</Dim>
...
</Area>
</pre></div><p>Now comes the fun part. Due to the fact we want the skin to operate correctly without knowing ahead of time how large the images are, we must use mathematical calculations in order to establish the required width of the middle section. If we knew for sure the image sizes, this could all be pre-calculated and we could simply use AbsoluteDim to tell the system the width we require. Unfortunately we are not this lucky. We are lucky, however, in the fact that the system provides a means for us to specify, within the XML, what calculations should be done to arrive at the final value for a dimension. The DimOperator element is what provides this ability.</p>
<p>Before going further we should look at what we need to calculate. The width of the middle section is basically the width of the widget, minus the combined width of the two end sections:</p>
<p><img class="formulaInl" alt="$ middleWidth=widgetWidth-(leftEndWidth+rightEndWidth) $" src="form_2.png"/></p>
<p>However, due to the fact that the area can accept either a width or right edge co-ordinate, we can simplify this a little by specifying the right edge co-ordinate instead of the width. The right edge location for this middle image will be equal to the width of the widget, minus the width of the right end image. So the final calculation we need to do is this:</p>
<p><img class="formulaInl" alt="$ rightEdge=widgetWidth-rightEndWidth $" src="form_3.png"/></p>
<p>The result from both calculations is the same, so wherever possible we will use the simpler option. To specify this calculation in XML we first start off with our widget width: </p>
<div class="fragment"><pre class="fragment"><Dim type=<span class="stringliteral">"RightEdge"</span>>
<UnifiedDim scale=<span class="stringliteral">"1"</span> type=<span class="stringliteral">"Width"</span>>
</UnifiedDim>
</Dim>
</pre></div><p>Since we need to perform some calculation on this, we embed a DimOperator element that specifies the mathematical operation that we need to perform: </p>
<div class="fragment"><pre class="fragment"><Dim type=<span class="stringliteral">"RightEdge"</span>>
<UnifiedDim scale=<span class="stringliteral">"1"</span> type=<span class="stringliteral">"Width"</span>>
<DimOperator op=<span class="stringliteral">"Subtract"</span>>
</DimOperator>
</UnifiedDim>
</Dim>
</pre></div><p>To complete the dimension specification we just insert a second *Dim element to tell the system what to subtract. In this case it's the width of the image for the right end, so we will use the ImageDim element for this purpose. The final specification for this dimension looks as follows: </p>
<div class="fragment"><pre class="fragment"><Dim type=<span class="stringliteral">"RightEdge"</span>>
<UnifiedDim scale=<span class="stringliteral">"1"</span> type=<span class="stringliteral">"Width"</span>>
<DimOperator op=<span class="stringliteral">"Subtract"</span>>
<ImageDim
imageset=<span class="stringliteral">"TaharezLook"</span>
image=<span class="stringliteral">"ButtonRightNormal"</span>
dimension=<span class="stringliteral">"Width"</span>
/>
</DimOperator>
</UnifiedDim>
</Dim>
</pre></div><p>It is possible to chain further mathematical operations within the dimension specification. It would have been possible to do our original width calculation using two DimOperator elements chained together, however this leads us to two small oddities of the system:</p>
<ul>
<li>pairs of dimension operands are taken in reverse order; working from the innermost operation to the outermost operation. </li>
<li>there is no real operator precedence. All operations are performed linearly starting at the innermost pair of values and working outwards.</li>
</ul>
<p>To explain this further, the example from the reference section will be used. Basically, in that example we want to take the height of the widget font, add four pixels and multiply the result by two. This might lead us to write the following, incorrect, specification: </p>
<div class="fragment"><pre class="fragment">...
<FontDim type=<span class="stringliteral">"LineSpacing"</span>>
<DimOperator op=<span class="stringliteral">"Add"</span>>
<AbsoluteDim value=<span class="stringliteral">"4"</span>>
<DimOperator op=<span class="stringliteral">"Multiply"</span>>
<AbsoluteDim value=<span class="stringliteral">"2"</span> />
</DimOperator>
</AbsoluteDim>
</DimOperator>
</FontDim>
...
</pre></div><p>The operation that the above would perform is as follows:</p>
<p><img class="formulaInl" alt="$ (4 * 2) + LineSpacing $" src="form_4.png"/></p>
<p>Obviously this is not what we were after. We need to switch the operands around so that the pairs are reversed: </p>
<div class="fragment"><pre class="fragment">...
<AbsoluteDim value=<span class="stringliteral">"2"</span>>
<DimOperator op=<span class="stringliteral">"Multiply"</span>>
<AbsoluteDim value=<span class="stringliteral">"4"</span>>
<DimOperator op=<span class="stringliteral">"Add"</span>>
<FontDim type=<span class="stringliteral">"LineSpacing"</span> />
</DimOperator>
</AbsoluteDim>
</DimOperator>
</AbsoluteDim>
...
</pre></div><p>The operations this will perform, in order, are:</p>
<p><img class="formulaInl" alt="$ tmp = 4 + LineSpacing $" src="form_5.png"/></p>
<p>Followed by:</p>
<p><img class="formulaInl" alt="$ 2 * tmp $" src="form_6.png"/></p>
<p>Giving us what we wanted which was:</p>
<p><img class="formulaInl" alt="$ (2 * (4 + LineSpacing)) $" src="form_7.png"/></p>
<p>Note also lack of 'normal' operator precedence, you might have been surprised to find the operation was not:</p>
<p><img class="formulaInl" alt="$ ((2 {*} 4) + LineSpacing) $" src="form_1.png"/></p>
<p>Anyway, I digress. Lets get back to our button imagery. We now have enough information to define the middle section of the button, which looks like this: </p>
<div class="fragment"><pre class="fragment"><ImageryComponent>
<Area>
<Dim type=<span class="stringliteral">"LeftEdge"</span>>
<ImageDim
imageset=<span class="stringliteral">"TaharezLook"</span>
image=<span class="stringliteral">"ButtonLeftNormal"</span>
dimension=<span class="stringliteral">"Width"</span>
/>
</Dim>
<Dim type=<span class="stringliteral">"TopEdge"</span>><AbsoluteDim value=<span class="stringliteral">"0"</span> /></Dim>
<Dim type=<span class="stringliteral">"RightEdge"</span>>
<UnifiedDim scale=<span class="stringliteral">"1"</span> type=<span class="stringliteral">"Width"</span>>
<DimOperator op=<span class="stringliteral">"Subtract"</span>>
<ImageDim
imageset=<span class="stringliteral">"TaharezLook"</span>
image=<span class="stringliteral">"ButtonRightNormal"</span>
dimension=<span class="stringliteral">"Width"</span>
/>
</DimOperator>
</UnifiedDim>
</Dim>
<Dim type=<span class="stringliteral">"Height"</span>><UnifiedDim scale=<span class="stringliteral">"1"</span> type=<span class="stringliteral">"Height"</span> /></Dim>
</Area>
<Image imageset=<span class="stringliteral">"TaharezLook"</span> image=<span class="stringliteral">"ButtonMiddleNormal"</span> />
<VertFormat type=<span class="stringliteral">"Stretched"</span> />
<HorzFormat type=<span class="stringliteral">"Stretched"</span> />
</ImageryComponent>
</pre></div><p>This completes the imagery within the normal_imagery section. You can now add in the other two sections in the same manner, just replacing the image names used for the hover and pushed imagery as appropriate - everything else will be exactly the same as what you've done for the normal imagery.</p>
<p>Now we can add references to the imagery sections within the elements that define the various states. The imagery for state imagery elements must be specified in layers. It is possible to specify multiple imagery sections to use within each layer, though for most simple cases, you'll only need one layer.</p>
<p>Here we've added the imagery specification for the Normal state: </p>
<div class="fragment"><pre class="fragment"><StateImagery name=<span class="stringliteral">"Normal"</span>>
<Layer>
<Section section=<span class="stringliteral">"normal_imagery"</span> />
</Layer>
</StateImagery>
</pre></div><p>The Hover and Pushed states are defined in a similar fashion; just replace the name "normal_imagery" with the name of the appropriate imagery section for the state.</p>
<p>The Disabled state is somewhat different though; we do not have any specific imagery for this state, so instead we will re-use the normal_imagery but specify some colours that will be applied to make the button appear darker. This is done by embedding a Colours element within the Section element, as demonstrated here: </p>
<div class="fragment"><pre class="fragment"><StateImagery name=<span class="stringliteral">"Disabled"</span>>
<Layer>
<Section section=<span class="stringliteral">"normal_imagery"</span>>
<Colours
topLeft=<span class="stringliteral">"FF7F7F7F"</span>
topRight=<span class="stringliteral">"FF7F7F7F"</span>
bottomLeft=<span class="stringliteral">"FF7F7F7F"</span>
bottomRight=<span class="stringliteral">"FF7F7F7F"</span>
/>
</Section>
</Layer>
</StateImagery>
</pre></div><p>Now we have a nice button with imagery defined for all the required states. There's just one thing missing - we need to put some label text on the button.</p>
<p>To specify text, you use the TextComponent element, which goes in an ImagerySection the same as the ImageryComponent elements do. We could have put a TextComponent in each of the imagery sections we defined to display the label, however this is wasteful repetition. A better approach is to define a imagery section what contains the label by itself, then we can re-use that for all of the states.</p>
<p>So, start by defining the containing ImagerySection: </p>
<div class="fragment"><pre class="fragment">...
<ImagerySection name=<span class="stringliteral">"label"</span>>
<TextComponent>
</TextComponent>
</ImagerySection>
...
</pre></div><p>The definition of the TextComponent is extremely similar to that of ImageryComponent. We specify an area for the text and the formatting that we require. We can also optionally specify a Text element which is used to explicitly set the font and / or text string to be drawn. Without these explicit settings, these items will be obtained from the base widget itself.</p>
<p>We want our label to be centred within the entire area of the widget, so we need to use the area that defines the entire widget (this was shown above, so will not be repeated here.)</p>
<p>We also need to set the formatting options for the text. For the vertical formatting we will use: </p>
<div class="fragment"><pre class="fragment"><VertFormat type=<span class="stringliteral">"CentreAligned"</span> />
</pre></div><p>And for the horizontal formatting: </p>
<div class="fragment"><pre class="fragment"><HorzFormat type=<span class="stringliteral">"WordWrapCentreAligned"</span> />
</pre></div><p>The final definition for our label imagery section looks like this: </p>
<div class="fragment"><pre class="fragment"><ImagerySection name=<span class="stringliteral">"label"</span>>
<TextComponent>
<Area>
<Dim type=<span class="stringliteral">"LeftEdge"</span>><AbsoluteDim value=<span class="stringliteral">"0"</span> /></Dim>
<Dim type=<span class="stringliteral">"TopEdge"</span>><AbsoluteDim value=<span class="stringliteral">"0"</span> /></Dim>
<Dim type=<span class="stringliteral">"Width"</span>><UnifiedDim scale=<span class="stringliteral">"1"</span> type=<span class="stringliteral">"Width"</span> /></Dim>
<Dim type=<span class="stringliteral">"Height"</span>><UnifiedDim scale=<span class="stringliteral">"1"</span> type=<span class="stringliteral">"Height"</span> /></Dim>
</Area>
<VertFormat type=<span class="stringliteral">"CentreAligned"</span> />
<HorzFormat type=<span class="stringliteral">"WordWrapCentreAligned"</span> />
</TextComponent>
</ImagerySection>
</pre></div><p>Now all that is left is to add this to the layer specification for the state imagery. Normal state now looks like this (with Hover and Pushed being very similar): </p>
<div class="fragment"><pre class="fragment"><StateImagery name=<span class="stringliteral">"Normal"</span>>
<Layer>
<Section section=<span class="stringliteral">"normal_imagery"</span> />
<Section section=<span class="stringliteral">"label"</span> />
</Layer>
</StateImagery>
</pre></div><p>And for Disabled we again specify some additional colours: </p>
<div class="fragment"><pre class="fragment"><StateImagery name=<span class="stringliteral">"Disabled"</span>>
<Layer>
<Section section=<span class="stringliteral">"normal_imagery"</span>>
<Colours
topLeft=<span class="stringliteral">"FF7F7F7F"</span>
topRight=<span class="stringliteral">"FF7F7F7F"</span>
bottomLeft=<span class="stringliteral">"FF7F7F7F"</span>
bottomRight=<span class="stringliteral">"FF7F7F7F"</span>
/>
</Section>
<Section section=<span class="stringliteral">"label"</span>>
<Colours
topLeft=<span class="stringliteral">"FF7F7F7F"</span>
topRight=<span class="stringliteral">"FF7F7F7F"</span>
bottomLeft=<span class="stringliteral">"FF7F7F7F"</span>
bottomRight=<span class="stringliteral">"FF7F7F7F"</span>
/>
</Section>
</Layer>
</StateImagery>
</pre></div><p>This concludes the introduction tutorial. For full examples of this, and all the other WidgetLook specifications, see the example 'looknfeel' files in the <a class="el" href="namespaceCEGUI.html" title="Main namespace for Crazy Eddie's GUI Library.">CEGUI</a> distribution, in the directory: <em>cegui_mk2/datafiles/looknfeel/</em> </p>
</div></div>
<hr class="footer"/><address class="footer"><small>Generated on Sun Jan 22 2012 16:07:40 for Crazy Eddies GUI System by 
<a href="http://www.doxygen.org/index.html">
<img class="footer" src="doxygen.png" alt="doxygen"/></a> 1.7.4 </small></address>
</body>
</html>
|
