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.
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:
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:
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.