Directory

← Back

GoFullScreen

Button that will toggle client fullscreen mode

Author

Contributors

Rating

Button for allowing user to fullscreen whole application or parts of it. Uses browsers' fullscreen API, and currently supports Chrome, Firefox and Opera browsers. Fullscreen APIs are not currently available on Safari or IE browsers.

Notice: fullscreen APIs can be called only from user action, for this reason this addon doesn't offer API for server side to request fullscreen mode. GoFullScreen's button will be automatically hidden when used in browsers not supporting FullScreen APIs.

Sample code

...

VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
layout.setWidth("100%");
setContent(layout);
		
Label notice = new Label("Notice: Full screen buttons are hidden for nonsupported browsers (IE, Safari...)");
layout.addComponent(notice);
		
HorizontalLayout buttonLayout = new HorizontalLayout();
buttonLayout.setCaption("Full screen actions:");
layout.addComponent(buttonLayout);
		
final FullScreenButton button = new FullScreenButton("All (on)");
button.addFullScreenChangeListener(new FullScreenChangeListener() {

    @Override
    public void onFullScreenChangeListener(AbstractComponent component,
          boolean fullscreen) {

	  if (fullscreen) {
	  	  System.out.println("All is now fullscreen");
	  	  button.setCaption("All (off)");
	  } else {
	          System.out.println("All isn't anymore fullscreen");
		  button.setCaption("All (on)");
	  }
    }
			
});
buttonLayout.addComponent(button);
		
FullScreenButton button2 = new FullScreenButton("Picture");
buttonLayout.addComponent(button2);
		
FullScreenButton button3 = new FullScreenButton("Label");
buttonLayout.addComponent(button3);
		
Image image = new Image();
image.addStyleName("demo-image");
image.setSource(new ExternalResource("http://farm9.staticflickr.com8106/8476237039_277fd10caf_b.jpg"));
layout.addComponent(image);
button2.setFullScreenTarget(image);
		
Label label = new Label("Hello World!");
label.addStyleName("demo-label");
layout.addComponent(label);
button3.setFullScreenTarget(label);

...

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Add support for MenuBar

Released
2017-06-21
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 8.0+
Vaadin 7.2+ in 0.5.3
Vaadin 7.0+ in 0.2.0
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Internet Explorer
Windows Phone
Microsoft Edge

GoFullScreen - Vaadin Add-on Directory

Button that will toggle client fullscreen mode GoFullScreen - Vaadin Add-on Directory
Button for allowing user to fullscreen whole application or parts of it. Uses browsers' fullscreen API, and currently supports Chrome, Firefox and Opera browsers. Fullscreen APIs are not currently available on Safari or IE browsers. Notice: fullscreen APIs can be called only from user action, for this reason this addon doesn't offer API for server side to request fullscreen mode. GoFullScreen's button will be automatically hidden when used in browsers not supporting FullScreen APIs.
Online