Docs

Docs

Accessing the Browser Page

Accessing the browser page using the Page object.

Besides using the Element API to manipulate the DOM in the browser, you can also interact with the browser page by adding style sheets, executing JavaScript, and receiving browser resize events.

These features are available through the Page object. You can access the page of the current request with UI.getCurrent().getPage().

Getting the Window Location URL

Use the Page.fetchCurrentURL() method to fetch the current URL from the browser.

For example:

Source code
Getting the browser URL
UI.getCurrent().getPage().fetchCurrentURL(currentUrl -> {
    // This is your own method that you may do something with the url.
    // Note that this method runs asynchronously
    storeCurrentURL(currentUrl);
});

Accessing Browser Information

During the initial HTTP request, Vaadin reads the user-agent information supplied by the browser and stores it in a WebBrowser instance, which is accessible from the current VaadinSession.

Use getUserAgent() to get the raw user-agent string. For structured browser detection (e.g., browser name, version, or operating system), use a parsing library such as ua-parser/uap-java.

Source code
Java
WebBrowser browser = VaadinSession.getCurrent().getBrowser();
String userAgent = browser.getUserAgent();
// Use a parsing library for structured detection, for example:
// Parser parser = new Parser();
// Client client = parser.parse(userAgent);
// String browserName = client.userAgent.family; // "Chrome"
// String os = client.os.family; // "Windows"
Note
 The browser and OS detection methods in WebBrowser — such as getBrowserApplication(), isChrome(), isWindows(), and getBrowserMajorVersion() — are deprecated. Use getUserAgent() with a parsing library instead.

Getting the Extended Client-Side Details

Use retrieveExtendedClientDetails() in the current Page object to retrieve extended client-side details. The method accepts a callback that, when called after client response, gets an ExtendedClientDetails object with various client-side data.

For example, the following can be used to get the screen width:

Source code
Getting the screen width
UI.getCurrent().getPage().retrieveExtendedClientDetails(details -> {
    // This is your own method that you may do something with the screen width.
    // Note that this method runs asynchronously
    handleScreenWidth(details.getScreenWidth());
});

Executing JavaScript in the Browser

You can use server-side Java to execute JavaScript snippets in the browser. You can also pass parameters to the executed script as variables named $0, $1, and so on. Vaadin automatically serializes and escapes the parameter values.

You can execute JavaScript in the browser and pass parameters as follows:

Source code
Java
public static void logElementSize(String name,
        Element element) {
    Page page = UI.getCurrent().getPage();

    page.executeJs(
            "console.log($0 + ' size:', "
            + "$1.offsetWidth, $1.offsetHeight)",
            name, element);
}

The supported parameter types are: String, Boolean, Integer, Double, JsonValue, and Element.

The script is executed after the DOM tree has been updated based on server-side changes. The parameter value is null for a parameter of type Element that isn’t attached after the update (according to the server-side component structure).

The script is executed asynchronously, so you can’t directly pass values back to the server. Instead, you can use the returned PendingJavaScriptResult instance to add a callback that’s called when the result is available.

Scrolling a Component into View

You can scroll any component into the visible area of the browser window using scrollIntoView(). This calls the browser’s native scrollIntoView() on the component’s element.

Source code
Scrolling a component into view
component.scrollIntoView();

Use ScrollIntoViewOption to control scrolling behavior and alignment:

Source code
Smooth scrolling
component.scrollIntoView(ScrollIntoViewOption.Behavior.SMOOTH);
Source code
Scrolling to align the component at the bottom of the viewport
component.scrollIntoView(ScrollIntoViewOption.Block.END);

Options can be combined. Behavior controls the scrolling animation, Block controls vertical alignment, and Inline controls horizontal alignment.

Source code
Combining multiple options
component.scrollIntoView(
        ScrollIntoViewOption.Behavior.SMOOTH,
        ScrollIntoViewOption.Block.END,
        ScrollIntoViewOption.Inline.CENTER);

The available alignment values for both Block and Inline are START, CENTER, END, and NEAREST.

Browser Window Resize Events

The Page class allows you to register a listener for events that affect the web page and the browser window in which the Vaadin UI lives. The Page instance corresponding to a given UI is accessed by the getPage() method of the UI.

You can get the browser window size by adding a resize listener, as follows:

Source code
Java
Page page = UI.getCurrent().getPage();
var listener = page.addBrowserWindowResizeListener(
        event -> Notification.show("Window width="
                + event.getWidth()
                + ", height=" + event.getHeight()));
Note
 To avoid memory leaks when using BrowserWindowResizeListener you need to unregister it when you don’t need to listen the events anymore. For example you can do this when component detaches.
Source code
Java
@Override
protected void onDetach(DetachEvent detachEvent) {
    // Listener needs to be eventually removed to avoid resource leak
    listener.remove();
    super.onDetach(detachEvent);
}

0DF2CC14-4401-49E4-B97D-920CAFEAAF8D

Updated –