Creating a Layout

In this section, you create an application user interface that includes layout components to arrange the subcomponents. For all components, position information can be defined in two ways:

• Absolute positioning, with integer values for top, left, height, and width
• Relative positioning, using either a percentage of available space or by arranging components in sequence from top left to bottom right

This tutorial demonstrates both methods of positioning components.

Now that you've created your project, a default GUI component file, appCanvas.xml, is open in a tab in the work area. The Component Libraries palette displays folders containing prototype components that can be added to the current component. The Component Hierarchy palette shows the hierarchical view of components in the GUI component file. Note that block, the default root component, is created automatically when you create a project.

To avoid unexpected layout behavior in deployed applications, it's recommended to use Block as a container only if it meets one of these requirements: The Block is owned by a layout manager, such as LayoutGrid, Tab, Stack, and Splitter. The Block is relatively positioned and has a width of 100%. The Block is absolutely positioned.

For tips on working with components, see the General Interface Component Guide.
The following steps show you how to create a layout for the application:

1. Expand the Containers folder in the Component Libraries palette and drag a Layout -Top/Over component to the work area in the center of the General Interface Builder user interface. This component provides two panes for laying out application components.
   The Component Hierarchy palette shows that the new component, layout (--), is added as a child of block.
2. Right-click the appCanvas.xml tab at the top of the work area and select Save. The new layout component is saved in an XML file in the workspace/JSXAPPS/myAddressLookup/components directory. The appCanvas tab name is red when the file has unsaved changes and black after changes are saved.
   The Component Hierarchy palette looks like this:
   
   Click here to expand screenshot...
   
   
   
   The next step is to modify properties for the layout component. Properties are characteristics that define a component. To modify component properties, you select the component in the Component Hierarchy palette and edit its properties in the Properties Editor palette (Palettes > Properties Editor Palette).
3. To work more easily in the Properties Editor palette, click the Docking Options button on the palette's toolbar and choose Floating.

   When you don't need the Properties Editor palette, click the Toggle Display button to minimize it. To maximize it again, click the Properties Editor icon on the General Interface Builder taskbar at the bottom of the user interface.

4. Select the Layout - Top/Over component in the Component Hierarchy palette and change the following property values in the Properties Editor palette. To edit a field, type a value in the Value column and press the Tab or Enter key to save the value. The Name property is an internal name for the layout object.
   
   • Name: Set property value to lytAddressLookup
     
   • Rows Array: Set property value to 50,*
     The Properties Editor palette looks like this:
     
     Click here to expand screenshot...
     
     
     
     Notice that when you change the Name property, the name in the Component Hierarchy palette also changes.

The sample address lookup layout requires several subcomponents, which you add and customize in the following steps.

Customizing Pane Properties

In this section, you set the properties for each pane in a Layout component, including background color, size, and display name.

Many of the properties have a list of dynamic properties you can access from the Properties Editor palette context menu . For more information, see the General Interface Developer Guide.

Properties Editor

To customize pane properties, complete the following steps:

1. Expand the lytAddressLookup node in the Component Hierarchy palette. Select the first pane component and modify its properties in the Properties Editor palette as follows:
   
   • Name: Set property value to paneInput
     
   • BG Color: Set property value to @Solid Medium
     
   • Padding: Set property value to @8Pixel
     
   • Border: Set property value to @No jsxborder
2. Select the second pane component and modify its properties in the Properties Editor palette as follows:
   
   • Name: Set property value to paneOutput
     
   • BG Color: Set property value to @Solid Light
     
   • Border: Set property value to @Outset
3. To insert a property value that starts with the @ symbol, right-click the Value column next to the property name and choose it from the context menu. Note that after a dynamic property is selected, the explicit value displays in the Value field next to the name of the dynamic property.
   The component hierarchy and the work area should look similar to the following:
   
   Click here to expand screenshot...
   
   
   
   
4. Save the appCanvas.xml component.

For more information on components, see the General Interface Component Guide.