Controlling the layout>
One of the most difficult tasks of web programing is the control of the layout. In previous versions of APEX, tables were used to place the items on the desired positions. You can use an HTML editor to see a preview of the layout. As from APEX 4.0, new themes are introduced that use divs to position the different components. Divs are almost necessary to be able to use dynamic actions layout. The biggest advantage from div-based layout over table-based layout is that you can precisely position components of the web page.
In this recipe, we will create a page with a report region showing the application users and a chart region with the number of roles used. The two regions will be displayed next to each other.
Getting ready
Just make sure that theme 1 is the active theme.
How to do it...
- In the application builder, go to your application.
- Click on the Create page button.
- Select Report and in the next step, select Classic report.
- Leave the page number or assign a number yourself and enter a name for the page. Click on Next.
- Select Do not use tabs and click on Next.
- In the text area, enter the following query:
select id , username , password , role from app_users; [select_app_users.sql]
- Click on Next.
- Enter a name for the region (that is, Users) and click on Next.
- In the last step, click on the Finish button.
- Your page has now successfully been created and you see a success message.
- Click on the Edit page icon.
- In the regions section, click on the Add icon in the upper right corner of the section.
- Select Chart.
- In the next step, select HTML chart.
- In the title text item, enter
User roles. Click on Next. - In the query text area, enter the following query:
select null link , role label , count(id) value from app_users group by role [select_aur_role.sql]
You can also use the query builder. Click on the build query button to start a wizard which helps you to create your query.
- Click on the Create region button.
- The region will be created and you now have two regions. When you run the page, you will see that the chart region is positioned below the Users region. Maybe you want to place the region next to the Users region. That can be done in several ways.
- Click on the Edit page button at the bottom of the page.
- In the Regions section, click on the User roles link to edit the region.
- In the User Interface section, select 2 in the Column list box.
- Click on the Apply changes button and run the page to see how it looks.
- You can see that the regions are displayed next to one another. There is also another way to control the position of the regions.
- Click on the Edit page button at the bottom of the page.
- In the templates section, click on the Page template link.
- In the definition section you see HTML code for the header, the body, and the footer of the page. To see how this actually looks you could use an HTML editor and copy-paste the code in the editor. However, you can also get a preview of the template. Click on the Preview template link in the tasks section on the right side. You can see a preview that is a little bit more clear when you go to the page, click on the User roles link in the regions section, and click on the flashlight that is located after the Display point listbox in the User Interface section.
In this preview for theme 1, you can see the region position 2 and region position 3 are positioned next to each other but that region position 3 is smaller. Let's see how this looks when we position the chart region on region position 3:
- Close the preview pop-up window and go back to your page.
- In the Regions section, click on the Users region to edit the region.
- In the User Interface section, select Page template region position 2 in the Display Point listbox.
- Click on the Apply changes button.
- In the Regions section, click on the User roles link to edit the region.
- In the user interface section, select Page template region position 3 in the Display Point listbox. Select 1 in the Column listbox (we changed this to 2 in the beginning of this recipe). Click on the Apply changes button.
- Run the page and see what the page looks like.
How it works...
The screenshot shown in the previous paragraph shows the various positions in the region. You can also see these positions in the display point listbox in the User Interface section when you click on a region in the application builder.
In this way you can control where the content of a region is displayed. If you position two regions at the same position, like we first did in this recipe, the last region will be displayed below the first region. You can put them next to each other by using the column listbox, which you can find behind the display point listbox in the user interface section. The first region will be positioned in column 1 and the second region will be positioned in column 2.
There's more...
Alternatively, you can change the entire layout, just by changing the HTML code in the template. So, if you would like to display the success message at the bottom of the page, go to the definition section of the template and enter the substitution string #SUCCESS_MESSAGE# in the footer text area.
By the way, did you notice that in theme 1, region position 5 by default is displayed twice, one time in the body and the second time in the footer? This means that if you set a region's display point to region position 5, you will see this region twice!