Website Composition Example - Demo
Consider the case of defining a dynamic area in your page. This page consists of a list of tab-like links and simple texts or images, called snippets. Using HTML and other web technologies does not explain the semantics behind this area adequately, and it is hard to extend. We developed a small configuration language, called HTCL, to define such simple snippets.
The following code is everything that is needed to define a snippet. The expression gives the snippet a name, here overview
, and then uses the plainpicture
template. In the template, we specify the file, the title, and the alignment of the picture. This is all we need:
overview = plainpicture({
file: "images/test/intro.jpg",
text: "HTCL processes template html pages, combines them, and [...]",
align: 'left'
})
Likewise, we use such expressions to define snippets for architecture
and a contact
. Finally we put all snippets together in the following mainpage
construct. As can be seen, this construct defines two areas on a page: (i) a menu appearing on the top, and a content area that displays the snippets.
start = mainpage({
content: {url: home, named: "content"},
menu:[
{ title: "Overview",
onclick: open({url: overview, into: "content"}) },
{ title: "Architecture",
onclick: open({url: architecture, into: "content"}) },
{ title: "Contact",
onclick: open({url: contact, into: "content"}) }
]
})
Using HTCL
From the constructs as used above, the following web page will be rendered:
Homepage // Motivation // Our Services // Examples // Design Tools // Contact
© Copyright 2011, Sebastian Günther & Thomas Cleenewerck, Software Languages Lab, All rights reserved
![](../../media/images/varibru_cl.png)