5. What's in a website? Design!

Now you know that the design of the inner part of each page is determined by the CM modules which the author composes for the page. But what about the whole rest?

Now it's time again to inspect the design directory we created in the first part of this tutorial in developer studio. Let's have a look at the directory structure that was created inside the "designs" folder of your runtime project:

There are three main folders inside it which I'm going to explain briefly:

• The system folder is a folder where the configurarion of the design is stored. You seldomly work manually inside it.
• The labels_* folder hold text chunks of your website design which need to be available in multiple languages. Therefor the different suffixes "de" and "en".
• The images folder is meant to hold any image file that you want to display in your website. Unlike the other two subfolders this folder name has no special meaning to OpenWGA. You could just add other folders with other names below "files" and use them as image folders or for any other file types you use in your design.
  

The folder "scripts" holds script code of various types which may be used by the website. Those types have separate subfolders. Some of these are quite obsolete these days ("vbs"!). Folder "css" could hold cascading style sheets files, but the BWK does not use it. The same with folder "js" and JavaScript. Both code types are stored "elsewhere" as we will see later.

Files inside these folders are called "script modules". So if you ever need to create something inside these hit the "New..." button and select "WGA script module".

The only module available here from the start is the file "tmlscript/connect.tmlscript". TMLScript is a scripting language, actually JavaScript, but running on the server and having different "host objects" than in a browser. This script runs every time OpenWGA starts your web application but is currently empty. Don't bother about it now, chances are you never need to edit it.

Well, actually the bottom line about the "scripts" folder for now is: Don't bother :-)

To something more interesting: The folder "tml". It holds the actual design that makes up your site, at least the part that is not predefined by the kit. 

Its subfolders each hold a different type of design code. Let's start with the "html" subfolder.

Here you find individual files suffixed ".tml" for individual parts of the website. So if you ever want to change the HTML code that your site is made of you need to find the file where it is defined and change it there.

Wonder why the suffix is ".tml" not ".html"? Because they are named by the CMS templating language that is used in this module which is called WebTML. It is often abbreviated to "tml", therefor the suffix.

6. The actual website code. (Or: The most brief WebTML introduction you will ever see)

Have a look inside the code of one of those modules. Let's take "layout/header.tml":

The code of WebTML modules, like these files are called, mostly is made up of a mixture of HTML code, simply going to the output and WebTML code, which are all those tags beginning with "<tml:". These are resolved when OpenWGA renders the page and provide any automatic functionalities. They never reach the browser. You might know tags like these if you're familiar with PHP, ColdFusion and similar technologies.

Because of this mixed server/client code tends to be confusing on the first look. So if you do not plan to alter the HTML code of the site for now you might want to skip this section as this information is not essential for your first steps.

The module "header.tml" contains the code that is put out in the header section of the page. We already edited it in part 1 of this tutorial by replacing the website title with something more beefy.

There is a WebTML tag directly at the beginning. <tml:include> is used to include the code of another WebTML module at the place of the tag. The attribute "ref" declares the module that is included. You see a name plus a suffix "@base". This suffix tells OpenWGA to load the module from the basic website kit. So "header@base" (builds basic header structure), "langnav@base" (puts out language change links) and "servicenav@base" (builds the navigator on the top right of each page) are not part of your design. They are predefined designs from the kit.

All WebTML tags have straight XML syntax. This mainly means that there either is start and end tag or the tag denotes that it is "alone" by having a slash before the closing ">". Like this: <tml:anytag/>.

In this code <tml:include> is used in both ways. The first include <tml:include ref="header@base"> has an end tag </tml:include> at the end of the code. Everything between start and end tag is regarded as being in the "tag content". The <tml:include> tags on lines 9 and 10 end with "/>" so they are empty.

So why do some includes have tag content? The tag content is given to the included module as some kind of parameter called a "WebTML option". This means that the module can itself work with whatever is given to it inside the tag content.

Many of the built-in kit designs put out the code, that is passed to them as tag content, at some appropriate place. The design "header@base" for example builds the basic structure of the website header. Inside this header structure it puts out anything that it has received as WebTML option. So by changing the contents of the include tag you change what is put out inside the header.

Why is all this in your design and not predefined? Because at one time you might want to replace the default header structure of the kit with something you built. Then you will be able to just remove the include of "header@base" and write whatever you want to have. By this kit designs (almost) always have the option to use what is predefined by the kit or redefine it in a custom way.

Besides the <tml:include> tag there are a lot of other WebTML tags which serve different functionalities. On this design you see the <tml:url> tag which automatically generates URLs to all resources published by OpenWGA. Here it generates a URL to the homepage of the site.

Well, this is a lot information about something you might not want to change for a long time to come. And explaining WebTML in all detail is certainly beyond the scope of this tutorial. However knowing those thinks you should have the basic knowledge to understand the structure of the WebTML modules from your design and be able to at least modify the HTML part of it. For everything going further you might want to consult the WebTML part of our concepts and features guide, or the WebTML reference.