Ribbon Bar App Prototype Library, Template and Sample Released

February 11th, 2011

Now you can get a massive head start when designing applications based on the ribbon bar user interface paradigm that originated with Microsoft Office 2007.

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.