[go: up one dir, main page]
Menu ▾ ▴

[92068c]: / layout.html  Maximize  Restore  History

Download this file

603 lines (602 with data), 32.9 kB 

  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
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

	<head>

		<title>Swing Layout Managers</title>

		<meta http-equiv="Content-type" content="text/html; charset=Windows-1252">

		<meta name="Generator" content='EditPlus'>

		<meta name="Keywords" content='Swing, layout, Layout managers, XML, GUI, Compositor'>

		<meta name="Description" content='How to use Swing layout managers with Compositor'>

		<link rel='stylesheet' href='compositor.css' type='text/css'>

		<style type='text/css'>

			body { background: #ffebeb }

		</style>

		<script type='text/javascript' src='compositor.js'></script>

	</head>

	<body id='top' onload='initContents ()'>

		<div id='intro'>

			<h1>Swing Layout Managers</h1>

			<p>

				or <q class='page'>the pink page</q>

			</p>

			<p>

				Although <a href='http://compositor.sourceforge.net/'>Compositor</a> can make Swing UI generation easier, it can still be difficult to make the layout managers do what you want.

				I'll try to describe some things I've learned.

			</p>

		</div>

		<div id='panel'>

			<a href='index.html'><img id='logo' src='core/src/main/resources/logo.png' width='138' height='135' border='0' alt=''></a>

			<p style='display: none'>

				<a href='#content'>Skip navigation</a>

			</p>

			<div id='contents'>

				<div id='links' style='font-size: small'>

					<h2 style='margin: 0; padding: 0'>Links</h2>

					<ul>

						<li>

							<a href='https://sourceforge.net/projects/compositor/files/0.4/'>Download v0.4</a>

						</li>

						<li>

							<a href='http://sourceforge.net/projects/compositor/' title='Sourceforge'>Project host info</a>

						</li>

						<li style='background: white'>

							<a href='index.html' title='the white page'>Compositor usage</a>

						</li>

						<li style='background: #ffffbb'>

							<a href='quickstart.html' title='the yellow page'>Quick start</a>

						</li>

						<li style='background: #ebebff'>

							<a href='howthingswork.html' title='the blue page'>How it works</a>

						</li>

					</ul>

				</div>

				<h2>

					Contents

				</h2>

				<ol>

					<li>

						<a href='#layoutmanagers'>Available layout managers</a> <a href='#.' onclick='viewList ( this )'><img src='core/src/main/resources/expand.png' alt='' style='display: none'></a>

						<ul style='display: none'>

							<li>

								<a href='#flowlayout'>Flow Layout</a>

							</li>

							<li>

								<a href='#borderlayout'>Border Layout</a>

							</li>

							<li>

								<a href='#boxlayout'>Box Layout</a>

							</li>

							<li>

								<a href='#cardlayout'>Card Layout</a>

							</li>

							<li>

								<a href='#gridlayout'>Grid Layout</a>

							</li>

							<li>

								<a href='#grid'>The Compositor "Grid"</a>

							</li>

						</ul>

					</li>

					<li>

						<a href='#howtouse'>How to Use the Layout Managers in Compositor</a> <a href='#.' onclick='viewList ( this )'><img src='core/src/main/resources/expand.png' alt='' style='display: none'></a>

						<ul style='display: none'>

							<li>

								<a href='#example1'>Example 1</a>

							</li>

							<li>

								<a href='#example2'>Example 2</a>

							</li>

							<li>

								<a href='#conclusion'>Conclusion</a>

							</li>

						</ul>

					</li>

					<li>

						<a href='#dontworry'>Things not to worry about</a>

					</li>

				</ol>

			</div>

		</div>

		<ol id='content'>

			<li id='layoutmanagers'>

				<h2>Available layout managers</h2>

				<p>

					First you need to know how the layout managers available in Compositor work.

					There are five of them, plus the <code>grid</code> tag, and here they are with a quick attempt at diagrams (and apologies if you have difficulties with HTML tables).

				</p>

				<ul>

					<li id='flowlayout'>

						<h3>Flow Layout</h3>

						<p>

							The default layout is flow layout.

							Components are laid out from left to right, flowing to multiple rows when they are too wide for one line.

						</p>

						<p>

							The components take their preferred size, and any extra space in the container is left empty.

							There is a noticeable margin around the components.

						</p>

						<p>

							On resize, the components stay the same size and are re-flowed.

						</p>

						<table>

							<tr>

								<td style='border-bottom: none'>

									<table style='border-top: none'>

										<tr>

											<td>components: one</td>

											<td style='border: none'>&nbsp;</td>

											<td>two</td>

											<td style='border: none'>&nbsp;</td>

											<td>three</td>

										</tr>

									</table>

								</td>

							</tr>

							<tr>

								<td style='border-top: none; padding-top: 0'>

									<table style='border-top: none' align='center'>

										<tr>

											<td>fourth - flowed</td>

										</tr>

									</table>

								</td>

							</tr>

						</table>

						<p>

							Sadly this is perhaps the least useful layout manager.

						</p>

					</li>

					<li id='borderlayout'>

						<h3>Border Layout</h3>

						<p>

							Although border layout can only contain five components, it's very flexible.

							The five components are laid out geographically:

						</p>

						<table border='1'>

							<tr>

								<td colspan='3' align='center'>

									North

								</td>

							</tr>

							<tr>

								<td>

									<p>West</p>

								</td>

								<td>

									<p>Centre</p>

								</td>

								<td>

									<p>East</p>

								</td>

							</tr>

							<tr>

								<td colspan='3' align='center'>

									South

								</td>

							</tr>

						</table>

						<p>

							The border components take their natural size, but only in the "across" direction for their border.

							If a border is empty, it takes up no space.

							The centre component is sized to fit.

						</p>

						<p>

							So in a packed dialog with border layout, the size of the dialog is determined by the preferred heights of the north and south components, the preferred widths of the east and west components, and the preferred size of the centre component.

						</p>

						<p>

							One subsidiary use for border layout is to make a panel that grows to fill the space available.

							No contents are necessary.

						</p>

						<p>

							On resize, the centre component width and height change, the width of the north and south components, and the height of the east and west components.

							This is less complicated than it sounds.

						</p>

					</li>

					<li id='boxlayout'>

						<h3>Box Layout</h3>

						<p>

							Putting components in a row or column can be done with box layout.

							In compositor, these are separated as <code>boxLayoutX</code> and <code>boxLayoutY</code>.

						</p>

						<table border='1' style='float: left; margin-right: 1em;'>

							<tr>

								<td>

									boxLayoutX

								</td>

								<td>

									puts

								</td>

								<td>

									components

								</td>

								<td>

									like

								</td>

								<td>

									this

								</td>

							</tr>

						</table>

						<table border='1'>

							<tr>

								<td>

									boxLayoutY

								</td>

							</tr>

							<tr>

								<td>

									puts

								</td>

							</tr>

							<tr>

								<td>

									components

								</td>

							</tr>

							<tr>

								<td>

									like

								</td>

							</tr>

							<tr>

								<td>

									this

								</td>

							</tr>

						</table>

						<p>

							One difference between a row of components in box and flow layouts is that flow layout may split the components into multiple rows, but box layout won't.

						</p>

						<p>

							If the components in a box layout don't align correctly, try setting <code>alignmentX</code> or <code>alignmentY</code>

						</p>

						<p>

							On resize, the layout tries to set every component to its preferred size, but then distributes the increase or decrease among the components.

							To keep components at the size they prefer, add an empty panel with border layout as the last component.

						</p>

					</li>

					<li id='cardlayout'>

						<h3>Card Layout</h3>

						<p>

							A card layout puts all of the contained components on top of each other and only the top "card" is visible.

							It's like a tabbed pane, but with no visible way to switch between the contained components.

							You have to switch between them programmatically.

						</p>

						<p>

							This kind of layout is useful if you need to show the user different components depending on the state of the app.

						</p>

						<p>

							When packed, the container will be big enough to hold that largest of the components.

							Other components fill the available space.

						</p>

						<p>

							On resize, all components fill the available space.

						</p>

					</li>

					<li id='gridlayout'>

						<h3>Grid Layout</h3>

						<p>

							If you want to force components to be the same size, you may need grid layout.

							One time this is handy is if you want a set of buttons all to be the same size.

							This makes them visually grouped.

						</p>

						<table>

							<tr>

								<td width='50%'>

									components:<br>one

								</td>

								<td>

									two

								</td>

							</tr>

							<tr>

								<td>

									three

								</td>

								<td>

									four<br>(tall)

								</td>

							</tr>

						</table>

						<p>

							By default all the components are touching, but you can explicitly set horizontal and vertical gaps.

							The example Compositor app SimpleEdit's pointless dialogs include one that illustrates various usages of grid layout.

						</p>

						<p>

							On resize, the components are all resized.

						</p>

					</li>

					<li id='grid'>

						<h3>The Compositor "Grid"</h3>

						<p>

							If you want components in rows and columns like an HTML table, Compositor has <code>grid</code>, <code>row</code> and <code>cell</code> tags that do this for you.

							Unlike grid layout, the columns are not all the same with, and the rows not the same height.

						</p>

						<table>

							<tr>

								<td>

									components: one

								</td>

								<td>

									two

								</td>

							</tr>

							<tr>

								<td>

									three

								</td>

								<td>

									four<br>(tall)

								</td>

							</tr>

						</table>

						<p>

							On resize, space is added around the outside of the grid.

							This is probably not what you want, but you can fix it with attributes for the <a href='index.html#refCell'><code class='element'>cell</code></a> tag.

						</p>

					</li>

				</ul>

			</li>

			<li id='howtouse'>

				<h2>How to Use the Layout Managers in Compositor</h2>

				<p>

					The second thing that you need to know is how to use these simple tools to achieve what you want.

					This is harder to explain without knowing what you want, but let's try a couple of examples.

				</p>

				<ul>

					<li id='example1'>

						<h3>

							Example 1

						</h3>

						<p>

							A simple dialog might surround the dialog content with buttons down the right, logo on the left.

							It would look something like this:

						</p>

						<table border='1'>

							<tr>

								<td valign='top' style='border-right: none'>

									[logo]

								</td>

								<td style='border-right: none; border-left: none'>

									Widgets go<br>

									here as<br>

									required for<br>

									the dialog<br>

									body<br>

								</td>

								<td valign='top' style='border-left: none'>

									<table border='1'>

										<tr>

											<td>

												OK

											</td>

										</tr>

										<tr>

											<td>

												Cancel

											</td>

										</tr>

									</table>

								</td>

							</tr>

						</table>

						<p>

							First you need border layout.

							This will make two side panels the right width for the logo and the buttons, and let any change of size be given to the central area.

						</p>

						<p>

							If you make the west component a label to hold the logo, it will stay about half way down the <abbr title='Left hand side'>LHS</abbr> as the dialog resizes.

							But if you wrap it in a panel it will stay at the top - so the default flow layout is useful sometimes after all.

						</p>

						<p>

							So you have something a bit like this:

						</p>

<pre><span class='marker'>&lt;</span><span class='element'>panel</span> <span class='attrib'>layout</span><span class='marker'>=</span><span class='string'>'borderLayout'</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;</span><span class='element'>panel</span> <span class='attrib'>borderLayout</span><span class='marker'>=</span><span class='string'>'west'</span><span class='marker'>&gt;&lt;</span><span class='element'>label</span> <span class='attrib'>icon</span><span class='marker'>=</span><span class='string'>'logo.png'</span> <span class='marker'>/&gt;&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;</span><span class='element'>panel</span><span class='marker'>&gt;</span>                    <span class='comment'>&lt;!-- Widgets here --&gt;</span>    <span class='marker'>&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;</span><span class='element'>panel</span> <span class='attrib'>borderLayout</span><span class='marker'>=</span><span class='string'>'east'</span><span class='marker'>&gt;</span><span class='comment'>&lt;!-- Buttons here --&gt;</span>    <span class='marker'>&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span>

<span class='marker'>&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span></pre>

						<p>

							Now we need to add buttons.

							You could use box layout Y, but buttons will vary in size.

							To make them the same width, use grid layout.

							You have to specify how many rows and columns you want - zero means "as many as necessary".

							Also specifying some space between the buttons makes them look better.

						</p>

						<p>

							You should have something like this:

						</p>

<pre><span class='marker'>&lt;</span><span class='element'>panel </span><span class='attrib'>layout</span><span class='marker'>=</span><span class='string'>'borderLayout'</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;</span><span class='element'>panel </span><span class='attrib'>borderLayout</span><span class='marker'>=</span><span class='string'>'west'</span><span class='marker'>&gt;&lt;</span><span class='element'>label </span><span class='attrib'>icon</span><span class='marker'>=</span><span class='string'>'logo.png' </span><span class='marker'>/&gt;&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;</span><span class='element'>panel</span><span class='marker'>&gt;</span>                    <span class='comment'>&lt;!-- Widgets here --&gt;</span>    <span class='marker'>&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;</span><span class='element'>panel </span><span class='attrib'>layout</span><span class='marker'>=</span><span class='string'>'gridLayout' </span><span class='attrib'>gridRows</span><span class='marker'>=</span><span class='string'>'0' </span><span class='attrib'>gridCols</span><span class='marker'>=</span><span class='string'>'1' </span><span class='attrib'>gridHGap</span><span class='marker'>=</span><span class='string'>'0' </span><span class='attrib'>gridVGap</span><span class='marker'>=</span><span class='string'>'6'</span><span class='marker'>&gt;</span>

      <span class='marker'>&lt;</span><span class='element'>button</span><span class='marker'>&gt;</span>OK<span class='marker'>&lt;/</span><span class='element'>button</span><span class='marker'>&gt;</span>

      <span class='marker'>&lt;</span><span class='element'>button</span><span class='marker'>&gt;</span>Cancel<span class='marker'>&lt;/</span><span class='element'>button</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span>

<span class='marker'>&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span></pre>

						<p>

							Oops - when you resize the dialog, the buttons size with it.

							To make them stay still, wrap them in another panel:

						</p>

<pre><span class='marker'>&lt;</span><span class='element'>panel </span><span class='attrib'>layout</span><span class='marker'>=</span><span class='string'>'borderLayout'</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;</span><span class='element'>panel </span><span class='attrib'>borderLayout</span><span class='marker'>=</span><span class='string'>'west'</span><span class='marker'>&gt;&lt;</span><span class='element'>label </span><span class='attrib'>icon</span><span class='marker'>=</span><span class='string'>'logo.png' </span><span class='marker'>/&gt;&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;</span><span class='element'>panel</span><span class='marker'>&gt;</span>                    <span class='comment'>&lt;!-- Widgets here --&gt;</span>    <span class='marker'>&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;</span><span class='element'>panel </span><span class='attrib'>borderLayout</span><span class='marker'>=</span><span class='string'>'east'</span><span class='marker'>&gt;</span>

      <span class='marker'>&lt;</span><span class='element'>panel </span><span class='attrib'>layout</span><span class='marker'>=</span><span class='string'>'gridLayout' </span><span class='attrib'>gridRows</span><span class='marker'>=</span><span class='string'>'0' </span><span class='attrib'>gridCols</span><span class='marker'>=</span><span class='string'>'1' </span><span class='attrib'>gridHGap</span><span class='marker'>=</span><span class='string'>'0' </span><span class='attrib'>gridVGap</span><span class='marker'>=</span><span class='string'>'6'</span><span class='marker'>&gt;</span>

         <span class='marker'>&lt;</span><span class='element'>button</span><span class='marker'>&gt;</span>OK<span class='marker'>&lt;/</span><span class='element'>button</span><span class='marker'>&gt;</span>

         <span class='marker'>&lt;</span><span class='element'>button</span><span class='marker'>&gt;</span>Cancel<span class='marker'>&lt;/</span><span class='element'>button</span><span class='marker'>&gt;</span>

      <span class='marker'>&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span>

<span class='marker'>&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span></pre>

						<p>

							And that was flow layout being useful again.

							I was to hard on it <a href='#flowlayout'>earlier</a>.

						</p>

						<p>

							Finally, add your dialog widgets...

						</p>

					</li>

					<li id='example2'>

						<h3>

							Example 2

						</h3>

						<p>

							Another common dialog style has buttons down the middle, between two equally sized sides.

							It looks a bit like this:

						</p>

						<table border='1'>

							<tr>

								<td>

									<ul style='list-style-type: none; margin-left: 0; width: 75px'>

										<li>

											list

										</li>

										<li>

											of

										</li>

										<li>

											available

										</li>

										<li>

											things

										</li>

									</ul>

								</td>

								<td>

									<table border='1'>

										<tr>

											<td>

												&lt;&lt;

											</td>

										</tr>

										<tr>

											<td>

												&gt;&gt;

											</td>

										</tr>

										<tr>

											<td>

												OK

											</td>

										</tr>

									</table>

								</td>

								<td>

									<ul style='list-style-type: none; margin-left: 0; width: 75px'>

										<li>

											list

										</li>

										<li>

											of

										</li>

										<li>

											things

										</li>

										<li>

											in use

										</li>

									</ul>

								</td>

							</tr>

						</table>

						<p>

							This is a UI style often used for configuring something: for example, adding buttons to a toolbar.

							The two sides represent the possible and the actual, and there are buttons in the middle to move things between the two.

						</p>

						<p>

							The first thing that will help us is to notice that the three main areas are arranged horizontally, which suggests that we could use box layout X.

							Bearing in mind how we had to set up the buttons in the previous example, we can skip straight to this:

						</p>

<pre><span class='marker'>&lt;</span><span class='element'>panel </span><span class='attrib'>layout</span><span class='marker'>=</span><span class='string'>'boxLayoutX'</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;</span><span class='element'>scrollpane</span><span class='marker'>&gt;</span>

      <span class='marker'>&lt;</span><span class='element'>label</span><span class='marker'>&gt;</span>list of available things<span class='marker'>&lt;/</span><span class='element'>label</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;/</span><span class='element'>scrollpane</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;</span><span class='element'>panel</span><span class='marker'>&gt;</span>

      <span class='marker'>&lt;</span><span class='element'>panel </span><span class='attrib'>layout</span><span class='marker'>=</span><span class='string'>'gridLayout' </span><span class='attrib'>gridRows</span><span class='marker'>=</span><span class='string'>'0' </span><span class='attrib'>gridCols</span><span class='marker'>=</span><span class='string'>'1' </span><span class='attrib'>gridHGap</span><span class='marker'>=</span><span class='string'>'0' </span><span class='attrib'>gridVGap</span><span class='marker'>=</span><span class='string'>'6'</span><span class='marker'>&gt;</span>

         <span class='marker'>&lt;</span><span class='element'>button</span><span class='marker'>&gt;</span>OK<span class='marker'>&lt;/</span><span class='element'>button</span><span class='marker'>&gt;</span>

         <span class='marker'>&lt;</span><span class='element'>button</span><span class='marker'>&gt;</span>Cancel<span class='marker'>&lt;/</span><span class='element'>button</span><span class='marker'>&gt;</span>

      <span class='marker'>&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;</span><span class='element'>scrollpane</span><span class='marker'>&gt;</span>

      <span class='marker'>&lt;</span><span class='element'>label</span><span class='marker'>&gt;</span>list of things in use<span class='marker'>&lt;/</span><span class='element'>label</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;/</span><span class='element'>scrollpane</span><span class='marker'>&gt;</span>

<span class='marker'>&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span></pre>

						<p>

							Resizing this adds space to all three elements, but nesting border layout panels helps (because the changes in width are absorbed by the two border layout panels, leaving the central panel at its default width):

						</p>

<pre><span class='marker'>&lt;</span><span class='element'>panel </span><span class='attrib'>layout</span><span class='marker'>=</span><span class='string'>'boxLayoutX'</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;</span><span class='element'>panel </span><span class='attrib'>layout</span><span class='marker'>=</span><span class='string'>'borderLayout'</span><span class='marker'>&gt;</span>

      <span class='marker'>&lt;</span><span class='element'>scrollpane</span><span class='marker'>&gt;&lt;</span><span class='element'>label</span><span class='marker'>&gt;</span>list of available things<span class='marker'>&lt;/</span><span class='element'>label</span><span class='marker'>&gt;&lt;/</span><span class='element'>scrollpane</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;</span><span class='element'>panel</span><span class='marker'>&gt;</span>

      <span class='marker'>&lt;</span><span class='element'>panel </span><span class='attrib'>layout</span><span class='marker'>=</span><span class='string'>'gridLayout' </span><span class='attrib'>gridRows</span><span class='marker'>=</span><span class='string'>'0' </span><span class='attrib'>gridCols</span><span class='marker'>=</span><span class='string'>'1' </span><span class='attrib'>gridHGap</span><span class='marker'>=</span><span class='string'>'0' </span><span class='attrib'>gridVGap</span><span class='marker'>=</span><span class='string'>'6'</span><span class='marker'>&gt;</span>

         <span class='marker'>&lt;</span><span class='element'>button</span><span class='marker'>&gt;</span>OK<span class='marker'>&lt;/</span><span class='element'>button</span><span class='marker'>&gt;</span>

         <span class='marker'>&lt;</span><span class='element'>button</span><span class='marker'>&gt;</span>Cancel<span class='marker'>&lt;/</span><span class='element'>button</span><span class='marker'>&gt;</span>

      <span class='marker'>&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;</span><span class='element'>panel </span><span class='attrib'>layout</span><span class='marker'>=</span><span class='string'>'borderLayout'</span><span class='marker'>&gt;</span>

      <span class='marker'>&lt;</span><span class='element'>scrollpane</span><span class='marker'>&gt;&lt;</span><span class='element'>label</span><span class='marker'>&gt;</span>list of things in use<span class='marker'>&lt;/</span><span class='element'>label</span><span class='marker'>&gt;&lt;/</span><span class='element'>scrollpane</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span>

<span class='marker'>&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span></pre>

						<p>

							But the two sides are not equal sizes - they both fit their content.

							To force equal size, we can specify preferred heights and widths:

						</p>

<pre><span class='marker'>&lt;</span><span class='element'>panel </span><span class='attrib'>layout</span><span class='marker'>=</span><span class='string'>'boxLayoutX'</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;</span><span class='element'>panel </span><span class='attrib'>layout</span><span class='marker'>=</span><span class='string'>'borderLayout'</span><span class='marker'>&gt;</span>

      <span class='marker'>&lt;</span><span class='element'>scrollpane </span><span class='attrib'>preferredWidth</span><span class='marker'>=</span><span class='string'>'100' </span><span class='attrib'>preferredHeight</span><span class='marker'>=</span><span class='string'>'100'</span><span class='marker'>&gt;</span>

         <span class='marker'>&lt;</span><span class='element'>label</span><span class='marker'>&gt;</span>list of available things<span class='marker'>&lt;/</span><span class='element'>label</span><span class='marker'>&gt;</span>

      <span class='marker'>&lt;/</span><span class='element'>scrollpane</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;</span><span class='element'>panel</span><span class='marker'>&gt;</span>

      <span class='marker'>&lt;</span><span class='element'>panel </span><span class='attrib'>layout</span><span class='marker'>=</span><span class='string'>'gridLayout' </span><span class='attrib'>gridRows</span><span class='marker'>=</span><span class='string'>'0' </span><span class='attrib'>gridCols</span><span class='marker'>=</span><span class='string'>'1' </span><span class='attrib'>gridHGap</span><span class='marker'>=</span><span class='string'>'0' </span><span class='attrib'>gridVGap</span><span class='marker'>=</span><span class='string'>'6'</span><span class='marker'>&gt;</span>

         <span class='marker'>&lt;</span><span class='element'>button</span><span class='marker'>&gt;</span>OK<span class='marker'>&lt;/</span><span class='element'>button</span><span class='marker'>&gt;</span>

         <span class='marker'>&lt;</span><span class='element'>button</span><span class='marker'>&gt;</span>Cancel<span class='marker'>&lt;/</span><span class='element'>button</span><span class='marker'>&gt;</span>

      <span class='marker'>&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;</span><span class='element'>panel </span><span class='attrib'>layout</span><span class='marker'>=</span><span class='string'>'borderLayout'</span><span class='marker'>&gt;</span>

      <span class='marker'>&lt;</span><span class='element'>scrollpane </span><span class='attrib'>preferredWidth</span><span class='marker'>=</span><span class='string'>'100' </span><span class='attrib'>preferredHeight</span><span class='marker'>=</span><span class='string'>'100'</span><span class='marker'>&gt;</span>

         <span class='marker'>&lt;</span><span class='element'>label</span><span class='marker'>&gt;</span>list of things in use<span class='marker'>&lt;/</span><span class='element'>label</span><span class='marker'>&gt;</span>

      <span class='marker'>&lt;/</span><span class='element'>scrollpane</span><span class='marker'>&gt;</span>

   <span class='marker'>&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span>

<span class='marker'>&lt;/</span><span class='element'>panel</span><span class='marker'>&gt;</span></pre>

					</li>

					<li id='conclusion'>

						<h3>

							Conclusion

						</h3>

						<p>

							The general approach is to think which layout manager will give you the basic look you want, then to do the same thing with the contents of each area you've defined.

							Adding wrapper panels is a common solution to many layout issues.

						</p>

					</li>

				</ul>

			</li>

			<li id='dontworry'>

				<h2>Things not to worry about</h2>

				<p>

					There are also a few things that it took me a while to really believe.

				</p>

				<ul>

					<li>

						Don't worry about the performance implications of nesting lots of containers.

						By the time the JVM has started and we've created a few <code>JPanel</code> instances, the overhead of more of them is not so much.

						I've run Compositor apps on fairly slow machines with fairly good results.

					</li>

					<li>

						Similarly, don't worry about adding components simply to make your UI look right, or whether one type of component is faster than another.

					</li>

					<li>

						It's OK to change your UI.

						The changes won't break your Compositor app provided that named components don't move from one window to another (and if they do, the changes required in your app are probably just to the names of components).

						In fact, one of the benefits of Compositor is that you <strong>can</strong> and <strong>should</strong> try pretty radical changes.

					</li>

				</ul>

			</li>

		</ol>

		<hr>

		<p style='float: right'>

			<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>

			<a href="http://jigsaw.w3.org/css-validator/check/referer"><img width='88' height='31' src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"></a>

		</p>

	</body>

</html>