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.

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.

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.

Version 4 has some fantastic new features in which help you get a working prototype in the hands of your users and engineers even faster.

Extended interaction functionality means your user interfaces can be even more realistic than ever with working with data values, conditional content and business rules driving navigation. Custom Elements and Templates let you and your colleagues share your work on multiple projects with ease.

We have some great new features planned for later in the year that will be available free of charge to v4 license holders.

Now is a great time to take advantage of the powerful prototyping features that GUI Design Studio provides, and if you’re an existing user, we’re sure you’ll want to upgrade.

But here is a little incentive…

If you purchase a new license or upgrade from a fully licensed copy of v3 by 31 March 2010, we’ll give you a 25% discount!

Here are the facts:

If you’ve been keeping up to date with V3 you’ll know that we’ve released some great features in the last 12 months including the huge Calendar element just last month, so keeping up to date makes sense.

To take advantage of this offer, simply visit the buy page and use coupon code V4-2TKAW8 on the order form, and your 25% discount will automatically be applied. But you’ll need to buy before the end of the month to qualify!

The new features are grouped around interactivity and element and design sharing. They enable you to build more realistic and interactive prototypes and to share or reuse individual elements or whole design templates with ease.

New editions

GUI Design Studio is now available in two different editions.

GUI Design Studio Express provides the prototyping functionality that was in v3, but focussed on individuals without the need to share projects and generate specification documentation.

GUI Design Studio Professional builds on v3, adding new interactivity and design sharing features, and is better suited to those working on larger projects, in teams, or on multiple designs.

All projects created in one edition will run in the other, or in the free viewer, except that the enhanced interactivity features in the Professional edition (see below) are not available in the Express edition. You can compare the two editions here.

Prototypes get more interactive (Pro edition only)

As your user interface design develops, everyone involved starts to focus on the details of interactivity. What process does the user need to go through to achieve certain tasks, how many button presses, how much navigation, is it clear and obvious, can they make simple mistakes?

All of these questions, and more, need to be considered in developing and refining a good UI and they cannot be addressed easily in a simple mock-up.

GUI Design Studio v4 introduces a range of new features to enhance the realism of your prototype, allowing you to model UI behaviour that depends upon decisions or input that the user has provided. We’re providing a whole set of flexible tools to make it easy to do this and more.

Simple Variables

Interaction controls depend upon simple variables. You choose a name for your variable in the new Prototype tab of the Properties dialog and that variable is then assigned a value when you run the Prototype and interact with the element.

Most elements can have an associated variable, even Trees and Ribbon Bars, and these variables can be shared among elements.

This variable can control other elements in various ways. For example, you could use it to insert a name that the user has entered into a piece of text, provide a default value, or you could drive a progress bar from other elements.

Variables are also tied into the Storyboard elements, as you can set up values from the new “Set Data” box. This allows you to reset variables in your UI to a particular set of values whilst running the Prototype. You might do this to simulate having different users, to reset the UI to its default value, or to jump to a particular state.

With project-level presets, it becomes even easier to repeatedly test or demonstrate different scenarios.

Handling Radio Buttons

Radio Buttons can be grouped so that they can act in unison.

Keyboard Control

Now that your users can start to interact with the design in a far richer and more realistic way, they are going to want to navigate around it using the keyboard just as they will in the finished user interface.

To do this you can click to gain focus on an element and use the Tab key to navigate around. The Spacebar changes the state of an element and the Enter key will “Close and Accept”, or the Escape key will “Close and Cancel”. Just like the real thing.

Control when to Show or Enable controls using conditions

Not only can you control the value and text in an element, you can also control when an element is enabled and when it is visible. That means that you can make additional controls appear or disappear depending upon which options the user has selected, or make sure that the next logical control is automatically enabled based on the user’s selection.

Conditional navigation in different scenarios

Variables are firmly embedded in Scenarios and Conditional Navigation too. The Condition Box properties now include a “Condition” entry allowing you to control the flow of the user interface with more flexibility and clarity.

For example, you could set up conditional navigation to bring up a warning if the user tries to create a password of less than a particular number of characters, or to ask for confirmation of a destructive action if the user has set an option.

Wherever you need to test a condition or use the value of a variable, you can use a general expression to combine or process the values of your variables. A wide range of Boolean, binary, comparison, arithmetic, trigonometric and text operators and functions are included.

Conditional Content Panels

Conditional Panels (on the Storyboard panel) build on top of these conditions. Using a Conditions box, (like those in navigation scenarios), you can control what content appears within a particular area. In the example below, it controls whether a Log In panel is displayed or a Welcome panel depending upon whether the user has already pressed the “Log In” button.

The User Name also shows up on the Welcome panel when running the prototype, though it doesn’t show in design mode (as above). This example can also be easily extended to validate the User Name and Password.

Advanced Features

Once you’ve mastered the basics of interaction control you’ll be ready to start using the advanced features to prototype the behaviour of your UI in detail.

Text substitutions, for example, allow you to perform complex substitutions where text content, or a variable name and value, can be set from other variables. You can even combine multiple variables to build new ones; we’re calling these “translation variables”.

Whatever your application, we’re confident that you’ll find that these new interaction features make it much easier and quicker to build a more complete UI prototype, and still without writing a single line of code.

Creating and sharing libraries of designs and elements

Custom Elements

Any folder (and its sub-folders) within the Project tree can be made into a Custom Element Folder. The folder icon then changes to indicate its new status.

You can create Custom Element designs within the folder and any existing GUI design that you want to be used as a Custom Element can be dragged into it.

A Custom Element design can be as complex as you like, from a single pre-styled element to an entire form full of controls. You can still edit this design just by double clicking on it, so it’s easy to update and maintain.

When you drag a Custom Element design onto another design, the whole content is copied across as if you’d added the elements individually. At this stage, changes to the original Custom Element will no longer affect the new design.

That means you can then modify it in your design to suit the particular circumstances, changing the style, size and layout, and adding in specific information relevant to its context.

Custom Element Libraries

Custom element folders can be created in any project but they really come into their own when creating library projects full of reusable designs that you can link into your working projects.  These can contain house-styled elements, time-saving common groups of elements or entire design patterns.

Compared to Components…

Custom Elements are different from Components (also known as Masters) which remain linked to the original design. If you change the original Component design, each instance of use in your project will also change.

Although you can use overrides to change certain properties of elements within a Component instance, you can’t change their size or layout. They act as a single unit.

Among other things, Components are good for headers and footers on web pages, reusable panels and common dialogs; areas that you need to be consistent between many designs. They’re also very good for breaking your design into more manageable chunks, often with self-contained behaviour.

In comparison, Custom Elements are good for common patterns in your design that will most likely need to be customised for each use.

What if you want to add a Component to a design as a Custom Element? Well, you could put it into a Custom Element Folder first (perhaps as a copy), but there is no need. You can just hold down the CTRL key as you drag and drop it into your design and it will be added as a Custom Element instead.

Templates (Pro edition only)

Templates are a great way to start a whole project from a consistent pattern. Maybe you always like to have your projects set up with a particular set of pages, or with some standard elements that you always include. You could start with a copy of your last project, but a Template is a neater way to achieve it.

Templates can be inserted into an existing project so they can be used for creating complex, reusable design patterns that are beyond the single design restriction of Custom Elements.

A Template includes all GUI files and their contents, so loading a single template could set up lots of files, ready for you to dive straight into the design work.

Like Custom Elements, Templates are copied when they are loaded, so changing the original Template file will not change the projects that are based upon it. They provide a basis for you to edit and extend.

You can create a Template from your whole project, only the designs in the currently selected folder, or just the current design file. That makes it easy to turn what you’re working on into a Template for reuse in another project.

You can name the Template, categorize it, and choose to attach a representative screenshot to make it easy to find later. The new facility to export images from a running prototype can help here but if you don’t provide a screenshot, one will be generated automatically.

When you create a Template, it becomes available for immediate use within all projects. No library project linking is required.

Templates and Libraries Online

We’re in the process of setting up a new community site to publish and share Templates and Libraries containing reusable Components, Custom Elements and Design Patterns.

We’ve been waiting a long time to do this but with these new features in GUI Design Studio 4.0, it now makes more sense. The links are already in the software and the new site will go live soon. Stay tuned!

Download and Upgrade

You can download a 30-day trial of v4.0 here (either edition) and install it along side any existing version that you might be using.

Upgrading from an earlier version

GUI Design Studio version 4.0 is fully compatible with projects and files created in earlier versions but, of course, if you modify your projects to use the new interactive features of 4.0 Professional (such as Conditional Content Panels) then these will be ignored when re-opened in earlier versions.

If you want to experiment with the 4.0 features before committing to upgrading then it’s best to work from a copy of your project or create a backup first.

Purchasing

If you purchased version 3 on or after 1 December 2009 then we will be sending you a new v4 license key for each license you bought at that time, free of charge.

Otherwise, you can buy new licenses or low cost upgrades here. And look out for our special March promotional discount!

Tell us what you want!

As always, we welcome all your feedback and suggestions so that we can create the tools and features you want to use. We’re already working on prioritizing the current list for the next string of releases!

Please leave a comment to let us know how you get on and what you think of the latest release.

For customers using any prior version of GUI Design Studio, simply install the new version and your existing licenses will continue to work.

Calendar Elements

With so many requests from users, we’ve finally added Calendar elements to the mix. This was essentially the last missing native Windows control and a common feature in a vast number of desktop and Web applications.

So why has it taken so long to appear? Well, that’s a very good question. Right from the start, with the version 1.0 release 5 years ago, we realized that calendar controls were important. But rather than create complex elements for every conceivable situation, the idea then was to provide basic building blocks from which other elements could be assembled.

The very first design samples library contained various calendar controls with different display options. We thought that this would be enough for simple mock-up purposes. Well, clearly, we were wrong! Creating calendar controls from scratch using text boxes and other elements is both tedious and time consuming, especially if you don’t want a design that’s stuck in 2005!

So we’ve pulled out all the stops to bring you a very flexible Calendar element that should suit most purposes. There are 2 variants to get you started: one in the “Lists, Trees and Tables” category that represents your standard Windows month calendar, and one in the “Web” category with some very different styling options.

Now it has to be said that there are a lot of property options for the Calendar. With all of the other elements, we’ve tried to cut back on options and minimize them wherever possible. But there’s an increasing demand for more flexibility and more styling options so that’s what we’ve provided here.

Option overload is an important topic for usability so we’ll be revisiting this in a future post with a collection of Calendar element designs. In the meantime, see what fancy Calendars you can create for yourself.

Other Changes in this 3.6 Release

• The “Window” menu now contains some very handy new commands to “Close All” design windows and to “Close Others” so that you can focus on just the design you’re working on.
• Thumbnail Components now have the same ability as regular Components to be redirected to different design files through their property settings. This can be hugely useful, especially when working on Web applications, when you want to change the target of a link without having to delete the old target then drag and drop the new target and hook it up again.
• There’s a new Preference option to Disable Subversion (SVN) support. GUI Design Studio normally detects folders that are under Subversion control and automatically handles them appropriately. However, all Subversion clients on a particular machine must be based on the same version libraries (version 1.6 in this case), otherwise the working copies will be incompatible. This option is for users who are unable to upgrade their Subversion clients from version 1.5 or earlier.
• There’s another Preference option to disable a change we made in version 3.5 to enhance the File Open/Save dialogs by switching to Thumbnail view for images where appropriate. It’s possible that this feature caused compatibility problems (though we’ve been unable to reproduce or confirm these) so the option is there to turn it off.

Bug Fixes

• Using the right mouse button to cancel a drag and drop operation from the Project file tree, Elements or Icons panel no longer activates the popup context menu.
• Custom Tree Icons (added in version 3.5) are now correctly saved to distribution .gdd files.
• Custom Tree Icons are now maintained properly when the Tree is within a Component and has its properties overridden. Previously, in that situation, the icons would revert to the defaults if the icons were within the project (application and other external icons were okay).
• Some of the automatic connection types were not behaving as intended and reverted to “Modal Popup” instead of the correct type. This has now been fixed.
• There’s also a few other minor fixes related to command keyboard shortcuts and annotation popup text spacing.

Download and Upgrade

Download GUI Design Studio version 3.6 now and install it over your existing version. If you have purchased a license, your existing key will continue to work.

Version 3.6 is fully compatible with projects and files created in earlier versions but certain features, such as the new Calendar elements, will not be recognized by earlier versions of the software so be careful if sharing projects with others who haven’t yet upgraded.

Leave a comment to let us know how you get on and what you think of the latest release. As always, we welcome your feedback and suggestions!