Fullscreen tabs


Is it possible to use a “screen tab” in fullscreen mode? Any idea of how can I do this?


Thomas Rabelo


It is possible if you create JavaScriptExtension that will execute JS on client side on button click. JS has an API for switching concrete DOM element to full-screen mode.

Vaadin enables you to create a simple JS event handlers for existing UI components using Extensions mechanism described here: https://vaadin.com/docs/v8/framework/gwt/gwt-javascript.html

First, we need to create Java class for extension:

package com.company.fullscreen.web.ext;

import com.vaadin.annotations.JavaScript;
import com.vaadin.server.AbstractJavaScriptExtension;
import com.vaadin.ui.Button;

public class GoFullScreenClickExtension extends AbstractJavaScriptExtension {
    public void extend(Button target, String elementId) {
        callFunction("init", elementId);

Here we simply set JS file using JavaScript annotation and call “init” function from JS after initialization.

The second step is to define JS file in modules/web/web/VAADIN directory with the same name we used in @JavaScript:

// FQN of Java class with _ separator
window.com_company_fullscreen_web_ext_GoFullScreenClickExtension = function() {
    var self = this;
    var btn = self.getElement(self.getParentId());

    self.init = function (elementId) {
        // listen for click on Button
        $(btn).click(function () {
            var ex = document.getElementById(elementId);

            // use method that is supported by web browser
            if (ex.requestFullscreen) {
            } else if (ex.msRequestFullscreen) {
            } else if (ex.mozRequestFullScreen) {
            } else if (ex.webkitRequestFullscreen) {

Then, we should extend CSS theme using CUBA Studio: https://doc.cuba-platform.com/manual-6.7/web_theme_extension.html

And add styles for fullscreen element to halo-ext.scss file:

@mixin com_company_fullscreen-halo-ext {
  #fullScreenContent:-moz-full-screen {
    background-color: white;
    position: absolute;

  #fullScreenContent:-webkit-full-screen {
    background-color: white;
    position: absolute;

  #fullScreenContent:fullscreen {
    background-color: white;
    position: absolute;

Now, we can use our extension in standard screen something like that:

    <button caption="Go FullScreen" id="goFullScreenBtn"/>


public class DemoScreen extends AbstractWindow {
    private Button goFullScreenBtn;

    public void init(Map<String, Object> params) {

        com.vaadin.ui.Component vComponent = unwrap(com.vaadin.ui.Component.class);

        com.vaadin.ui.Button vButton =

        // create client-side extension and add it to button
        // because we want to handle click in JS
        new GoFullScreenClickExtension().extend(vButton, vComponent.getId());

I’ve implemented a small demo here: https://github.com/cuba-labs/go-fullscreen

Just click on Go Fullscreen button in DemoScreen and the major browsers will show the current screen in full screen mode.


A post was split to a new topic: JavaScript extension for UI