Today’s post highlights the design of i-avion.com, a site that allows you to compare prices for airline tickets. With a strong emphasis on collecting only the minimum required information, it uses plenty of white space and a few selected decoration elements to fill the browser window without distracting the eye from the main content section. A clever header decoration reinforces the tag line (your flight served on a plate), and the footer provides links to sample searches. The site color scheme spans the entire range of green hues, from lime green for the highlights and action button, to desaturated fir green for the content background, creating a vibrant yet consistent appearance.
Today’s post highlights the design of MattBrett.com. The brown color gamma is fully explored in grungy background, themed social icons and search box in the header, thumbnail bevels, text shadows for better legibility and beautifully executed embedded Twitter widget with vertical fade-out that highlights the most recent tweet. An unorthodox use of slightly faded pink color for the section headers is accentuated by extending the grungy background look and making the glyph shapes a bit irregular. A strong vertical two-column layout is reminiscent of an open book, which helps the design guide the eye across the main sections – further reinforced by using different header foreground colors in the right column.
The application menu button in the ribbon component from Flamingo component suite is a big round button in the top left corner of the ribbon:
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.
Prior to version 5.0, the ribbon frame (org.pushingpixels.flamingo.ribbon.JRibbonFrame class) tracked application calls to Window.setIconImages API, located the closest image that fits in the application menu button and used that image. This was a rather awkward solution that did not sit well with pervasive usage of the ResizableIcon interface in other parts of Flamingo. The latest 5.0dev drop of Flamingo (code-named Imogene) will now throw an UnsupportedOperationException if your code calls the setIconImages API. Instead, the application code must use the new JRibbonFrame.setApplicationIcon(ResizableIcon) API.
The ribbon will use the specified resizable icon to create window images and set them on the underlying frame. As a bonus side effect of using this API, you will also get a 128*128 version of the icon automatically passed to Application.setDockIconImage API, providing much better integration with the native Mac OS X application environment:
Note here how the crispness of the dock icon – which is using the same icon source as the application button menu icon. The original SVG is from the Tango icon library, and org.pushingpixels.flamingo.svg.SvgTranscoder was run offline to create a standalone Java2D implementation of the ResizableIcon interface from it.
To test the new functionality in your applications, you will need just the latest 5.0dev drop of Flamingo. As a side note, now that i have moved to Mac as my primary development environment, expect much better desktop integration for both Flamingo and Substance.
The command button component is a central building block for the Flamingo component suite. It aims to address the deficiencies of the core Swing button components, adding features expected by the modern applications. While the main goal of Flamingo is to provide a pure Java implementation of the Office 2007 ribbon container, the command buttons can certainly be used outside the ribbon.
Just as command buttons can be used as drop-in replacement for core Swing buttons, rich tooltips are the extension of the core tooltip functionality. Rich tooltips provide support for main and footer areas, multi-line and multi-section content, as well as embedding main and footer images – all of these are optional and can be combined together freely. While the previous entry talked about providing right-to-left (RTL) support on command buttons and related containers, the latest 5.0dev drop of Flamingo (code-named Imogene) extends this support to rich tooltips.
The first screenshot shows a command button with action and popup areas. Both areas have associated rich tooltips, and the mouse is over the action area. The current locale is en_US:
And here is the same button / tooltip under iw_IL locale:
The same button has a different rich tooltip for the popup area under en_US locale (no main image and only one paragraph in the main section):
and the same button / tooltip under iw_IL locale:
This is the next step towards full RTL support in all Flamingo components. Stay tuned for more. To test the new functionality in your applications, you will need the following:
Note that the last two are required if you’re running your application under one of Substance skins – such as Office Blue 2007 used in all the screenshots in this entry.
