GUI Design Studio 4.5 Released With Enhanced Data Handling And Scrolling Regions

February 18th, 2013

The new 4.5 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.4, 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.

The Professional edition of version 4.5 contains enhanced data handling features while all editions benefit from some nice little changes to component scrolling regions.

There are also a number of other small changes and 13 bug fixes.

Enhanced CSV Data Features [Pro only]

Building on from the CSV data features introduced in version 4.4, you can now make even better use of data within your application prototypes.

New Data Editor

Relying on the use of external CSV data file editors was never going to be optimal and was only intended as a short-term solution.

If you’d like to continue using Microsoft Excel, or other application, as your CSV file editor, there’s a Preference option to allow you to do this. Otherwise, the default will be to open up the new, internal editor:

 

While this is a simple editor, it has all you need to create and edit data files, including full undo and redo capabilities.

There’s also a nice function to fill a column with unique ID values to allow record (row) identification and relationships between data tables.

Create, Read, Update and Delete (CRUD)

In version 4.4 you could navigate between records an display data but you couldn’t modify it.

Vesrion 4.5 lets your prototypes Create, Read, Update and Delete records from data tables with these additional action elements:

 

Now, if you want to, you can test out your interface to properly experience the flow of creating new data or to see what should happen when you delete every record.

But you don’t have to worry about messing up your CSV files that you spent all that time carefully filling with useful test data.

GUI Design Studio will save all changes to temporary session files so all changes made while running the prototype are still there for the next test run, but you can restore the original CSV data at any time.

 

Filters and Queries

In any real application, you rarely work with the entire set of records from a single data table. Instead, you extract filtered sets of records and build new tables from relationships between other tables.

The new Run Query action element lets you do this by combining records from multiple data tables, referencing data from lookup tables and specifying filter conditions:

Here’s a complex Query that joins data from two tables (Albums and Artists) while looking up data in a third (Genres, highlighted) and filters on both album and artist names that contain a given search value:

 (click the image for a full size view)

Scrolling Without Scroll Bars

You can put large content into a scrolling region by placing it in a separate design file then including that as a resizable Component. A property option lets you lock it to the size you specify.

That put scroll bars on the Component so you could, well… scroll the content.

That’s fine until you start designing touch-based mobile applications where scroll bars are not wanted. Until now, you had no choice but to include scroll bars anyway and simply note the fact that the real app wouldn’t have them.

But now you have the option to turn the scroll bars off completely, always display them, or use the previous automatic behaviour where scroll bars are only shown when needed:

 

So, if you turn off the scroll bars, how do you scroll?

The answer is to “Allow Drag Scrolling” so you can scroll by dragging with the mouse or by using a touch-screen monitor. You can also “Use Inertia” to support a flinging gesture that will use drag velocity to continue scrolling. Both of these options are available with or without scroll bars.

Drag scrolling is also smart enough to know whether you’re trying to scroll an element within the content, such as a List Box or another scrolling region.

 

An example with animated step scrolling

Let’s start with a large content design containing a bunch of movies with title captions:

 

And here’s a simple panel design that includes the large content design as a component, using the property settings shown in the dialog above:

 

For added interest, we’ve connected a couple of navigation buttons at each end to some animations that will smooth-scroll to the next or previous image. That’s right, components can now be assigned a variable with access to various scroll properties and a positional offset.

Running the design lets you drag and fling the movie image list, or use the navigation buttons, with not a scroll bar in sight:

 

Other changes in version 4.5

All editions:

• New “View | Navigation Components” command (Ctrl+Shift+F8 hotkey)
  • To help with editing complex designs where many connections can obscure underlying elements, this new view option allows them to be temporarily hidden.
  • This works on a per-view basis and is not remembered between sessions.
• New “Show” event trigger
  • This allows navigation to be activated when a window appears, for example, after “Show Window” or “Modal Popup”.
  • This will typically be used to Set Data or Run Queries.
  • Note that it only works on the main window being shown and not on any contained elements.
• Additional navigation from primary elements
  • Web Page, Web Page Part and Frame Window elements are now allowed to be the source of a navigation, mainly to support the new “Show” event trigger.
  • Frame Windows now also allow for a separate navigation from their client areas.
• Display optimization tweaks
  • Optimization tweaks to help keep the display updated with data and selection changes, especially with Message Box pop-ups.
• Stabilized Popup Help topics
  • Popup Help topics now try to stay in one place when clicking on related links rather than having to chase them around the screen.
  • To see them in action, try right-clicking controls in dialogs or hitting F1 from time-to-time!

Professional edition only:

• New expression functions
  • LISTADD, DATA, LOOKUP, POWER, ROUND, MROUND, RANDOM.
  • Take a look at the “Expressions Reference” in the Help to see what they all do.
• Improved integration of data records
  • Table and List elements now better integrate and synchronize with data records.
  • Record selection in one directly affects the other.
  • Tables may be sorted in a different order than the data table itself.
• Default content in new CSV data files
  • New Data Files now have some simple default content to act as example data.
  • This is also an attempt to help Microsoft Excel make more sense of the file and behave properly (when not using the internal CSV data editor, though this only partially helps anyway).

Bugs fixed in version 4.5

• Fix to image files being locked.
• Fix to Mouse Over crash with Modal Choice Popups.
• Fix to crash with empty, sorted List Box.
• Fix to nested conditional/component interaction bug.
• Fix to nested scrolling components problems.
• Fix to hidden nested component blocking interaction.
• Fix to Tables and List Boxes using data records without a variable.
• Fix to Modal Choice Popup and data record selection.
• Fix to dynamic popup List Box item selection.
• Fix to self-referencing variable expression assignment.
• Fix to inappropriate controls appearing in List Box Data editor.
• Fix to Edit Boxes with substituted text.
• Fix to multiple expressions in substituted text.

 

We hope the new features in GUI Design Studio v4.5 help you with your software mock-ups and prototypes. Let us know how you get on by leaving a comment below,  contacting Support through the usual channels, or on the Forums.

Happy designing!