Clara - Declarative UIs for the server-side

ClaraVaadin is all about user interfaces. And to be more exact, Vaadin is all about creating user interfaces by programming in Java. This is all good and nice, but there are also other ways to build your UIs. In this blog post I will present a quick introduction to one option – Clara add-on.

As a Vaadin developer, you have probably seen and written code similar to the following listing.

final VerticalLayout layout = new VerticalLayout();

Button button = new Button("Click Me");
button.addClickListener(new Button.ClickListener() {
    public void buttonClick(ClickEvent event) {
        layout.addComponent(new Label("Thank you for clicking"));

In fact, this very simple UI example is also the result of creating a new Vaadin 7 application using the Vaadin Plug-in for Eclipse. The code snippet is short, but still it might be hard to see what kind of a view it represents by just glancing at the code.

When you squint your eyes a bit, you might see that the view contains a Button component with a caption “Click Me”. This button is positioned inside a VerticalLayout with a margin set to true. Maybe we could do better and just say all this in a compact representation without cluttering our actual idea with detailed Java code. We might end up with something like the following listing.

<VerticalLayout margin="true">
    <Button id="my-button" caption="Click Me" />

I bet you can more easily understand what this represents – especially if you are not an experienced Vaadin developer. While looking at this XML snippet, we can also see how the Java code had accidentally mixed two separate concerns – presentation and logic.

If we can use declarative XML for the view, we still need a way to bind some data and event handlers to it. This is actually why we had defined an id attribute for the button. And to stay true to our chosen declarative style, we can bind the button with an event handler using some annotations in our Java code.

public void handleButtonClick(ClickEvent event) {
    layout.addComponent(new Label("Thank you for clicking"));

Now we have replicated the click event logic of our original Java code example. But instead of using an anonymous inner class, we have created a new method and given it an @UiHandler annotation also specifying the id we used for our button.

Everything I have described above is already possible today using my Clara add-on from Vaadin Directory. In addition to these basic features, Clara also supports using any add-on components (via import namespaces), binding of Java fields to components and declarative binding of Vaadin datasources.

In the future roadmap for the Clara project I have been planning better tooling support to make writing the UIs even easier. Another interesting development would be to allow mixing of HTML content and Vaadin components in the XML file. And of course there is an ongoing discussion whether something like Clara should be integrated as part of the core Vaadin framework. What do you think? Let us know by adding a comment below or continuing discussion at the forum.

Enough talk for now, start up your IDE of choice, clone the example GitHub repository and start playing around. The project contains the example presented in this post as a fully functional Maven project for you to easily start hacking with it. Have fun with Clara!

Teemu PöntelinTeemu Pöntelin has been working at Vaadin Ltd since 2008. He has been involved in various tasks ranging from large-scale Java EE application development to coming up with creative marketing ideas. You can follow him on Twitter – @teemupontelin

I have been wondering for > 3 years* why Vaadin has not created an XML layout file format with a GUI editor and made it integral to Vaadin (not as an addon that nobody has heard of). It just makes too much sense strategically not to do it (IMHO).

Is this going to be integrated with Visual Designer? And when is it going to be made an officially supported part of Vaadin?

Posted on 12/12/13 6:04 PM.
Thanks for your comment!

I would be happy to see my add-on (or something similar) as a part of the core Vaadin framework. There has been discussions about it, but unfortunately I cannot make any official promises.
Posted on 12/13/13 8:46 AM in reply to Archie Cobbs.
Great job and a nice feature. I come from the Flex world and it is really a very friendly way to build a view. I just could see the sample demo but I found it very handy. It would be nice if XML could be validated at compile time. I could find in another thread the way to use AbsoluteLayout in this way, a bit less practical, but quite acceptable too. I hope this becomes part of the core Vaadin.
Posted on 12/13/13 11:05 AM in reply to Teemu Pöntelin.
Was wondering the same, but why re-invent the wheel?
Why not just take Scene builder and use that?
Then you can create desktop applications and web applications with one codebase and make everybody happy.
Posted on 12/14/13 11:06 PM in reply to Archie Cobbs.
Do you mean the Scene Builder used for JavaFx applications? I don't see how the generated FXML could be used with Vaadin applications.
Posted on 12/16/13 8:14 AM in reply to r t.
I'm sorry but I need to tell you that I disagree with this initiative. The force of Vaadin is to concentrate all the facets of the web application in one language. If you bring XML templating, you brake this principle. Developers would have to switch between xml confugration and action code. I admit that it coud be considered as a good avolution regarding the separation of concern but I think that will make developments more complexes and less productive.

Best regards,
Posted on 3/17/14 1:32 PM.
How to add styles to elements in XML markup?

In Java code I can put lines like:
HorizontalLayout layout = new HorizontalLayout();

But how to do it with Clara?
Posted on 4/22/14 3:29 PM.
And how to be with parameterized contructors like
new CustomLayout("main");
Posted on 4/22/14 4:21 PM.
You can basically use setStyleName method with applying a "styleName" attribute. If you want to use addStyleName, there is currently no easy way to do that.
Posted on 4/23/14 11:41 AM in reply to Taras Hupalo.
You can only add style names with setStyleName method from the XML by using "styleName" attribute. Unfortunately there is no direct way of calling the addStyleName method.
Posted on 4/23/14 11:47 AM in reply to Taras Hupalo.
I think this is a matter of taste, and depends on the application, the devteam osv. Just don't use it if you don't like it. Editing the template and have the view instantly updated like in the demo app seems like a pretty efficient way to prototype gui's to me. I'm not to fond of xml myself, but it is actually a markup language, while java is not.
Posted on 5/12/14 8:04 AM in reply to alex dp.
Hi Teemu.
I really like Clara plugin, but there is one thing that you've got to explain. How can I use Clara with MVP? The Controller class contains both view elements (annotated with @UiField) and presenter elements (methods annotated with @UiHandler). What do you suggest me to use the plugin in a context like this?

Thank you very much.
Posted on 7/3/14 10:23 PM.
hi Teemu, thanks a lot for creating this I used WPF in C# for a while and creating and visualizing UI is so much better when done this way. This is really great emoticon
Would this be integrated officially into Vaadin anytime? I think the Vaadin community would really benefit from having this as a part of the core framework
Posted on 9/10/14 3:26 PM.