• Contents
• Previous
• Next

Design Tools

To design most interfaces using LiquidApps®, you will create screens, add widgets such as buttons, tables, or images, and then assign properties and behaviors to these components. You can also assign properties and behaviors to screens and files.

Figure 12: The Default Design view

Screens

Screens represent the user interface that you are designing. The Screen view allows you to view all of the screens you have created and move quickly between them.

To Create a Screen

Figure 13: Adding Screens to a project

• In an open project, select the "Add Screen" screen in the bottom of the Screens view or right click on the Screens view background. You will be prompted for the new screen name.
• A small blank screen will appear in the upper left corner of the design canvas area; you can resize the new screen in this view.
• You can right-click on the newly created screen’s icon in the project management area to rename it or delete it.

Widgets

Widgets are the building blocks for your interfaces. These are shown in the Palette and include top containers, containers, and components such as buttons, check boxes, shapes, and text. When you begin building a screen, a Top Container is automatically placed on the design canvas. Then, you can select and drop components into these areas.

To add widgets to a screen:

• Click on the widget you wish to add. The arrow will change appearance.
• Click on the anchor point location on the design canvas for the widget; placing the widget is as simple as releasing the mouse button. You can then resize or move the widget around the canvas as you see fit.

The table below gives a listing of the widgets currently available, and a brief description of their usage:

Widget	Widget Description
	An Area is a general purpose, organizational sub region that can have its own layout. Areas can contain components as well as other areas, and can be mixed to easily create UIs.
	A Split Area is a special purpose container that splits two other components horizontally or vertically. It has an adjustable sash that allows you to adjust the height or width of the split.
	A Tabbed Area is a special purpose container that organizes components in groups of folder-like tabs.
	This feature inserts a Toolbar in a container. Toolbars can only contain buttons.
	This feature is a standard pushbutton.
	A check box is a two-state toggle button. These states are not mutually exclusive; so several check boxes may be selected within a group.
	A Combo Box is a combination of a text field and a pull down menu. It allows the end user to either type in an entry or select one from a dropdown list.
	The Image widget is a placeholder for an image. The source image can be selected from the property ribbon or by right-clicking on the image, exposing the image selection wizard.
	The Image Switch widget is a placeholder for two images that can be switched between each other upon rendering. The source image can be selected from the property ribbon.
	This feature inserts a placeholder for a list, which is then edited with properties. A list presents a non-editable list of selections to the end user. The end user may select one or more entries from the list.
	A radio button shows two mutually exclusive states. Radio buttons are usually grouped and provide mutual exclusivity within the group. Only one radio button in a group may be selected at any given time.
	A Separator gives the user the ability to separate objects by drawing a line of varying width between elements. This widget lends aesthetics to your workspace.
	A Slider allows the user to select from a minimum/maximum range of values presented graphically as a slider. Sliders are bounded by a minimum/maximum range.
	A Spinner is a text box with increase/decrease arrows. It allows the end user to increase/decrease values. Spinners are unbounded by default, but the designer can apply a range of values.
	The Table widget inserts a placeholder in the form of a spreadsheet-like data table. Cells can contain text, buttons, lists, or images, but all cells within a column must contain the same type of data.
	The Text widget Inserts static non-editable text. It is useful for labeling other components with descriptions.
	This feature inserts a multi-line text entry component.
	This feature inserts a single-line text entry component.
	A tree widget presents organizational information such as file systems in an hierarchical format, and shows parent/child relationships.
	This widget allows the user to design an element that can be toggled, like an element that can be switched on and off.

Table 2: Widgets and their descriptions

Composite Widgets

Composite Widgets are a group of two or more widgets combined to create one task or function.

To create a composite widget:

• Add a Container to your workspace.
• Add the group of widgets you want to make into a composite function.
• Once the selected widgets are in place inside the container, right-click on the container and select Create Composite Widget. The widgets you selected and placed inside the Container have been grouped together, forming a reusable Composite Widget.

Once created, your composite widget is housed in uInventory™, which can be accessed by clicking on the Browse uInventory™ icon, and the Composite Widget palette, which is located in the Widget drop-down box at the top of the palette tool.

Figure 14: Creating a Composite Widget

The LiquidApps® Tool Bar

The LiquidApps® Tool Bar contains a mixture of editors that can help developers dramatically alter both the look and functionality of their UI projects, as well as features aimed at giving designers a quick peek at how their project will look when exported into different formats. For a detailed description of the LiquidApps® Tool Bar and all its features, please see your LiquidApps® 6.0 User’s Guide.

Figure 15: The Default Toolbar

The LiquidApps® Drop-Down Menus

The drop-down menus function in much the same way as the toolbar items. They give the user another option of navigation to a specific feature.

Figure 16: The "Window" drop-down menu

The Ribbon

The Ribbon, located at the top of the design area, shows some of the most common widget properties, fonts, and formats. The Ribbon houses four widget categories: Layout, Style, Content, and Format. Each category has individual editors that can manipulate widgets depending on the designer’s needs. To apply a property using the Ribbon, simply select the widget and click on the property shown in the Ribbon.

Figure 17: The Content Ribbon bar