Point of Sale (POS) systems are usually deployed at retail businesses such as restaurants or grocery stores. Most modern POS systems feature a touch-screen virtual computer that does not have keyboard or mouse. As such, it is operated by navigating through the available menus / features via on-screen selections. Due to the very nature of operating environment, these selections are done mostly manually (with fingers touching the screen). Here is how a sample POS system looks like:
And here is a sample screen of a POS system (click to see full size):
Since pressing your fingers on the screen is the only way to operate a POS system, all the controls need to be extra large.
I have already touched on subject of high-DPI support in Substance look-and-feel (part 1, part 2, part 3). Since the vast majority of Substance visuals are done with vector-based graphics, it should be able to scale to any font size. The real life, however, is not so simple and there are a lot of visual glitches that become apparent only at large scale values.
Here is a screenshot of an editable combobox using 72 pixel font under Substance 4.2. Note the clipped text, the gray margin around the text field editor and cap / join of the arrow icon:
And here is the same editable combobox under Substance 4.3:
Here is a screenshot of an icon button using 72 pixel font under Substance 4.2. Note the icon text gap, focus ring touching the text and the corners radius:
And here is the same button under Substance 4.3:
Here is a screenshot of a radio button using 72 pixel font under Substance 4.2. Note the checkmark text gap, focus ring weight, focus ring corner radius and the outer edge of the checkmark:
And here is the same radio button under Substance 4.3:
And finally, here is a screenshot of a checkbox using 72 pixel font under Substance 4.2. Note the checkmark text gap, focus ring weight and the focus ring corner radius:
And here is the same checkbox under Substance 4.3:
The latest development drop of Substance 4.3 has the first support for very large font sizes (which come with their own set of visual pitfalls, as illustrated above). It is in feature freeze state, with release candidate scheduled on March 31st, and the final release scheduled on April 14.
If you are interested in the topic of high-resolution monitors and the issues that they pose for UI applications in general, and for Swing in particular, please consider coming to a birds-of-feather session that i will be presenting with Mike Swingler (of Apple’s Swing team) at this year’s JavaOne. It is a little late (21:30 on Tuesday), but hopefully it will be worth it. Looking forward to seeing you.
The ribbon component is one the major building blocks of the Flamingo component suite. It is designed to work well with the existing core and third-party look-and-feels, adopting the appearance of the current skin / theme. It also provides a collection of extensible UI delegates that allow third-party look-and-feel developers to further tweak the appearance and the functionality of the ribbon component.
Perhaps the biggest addition to the upcoming release 4.3 of Substance look-and-feel are two new painter types, highlight and decoration. The decoration painters come especially handy for “offsetting” the ribbon component from the rest of the application UI. This is, indeed, how the original Office 2007 command bar (f.k.a. Ribbon) looks like under the Black and Blue themes.
The new public SubstanceLookAndFeel.setDecorationType API allows the applications to mark specific visual areas as decoration areas. The current Substance skin then decides how to paint the background of these areas, as well as all the controls that lie inside them. Specifically for the ribbon component, the Substance plugin for Flamingo sets the following decoration types on the ribbon (see below for the screenshots):
The ribbon itself is marked as DecorationAreaType.HEADER.
The task buttons and task bands are marked as DecorationAreaType.GENERAL.
The first makes the ribbon blend with the title pane, especially under decorated mode. The second makes all the ribbon controls be a) visually different from the title pane and b) provide a slightly different visual appearance than the “real” application area. Let’s see a few screenshots of the ribbon to better understand these two points.
Here is the ribbon under the last Substance release and Autumn skin:
And here is the same ribbon under the latest dev drop of Substance 4.3. Note how the ribbon blends much better with the title pane, clearly delineating the currently selected task:
Note that Business Blue Steel defines a separate theme for the DecorationAreaType.GENERAL decoration areas. For ribbon, it helps to make it stand apart from the rest of the application window, but not in a too “aggressive” way. Also note how this theme is applied to all ribbon visuals, including the command buttons, icons, in-ribbon galleries and the usual controls (combo boxes, buttons).
While the “tagging” of various ribbon areas is done by the Substance plugin for Flamingo, the SubstanceLookAndFeel.setDecorationType is public API and open for the application use.
To try the latest Substance and Flamingo visuals on your applications, use:
The previous entry on auto-scrolling in Swing applications under the latest development drops of Substance look-and-feel did not show this functionality in action. To get a feel of auto-scroll, click on the button below and click the middle mouse button in either the “Buttons” tab (the first one) or the “Scroll pane” tab after selecting the “Has auto scroll” checkbox in its control panel.
And here is a short video of auto-scroll in action, showing both vertical and horizontal auto-scroll:
Auto-scrolling is a feature that can be found in most mainstream modern applications. Pressing the middle mouse button transfers the application into the auto-scrolling mode. In this mode, moving the mouse down starts scrolling down the contents even when the mouse is no longer moving. The scroll speed depends on the distance between the current mouse location and the mouse press location. This works for all four directions (up, down, left, right).
There are two existing Swing implementations that i’m aware of:
Patrick Gotthardt replaces the original scroll pane view with a custom view.
Both approaches have their drawbacks. The first one effectively changes the UI hierarchy and the second one uses a global frame resource, effectively resulting in repainting the entire UI on every scroll (even when the scroll pane is a small part of the application).
Christopher Deckers has already appeared as a guest author on this blog, and he was very helpful during the development cycles of last two versions of Substance look-and-feel. He has found numerous bugs (many thanks) and made numerous suggestions for enhancing existing features and adding new ones (many thanks). One of his “most wanted” features was the support for auto-scrolling, and after a few iterations he has contributed an elegant implementation that does not use a global resource and does not change the UI hierarchy.
The new LafWidget.AUTO_SCROLL client property can be installed on a specific scroll pane or globally on the UIManager. Once it is set to Boolean.TRUE, the corresponding scroll pane(s) will have the auto-scroll mode installed on them. There are two operation modes:
Press the middle mouse button and release it. The scroll pane is transferred into the auto-scroll mode. It can be dismissed by clicking the mouse or scrolling the mouse wheel.
Press the middle mouse button and start dragging. The auto-scroll is dismissed by releasing the middle mouse button.
The implementation itself installs a mouse listener on the scroll pane, and when the middle mouse button is clicked, it shows the auto-scroll icon wrapped in a popup menu (thus no need for glass pane). In addition to showing the menu, it also installs a global AWTListener that listens to mouse wheel and mouse move events, scrolling the pane as necessary.
This is the last new feature that was added to the version 4.3 of Substance. It is now in feature freeze state. The release candidate is scheduled on March 31st, with the final release scheduled on April 14.
