The Storyoard 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 what the look and feel of the application will be.
The default editing mode is to display and edit the entire application, showing all screens and their composited layers together.
If instead of looking at all of the screens of an application together, you want to focus on editing and working with one particular screen, then you can right click in the editor and select Edit > Screen, which will open up a new editor window with just that screen's content shown.
If you want to edit just the layer contents, independent of the screens to which they are bound, then you can right click in the editor adn select Edit > Layers and this will open up a new editor with all of the layers shown, without any screen grouping.
On the right hand side the editor contains a fly-out palette toolbar that provides the basic visual design elements for the application; screens, layers and controls. These can be selected and then dropped onto the editor to start building up the application.
Additional editing functionality is available through the right click menu while in the editor. This is where you will find functions to manipulate control size, alignment and z-order/front-back placement.
In addition to the editing options available right click menu, the toolbar provides functionality that is context sensitive to the editor being used. When a Designer file is being edited (and the editor area has focus), then the toolbar provides short-cuts to several common operations.
This will export the Designer file being edited to a Storyboard Engine file and simulates it using the host based Storyboard Engine configuration.
This controls the current zoom level of the display. This value can also be adjusted by CTRL+MouseScroll or COMMAND+Scroll using a wheelmouse or touchpad.
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 the alignment is performed relative to the screen. When multiple controls are selected, the alignment is performed relative to each other.
These toolbar actions provide an alternative to the palette for the quick construction of screens, layers and controls.
These toolbar actions control 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, but an outline of the controls is drawn. These modes can be used to optimize the application layout to avoid uneccessary damage and redraw operations.