Even with an abstraction layer already in place, changing the graphics engine threw up some unexpected and subtle problems (otherwise known as bugs and strange visual artefacts) that had to be dealt with, delaying the new release.

But GUI Design Studio version 4.3 is finally here, in both Professional and Express editions, along with a new Viewer. All can be downloaded from here on our web site.

For users of versions 4.0 to 4.2, this is a free upgrade and the Viewer is, of course, always free.

What’s new in version 4.3

1. Fresher App

The application has been given a make-over with fresher icons, neater rendering and anti-aliasing of certain graphics elements.

2. Workspace Background Options

A new preference option has been added to set a background to the design workspace from a number of presets that include a flat colour or tiled image overlaid with optional horizontal lines, vertical lines and dots. The “Orange Grid” preset is shown above.

3. Sketch Visual Style

A new “Sketch” visual style option that is supported by most of the elements. Like all visual styles, it works with any colour scheme and default font. Here’s a sample in “Vista Graphite” colours and “Elemental SF Black/1.0″ font:

“Pumpkin” sketch is nice:

Or, how about a groovy colour picker with “Lucida Handwriting” as a default font:

4. Image Slicing to Maintain Corners

Bitmap images now support slicing to provide resizable background images for custom elements, such as buttons, and fancy CSS3-style borders. Up to 9 slices can be created using left, right, top and bottom slice margins.

The regions in the margins are preserved as far as possible while the remaining regions are either tiled, stretched or aligned according to the existing Placement options. The Alignment options are also now enabled for tiling rather than always aligning to the top-left corner. Using centered alignment with tiling provides a nice balanced effect.

5. Line Segments

New Line Segment elements have been added with various options for shape, text label and arrow heads. They’ve been design to fit together in interesting ways:

6. New Shapes

New Shape elements added with various fill and border options, plus transparency and drop shadows. These are intended to supersede the existing shapes in the Text category and offer more flexibility:

7. Monochrome Display Options

Project Options now allow you to design or present with elements and/or images displayed in monochrome to focus attention on content and layout and avoid distractions caused by colour:

The monochrome effect is applied to whatever colour scheme you have active so different colour schemes will result in slightly different monochrome styles. The effect can also be applied to any of the visual styles. Annotations and Storyboard elements remain in colour.

Hyperlink text also remains in colour because you normally want to draw attention to these click-able elements in designs.

Static Text elements now have a “Treat as Hyperlink” option. Since all text elements may be used as a navigation source, the only consequence of this is to force it to draw in colour when monochrome drawing is selected. Existing text elements automatically apply the hyperlink option if they are underlined when loaded. The new option lets you turn this off. New text elements only set this option if they are Hyperlink elements. Again, the option can be removed if necessary.

Other Changes

1. Due to the graphics engine replacement, certain elements may look very subtly different. Some rendering should appear smoother. Standard font sizes have been adjusted to improve their display. If the new display is too slow, uncheck the new “View | High Quality Display” menu option to see if that helps.

2. Sound files (.wav) now show up in the Project File Tree and can be added to designs like images using drag and drop or double-clicks. A new “Design | Add Sound File…” menu command has also been added.

3. Icons can now be disabled and display as a dimmed monochrome version of the icon. This means command buttons can now properly indicate their enabled state. Note that the new monochrome display option may make these indistinguishable.

4. [Pro only] The “Prototype” tab has been added to most of the remaining element property editors for the Pro edition. This adds flexibility for conditional states and avoids the need to use an additional parent container element (where a transparent Rectangle was often used). Note that the Enabled Condition may not apply to the element itself (if it doesn’t have a Disabled state) but it may apply to child elements that it contains and the condition will filter through to them.

5. [Pro only] The Enabled and Visible Condition fields on the “Prototype” tab in the editor have been swapped around so that the Visible Condition is first and will get the cursor in many cases when the tab is opened. Visible conditions turn out to be more widely used and this changes saves a lot of tabbing key presses in some design cases.

6. Resize Anchors are now turned off by default to avoid visual distraction, since they are an intermediate to advanced feature. They are best turned on only when needed (Shift+F8 hotkey to toggle).

7. The light green box to show the default representative element can now be turned off from a new “View | Default Element Box” menu option. Use this if you are primarily interested in screen design or if you need to export an image without the box showing. For now, the darker box for an explicitly set representative element is always displayed.

8. Text Button elements with preset actions (Accept/Cancel/Close) now display that action as part of the tooltip in the Elements palette.

9. [Pro only] “Set Data” now closes pop-ups. This means that menu commands can now execute “Set Data” to activate UI changes.

10. Default properties and rendering tweaked for many elements including Design Grids, Menu Bars, Toolbars, Status Bars and Web Pages.

11. [Pro only] After generating a distribution file, the “Open Containing Folder” button now also closes the dialog to save another click.

12. The behaviour of the Project File Tree has been improved to maintain the best scroll position after operations such as opening designs, duplication, deletion, etc. Previously, the tree might scroll after such operations making it harder to locate where you were.

13. The Project File Tree context menu now contains an additional, default “Open” or “Add to Design” command to make it clear to new users what double-clicking will do and also make those operations obvious. The “Properties…” command on the workspace context menu has also been marked as the default command for clarification of double-clicking elements.

14. Other Menus tweaked to improve availability of design commands.

Bug Fixes

1. [Pro only] Generated HTML documentation now translates headings within design descriptions as <h3> tags instead of <h1>.

2. [Pro only] Images in generated RTF and PDF documentation are now greatly improved in quality.

3. Fix to clipping of modal pop-ups when running prototypes in certain cases involving multiple, nested components.

4. Fix to up-shifted tab content for Tab Bars and Ribbon Bars under certain circumstances, especially when a prototype is first run.

5. [Pro only] Problems interacting with Tree, List and Table elements that have been placed on top of Components have been fixed.

6. Handling of clicks when running the prototype has been improved to fix the problem of double-clicks blocking single clicks. This will make certain interactions more responsive.

7. Icon files containing large 256 x 256 PNG images are now handled better. Essentially, they are now ignored instead of causing problems (but may be fully supported in later versions).

8. Components that have been moved or renamed now show up properly when loaded from a design distribution project (.gdd file).

9. Zoom to Fit (Numeric keypad ‘/’ hotkey) now excludes the background canvas to improve the fit.

10. Exported prototype images are now correct when using an emulated screen size.

11. Sounds now stop playing when the prototype exits.

12. File icon associations in Windows Explorer should now be correct. These are registered each time the application is run. Note that .gdd files are only associated with the Viewer.

13. Minor memory leak fixed.

Now that we have a stable version of 4.3 released with such a major change to the products inards, we can move forward with some of the developments we have in store for the next version.

Many thanks to all our beta testers and everyone else that has reported bugs or requested new features. Watch out for announcements of our new public forums to help make us respond better to new feature and change requests!

Happy designing!

Jonathan

And so it was that the little “bubbled events” feature that allowed Icons to have their own navigation events, while still allowing navigations from Buttons they might be placed on, introduced a series of bugs that has resulted in a steady stream of 4.2 updates.

But now we’ve finally got it sorted and with the new version 4.2.116.0 release today, we’ve dug deep and fixed as many bugs as we could find. Some of these are minor but others might make a significant difference to the software’s operation.

We’ve also taken the opportunity to introduce an update manager so that you can be notified of new versions you are entitled to and install them much more easily.

If you’re using either the Professional or Express edition of GUI Design Studio version 4 then we recommend you download version 4.2.116.0 and install it over your current version.

Here’s what’s changed in this new version…

New Additions:

1. Automatic updates management added. A new Preferences option determines how often a check for updates is performed on start-up (Never/Daily/Weekly/Monthly). Checks can also be made at any time using the new “Help | Check for Updates” menu command. If there’s an update available then you’ll be given the option of downloading and installing it automatically.
2. Auto save facility added. No one likes to lose work and we try hard to ensure that our software doesn’t crash but the occasional crash bug does occur, sometimes associated with obscure scenarios that are hard to test for.

   To guard against power outages and crash bugs, modified files are now archived approximately every 2 minutes once the application is idle for a few seconds. The ‘saved’ copies of files on disk are not touched until you issue a “Save” command so the auto-save should have no impact on the way you work and should generally go unnoticed.

   In the event of an unexpected exit, when the project is next opened, you will be prompted to recover modified files from the last auto save. You will hopefully never need to use this feature but it’s been added for peace of mind.

Bugs Fixed:

1. Using the “Send to Back” command on nested elements could cause a crash under certain circumstances such as when they had been copied and pasted into a new design. This has now been fixed.
2. Using “Undo” and “Redo” commands on “Add Element” and “Delete Element” operations with certain selection states active (too complex to describe fully) could cause a crash. This has now been fixed.
3. Issues with navigation from icons within components fixed. This affected the Quick Start Tutorial Part 2, Step 1.1 where the navigation originally could only be made from the underlying Toolbar Button but can now also be made from the Icon placed on top. This bug was introduced in 4.2.115.0 while fixing another related bug. The whole bubbling of events to parent items has now been revised to fix these bugs and should work much better with overlaid icons and any other element forming part of a custom control.
4. The cause of the CPU activity when idle has finally been tracked down and eliminated.
5. The “View | Canvas” option no longer gets into an inverted state regarding the red canvas border. The canvas itself was okay but was very feint and has now been made darker (similar to its original colour).
6. The “Paste from Clipboard” feature of the Table element now accepts Unicode characters for languages that cannot be represented by ANSI characters.
7. The bounding box of grouped elements no longer includes elements that have been deleted.
8. Using the keyboard to resize elements (Shift + Arrow Keys) now makes use of the Resize Anchors to move and resize child elements appropriately.
9. Spinner and Scroll Bar elements are now easier to move in the Professional edition. Now the button areas of Spinners and the paging area of Scroll Bars only operate when running the prototype.
10. Table elements with variable height, word-wrapped cell text now have better working scroll bars.
11. When making connections, existing connection lines no longer get in the way to prevent you from hitting your target.
12. Changing the Visual Style or Colour Scheme in the Preferences or Project Options now provides a real-time preview update in the Elements panel again, as it used to do.
13. Minor text clipping on Ribbon Bar Icon Button (Small) element when zoomed in now fixed.

As always, many thanks to everyone that has reported these bugs and made suggestions for improvement.

Now that we’re completely happy with the version 4.2 functionality, we can move forward with version 4.3 developments, and we’ve got some exciting new features waiting in the wings.

Using the Ribbon Bar elements already in GUI Design Studio, our new design library, application template and prototype sample make it easier for you to get started quickly.

1. Ribbon Library

The Ribbon Library contains:

• 15 common ribbon groups: Clipboard, Document Views, Editing, Font, Illustrations, Links, Pages, Page Setup, Paragraph, Sort, Styles, Symbols, Tables, Window and Zoom
• 3 pre-configured ribbons that use the groups: Home, Insert and View
• An application window, menu and quick access drop-down
• Various grids for colour selectors and generic item selections
• Other popups including a page size and symbol selector
   

Once you’ve added these to your design projects you can edit and expand them as necessary for your own application.

2. Ribbon Application Template

The Ribbon Application Template, for GUI Design Studio v4 Professional edition, provides you with an instant starting point for a ribbon bar application:

• 3 ribbon tabs with associated drop-downs in their own component design files, ready for editing: Home, Insert and View
• A main application window hooked up to the menu and ribbon tabs

3. “Wordsmith” Sample

The “Wordsmith” sample prototype application, also available from our Design Gallery, is a tribute to Microsoft Word.

Initially built from the Ribbon Application Template, it expands on the existing ribbon tabs and adds 3 new context sensitive tabs for “Picture Tools” and “Table Tools”.

A scrolling Document design demonstrates how to activate the context tabs when objects are selected within the document and also highlight those objects with a bounding box.

Note 1: GUI Design Studio v4 Express edition users can open and run this sample prototype, and explore the various tabs and drop-downs. However, it makes use of Professional edition features to activate context tabs and selection boxes, so these will be permanently visible.

Note 2: GUI Design Studio v3 users can also open this sample and get a similar experience to v4 Express users. However, the sample makes use of many Ribbon Library components and icons and the sample/library paths changed with v4. To view and edit the sample project in all its glory, you’ll need to install (unzip) the Ribbon Library to a new “Libraries” folder instead of the usual “Samples” folder:

   C:\Program Files\GUI Design Studio\Libraries\

Use them in your own ribbon design projects!

We’d love to hear your feedback so let us know what you think of these new Ribbon resources and how you get on with using them in your own projects.

Bugs Fixed:

1. Dragging and dropping elements from the design palettes now correctly sets the elements’ parents in all known cases.
2. Navigation from items within certain elements, when the mouse is over an overlaid Icon, now works correctly. This bug was introduced with bubbled events and Icon navigation in v4.2.110.0. It only affected Menus, Large and Small Ribbon Bar Icon Buttons plus Trees and Lists that used overlay icons.
3. The 4.2.111.0 scroll bar fix now works correctly on the Express edition.

Once again, many thanks to everyone that has reported these bugs!

This second update fixes a potential crash that could occur if you delete a grouped element then move or resize other elements that were in the same group. The crash does not occur if the element is un-grouped before deletion but has been fixed completely in the new 4.2.112 release today.

If you’re using version 4.2 (or 4.0/4.1), please download version 4.2.112 and install that in its place.

Special thanks to Craig and others that reported this bug.

Bugs Fixed:

1. Scroll bars on List Boxes, Trees and Multi-Line Edit Boxes were being enabled when they were redundant and should have been disabled. A fairly minor bug but it needed fixing.
2. The “Conditions” box part of Conditional Content Panels had become inaccessible for selection, moving or making connections. This important fix is the main reason for this immediate update.
3. The Viewer now correctly accepts a .gdd project distribution file as a command line parameter. Normally, the Viewer opens files through other mechanisms but this can be useful in some cases.

Many thanks to everyone that has reported these bugs!

For customers using version 4.0 or 4.1 of GUI Design Studio, simply install the new version and your existing licenses will continue to work. Be sure to install the correct Professional or Express edition though!

NEW: Play Sound

A simple “Play Sound” Storyboard element has been added for playing small WAV files in response to user actions. There’s also a corresponding new “Stop Sound” element.

Note that this is intended for short ‘system’ sounds and not for playing long audio tracks in multimedia application designs.

NEW: Resize Anchors

Resize Anchors have been added to all elements to automatically re-position and resize contained elements when an element is resized.

Top, Left, Bottom and Right anchors can be set to be Fixed, Proportional or nothing from the “Position” tab of the property editor or by clicking on the new Resize Anchor ‘lollipop’ graphics in the visual editor:


When you select multiple elements, the icons are only displayed on the primary slected element to avoid visual clutter but the change is applied to all selected elements.

You can turn the display of Resize Anchors on and off from the “View” menu or the new Shift+F8 hotkey:

The “Windows Library” has been updated (to v1.2) with Resize Anchors added to Dialog and Message Box custom element widgets allowing them to be easily added to designs and quickly resized from any corner:

…and after a little resizing on just the dialog frame:

Note that this is currently a design-time only feature to help with layout. Elements cannot yet be resized when running the prototype.

NEW: List Box Actions (Professional edition only)

List Box and Check List Box elements now support a few more action variables to allow simple manipulation of the list content:

• .add – Adds a comma separated list of items to the list.
• .addsort – Adds a comma separated list of items to the list then sorts.
• .delete – Deletes the items named in a comma separated list, or:
  • assigning the value “{all}” deletes all items and clears the list.
  • assigning the value “{selected}” deletes all selected items.

With these additions, it’s now possible to fully prototype designs that can add new items to lists and move items between lists:

Other Changes in v4.2

All editions

1. Parenting rules revised. You may see subtle differences when moving elements around in the editor.
2. Navigation links are now bubbled up so that clicking on an element that doesn’t have a connection itself will activate the first connection in its parent chain. This makes it possible to create compound elements (such as Buttons) by layering elements and have the outer, background element activate without the top layer elements blocking mouse clicks.
3. With bubbled links, Icons can now have direct connections instead of having to be placed on another connected element such as a Toolbar Button as in previous versions.

Professional edition only

4. When running the prototype and an element is hidden or disabled, all child elements also become hidden or disabled respectively. This is extremely useful for disabling groups of controls in a form.

Bug Fixes in v4.2

All editions

1. Distribution (.gdd) files now open correctly when the machine does not contain a drive with the same letter or path as the original project files from which it was created.
2. Table Element drawing fix for certain circumstances.
3. Crashes fixed for circumstances where design files are modified externally then refeshed in the editor then undo/redo operations applied.

Professional edition only

4. Elements with sub-variables now set their values when first activated instead of when their main value changes. This mainly effects Calendars, List Boxes and Trees.
5. Prototype information tool-tips now correctly display conditions containing ‘less than’ and ‘greater than’ signs (‘<' and '>‘) where previously the text might get truncated.
6. Combo Boxes now behave better with the transfer of data with their popup when variables are used and when designs are nested within Components.
7. Under certain, rare circumstances, during prototype execution when an Edit Box was initially given the keyboard focus, it could appear floating at a distance away from where it was supposed to be. This has now been fixed.

We have some interesting developments brewing for the next few releases. Feel free to leave a comment below and let us know what you think about the new version.

The iPhone Contacts application prototype example is based on the built-in Contacts application on the Apple iPhone. It was built entirely from elements within the library, very quickly.

Here are some of the key areas this example demonstrates:

• The typical structure for an iPhone application prototype project in GUI Design Studio.
• Putting together a Quick Concept flow of the application.
• The basic elements needed to create the screens.
• How a typical screen design is put together.
• How to create a scrolling section on a screen.
• Flipping between portrait and landscape oriented designs.

The project files can be downloaded from the example gallery page.

I hope this example will help you get your iPhone application prototypes off to a flying start!

For customers using version 4.0 of GUI Design Studio, simply install the new version and your existing licenses will continue to work. Be sure to install the correct Professional or Express edition though!

New Element Grouping in v4.1

This has been a long-standing request from users so we’re pleased to introduce element grouping into version 4.1. This will become an essential feature for creating more complex custom elements.

Grouped elements form a unit so that selecting and moving one element within the group will move them all together. Elements within a group can still be individually selected to resize them and change their properties and grouping does not affect parent/child relationships.

First select all of the elements you want to group together, then use the new “Group Elements” command on the right-click context menu (Ctrl+G hotkey):

You can also add elements into an existing group using this command. The “Ungroup Elements” command (Ctrl+Shift+G) will remove all selected elements from their respective groups.

Once grouped, selecting any of the elements within the group will display a dashed group box around all elements in the group and they will move as one for the following operations:

• Drag and drop moving of elements
• Keyboard moving of elements
• Alignment and multiple selection ‘group’ alignment
• Spacing elements evenly
• Swap element positions
• Send to Back / Bring to Front

Other Changes in v4.1

1. When duplicating designs, there is now a prompt to save changes to the original first if it is open in the editor and has been modified.
2. “Web Page Part” elements now only show their design-time border on the design where they actually exist. The border no longer shows up on Components containing the Web Page Part or on exported images.
3. Viewer Preferences changed to remove designer-only options.
4. (Pro edition only) Text substitution has been extended to practically all element text allowing a wider range of effects and realism.
5. (Pro edition only) Conditional Content panels now refresh their content on selection changes within List Boxes and Trees made using the keyboard as well as the mouse. This allows keyboard navigation to be used within a list to change the contents of a panel based on the selected item.

Bug Fixes in v4.1

1. Navigating to Thumbnail Components could ‘catch’ elements within the extended, full bounds of the Component. In some cases, this might result in extra elements appearing unexpectedly in the screen being navigated to. In other cases, involving Conditional Content panels navigating to the Thumbnail, this could set up an infinite navigation loop, resulting in a crash. This bug has now been fixed.
2. Entering design and/or element notes then switching back and forth between design document tabs could result in a crash in some instances. This behaviour does not appear to have been present prior to V4.0 and has now been fixed.
3. Notes fields will now only accept text pasted from the clipboard. Previously, it was tantilisingly possible to paste in images and OLE objects which appeared initially but were not saved or maintained in any way. Maybe this will be allowed in the future.
4. Copying and pasting Thumbnail Components now maintains correct positioning instead of placing them all at the mouse cursor location.
5. Copying and pasting sets of Radio Buttons now correctly maintains their selection group states.
6. Minor drawing fixes made to Vista style Edit Boxes when a custom border colour is chosen to allow it to blend into the background more easily. The auto navigation ‘o’ symbol on buttons also fixed for certain situations.
7. Issues related to scrolling component regions have been fixed.
8. Certain navigations involving multiple Tab Bars being switched in and out, especially using Conditional Content panels (Pro edition only), could result in multiple Tab Bars and panels being active and visible on top of each other at the same time. A fix has been made but it’s possible this may result in new unexpected behaviour, though none has been found yet.
9. (Pro edition only) Conditional expressions now correctly accept sub-variables using dot (‘.’) notation. For example, “MyListBox.index”.
10. (Pro edition only) When editing Project Variables (creating project-level sets of data variables), entering a blank variable value then selecting different variables in the list resulted in unexpected behaviour and crashing in some cases. This has now been fixed.

This is also a really useful way of sharing your designs. If you work in a team, or in an organisation that creates multiple products, you can share complete designs, templates of multi-page design patterns or individual components. Not only does this help save lots of time, it also promotes consistency and best practice in your designs.

What’s been missing is an easy way for you to get access to design libraries and to share your own.

So we’ve just launched www.guidesignpatterns.com where you can download libraries, templates, samples and patterns, and make your own contributions to the community. So, even if you work on your own, you’ll be able to benefit from the work of others and to share your work with them.

Our aim for this site is to build up an extensive resource of common design patterns and elements to help you create your prototypes as quickly as possible.

Contributing your own designs is as easy as sending an email. To help structure and search the database of samples there are some simple guidelines to follow in submitting your work. Things like how to set the right tags and what files to attach.

To help you download and make use of the designs on the site, we’ve prepared three posts to take you through the process for libraries, templates and samples.

There’s also a helpful link within GUI Design Studio to go straight to the set of available libraries from the “New Project” dialog:

And there’s another link within the template browser to take you to the templates on the site:

We’ve started the ball rolling by adding an updated Web Widgets Library and some other templates and samples. We’ll be adding lots more in the next few weeks, so you may want to follow the RSS feed, or bookmark the home page.

We look forward to seeing some of your useful patterns on the site too.