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.
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.
The areas are created using the createArea
and setAreaData
methods. This means that no external instance of BorderLayoutArea is required.
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.