Traditional development techniques rely on a common source code repository that is revision controlled using tools such as SVN, Perforce, Clearcase, GIT or Mercurial. Storyboard Designer projects are designed to be directly integrated into this type of environment so that the UI can be shared and improved by many developers working in parallel.
To provide integrated support for various revision control systems, Storyboard Designer uses the Eclipse Team Provider plugins. Plugins are available for most revision control systems from the Eclipse Marketplace.
Here are links for the more common and popular plugins:
The Storyboard Designer model file is a single model file. Conflicting changes to this model file can be visually inspected and merged from within Designer using the model comparison tools.
To compare two Designer files within the same project or file system workspace. Select both of the model files (e.g., file1.gde and file2.gde) in the Navigator view. Right click and select > from the menu.
To compare a Designer file that is in under revision control to a previous version, right-click on the file and select the menu entry . Different version control systems provide different specific terms, but . In the sub-menu you can select or if you want to compare with a specific version.
In either case, local comparisons or comparisons with versions from a revision control system, the comparison will open an editor that will highlight the differences in the model elements in the two files and allow each of the changes to be viewed in context and merged or discarded as may be required by the final design.
Triggering a comparison provides a hierarchical breakdown of the models' objects, with two sides representing the two files. Any differences between the two models will be highlighted in yellow. The two types of differences are property changes and additions/deletions.
Property changes show the value on both sides of the viewer. Changes are marked by a delta icon between the two tables in the two reference comparison or an arrow representing the direction of the change when three reference points are available. The three reference point comparison is usually only available when a source control system is available to provide the revision history.
For additions/deletions, the side representing the file that has the object will show it, and the other side will show empty space. Additions and deletions are marked by a + or - icon, and an arrow representing the direction of the change when three reference points are available.
In addition to changes, the comparator will also show any unchanged objects/properties, for reference and context. They are displayed in gray text, with no background color. In a three way comparison with an ancestor, it is possible that a conflicting change exists, where both sides have modified the same object/property from the original ancestor. These will be highlighted in red.
The toolbar contains actions and options to merge changes and switch the view. From left to right, here is a description of each one:
-
Toggle Graphical Compare: Enables the graphical compare, which will appear on the bottom half of the screen and allow the user to visualize the changes on a model object.
-
All Changes Filter: Displays all changes across all model objects.
-
Application Filter: Displays changes on the application level. This includes application properties, and any application level variables or actions that have been added or deleted.
-
Screen Filter: Displays changes on the screen level. This includes screen properties, layer instance properties and layer instance additions/deletions.
-
Layer Filter: Displays changes on the layer level. This includes layer/control/render extension properties and control/render extension additions/deletions.
-
Animation Filter: Displays any changes related to animations.
-
Toggle Unchanged Properties: Shows or hides the unchanged objects/properties.
-
Copy Left-Right/Copy Right-Left: Merges changes that have been selected in the viewer. If a model object is selected, any changes to its children will be merged.
-
Copy All Left-Right/Copy All Right-Left: Merges all changes. In the two way case, this is non-destructive and will not delete any deletions, but will add the additions. In the three way case, this respects the direction of the changes.
After making changes, saving the comparator tab will appropriately save the changes to the model file(s). Exiting the comparator without saving will revert any applied changes. The global undo/redo functions are also available to revert and re-apply changes.
If you are working from a command line environment, or integrating Storyboard project merging into a continuous integration environment where file merges must happen automatically with a binary pass (merge successful) or fail (merge conflicts) using the standalone comparator application, StoryboardComparator.
StoryboardComparator.exe" [-quiet] [-headless|manual] [output=/path/to/result.gde] {ancestor} {current} {other}
Syntax:
|
-quiet |
(optional) Suppresses output from tool and splash screen |
|
-headless |
(optional) will suppress the visual diff regardless of the result and just attempt an automatic merge, exiting if a failure occurs. Typically used in a continuous integration environment . |
|
-manual |
(optional) will skip an automatic merge attempt and jump straight into the visual diff of the files |
|
-output={filename} |
(optional) The merged content will be stored into the |
|
ancestor |
Full path file name of common ancestor of the two .gde files being compared |
|
current |
Full path file name of locally changed .gde to be compared |
|
other |
Full path file name of remote changed .gde to be compared |
The values of ${ancestor} ${current} ${other} are the full paths to the files being compared and are designed to align with external source management tools such as subversion (svn) and git. StoryboardComparator will first attempt an automatic merge of the provided content. If that fails due to the discovery of a conflict, the visual diff will appear and allow the user to merge manually.
To integrate in a git environment the compare can be added in the .gitconfig:
[merge "mergegde"]
driver=\"C:\\Program Files\\Storyboard_Comparator\StoryboardComparator.exe" [-quiet] [-headless|manual] -output=%A %O %A %B
[mergetool "mergegde"]
cmd = \"C:\\Program Files\\Storyboard_Comparator\StoryboardComparator.exe" [-quiet] [-headless|manual] [output=/path/to/result.gde] $BASE $LOCAL $REMOTE
To configure the merge to happen automatically when merging via 'git merge <branch>' an .gitattributes needs to be configured as:
*.gde merge=mergegde
Alternately Storyboard Designer can be used for compares with a similar syntax:
${SB_DESIGNER_EXT} -nosplash -application com.crank.gdt.merge.gdemerge ${ancestor} ${current} ${other}
Here the ${SB_DESIGNER_EXT} represents the path to your Storyboard Designer executable and will vary based on your operating system and installation path.For a standard windows distribution you would find the Storyboard Designer binary in C:\Program Files\Crank Software\Storyboard_Designer\Crank Storyboard.exe while on a MacOS system is may be /Applications/Crank_Software/Storyboard_Designer/Storyboard.app/Contents/MacOS/Crank Storyboard
Entire projects and directory structures can be compared as easily as comparing single model files. This will allow developers to understand which resources such as images, fonts and script files have changed in addition to the changes to the model logic. The same as a model file comparison, this can be performed by right clicking on two projects or directories and selecting > from the menu.
When this comparison is done a hierarchy is presented indicating files that have changed, been added or removed from the source or the destination directory. Selecting any of these files will open a comparison editor that is appropriate for that file type.
Storyboard Designer gives you the ability to export your project for either archiving, sharing or demo purposes. Here are a couple of easy steps showing you how to do that.
When your Storyboard Project is complete and you are ready to export, right click on the project folder and select Export.
Next you will be presented with the Export Selection dialogue. Expand General by clicking on the triangle to the left of the folder. Select Archive File and then click Next.
Next you will see the Export Archive file box. Here you will see all the folders and files that will be included in the archive you are about to create. Browse to the location where you want to save and then provide a name for your archive. Review and verify your Options and then click Finish.