Clara
Declarative UI and Bindings for Vaadin
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());
}
Links
- Author Homepage
- Online Demo
- Issue Tracker
- Source Code
- QuickStart
- Discussion Forum
- SimpleAddressbook with Clara
- Webinar video
- claraxsd-maven-plugin
- Clara4Spring Extension
Compatibility
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
Clara - Vaadin Add-on Directory
Declarative UI and Bindings for Vaadin
Online Demo
Issue Tracker
Source Code
QuickStart
Discussion Forum
SimpleAddressbook with Clara
Webinar video
claraxsd-maven-plugin
Clara4Spring Extension
Clara version 0.1.0
First experimental release.
Clara version 0.2.0
- Added concept of attribute interceptors
- Added option to easily load layout files from VAADIN/layouts directory
- Some API changes
- Some bugfixes
- Project is now built with Maven
Clara version 0.2.1
Attempt to fix unfortunate packaging issues with 0.2.0
Clara version 0.3.0
- 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.
Clara version 0.4.0
Introduced new annotation @UiField.
Renamed @DataSource to @UiDataSource.
Renamed @EventHandler to @UiHandler.
Renamed AttributeInterceptor to AttributeFilter.
Miscellaneous improvements to error handling.
Clara version 0.5.0
Support for Vaadin 7 (tested against 7.0.0.rc2).
Dropped support for loading layout files directly from VAADIN/layouts directory.
Clara version 0.6.0
Optional id attribute for @UiField annotation (field name used as a default).
Support for enum attributes.
Clara version 1.0.0-beta1
URN namespace identifier changed from "package" to "import".
Layout attribute namespace changed from "urn:vaadin:layout" to "urn:vaadin:parent".
@UiField binding only assigns fields that are null.
Support for setter methods without any parameters (in XML sizeFull="").
Javadoc improvements.
Clara version 1.0.0-beta2
Added support for AbsoluteLayout positioning. (See https://github.com/tehapo/Clara/issues/11)
Clara version 1.0.0-beta3
Added support for SingleComponentContainers (thanks to Andrew Teirney for the patch).
Clara version 1.0.0
Final 1.0.0 release.
Maturity changed from beta to stable.
No code changes since 1.0.0-beta3.
Clara version 1.1.0
Bugfix release including following fixes:
- Fixed captions for TabSheet (issue #25).
- Removed logging.properties from the package (issue #26).
- Fixed @UiField binding of superclass fields (issue #27).
Clara version 1.2.0
* Listener bindings are now serializable.
* Fix for value handling on certain components.
* Documentation fixes.
Clara version 1.3.0
* More flexibility with ComponentProvider abstraction.
* Changes in exception handling.
* Huge thanks for to the contributors!
* Please see [GitHub change log](https://github.com/tehapo/Clara/commits/version-1.3.0) for details.
Clara version 1.4.0
* Provide more control on component creation via ClaraBuilder.
* Custom components can now be notified of completed construction via InflaterListener interface.
* Added support for custom ComponentProviders.
* Thanks to Mark Rotteveel and Mark Koops for contributions!
Clara version 1.4.1
Fixes issues of detecting inherited fields from a superclass, [PR #37](https://github.com/tehapo/Clara/pull/37).
Clara version 1.4.2
Optimizes performance and memory usage.