Layouts

Previously in the Hello World example we only displayed a simple message.

Working with Pages

From the IDE there are two ways to modify pages.

Designer Tree

At first it might seem that the designer tree is the preferred way to work with your page as it is visual. For some tasks it is easier, especially when working with properties and events. To make modifications, simply select a control and use the object inspector or right click to add/remove/move controls.

IWML Editor

We fully understand that the initial thought of working with text to modify your page is “yuck! This is RAD and Delphi!”. However IWML is not like HTML, XML, JSON or DFM files. IWML is designed to be compact and easily hand written. Hand coding IWML should be no scarier than creating a method in Delphi code. Just like Delphi we choose what is best for each task – sometimes that is in the designer and sometimes its altering the code by hand.

IWML editing is integrated into the designer and performs two way synchronization between the designer tree and the IWML editor. To edit your page with the IWML editor, click here:

After clicking the IWML button the following will appear:

The same as in the main designer window, we have immediate access to preview. This allows very fast testing without needing to close the IWML dialog to test each change.

Using IWML

From here forward in this tutorial we will present IWML as plain text. The IWML for our current application is as follows:

ACORN 1.0 IWML 1.0
TUnit1:Unit1
  Cells[]
    Text Hello World!
  ]
]

IWML is a plain text format, but has one special requirement that must be taken care of. IWML parses using indentation. That is, indentation matters and is part of the parsing process. Indentation must be done using spaces, and not tabs. Indentation must always be 2 space characters.

If you do not follow the indentation rules properly, there will be IWML parsing errors. Use of indentation greatly simplifies the visual textual representation and reduces the verbosity. Some languages such as Python also use indentation as part of their syntax.

As we proceed in this tutorial we will be making a lot of changes to the page. It would be very tedious for us to instruct you to add/remove/move/modify each control in the designer, or even the upcoming WYSIWYG visual designer. Thus as we proceed in this tutorial and other documentation topics we will simply present you with the IWML. We expect that you can remember how to access the IWML editor. Copying and pasting the IWML into the IWML editor is the simplest and fastest way to modify our application as we go. It will also expose you to IWML and allow you to learn how it works naturally and progressively.

After each IWML edit, feel free to explore or make modifications using the designer tree and object inspector as it will be synchronized back and forth automatically for you. We will continue to expand on IWML throughout this tutorial. If you want to dive deeper into it you can return later to the IWML tutorial.

More Controls

In this example we have a single text control as the only control of the Page. 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.

Change the IWML for our page to the following:

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

We have highlighted the changes and will do so throughout the tutorial. These highlights are not part of the IWML and when pasting IWML, only the plain text is to be used.

If we press as preview button:

From now one we will not show the IWML editor unless necessary. When the IWML must be altered from sample IWML in this tutorial you will be expected to perform these steps on your own.

If we close the preview and click OK, the designer tree will be updated:

IWML and DFM Files

For IntraWeb 17, IWML is the core of everything. IWML is what is sent to the browser and the IWCL in the browser renders the HTML from the IWML. Changing what the designer uses to store pages would require significant work, so as a practicality pages are still stored as DFM files. At run time the DFM files are read into memory. After your code updates the controls, the pages are then written out as IWML. This is a highly efficient process and similar to how IntraWeb 15 functions except that IWML is rendered instead of HTML.

Conclusion

Now let’s add some more controls.