An Example Contract. We are now in a position to fully understand the example contract shown in Figure 2. Assume that we as a part of a Web service want to produce an HTML page with an inventory of products and a form where a product and a quantity can be selected. Our example contract describes such a page. The Wrapper template is intended as the outermost template, Main corresponds to the body of the page, Inventory represents the product inventory, Product represents a single product, and Selection is the form. The contract declarations for this page are placed in a directory shop/inventory below the contract root directory. Note that the items loop in Product permits an inventory to contain any number of products, similar to the use of the list construction idiom explained in Section 3. Also, we want to be able to reuse the Wrapper template for many different pages to obtain a coherent style, although we only consider one single page in this example. The MainPage page declaration combines the templates using Wrapper as entry point and adding an edge from its body gap to the Main template. Other pages using the Wrapper template would simply add different edges to this gap in their page declarations. The HTML designer can now create the XML template constants. The following tem- plates illustrate one possible design: shop/inventory/Wrapper.xml: <html> <head><title><[title]></title></head> <body><[body]></body> </html> shop/inventory/Main.xml: <h1>Inventory</h1> <[inventory]> <p/> <[buyform]> shop/inventory/Inventory.xml: <table border="1"> <tr> <th>Name</th> <th>Price</th> </tr> <[items]> </table> shop/inventory/Product.xml: <tr> <td><[productname]></td> <td align="right">$<[price]></td> </tr> <[items]> shop/inventory/Selection.xml: <form> Product: <input name="product"/> <br/> Quantity: <input name="quantity"/> <br/> <input type="submit" value="Buy!"/> </form> These files are placed in the directory shop/inventory below the template root directory. In this design, the inventory is shown as a table with a header and one row for each product. The JWIG system will fill in the action attribute for the form element. The result is shown in the first image in Figure 4. The designer can change the design by modifying the template constants. For example, the inventory can be shown as an itemized list instead, simply by replacing the Inventory and Product templates, without involving the programmer at all: shop/inventory/Inventory.xml: <ul> <[items]> </ul> shop/inventory/Product.xml:...
