Rapide -> Advanced UI -> Frames, Tabs and Sashes

Rapide Frames provide a new and intuitive approach to developing sophisticated user interfaces without the complexity of large procedure steps or many separate dialogs.

In the past, designing sophisticated user interfaces with Gen has required a compromise between either developing complex procedure steps that use third party tab controls or using separate windows and dialogs that requires more complex navigation.

In addition, a UI design that uses multiple windows and dialog boxes to concurrently display data does not convert easily to a browser based application because browser applications tend to be 'full screen' within the browser. Using mode-less dialogs on a browser is also problematic since the user does not have the same controls for switching between dialogs that are available with native operating system dialogs, and the use of modeless dialogs can leave the user unable to complete an action or reach the desired dialog when it has been overlaid by another dialog.

Rapide Frames allow the UI designer to embed windows and dialog boxes from a secondary dialog in the same procedure step or the primary dialog from another procedure step within a 'frame' or 'pane'. A pane divides a window or dialog box into two parts with a resizable divider, either horizontal or vertical.

The picture below shows the Gen toolset window design containing two frames. The windows that are contained within the frame are designed in separate procedure steps and specified using the Rapide Designer. In this example, the main window contains two frames. The lower frame implements a tabbed frame where three separate windows can be displayed by selecting the appropriate tab button.

In this example, the main window MULTI_FRAME has dialog flows to three separate child windows (Tab1-3) and also has a secondary dialog box (Tab4).

   

This is the Window design for the main window (MULTI_FRAME).

It contains push-buttons to control the flow to the individual tabs and a container for the the Frame.

   

Using the Rapide Designer, you can specify which windows are loaded into the frame container.

These can be windows from separate procedure steps or secondary dialog boxes from the same procedure step.

   
The windows implemented on a web browser. You can run this demo live on your browser from the Demos page.

Multiple Instance Tab

The example above illustrated the use of a Tab control to present four separate dialogs within a tab control. Another use of a tab control is to display multiple instances of the same window or dialog box. For example an application that lists customer accounts might have a window that lists the accounts and then the ability to view a detail window. In a Windows GUI application, the detail window might appear as a pop-up, but for web applications a multiple window design is not appropriate. Multiple Instance Tabs provide a solution that allows multiple instances of the same window or dialog box to be opened at the same time in separate tabs. An example from the Rapide Controls Demo is shown below.


Sashes

A sash is a horizontal or vertical control that is placed on a window and which can be moved in a vertical or horizontal direction by the user. The purpose of the sash is that other controls can be tracked against the position of the sash, for example to allow the user to adjust how much space is provided for a listbox.

In the example below, a vertical sash divides two list boxes whose sizes are tracked to the position of the sash.