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

Changes since 0.4.1:

  • OSGi bundled
  • Listener API cleanup (API break)
  • Moved to use SCSS theming (add-on currently do not include any theming rules, so no actions required)
Released
2016-04-12
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.2+
Vaadin 7.0+ in 0.1.0
Vaadin 8.0+ in 0.6.0
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Internet Explorer

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