Embedded Application Properties

Updating Properties on the Client Side

This section will cover how the host environment (server) communicates with the client. It also explains how to update client-side property values from the server. If you have any doubt regarding the Client-Server model, you can check out this Client-Server Model.

We need the following things to update the client-side property values.

• The first thing we need is the reference to the web component that contains the exported component.
• The second thing we need is a reference to the instance of the exported component itself.

We can also implement the abstract configureInstance() method to update the properties and fire client-side events.

The configureInstance() method receives references to WebComponent<PersonComponent> and PersonComponent. Here PersonComponent is the exported component, and the WebComponent is used to communicate with the client.

Example:

Let's see how we update the is-adult boolean property when the age property changes in the PersonComponent instance.

@Override
    protected void configureInstance(
            WebComponent<PersonComponent> webComponent,
            PersonComponent component) {
        component.setAdultAge(18); // initialization


        component.addAgeChangedListener(event -> {
            webComponent.setProperty(isAdultProperty,
                    component.isAdult());
        });

You can also try this code with Online Java Compiler

Run Code

Let's see an example of how the is-adult property is configured to update on the client side. Also, the next step is to access and leverage this property.

Example:

In this example, we are embedding the person display component in the web page and updating <span id='designator'>. It means that the script checks periodically whether or not the person has reached adulthood and updates <span id=" designator"> when this occurs.

<person-display id="person" age=15></person-display>
<span id="designator">is a child</span>
<script>
    function updateDesignator() {
        var personComponent = document
                .querySelector("#person");
        if (personComponent["is-adult"]) {
            document.querySelector("#designator")
                    .innerText = "is an adult!";
        } else {
            setTimeout(updateDesignator, 1000);
        }
    }
    updateDesignator();
</script>

Firing Custom Events on the Client side.

For firing custom events on the client side, we can use a WebComponent instance.

We can also use the [methodname]`webComponent`fireEvent() method to fire events for given parameters.

Let's discuss an example to know more about this.

Example:

In this example, we are using the webComponent`fireEvent() method to fire the `"retirement-age-reached" event. We use custom logic and custom events, i.e., if the person's age exceeds 60, then an event of type "retirement-age-reached" is fired on the client side.

component.addAgeChangedListener(event -> {
            if (event.getAge() > 65) {
                webComponent.fireEvent(
                        "retirement-age-reached");
            }
 });

Till now, we have talked much about Embedded Application Properties. You can also check out these  Using Vaadin with Spring MVC, and Routing with Spring to know more about Vaadin.

Now. Let's see some FAQs related to the embedded application properties of Vaadin.

Frequently Asked Questions

Vaadin provides which class to embed applications fro using web components?

Vaadin provides WebComponentExporter class that allows us to embed applications using web components.

Is vaadin a good framework?

Yes, Vaadin is a good framework as it is used for developing rich internet applications. 

What do you mean by the Vaadin flow?

Vaadin Flow is a unique framework that lets you build web apps without writing HTML or JavaScript.

Is vaadin server-side rendering?

The UI of a server-side Vaadin application is rendered in the browser by the Vaadin Client-Side Engine. It is loaded in the browser when the page with the Vaadin UI is opened. The server-side UI components are rendered using widgets (as they are called in GWT) on the client-side.

Is vaadin based on GWT?

Vaadin uses GWT to build a full-fledged application framework. It is one of the main GWT-based frameworks ( along with the Errai framework) and provides exciting capabilities like addons, themes, and integrations with other Java frameworks such as Spring.

Conclusion

In this article, we have discussed Embedded application properties. We generally discussed three things, i.e., Defining web component properties, Updating properties on the client side, and Firing custom events on the client side with examples.

After reading about the Embedded application properties, are you not feeling excited to read/explore more articles on Data Structures and Algorithms? Don't worry; Coding Ninjas has you covered. See Java, JSP-XML, GWT vs Vaadin, GWT Basics, Introduction to Spring Boot, Spring Boot Starter Web, and Spring Boot to learn.

Do upvote our blogs if you find them helpful and engaging!

Happy Learning!