Fullscreen tabs

Hi,

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

Thanks,

Thomas Rabelo

Hi,

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: Integrating JavaScript Components and Extensions | Client-Server Integration | Framework | Vaadin 8 Docs

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;

@JavaScript("vaadin://go-fullscreen.js")
public class GoFullScreenClickExtension extends AbstractJavaScriptExtension {
    public void extend(Button target, String elementId) {
        super.extend(target);
        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) {
                ex.requestFullscreen();
            } else if (ex.msRequestFullscreen) {
                ex.msRequestFullscreen();
            } else if (ex.mozRequestFullScreen) {
                ex.mozRequestFullScreen();
            } else if (ex.webkitRequestFullscreen) {
                ex.webkitRequestFullscreen();
            }
        });
    };
};

Then, we should extend CSS theme using CUBA Studio: Extending an Existing Theme - CUBA Platform. Developer’s Manual

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:

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

Controller:

public class DemoScreen extends AbstractWindow {
    @Inject
    private Button goFullScreenBtn;

    @Override
    public void init(Map<String, Object> params) {
        super.init(params);

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

        com.vaadin.ui.Button vButton =
                goFullScreenBtn.unwrap(com.vaadin.ui.Button.class);

        // 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: GitHub - cuba-labs/go-fullscreen: How to switch CUBA screen into full screen mode

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

3 Likes

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