|
|
Web Authoring Examples |
|
See Also: |
Example files for this topic can be found in
Program
Files\APGen\Examples\Aut_Auth\CommCont\
To make your web sites easier to maintain, move any or all of the following into APG scripts: Common page layout code, common headers and footers, common text blocks, and common script procedures. This common content can be reused throughout the entire site.
Standard server-side and client-side include files allow reuse. Include files are limited to reusing text, including HTML, server code, and client code. APGen is a much more flexible solution: It enables programmable reuse and customization of content.
In this example, we will isolate layout HTML from page content. That way, to change the layout/appearance of multiple pages on the site, we only have to change the layout file.
To begin, we need to design a web page layout that will be used for multiple pages. This page contains HTML layout code but does not contain useful content. We used our favorite HTML editor to write the web page template.htm, which looks like this:
You can view the source HTML for this file in the Examples\Aut_Auth\CommCont\ directory. The code was written to be viewed by all 3.0 and 4.0 browsers. You will notice that we did use the HTML STYLE (CSS) tag, which is not implemented in Netscape 3.0. However, the STYLE tag is only used to set the font for the page. The page can still be viewed in Netscape 3.0, but it will not look as nice as viewing the code in newer browsers.
The next step is to separate the layout HTML into APG script procedures. To begin, we will write a RenderNavBar procedure. This is a very basic procedure. Currently there is no navbar text (we use "NavBar" as a place holder), but we will change this when we get to NavBars and Menus.
'
' RenderNavBar
'
' Writes navbar content and formatting
'
Sub RenderNavBar
#%>
<B>NavBar</B>
<%#
End Sub
RenderNavBar and the other procedures can be found in file template.apg.
Next, we are going to separate the template HTML into two pieces: The first piece occurs before the main page text, and the second piece occurs after the main page text. In the template.htm file, the main page text is "Body Text". This is a placeholder. Each piece is put into a procedure.
<%#
...
'
' RenderPreContent
'
' Writes page formatting HTML that occurs before
' the main page content.
' Parameter is page title and header
'
Sub RenderPreContent(strTitle)
#%><!DOCTYPE html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE><%# =strTitle #%></TITLE>
<STYLE>
body {font-size: x-small; font-family: Verdana, Arial, Helvetica}
table {font-size: x-small}
</STYLE>
</HEAD>
<BODY>
<CENTER>
<TABLE height="100%" width="700" border="6" bordercolor="black" cellspacing="0" cellpadding="0">
<TR>
<TD width="150" valign="top" bgcolor="#999966">
<TABLE width="150" border="0" cellspacing="0" cellpadding="15">
<TR>
<TD align="center">
<IMG alt="(?)" border="0" height="67" src="img/Trfaq.gif" width="74">
</TD>
</TR>
<TR>
<TD>
<%#
RenderNavBar
#%>
</TD>
</TR>
</TABLE>
</TD>
<TD width="550" valign="top">
<TABLE width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<TR>
<TD bgcolor="#cc9900" height="20">
<TABLE width="100%" border="0" cellspacing="0" cellpadding="15">
<TR>
<TD valign="middle">
<FONT size="6" color="white">
<B><%# =strTitle #%></B>
</FONT>
</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD valign="top">
<TABLE width="100%" border="0" cellspacing="0" cellpadding="15">
<TR>
<TD>
<%#
End Sub
'
' RenderPostContent
'
' Writes page formatting HTML that occurs before
' the main page content.
'
Sub RenderPostContent
#%> </TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE></CENTER>
</BODY>
</HTML>
<%#
End Sub
#%>
Since we previously placed the navbar text in the RenderNavBar routine, RenderPreContent calls RenderNavBar in the appropriate place.
Now that we have put the standard template HTML into procedures, let's write an example web page that uses these procedures. We will begin by writing a "Hello Word" page. Here are the contents of Hello.apg:
<!-- #include apg="template.apg" -->
<%#
RenderPreContent "Hello World!"
#%>
Hello World Body Text
<%#
RenderPostContent
#%>
If you run the Hello.apg script (by double-clicking the script), you will generate the file Hello.htm. This is what the file looks like when it is viewed in the browser:
"Hello World" is a contrived example (as it always is). We also wrote a few "real" web pages with "real" page content, taken from the Log object documentation. You can review and run the objlog.apg, logfile.apg, and logwrite.apg scripts. These scripts generate files objlog.htm, logfilename.htm, and logwrite.htm, respectively. They are similar to hello.apg, but they contain "real" content.
Since we have just written a shared script and several page scripts, let's define the two terms. These two terms are used in later discussion:
In this example, we have moved the common formatting HTML into a shared script, and kept the individual page content in page scripts. If you use these guidelines, web sites will be easier to create and maintain:
In the previous examples, we used the default output filenames, because we did not explicitly set a value for the Output.Filenameproperty. For example, the default output filename for APG script logfile.apg is logfile.htm. That's the filename we want, so we don't have to explicitly set the Output.Filename property.
The default output directory is the directory containing the APG script. For example, if APG script logfile.apg is in the C:\Program Files\APGen\Examples\Aut_Auth\CommCont directory, then that is the default directory for logfile.htm.
Generally you will want to place the output files in their own directory. From this directory, the files will be posted to or accessed by a web server. If you want to write all the output files to a subdirectory named "Output", then you can use the following code:
' Send output file to a subdirectory named Output
Output.Dir = "Output"
' If the output subdirectory doesn't exist, create it
Output.CanCreateDirs =
True
If you want to post the generated files to your web server directory, then you can use the following code:
Output.Dir = "C:\Inetpub\wwwroot\Output\"
If you want all of the output pages to be sent to a single directory, then every page must execute this code.
We focus on build scripts and programmatic execution in the Site Builds topic. When we get to that topic, we'll demonstrate an easier way to specify the output directory for all APG scripts.
Continue with Part 2: NavBars and Menus ...