Example Run

The following example demonstrates how to build for a given problem a document structure using DIL and a matching style sheet using DCL.

Task

Create a layout for these links:

Document Structure in DIL

A DIL script to represent this simple document could look as follows.

<document width="800" height="600">
<sequence>

<link target="http://www.dfki.de/~kroener/whatsnew.htm" name="What's new ?">
<link target="http://www.dfki.de/~kroener/raytrace.htm" name="Raytracing">
<link target="http://www.dfki.de/~kroener/mod.htm" name="Modules">
<link target="http://www.dfki.de/~kroener/wc2.htm" name="WarCraft">

</sequence>
</document>

We define a document, which contains a sequence of links. Arguments for our document are some size bounds, and for the links their individual name and target.

Layout knowledge in DCL

Assumed we have no matching knowledge base, we will create a new one in a next step. Looking at the input, for a complete representation we need the commands described below:

design document(math width,math height){
	pattern first:
		wMax = width;
		hMax = height;
		constraints = vOrdering;
		container = PageObj();
	{}
}

document builds up a simple frame based document a maximum width and height given as arguments.

design sequence(){
	pattern first:
		constraints = vOrdering;
	{}
	pattern second:
		constraints = hOrdering;
	{}
}

sequence is a simple collector for other objects. It has two design patterns: one supports a vertical ordering of derived objects, another supports horizontal ordering. Note that specifying an ordering means an implicit reference to a topological constraint stored in the DesignComposer's default knowledge base.

design link(string target,string name){
	pattern first:
		container = LinkObj(target);
		constraints = hOrdering;
	{
		<itemize/>
		<text data=name/>
	}
}

link is a simple representation for a link: just show a button and the text given as argument.

design itemize() {
	pattern big:
	{
		<imageObj src="../htmldata/arrows/akaro1.gif"/>
	}
	pattern small:
	{
		<imageObj src="../htmldata/balls/akball1.gif"/>
	}
}

itemize uses a simple image to itemize another object. Please note that this command is not part of the DIL input, but it is required by our new defined command link.

Result

Using these files as input, the DesignComposer creates the result shown below:

example result with vertical ordering

HTML Output (IE 4.x)

The dimensions specified in the DIL script (800x600) allow the use of a vertical ordering and large images; no search is done. Changing dimensions may force a change in layout:

example result with horizontal ordering

HTML Output (IE 4.x)

Here search has been done to adapt the layout to the new dimensions: the sequences ordering has changed to horizontally, the buttons are now small.