I want to section off one area of a layout from another visually in my Vaadin Flow layout using the Java API.

I want something like the hr horizontal rule found in HTML. I would also want the equivalent, a vertical rule (which was never defined in HTML).

Is there some easy way to have a visual indicator of a thematic shift between parts of a layout?

Hr class

For an <hr> there is the Hr class.

verticalLayout.add(new Span("First"), new Hr(), new Span("Second"));

Roll-your-own

Another option is to create classes for the dividers, there are a few different ways of doing this, here's an example

public class Divider extends Span {

    public Divider() {
        getStyle().set("background-color", "blue");
        getStyle().set("flex", "0 0 2px");
        getStyle().set("align-self", "stretch");
    }
}

And used as such

horizontalLayout.add(new Span("First"), new Divider(), new Span("Second"));

Using align-self and flex will only work in flex layouts, which includes HorizontalLayout and VerticalLayout. The beauty of this approach is that the same class will work in both. The flex: 0 0 2px tells it to be 2 pixels wide in the direction of the container, and not grow or shrink. The align-self: stretch will tell it to take the full size of the container in the perpendicular direction.