Directory

← Back

GoFullScreen

Button that will toggle client fullscreen mode

Author

Rating

Popularity

<100

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

Now uses higher level client side element when fullscreen target is not provided. This will allow you to have popups, subwindows etc. at your fullscreen view. Before UI was used as default target, and this did not allow you to have popups and UI visible at same time.

Released
2013-09-17
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.0+
Vaadin 7.2+ in 0.3.0
Vaadin 8.0+ in 0.6.0
Browser
Firefox
Opera
Google Chrome

Vaadin Add-on Directory

Find open-source widgets, add-ons, themes, and integrations for your Vaadin application. Vaadin Add-on Directory
The channel for finding, promoting, and distributing Vaadin add-ons.
Online