Preserving Contents of Embedded Applications on Refresh

Introduction💁

Java is an object-oriented, class-based, high-level programming language. It is based on the concept of WORA (write once use anywhere) for developer ease. Java classes are compiled into bytecode. The compiled byte codes can be used on any platform supporting Java without recompiling the class.

Users can prevent the loss of content in an embedded application on refresh by using the properties of the embedded application. Users can use the PreserveOnRefresh annotation present in the Vaadin application to preserve the content. 

Example👀

Now that we know the theory behind preventing the loss of content of an Embedded Application. Let us look at an example of how to implement it using Java.

@PreserveOnRefresh
public class embeddedComponent extends WebComponentExporter<EmbeddedComponent> {
    public embeddedComponent() {
        super("embedded-component");
    }


    @Override
    protected void configureInstance(WebComponent<EmbeddedComponent> webComponent, EmbeddedComponent component) {
    }
}

You can also try this code with Online Java Compiler

Run Code

Users can create a version of a web component using the above code sample, although users can also create multiple web components, as done in the following code snippet.

@PreserveOnRefresh
public class embeddedComponent1 extends WebComponentExporter<EmbeddedComponent> {
    public embeddedComponent() {
        super("embedded-component-1");
    }


    @Override
    protected void configureInstance(WebComponent<EmbeddedComponent> webComponent, EmbeddedComponent component) {
    }
}


public class embeddedComponent extends WebComponentExporter<EmbeddedComponent> {
    public embeddedComponent2() {
        super("embedded-component-2");
    }


    @Override
    protected void configureInstance(WebComponent<EmbeddedComponent> webComponent, EmbeddedComponent component) {
    }
}

You can also try this code with Online Java Compiler

Run Code

Identity Preservation✨

The Vaadin server-side component uses a generated id to link the Vaadin embedded application and the non-Vaadin pages used. 

If the user wants to share the state of the embedded component between these third-party pages, they do not need to do anything. However, if the user wants to use multiple instances of the embedded component on various pages, then that might cause a problem. So to make sure that the state of the embedded component is preserved, the user can assign an explicit id attribute to the embedded component. For example,

<div>
    <embedded-component id="uniquely-preserved"></embedded-component>
</div>

By adding this id attribute to the component, users can preserve the state of the embedded component.

Users can also choose to keep the state preserved in a particular location. For example,

<!-- First Location -->
<div>
    <embedded-component id="First-Location-preserved"></embedded-component>
</div>


<!-- Second Location -->
<div>
    <embedded-component id="Second-Location-preserved"></embedded-component>
</div>

Now let's discuss some frequently asked questions associated with Embedded Applications.

Frequently Asked Questions

What are Embedded Applications?

An embedded application is nothing but software placed inside another software to perform a particular task. In our case, we have embedded an application inside a web page.

What are some real-time uses of Embedded Applications?

Embedded Applications are widely used in many real-time applications, such as.

• Smart TVs
• Missile Guidance System
• ABS, Airbags
• Smart Phones
• GPS Navigation Systems
• Road Safety Systems 

What is the need to preserve the content of an Embedded Application on refresh?

Since clicking refresh is not counted as a time-out scenario, so as soon as the reload button is pressed, this causes the existing subclass objects to be replaced with new subclass objects. Thus there might rise a need to preserve the content on hitting refresh.

In what scenarios is there no need for preserving the content?

There are multiple scenarios in which there is no need to explicitly preserve the content of an embedded application. For example,

• The session times out
• The user quits the browser
• The session is explicitly ended
• Any other terminating event