Vaadin 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();
layout.setMargin(true);
setContent(layout);
Button button = new Button("Click Me");
button.addClickListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
layout.addComponent(new Label("Thank you for clicking"));
}
});
layout.addComponent(button);
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" />
</VerticalLayout>
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.
@UiHandler("my-button")
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ö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