Responsive layout add-on

Hi all!

I’ve just published my first add-on: sw-responsive

It is a convenient wrapper for the corresponding Vaadin add-on: https://github.com/JarekToro/responsive-layout

Using this add-on you can easily create responsive UI screens using XML markup with flexible options and no CSS required!

Let’s see how we can rewrite responsive example from documentation with the new add-on and without CSS:

<swr:responsiveLayout width="100%"
                      height="100%"
                      spacing="true"
                      scrollable="true"
                      flexible="true">
    <swr:row horizontalSpacing="true"
             horizontalSpacingSize="SMALL"
             margin="false">
        <swr:column>
            <swr:content>
                <vbox margin="true"
                      spacing="true">
                    <textField caption="Field One" width="100%"/>
                    <textField caption="Field Two" width="100%"/>
                    <button caption="Button"/>
                </vbox>
            </swr:content>

            <swr:display xs="12" sm="6" md="6" lg="6"/>
        </swr:column>
        <swr:column>
            <swr:content>
                <vbox margin="true"
                      spacing="true">
                    <textField caption="Field Three" width="100%"/>
                    <textField caption="Field Four" width="100%"/>
                    <button caption="Button"/>
                </vbox>
            </swr:content>

            <swr:display xs="12" sm="6" md="6" lg="6"/>
        </swr:column>
    </swr:row>
</swr:responsiveLayout>

fields

Voila!

See the demo project: https://github.com/strangeway-org/sw-responsive-demo

The add-on is still in development and I will be glad if you try it and share your thoughts.

All the functionality is available for platform versions 6.8 and 6.9.

4 Likes

Just used it. Good work. The only minor quibble is that the interface builder cannot see what’s inside it (can’t be helped).

Still, it does make building responsive layouts much easier.