Templates

So far we have focused mostly on function rather than form. To make your application look visually appealing normally a HTML template is used via the template control. The template control can be nested, allows multiple templates per page and more. In this tutorial we will show a single template that covers the entire page.

We will only introduce templates in this topic. Delphi has additional support for templates beyond what the IWML template control offers. This additional Delphi functionality is documented here.

Template Layout

First we need to change the type of layout used in our page. We need to change this SimpleStack to a Template control.

In the future it will be possible to change a control type from the design tree, but currently the easiest way by far to do this is to edit the IWML. For reasons of brevity, we have not included the whole IWML and highlighted some but not all the changes. Be sure to alter only the content within Cells[]:

Cells[]
  Template[]
    Edit:GuessEdit;
    Text:MsgText;
    Text:CountText;
    BS.Button:GuessButton
      ServerEvents:
        Click
      ]
      Text: Guess
    ]
    JQUI.AccordionGroup[]:Accordions
      JQUI.Accordion[] Instructions
        Text Enter a number and click [b:Guess].
      ]
      JQUI.Accordion[] About
        Text Where would we be without the Guess demo?
      ]
    ]
  ]
]

We have also moved some controls out of an accordion and into the Template control. After changing the layout control, the design tree should look like this:

Template HTML

Template data can also be HTML inside the IWML by using the HTML property, or referenced using the URL property. In this example we will use some extra functionality provided in the Delphi version of IntraWeb.

In the same template directory we used in the previous section, create a file named Unit1.html with these contents:

<html>
<head></head>
<body>
  <H1>Guess Demo</H1>
  <p>Welcome to our Guess Demo. Can you guess the number I'm thinking of?</p>
  <p>Please make a guess here {%GuessEdit%}</p>
  <p>{%GuessButton%}</p>
  <p>{%MsgText%}</p> 
  <p>You have tried {%CountText%} times.</p>
  <p></p>
  <p>{%Accordions%}</p>
</body>
</html>

Now our demo will use this HTML for the layout of its controls. The {%control name%} tag syntax is used to specify where we want our controls to be.

Note that we can specify individual controls, or a group of controls by using another layout control as we did with {%Accordions%}. Only text inside the body tag is used. If attributes are needed on the body tag, or information from the header, then such info should be placed in the HTML loader instead.

Run

Loader HTML

Note that even though we have specified a template, the final output is still mixed with our _Loader.html which also provides some additional layout.

If the loader HTML is only used for a single page, the template can be specified in the body tag of the loader HTML file instead. In such a case, remove the Unit1.html file. When a template tag has no URL property value, no HTML property value, and no template file, it will look to the contents of the body tag (or target if specified) of the loader HTML.

Conclusion

Next up is a really useful feature although the name may not sound exciting – Page Properties.