Directory

← Back

Declarative UI for Vaadin Flow

Declarative UI for Vaadin Flow

Author

Rating

Popularity

<100

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>

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

Released
2024-03-23
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 24.3+
Vaadin 24.2+ in 4.3.3
Vaadin 24.1+ in 4.1.0
Vaadin 24+ in 4.0.0
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
N/A

Declarative UI for Vaadin Flow - Vaadin Add-on Directory

Declarative UI for Vaadin Flow Declarative UI for Vaadin Flow - Vaadin Add-on Directory
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](https://gitlab.com/codecamp-de/vaadin-flow-dui) and/or take a look at the [source code of the demo application](https://gitlab.com/codecamp-de/vaadin-flow-dui-demo).** 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.
Online