1. Introduction

This tutorial will walk you through a complete example of building a page layout using Bamboo.

You can download the completed sources for the example presented here. This zip file contains three versions of the example, one for each stage of the tutorial.

2. Layout Design

The page layout we'll build will be the following fairly typical three-column layout:

The specification for this layout is as follows:

The header region will be the full width of the page, and will be 75 pixels high.
The leftnav region will be 100 pixels wide.
The adbar region will be 75 pixels wide.
The body region will take up whatever space is left over from the leftnav and adbar regions.
The footer region will be 50 pixels in height.

3. First Cut

For our first cut, we'll implement the header region only. First lets create the HTML page. This needs to contain a single <div> for the header region. We'll also add a little bit of styling with an inline stylesheet so that we can see the region's placement on the page.

Enter the following HTML into your favorite text editor and save it to file as "quickstart.htm"

<html>

  <head>

    <title>Bamboo Quickstart Tutorial</title>

    <style type="text/css">

      #header {
        border: dashed 1px black;
      }

    </style>

  </head>

  <body>

    <div id="header">header</div>

  </body>

</html>

Open the page in your web browser. It should look something like the following:

Next lets add a Bamboo layout to the page to place the header.

Enter the following layout into your favorite text editor and save it to file as "quickstart.layout" in the same directory as your HTML page.

<layout>

  <grid>

    <rows>
      <row height="75px" />
    </rows>

    <cols>
      <col width="*" minwidth="1px" />
    </cols>

  </grid>

  <regions>

    <region id="header" start="1,1" end="1,1" fixedHeight="true" />

  </regions>

</layout>

Now copy and paste the layout text into the Bamboo Online Editor and click the Generate Script toolbar button. When prompted, save the generated script file as "quickstart.layout.js" in the same directory as your HTML page.
Add the following <script> element to the head of the HTML page to link in the generated JavaScript:

<script language="javascript" src="quickstart.layout.js"></script>

Refresh the HTML page in your browser. It should now look like this:

Note that we're using the online editor to generate a static JavaScript file that we then link in, meaning that there's no direct link between the HTML page and the *.layout file. However we're keeping the *.layout file with our HTML page so that it's readily accessible when we need to make changes and re-generate the script. Also, if we later choose to use the Webapp Bindings to dynamically generate the JavaScript for our layout, the *.layout file will already be in a good location.

4. Completing the Layout

We need to add <div>'s for each of the additional regions on our page. Add them as shown below. Note that we've also updated the inline stylesheet to add the border to the new regions so we can see how Bamboo places them.

<html>

  <head>

    <title>Bamboo Quickstart Tutorial/title>

    style type="text/css">

      #header, #leftnav, #body, #adbar, #footer {
        border: dashed 1px black;
      }

    </style>

    <script language="javascript"
      src="quickstart.layout.js"></script>

  </head>

  <body>

    <div id="header">header</div>

    <div id="leftnav">leftnav</div>

    <div id="body">body</div>

    <div id="adbar">adbar</div>

    <div id="footer">footer</div>

  </body>

</html>

We need to make the following additions to our layout grid:

Add a new row for the main body of the page. The height we set here is not important because we will configure the regions allocated to this row to be variable height, so this row will end up being adjusted as required.
Add a new row for the footer of the page. As described in our original specification, the footer height must be 50 pixels.
Add a new column to create space for the leftnav region. This column will be 100 pixels wide.
Increase the minwidth of the remainder width column to 460 pixels. This means that the body region (which we map to it next) will never be smaller than 460 pixels wide. We've picked this size because it suits the content we add later.
Add a new column for the adbar region at the right of the main body area. This column will be 75 pixels wide.

With the grid updated to create spaces for our other regions, we can map them into place:

We now have three columns, so we need to change the mapping for the header region to make it span from row 1, column 1 across full width of the layout grid to row 1 column 3.
The leftnav region is mapped to the single cell at row 2, column 1.
The body region is mapped to the single cell at row 2, column 2.
The adbar region is mapped to the single cell at row 2, column 3.
The leftnav, body and adbar regions are all set with fixedHeight="false" so that as more content is added, Bamboo will adjust the height to accomodate it.
The footer region is similar to the header in that it needs to be mapped across the full width of the layout grid. It is mapped the cells from row 3, column 1 to row 3, column 3. The footer region is set to fixedHeight="true" so that it will clip content to fit.

Our complete updated quickstart.layout file now looks like this:

<layout>

  <grid>

    <rows>
      <row height="75px" />
      <row height="20px" />
      <row height="50px" />
    </rows>

    <cols>
      <col width="100px" />
      <col width="*" minwidth="460px" />
      <col width="75px" />
    </cols>

  </grid>

  <regions>

    <region id="header" start="1,1" end="1,3" fixedHeight="true" />

    <region id="leftnav" start="2,1" end="2,1" fixedHeight="false" />
    <region id="body" start="2,2" end="2,2" fixedHeight="false" />
    <region id="adbar" start="2,3" end="2,3" fixedHeight="false" />

    <region id="footer" start="3,1" end="3,3" fixedHeight="true" />

  </regions>

</layout>

Copy and paste the layout text into the Bamboo Online Editor again and click the Generate Script toolbar button. Save the generated script over the old quickstart.layout.js.
Refresh your browser window. With the new layout applied, the regions should snap into place and your page should look like this:

5. Just Add Content

The wireframe looks like what we're after, so let's add some real content to the page. With content and styling, our page looks like this:

6. Where to From Here

For full details on the syntax for defining layouts, see the User Manual
For step-by-step guides, check out the HOWTO's

Table of Contents

1. Introduction

2. Layout Design

3. First Cut

4. Completing the Layout

5. Just Add Content

6. Where to From Here