Templates

Home  »  Templates

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 need to make some modifications to our IWML. Note that in this example several items have been removed or moved and we cannot easily show every item as we have in the past. In this example we highlight major points of interest but not every change. Please copy and paste the entire IWML when you modify Index.iwml:

ACORN 1.0 IWML 1.0
Guess.Index
  FocusControl: GuessEdit
  ActionControl: GuessButton
  Cells[]
    Template[] IndexTemplate.html
      Edit:GuessEdit =this.Guess
      Text:CountText =this.Count
      BS.Button:GuessButton
        Text: Guess
        Face: Info
        ButtonSize: Large
      ]

      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?
        ]
      ]

      Alert.Notification:MsgBox
        Title: Guess Demo
        AlertType: success
      ]
    ]
  ]
]

We have removed the StackPanel which served as our root layout and replaced it with a Template layout control along with some other minor changes. As a parameter to our Template tag we have specified IndexTemplate.html. This tells the Template control to use an external HTML template for our layout. Template data can also be HTML inside the IWML by using the HTML property instead of the URL property (which is done via the parameter in our example).

In the same directory as Index.iwml, create IndexTemplate.html with the following 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>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 IndexTemplate.html as a parameter. When a template tag has no URL or HTML property value, it will look to the contents of the body tag (or target if specified) of the loader HTML.