Vaadin - declarative and programmatic UI creation

Vaadin 6 / 7 / 8
1

I work on a project that uses ZK and we’re considering moving away from that framework and Vaadin is a potential candidate. One of the nice things ZK supports is declaratively composing a UI from ZUL files (ZUL is basically XML). We’ve built around the declarative model to allow our users to dynamically create they’re own screens. Vaadin does not seem to have a direct equivalent to this declarative model…or does it? I’m no Vaadin expert so thats why I ask. If Vaadin supports both programmatic and declarative UI building then that would be great and exactly what we need.

I noticed new HTML5 Components using Polymer and this seems like it could work for building UIs declaratively and if thats the case whats the roadmap for developing the standard Vaadin components this way?

Basically my question can be reduced to: Does Vaadin support both declarative and programmatic UI creation and if so can you provide examples/docs on the declarative approach?

BTW - kuddos on Vaadin it looks REALLY nice!

Thank you

2

Hi, Vaadin supports declarative UI creation since version 7.4 (the current major version).

You can view e demo at http://demo.vaadin.com/sampler/#foundation/declarative-syntax

In the book of Vaadin there is a section on declarative UI design at https://vaadin.com/book/-/page/application.declarative.html

There is a new addon in beta: Vaadin designer, look at https://vaadin.com/designer

3

Thank you Claudio. I hadn’t made it that far in the docs or site yet. So that looks very promising, questions I have now are:

  1. Does the declarative-syntax support all the same things as the programmatic model?
  2. How does the declarative-syntax relate with the HTML 5 Components (i.e. Polymer)?

Thank you

4

  1. You can build UIs from component hierarchies and their properties just like with the programmatic model, but you need Java code to a) handle user interaction and dynamic changes in the UI, b) set up data.

  2. The declarative syntax is similar to the HTML5 syntax used with Vaadin Components. They will probably relate very closely in future, but currently in the experimental phase of the Components they are separate.

5

Thanks for the jiffy responses.

Looking forward to seeing how the HTML5 Vaadin Components develop.

6

He guys,

also got a question about this topic. Is it possible to use “class” attribute in XML syntax? I’m looking for something like it’s done in JavaFX and FXML.

E.g.

<v-text-field caption="Email" class="myownstyle" /> And then define this style in a css behind? Or in the theme?