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:
Special Note!
IWML has been updated to allow a more compact syntax. The longer syntax is still supported, however by default the newer syntax will be seen when you use Delphi.
Most noticeably you will notice that Cells[] and ] to close blocks are no longer required but are still permitted.
This tutorial has not been updated yet although all the IWML examples are still valid as is. When using the IWML button in Delphi however, the IWML will be generated in the compact form. For more details, please see the IWML tutorial.
Back to IWML…
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:
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.