Following the extremely valuable feedback on the previous entry that introduced the application menu button and application taskbar to the Flamingo ribbon component, i have been busy this week fixing the usability issues and addressing some of the missing popup functionality available in the Office 2007 Command Bar component.
Christopher Deckers has pointed out a few usability issues that eluded me as i was focusing too much on the pixels. He was correct to point out that everything related to popups (such as the main application menu button and ribbon gallery expansion) and the task toggle buttons should happen on mouse press and not on mouse release. This has been addressed in the latest 4.0dev drop of Flamingo (code-named Fainnear) and is also available as a configuration API on the org.jvnet.flamingo.common.model.ActionButtonModel.
A number of comments pointed out that the application menu is showing on top of the application menu button, thus losing the visual connection between the two components. The solution had to work on both lightweight and heavyweight popups, and the latest 4.0dev drop provides such a solution.
Here is the application menu under Metal:
And under Windows look-and-feel when the mouse is moved over the primary Open entry:
And under Synthetica Blue Ice look-and-feel showing a split Save As menu entry in action:
And under Nimbus showing the split Print primary menu entry with two groups in the secondary menu:
And finally, under Substance Business Blue Steel skin showing the popup-only Send primary menu entry with one group in secondary menu. One of the secondary menu entries is a popup button itself and has the associated PopupMenuListener. This listener populates two items in the third-level popup menu – click to see full-size:
The latest 4.0dev drop also allows placing mixed content into the popup panels. Most of Office 2007 split / popup buttons show a button panel wrapped in a scroll panel, followed by a mix of menu items and separators:
This is now available for Flamingo ribbon galleries and split / popup command buttons. Here is an unexpanded ribbon gallery under Synthetica Blue Moon look-and-feel:
When the expand button is clicked, the following popup is shown:
The top portion of this popup has the scrollable panel that hosts all the gallery buttons, and the bottom portion hosts the additional menu buttons and separators. The top panel can be scrolled:
And the menu buttons show rollover effects:
The same rich popup functionality is available on command buttons with popup area (split or pure popup). The following screenshot shows a rich popup on “Format” button in the first ribbon band (under JGoodies PlasticXP look-and-feel):
And the same under Substance Office Silver 2007 look-and-feel:
If you want to see the reworked application menu button and enhanced popups 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):
The relevant APIs are in the org.jvnet.flamingo.common.popup and org.jvnet.flamingo.ribbon packages. Until the documentation is ready, see the test.ribbon.BasicCheckRibbon class. This is still work in progress so the APIs may change during the development cycle. Your feedback is, as always, greatly appreciated.
I’ve been relatively quiet on this blog for the last couple of weeks, but i have some good news to share about the Flamingo ribbon component – it now provides the cross-LAF support for application menu button and application taskbar. The ribbon is a fairly complicated container, and while release 3.1 has made great strides towards providing basic functionality, there are significant gaps when compared to the original Office 2007 command bar. The plans for release 4.0 (code-named Fainnear) are to close these gaps, and the latest development drops allow interested applications to test the application menu button and application taskbar.
These concepts are best illustrated by screenshots. Here is a screenshot of the ribbon test application under Metal look-and-feel:
Note that the taskbar panel has been moved to a separate row on top of the ribbon task toggle buttons. The big round button is the application menu button, and it takes its icon from the images passed to Window.setIconImage and Window.setIconImages APIs. The largest image not exceeding 32*32 pixels is taken. If you only pass the usual 16*16 image, it will be used (but not scaled up). I would recommend using 22*22 images, but this is really up to your design to decide.
And here is the same application under Windows look-and-feel under Vista:
Note how the entire ribbon (selected task toggle button, task band title strips and the application menu button) are skinned with the visuals of the current look-and-feel. Since Windows look-and-feel on Vista is still using Tahoma 11 font, ribbon inherits these settings.
How about third-party look-and-feels? Here is the same application under A03:
and under Synthetica White Vision:
Once again, note how the visuals of ribbon and its components match the visuals of core Swing components under the relevant look-and-feels. Finally, here is the same application under Substance Business Blue Steel skin:
and under Substance Nebula Brick Wall skin:
And important thing to note for Substance – if you are running your decorated JRibbonFrame application under Substance Flamingo plugin, the taskbar and the top half of the application menu button are placed directly on the title pane.
And now let’s see a few screenshots that illustrate the functionality available on the application menu button. The screenshots are taken under different core and third-party look-and-feels and use the APIs from the org.jvnet.flamingo.ribbon package. These APIs are not set in stone and might change during the development cycle of version 4.0 based on the growing understanding of the requirements and user feedback. If you want to make your voice and requirements heard, now is the time.
The first screenshot shows the application menu shown when the application menu button is clicked. It has three main parts – the primary menu selection, the secondary menu selection and the footer buttons:
Note how the visuals of the application menu (top and bottom gradients, colors and button fills) match the current look-and-feel. Also note that some of the controls (the primary Save menu entry and the footer Exit button) are disabled. This is configured via the relevant APIs, and implicitly affects the icons used on those buttons.
The second screenshot shows the contents of the application menu under Windows look-and-feel when the mouse is moved over the primary Open entry:
Here, the application has registered a callback that is called on mouse rollover. This callback gets the secondary target panel and populates it with a command button panel that has one button group with five sample buttons. The main primary menu entry can also be configured with an action listener that will be called when the entry is activated (clicked). In this particular case, the main action listener can open a JFileChooser, while the rollover callback can populate the list of last opened documents, associating an action listener with each one of them.
The third screenshot is taken under Synthetica Blue Ice look-and-feel and shows a split Save As menu entry in action. This menu entry has an action area (with configurable action listener), as well as a rich secondary level menu. One of the secondary menu entries is marked as disabled:
Once again, note how the visuals of the current look-and-feel are applied throughout the ribbon component, including the different alphas on the action and popup area of the primary armed split menu entry to indicate the visual boundaries between these two areas.
The next screenshot is taken under Nimbus and shows the split Print primary menu entry with two groups in the secondary menu:
And finally, the last screenshot is taken under Substance Business Blue Steel skin and shows the popup-only Send primary menu entry with one group in secondary menu. One of the secondary menu entries is a popup button itself and has the associated PopupMenuListener. This listener populates two items in the third-level popup menu – click to see full-size:
If you want to see the application menu button and application taskbar 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 (including the content on decorated title pane), run the following WebStart demo:
If you want to test the new APIs in your applications, you would need the following (the last two only for applications running under Substance look-and-feel):
The relevant APIs are in the org.jvnet.flamingo.ribbon package and until the documentation is ready, see the configureApplicationMenu method in the test.ribbon.BasicCheckRibbon class. This is still work in progress so the APIs may change during the development cycle. Your feedback is, as always, greatly appreciated.
Are you interested in contributing to one of my open-source projects, but don’t know where to start? It is actually my fault, and this blog post will try to serve as an entry point to the interested developers who want to contribute to the success, diversity and adoption of Swing for high performing, modern and customizable user interfaces.
I have a few projects on java.net, but the main two are Substance look-and-feel and Flamingo component suite. And as much as i try to keep up with all the features expected from modern UI libraries, my time is limited. And this is where you can help. And you don’t have to be technical. Below you will find a list of self-contained tasks, some of them technical and others not. I’ve tried to isolate each task so that it can be worked on in a separate flow without disrupting the main development, or requiring deep understanding of the whole library (although that is an advantage, obviously). If you are interested in one or more of these, feel free to contact me on the mailing lists or forums of the projects, or drop an e-mail to kirillcool [at] yahoo [dot] com.
Bug reports
If you see a bug, please do not assume that i know about it. Let me know as soon as possible so that i can fix it before the next release. Since my resources are limited, i can not backport bug fixes to earlier releases (Substance 4.3 is the only exception since it is the last release to run on Java 5). If you test your applications on development drops of Flamingo and Substance, your chances of having a bug fixed in that release are significantly higher.
To report a bug, you can use the issue tracker (preferred), project forums, project mailing lists (although that will most probably annoy other subscribers) or my personal e-mail. Note that sometimes i would ask you to continue the dialog in the public mailing lists if i feel that it is informative enough for the wider participation. Also, try to attach a test case that as simple and short (<100 lines) as possible.
Documentation
I try to keep the documentation up-to-date with the latest releases and development drops, but something always slips past me. If you see something out of sync, let me know. If you are a first-time or a novice user and have a hard time understanding what the specific project allows you to do, let me know. If you are a power user and find that the documentation is not deep enough, let me know as well. And if you are an English major, proof-reading the existing documentation and fixing even the smallest syntactical and grammatical errors is great!
I always try to structure the documentation in an accessible and visually friendly way. You can see my latest attempt at this right here. If you are a web designer or just have a natural talent for arranging information presentation targeting different user levels, i will be more than happy to hear your input. And if you can design a cool logo, that’s fine with me as well!
Flamingo
The main emphasis of version 4.0 is going to be on closing the gaps in the Ribbon component. As such, i will not be able to do many other things that i would like to see in Flamingo. Here is a list of self-contained tasks that can span a few days if you have them:
- Right-to-left (RTL) support for all components.
- High-DPI support for all components.
- CVS-based breadcrumb bar adapter.
- SVN-based breadcrumb bar adapter with fully open-sourced implementation (the current one uses SVNKit).
- Apache VFS-based breadcrumb bar adapter.
- XML DOM-based breadcrumb bar adapter.
- ICNS-based resizable icons.
- Pageable command button panel.
For the examples of existing breadcrumb bar adapters see the org.jvnet.flamingo.bcb.core package. For the examples of resizable icons see the org.jvnet.flamingo.common.icon package.
Substance
- Profile the performance. While release 5.0 is much faster than its predecessors, there’s always room for improvement. Some gains may result in the code becoming uglier, and that is a factor as well. The performance areas include the startup phase as well.
- Analyze the performance on D3D-accelerated pipeline. The code should not result in performance regressions on the software pipeline.
- Write custom skins to test the current skinning layer APIs.
- Take over the development of the Substance plugin for JIDE components. I have intended to do this myself, but i just don’t have the time. Right now it supports two components (button and split button), so the plumbing is in place.
- Take over the development of the Substance module for NetBeans. Can be used to analyze the performance problems and test a very large Swing application with custom components, renderers and more.
- Create a Substance module for IDEA. You can win some money in the process as well if you do it in the next few weeks (go to JetBrains’ site for more details).
- Write translations to additional languages. It’s about 25 entries that have already been translated to 29 languages. If you see a missing language, you’re more than welcome to send me the translated strings.
I only have two things to ask for the code contributions: it should be clean and it must be contributed under BSD license. I will not ask you to assign the copyrights to me, and you will continue to have the full rights to your original code. And nobody wants to get stuck in unmaintainable code :)
So, if you are interested in contributing to Flamingo and Substance in particular, and to the Swing community in general, let your voice be heard and your contribution be seen. I’ve just posted the first drops of Laf-Widget 4.1dev (code-named Juniper), Flamingo 4.0dev (code-named Fainnear), Substance 5.1dev (code-named Panama) and Substance plugins for Flamingo and SwingX.
I am extremely pleased today to announce the availability of official releases for a number of my Swing projects. Synchronizing the release schedules for these projects allows the applications to take stable and well-tested libraries that allow creating modern user interfaces.
Flamingo component suite release 3.1 (code-named Eilinora) is available. The goal of the project is to provide a small and cohesive set of powerful UI components with functionality similar to or superseding that of Vista Explorer and Office 2007, and this release closes many gaps towards realizing this goal. The release notes have the detailed description of the new functionality. Noteable features include:
- Improvements to SVG transcoder, allowing creating resizable icons. This is used in the new ribbon demoes to make significant performance improvements to the startup phase.
- Contextual task groups on the ribbon component.
- Dynamic content of in-ribbon galleries.
- Decorating the ribbon under Substance plugin, putting the taskbar and contextual task group headers on the title pane.
- Resizable icons based on .ICO format.
- Command buttons supporting disabled mode, changing text and changing font.
- Auto-repeat mode on command buttons.
- Column-fill mode on command button panels.
Substance look-and-feel release 5.0 is available. Substance has undergone significant internal and external changes to address major performance issues and to ensure the long-term code health of the project. Here is the list of big changes in Substance 5.0:
- Moving to Java 6 as the minimum runtime requirement.
- Addressing the performance issues. While the first announced drop was 20% faster than release 4.3, the release candidate is 3.5 times faster on static scenarios and 2.7 times faster on dynamic scenarios as measured by the LightBeam testbed.
- New client property to allow using per-window skins.
- Enhanced theming layer.
- Removed 16 VM flags and left only 2.
- Removed 15 client properties, consolidated 3 others into 2 and added 1 new.
- Removed 54 API methods on the main class, pushing some functionality into the theming layer.
- Consolidated theme pack, watermark pack and button shaper pack into the Extras pack that also provides additional skins.
The following sub-projects are also available as official releases:
Version 4.3 of Substance (the last version that can run on Java 5) is in long-term support mode. At the present moment this version has thirteen bug fixes backported to it from the main development trunk.
Click on the button below to launch a signed WebStart demo that shows the available Substance features:
Click on the button below to launch a WebStart demo that shows the Flamingo ribbon component under Substance look-and-feel:
Click on the button below to launch a signed WebStart demo that shows the SwingX components under Substance:
In addition to Substance and Flamingo that can be used directly by applications, the following projects haven also been officially released:
- Laf-Plugin release 1.0 (code-named Vile Weed) is available. The goal of this project is to provide a generic plugin framework for look-and-feels and define the interface of a common kind of plugins – the component plugins.
- Laf-Widget release 4.0 (code-named Iris) is available. The goal of this project is to provide support for and base set of additional behaviour and widgets in look-and-feels.
- Rainbow release 1.1 (code-named Nightstone) is available. The goal of this project is to illustrate various animation, transition and translucency techniques.
It has been a long journey. Flamingo 3.1 development has started in February, and i would like to thank Gunnar A. Reinseth, Pedro Duque Vieira, Kenneth Flynn in particular for their invaluable feedback during the development cycle. Substance 5.0 development has started in April, and i would like to thank all the early adopters for testing the development drops and providing their feedback in the project forums and mailing lists.
The work on both Flamingo and Substance is not finished. The plans for the next Flamingo release are available at the end of this entry, and plans for the next Substance releases will be published on this blog. If you are interested in using Substance to its fullest potential, you’re welcome to read the “From Photoshop to code” series.
