Page Designer Storyboard J. A. Fitzpatrick December 2004

Introduction (Caveats) This storyboard illustrates steps for laying out an unbound page using the new X Page Designer. This is a very rough first pass, intended to solicit discussion rather than provide final answers. The mockups have some known errors (to be corrected in the next version).

File > New > Page The New Page dialog appears, showing pre-populated Package name:

The user enters the Page Name and Label, selects a template, and presses Finish. The new page opens with its default contents:

The user selects Tab1 by clicking on either the structure view or graphic view. Tab1 is highlighted in both views. The current properties of Tab1 are displayed :

The user enters a label for the tab using the Properties view. The label appears in the structure and graphic views:

The user selects the header area. The Header container is highlighted on both the structure and graphic views, and its basic properties are displayed:

In order to see more of the properties for the layout group, the user stretches the Properties view. The user then changes the number of columns from 3 to 2 using the Properties view. The column outline in the graphic view updates:

The user selects the pull down menu for the Column Size property:

The user selects 33/66 for the column sizes. (The number of rows shown is changed, this is TBD but may default to always showing populated rows + 1.) These changes are reflected in the Graphic view:

The user clicks on the “Edit Control” icon in the page element toolbar, then positions the mouse pointer over the first cell in the heading. The row is highlighted while the mouse pointer is hovering over it. The pointer shape reflects that this is a valid drop area for adding a widget:

The user clicks again, and the Edit Control element is added to the page. The new element is highlighted in the Graphic and Structure view, and its properties are shown:

The user enters a label for the element (using the Properties view or inline editing if available):

Using the same mechanism, the user adds a second Edit Control:

The user enters the label for this element. It is changed to display-only by using the pull-down for the Display Only property, and changing the default value of False to True:

The Graphic view updates to show the Edit Control as display-only:

The user decides, since the next element will also be an Edit Control, to just copy and paste the current element (Edit2). While Edit2 is selected, she uses key combination Control-C to copy. The user then selects the Header layout as the area to be pasted into:

The user then uses key combination Control-V to add the copy. A new element of the same type is added; all of its properties are the same as the copied element except that it is given a unique Name. Because the header was selected, the element is automatically added to the next empty cell:

Using the Properties, the user changes the label of this Edit Control, changes the EditControlType property to DropDown, and sets the DisplayOnly property to False.

The next item to be added is a group box. The user selects the group box icon on the toolbar, and drops it into the remaining cell of the header:.

Note that the row height adjusts for the larger element

The user enters the label for the group box, and then adds two radio buttons, and enters their labels:

For purposes of exploration, let’s rewind to before the group box was inserted and look at another possible path. Here, the user has added the first radio button, and is about to add the second. It is assumed that there will be a shortcut for adding an additional element to the same cell; here is is shown as hovering over an element in the graphic view:

This shows the result of this action, which adds both the additional radio button and a layout group that was automatically added around the two elements:

The user multi-selects the two radio buttons using the standard Shift-Click combination:

The user right-clicks over the selected items to display the context menu:

Here the group box has been added. The next item added is a lookup edit control inside the tab:

In this case, it is known that the associated data field will be a 4-character customer code. To change this, the user opens the “Layout Details” category of the Properties:

The user changes the Fractional Column Span and Fractional Column Span Units properties to set the field width to 4 characters:

The next element to be added is the Customer name. The user adds the Edit Control, sets it to display only, and sets it to have no label. Then, she returns to the Layout Properties and sets the Column Span to 2 and the Position At to Label.

The next element to be added is a subpage containing address fields. The user add an empty subpage container widget:

The subpage is intended to span the full width of the page. This can be done by setting the Column Span property. Perhaps it can also be done by resizing on the interactive display:

Once the subpage container is positioned correctly, the user needs to define the actual subpage to be included. The mockup below shows a placeholder for a subpage search window:

After the subpage definition is inserted, it appears as follows:

.