Oracle APEX Cookbook（Second Edition）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

Creating a region selector>

Sometimes, a web page can be very chaotic, especially when there are many items on the screen. In that case, it may be a good idea to group items into logical sections. The sections can be displayed separately to save room for the rest of the items. We will make a web page where the user can edit the user profile. This user profile will be divided into three categories: person, communication, and favorites. The user will be able to click on a button to see only the category the user is interested in.

Getting ready

We will use the table APP_USER_PROFILES, so make sure this table exists and is accessible.

How to do it...

First, make a form based on a table:

  1. Click on the Create Page button.
  2. Select Form.
  3. Then select Form on a table or view.
  4. Select the table/view owner and click on Next.
  5. Enter the name of the table. You can use the button next to the field to select the table. Click on Next.
  6. Enter a page name, for example, User profile.
  7. Enter a region title, for example, user.
  8. In the Region Template listbox, select APEX 4.0 – Reports region. Click on Next.
  9. Select Do not use tabs and click on Next.
  10. Select the Primary Key column of the table. In this case, it is named ID. Click on Next.
  11. Select Existing Trigger and click on Next.
  12. Select All Columns and click on Next.
  13. In the next step, you can enter different names for the button labels. Click on Next.
  14. Enter the page numbers APEX should navigate to after the user has clicked the Cancel or Create buttons. For example, you can enter page 1 for the Cancel button, which means that APEX returns to page 1 if the user clicks on the Cancel button. Click on Next to continue.
  15. Click on Finish to confirm.

The page is now ready, but we will now split the various items into three categories:

  1. Click on the Edit icon.
  2. Create a new region (click the Add icon in the Region section).
  3. Select HTML.
  4. Select HTML as the type of region.
  5. Enter a title for the region. We will call this region Person.
  6. In the Region Template listbox, select APEX 4.0 – Region without title. Click on the Create button.
  7. Repeat the steps two more times: one for Communication and one for the Favourites. In the end you should have four regions: User, Person, Communication, and Favourites.
  8. Make sure you switch to Tree View.
  9. Drag the items ID, gender, birthday, and rel_status to the Person region.
  10. Drag the items email, home_phone, mobile_phone, work_phone, Skype_name, msn, twitter, and nickname to the Communications region.
  11. Drag the items Interests, favourite_music, favourite_movies, and favourite_books to the Favourites region.

Now we have three regions with items from the APP_USER_PROFILES table. It will look like the following:

In order to create a region selector we will have to indicate that the regions can be selected by the region selector:

  1. In the Regions section, click on the Edit Region link for the Person region.
  2. In the Attributes section, select Yes in Region Display Selector.
  3. Click on the Apply Changes button.
  4. Apply the same to the Communication and the Favourites regions.

The last step is to create a region selector:

  1. In the Regions section, click on the Add icon to create a new region.
  2. Select Region Display Selector.
  3. Enter a name for the region title, for example, Edit user profile.
  4. Click on the Create button.

Region Display Selector is now ready but we will include the region into the User region so that it looks like this all is part of one region:

  1. Click on the Region Display Selector region in the Regions section.
  2. In the User Interface section, select the User region in the Parent Region listbox.
  3. Click on the Apply Changes button.

Now we will do the same for the other three regions:

  1. Click on the Person region in the Regions section.
  2. In the User Interface section, select the user region in the Parent Region listbox.
  3. In the Template listbox, select APEX 4.0 – Region without title.
  4. Click on the Apply Changes button.
  5. Repeat this step for the other regions: Communication and Favourites.
  6. The page is ready now. Run the page and try it out:

How it works...

Region Display Selector is actually an unnumbered list. This list contains list items and each list item has a reference to a region. In HTML, this looks like the following:

<ul id="96054411561206575_RDS" class="apex-rds">
<li class="apex-rds-first apex-rds-selected"><a href="#SHOW_ALL"><span>Show All</span></a></li>
<li><a href="#R9604812
2465171863"><span>Person</span></a></li>
<li><a href="#R9604853
1469174507"><span>Communication</span></a></li>
<li class="apex-rds-last"><a href="#R9605012
0519180839"><span>Favourites</span></a></li>
</ul>

The <a> tag has a reference to a region. The regions are actually divs with an ID. You can find the ID's in the code behind the hash (#) sign. You can assign your own ID by entering your own ID in the Static ID text field in the Attributes section of the region. In that case, you would have seen something like the following:

<li><a href="#person"><span>Person</span></a></li>

You can also see the <span> tag. The div and span tags are almost identical, with the difference that a div tag applies to a section of a document of the page and a span tag applies to the inline text but it keeps the formatting of the outside text. That is a default behavior but this can be changed by the use of cascading style sheets.

Furthermore, you saw that the three regions with items have the region without title template. This is done because otherwise you would have seen the entire region including the title, which is too much information in this little space.

The three regions with items and the Region Display Selector all have the same parent: the User region. This is not necessary. You can also display them as separate regions.

上一章目录下一章