Flamingo 4.2 official release

November 2nd, 2009

I am excited today to announce the availability of the final release for version 4.2 of Flamingo component suite (code-named Hiolair). It is a stabilization release that adds a few minor features and fixes all known bugs.

Here is the list of minor features added in release 4.2:

If you want to test the ribbon in your applications, you would need the following (the last two only for applications running under Substance look-and-feel):

You are more than welcome to take Flamingo 4.2 for a ride and report any problems in the project mailing lists, forums or issue tracker. To see Flamingo ribbon in action, run the following WebStart demo:

The demo above works for the core look-and-feels. To see the ribbon under Substance, run the following WebStart demo:

Here are a few screenshots showing the new features in 4.2:

https://flamingo.dev.java.net/release-info/4.2/ribbon-appmenu-defaultcontent.png

https://flamingo.dev.java.net/release-info/4.2/command-buttons-no-icon1.png

https://flamingo.dev.java.net/release-info/4.2/command-buttons-no-icon2.png

Comboboxes in Substance 6.0

October 27th, 2009

One of the items on the roadmap for version 6.0 of Substance look-and-feel (code-named Sonoma) is to polish the appearance of existing components. Today i’m going to talk about visual enhancements done for the comboboxes in the latest 6.0dev drop of the library.

In Swing there are two distinct types of comboboxes – editable and uneditable. This is controlled by the JComboBox.setEditable API. An uneditable combobox behaves essentially as a menu button – no matter where you click on the control, it brings up a popup menu with available elements. An editable combobox allows typing in a new value (with possible auto-completion available from third-party libraries), as well as showing a popup with available elements by clicking a small button “embedded” in the combobox.

The latest 6.0dev drop of Substance features visual overhaul of these two types of comboboxes. It addresses the following points:

  • Bringing the appearance of uneditable comboboxes in sync with core Swing buttons and Flamingo command buttons. As i said earlier, an uneditable combobox is a menu button, and as such, it should look like a button.
  • Bringing the appearance of editable comboboxes in sync with the text fields:
    • Adding more contrast to screens that use editable comboboxes as user input fields – by creating an “inset” look
    • Modernizing the appearance of these controls – by smoothing the corners and borders

In addition, the visual appearance of both combobox types should not expose the inner implementation – this is seen in most core and third-party look-and-feels (as well as in older Substance releases) where the innards of JComboBox – namely a text field and an arrow button are clearly seen on the screen.

Here is a screenshot with a few comboboxes under the Dust Coffee skin in release 5.3:

https://substance.dev.java.net/release-info/6.0/comboboxes-dustcoffee-old.png

and here are the same controls under the latest 6.0dev:

https://substance.dev.java.net/release-info/6.0/comboboxes-dustcoffee-new.png

When the mouse is moved over the arrow area of the editable combobox, it fades in the fill and border:

https://substance.dev.java.net/release-info/6.0/comboboxes-dustcoffee-new-rollover.png

The same comboboxes under the Business skin in release 5.3:

https://substance.dev.java.net/release-info/6.0/comboboxes-business-old.png

and under the latest 6.0dev drop:

https://substance.dev.java.net/release-info/6.0/comboboxes-business-new.png

The same comboboxes under the Gemini skin in release 5.3:

https://substance.dev.java.net/release-info/6.0/comboboxes-gemini-old.png

and under the latest 6.0dev drop:

https://substance.dev.java.net/release-info/6.0/comboboxes-gemini-new.png

Finally, the same comboboxes under the Graphite skin in release 5.3:

https://substance.dev.java.net/release-info/6.0/comboboxes-graphite-old.png

and under the latest 6.0dev drop:

https://substance.dev.java.net/release-info/6.0/comboboxes-graphite-new.png

In addition to reworking the visuals, the latest 6.0dev drop also addresses the alignment and baseline consistency of all relevant controls. I have talked about precise micro-design back in September 2006 and in September 2007 (the links show how Substance has evolved over the years). Revisiting this topic once again, i first want to show a screenshot:

https://substance.dev.java.net/release-info/6.0/button-combo-commandbutton-alignment.png

Here we have four different components:

  • Swing core button
  • Swing core uneditable combobox
  • Flamingo command action button
  • Flamingo command menu button

This screenshot illustrates the precise micro-design of the latest 6.0dev drop of Substance, enforcing the same preferred height on all these controls. As Flamingo command button is a functional extension of core Swing buttons, and uneditable combobox is nothing else than a menu button, they all should have the same height – and they do. More on this subject later.

Note that this is still work on progress, and you’re more than welcome to leave comments on the new look.

I am pleased today to announce the availability of release candidate for version 4.2 of Flamingo component suite (code-named Hiolair). It is a stabilization release that adds a few minor features and fixes all known bugs.

Here is the list of minor features added in release 4.2:

If you want to test the ribbon in your applications, you would need the following (the last two only for applications running under Substance look-and-feel):

You are more than welcome to take Flamingo 4.2RC for a ride and report any problems in the project mailing lists, forums or issue tracker. The final release is scheduled for November 2. Only bugs will be fixed until that date.

To see Flamingo ribbon in action, run the following WebStart demo:

The demo above works for the core look-and-feels. To see the ribbon under Substance, run the following WebStart demo:

Here are a few screenshots showing the new features in 4.2RC:

https://flamingo.dev.java.net/release-info/4.2/ribbon-appmenu-defaultcontent.png

https://flamingo.dev.java.net/release-info/4.2/command-buttons-no-icon1.png

https://flamingo.dev.java.net/release-info/4.2/command-buttons-no-icon2.png

Flamingo component suite provides a pure Swing implementation of Office 2007 ribbon component, and the latest 4.2dev drop of the core library has enhanced the support for ribbon application menu to provide default content of the secondary menu panel.

The application menu button is a big round button in the top left corner of the ribbon:

https://flamingo.dev.java.net/release-info/4.2/ribbon-appmenu-notshowing.png

It is not a direct replacement for the usual application menu bar, but rather a place to hold actions that (as a general rule) do not affect the visual content of the document – such as saving, printing, sharing etc. When the application menu button is clicked, it shows a panel with two levels of actions:

  • Primary action
  • Secondary actions for the selected primary action

For example, a primary “Print” action will have a number of secondary actions to print the document as is, print from a dialog with all the options or open the print preview. In order to specify secondary actions, use the RibbonApplicationMenuEntryPrimary.addSecondaryMenuGroup API:

RibbonApplicationMenuEntryPrimary amEntryPrint = new RibbonApplicationMenuEntryPrimary(
      new document_print(), "Print", new ActionListener() {
         @Override
         public void actionPerformed(ActionEvent e) {
            System.out.println("Invoked printing document");
         }
      }, CommandButtonKind.ACTION_AND_POPUP_MAIN_ACTION);
amEntryPrint.setActionKeyTip("P");
amEntryPrint.setPopupKeyTip("W");

RibbonApplicationMenuEntrySecondary amEntryPrintSelect = new RibbonApplicationMenuEntrySecondary(
      new printer(), "Print", null, CommandButtonKind.ACTION_ONLY);
amEntryPrintSelect
      .setDescriptionText("Select a printer, number of copies and other printing options before printing");
amEntryPrintSelect.setActionKeyTip("P");
RibbonApplicationMenuEntrySecondary amEntryPrintDefault = new RibbonApplicationMenuEntrySecondary(
      new document_print(), "Quick Print", null,
      CommandButtonKind.ACTION_ONLY);
amEntryPrintDefault
      .setDescriptionText("Send the document directly to the default printer without making changes");
amEntryPrintDefault.setActionKeyTip("Q");
RibbonApplicationMenuEntrySecondary amEntryPrintPreview = new RibbonApplicationMenuEntrySecondary(
      new document_print_preview(), "Print Preview", null,
      CommandButtonKind.ACTION_ONLY);
amEntryPrintPreview
      .setDescriptionText("Preview and make changes to the pages before printing");
amEntryPrintPreview.setActionKeyTip("V");

amEntryPrint.addSecondaryMenuGroup("Preview and print the document",
      amEntryPrintSelect, amEntryPrintDefault, amEntryPrintPreview);

At runtime when the user moves the mouse over the “Print” entry in the left panel, the matching secondary entries are shown on the right:

https://flamingo.dev.java.net/release-info/4.2/ribbon-appmenu-rollovermenu.png

While most of the primary entries have a predefined (static) list of secondary entries, some require dynamic content. For example, the “Open” entry shows the list of recently open documents. In order to associate dynamic secondary content, use the RibbonApplicationMenuEntryPrimary.setRolloverCallback API:

RibbonApplicationMenuEntryPrimary amEntryOpen = new RibbonApplicationMenuEntryPrimary(
      new document_open(), "Open", new ActionListener() {
         @Override
         public void actionPerformed(ActionEvent e) {
            System.out.println("Invoked opening document");
         }
      }, CommandButtonKind.ACTION_ONLY);
amEntryOpen
      .setRolloverCallback(new RibbonApplicationMenuEntryPrimary.PrimaryRolloverCallback() {
         @Override
         public void menuEntryActivated(JPanel targetPanel) {
            targetPanel.removeAll();
            JCommandButtonPanel openHistoryPanel = new JCommandButtonPanel(
                  CommandButtonDisplayState.MEDIUM);
            String groupName = "Recent Documents";
            openHistoryPanel.addButtonGroup(groupName);
            for (int i = 0; i < 5; i++) {
               JCommandButton historyButton = new JCommandButton(i
                     + "    " + "document" + i + ".html",
                     new text_html());
               historyButton
                     .setHorizontalAlignment(SwingUtilities.LEFT);
               openHistoryPanel
                     .addButtonToLastGroup(historyButton);
            }
            openHistoryPanel.setMaxButtonColumns(1);
            targetPanel.setLayout(new BorderLayout());
            targetPanel.add(openHistoryPanel, BorderLayout.CENTER);
         }
      });
amEntryOpen.setActionKeyTip("O");

Here, the application code is responsible for clearing and populating the contents of the secondary panel. At runtime when the user moves the mouse over the “Open” entry in the left panel, the application callback is invoked to populate the secondary panel:

https://flamingo.dev.java.net/release-info/4.2/ribbon-appmenu-rollovercontent.png

The latest 4.2dev drop of Flamingo core library also allows the application code to specify the default content of the secondary panel. This is done with the new RibbonApplicationMenu.setDefaultCallback API. When set, it will be called when the ribbon application menu is shown, and when the currently active (under mouse) primary entry has neither secondary entries, nor rollover callback. In Office 2007 the default content of the secondary panel is the list of recently opened documents, but this API allows you to provide a custom implementation if necessary:

applicationMenu
      .setDefaultCallback(new RibbonApplicationMenuEntryPrimary.PrimaryRolloverCallback() {
         @Override
         public void menuEntryActivated(JPanel targetPanel) {
            targetPanel.removeAll();
            JCommandButtonPanel openHistoryPanel = new JCommandButtonPanel(
                  CommandButtonDisplayState.MEDIUM);
            String groupName = "Default Documents";
            openHistoryPanel.addButtonGroup(groupName);
            for (int i = 0; i < 5; i++) {
               JCommandButton historyButton = new JCommandButton(i
                     + "    " + "default" + i + ".html",
                     new text_html());
               historyButton
                     .setHorizontalAlignment(SwingUtilities.LEFT);
               openHistoryPanel
                     .addButtonToLastGroup(historyButton);
            }
            openHistoryPanel.setMaxButtonColumns(1);
            targetPanel.setLayout(new BorderLayout());
            targetPanel.add(openHistoryPanel, BorderLayout.CENTER);
         }
      });

When the default callback is invoked at runtime (under one of the two scenarios mentioned above), it populates the secondary panel:

https://flamingo.dev.java.net/release-info/4.2/ribbon-appmenu-defaultcontent.png

If you want to see the enhanced application menu button in action, run the following WebStart demo:

The demo above works for the core look-and-feels. If you want to see this functionality under Substance, run the following WebStart demo:

If you want to test the new functionality in your applications, you would need the following (the last two only for applications running under Substance look-and-feel):