Clara - Declarative UI and Bindings for Vaadin Framework


I have been working on a declarative XML-based language for Vaadin user interface definitions. Also as a by-product I have implemented an annotation-based way to declaratively bind methods to work as a data source or an event handler for a Vaadin component. The work has largely been inspired by the
add-on by
Joonas Lehtinen

Best place to get started is to download the JAR from
and then read the README (including quickstart instructions) at the
Clara project page
. Also I deployed an online
demo application
that can be used for playing around with the XML syntax.

Currently the project is in a very early stage but I still wanted to release something early to get some feedback from the Vaadin community. So, please let me know if you try out the add-on and have any questions/ideas/feedback. Thanks!

*) The project logo is a reference to one of my favorite movies Back to the Future (part III).

Great work. Looks cool and somewhat familar ;) Here are quick comments.

  • I would not use word View in API (ViewInflater) as it has a special meaning in Vaadin 7
  • Would inflate/deflate be the best terms for serializing UI. Would load/save be more down-to-earth?
  • Controller API looks nice and simple

Nice. I’m doing the same thing … :smiley:

Thanks for the comments! You’re absolutely right about the naming. I’ll come up with a new name for the ViewInflater. Actually the term inflate comes from Android where it’s used for instantiating an XML layout into corresponding objects. I’ll reconsider that also.

Good Job (+1) from me :slight_smile:
I am doing more or less the same thing also :slight_smile: and I am trying to provide Visual IDE support… you can see some screenshots from the following link

Extending WYSIWYG Vaadin Eclipse Plugin

I agree with Joonas’s suggestions and more suggestions from my side

  • a declarative ui component (call Alayout.xml) should be referenced inside another declerative ui (call it BLayout.xml). And components of Alayout.xml should be accessable from BLayout.xml (I mean inside the controller of the BLayout.xml).
  • May be lazy declarative ui component loading(inflating) should be provided.

kinds and goodluck in your master thesis…

Thanks Andreas and Alper for sharing your ideas! I’ll definitely take a look of your projects.

Nice to know that I’m not alone in the quest for declarative syntax for Vaadin. :slight_smile:

Cool. Definitely going to follow the progress of this- maybe even try out some ideas of my own and provide some feedback later. At this point wanted just to say that keep up the good work!

Great! Thanks for the encouragement!

Hei, Teemu !
Great work ! Did Anroid layouts inspired you with Clara ? Because it looks very similar (especially for me, after megabytes of written ones :))
Would be also nice if we can drop xml’s into the theme/layout standard location for custom layout and load them like LayoutInflater.load(“xyz.xml”)

Keep up the great work !
Will try it in the meantime in my current project as well !


Hi Dmitri,

and sorry for a delayed response. I haven’t been reading the forum too actively while on my summer vacation. Anyway, thanks for your comments. I have done some work on Android stuff and I guess that also had some influence on the syntax. :slight_smile: Standard location for the layout files would be a good idea. I’ll add this feature in a future version of the add-on. Thanks!

  • Teemu

Hi. Greate job )
I hope to see a stable version =). Finally i can say goodbye to SmartGWT )
I develop electronic document and ur addon it’s perfect for custom documents. So if u need to test or any help, write to me :slight_smile:

And some bugs (mb)

  1. Attribute sizeFull=“true” doesn’t work
  2. Attribute width in “VerticalLayout” , doesn’t work. Any value that i wrote == 100% size
  3. How can i declare 100% of size ( width,height)

Thank you very much for the kind words and encouragement. The width/height handling is clearly a bug. I created an
for this in GitHub and it will be fixed for 0.2 release (actually already made a quick fix that I’ll commit after some clean up).

  • Teemu


I just released a version
0.2.1 of the
Clara add-on

The bugs discussed in this thread should now be fixed and there is an option to add the layout XML files to
directory to simplify the loading of the layouts. Also you can provide
instances that can be used to make some runtime modification to the attributes defined in the XML file (for example to internationalize captions). The API has also gone through some changes, so you’ll need to make some changes to your code.

See the
Directory page
for more details. And as always, any feedback is more than welcome!

  • Teemu

Version 0.2.0 had some unfortunate issues with the packaging and I had to quickly release version 0.2.1 to replace it.


I just released the version 0.3.0 of my
Clara add-on
. If you are already using Clara, your application will need some changes for this version. See below for release notes (also listed in the Vaadin Directory page) and more detailed instructions on the

Clara 0.3.0
(released October 28th 2012)
■ Namespace “urn:vaadin:com.vaadin.ui” is now “urn:package:com.vaadin.ui”.
■ The namespace of core Vaadin components (mentioned above) is now also optional.
■ Naming convention for layout attributes (for example “layout_componentAlignment”) is now replaced with a proper namespace “urn:vaadin:layout” (see examples for details).
■ The id attribute is now mapped to debugId property of Vaadin components.
■ New class Clara now acts a public API simplifying the usage of this add-on to few static method calls.
■ InflatedCustomComponent class is now gone and Clara always returns the actual root component.
■ Improved
demo application

As always, please let me know if you have any comments or questions about my add-on. Also note that currently only Vaadin 6.x is supported but Vaadin 7.x support is coming soon.

Very nice work! Reallylike the annotations ideas.

Have you seen the
addon? It seems similar. I like the cleaner XML syntax, but would appreciate your views.

Also, any comments on how you would use / add addon components in addition to the regular Vaadin widgets?

I am leaning to adopting VulComposer because of its similarity to ZK 5.x whch I worked with for a few years, but Clara has some very nice ideas too!

Hi Anthony,

thank you for the feedback. I haven’t looked into the VulComposer add-on in detail (yet) but it sure looks quite similar to Clara. Unfortunately the project might abandoned judging by the commit log (last commit from August 2010).

Clara supports any add-ons or custom Vaadin components if you provide the proper namespace. See the code example below with my
add-on used as an example. :slight_smile:

<VerticalLayout xmlns:a="urn:package:org.vaadin.teemu.ratingstars">
    <a:RatingStars id="rating-field" caption="Add-ons work too" />
  • Teemu

Thanks Teemu,
I agree VulComposer does appear to be a bit zombie.

On the XML syntax, I’m not a major fan of XML at the best of times, and I understand the need for the URN, but is there any other way to simplify the syntax? One small suggestion would be to either make the component name case insensitive, or all lower case, which is what I liked about VulComposer, very quick to write, no URNs etc.

As I think I mentioned, I have a lot of experience with ZK and the XML syntax they use is very clean in their case, and it is very feasible to write a very decent UI in a text editor.

Which is what I like about Clara as a concept. Plus, having a Back to the Future link never hurts.

Great component and concept.

Hi Teemu,
I’m starting a Vaadin 7 project and wanted to also use Clara as well. I’ve run into a small issue- how do I declare an option group (i.e. Radio Buttons)?

The … part works fine. However, what do i fill inside the XML with? I’ve tried using Button but it just shows a regular button, I’ve also tried plain text which produces nothing.

The syntax for OptionGroup would need me to call .addItem(…) in the code. Any suggestions?

I understand I can reference it with @UiField and then add the details in the code of controller. Which raises a second question, what method is called in the controller before or after initialisation of the Clara object into regular Vaadin?

This would be to initialize objects, etc.

Thanks in advance for your response!

Hi Anthony,

at least for the moment there is no way to fill the data via XML, but you should use the databinding with

Let me use the demo application to illustrate my point:

  1. See the
    class of the demo application. To be more specific, see the method
    which is annotated with
  2. Open the
    Clara demo application
  3. Replace the [font=Courier New]
[/font] element in the example with an [font=Courier New] OptionGroup [/font] element bound to the same data source by copying the line from below: [font=Courier New] [/font]

Now you should see radio buttons with two options presented.

Currently no callback methods are called before or after initialization. Of course you could call some init method from your own code after calling the
method. Perhaps I could provide some way to define callback methods. I’ll need to think about this before Clara 1.0 release.

  • Teemu

Thanks for the super-fast response Teemu!

My suggestion would be to have an annotation such as @Init which the Clara.create method can call after building the UI (assuming the @UiField bindings are done). This would allow any post create but pre-display to be done.

The only potential issue is that when @Init is called, the component has not yet been added to the main page… not sure if this would be a problem.

Thanks again for the prompt response.