CODEWITHSUNDEEP
javascriptsapui5
André Fiedler
André Fiedler

Reputation: 1103

How to user BorderLayout inside sap.m.Page?

I'm using SAP's OpenUI5 and want to use a BorderLayout as Page content. Does someone have a example?

var page = new sap.m.Page('page', {
    content: [
        // here BorderLayout with sap.m.List as Center and sap.m.HBox as Bottom
    ]
});
return page;

Upvotes: 0

Views: 490

Answers (2)

akudev
akudev

Reputation: 784

What you actually want is probably a page where the content consists of two areas: one with a known/fixed size at the bottom and one above that takes the remaining space, right?

BorderLayout would probably be one solution, but I see two issues with this approach: - BorderLayout is in the sap.ui.commons library, which is a) not supposed to be used together with sap.m, b) not meant for usage on touch devices and b) quite heavy, as it contains lots of controls that are also available in sap.m. - BorderLayout is a very old control and one that I would trust a bit less than newer alternatives (not saying it is buggy, but it may not be technically state-of-the-art).

So I'd suggest the much newer sap.ui.layout.FixFlex control, which has been created for exactly your (assumed) use-case. See this example: http://jsbin.com/zaveloxata/1/edit?html,output

The fixed area at the bottom can either have a given absolute size (100px in the example) or a height defined by its content (just remove the fixContentSize setting and it will be as tall as the Button inside).

Upvotes: 1

André Fiedler
André Fiedler

Reputation: 1103

Ok, I got it :)

data-sap-ui-libs="sap.m,sap.ui.core,sap.ui.commons"

var page = new sap.m.Page('page', {
    content: [
        new sap.ui.commons.layout.BorderLayout({
            center: new sap.ui.commons.layout.BorderLayoutArea({
                content: [
                    new sap.m.List(this.createId('list'), {
                        items: []
                    })
                ]
            }),
            bottom: new sap.ui.commons.layout.BorderLayoutArea({
                content: [
                    new sap.m.HBox({
                        items:[
                            new sap.m.Label({
                                text: 'Bottom Area', 
                                textAlign: sap.ui.core.TextAlign.Center,
                                design: sap.m.LabelDesign.Bold 
                            })
                        ],
                        justifyContent : sap.m.FlexJustifyContent.Center,
                        alignItems: sap.m.FlexAlignItems.Center
                    })
                ]
            })
        })
    ]
});
return page;

Upvotes: 0

Related Questions