Feedback wanted: Proposal for responsive layouting helpers in Vaadin Flow

General
1

We would love to hear your thoughts on a proposed API for making it easier to implement responsive layout features in Flow applications without messing around with css @media or @container queries or windowResizeListeners. The RFC document below has commenting permissions for everybody, and you can also give your feedback in this thread.

We’ll keep it open for comments until Dec 15.

5 Likes
3

I think it is covered in the doc, but just to be sure:

If I want to generate completely different layouts for mobile and desktop (except for the outer layout) can I do it like this?:

@Route
public class MyView extends VerticalLayout {
    
    ActiveSignal<Boolean> smallSignal = this.useWidth()
      .whenLessThan(500, true)
      .orElse(false)
      .asSignal();

    public MyView() {

        ComponentEffect.effect(this, () -> {
            removeAll();
            var isSmall = smallSignal.value();
            if(isSmall) renderSmall();
            else renderBig();
        });

    }

    private void renderSmall() {...}
    private void renderBig() {...}

}
4

Yes. Something like that should work.

We might want to add a helper for doing that effect with less ceremony but that’s something that should work with any signal and not in any way be specific to signals related to the responsive functionality. I explored that topic as Selector in Design input: control flow with signals.

1 Like