This example shows a minimal page built with Diable. You will only notice a blue dotted border that should exactly fit the browser window. Note that your browser should not display scrollbars, because everything is computed with exact values.
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 "hello_world", that can expand horizontally and vertically
$my_box=new DivLayout("hello_world", SZ_MIN_EXPANDING, SZ_MIN_EXPANDING);
// define the page as contained in the div element "content", and composed of the box created just above
$page=new PageLayout("content", $my_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 01, hello world !</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="hello_world" style="border: dotted 5px blue;">hello world !</div>
<script type="text/javascript">
<?php
// output the layout script, and in particular a function called "content_layout"
$page->printLayout();
?>
</script>
</body>
</html>
All this stuff for just a blue dotted border ? Yes...
Let's take a closer look ath the static html code first. There are four interesting components :
content_layout() function.
The dynamic behaviour of our page is managed by the onLoad() and onResize() events. In this example the content_layout()
function is automatically generated and is responsible for computing the "content" object layout.
But what is exactly the "content" object ? It is our whole container, in which every other boxes will fit. This special top level container is defined in the
php code with
<?php $page=new PageLayout("content", $my_box); ?>
, meaning the built page should be contained in "content", and will
contain the box $my_box. Later, calling
<?php $page->printLayout(); ?>
will produce the javascript function
content_layout() function. The PageLayout constructor is of the form PageLayout(<container div element>,
<box object>).
And finally (and even if it is the first line), the line
<?php $my_box=new DivLayout("hello_world", SZ_MIN_EXPANDING, SZ_MIN_EXPANDING); ?>
create a box linked to the div element called "hello_world". The DivLayout constructor is of the form DivLayout(<div name>, <width>, <height>). The width and height are one the following values :
Thus the box $my_box which represents the div element "hello_world" will grow and fit the entire window, since its width and height ared defined to SZ_MIN_EXPANDING, and there is no other box defined. We could have defined the $my_box differently :
<?php $my_box=new DivLayout("hello_world", SZ_MIN_EXPANDING, SZ_MIN); ?>
gives :
<?php $my_box=new DivLayout("hello_world", SZ_MIN, SZ_MIN_EXPANDING); ?>
gives :
<?php $my_box=new DivLayout("hello_world", SZ_MIN, SZ_MIN); ?>
gives :