Version 6.3.3
 —  Natural for Ajax  —

Getting Started with the Layout Painter

The Layout Painter, which can be accessed from the development workplace, is used to write the page layout. This is an Application Designer application itself.

This document contains the following exercises:


Creating a New Layout

You will now create a layout which is stored in the project you have previously created.

Start of instruction setTo choose a layout template

  1. Choose the button for the project cisnatfirst.

    The list of layout nodes inside the tree will be empty at the beginning:

    Project nodes

  2. Choose New Layout... in the tree.

    The following dialog appears.

    New layout

  3. Enter "helloworld.xml" in the Name field.

    This is the name of your layout definition.

  4. Select the Natural Page tab at the bottom of the dialog.

    New layout

  5. Select the template for the Natural page (when you move the mouse over this template, the tool tip "Natural Page" appears).

    The main screen of the Layout Painter appears:

    Layout

    Note:
    The file helloworld.xml is stored in the /xml directory of your project.

Top of page

Elements of the Layout Painter Screen

The Layout Painter screen is divided into several areas:

Top of page

Previewing the Layout

The layout tree inside the Layout Painter already contains some nodes that were copied from the template that you chose in the dialog in which you specified the name of the page. To see what the page looks like, preview the layout as described below.

Caution:
If you use your browser's refresh function (F5 in Internet Explorer), the development workspace is reloaded and your latest unsaved changes are lost.

Start of instruction setTo preview the layout

Top of page

Viewing the XML Code

When creating the layout, you can view the currently defined XML code.

Start of instruction setTo view the XML code

You can now proceed with the next exercise: Writing the GUI Layout.

Top of page