Revasoft Revasoft Banner
HomeOur ExpertiseOur ServicesOUR ProductsAbout UsCareersContactsupport
Print this page Using the ULC Visual Parts
Defining the Layout
Adding widgets
Setting the properties
Changing the grid

When working with the ULC visual parts, you will work with three different kinds of parts:

  • Box parts are used to define the overall layout. They define a grid of cells.
  • Cell parts contain a single widget part and define how the widget is positioned inside its bounds. Cell parts are automatically created and deleted as needed. You only interact with them to change their settings.
  • Widget parts represent Buttons, TextFields, Sliders, etc.

Note: when dealing with ULC visual parts, the cells keep track of the alignment of their widgets and not the widget's themselves.

Defining the Layout

When you create a ULC container part like a ULCShell, a Notebook page, or a GroupBox part it contains a single Cell. To define layout your first step is to insert a box part which defines the grid.

The ULC parts category provides three Box part variations:

Box: the general grid layout. Initially, a box part has two rows and two columns.
Vertical Box: a grid layout with a single column of two cells.
Horizontal Box: a grid layout with a single row of two cells.

The layout of your part is then defined by either nesting box parts or by spanning the cells of a box part. Refer to the Managing Layout chapter for a description of how to use Boxes to define layouts.

In a nested box and cells structure you need to be able to distinguish boxes from cells. To make this distinction more explicit the bounds of a box are indicated by a solid blue line and bounds of a cell by a dashed line.


Adding widgets

Widgets are added by dropping them into cells. A cell can contain a single widget. Once dropped into a cell the widget is immediately resized according to the cell's alignment. When you add a widget to an already filled cell you replace its existing contents.

To reserve some fixed amount of white space in a layout drop a Filler part into a cell. A Filler has properties to define the minimum amount of white space it should take in both directions.


Setting the properties

Box, Cell, and Widget parts have different properties which you set in their setting views.

You open the box settings view as usual by selecting 'Open Settings' from the pop-up menu of the box or by the part's default action. If you have a small margin it is easier to use the 'Open Box Settings' menu of the cell's pop-up menu. A Box part has the following properties:

columns: the number of columns
rows: the number of rows
horizontalGap: the horizontal gap between the cells
verticalGap: the vertical gap between the cells
margin: the margin around the cells.

All cells have two properties to define the alignment of their contained widget:

  • HorizontalAlignment: the horizontal alignment of the contained widget: Expand, Center, Left, Right.
  • VerticalAlignment: the vertical alignment of the contained widget: Expand, Top, Bottom, Center.

You can change the alignment property of a cell in the following ways:

  1. From the Cell's settings view
  2. From the Align submenu of the Cell's pop-up menu. To change the alignment of multiple cells, select them and use the Align submenu to change them.

Cells contained in a Grid Layout part have additional spanning properties which you can use to define cells which span over other cells.

HorizontalSpan: specifies the number of cells this cell spans horizontally.
VerticalSpan: specifies the number of cells this cell spans vertically.

The following figure shows how the parts and properties are presented in the Composition Editor.

Box Parts and Properties in the Composition Editor

Figure 1: Box Parts and Properties in the Composition Editor

The figure above shows a box which defines as three by three grid. There is both a cell which spans vertically and a cell which spans horizontally.

The arrows in an empty cell indicate how it will align its contents. An arrow is shown at every attachment point. For example, the top left cell has the alignment set to expand in both dimensions. If there is no attachment point then the cell will center the widget in the corresponding dimension.

In addition to changing the spanning with the spanning properties you can change it by direct manipulation with the blue grid handles. The grid handles are shown in the figure below. You can drag the grid handles either horizontally or vertically to span a cell.

Spanning Handles

Figure 2: Spanning Handles


Changing the grid

You can change the dimensions of the initially defined grid in one of the following ways:

  1. Change the number of rows and columns in the settings view of the Box part.

  2. Add an individual row or column relative to a cell. You first select the cell part. The cell's pop-up menu provides a Row and Column submenu to add a row or column before or after the selected cell.

  3. Delete a row or column. Select the cell in the row or column that you want to delete. Execute delete from the Row or Column submenu.


Back to Products Print this page Back to ULC Demo
Getting Started
Release Notes
Running the Samples
Architecture Overview
Internal Architecture
Using Layout
UI Engine Extensions
Application Controller
Web Integration
Manual Pages
Bringing the Advantage of Thin Client Computing to JAVA
The ULC Tour

top of page
Home | Our Expertise | Our Services | Our Products | About Us | Careers | Contact Us | Support
ULC Demo | ULC Tour | ULC R4.0 | Download | FAQ

 © Copyright 2001 Revasoft Private Limited.