Storyboard Designer Development

Simulating and Exporting an Application

After an application has been created, it is a good idea to run it through the simulator to validate the runtime behaviour before exporting the application to a Storyboard Embedded Engine deployment file.  The simulator is a host based instance of the Storyboard Embedded Engine and should exhibit the same operational behaviour as the target, though there may be differences in the level of performance obtained because of the different CPU and graphics characteristics.

Simulating an Application

Simulating a Storyboard application is a straightforward process.  From the Navigator view you can right click on the Storyboard designer file (*.gde) and select the Storyboard Simulator option.

Alternatively you can select the Storyboard Simulator option from the toolbar or main menu and select Storyboard Simulator Configurations… which will allow you to customize how the simulator is launched.  

The options include configuring which plug-in are to be loaded by the simulator and what level of verbosity should be used to run the simulator.

When the simulator is launched, then it will perform an automatic export to a Storyboard Embedded Engine to a temporary directory and run the application in its own window on the host system.

Exporting to a Storyboard Embedded Engine

Exporting a Storyboard Embedded Engine configuration is initiated from the main menu as File > Export.  This will bring up the export wizard.

Selecting the Storyboard Embeded Engine (GAPP)  option and clicking Next will bring up an export file selection dialog.  Select the Storyboard application file (*.gde) that you want to export and the output location that you want to export to.  

Selecting Finish at this point will create the specified directory and create a Storyboard Embedded Engine (*.gapp) runtime file and also export the resources from the images, fonts and scripts directories.

Comparing Projects

You can compare GDE files with those that are checked in to a revision control system or with another GDE file that is in your workspace. To compare two GDE files that are in your workspace, select both files, right-click and select "Compare With -> Each Other". To compare a GDE file with a revision that is in a repository, right-click on the file and select the menu entry "Compare With". In the sub-menu you can select "Latest from Repository" or "Revision" if you want to compare with a different version.

When you do the compare you will be presented with the following screen:

A graphical compare is also available for Screen, Layer and Control elements. You can view the graphical compare by clicking on the Storyboard Model drop down menu, which is above the properties comparison view, and selecting Graphical GDE model. After selecting the graphical compare, click on the Screen, Layer, or Control that you wish to view.

Working With Templates

Storyboard Designer allows developers to create re-usable design components, templates, that can be shared among multiple projects.

A template is created by selecting a Storyboard Designer model element in either the Storyboard editor or the Application view and right clicking and selecting Templates Create. A dialog will prompt for a template name, description and the name of the file to save the template as. Currently only single control templates are available. The control template generator will transfer over all variables, actions and render extensions that are associated with the template source control. The template will also contain a copy of all images, fonts and script file resources that are referenced by the control. When the template is applied if these resources don't exist in the existing project then they will be transfered from the template to the containing project. If the resources already exist, then it is assumed that these resources should be used in place.

Templates are stored in an external file format so that they can be shared and incorporated into other projects by adding them into the target project's templates directory. Once they have been added to that directory they will be parsed by the project and will be displayed in the Templates View and be made available for use. By default new templates are saved in that project's templates directory.

User Defined Actions

New actions can be added to the Storyboard Engine through standard programming extension points. In order to make those new actions available within the Storyboard Designer development environment it is necessary to describe the name and type of the action arguments in a template so that they can be properly presented within the Storyboard Desginer user interface. This can be done on a project by project basis using an action template file.

An action template is an XML file with the following formatted content:


<actiontemplates>
    <template name="ACTION_NAME">
        <arguments>
            <element name="ARG_NAME" type="ARG_TYPE" />
            ... as many elements as there are arguments ...
        </arguments>
    </template>
    ... as many templates as there are actions ...
</actiontemplates>
            

The user defined fields are as follows:

ACTION_NAME

This is the name of the action as it appears in the Storyboard Engine runtime (gapp) file.

ARG_NAME

This is the name of an argument option as it appears in the Storyboard Engine runtime (gapp) file.

ARG_TYPE

This is the type of the argument and can be one of the following:

string

A text string value

integer

A numeric value with an optional range specified by 'min' and 'max' attributes

boolean

A boolean true/false value

In order to be automatically included in a Storyboard Designer project, the action template file should be placed in the templates directory of the project where it is to be used. The name of the template file can be anything valid for the filesystem, but it should contain the file extension .sbat in order to identify it as an action template file.