With Substance 6.0 in release candidate stage, it’s time to go back and work on the missing features in the Flamingo component suite. As mentioned in the JavaOne ’09 presentation on the project, there are a few features missing in the Swing implementation, and today i’m going to talk about supporting right-to-left orientation on command buttons and related components.

Four RTL languages are supported in Java: Hebrew, Arabic, Farsi, and Urdu. Substance provides full RTL support for core Swing components, and you can see older entries (Aligning menu items in Swing applications – welcome to the real world and RTL support in Swing – part II) for a glimpse of RTL-related issues. The latest drop of Flamingo 5.0 (code-named Imogene) has added RTL support to the following components:

  • Command buttons
  • Command button strips
  • Command button panels
  • Command menu buttons
  • Command popup menus

RTL support is best illustrated by screenshots, so let’s begin (and yes, the Hebrew texts are notjust gibberish if you were wondering). The first screenshot shows a number of command buttons with different states and kinds (see the JavaOne presentation for more info) under the en_US locale – click for a full size image:

and here are the same buttons under iw_IL locale (with the matching texts) – click for a full size image:

The next screenshot shows a command button with a simple popup containing a few command menu buttons and a separator under en_US locale:

https://flamingo.dev.java.net/release-info/5.0/button-ltr-popupmenu-simple.png

and the same button + menu under iw_IL locale:

https://flamingo.dev.java.net/release-info/5.0/button-rtl-popupmenu-simple.png

Flamingo provides an API to embed a command button panel into the popup menu. Here is how such a menu looks like under en_US locale:

https://flamingo.dev.java.net/release-info/5.0/button-ltr-popupmenu-custom.png

and the same rich popup menu under iw_IL locale:

https://flamingo.dev.java.net/release-info/5.0/button-rtl-popupmenu-custom.png

Command button panels can be used as standalone containers. Here is a button panel with row-fill layout and group titles under en_US locale:

https://flamingo.dev.java.net/release-info/5.0/buttonpanel-rows-ltr.png

and the same button panel under iw_IL locale (note the order of the buttons):

https://flamingo.dev.java.net/release-info/5.0/buttonpanel-rows-rtl.png

Command button panel can be configured to use column fill layout:

https://flamingo.dev.java.net/release-info/5.0/buttonpanel-columns-ltr.png

and it is fully supported in RTL mode (note the order of buttons and groups):

https://flamingo.dev.java.net/release-info/5.0/buttonpanel-columns-rtl.png

This is the first 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.

Design, uninterrupted #6

March 26th, 2010

Today’s post highlights the design of Missy, personal site of Shirley-Ann Dick. Pervasive uses of denim theme, including colors, textures and stitch dashes for separators creates a unique look, with a slightly impaired readability caused by heavy slanted textures on the red headers and main content font size which is a little too small for comfortable reading. An overall elegant and precise design which employs a multi-column grid and moderate use of white space, with clever listing of recent posts that includes date, categories, thumbnail, title and a short snippet.

Design, uninterrupted #5

March 24th, 2010

Today’s post highlights the vibrant design of 84 Colors, the personal showcase of Cristiana Bardeanu. It has a strong nature theme that starts with desaturated earthen browns with slight background textures, continues with contained areas of desaturated season colors (red, orange, yellow, green) and is further reinforced by well-placed decorational elements of leaves and animals. An unintrusive flash animation of leaves and squirrel completes the picture and adds final polishing touches. Note how the images blend into the site design – including the main portfolio image, the artist picture and links to the latest photo / painting.

Active links have nice rollover effects, and the rollover effects for the navigation menu use the same season colors as the rest of the site. My only reservation is about using the orange color in “hello there” header which is the same color used elsewhere for links.

Design, uninterrupted #4

March 22nd, 2010

Today’s entry highlights the design of KilianMuster.com. Precise grid layout, consistent use of unsaturated orange for the logo, links, menu highlights and the main separator, fine background texture and hand-drawn illustrations – all add up to create a slightly vintage, warm and yet professional personal site.