Skip Headers
Oracle® Application Express Application Builder User's Guide
Release 4.1

Part Number E21674-05
Go to Documentation Home
Home
Go to Book List
Book List
Go to Table of Contents
Contents
Go to Index
Index
Go to Feedback page
Contact Us

Go to previous page
Previous
Go to next page
Next
PDF · Mobi · ePub

Creating a Multiple Column Layout

A region is an area on a page that uses a specific template to format HTML content. You use regions to group page controls. To create a multiple column layout, you create two regions that display in adjacent cells of the same table.

You can create a multiple column layout by:

Topics:

Creating Regions in Multiple Columns

You create regions using the Create Region Wizard. To create a two-column page, you create two regions. Oracle Application Express replaces the #BOX_BODY# substitution string within a two-column table and displays the regions in two separate cells.

To create a two-column page by creating regions:

  1. Navigate to the Page Definition. See "Accessing the Page Definition".

  2. Create the first region:

    1. Under Regions, click Create.

      The Create Region Wizard appears.

    2. Select a region type.

    3. From the Column field, select 1.

    4. Follow the on-screen instructions.

  3. Create the second region:

    1. Under Regions, click Create.

      The Create Region Wizard appears.

    2. Select a region type.

    3. From the Column field, select 2.

    4. Follow the on-screen instructions.

Creating a Multiple Column Page Template

Page templates define the appearance of individual pages, including the placement of page controls and components. Each page template is divided into three sections: Header, Body, and Footer. The most basic template must include the substitution string #BOX_BODY# in the Body attribute. When the page is rendered, the Application Express engine replaces #BOX_BODY# with HTML to display the regions on that page.

You can create a multiple column page by defining a page template that contains a multiple column table. You then explicitly place regions within specific table cells.

The following example demonstrates how to create a two-column page and specify a region position using the #REGION_POSITION_XX# substitution string in each column. You would enter the code in the Body section of the page-level template as shown in the following example.:

<body #ONLOAD#>
  #FORM_OPEN#
  <table style="width:100%">
    <tr>
      <td style="width:50%;padding:5px;">#REGION_POSITION_01#</td>
      <td style="width:50%; border-left:2px #bbbbbb dashed; padding:5px;">#REGION_POSITION_02#</td>
    </tr>
  <br />
  #BOX_BODY#
  #FORM_CLOSE#
</body>

The following is an alternative DIV-based example:

<body #ONLOAD#>
  #FORM_OPEN#
  <div style="width:100%">
    <div style="float:left;width:50%;">#REGION_POSITION_01#</div>
    <div style="float:left;width:50%;">#REGION_POSITION_02#</div>
  </div>
  #BOX_BODY#
  #FORM_CLOSE#
</body>

Once you create this page-level template, the newly defined positions would be available as Display Point options when you run the Create Region Wizard.