This example introduces the grid layout. The corresponding GridLayout PHP class allows grouping several boxes in a larger box, where all
"sub boxes" are disposed on a grid. A grid of several columns and one row is the same as a horizontal layout, and of course a grid of several rows and
one column is the same as a vertical layout. However two superposed horizontal layout can not be assimilated to a grid, since the boxes of each
horizontal layout won't certainly be aligne, to the contrary of the grid.
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 "first_box", that can expand horizontally and vertically
$first_box=new DivLayout("first_box", SZ_MIN_EXPANDING, SZ_MIN_EXPANDING);
// create a new box linked to the div element called "second_box", that can expand horizontally and vertically
$second_box=new DivLayout("second_box", SZ_MIN_EXPANDING, SZ_MIN_EXPANDING);
// create a new box linked to the div element called "third_box", that can expand horizontally and vertically
$third_box=new DivLayout("third_box", SZ_MIN_EXPANDING, SZ_MIN_EXPANDING);
// create a new box linked to the div element called "fourth_box", that can expand horizontally and vertically
$fourth_box=new DivLayout("fourth_box", SZ_MIN_EXPANDING, SZ_MIN_EXPANDING);
// create a grid containing all our boxes
$grid_box=new GridLayout(SZ_MIN_EXPANDING, SZ_MIN_EXPANDING);
$grid_box->add($first_box, 0, 0);
$grid_box->add($second_box, 1, 0);
$grid_box->add($third_box, 0, 1);
$grid_box->add($fourth_box, 1, 1);
// define the page as contained in the div element "content", and composed of the box created just above
$page=new PageLayout("content", $grid_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 04, four boxes in a grid</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 first box -->
<div id="first_box" style="border: solid 5px blue;">first box</div>
<!-- our second box -->
<div id="second_box" style="border: solid 5px red;">second box</div>
<!-- our third box -->
<div id="third_box" style="border: solid 5px green;">third box</div>
<!-- our fourth box -->
<div id="fourth_box" style="border: solid 5px yellow;">fourth box</div>
<script type="text/javascript">
<?php
// output the layout script, and in particular a function called "content_layout"
$page->printLayout();
?>
</script>
</body>
</html>
The GridLayout class is quite similar to HorizontalLayout and VerticalLayout. The only perceptible difference,
in terms of programming, is the add member function which now takes three parameters instead of one. The first is the box added in the grid,
the second is the column in which the box is added, and the third gives the row. Columns and rows begins at 0. As you can directly gives the position
of a box in the grid, there might be holes if every cells of the cells are not filled, as in the example below :
