BorderLayout

Introduction

The BorderLayout devides a screen area into five sub-areas: One area at the top and one at the bottom; an area on the left-hand and an area on the right-hand side; and one area in the center. Into all areas, library controls can be embedded.

Examples

The Area Alignment

The first example shows the five areas. Each area contains an instance of the sap.ui.commons.layout.BorderLayoutArea element. The areas are colored to visualize the sizes and to show that custom styles can be used in the HTML file. By default, the areas have no background color.

BorderLayout Methods

The areas are created using the createArea and setAreaData methods. This means that no external instance of BorderLayoutArea is required.

BorderLayout Interaction

There are buttons integrated into the border layout areas where for each button a different event has been implemented. The button in the top area adds a text to the center area using the addContent method. The button in the bottom area removes the first text of the center area using the removeContent method. The button in the begin area inserts a text to the center area using the insertContent method. And the button in the end area removes all texts of the center area using the removeAllContent method.

API Documentation

See API documentation