Directory

GoFullScreen

Button that will toggle client fullscreen mode

View larger

Close

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);

...

Links

• Online Demo
• Source Code
• Issue Tracker
• Author Homepage

Compatibility