Building the UI

Vaadin user interfaces are built hierarchically from components, so that the leaf components are contained within layout components and other component containers. Building the hierarchy starts from the top (or bottom - whichever way you like to think about it), from the UI class of the application. You normally set a layout component as the content of the UI and fill it with other components.

Java

  1. public class MyHierarchicalUI extends UI {
  2. @Override
  3. protected void init(VaadinRequest request) {
  4. // The root of the component hierarchy
  5. VerticalLayout content = new VerticalLayout();
  6. content.setSizeFull(); // Use entire window
  7. setContent(content); // Attach to the UI
  8. // Add some component
  9. content.addComponent(new Label("Hello!"));
  10. // Layout inside layout
  11. HorizontalLayout hor = new HorizontalLayout();
  12. hor.setSizeFull(); // Use all available space
  13. // Couple of horizontally laid out components
  14. Tree tree = new Tree("My Tree",
  15. TreeExample.createTreeContent());
  16. hor.addComponent(tree);
  17. Table table = new Table("My Table",
  18. TableExample.generateContent());
  19. table.setSizeFull();
  20. hor.addComponent(table);
  21. hor.setExpandRatio(table, 1); // Expand to fill
  22. content.addComponent(hor);
  23. content.setExpandRatio(hor, 1); // Expand to fill
  24. }
  25. }

The component hierarchy could be illustrated with a tree as follows:

  1. UI
  2. `-- VerticalLayout
  3. |-- Label
  4. `-- HorizontalLayout
  5. |-- Tree
  6. `-- Table

The result is shown in Simple hierarchical UI.

ui architecture hierarchical

Simple hierarchical UI

Instead of building the layout in Java, you can also use a declarative design, as described later in “Designing UIs Declaratively”. The examples given for the declarative layouts give exactly the same UI layout as built from the components above.

The built-in components are described in “User Interface Components” and the layout components in “Managing Layout”.

The example application described above just is, it does not do anything. User interaction is handled with event listeners, as described a bit later in “Handling Events with Listeners”.

Application Architecture

Once your application grows beyond a dozen or so lines, which is usually quite soon, you need to start considering the application architecture more closely. You are free to use any object-oriented techniques available in Java to organize your code in methods, classes, packages, and libraries. An architecture defines how these modules communicate together and what sort of dependencies they have between them. It also defines the scope of the application. The scope of this book, however, only gives a possibility to mention some of the most common architectural patterns in Vaadin applications.

The subsequent sections describe some basic application patterns. For more information about common architectures, see “Advanced Application Architectures”, which discusses layered architectures, the Model-View-Presenter (MVP) pattern, and so forth.

The “Accessing Session-Global Data” discusses the problem of passing essentially global references around, a common problem which is also visited in Accessing UI, Page, Session, and Service.

Compositing Components

User interfaces typically contain many user interface components in a layout hierarchy. Vaadin provides many layout components for laying contained components vertically, horizontally, in a grid, and in many other ways. You can extend layout components to create composite components.

Java

  1. class MyView extends VerticalLayout {
  2. TextField entry = new TextField("Enter this");
  3. Label display = new Label("See this");
  4. Button click = new Button("Click This");
  5. public MyView() {
  6. addComponent(entry);
  7. addComponent(display);
  8. addComponent(click);
  9. // Configure it a bit
  10. setSizeFull();
  11. addStyleName("myview");
  12. }
  13. }
  14. // Use it
  15. Layout myview = new MyView();

This composition pattern is especially supported for creating forms, as described in “Binding Member Fields”.

While extending layouts is an easy way to make component composition, it is a good practice to encapsulate implementation details, such as the exact layout component used. Otherwise, the users of such a composite could begin to rely on such implementation details, which would make changes harder. For this purpose, Vaadin has a special CustomComponent wrapper, which hides the content representation.

Java

  1. class MyView extends CustomComponent {
  2. TextField entry = new TextField("Enter this");
  3. Label display = new Label("See this");
  4. Button click = new Button("Click This");
  5. public MyView() {
  6. Layout layout = new VerticalLayout();
  7. layout.addComponent(entry);
  8. layout.addComponent(display);
  9. layout.addComponent(click);
  10. setCompositionRoot(layout);
  11. setSizeFull();
  12. }
  13. }
  14. // Use it
  15. MyView myview = new MyView();

For a more detailed description of the CustomComponent, see “Composition with CustomComponent”.

View Navigation

While the most simple applications have just a single view (or screen), perhaps most have many. Even in a single view, you often want to have sub-views, for example to display different content. Navigation Between Views illustrates a typical navigation between different top-level views of an application, and a main view with sub-views.

view navigation hi

Navigation Between Views

The Navigator described in “Navigating in an Application” is a view manager that provides a flexible way to navigate between views and sub-views, while managing the URI fragment in the page URL to allow bookmarking, linking, and going back in browser history.

Often Vaadin application views are part of something bigger. In such cases, you may need to integrate the Vaadin applications with the other website. You can use the embedding techniques described in “Embedding UIs in Web Pages”.

Accessing UI, Page, Session, and Service

You can get the UI and the page to which a component is attached to with getUI() and getPage().

However, the values are null until the component is attached to the UI, and typically, when you need it in constructors, it is not. It is therefore preferable to access the current UI, page, session, and service objects from anywhere in the application using the static getCurrent() methods in the respective UI, Page, VaadinSession, and VaadinService classes.

Java

  1. // Set the default locale of the UI
  2. UI.getCurrent().setLocale(new Locale("en"));
  3. // Set the page title (window or tab caption)
  4. Page.getCurrent().setTitle("My Page");
  5. // Set a session attribute
  6. VaadinSession.getCurrent().setAttribute("myattrib", "hello");
  7. // Access the HTTP service parameters
  8. File baseDir = VaadinService.getCurrent().getBaseDirectory();

You can get the page and the session also from a UI with getPage() and getSession() and the service from VaadinSession with getService().

The static methods use the built-in ThreadLocal support in the classes.

  1. The pattern is described in
  2. <<dummy/../../../framework/advanced/advanced-global#advanced.global.threadlocal,"ThreadLocal
  3. Pattern">>.