Designing UIs Declaratively

Hello,

is there any documentation referencing the declarative UI design with Caadin? In the Book of Vaadin there is only a very small part about it. I would like to know which ui components can be defined through the declarative design and which properties of those ui components are accessible on which way. Recently a had problem with defining the image in the .html file where i didn’t know how to set the resource path of the image. Finally a set it in the .java file. It would be nice to prevent such strange searches by means of some documentation.

P.S.
I don’t use Vaadin Designer

Waiting for your responce,
Matthias

Essentially, all components and all properties are supported.

Unfortunately, the attributes are not documented anywhere currently. It was at some point planned that they would be documented in the API docs (not the book), but that hasn’t been done yet. You’re welcome to make wishes regarding that, as it’s rather unclear which would be the one place to document them.

Mostly, they are direct mappings from the property name to the attribute, but some components have special names or handling for some attributes. For example, for images there is an “alt” attribute, which is mapped to alternateText property in the Java API. Such irregular attributes are handled in the readDesign() and writeDesign() methods of each class.

The resource of an image is set with the src attribute, which should point to a resource locator:

<v-image src="theme://somepic.gif" alt="Some image from the theme"/>

It is a pity that that they are not documented yet. I’m currently delevoping with Microsoft Silverlight at work and I used to define the whole UI in the .XAML file. Currently I want to use Vaadin for my private project. Defining UI in in code is somehow strange to me, but as I have read, Vaadin is one of the leading java web frameworks for now and I hope it will grow up. I appreciate the idea of writing the whole functionality in one programming language - it is fine for the developers, who don’t need mastering a couple of languages to write the application. Because my whole project will be created with open open source solutions based on java I hope to use Vaadin further.

I am facing this 508 compliance requirement: Data table cells are associated with the appropriate headers using the scope or id/headers attributes.
As I use Grid for data table, it generates a HTML table with TH element.
But the problem is the generated TH is missing some attributes required by 508 as above.
And I can’t find any java API to set , say, scope attribute.
Any idea how it can be achieved?

Hi, are you sure about this? Can you prove it from code? Cos as far as I understood everything from com.vaadin.ui package that implement Component interface also implements the readDesing method and actually there you may check what parameters are supported. So, I go to Image class, try to find the readDesing method → nothing, I go to its parent AbstractEmbedded class → ah! here it is and what we have?

@Override public void readDesign(Element design, DesignContext designContext) { super.readDesign(design, designContext); if (design.hasAttr("alt")) { setAlternateText(DesignAttributeHandler.readAttribute("alt", design.attributes(), String.class)); } } So, I assume that declarative style for Image class supports only alt attribute and not the src one. Please, correct me if I’m wrong. I’m using 7.7.8 version.

The correct version for this:

<v-image source="theme://somepic.gif" alt="Some image from the theme"/>

This is because all default properties have been checked also. DesignAttributeHandler code:

private static void resolveSupportedAttributes(Class<?> clazz) { which will return all set-get methods. Whereas Image has a setSource method → property will be named as ‘source’.

Best rgrds,
Jenia