com.vaadin.server

Class Responsive

java.lang.Object

com.vaadin.server.AbstractClientConnector

com.vaadin.server.AbstractExtension

com.vaadin.server.Responsive

All Implemented Interfaces:

MethodEventSource, ClientConnector, Extension, Connector, Serializable

public class Responsive
extends AbstractExtension

An extension providing responsive layout capabilities to any Vaadin component. The Responsive extension allows specifying different CSS rules for different dimensions of extended components. This allows creating applications that provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices (from mobile phones to desktop computer monitors).

NOTE! You should always specify a relative (%) size for the extended component, doing otherwise will prevent the Responsive extension from working, as the component will not dynamically resize.

All configuration of the visual breakpoints (ranges) for the component are done with CSS. Pixels (px) are the only supported unit. Fractional pixels are not supported.

Dynamic style injections (e.g. through Page.getCurrent().getStyles().add(...)) or any other style updates after the initial page load are not supported at the moment.

Example: Java

 CssLayout layout = new CssLayout();
 layout.setStyleName("responsive");
 layout.setSizeFull();
 Responsive.makeResponsive(layout);
 

SCSS

 .v-csslayout.responsive {
   &[width-range~="0-300px"] {
     // Styles for the layout when its width is between 0 and 300 pixels
   }
   &[width-range~="301-500px"] {
     // Styles for the layout when its width is between 301 and 500 pixels
   }
   &[width-range~="501px-"] {
     // Styles for the layout when its width is over 500 pixels
   }
   &[height-range~="0-300px"] {
     // Styles for the layout when its height is between 0 and 300 pixels
   }
   &[height-range~="301-500px"] {
     // Styles for the layout when its height is between 301 and 500 pixels
   }
   &[height-range~="501-"] {
     // Styles for the layout when its height is over 500 pixels
   }
 }
 

CSS

 .v-csslayout.responsive[width-range~="0-300px"] {
    // Styles for the layout when its width is between 0 and 300 pixels
 }
 .v-csslayout.responsive[width-range~="301-500px"] {
    // Styles for the layout when its width is between 301 and 500 pixels
 }
 .v-csslayout.responsive[width-range~="501-"] {
    // Styles for the layout when its width is over 500 pixels
 }

 .v-csslayout.responsive[height-range~="0-300px"] {
    // Styles for the layout when its height is between 0 and 300 pixels
 }
 .v-csslayout.responsive[height-range~="301-500px"] {
    // Styles for the layout when its height is between 301 and 500 pixels
 }
 .v-csslayout.responsive[height-range~="501px-"] {
    // Styles for the layout when its height is over 500 pixels
 }
 

Note: The defined ranges are applied on a global context, so even if you would write your CSS to target only a given context, the ranges would be applied to all other instances with the same style name.

E.g. this would affect all CssLayout instances in the application, even though the CSS implies it would only affect CssLayout instances inside a parent with a style name "foobar":

 .foobar .v-csslayout[width-range~="0px-100px"] {
    // These properties will affect all responsive CssLayout instances
 }
 

To scope the ranges, use an additional style name for the target component, and add that to your CSS selector:

  .v-csslayout.mystyle[width-range="0px-100px"] {
    // These properties will only affect responsive CssLayout instances with an additional style name of 'mystyle'
 }
 

Since:

7.2

Author:

Vaadin Ltd

See Also:

Serialized Form

Nested Class Summary

Nested classes/interfaces inherited from interface com.vaadin.server.ClientConnector

ClientConnector.AttachEvent, ClientConnector.AttachListener, ClientConnector.ConnectorErrorEvent, ClientConnector.DetachEvent, ClientConnector.DetachListener

Constructor Summary

Constructors

Modifier	Constructor and Description
protected	Responsive() Creates a new instance, which can be used to extend a component.

Method Summary

Modifier and Type	Method and Description
static void	makeResponsive(Component... components) Enable responsive width and height range styling for the target component or UI instance.

Methods inherited from class com.vaadin.server.AbstractExtension

extend, getParent, getSupportedParentType, remove, setParent

Methods inherited from class com.vaadin.server.AbstractClientConnector

addAttachListener, addDetachListener, addExtension, addListener, addListener, addListener, addMethodInvocationToQueue, attach, beforeClientResponse, createState, detach, encodeState, equals, fireEvent, getAllChildrenIterable, getConnectorId, getErrorHandler, getExtensions, getListeners, getResource, getRpcManager, getRpcProxy, getSession, getState, getState, getStateType, getUI, handleConnectorRequest, hashCode, hasListeners, isAttached, isConnectorEnabled, isThis, markAsDirty, markAsDirtyRecursive, registerRpc, registerRpc, removeAttachListener, removeDetachListener, removeExtension, removeListener, removeListener, removeListener, removeListener, requestRepaint, requestRepaintAll, retrievePendingRpcCalls, setErrorHandler, setResource

Methods inherited from class java.lang.Object

clone, finalize, getClass, notify, notifyAll, toString, wait, wait, wait

Methods inherited from interface com.vaadin.server.ClientConnector

addAttachListener, addDetachListener, attach, beforeClientResponse, detach, encodeState, getErrorHandler, getExtensions, getRpcManager, getStateType, getUI, handleConnectorRequest, isAttached, isConnectorEnabled, markAsDirty, markAsDirtyRecursive, removeAttachListener, removeDetachListener, removeExtension, requestRepaint, requestRepaintAll, retrievePendingRpcCalls, setErrorHandler

Methods inherited from interface com.vaadin.shared.Connector

getConnectorId

Constructor Detail

Responsive

protected Responsive()

Creates a new instance, which can be used to extend a component.

Method Detail

makeResponsive

public static void makeResponsive(Component... components)

Enable responsive width and height range styling for the target component or UI instance.

Parameters:

target - The component which should be able to respond to width and/or height changes.