Layouts

Previously in the Hello World example we only displayed a simple message. We have already chosen a URL of 127.0.0.1/HelloWorld/ for demonstration purposes. Despite moving beyond Hello World, for simplicity we will continue to use the same URL and simply modify our files as we proceed.

If you want to rename the URL to something else you can, but you will need to adjust the URL to your new URL from the rest of this tutorial’s directions.

More Controls

In a real world application we need more than one control. In Hello World we used a single Text control:

ACORN 1.0 IWML 1.0
Page[]
  Text Hello World
]

This is an almost minimal IWML file. The only way to make it more minimal is to have a blank page which is not useful. Control names as IWML tags are not case sensitive, so we can use text interchangeably with Text or other variants. In our samples we typically proper case them simply for added readability and personal preference.

In this example we have text as the only control of the root Page control. Page is a special control and is the root of all IWML files. A page can have only one control. Although a Page control can only have a single control, that control can be a layout. Layouts act as containers and can hold multiple controls. Layouts can also be nested and are themselves controls. Some controls can also act as containers, such as Button.

SimpleStack

We need to choose a layout. A layout is not a single control, but a type of control. A layout can be thought of like a panel or a container. IntraWeb contains many built in layouts, but also supports layouts from Bootstrap and others.

To avoid introducing complexity at this stage we are going to use one of the simplest layouts, a SimpleStack. A SimpleStack provides very minimal layout functionality and simply stacks each control one on top of each other vertically.

Edit Index.iwml as shown below:

ACORN 1.0 IWML 1.0
Page[]
  SimpleStack[]
    Text Hello
    Text World
  ]
]

Now if you run the application you will see:

Note that the URLs displayed in our screenshots from here forward will differ from the URL we are using in this tutorial. This is because our internal developer set up is a little different than what end users use. Please continue to use the URL used previously and not the URLs in our screenshots.

Now let’s add some more controls.