Forward Logo (image)       WebStringTemplates
      Previous Back Back Back Next

 
WebStringTemplates for the Web Page Designer

Your First Web Page

Now that you have Java Runtime Environment V1.4 installed and have successfully run RunWST, you are ready to write your first web page using the data interface specified in bookstore.data.html. Copy this file from the manual/completedExamples sub-directory to the directory containing the RunWST jar file.

This page will cover:-
The Data Attribute Tree display
Accessing the Data via the Data Attribute Names
Data Comments
Missing Data
Errors
The Completed Front Page

The Data Attribute Tree display

Using bookstore.data.html as an example data definition file, let's create a template to display this data. As your first attempt, just create an empty web page and save it as template.st.html. The .st.html is important as RunWST, expects the template name to end in .st.html. RunWST copies it to the template.st file for processing.

Now run RunWST using the command line

java -jar RunWST-1.5.jar bookstore

This will look for the template bookstore.st.html and the data definition file bookstore.data.html and will produce the web page file output.html. Your template file is empty for now so the output file will also be empty, but RunWST displays the Data Interface Definition in a tree diagram.

If you get an error message saying bookstore.data.html cannot be loaded, check that you have copied it from the manual/completedExamples sub-directory.

Bookstore Data Tree

(If you are interested in the format of the Data Interface Definition file itself, it is a definition list. A full description is available here but usually the most you will want to do is change some data from "true" to "false" to test your page.)

Accessing the Data via the Data Attribute Names

The data in the Data Interface Definition file is referenced by attribute names, shown in bold above. The above tree display is like your computer's file system, to open or close a sub-branch, click once on the handle or double click on the folder icon . Your template can reference the data by the folder path it is in, by putting a '.' (dot) between each folder name in the path. For example the path to the book title shown above is book.title.

Note: Paths are case sensitive. Book.title is not the same as book.title

In your template you use $[   ]$ to bracket data paths (and other template commands). So without closing the tree window or stopping the RunWST command, open your empty bookstore.st.html template and insert
$[book.title]$
anywhere in the body and then save the file. Every 2 seconds RunWST updates the output.html file with the latest data and template so if you open,or refresh, the output.html file in your browser you should see

WebStringTemplates for All

Congratulations you have just written your first WebStringTemplate.

What about the blank tab just below book? The contents of this tab shows you the sample data that would be returned by a template reference of
$[book]$   (Note there is no dot ('.') at the end of book)

If an intermediate path does not have a blank tab below it, then the text returned by that intermediate path is indeterminate (unspecified). You cannot tell what text will be returned and so you should not use that path as a reference to insert text into your web page. When your web page template is deployed on the server, often such intermediate paths return low level debugging strings from the server code. You can only safely use intermediate paths, like $[book]$ if the Data Interface Definition specifies some sample data.

Data Comments

As you can see from the Data Interface Definition file and the tree display, there is some comment data. For example the book.comment shown above. These comments cannot be accessed from your template, in fact any attribute name which includes a '.' in the name cannot be accessed from the template. The comments are just there to assist you in using the data.

Missing Data

What happens if you try and access some data that does not exist? WebStringTemplates returns the data path enclosed in $[ ]$. (This error return can be supressed when WebStringTemplates is deployed on the web server.)

Try it now. Edit the bookstore.st.html file and insert

$[book.titleName]$

RunWST updates your output page, so just refresh it in your browser and you will see

$[book.titleName]$

When you have finished your design, search the output text for $[   This will quickly find any missing data errors in you work.

Errors

If there are any errors, either in the Data Interface Definition file format or in your template statements, then the output page will display an error message instead of the processed template output.

RunWST Error Page

The example above shows the error message you will get if you leave the ]$ off the end of $[book.title

The Completed Front Page

Following the information in the comments and using the data provided by the interface, you can now design the front page for the bookstore. You will need to copy the manual/completedExamples/images/forwardSmaller.gif to an images sub-directory.

Shown below is my simple example template page, bookstore.st.html (the text version is bookstore.st.html.txt) and the resulting front page bookstoreFrontPage.html.

bookstore.st.html

Bookstore Front Page

As you can see, even the template, bookstore.st.html, tells you quite a lot about how the page will look. It is the look you are designing. You should not be too concerned about the actual data.

On the next page you find out how to handle variable length lists of data.


Forward Logo (image)       WebStringTemplates
      Previous Back Back Back Next

Contact Forward Computing and Control by
©Copyright 2004 Forward Computing and Control Pty. Ltd. ACN 003 669 994