The Storyboard Designer editor is the central location for all design activities for your application. It provides a visual representation of all of the screens of the application and allows designers to edit the screen content and get immediate feedback about the look and feel of the application.
There are three modes that define how the application content is displayed in the editor based on the current selection. The default mode is Screen Depth. While in Screen Depth mode, the editor will focus in on the screen or design state in context based on the current selection, and all other screens and design states will be hidden. If there is no screen in context and the application is the selected object (which can be done through the breadcrumb or the Application View), the entire application and all its screens will be shown as normal. The second mode is States Depth. While in States Depth mode, the editor will focus on the screen in context based on the current selection as with Screen Depth mode, however, all its design states will also be shown. If there is no screen in context and the application is the selected object (which can be done through the breadcrumb or the Application View), the entire application and all its screens will be shown as normal.
There is a breadcrumb widget at the top of the editor window that shows the selected object’s hierarchy in the model. While the editor is in focus, the key binding ALT (OPTION on Mac) + Arrow Up to select the parent object of the currently selected object. While a screen, layer, group, or table is selected, the key binding ALT (OPTION on Mac) + Arrow Down will open a pop-up menu containing the currently selected object’s children and allow the selection of one of them quickly. Entries in the breadcrumb can also be clicked on to update the selection in the editor to that object.
By default, clicking on a group or table will select the group or table object. Double-clicking on a group or table will enable the selection of the underlying controls. Double-clicking on the object again will return to the default behavior.
If you want to edit the layer contents only, independent of the screens to which they are bound, you can right-click in the editor and select Edit > Layers which opens a new editor with all the selected layers shown individually. If changes are made to a layer in this mode, the changes will be reflected in all the screens that reference the changed layer.
The right-hand side of the editor contains a vertical toolbar that provides the basic visual design elements for creating the visual content. These can be selected and dropped into the editor to start building up the application.
By default, the vertical toolbar is displayed, however, the key binding ALT (OPTION on Mac) + T will toggle between displaying and hiding the vertical toolbar depending on your preference.
Additional editing functionality is available through the right-click menu while in the editor, as well as from the main toolbar at the top of the editor. This is where you will find functions to manipulate control size, alignment, and z-order placement, as well as the creation of new controls, layers, and screens.
Content can be moved within its container by selecting one or more items and then using the arrow keys to move the item. By default, the movement is in 10-pixel increments when using the keyboard, but if the SHIFT key is held down while using the arrows the content will move one pixel at a time in the desired direction.
The editor maintains a selection history stack of prior selections made, outside of breadcrumb navigation. You can navigate the stack back and forth and find prior selections in the history by using the key binding ALT (OPTION on Mac) + SHIFT + Arrow Left/Right.
In addition to the ones already mentioned, there are several keyboard shortcuts for common operations that can be displayed on-screen by selecting Help > Key Assist… from the main menu.
The GDE editor has the ability to choose a Freeform Layout, this allows the user to manually position their screens in the editor rather than using a grid layout. Each Screen working set has a unique freeform layout that is preserved when the GDE editor is saved.
Here's an example of a Freeform Layout, screens are positioned in a custom manner:
Here's another example of a Freeform layout where screens are visually organized into groups:
The editor toolbar contains a button to toggle between State Layout (default) and Freeform Layout. Another way to do so is with the context menu in the GDE editor, View>Layout>Freeform Layout.
In addition to the editing options available in the right-click menu, the toolbar provides functionality that is context-sensitive to the editor being used. When a GDE file is being edited and the editor has focus, the toolbar provides shortcuts to several common operations.
- Zoom Display
-
This controls the current zoom level of the display. There are two ways to zoom in and out with the scroll wheel.
-
CTRL+MouseScroll (Windows/Linux) or COMMAND+MouseScroll (Mac) using a wheel mouse or a touchpad will zoom the editor in/out while keeping the selected model object centered on the screen.
-
CTRL+SHIFT+MouseScroll (Windows/Linux) or COMMAND+SHIFT+MouseScroll (Mac) using a wheel mouse or touchpad will zoom the editor in/out on the area at the center of the editor.
-
- Switch to State Context
-
This toggles between State Context and Master Context modes.
- Align and Resize
-
These toolbar actions provide a convenient alternative to manual alignment by aligning the selected controls automatically with one another. When a single control is selected the alignment is performed relative to the screen. When multiple controls are selected, the alignment is performed relative to each other.
- Control Outline
-
These toolbar actions manage how the control content is displayed within the editing environment. By enabling the control outline, a border will be drawn around controls and layers. By enabling the wireframe mode, no control content will be drawn and only an outline of the controls is drawn. This is useful to minimize the amount of control overlap that occurs to prevent excessive redraw damage areas.
- Editor Layout
-
Toggle between State Layout and Freeform Layout. See (Editor Freeform Layout)
- Editor Depth Menu
-
The editor depth menu allows you to switch between editor depth modes.
- New Model Elements
-
These toolbar actions exist in the vertical toolbar on the right side of the editor and provide an alternative for the quick construction of screens, layers, and controls.
In addition to the standard model editing functionality, some render extensions have direct edit functionality. To enable the direct edit on a control with one of these render extensions, the user needs to do a slow double click on the control.
- 3D Model
-
When the direct edit mode is activated, a set of xyz axes will appear in the bottom left corner of the control. At that point the user can use their mouse to move the model. Holding the shift key allows the user to rotate the model using their mouse. As well, holding either the x, y, or z key isolates that axis when either translating or rotating the model. When the user is finished editing the model, they just need to click anywhere outside of the control to end the direct edit.
- 2D Polygon Editing
-
When direct edit is activated, the user can create and edit a polygon on the screen using hotkey toggles. Hold 'shift' and click within the control bounds to create new vertices (ideally, 3 vertices are needed to have a sufficiently visible polygon). Hold 'control' and click on a particular vertex to delete it from the polygon. Hold 'alt + shift' and click near an edge to create a new vertex splitting that particular edge. Vertices can be moved by simple click and drag. Exit quick edit by moving the mouse out of the control bounds.
- Images with Custom Rotation Points
-
When an Image render extension has a custom rotation point, direct edit is available to change the location of the point with a drag and drop operation. This is further discussed in the section Image Rotation in Working with Images.
- Text
-
When direct edit is activated, a cursor will appear allowing you to type directly in the editor to edit the text as desired. Hit ‘Escape’ or click out of the control to end the direct edit.