Today’s post highlights the design of EnlivenLabs.com. Set on the backdrop of dark olive denim texture, the site uses a earthen palette of brick red, golden brown and light ochre set early on in the decoration strip that runs along the top edge and applied consistently to all visual elements. The main emphasis is placed on large portfolio thumbnails that use beautifully crafted explanation boxes. Note how much visual attention went into the lighting model of the borders, drop shadows and depressed dash separators.
Irregular lighter spots in the background texture can hurt legibility even for larger font sizes, and the design address this issue by using darker drop shadows. The brick red color is used for two main design elements – the anchored navigation menu and the main action button. Move the mouse over the darker bird outline in the navigation menu vertical ribbon to see a full-color Twitter bird. A simple one-line footer completes this single page design.
It’s been three years since JavaFX was announced to the world, and it’s time to see how far has it gone with capturing the minds of the target audience. From the very beginning, JavaFX was positioned to be a prime environment to create compelling user interfaces (count how many times the word “rich” is used in the first sentence):
JavaFX provides a unified development and deployment model for building rich client applications that integrate rich immersive media such as audio and video, graphics, rich text and web services. JavaFX allows creative developers to program in a visual context thus helping them to bring their ideas to life quicker and better.
In addition, following in the footsteps of Apple, Adobe and Microsoft that have all realized the importance of bringing professional designers as equal partners in the process of creating new wave of user-facing products, JavaFX has placed significant effort into making the collaboration between developers and designers easy:
JavaFX allows designers and developers to simply and swiftly combine graphics and media assets to unleash their creative potential with significantly reduced effort. Using the JavaFX Production Suite, a suite of tools and plugins for Adobe Photoshop and Adobe Illustrator, designers seamlessly create and export graphics from their existing tools into the JavaFX format. The plugins allow One-click conversion and provide a preview enabling designers to make any necessary modifications prior to conversion. Also included is the JavaFX Media Factory, enabling designers to use Scalable Vector Graphics (SVG) editors such as Inkscape with JavaFX as well.
In this world, a designer continues to use the tools that he is fluent with (Photoshop and Illustrator), and a developer continues to use the tools that he is fluent with (code editor). And while the final product contains the work of both sides, they can continue working in parallel, refining and tweaking the UI and the business logic as they go. In fact, one of the earliest demos shown at JavaOne showed a designer exporting a layered background to be used in a UI and a developer importing the visual assets to be used in the application. After the developer had added a few listeners, the designer changed the visuals, which were then re-imported into the application without any change in the application code.
And that was one of the main promises to the companies considering the choice of a UI toolkit for their next big application. That there’s this large pool of professional creative talent, and you can tap into it without forcing them to abandon the familiar set of tools. In addition, you don’t need to fear that the developers will cut corners and miss all the fine visual details when they implement the UI mocks – the visuals are imported from the design tools, untouched by the developers that toil away at the business logic.
Judging by how well this promise has translated into reality, JavaFX is a train wreck.
No matter what your opinion on Microsoft, you cannot deny that they have mastered the fine art of promoting their UI toolkits. When WPF was announced a few years ago (slightly before JavaFX), Microsoft forged agreements with a number of third-party companies that have created visually rich and aesthetically pleasing business applications that focused mainly on showcasing the full graphic capabilities of the UI toolkit. Companies such as thirteen23 and Infragistics have created WPF applications to browse Netflix, Amazon, Flickr, Twitter and many more.
Apple’s obsession with design has not gone unnoticed with the designer community. Not a week passes by without yet another round of beautifully designed applications for Mac, iPad or iPhone. People obsess over the placement and color of each pixel, and spend untold hours refining and polishing every single element that is displayed on the screen. Applications are judged on the appearance as much as they are judged on the functionality – if not more.
What has happened with JavaFX in the meantime? Nada. I am yet to see a single significant JavaFX application that looks good. And while developers obsess over semantics of sequences and null pointer exceptions, designers just don’t care. The “rich” part of JavaFX-powered RIAs is just not happening. Jim Weaver had an interesting idea when he required all teams participating in the JavaFX RIA exemplar challenge to have one developer and one designer. After a few weeks the rules were changed to no longer require the participation of a designer. Nine months after the competition has been announced, no news on the participants or the winner.
If the simplest explanation is also the correct one, then i would assume that the competition has failed to attract any significant number of professional designers. Extrapolating that, publishing screenshots of the existing entries (presumably designed by the developers) would not sit well with what this competition meant to achieve – showing the world that JavaFX is a viable and strong alternative for companies that want to create rich business applications. Depending on your personal opinion, the last statement may have never been true.
While the ribbon component in Flamingo component suite mainly targets hosting command buttons and button galleries, you can also add any core / third-party component by wrapping it in a JRibbonComponent class. You can add such components as they are, or associate optional icon / caption pair with them:
In this example, the “Applications” ribbon band hosts three comboboxes, and each combobox has an icon and a caption next to it. To address different monitor and window sizes, as well as the user resizing the application window hosting the ribbon, Flamingo provides built-in support for dynamically resizing the content of the ribbon bands to best fit into the available space. As the user makes the window smaller, ribbon galleries show less buttons, and command buttons switch from big to small icons and hide the caption. Eventually, when there is not enough space to show the controls at the smallest visual state, the entire ribbon band becomes collapsed.
Support for dynamic resizing of the ribbon content has now been extended to the JRibbonComponents as well. Call the new JRibbonComponent.setResizingAware(true) API to turn the dynamic resizing on for the specific component. If this API is not called, the existing behavior is preserved.
Once the API is called, and the user starts resizing the ribbon, the wrapped component will hide the caption and icon as necessary before the band will go to the collapsed state. If you start with the ribbon band displayed above – where all comboboxes show the icons and captions, the next state will be
where the captions are gone, and the comboboxes fill the available space if JRibbonComponent.setHorizontalAlignment(HorizontalAlignment.FILL) was called when the component was created. If the user continues making the ribbon smaller, the next state is
where the icons are gone as well. At this point the next state is to collapse the entire ribbon band:
This is the last planned new feature for Flamingo 5.0. Release candidate is planned for July 19, with the final release planned for August 9. Now is the best time to migrate your application to the latest 5.0dev drop of the library and help me find the remaining bugs.
