The breadcrumb bar component from the Flamingo component suite has been mentioned a few times in the past, and now the official documentation has been reworked to reflect the current stable APIs. Here i will give a short overview of some of the main features.

Breadcrumb bar is a modern component that plays important part in Windows Vista Explorer and many web sites. It allows the user to keep track of his location within a program or document, efficiently utilizing the available screen estate. In the following screenshot, the file viewer panel is driven by the breadcrumb bar that navigates the local file system:

Breadcrumb bar can be used for navigating any tree-based structure, such as an SVN repository. In addition, Flamingo provides a utility class that wraps an existing JTree or TreeModel and exposes it as a breadcrumb bar with little additional programming. Here is the list of available implementations:

The org.jvnet.flamingo.bcb.BreadcrumbBar is the base class that provides the skeleton implementation of breadcrumb bar component. The org.jvnet.flamingo.bcb.core package provides specific implementations targeting a few popular structures. These are:

• BreadcrumbFileSelector for traversing a local file system.
• BreadcrumbSvnSelector for traversing a local or remote SVN repository.
• BreadcrumbMultiSvnSelector for traversing a number of local or remote SVN repositories.
• BreadcrumbTreeAdapterSelector for wrapping an existing JTree or TreeModel.

The detailed documentation has more information on wiring the core breadcrumb bar components to other application panels and on implementing a custom breadcrumb bar.

Flamingo component suite comes with a flexible and powerful component that hosts command buttons, providing support for button groups, single selection mode (for toggle command buttons), same icon state / dimension and automatic column layout. The official documentation for the base command button panel and file viewer panel have the detailed walkthroughs, and here i will give a short overview of some of the main features.

As noted earlier, one of Flamingo’s goals is to provide a small and cohesive set of powerful UI components that allow creating modern applications that provide visual functionality similar to or superseding that of Vista Explorer and Office 2007. The command button panel and its extension, file viewer panel, address the functionality commonly found in file explorer applications.

Here is a simple file explorer that uses the breadcrumb bar and file viewer panel with button state set to medium:

Here, the icon for image files come from the file itself (thumbnails), while the icons for other mimetypes are taken from the latest SVN snapshot of the KDE Oxygen project.

Here is the same exact application with big icons:

The icons are properly scaled and the inner layout of the buttons changed to reflect the new button state. What about custom large icons?

The same functionality, only controlled by the flexible slider (on the left hand side of the application frame). Note that the bottom-right button has the icon based on the actual JPG contents (scaled down), while the other three buttons sport resolution-independent sharp visuals from Oxygen SVG images.

Here is the same application under the tiled state – with extra line of information on each file:

The last screenshot is from a sample SVN browser that uses the same icon computation approach, tiled state and extra line of information on each file (fetched from the SVN repository and set on the corresponding command button):

You’re welcome to play with the latest 3.0dev drop of Flamingo and read the detailed documentation on command button panel and file viewer panel.

One of the basic building blocks in the Flamingo component suite is the command button component. Extending the existing core push button, it adds significant functionality, such as support for split and menu button modes, resizable icons, flexible dynamic layout, custom popup panels and more. The official documentation has the detailed walkthrough, and here i will give a short overview of some of the main features.

As noted earlier, all Flamingo components are written to look consistent under existing core and third-party look-and-feels. While the screenshots in this post show the command button under the default Ocean look-and-feel, you can use this component under any other look-and-feel that your application is using.

The first screenshot shows a command button under different states. Note how the icon size, the layout and the text presence change – this allows the application and the layout manager to make effective decisions on how to best utilize the available screen estate:

In addition to the usual “action area” (which is the entire button area under the default kind – the same as the core JButton component), the command button can have the “popup area”:

The actual division between the action area and popup area depends on the button kind – in the screenshots below notice the difference in the second row. The Cut button is defined to treat the text as part of the action area, while the Copy button is defined to treat the text as part of the popup area:

There are two ways to configure what happens when the popup area is activated. The first way is the simple one – configure a listener that gets called when a popup menu is about to be shown. The application code doesn’t need to worry about the menu creation, location or lifecycle.

The second, and much more powerful method is to attach a popup panel to the command button. The popup panel allows showing any Swing component / container in a popup window:

As with the simpler core popup menus, the popup panels can be cascaded, dismissed with ESC key or mouse events and are accessible via a global manager (API + registering listeners).

You’re welcome to play with the latest 3.0dev drop of Flamingo and read the detailed documentation.

After writing about the project vision and posting a few teaser screenshots, it’s finally time for the first source and binary drops of Flamingo component suite version 3.0 code-named Deirdre. Over the next few entries I will write more about each one of the components, how it fits into the project vision, how it is implemented and how you can use it in your application. Right now i will just give a brief overview of the components; if you’re interested in the code or the test applications, you can find those in the Documents & Files section and the CVS repository.

• The org.jvnet.flamingo.bcb contains the base class for the breadcrumb bar components, while the org.jvnet.flamingo.bcb.core contains pre-packaged core implementations that allow navigating local file system, wrap an existing tree model and navigate a remote SVN repository.
• The org.jvnet.flamingo.common contains most of the common components:
  • AbstractCommandButton and its extensions, JCommandButton and JToggleCommandButton provide powerful extensions to the core JButton and JToggleButton classes, adding optional popup action area (split buttons) and automatic resizability with adaptive layout.
  • JCommandButtonPanel is a host panel for AbstractCommandButtons with adaptive layout, groupings and optional single selection mode. It can be used to provide functionality similar to Windows Explorer or Leopard Control Panel.
  • AbstractFileViewPanel is an extension of JCommandButtonPanel with support for progress tracking and canceling, backed up by a SwingWorker. Sample usage is illustrated in test.imageviewer.Viewer that implements a simple image viewer (also shows an example of local file breadcrumb bar and resizable icons).
  • JPopupPanel is the base class that allows showing any Component in a popup window, with support for multiple (cascading) rich popup panels in the PopupPanelManager class . The JIconPopupPanel allows wrapping a JCommandButtonPanel in a popup with configurable scrolling and maximum width.
• The org.jvnet.flamingo.common.icon contains the classes for resizable icons. The base interface is ResizableIcon, extending the core Icon interface and adding a number of methods for resizability support. Other classes in this package provide utility implementations (such as ImageWrapperResizableIcon that creates a resizable icon from a specified image).
• The org.jvnet.flamingo.ribbon contains the implementation of Office 2007 ribbon component. It reuses the vast majority of other Flamingo components such as JCommandButton, JToggleCommandButton, JPopupPanel, JIconPopupPanel and ResizableIcon.
• The org.jvnet.flamingo.svg contains classes that allow showing an SVG image as a ResizableIcon and to transcode SVG image to the matching Java2D code. The implementation is backed by the Apache Batik library.

For more information you can either wait for the next few entries or dive right into the code at the project site. Note that while most of the API and the implementation is stable, some of the functionality is either missing or will be refactored. If you have any questions, post them at project forums or mailing lists.