Building UI and Handling Events

Composing a View

Every application comprises the Main View created using menus and sub-menus. This Main View is usually built using the App Layout component. It has a menu area along with a content area.

View Navigation

As we have discussed so far, a web application has many views. Each view can be mapped to a URL using routing. A part of the URL called the route signals the Vaadin to show a particular view. The user can navigate from one view to another using a menu.  

Handling Events

Events are actions we can perform to change the state of the object. 

The users interact with the application by performing actions like a button click, cursor movement, keypress through the keyboard or page scrolling. These user interactions cause events. 

Vaadin Flow uses event-driven programming to handle events. 'Event listeners' are applied to the components so that the users can interact with components. 

Event listeners are implemented using- 

🍁 Lambda Expressions

🍁 Anonymous Classes

🍁 Handler Methods

🍁 Lambda Expressions

If only one method needs to be implemented, then we can use Lambda Expressions. For example, a lambda expression can be used to handle the button click event as follows:

Implementation

Button button = new Button("Click Here!",
  event -> event.getSource().setText("Clicked!!!"));
add(button);

You can also try this code with Online Java Compiler

Run Code

Output

Explanation:

As you run the code you can see the button ‘Click Here’. After clicking the button, it will change to ‘Clicked!!!’. (The arrow is not part of the output. It is just to show the transition that will happen).

🍁 Anonymous Classes

Anonymous classes are another shorthand way to implement handlers. They are more explicit than lambda expressions with the parameter type and can make the code clearer. They can also have a state, like normal classes.

Implementation

Button btn = new Button("Click Here",
    new ComponentEventListener<ClickEvent<Button>> () {
    int count = 0;
    @Override
      public void onComponentEvent(ClickEvent<Button> event) {
        event.getSource().setText("Clicked button " +
                                  (++count) + " time");
      }
});


add(btn);

You can also try this code with Online Java Compiler

Run Code

Output

Explanation:

As you run the code you can see the button ‘Click Here’. After clicking the button, it will change to ‘Clicked button 1 time’. (The arrow is not part of the output. It is just to show the transition that will happen). If you click on the button again, it will change to ‘Clicked button 2 time’. 

🍁 Handler Methods

We can also direct events to methods with method references.

The following example shows how to use handler methods to handle an event. 

Implementation

class ButtonBar extends HorizontalLayout {
    public ButtonBar() {
      add(new Button(“Coding", this::ok));
      add(new Button("Ninja", this::cancel));
    }
    public void ok(ClickEvent<Button> event) {
      event.getSource().setText("Ninja!");
    }
    public void cancel(ClickEvent<Button> event) {
      event.getSource().setText("Coding!");
    }
}
add(new ButtonBar());

You can also try this code with Online Java Compiler

Run Code

Frequently Asked Questions

What is the Vaadin Framework?

Vaadin Flow is a Java web framework that can be used to create web apps and websites. The programming approach of Vaadin Flow enables developers to use Java as the programming language for developing User Interfaces (UIs) without needing to use HTML or JavaScript directly.

How can we navigate through the views in Vaadin?

Each view can be mapped to a URL using routing. These URLs can be used to navigate through the views. A part of the URL called the route signals the Vaadin to show a particular view.

What are the different ways of handling events in Vaadin?

Vaadin uses event-driven programming to handle events. We can use Lambda Expressions, Anonymous Classes and Handler methods to handle events in Vaadin.

Conclusion

Congratulations on finishing the blog!🎉 In this blog, we have discussed the concept of building the user interface using Vaadin. We also discussed the different ways of handling user interactions with the application components.

After reading about Building User Interface and Handling Events, are you not feeling excited to read/explore more articles on the topic of Vaadin? Don't worry; Coding Ninjas has you covered. If you want to check out articles related to Vaadin, refer to these links: Vaadin Architecture, Vaadin Environment Setup,  Vaadin Button.

Refer to our Guided Path on Coding Ninjas Studio to upskill yourself in Data Structures and Algorithms, Competitive Programming, JavaScript, System Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio! But if you have just started your learning process and are looking for questions asked by tech giants like Amazon, Microsoft, Uber, etc.; you must look at the problems, interview experiences, and interview bundle for placement preparations.

Nevertheless, you may consider our paid courses to give your career an edge over others!

Please upvote our blog to help other ninjas grow.💪

Happy Learning!🤩