2.2 Understanding Application Pages

A page is the basic building block of an application. This section explains what a page is and how to edit it in two views: Page Designer and Component View.

• What Is an Application Page?

• Understanding the Difference Between Page Designer and Component View

• Viewing a Page in Page Designer

• Viewing a Page in Component View

• Switching from Page Designer to Component View

• Switching from Component View to Page Designer

2.2.1 What Is an Application Page?

Every application consists of one or multiple pages. Each page can have buttons and fields (called items) which are grouped into containers called regions. Pages can include application logic (or processes). You can branch from one page to the next using conditional navigation; perform calculations (called computations); perform validations (such as edit checks); and display reports, calendars, and charts. You can view and edit a page in two views: Page Designer and Component View.

See Also:

"Managing Pages in Page Designer" and "Managing Pages in Component View"

2.2.2 Understanding the Difference Between Page Designer and Component View

This section describes key differences between using Page Designer and Component View to edit application pages.

• Page Designer

• Component View

2.2.2.1 Page Designer

Description of the illustration ''pg1.png''

Page Designer is a full featured Integrated Development Environment (IDE) designed to maximize developer productivity in maintaining application pages. The Page Designer window is divided into three main sections.

• Tree Pane - The Tree pane displays in the left column and features the following tree views: Rendering, Dynamic Actions, Processing, and Shared Components.

• Grid Layout - Grid Layout displays in the center column. Grid Layout is a visual representation of the regions, items, and buttons that define a page. You can edit the position of page components by dragging and dropping them. You can also add new regions, items, and button by dragging and dropping them from Gallery at the bottom of the tab.

• Property Editor - The Property Editor displays in the right column. Use the Property Editor to edit the properties of the component currently selected in the Tree Pane or Grid Layout.

Tip:

The Rendering tree and Grid Layout are two different representations of the regions, items, and buttons that define a page.

See Also:

"Managing Pages in Page Designer"

2.2.2.2 Component View

Description of the illustration ''cv1.png''

Component View is the traditional user interface for editing a page in Application Builder. Unlike Page Designer, Component View does not offer a visual representation of a page or support the dragging and dropping of page components. To preview the position of components on a page, you must run it.

The Component View window is divided into the following sections:

• Page Rendering. Page rendering is the process of generating a page from the database. Use the Page Rendering section to modify controls that impact the rendering of a page, including page attributes, regions, buttons, items, page rendering computations, and page processes.

• Page Processing. Page processing is the process of submitting a page. A page is typically submitted when a user clicks a button. Use the Page Processing section to specify application logic such as computations, validations, processes, and branches. In general, the Application Express engine runs this logic in the order it appears on the page.

• Shared Components. The Shared Components section lists common components that can be used by one or more pages within an application.

See Also:

"Managing Pages in Component View"

2.2.3 Viewing a Page in Page Designer

To view a page in Page Designer:

1. Navigate to the Workspace home page.

2. Click the Application Builder icon.

3. Select an application.

4. Select a page.

   The page appears. By default, Page Designer appears.

   You preview a page by running it. Running an application page displays the rendered version as end users would see it.

See Also:

, "Switching from Component View to Page Designer," "Running an Application or Page," and "Managing Pages in Page Designer"

2.2.4 Viewing a Page in Component View

To view a page in Component View:

1. Navigate to the Workspace home page.

2. Click the Application Builder icon.

3. Select an application.

4. Select a page.

   The default view, Page Designer, appears.

5. Change to Component View:

   1. Locate the Page Designer toolbar at the top of the page.

   2. Click Component View.

   
   Description of the illustration ''go_to_comp_view.png''
   
   

   Component View appears.

   You preview a page by running it. Running an application page displays the rendered version as end users would see it.

See Also:

"Running an Application or Page," "Switching from Page Designer to Component View," and "Managing Pages in Component View"

2.2.5 Switching from Page Designer to Component View

To switch from Page Designer to Component View:

1. View the page in Page Designer. See "Viewing a Page in Page Designer."

2. Change to Component View:

   1. Locate the Page Designer toolbar at the top of the page.

   2. Click Component View icon.

   Component View appears.

See Also:

"Managing Pages in Component View"

2.2.6 Switching from Component View to Page Designer

To switch from Component View to Page Designer:

1. View the page in Component View. See "Viewing a Page in Component View"

2. To switch to Page Designer, click the Page Designer icon at the top of the page.

   Page Designer appears.

3. Select an application.

See Also:

"Managing Pages in Page Designer"