Package com.vaadin.ui

Class CssLayout

  • All Implemented Interfaces:
    ContextClickEvent.ContextClickNotifier, LayoutEvents.LayoutClickNotifier, MethodEventSource, ClientConnector, Sizeable, Connector, Component, ComponentContainer, HasComponents, HasComponents.ComponentAttachDetachNotifier, Layout, Serializable, Iterable<Component>
    Direct Known Subclasses:
    ColorPickerPreview, Navigator.EmptyView
    public class CssLayout
extends AbstractLayout
implements LayoutEvents.LayoutClickNotifier
    CssLayout is a layout component that can be used in browser environment only. It simply renders components and their captions into a same div element. Component layout can then be adjusted with css.

    In comparison to HorizontalLayout and VerticalLayout

    • rather similar server side api
    • no spacing, alignment or expand ratios
    • much simpler DOM that can be styled by skilled web developer
    • no abstraction of browser differences (developer must ensure that the result works properly on each browser)
    • different kind of handling for relative sizes (that are set from server side) (*)
    • noticeably faster rendering time in some situations as we rely more on the browser's rendering engine.

    With CustomLayout one can often achieve similar results (good looking layouts with web technologies), but with CustomLayout developer needs to work with fixed templates.

    By extending CssLayout one can also inject some css rules straight to child components using getCss(Component).

    (*) Relative sizes (set from server side) are treated bit differently than in other layouts in Vaadin. In cssLayout the size is calculated relatively to CSS layouts content area which is pretty much as in html and css. In other layouts the size of component is calculated relatively to the "slot" given by layout.

    Also note that client side framework in Vaadin modifies inline style properties width and height. This happens on each update to component. If one wants to set component sizes with CSS, component must have undefined size on server side (which is not the default for all components) and the size must be defined with class styles - not by directly injecting width and height.

    Since:
    6.1 brought in from "FastLayouts" incubator project
    See Also:
    Serialized Form

    • Field Detail

      • components

        protected LinkedList<Component> components
        Custom layout slots containing the components.

    • Method Detail

      • addComponentAsFirst

        public void addComponentAsFirst​(Component c)
        Adds a component into this container. The component is added to the left or on top of the other components.
        Parameters:
        c - the component to be added.

      • addComponent

        public void addComponent​(Component c,
                         int index)
        Adds a component into indexed position in this container.
        Parameters:
        c - the component to be added.
        index - the index of the component position. The components currently in and after the position are shifted forwards.

      • beforeClientResponse

        public void beforeClientResponse​(boolean initial)
        Description copied from interface: ClientConnector
        Called before the shared state and RPC invocations are sent to the client. Gives the connector an opportunity to set computed/dynamic state values or to invoke last minute RPC methods depending on other component features.
        Specified by:
        beforeClientResponse in interface ClientConnector
        Overrides:
        beforeClientResponse in class AbstractComponent
        Parameters:
        initial - true if the client-side connector will be created and initialized after this method has been invoked. false if there is already an initialized client-side connector.

      • getState

        protected CssLayoutState getState()
        Description copied from class: AbstractComponent
        Returns the shared state bean with information to be sent from the server to the client. Subclasses should override this method and set any relevant fields of the state returned by super.getState().
        Overrides:
        getState in class AbstractLayout
        Returns:
        updated component shared state

      • getCss

        protected String getCss​(Component c)
        Returns styles to be applied to given component. Override this method to inject custom style rules to components.

        Note that styles are injected over previous styles before actual child rendering. Previous styles are not cleared, but overridden.

        Note that one most often achieves better code style, by separating styling to theme (with custom theme and AbstractComponent.addStyleName(String). With own custom styles it is also very easy to break browser compatibility.

        Parameters:
        c - the component
        Returns:
        css rules to be applied to component

      • replaceComponent

        public void replaceComponent​(Component oldComponent,
                             Component newComponent)
        Description copied from interface: ComponentContainer
        Replaces the component in the container with another one without changing position.

        This method replaces component with another one is such way that the new component overtakes the position of the old component. If the old component is not in the container, the new component is added to the container. If the both component are already in the container, their positions are swapped. Component attach and detach events should be taken care as with add and remove.

        Specified by:
        replaceComponent in interface ComponentContainer
        Parameters:
        oldComponent - the old component that will be replaced.
        newComponent - the new component to be replaced.

      • getComponentIndex

        public int getComponentIndex​(Component component)
        Returns the index of the given component.
        Parameters:
        component - The component to look up.
        Returns:
        The index of the component or -1 if the component is not a child.

      • getComponent

        public Component getComponent​(int index)
                       throws IndexOutOfBoundsException
        Returns the component at the given position.
        Parameters:
        index - The position of the component.
        Returns:
        The component at the given index.
        Throws:
        IndexOutOfBoundsException - If the index is out of range.

      • readDesign

        public void readDesign​(org.jsoup.nodes.Element design,
                       DesignContext designContext)
        Description copied from interface: Component
        Reads the component state from the given design.

        The component is responsible not only for updating its own state but also for ensuring that its children update their state based on the design.

        It is assumed that the component is in its default state when this method is called. Reading should only take into consideration attributes specified in the design and not reset any unspecified attributes to their defaults.

        This method must not modify the design.

        Specified by:
        readDesign in interface Component
        Overrides:
        readDesign in class AbstractComponent
        Parameters:
        design - The element to obtain the state from
        designContext - The DesignContext instance used for parsing the design

      • writeDesign

        public void writeDesign​(org.jsoup.nodes.Element design,
                        DesignContext designContext)
        Description copied from interface: Component
        Writes the component state to the given design.

        The component is responsible not only for writing its own state but also for ensuring that its children write their state to the design.

        This method must not modify the component state.

        Specified by:
        writeDesign in interface Component
        Overrides:
        writeDesign in class AbstractComponent
        Parameters:
        design - The element to write the component state to. Any previous attributes or child nodes are not cleared.
        designContext - The DesignContext instance used for writing the design