Directory

← Back

Clara

Declarative UI and Bindings for Vaadin

Author

Contributors

Rating

Clara allows you to use a declarative XML-based syntax for defining Vaadin 7 user interfaces. In addition to defining the component hierarchy, you can also bind data sources and event handers declaratively using annotations.

See the quickstart link on the right for instructions on how to use this add-on or the online demo for quickly trying out the XML syntax.

Sample code

<?xml version="1.0" encoding="UTF-8"?>
<VerticalLayout xmlns="urn:import:com.vaadin.ui" xmlns:l="urn:vaadin:parent">
    <Label id="my-label" value="Hello Clara!" />
    <Button id="my-button" caption="Click me!" width="200px" l:componentAlignment="MIDDLE_CENTER" />
</VerticalLayout>
 // Get XML file from classpath.
InputStream xmlLayout = getClass().getClassLoader().getResourceAsStream("xml-layout.xml");

// Use the static create method of Clara to instantiate the components.
ComponentContainer layout = (ComponentContainer) Clara.create(xmlLayout);

// Now the layout is ready to be used.
setContent(layout);
@UiDataSource("date")
public Property<Date> getDateProperty() {
    return new ObjectProperty<Date>(new Date());
}

@UiDataSource("person-list")
public Container getPersonContainer() {
    IndexedContainer container = new IndexedContainer();
    container.addContainerProperty("Name", String.class, "");
    container.addContainerProperty("Age", Integer.class, 0);

    Item item = container.addItem(1);
    item.getItemProperty("Name").setValue("Teemu Pöntelin");
    item.getItemProperty("Age").setValue(32);

    item = container.addItem(2);
    item.getItemProperty("Name").setValue("John Smith");
    item.getItemProperty("Age").setValue(35);
    return container;
}

@UiHandler("button")
public void handleButtonClick(ClickEvent event) {
    Notification.show("Button \"button\" clicked");
}

@UiHandler("value-field")
public void someValueChanged(ValueChangeEvent event) {
    Notification.show("Value of \"value-field\" is now "
            + event.getProperty().getValue());
}

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Optimizes performance and memory usage.

Released
2015-12-18
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.0+
Vaadin 6.0+ in 0.4.0
Browser
Browser Independent
Online