image
Pages, Regions, and Page Designer

Contents

Managing Pages in an Application

The course is part of this learning path

Pages, Regions, and Page Designer
Difficulty
Beginner
Duration
17m
Students
6
Description

This course introduces you to application pages and their components within the scope of Oracle APEX. It shows how you can create and manage pages in your applications.

Learning Objectives

  • Gain an understanding of application pages and their components
  • Learn how to create a new page in an application
  • Learn about Pages, Regions, and the Page Designer

Intended Audience

  • Anyone who wants to enhance their knowledge of Oracle APEX

Prerequisites

We recommend that you take this course as part of our Oracle APEX: Foundations learning path.

Transcript

Welcome to the Oracle APEX Foundations course. Today, in this lesson on managing pages in an application, I will be talking about Pages, Regions, and the Page Designer. Let's get started. It is not enough to just be able to create a page, they also need to be managed. To do this, APEX provides the Page Designer which is a fully featured integrated development environment that includes the toolbar and multiple pages. In this section, you will learn more about the Page Designer. After creating a page, you need to navigate to the page definition to view, modify, and create components on the page. For example, you might want to add a new region, or modify a button, or delete an item. You use the Page Designer to maintain and enhance pages within an Oracle APEX application. To view a Page Definition in the Page Designer, on your workspace home page, click the 'App Builder' icon, then select the application.

I have opened a demo projects application I have created earlier, and then select the page you want to edit. I select the Employees page. The Page Designer appears. You preview a page by running it. Running an application page displays the rendered version as end users would see it. For example, if I click on 'Save and Run' page, you can see the preview of the page as end users would see it. Here you see an interactive report of the employees. Developers can view and edit application pages in the Page Designer. Page Designer is a fully featured integrated development environment that includes a toolbar and multiple pages. There are three main panes within the Page Designer, a left pane, a central pane, and the right pane. You select a component in the left or central pane and then edit the components attributes in the property editor located in the right pane. The left pane includes tabs for rendering, dynamic actions, processing, and shared components. Each tab displays a list of corresponding component types and components created on the current page. Right click to access the context sensitive menus.

You can also add drag components up and down within the tree to change the position or sequence of the selected component. Central Panel includes tabs for Layout, Page Search, and Help. The Layout shows a visual representation of the Page. You add new components to the Page by right clicking to access the context sensitive menu or by simply dragging and dropping into the layout. Page Search enables you to search all page metadata, including regions, items, buttons, dynamic actions, columns and so on. Help displays attribute specific help. Click on the attribute name within the property editor to view information and examples for that attribute. The right pane displays the property editor. Use the property editor to update the attributes for the selected component. When you select multiple components, the property editor only displays the common attributes.

Updating a common attribute will update that attribute for all the selected components. You can adjust the size of each pane by selecting and dragging the horizontal and vertical splitters. To expand or collapse each pane, click this small triangle labelled collapse in the centre of each splitter. As a developer, you add content to a page by creating a region. A region is an area of a page that serves as a container for content. Each region contains a different type of content, such as HTML, a report, a form, chart, list, breadcrumb, pgSQL, a tree, a URL, or a calendar. You position a region either relative to other regions that is based on its sequence number and column, or by using the region position defined in the page template. The style of the region is also controlled by the region template. Like the page template, the region template defines the structure of the area that the region takes up on the page. It defines if the region title is displayed and where it is displayed relative to the main content or the body. The region can also define absolute positions for buttons. On the screen, you can see the steps to create a new region under Page.

Now, let us create a new region for the Employees page in your APEX application. Now, let us see how to create a new region in the APEX application. I already have the Employees page in the demo application open in my Page Designer. In the left pane, right click on 'Body', and select 'Create Region'. In the right pane, give a name to your region in the title field and ensure that the type is Static Content. Now, select the 'Save' button. Now, click on the 'Save' button. The gallery displays at the bottom of the central pane of the Page Designer and contains three tabs; Regions, Items, and Buttons.

You can add new controls and components to a page by either of the following two ways. Select a controller or a component and drag and drop them into the Layout tab, or select the controller or component in the gallery and right click to use a context sensitive menu. Each application page can have buttons and fields called Items which are grouped into containers called Regions. You can add Regions, Items, and Buttons to a page by dragging and dropping them from the gallery. Let me show you an example of inserting a Checkbox item into the newly created region on our Employees page. Select the 'Checkbox' and 'Items' and drag and drop them into the region body of the newly created region. A new Checkbox item is now added to the New Employee region. You can also use the context menu to add the Checkbox item into the region. Right click on 'Checkbox', select 'Add To', and select the region where you want to insert the item.

Let me rename the label of the checkbox item and run the page. At the bottom, you can see a new region called New Employee created with checkbox item I'm a New Employee. Now, this is just a dummy Checkbox item. We saw how to add a new checkbox item into a region. In the upcoming videos, you will learn new and exciting ways to enhance the page and add actions and processes to these items. To summarise, in this section you learnt about the Page Designer and how it can be used to enhance and maintain pages within your APEX application. We also covered how to create regions within a page. I hope you learned something useful. Thank you for watching.

About the Author
Avatar
Oracle University
Training Provider
Students
137
Courses
9
Learning Paths
1

Oracle University, the learning and training arm of Oracle, is a leader in cloud education, providing modern digital training, certification, and learning solutions across Oracle’s entire product portfolio that enable our customers to master their Oracle Cloud solutions and maximize their investments. Over 2 million certified professionals worldwide have placed their trust Oracle University to reach their learning goals. Learn about Oracle University.

Covered Topics