### DRAFT VERSION - WORK IN PROGRESS ###
Applies to: GUI Design Studio v4.4+
You want to create an application design based around the Microsoft Office 2010-style ribbon bar with the "File" tab and the "Backstage View" but GUI Design Studio (currently) only contains elements for the Office 2007-style ribbon.
The primary difference between Office 2010 and Office 2007 is that the application menu drop-down has been replaced by the new "File" tab at the start of the Ribbon Bar and the new, full-screen "Backstage View" it presents.
While we intend to add specialized elements to support the new view, you can get a very close approximation with the latest versions of GUI Design Studio (v4.4+) and a little bit of leg work creating some reusable design widgets.
To get you started, there's a few attached to the bottom of this article in the form of a demo project!
- Ensure the Ribbon Library is installed to start with
- Start from the Ribbon App Template (or skip all this and use the attached Demo project template)
- Delete the Application Menu and icon since they're no longer needed
- Adjust the positioning of the Quick Access Bar and its margins, etc.
- Add a "File" tab to the Ribbon Bar
- Create the Backstage View designs
- Create a master Backstage View storyboard design to hook them all together with navigation
- Add that to the Main design and hook it up to the "File" tab
- Add a Web Tab overlay for the "File" tab so that it is permanently highlighted (in blue)
How it Behaves
The general behaviour is very close to what you'd expect. When you click on the "File" tab, the previously open tab is deselected and the Backstage View appears covering the whole application window (so long as you made it the right size).
You can navigate to views within the menu and sectional sub-views within each view. This is standard GUI Design Studio design navigation with component designs and other techniques.
When you click on another ribbon tab, the Backstage View is hidden and everything returns to normal. Clicking back to the "File" tab will display the last view that was active.
Minor behaviour that doesn't work
Hitting Escape on your keyboard will not close the Backstage View and return to the previously open ribbon tab. Escape in GUI Design Studio closes the top-most modal layer and the Backstage View is not a modal layer. What will most likely happen is that your application will close and exit the prototype.
Clicking the "File" tab a second time will not close the Backstage View and return to the previously open ribbon tab. Actually, it would be possible to work this into the design using some Set Data boxes and conditional logic but the extra complexity is not worth it for prototyping purposes.
In some cases, you might want to activate certain views and sections in the Backstage View from elsewhere in the interface. Although you can activate specific ribbon tabs through Set Data, and therefore activate the Backstage View itself (tab 1), jumping to a specific view is not possible with the current design approach. Instead, you would need to use data variables and restructure the design using conditional content. Again, for the rare cases this is required, a simple note or annotation on the design would be much more practical use of effort.
Demo Project Screenshots
Here are a few screenshots of the attached "Ribbon 2010 Demo" project in action. Note that the project is only concerned with the Ribbon itself and the Backstage View. It does not contain any document content.
1. The "Home" tab starting point:
2. The Backstage View with the "Info" view open:
3. The Backstage View with the "Recent" view open:
4. The Backstage View with the "Share" view and "Send Using E-mail" section open:
5. The Backstage View with the "Share" view and "Send to Web Server" section open. Okay, so this one's left as an exercise for you but the main point here is that you can switch between views and also nested sections within a view:
There are 4 files attached below:
- Ribbon2010Demo.zip is a prototype demo distribution containing the design distribution and Viewer. Unzip it into its own folder then run the command file. It should be fairly obvious. However, if you have GUI Design Studio Professional 4.4 or the Viewer already installed, all you'll need is the following file instead...
- Ribbon2010Demo.gdd is the prototype distribution file that will open and run in GUI Design Studio Professional or Viewer version 184.108.40.206 or above.
- Ribbon-2010-Demo.zip (the one with the hyphens) contains all the raw design files for the project. If you have the Ribbon Library installed, you should be able to open this up in GUI Design Studio Professional end edit the files, or copy them into your own project.
- Ribbon 2010 Demo.gdt is the magic template file that you can install in GUI Design Studio Professional then use to create new projects based on it or insert into an existing project. You'll need the Ribbon Library installed first, though.