Working with General Visual Components > Components > BorderLayout > Example of Creating the BorderLayout Component

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: