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?

* https://vaadin.com/forum#!/thread/96358/278807

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.

Vaadin community is huge and growing. There is lots of stuff happening “behind the scenes” that don’t get enough attention among our average users. Thus we have decided to
Concurrency and distributed systems are probably among the hardest parts of software engineering. Basic Java EE apps usually don’t need to deal with these issues that much, but increasing
We're pleased to announce the public release of Tori – the modern and sleek discussion forum for Liferay portal . We've kept Tori under the blanket while developing it and
There is a point in every enterprise web application project when the scalability of the application under development is wanted to be measured. There are several reasons for why scalability tests
Vaadin TestBench is a browser automation tool, suited for creating UI level tests for Vaadin applications. It is based on Selenium 2, which means that all features of Selenium 2/WebDriver are also
Showing 1 - 5 of 100 results.
of 20

See all blog entries
Subscribe to this blog