Building a simple demo site
| Basics |
| Docs |
|
Components
Templates
Tools
|
| Demos |
|
|
Building a simple demo site
To build your first demo site you will need to sucessfuly build staticgen. You will also need the "demosite1" directory. A complete CGI Framework package include it. When you are ready, go to demosite1 using your favorite (or unique) command line shell and the the following command:
../staticgen/staticgen index.template
or
..\staticgen\staticgen index.template
if you are running Win32.
That command must take a fraction of second to finish, and, after that you will have a fresh new index.html on the same directory. Let's take a look on the original file (index.template) and in the resulting file (index.html) to understand what happened.
File: index.template
 |
 |
|
 |
<pb:encapsule filename="basic.template" title="Home"> <p align="center"><img src="cgiframework.png"></p> <br><br> <p class="titulo grande">Site news</p> <table cellpadding="5" cellspacing="0" border="0" width="100%"> <tr> <td valign="top">2002-Nov-28</td> <td> Many new and revised documentation.<br> Feature freeze on components and tools.<br> Preparing for first alpha release. </td> </tr> <tr> <td valign="top">2002-Nov-03</td> <td> CVS update. News tags added (specially pb:encapsule). Bug fixes.<br> </td> </tr> <tr> <td valign="top">2002-Oct-27</td> <td> Very basic documentation added. Click links on left to check.<br> Basic versions of TPageBuilder, TTagInterpreter, TPBTagInterpreter and TDbIbxTagInterpreter available.<br> Two basic tools available: testtool and staticgen. </td> </tr> </table> </pb:encapsule> |
 |
 |
 |
That file is simply a handful of html code inside a big pb:encapsule tag. staticgen will collect the html code and combine with the code it loads from "basic.template" (pb:encapsule tag file). While doing that a variable called "title" (pb:encapsule parameter) will be available for in-line substitution.
That content looks familiar to you? If yes it's because that page is a old version of CGI Framework home page, hosted in sourceforge.net. CGI Framework site is completely build with staticgen, and "demosite1" is a small fraction of that site.
Now we need to have a look inside "basic.tamplate".
File: basic.template
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CGI Framework - <pb:var title/></title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <link rel="stylesheet" type="text/css" href="cgiframework.css"> </head> <body bgcolor="#ffffcc" text="#000000" link="#000099" vlink="#990099" alink="#000099"> <table cellpadding="0" cellspacing="0" border="0" width="750px"> <tr> <td valign="top" width="150"><br></td> <td valign="top" colspan="6" align="center" class="titulo enorme"> CGI Framework<br> <span class="titulo"><pb:var title/></span> </td> </tr> <tr> <td valign="top" colspan="7"><br></td> </tr> <tr> <td valign="top" width="150px" align="center"> <pb:encapsule filename="simpleBox.template" boxTitle="Basics"> <div class="item"><a href="/index.html">Home</a></div> <div class="item"><a href="/whatis.html">What is...</a></div> <div class="item"><a href="/introduction.html">Introduction</a></div> <div class="subItem"><a href="/introduction1.html">CGI Framework basics</a></div> <div class="subItem"><a href="/introduction2.html">Tag Interpreters</a></div> <div class="subItem"><a href="/introduction3.html">Specialized Tag Interpreters</a></div> <div class="item"><a href="/tutorials.html">Tutorials</a></div> <div class="subItem"><a href="/tutorial1.html">Installation</a></div> <div class="subItem"><a href="/tutorial2.html">Compiling and using staticgen</a></div> <div class="subItem"><a href="/tutorial3.html">Going interactive with testtool</a></div> <div class="subItem"><a href="/tutorial4.html">Building a simple demo site</a></div> </pb:encapsule> <br> <pb:encapsule filename="simpleBox.template" boxTitle="Docs"> <div class="item"><a href="/docs/release.html">Release notes</a></div> <br> <div class="item">Components</div> <div class="subItem"><a href="/docs/tPageBuilder.html">TPageBuilder</a></div> <div class="subItem"><a href="/docs/tTagInterpreter.html">TTagInterpreter</a></div> <div class="subItem"><a href="/docs/tPbTagInterpreter.html">TPBTagInterpreter</a></div> <div class="subItem"><a href="/docs/tDbTagInterpreter.html">TDBTagInterpreter</a></div> <div class="subItem"><a href="/docs/tDbIbxtagInterpreter.html">TDBIbxTagInterpreter</a></div> <br> <div class="item">Templates</div> <br> <div class="item">Tools</div> <div class="subItem"><a href="/docs/testtool.html">TestTool</a></div> <div class="subItem"><a href="/docs/staticgen.html">StaticGen</a></div> </pb:encapsule> <br> <pb:encapsule filename="simpleBox.template" boxTitle="Demos"> <ul> <li><br></li> </ul> </pb:encapsule> <br> <a href="http://sourceforge.net"><img src="http://sourceforge.net/sflogo.php?group_id=63596&type=4" width="125" height="37" border="0" alt="SourceForge.net Logo"></a> <br><br> <a href="http://www.brasil.gov.br/informe.htm"><img src="brasil.gif" alt="Brasil" width="106" height="75" border="0"></a><br> </td> <td valign="top" width="5px"> </td> <td valign="top" width="1px" style="background: transparent url(grayPixel.bmp) repeat scroll 50% 0%;"><img src="grayPixel.bmp"></td> <td valign="top" width="10px"> </td> <td valign="top" width="100%"> <!-- Page contents goes here... --> <pb:capsuleContent/> </td> <td valign="top" width="10px"> </td> <td valign="top" width="1px" style="background: transparent url(grayPixel.bmp) repeat scroll 50% 0%;"><img src="grayPixel.bmp"></td> </tr> <tr> <td colspan="7" valign="top"><br></td> </tr> <tr> <td colspan="7" valign="top" height="1" style="background-color: transparent; background-image: url(grayPixel.bmp); background-repeat: repeat; background-attachment: scroll;"><img src="grayPixel.bmp"></td> </tr> <tr> <td colspan="7" valign="top"><br></td> </tr> <tr> <td colspan="7" valign="top"class="texto simples pequeno">Copyleft (2002) <a href="mailto:ivancruz@users.sourceforge.net">Ivan C. Cruz</a><br> Site contents may be reproduced in all or in part since you provide a clear statement citing that site as your source.<br><br> That site was built and tested with Mozilla. If some components looks misaligned or not properly rendered, it may be your browser fault. In that case, please, consider an <a href="http://mozilla.org/releases">upgrade</a>. </td> </tr> </table> <br> <br> </body> </html> |
|
|
|
Wow!!! It's a far bigger file. Looks like most of our final page is made out of that stuff. We have the html header, page top, left menu and page bottom packed here. The only missed part is the page content itself that goes on index.template, inside the pb:encapsule tag.
In the above listing, there are some parts in red. The last one is the point where the code encapsuled on index.template will be merged. There are two occurrences of <pb:var title/>. That tags will be substituted by the value passed as parameter on the pb:encapsule tag. Please note that the "title" parameter and the <title> tag are different and independent things.
You also must take a note on tree occurrences of <pb:encapsule filename="simpleBox.template" boxTitle="..."> in the above file. That template is used to encapsule the tree blocks of menus found in the CGI Framework site pages. Lets also take a look in the simpleBox.template:
File: simpleBox.template
|
|
|
|
<table width="100%" cellpadding="2" cellspacing="0" border="1"> <tr align="center"> <td valign="top" class="texto grande invertido"><pb:var boxTitle/></td> </tr> <tr> <td valign="top" bgcolor="#33ccff" class="texto"> <pb:capsuleContent/> </td> </tr> </table> |
|
|
|
What we have here is just a table with 2 lines, the first one holds the menu title and the second, the menu itself, taken from the pb:encapsule tag contents.
After a lot of recursive processing, staticgen puts out our index.html:
File: index.html
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CGI Framework - Home</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <link rel="stylesheet" type="text/css" href="cgiframework.css"> </head> <body bgcolor="#ffffcc" text="#000000" link="#000099" vlink="#990099" alink="#000099"> <table cellpadding="0" cellspacing="0" border="0" width="750px"> <tr> <td valign="top" width="150"><br></td> <td valign="top" colspan="6" align="center" class="titulo enorme"> CGI Framework<br> <span class="titulo">Home</span> </td> </tr> <tr> <td valign="top" colspan="7"><br></td> </tr> <tr> <td valign="top" width="150px" align="center"> <table width="100%" cellpadding="2" cellspacing="0" border="1"> <tr align="center"> <td valign="top" class="texto grande invertido">Basics</td> </tr> <tr> <td valign="top" bgcolor="#33ccff" class="texto"> <div class="item"><a href="/index.html">Home</a></div> <div class="item"><a href="/whatis.html">What is...</a></div> <div class="item"><a href="/introduction.html">Introduction</a></div> <div class="subItem"><a href="/introduction1.html">CGI Framework basics</a></div> <div class="subItem"><a href="/introduction2.html">Tag Interpreters</a></div> <div class="subItem"><a href="/introduction3.html">Specialized Tag Interpreters</a></div> <div class="item"><a href="/tutorials.html">Tutorials</a></div> <div class="subItem"><a href="/tutorial1.html">Installation</a></div> <div class="subItem"><a href="/tutorial2.html">Compiling and using staticgen</a></div> <div class="subItem"><a href="/tutorial3.html">Going interactive with testtool</a></div> <div class="subItem"><a href="/tutorial4.html">Building a simple demo site</a></div> </td> </tr> </table> <br> <table width="100%" cellpadding="2" cellspacing="0" border="1"> <tr align="center"> <td valign="top" class="texto grande invertido">Docs</td> </tr> <tr> <td valign="top" bgcolor="#33ccff" class="texto"> <div class="item"><a href="/docs/release.html">Release notes</a></div> <br> <div class="item">Components</div> <div class="subItem"><a href="/docs/tPageBuilder.html">TPageBuilder</a></div> <div class="subItem"><a href="/docs/tTagInterpreter.html">TTagInterpreter</a></div> <div class="subItem"><a href="/docs/tPbTagInterpreter.html">TPBTagInterpreter</a></div> <div class="subItem"><a href="/docs/tDbTagInterpreter.html">TDBTagInterpreter</a></div> <div class="subItem"><a href="/docs/tDbIbxtagInterpreter.html">TDBIbxTagInterpreter</a></div> <br> <div class="item">Templates</div> <br> <div class="item">Tools</div> <div class="subItem"><a href="/docs/testtool.html">TestTool</a></div> <div class="subItem"><a href="/docs/staticgen.html">StaticGen</a></div> </td> </tr> </table> <br> <table width="100%" cellpadding="2" cellspacing="0" border="1"> <tr align="center"> <td valign="top" class="texto grande invertido">Demos</td> </tr> <tr> <td valign="top" bgcolor="#33ccff" class="texto"> <ul> <li><br></li> </ul> </td> </tr> </table> <br> <a href="http://sourceforge.net"><img src="http://sourceforge.net/sflogo.php?group_id=63596&type=4" width="125" height="37" border="0" alt="SourceForge.net Logo"></a> <br><br> <a href="http://www.brasil.gov.br/informe.htm"><img src="brasil.gif" alt="Brasil" width="106" height="75" border="0"></a><br> </td> <td valign="top" width="5px"> </td> <td valign="top" width="1px" style="background: transparent url(grayPixel.bmp) repeat scroll 50% 0%;"><img src="grayPixel.bmp"></td> <td valign="top" width="10px"> </td> <td valign="top" width="100%"> <!-- Page contents goes here... --> <p align="center"><img src="cgiframework.png"></p> <br><br> <p class="titulo grande">Site news</p> <table cellpadding="5" cellspacing="0" border="0" width="100%"> <tr> <td valign="top">2002-Nov-28</td> <td> Many new and revised documentation.<br> Feature freeze on components and tools.<br> Preparing for first alpha release. </td> </tr> <tr> <td valign="top">2002-Nov-03</td> <td> CVS update. News tags added (specially pb:encapsule). Bug fixes.<br> </td> </tr> <tr> <td valign="top">2002-Oct-27</td> <td> Very basic documentation added. Click links on left to check.<br> Basic versions of TPageBuilder, TTagInterpreter, TPBTagInterpreter and TDbIbxTagInterpreter available.<br> Two basic tools available: testtool and staticgen. </td> </tr> </table> </td> <td valign="top" width="10px"> </td> <td valign="top" width="1px" style="background: transparent url(grayPixel.bmp) repeat scroll 50% 0%;"><img src="grayPixel.bmp"></td> </tr> <tr> <td colspan="7" valign="top"><br></td> </tr> <tr> <td colspan="7" valign="top" height="1" style="background-color: transparent; background-image: url(grayPixel.bmp); background-repeat: repeat; background-attachment: scroll;"><img src="grayPixel.bmp"></td> </tr> <tr> <td colspan="7" valign="top"><br></td> </tr> <tr> <td colspan="7" valign="top"class="texto simples pequeno">Copyleft (2002) <a href="mailto:ivancruz@users.sourceforge.net">Ivan C. Cruz</a><br> Site contents may be reproduced in all or in part since you provide a clear statement citing that site as your source.<br><br> That site was built and tested with Mozilla. If some components looks misaligned or not properly rendered, it may be your browser fault. In that case, please, consider an <a href="http://mozilla.org/releases">upgrade</a>. </td> </tr> </table> <br> <br> </body> </html> |
|
|
|
The colors are used to identify the code source. On blue, we have code from "basic.template", on red from "simpleBox.template" and on green, from "index.template".
In that example you can understand "basic.template" and "simpleBox.template" as html black boxes. You can deeply change the way that modules are coded without touching "index.template". By changing "simpleBox.template" the menus will change but the remaining page will be the same. Changing "basic.template" all the page may be changed. For example, you can make the menus open on the right side.
Let's demonstrate that by changing simpleBox.template to that code (you may want to save the old template before changing it):
File: simpleBox.template (changed)
|
|
|
|
<fieldset style="background-color: rgb(200, 220, 240); display:
inline; border: 2px solid black; margin-left: 10px; padding: 10px;"> <legend style="background-color:rgb(180, 200, 220); border: 1px solid gray; padding: 0px;" align=left> <pb:var boxTitle/> </legend> <pb:capsuleContent/> </fieldset> |
|
|
|
Save the previously generated index.html and generate it again. Compare both results.
Well, maybe the second version looks somewhat weird. No mater. You got it. All that blah, blah, blah is to show CGI Framework can make site customization a realy realy realy easy task.
You can now test the "generate" script include on "demosite1". That script simple builds all the pages available on the demo. Looking at those templates you will learn they all have the same structure, just the content changes.
Site contents may be reproduced in all or in part since you provide a clear statement citing that site as your source.
That site was built and tested with Mozilla. If some components looks misalligned or not properly rendered, it may be your browser fault. In that case, please, consider an upgrade.