Skip to main content

Ribbon and drop-down galleries

Posted by kirillcool on November 10, 2005 at 1:11 PM PST

For those who have missed, here are the previous two blog entries that showcase Office 12 ribbon component and discuss its Java implementation:

Since, the Java implementation of Ribbon has improved substantially. After you are done with this entry, you are welcome to run the Web Start demo, resize and click on various ribbon components (especially on those shown in the screenshots).

If the heart of the new Office UI is ribbon, than the soul is a gallery. You are welcome to see this movie (618 MB, 41 minutes) or browse to Jensen's blog to see Office galleries. Basically, there are two types of galleries. The first type is simple - you click on some button (say "Format text") and a drop-down (or more formally popup) window is displayed. This window contains a collection of icons, each icon visually representing the action that will be performed when this icon is selected. The second type is integrated directly into the ribbon and is internally called "in-ribbon gallery". Such gallery resides directly in the ribbon space (taking as much space as it can), and provides two scrolling buttons and a drop-down button that shows the entire gallery.

Here is how it looks in Java implementation:

In-ribbon gallery (group of five icons to the left) with vertical strip of scroll and popup buttons - click to see fullsize version:




The same in-ribbon gallery with popup button clicked - the popup window containing the whole gallery is shown. Note the custom layout of icon gallery, providing options for grouping icons into logical groups and providing custom-set dimension of the popup itself with as-needed scroll. Click to see fullsize version:




The same popup gallery is opened from a simple gallery button (Theme Gallery) on the same task - click to see fullsize version:




Additional resizing behaviour of Ribbon tasks can be seen when there's too little space left to show all controls of a ribbon band (even as small icons). In this case, the entire band is shown as a single button (with "stacked" version of its main icon). Clicking on this button brings up a popup window that contains all the controls in the band (with the desired size). The controls in popup window behave in exactly the same way as they did in the ribbon, providing cascading popups.

The entire Theme band has been collapsed to a single button. Clicking on this button brings up a popup with the band controls - click to see fullsize version:




Clicking on a popup button of the in-ribbon gallery that is shown in popup brings up cascading popup with the entire gallery - click to see fullsize version:




Clicking on a regular button that is shown in popup brings up cascading popup with the entire gallery (finding the deepest common ancestor with the currently shown popup cascade and closing all its descendants) - click to see fullsize version:




As usual, the entire code (including complete Javadocs) is available at Flamingo project (the Ribbon itself can be run without Substance LAF). Currently, only one popup gallery layout has been implemented (extend IconPopupGallery). See how easy it is to create a fully-functional ribbon popup gallery using this layout:

   public SubstanceThemePopupGallery(final JFrame frame) {
      // set maximum width, maximum height (as-needed vertical scroll
      // bar will be shown) and height of a single icon row

      super(350, 400, 80);

      Map<ThemeKind, IconGroup> groups = new HashMap<ThemeKind, IconGroup>();
      // use createNewGroup function to create icon group at desired visual index
      groups.put(ThemeKind.BRIGHT, this.createNewGroup("Bright themes", 0));
      groups.put(ThemeKind.COLD, this.createNewGroup("Cold themes", 1));
      groups.put(ThemeKind.DARK, this.createNewGroup("Dark themes", 2));

      Map<String, ThemeInfo> themes = SubstanceLookAndFeel.getAllThemes();
      for (Map.Entry<String, ThemeInfo> entry : themes.entrySet()) {
         final String themeClassName = entry.getValue().getThemeClass();
         try {
            Class themeClass = Class.forName(themeClassName);
            SubstanceTheme themeInstance = (SubstanceTheme) themeClass
                  .newInstance();
            // use addIcon to add new icon to some icon group. The icon has:
            // The graphic icon itself
            // Optional title (will be displayed as two-line caption)
            // Action listener (will be activated on mouse click)

            groups.get(entry.getValue().getThemeKind()).addIcon(
                  new ThemeResizableIcon(themeInstance, 60, 40),
                  entry.getKey(), new ActionListener() {
                     public void actionPerformed(ActionEvent e) {
                        SwingUtilities.invokeLater(new Runnable() {
                           public void run() {
                              JPopupGallery.hidePopups(null);
                              SubstanceLookAndFeel
                                    .setCurrentTheme(themeClassName);
                              SwingUtilities
                                    .updateComponentTreeUI(frame
                                          .getRootPane());
                           }
                        });
                     }
                  });
         } catch (Exception e) {
            continue;
         }
      }
   }
Related Topics >>