This example introduces the SpacerLayout class. A spacer layout is just an empty box that grows as much as possible to fill available spaces.
You can think at a spacer layout as a transparent div layout, which width and height are SZ_MIN_EXPANDING. Such a spacer layout has no linked
div html element and is faster to compute. Its aim is mainly to center other boxes, by "pushing" them. In our example the div element is centered
because it is between two spacers that exercices an equal pressure at right and left.
Click on the screenshot below to test this example in your web browser.
<?php
/**************************************************************************
* Copyright (C) 2006 by Pierre Hebert *
* http://things.1000wallpapers.com/diable/ *
***************************************************************************/
require "diable.php";
// create a new box linked to the div element called "centered", that can expand vertically
$my_box=new DivLayout("centered", SZ_MIN, SZ_MIN_EXPANDING);
// create a horizontal box grouping horizontally the previous box, with a spacer at left and right
$horizontal_box=new HorizontalLayout(SZ_MIN_EXPANDING, SZ_MIN_EXPANDING);
$horizontal_box->add(new SpacerLayout());
$horizontal_box->add($my_box);
$horizontal_box->add(new SpacerLayout());
// define the page as contained in the div element "content", and composed of the box created just above
$page=new PageLayout("content", $horizontal_box);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Pierrox.net - Diable - example 05, spacers</title>
</head>
<body onLoad="content_layout();" onResize="content_layout()" style="height: 100%; width: 100%; padding:0px; margin:0px;">
<!-- the definition of our working area : in this example the full window -->
<div id="content" style="position:absolute; top: 0px; left: 0px; width: 100%; height:100%;"></div>
<!-- our blue dotted hello world rectangle -->
<div id="centered" style="border: solid 2px black; background-color: #7D7DFF;">a box centered by spacers</div>
<script type="text/javascript">
<?php
// output the layout script, and in particular a function called "content_layout"
$page->printLayout();
?>
</script>
</body>
</html>
In order to better understand spacers you can imagine that spacers are like springs that tend to push boxes in opposite directions.