Example of Creating the BorderLayout Component

To execute the example, the HTML page must contain links to the PP.js script file and the PP.css styles file in the <body> tag of the <div> item HTML page with the borderLayout identifier. In the onload event of the <body> tag it is necessary to specify the call of the createBorderLayout() function. Add the BorderLayout component on the page and fill all areas with labels containing names of the areas:

function createBorderLayout() {
    // Properties of the layout component with border
    var borderLayoutSettings = {
        // Set parent item
        ParentNode: "borderLayout",
        // Set width
        Width: 200,
        // Set height
        Height: 200
    }
    borderLayout = new PP.Ui.BorderLayout(borderLayoutSettings);
    // Create layout component with border
    borderLayoutItemCenter = new PP.Ui.BorderLayoutItem({
        // Set contents
        Content: "Center",
    });
    // Create layout component with border
    borderLayoutItemTop = new PP.Ui.BorderLayoutItem({
        // Set contents
        Content: "Top",
        // Set height
        Height: 40
    });
    // Create layout component with border
    borderLayoutItemBottom = new PP.Ui.BorderLayoutItem({
        // Set contents
        Content: "Down",
        // Set height
        Height: 40
    });
    // Create layout component with border
    borderLayoutItemRight = new PP.Ui.BorderLayoutItem({
        // Set contents
        Content: "Right",
        // Set width
        Width: 40
    });
    // Create layout component with border
    borderLayoutItemLeft = new PP.Ui.BorderLayoutItem({
        // Set contents
        Content: "Left",
        // Set width
        Width: 40
    });
    // Set central layout area with border
    borderLayout.setCenterRegion(borderLayoutItemCenter);
    // Set top layout area with border
    borderLayout.setTopRegion(borderLayoutItemTop);
    // Set bottom layout area with border
    borderLayout.setBottomRegion(borderLayoutItemBottom);
    // Set right layout area with border
    borderLayout.setRightRegion(borderLayoutItemRight);
    // Set left layout area with border
    borderLayout.setRegion(PP.Ui.REGION.Left, borderLayoutItemLeft);
}

As a result of executing get the layout with border where each area has label with the name: