Views - miguelperezcolom/mateu GitHub Wiki

In Mateu views are the main containers for the UI. It contains components such as forms, cruds, ... arranged in a header, left, main, right and footer parts.

When you return a form or a crud from your methods then it is usually wrapped in a view component so you do not need to explicitly declare it, even though it is effectively sent to the frontend.

This is an example of view:

@MateuUI("/complexview")
public class ComplexView implements Container {

  @Slot(SlotName.left)
  @VerticalLayout
  List<Object> left =
      List.of(
          new Card("Simple Card 1", "Subtitle 1", "Content 1"),
          new Card("Simple Card 2", "Subtitle 2", "Content 2"));

  @Slot(SlotName.left)
  Card simpleCard = new Card("Simple Card 3", "Subtitle 3", "Content 3");

  @Slot(SlotName.right)
  @VerticalLayout
  List<Object> right =
      List.of(
          new Card("Simple Card 7", "Subtitle 7", "Content 7"),
          new Card("Simple Card 8", "Subtitle 8", "Content 8"));

  @Slot(SlotName.header)
  @VerticalLayout
  List<Object> header =
      List.of(new Element("h1", "This is the title"), new Element("h2", "This is the subtitle"));

  HorizontalLayoutContainer horizontalLayoutContainer;

  AnotherSimpleForm anotherSimpleForm;

  @HorizontalLayout
  List<Object> hl =
      List.of(
          new Card("Simple Card 5", "Subtitle 5", "Content 5"),
          new Card("Simple Card 6", "Subtitle 6", "Content 6"));

  String stringField = "stringField";

  SimpleCrud simpleCrud;

  @Slot(SlotName.footer)
  @RawContent
  String htmlInFooter = "<h2>Hola! esto es el footer</h2>";
}

Please notice that it extend the Container interface. That is so to let Mateu understand that this is not a form.

Please notice that some elements are annotated with @Slot in order to place it in any of the parts of teh view. By default components are placed in the main part of the view.

⚠️ **GitHub.com Fallback** ⚠️