Expanded Tables and Data in GUI Design Studio 4.4

August 23rd, 2012

New Version 4.4The new 4.4 versions of GUI Design Studio Professional and Express, along with a new Viewer, are now available for download.

For users of versions 4.0 to 4.3, this is a free upgrade and the Viewer is, of course, always free. Users of GUI Design Studio version 3 or below can install v4 in parallel and try it out before upgrading.

We had two primary goals for version 4.4:

  1. Introduce new Data functionality based on CSV data table files.
  2. Bring the interactivity of Table elements more into line with other elements.

We’ve also made a few other tweaks and fixed some bugs along the way. While most of these new features are only applicable to the Professional edition (and the Viewer), many of the tweaks and bug fixes also apply to the Express edition.

New CSV Data Features [Pro only]

Data tables are CSV text files containing rows and columns of data. They act like tables within a relational database. The first row contains the name for each field in the table and each subsequent row represents a data record.

The new Data panel provides access to CSV files stored within your project:

The New Data Panel


The Help file has a brand new chapter that describes “How to Use Data Tables” so I won’t go into detail here. We have big plans for extending the capabilities of data tables but there’s still a lot you can do with them now to display data and navigate between data records within your prototypes:

Data Record Navigation


Enhancing the Table Element

Not to be confused with the new data tables feature, here’s a quick Table element example, showing off some of the changes, without the need for any overlay elements:

Fruit Table

Up until now, the Table element has been rather static. You could scroll the content and, through properties, indicate selected rows but you couldn’t interact with it further. Adding interactive features has been a primary request from users.

  • Row Selection [Pro only]: We’ve now added interactive row selection with keyboard navigation and multiple row selections using mouse clicks combined with the Shift and Ctrl keys, just like Lists and Trees.
  • Row Navigation: As with the other controls, you can now make connections from individual Table rows to add actions and other navigational behaviour. Sometimes you want to perform some action regardless of which row is selected. In that case, hold Ctrl down while making the connection to link from all rows as one. This also works for List elements!
  • Column Type:¬†For presentation purposes, you can now select the data type for each column as Text, Image, Icon or Checkbox. These determine how the column data is rendered:
    • Text is text and renders as before.
    • Checkbox columns should have a value of 0 for unchecked, 1 for checked or 2 for unspecified.
    • For Images, the data must be a project-relative path to the image file, including the file extension.
    • Icons specify the name of the icon within the project’s Icons folder.


  • Variable Support [Pro only]: With the new selection capabilities, Tables can now be assigned to a Variable, just like List and Tree elements, with similar sub-variables. Since Tables have multiple columns, a new property lets you select which one contains the significant data to return for selected rows.
  • Data Integration [Pro only]:¬†Tables can be attached to a CSV data table. When the prototype is running, it will take its data from there instead of using design-time data. In future, any changes the prototype makes to the underlying data table will be reflected in the Table element automatically, but that’s for later! Note that List elements also have this new ability.


Animation [Pro only]

This almost went under-the-radar as one of those relatively small features that could make a big difference, especially for all those people that asked for it.

We’ve added native support for animated GIF files. Very useful for loading graphics like this:

Colour Loading Spinner

These will also work as spliced, resizable images and when monochrome mode is engaged.

The second animation feature is the ability to transition integer variables between any two values over a specified time frame. And that includes the possibility of animating the active record of a data table or a conditional content selector, opening up many options for slideshows and other presentations.

Animating A Slideshow

What makes this even more useful is the ability to set onward actions and navigations once an animation has completed, including further, chained animations.

Definitely something to have fun with!


Other Changes

  • Variable support added for icons and images. This works in the same way as Table image and icon columns.
  • Import images command added.
  • Node text colour and italic option added to Trees.
  • Opening folders in Explorer also select files now.
  • System menu crash fixed.
  • Element interaction on top of components fixed.
  • Replace Window fix for nested components.
  • Frame Window elements fixed for monochrome Vista style.
  • Horizontal Scroll Bars fixed for right-to-left mirroring.
  • Table header hit testing fixed for horizontal scrolling.


We hope you enjoy using the new features in GUI Design Studio v4.4. As we get busy on the next release, please let us know how you get on by leaving a comment below, contacting Support through the usual channels, or on the new Forums.

Happy designing!



Comments are closed.