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 void contentCreated()
  {
    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());
  }

  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

• Javadoc
• Demo Project
• Source Code

Compatibility