Develop

Develop

Now we will discuss how to make a new IW17 application.

Installed for Development?

If you haven’t installed for development already, you will need to do that before proceeding.

Create an IWML File

IWML drag and drop designers will be available as standalone, web based, and also built in to the Delphi IDE. They are not ready yet however and currently you need to create the IWML files by hand. One of the sample demos is called Fiddler which can be used to test your IWML.

Fiddler is very basic at this point, but will be expanded to be far more powerful (and pretty). Fiddler is available at:

http://127.0.0.1/IW17/Apps/Fiddler/

Simplest IWML File

The most bare IWML file with a single text control is shown here:

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

Let’s break it down line by line.

Every IWML file must start with this header line. It should appear exactly as shown below, and should not be changed.

ACORN 1.0 IWML 1.0
...

Next is the Page tag and its closing bracket. All blocks use ] for their closing marker.

ACORN 1.0 IWML 1.0
Page
  ...
]

Next is the Root[] tag. Root is as property of Page, and Page has other properties for setting initial focus, title and more. [] specifies that instead of properties, other classes are inside the block as a list. Root is the property of the page that lists the controls on the page.

Items are indented for readability. IWML does not require it.

ACORN 1.0 IWML 1.0
Page
  Root[]
    ...
  ]
]

Root[] despite being an array is meant to only have one control. There are special exceptions, but in general only put one tag inside it.

Page needs more than one control obviously though. Thus in Page.Root[] we always put a layout control. Layout controls can contain many controls. Layouts are expandable, but include common things such as a XY, Stacks, Panels, Lists and more. Typically if a control can have child controls, then it is probably a layout control.

One of the simplest layouts is SimpleStack. It simply stacks controls vertically on top of each other. For example a SimpleStack with text controls containing “One” and “Two” would be displayed as:

One
Two

ACORN 1.0 IWML 1.0
Page
  Root[]
    SimpleStack[]
      ...
    ]
  ]
]

We are almost there. We have a valid IWML file already, but it would only display a blank page. To add content, we add controls to the SimpleStack’s list. In this case we will add a single text control.

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

We have used the standard base HTML file to load our IWML file. In the browser it looks like this:

Adding Code

So far we have only displayed static content. Let’s add some code to our IWML file so that we can actually do something rather than simply display something.

Time To Sleep

Ok, I got tired here. Will continue again soon. Good night!

Further Information

For further information, refer to the main development topic.


Page vs code
Code behind
page events
control events