Responsive Layout with Flow Layouter SDK

[Karol-K]

Instruction on how to create an application with responsive layout using two new SDK Community components:

* Client Information, Design Studio SDK: Client Information Component

* Flow Layouter, Design Studio SDK: Flow Layouter Component (for responsive layouting)

What you get? (Animated GIF, click to animate)

How does this work?

You have to create following structure.

STEP 1.

include some PANEL as main component, and

STEP 2. (optional)

you can place some "background panel" to make the UI layouting behind. This can be places via API on the flow layouter and will be resized, so it must have a fixed size.

STEP 3.

now you have to place 2 SDK components,

• one is the Client Information - this is reacting on size changes in the browser (see Design Studio SDK: Client Information Component) and
• the second is Flow Layouter - it is not a flow layout container (as this is not possible with SDK API) but a layouter which can relayout other components.

STEP 4.

and place other PANELS / COMPONENTS into it. All have to be defined with fixed size, the placement does not matter as it will be replaced.

The structure should look like this one:

Important, it works only if all the content components have size!, you cannot make them "auto"-sized, you need to put width and height.

STEP 5.

You need to register the components to make them available for the flow layouter, eg in the onStartup script:

// this is optionally registering some background which can be styled via CSS and gets resized

FLOWLAYOUTER_1.registerParentComponent(FLOW_LAYOUT_BORDER);

// now all the components in a sequence to make them flow-laouting

FLOWLAYOUTER_1.registerComponent(PANEL_1);

FLOWLAYOUTER_1.registerComponent(PANEL_2);

FLOWLAYOUTER_1.registerComponent(PANEL_3);

FLOWLAYOUTER_1.registerComponent(IMAGE_1);

FLOWLAYOUTER_1.registerComponent(PANEL_4);

FLOWLAYOUTER_1.registerComponent(PANEL_5);

FLOWLAYOUTER_1.registerComponent(KPIVIEW_1);

FLOWLAYOUTER_1.registerComponent(PANEL_6);

FLOWLAYOUTER_1.registerComponent(IMAGE_2);

FLOWLAYOUTER_1.registerComponent(PANEL_7);

FLOWLAYOUTER_1.registerComponent(GRID_LAYOUT_1);

FLOWLAYOUTER_1.registerComponent(PANEL_8);

FLOWLAYOUTER_1.registerComponent(TABSTRIP_1);

FLOWLAYOUTER_1.registerComponent(PANEL_9);

FLOWLAYOUTER_1.registerComponent(PANEL_10);

FLOWLAYOUTER_1.registerComponent(PANEL_11);

FLOWLAYOUTER_1.registerComponent(PANEL_12);

FLOWLAYOUTER_1.registerComponent(IMAGE_3);

FLOWLAYOUTER_1.registerComponent(PANEL_13);

FLOWLAYOUTER_1.registerComponent(PANEL_14);

FLOWLAYOUTER_1.registerComponent(PANEL_15);

FLOWLAYOUTER_1.registerComponent(IMAGE_4);

FLOWLAYOUTER_1.registerComponent(PANEL_16);

FLOWLAYOUTER_1.registerComponent(PANEL_17);

FLOWLAYOUTER_1.registerComponent(PANEL_18);

FLOWLAYOUTER_1.registerComponent(PANEL_19);

STEP 6.

Go to "Client Information" component and code the script in "onSizeChanged" event. Basically, we have to pass some size to the layouter and reLayout() the content.

FLOWLAYOUTER_1.setWidth(CLIENTINFORMATION_1.getOwnWidth());

FLOWLAYOUTER_1.setHeight(CLIENTINFORMATION_1.getOwnHeight());

FLOWLAYOUTER_1.reLayout();

This will change the layout every time the size of the browser is changed (and also initially place the components according to the flow layout rules.

Living Example?

you can download the example app from the github repository:

Release Client Information & Flow Layouter · org-scn-design-studio-community/applications · GitHub

Any thoughts?

feel free to add as usual...