Building Vaadin UIs visually with the new Vaadin Designer

The Vaadin Plugin for Eclipse has ever been shipped with a visual designer for creating custom components for Vaadin applications. This visual designer enables you to construct a layout visually by dragging and dropping UI components on a given layout. In the background, the tool generates the corresponding Java code that sets up the design during runtime for you.

The Vaadin company has recently released a complete overhaul of this visual designer. The tool is now termed Vaadin Designer and is included in the current version of the Vaadin Eclipse Plugin.

First the downside of this: the Vaadin Designer is not free anymore. A license is included in a subscription of the Vaadin Pro Tools ($39 / developer / month) or can be purchased for $389 per developer (as of today). You can obtain a trial license which is valid for one month. The old designer can still be used free of charge but it is marked as deprecated.

As we will see shortly, however, the feature set of the new designer is well worth the license fee.

For those developers who like to construct their UIs visually, the Vaadin Designer has quite a lot to offer for speeding up UI design. It boasts an increase in productivity by a factor of two compared to hand-written UIs.

Design by drag’n’drop

UIs are designed using drag and drop as usual. You have a palette of UI components to choose from, an overview of the current UI’s component hierarchy, and a property editor where you can change each component’s properties.

Declarative layout

One very important difference of the new designer to the old version is that it builds on declarative layouts instead of generated Java code. This means while you are constructing a new UI design with the visual editor, the designer will simultaneously build an HTML file in the background representing your design. This HTML file does not use standard HTML elements, however, but Vaadin-specific elements. The following example shows this notation for a vertical layout containing two text fields and a button.

<vaadin-vertical-layout size-full="true"> 
    <vaadin-text-field caption="User name"></vaadin-text-field> 
    <vaadin-password-field caption="Password"></vaadin-password-field> 
    <vaadin-button plain-text="" _id="logInButton">
        Log me in 
    </vaadin-button> 
</vaadin-vertical-layout> 

You can switch the editor from edit view to source view anytime. You can even safely edit the generated HTML code directly, without running the risk of confusing the tool (as long as you write valid XHTML).

The size and complexity of the actual Java class (named design class) representing such a design is kept at a minimum. The Java class for the example looks like so:

@DesignRoot
@AutoGenerated
@SuppressWarnings("serial")
public class ExampleDesign extends VerticalLayout {
    protected Button logInButton;

    public ExampleDesign() {
        Design.read(this);
    }
}

As you can see, you can assign a name (attribute _id in the HTML file) to individual UI components which will result in a correspondent protected field variable in the design class. By sub-classing this class, you can further interact with these components, e. g. by registering event listeners on them.

The big advantage of this declarative approach is that now you don’t have to mess with a brittle piece of automatically managed Java code any longer. The UI’s construction is cleanly separated from application code. In addition, you can choose any layout as base layout, not just AbsoluteLayout.

Live preview on any device

Another really nice feature of the new Vaadin Designer is that you can launch a live preview of your design and check this with your browser. For that, the designer starts a Vaadin process in the background that serves your currently edited design. You can then visit a specific URL for this design with your browser and test it. Any changes you make in the designer are reflected in this live preview right away, without the need to reload the page. You can even switch the currently used theme in the designer and view this change instantly in the browser.

This goes even further since you’re not restricted to your local machine. You can preview your design with any device on your local network. So, you can check whether your responsive layouts work as expected with any supported mobile device.

Templating

The Vaadin Designer supports templating. You can create your own designer templates that can be used as basis for new design classes. This boosts your productivity even more as you can source out commonly used UI elements to such templates, thus fostering reuse and a better structuring of the UI.

Live theming

Not only a live preview of the design is offered by the designer, you can also preview changes made to your theme’s SASS style sheets instantaneously. By that, you immediately see how your changes affect the look and feel of your theme.

Conclusion

The new Vaadin Designer is a huge step forward in the area of professional Vaadin tooling. Building on declarative layouts and statically typed Java classes it puts visual UI design with Vaadin on a firm foundation. The tool may even be worth considering for development teams who hitherto frowned upon visual UI designers in general.

Short URL for this post: http://wp.me/p4nxik-2sm
Roland Krüger

About Roland Krüger

Software Engineer at Orientation in Objects GmbH. Find me on Google+, follow me on Twitter.
This entry was posted in Java Web Frameworks and tagged , . Bookmark the permalink.

One Response to Building Vaadin UIs visually with the new Vaadin Designer

  1. I was considering Vaadin for my company but since it seems the plugin for Eclipse will stop being supported, I’m disappointed. I don’t think turning the whole thing into a paid tool was a good move.

Leave a Reply