In this entry i’m going to talk about the fifth step in the process of taking the UI definitions from your designer and converting them to a live implementation. This process is illustrated by taking design of Cookbook UI (from the My Dream App contest) and turning it into a Swing application using Substance look-and-feel. The code behind the process is available in the Substance Samples project that aims to provide a collection of blueprints for creating visually rich UIs in Swing.
Lather, rinse, repeat
Unless you are using the exact same images that the designer was using for creating the screen mockups, the process of implementing the required visuals is hardly ever done. The slightest variations in color saturation, hues and brightness can result in a drab appearance. Not paying attention to artfully placed visual separators (gaps, margins, borders) can result in a cluttered appearance. Failing to remove visual noise that does not bother you as a programmer can result in visual distractions for the users, even at the unconscious level.
Here is a screenshot of the very first implementation of Cookbook UI header before all the visual tweaks introduced in the previous phases:
and here is the current implementation:
Here is a screenshot of the first implementation of Cookbook UI footer:
and here is the current implementation:
The devil is in the details
While the first two phases (analysis and mapping) operated on more abstract layers (decoration areas, functional areas, container hierarchy), the implementation phases (decoration and skin creation) must pay painstaking attention to all the minute details of the target design. Not closely following the design may seem insignificant to the developer, but it will in most cases result in deteriorated user experience.
The following is an incomplete list of Cookbook UI minute visuals that have been pointed out before. Most of these can be easily addressed with Substance painters and skins.
- Seamless and continuous texturing of header, footer and sidebar areas.
- Light-dark fill gradients for the buttons.
- Darker gradients for the button borders with translucent fading inner borders.
- Color schemes used for the selected buttons in the header and scroll bar in the sidebar.
Here are two more examples of fine details that are easily missed at a cursory glance. The following is a zoomed screenshot of the seam between the sidebar and the footer area. The vertical separator has two lines, darker on the left and lighter on the right. The same appies to the horizontal separator. In addition, the horizontal separator is painted on top of the vertical one to further enforce the boundary between the application functional areas:
In the implementation, the vertical separators are painted as a custom border installed on the relevant panels. While this can be achieved with the decoration painter, in this specific case it is easier to use borders and supported Substance APIs (to fetch the color schemes). These borders are the only usage of Substance APIs outside the self-contained definition of the custom skin. This is an example of the tradeoff between containing the painting routines inside the skin definition and the limitations of the Substance skinning layer that impose greater complexity on implementing this specific feature.
The next screenshot shows a zoomed version of the buttons in one of the footers:
In addition to the details on the gradient fill and the double border, there is one more important thing – the seamless appearance of the buttons as one joined group. In order to implement this, i am using the <span style="color: darkblue;">org.jvnet.flamingo.common.JCommandButtonStrip</span> component from Flamingo component suite with the matching Substance plugin. Buttons placed in the <span style="color: darkblue;">JCommandButtonStrip</span> will have continuous background, a single separator line between them and correct rounded corners on the left / right buttons.
Using Flamingo also facilitates creation of custom icons for the header and footer buttons. In this case, i am using the offline Flamingo SVG transcoder to transcode a few icons from the Tango iconset to pure Java2D based classes. A combination of a few filters can make these icons white with a darker halo shade.
Even when you think you’re done
The process of defining, implementing and refining the visuals can take a few iterations until both sides (design and implementation) are satisfied with the results. In this process, paying attention to the work of the designer is as important as handling all the corner cases in the business logic. Indeed, a few ill-advised pixels or a drab color scheme are not going to bring your application down. However, if you are interested in providing an appealing and immersive flow to your users, it is most certainly worth extra few days of investment.
I am happy to announce release candidate for version 3.1 (code-named Eilinora) for Flamingo component suite.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.
See Flamingo test applications in action under the core look-and-feels and under Substance look-and-feel.
You’re more than welcome to take 3.1RC for a ride (along with the matching Substance plugin if your application is using Substance look-and-feel) and report any bugs at the project mailing lists, forums or issue tracker. The final release is scheduled on September 15 and only bugs will be fixed until that date.
The demo applications for the Flamingo JRibbon component make heavy use of the SVG icons to make sure that the icons can be scaled without losing visual details. While Flamingo provides Batik-based implementation of the ResizableIcon interface, this has proven to place a noticeable burden on CPU during the application startup phase. One of the ways to address this performance issue is to use the SVG-Java2D transcoder that is part of Flamingo core distribution.
There’s nothing like eating your own dog food, and while trying to use the transcoded Java2D class to replace the runtime SVG decoding i found that it was lacking some of the basic functionality. The most glaring one was lack of API to query the default bounds of the SVG image. This is now exposed in the Java2D class with two static methods – getOrigWidth and getOrigHeight.
The second enhancement to the org.jvnet.flamingo.svg.SvgTranscoder class is the new setJavaToImplementResizableIconInterface(boolean) method. If you call this method prior to calling the transcode(), the resulting class will implement the org.jvnet.flamingo.common.icon.ResizableIcon interface, making it ready to be used instead of the org.jvnet.flamingo.svg.SvgBatikResizableIcon class. This comes handy since the heavy transcoding is done offline, and the size of the compiled class is comparable with the size of the compressed SVG file (especially if you turn the debugging info off). You can see the difference yourself by running the ribbon demo below – once the application frame is shown, all the icons are immediately visible and you can start interacting with it.
To change the package name of the generated Java2D class, call the setJavaPackageName(String) method prior to transcode() call. The last addition is the sample test.svg.SvgBatchConverter class that shows how to run the SVG-Java2D conversion in batch mode on all SVG files in a given folder.
Using the offline transcoding has another advantage – you don’t need to bundle the Batik jars that are around 3-4MB heavy. One point left to your consideration is the issue of the license of the original SVG images and its implications on the transcoded Java2D classes.
The last entry on Flamingo component suite talked about addition of contextual task groups, dynamic changes to in-ribbon galleries and reworked documentation. Over the past couple of weeks i have been working on the ribbon application title bar and formulating the future plans for the component itself.
The application title bar is a ribbon-specific feature that allows putting extra ribbon content on the title pane of the frame. In Office 2007 the application title bar contains the quick access toolbar and the headers of contextual task groups. Flamingo’s counterpart of quick access toolbar is the taskbar and up until now it has been placed to the left of the task toggle buttons. In addition, the contextual task group headers were not shown at all.
Putting content on the title pane requires close cooperation with the look-and-feel implementation, and as such is only available under Substance look-and-feel (interested developers are welcome to take a look at the code to see how this can be extended to other third-party LAFs that support decorated mode). Here are a few screenshots that show the new functionality in action.
The first screenshot shows the ribbon component with the taskbar automatically placed on the left hand side of the title pane. The taskbar has a few command buttons, one of them with a popup menu (click for the full size view):
The next screenshot shows the ribbon component with two visible contextual task groups. Note how the group headers are painted on the title pane and force the title text to be clipped:
The last screenshot shows the same component with one of the contextual tasks selected:
Here is what you need to use this functionality in your application:
The last point brings me to the future plans for the ribbon component. This is still work in progress that is targetting the next release (4.0), but you can already try it under the latest 3.1dev branch. The JRibbonFrame is going to be the only way to have a ribbon in your frame. It extends the JFrame and enforces that a JRibbon component is always in the BorderLayout.NORTH position. Under the hood, it also allows third-party look-and-feels (such as Substance) to “relocate” the taskbar to the title pane and paint the contextual task group headers. Going forward, the JRibbon class will have package-protected constructor. This will be part of 4.0 release to ensure easier transition to the new approach.
The plans for release 4.0 include providing the missing functionality from the Office 2007 Command Bar, including:
- Application title bar for other look-and-feels. The taskbar and contextual task group headers will be placed there (except when the application is running under Substance or other look-and-feels that will provide support for placing them on the frame title pane).
- Main application menu button.
- Pluggable resizability policies.
- Minimizing the ribbon.
- Horizontal scrolling for content under small widths.
- Better support for placing core controls and button groups in ribbon bands.
- Key tips.
- Screen tips (AKA rich tooltips).
To try the new title bar functionality in action, click the WebStart button below and use the “Group” checkboxes in the bottom control panel to show / hide the contextual task groups.
икони
