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)

/wp-content/uploads/2015/01/20150120_172536_capture_628235.gif

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:

layout-respo.PNG

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…

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

  1. Mustafa Bensan

    Hi Karol,

    This is brilliant!  A very innovative and clever way to simulate a container component without any code hacks.  It’s a great example of how to take advantage of the standard BIAL API from within the SDK via ZTL functions.

    You have pointed out that the SDK currently does not support the development of true container components.  Do you know if there are plans to provide this feature in the SDK in future?

    Thanks,

    Mustafa.

    (0) 
      1. Mike Howles

        Hey Karol,

        Both Mustafa Bensan and I have had many offline chats about a want for a true responsive layout component and also a Split Layout component.  I agree with Mustafa that what you’ve managed to stitch together here with your SDK components is really impressive.  It’s funny, because I was about to also try something similar to your Client Information component to calculate window width/height to do similar responsive calculations but you’ve done a much more complete and thoughtful job here.  I would definitely use this.


        But I would really think that if we could get a ‘Native’ container version with 1.5(+) then we wouldn’t have to do the BIAL stitching together which while very clever, probably is an advanced development paradigm that a fresh Design Studio designer may not understand.


        Or, perhaps a new SDK ‘container’ handler one day!  (Worth as shot to ask 🙂 )


        Again, this is a great approach for current-state!

        (0) 
        1. Karol Kalisz Post author

          Hey Mike,

          yes, some more containers would be nice, perhaps it will happen together with extension to sap.m library (which should come some day, but we have to be careful in terms of non-breaking updates).

          Anyway, what Reiner has achieved as architect of the SDK solution is already impressive – especially when I compare this to the BEx ABAP Exit Item which was purely self written HTML code.

          The question / issue with containers as SDK is more complex as it would require also more code for the designer, which is today not necessary for the components. I would prefer if some basic containers would be available in standard and then the SDK can stay on component level.

          But, there is always a discrepancy between wishes and reality. I try to do the max based on the reality as I know this helps quicker 😉

          (0) 
          1. Mustafa Bensan

            Hi Karol,

            You’ve mentioned that Design Studio might be extended to the sap.m library in future.  Do you have any idea about what form this “extension” might take?  Is the intention to deliver the sap.m controls as standard Design Studio components, or to allow easier access to the sap.m library via the SDK, or both perhaps?

            Regards,

            Mustafa.

            (0) 

Leave a Reply