Declarative UI for Vaadin Flow
Declarative UI for Vaadin Flow
This is basically Vaadin-8-style Declarative UI for Vaadin Flow. The goal is to externalize the layout of the components in your application and have it as much more readable HTML/XML instead of cluttering up your Java code. It's completely interpreted and converted to a Component-tree on the server-side.
Support for additional components and attributes can be added quite easily. The add-on comes with built-in support for Spring Boot to pick up custom ComponentFactory
and ComponentPostProcessor
beans.
For more details on why or how to use this add-on, please see the project page and/or take a look at the source code of the demo application.
See the Links section for add-ons that try to solve the same problem, albeit in completely different ways.
For Vaadin 14 support, see versions 0.x.
Sample code
// src/main/java/my/package/DemoView.java // imports omitted @Route("demo") public class DemoView extends TemplateComposite { /** * Created in the template and mapped to this field. */ @Mapped("shuffleButton") private Button shuffleButton; /** * Created here and mapped into the template. */ @Slotted("localeGrid") private Grid<Locale> localeGrid = new Grid<>(Locale.class); public DemoView() { } @Override protected Component initContent() { Component content = super.initContent(); localeGrid.removeAllColumns(); localeGrid.addColumn(Locale::toLanguageTag).setHeader("Language Tag"); localeGrid.addColumn("displayLanguage"); localeGrid.addColumn("displayCountry"); localeGrid.addColumn("displayVariant"); localeGrid.setDetailsVisibleOnClick(true); localeGrid.setItemDetailsRenderer(new ComponentRenderer<>(locale -> { LocaleDetails details = new LocaleDetails(); details.setLocale(locale); return details; })); shuffleButton.addClickListener(e -> shuffleLocales()); localeGrid.setItems(Locale.getAvailableLocales()); return content; } private void shuffleLocales() { List<Locale> locales = Arrays.asList(Locale.getAvailableLocales()); Collections.shuffle(locales); localeGrid.setItems(locales); } @FragmentId("DetailsFragment") public static class LocaleDetails extends FragmentComposite { @Mapped("info") private TextField info; public void setLocale(Locale locale) { info.setValue(locale.getDisplayLanguage(locale) + " / " + locale.getDisplayCountry(locale) + " / " + locale.getDisplayVariant(locale)); } } }
<!-- src/main/resources/my/package/DemoView.html --> <vaadin-vertical-layout size-full> <slot name="localeGrid"></slot> <vaadin-button id="shuffleButton" theme="primary">Shuffle</vaadin-button> </vaadin-vertical-layout> <fragment id="DetailsFragment"> <vaadin-horizontal-layout width-full> <vaadin-text-field id="info" readonly width-full> </vaadin-text-field> </vaadin-horizontal-layout> </fragment>
Links
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
- Supports and requires Vaadin 24.
- Released
- 2023-03-09
- Maturity
- STABLE
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 24+
- Vaadin 23 in 3.4.1
- Vaadin 22+ in 2.2.4
- Vaadin 21+ in 2.1.3
- Vaadin 14+ in 2.1.4
- Browser
- Browser Independent