4 Creating the Initial Application

About This Lesson

In this lesson, you use the Create Application Wizard to build the foundational pages of your application based on the imported tables and data.

After you build the foundation of your app, use Page Designer’s Create Page Wizard to add a new page to an existing app and run the app for the first time.

4.1 Creating a New Application Using the Create Application Wizard

With the tables populated, you are ready to create pages dedicated to each one with the Create Application Wizard.

You can create many different types of pages from the tables with Create Application Wizard, such as Reports, Forms, and a Master Detail.

You learn more about each page type later in the tutorial, but here are some basics:

  • Reports are pages that display the contents of a table.

  • Forms enable users to modify a table.

  • A master detail displays more than one table at a time, usually with a one-to-many relationship.

To create the initial application:

  1. Click App Builder and select Create.
    The Create Application Wizard appears.

    Tip:

    You can also click the down arrow icon on the tabs at the top of the screen to view a list of shortcuts to wizard and other pages.
  2. Click Desktop.
  3. In Name, enter Demo Projects and click Next.

    Note:

    The Create Application Wizard creates a Home page automatically.

Often at the beginning of development, you only know some of the pages that your application requires. You can save time by clicking Add Page to generate a batch of application pages now instead of creating them one at a time later.

Each page appears in a list. You can also edit some attributes of each page by clicking the Edit icon (pencil) or delete pages in this list view by clicking the Remove icon (X).

Next, you create an interactive report to enable your users to view and maintain their contact information.

To add a report and form for the DEMO_TEAM_MEMBERS pages:

  1. In the Create Application Wizard list view, click the Add Page button.
    Edit the following:
    1. Select Page Type - select Report and Form
    2. Table Name - select DEMO_TEAM_MEMBERS
    3. Report Type - select Interactive Report
    4. Form Page Mode - select Modal Dialog
  2. Click the Add Page button.

    You return to the list view.

    Notice that two pages appear in the list: a Report named Demo Team Members and a Form named Demo Team Members. Creating a report and form creates a pair of pages with a parent-child relationship. For example, if you delete the report, the form is also deleted automatically (however, if you delete the Form, the Report remains).

The Create Application Wizard automatically names new pages based on the name of the table. You should always ensure that the name of your pages makes sense to your users. In this case, remove the word "Demo" to avoid confusing your users.

To edit the name of the report in the Create Application Wizard:

  1. Click the Edit icon (pencil) adjacent to Page 2, Demo Team Members.
    The New Page Definition dialog appears.
  2. In the Page Name field, change the name to Team Members and click Apply Changes.

To edit the name of the form:

  1. Click the Edit icon (pencil) adjacent to Page 3, Demo Team Members.
  2. In the Page Name field, change the name to Maintain Team Member and click Apply Changes.
  3. Verify that your list contains three pages:

    • Page 1: Home Page, Type - Blank

    • Page 2: Team Members, Type - Report

    • Page 3: Maintain Team Member, Type - Form

  4. Click the Create Application button. On the confirmation page, click Create Application.

    Application Express navigates to the Application home page in App Builder and an "Application created successfully" message appears.

You have completed generating the initial application.

4.2 Creating a Projects Page Using the Create Page Wizard

Use the Create Page Wizard to add new pages to an app. The Create Page Wizard has a more sophisticated interface to make adding and pre-configuring complicated page types easier (such as master detail or calendar).

Next, you want to add a project management page that your users can check for project progress. Progress on projects is measured in milestones, so you need to connect those two tables.

A master detail page reflects a one-to-many relationship between two tables. In this case, you want to show the relationship between the DEMO_PROJECTS and the DEMO_MILESTONES tables.

In addition to viewing progress on milestones and projects, you also want to give your users a way to edit the information themselves. A two page master detail is also pre-built like a report and form to give your users a way to edit the information.

To add a two page master detail page using the Create Page wizard:

  1. On the Application home page for your Demo Projects application, click the Create Page button.
    The Create Page Wizard appears.
  2. For Select a Page Type, select Form.
  3. Select Two Page Master Detail.
    The Create Master Detail page appears.
  4. Enter the following:
    1. Master Page Number - enter 4
    2. Master Page Name - enter Projects
    3. Detail Page Number - enter 5
    4. Detail Page Name - enter Maintain Project
    5. Breadcrumb - select Breadcrumb

      Note:

      The names you entered into the page names populate automatically for the Master Page Entry Name and Detail Page Entry Name fields.

    6. Click Next.
  5. For Navigation Preference, select Create a new navigation menu entry and click Next.
  6. For Master Source, enter the following:
    1. Table / View name - select DEMO_PROJECTS (table)
    2. Form Navigation Order - select CREATED (Timestamp(6) With Local Time Zone
    3. Click Next.
  7. For Detail Source, enter the following:
    1. Table / View Name - select DEMO_MILESTONES
    2. Master Detail Foreign Key - select ID -> PROJECT_ID
  8. Click Create.
    Page Designer appears displaying the new page, Projects.

Page Designer is the comprehensive integrated development environment (IDE) for Oracle Application Express. You explore Page Designer further in a future lesson. For now, you still have one more page to create.

4.3 Creating a Calendar Using the Create Page Wizard

Use the Create Page Wizard to add a calendar page so that your users can manage their deadlines.

To add a calendar page with the Create Page Wizard:

  1. On the Page Designer toolbar, click the Create menu (+) and select Page.
    The Create Page Wizard appears.
  2. For Select a Page Type, select Calendar.
    The Page Attributes section appears.
  3. For Page Attributes:
    1. For Page Number, enter 6.
    2. For Page Name, enter Calendar
    3. For Breadcrumb, select Breadcrumb
    4. Click Next.
  4. For Navigation Preference, select Create a new navigation menu entry and click Next.
  5. For Source, enter the following:
    1. Source Type - select Table
    2. Table / View Name - select DEMO_TASKS (table)
    3. Click Next.
  6. For Settings, enter the following:
    1. Display Column - select NAME
    2. End Date Column - select END_DATE
  7. Click Create.

Page Designer appears displaying the new Calendar page.

4.4 About Page Designer

Use Page Designer to develop and maintain the individual pages of your application in Oracle Application Express. Page Designer is a powerful integrated development environment (IDE) designed to provide developers with everything they need at their fingertips with an array of panes and toolbars. Most of your time in this tutorial is spent in Page Designer.

Note:

This section is a condensed look at a very powerful tool. For more in-depth information about Page Designer’s capabilities, review the "Managing Pages in Page Designer" chapter in the official Oracle Application Express documentation Oracle Application Express App Builder User’s Guide.


Description of GUID-EC0670C6-5867-45FE-AA6C-9F990C65AE1A-default.png follows
Description of the illustration GUID-EC0670C6-5867-45FE-AA6C-9F990C65AE1A-default.png

Toolbar

At the top of Page Designer is the toolbar. The toolbar contains a number of buttons and menus. You use the Page Selector, Undo Changes, Shared Components, Save, and Save and Run Page most often. You can hover your mouse cursor over a button to display its name in a tooltip.

Page Selector

Displays the current page. You can enter a page number directly, or click on the popup list of values to select a page.

Page Lock

Indicates if the page is unlocked (clear), locked by you (green), or locked by another developer (red). You can click on this icon to lock or unlock the page, providing it is not locked by another developer.

Undo Changes

Click to undo the previous update you made within Page Designer.

Redo Changes

Click to reapply the last update that was undone using Undo Changes.

Create

Create new pages, regions, shared components, developer comments and team development entries.

Utilities

Perform a check, delete, export, or review the history for the current page. You can also access the attribute dictionary, application utilities or upgrade the application.

Settings

Switch between two-pane and three-pane layouts or reset the page layout back to default.

Team Development

Show the Features, To Do’s, Bugs and Feedback entries for this page. You can also drill into filtered reports for each entry type.

Developer Comments

Drill into the developer comments entered for the current page, such as bugs or to-dos. You can also create new comments or delete comments from the modal window that is displayed.

Shared Components

Navigate to the Shared Components page.

Save

Save all changes you have made on the current page.

Save and Run Page

Save all changes and then run the current page.

You cannot run modal and non-modal pages directly using Save and Run Page. Instead you need to navigate to a normal page and run the page from there, then navigate to the modal or non-modal page within the running application.

Panes

Page Designer is divided up into different panes. Each pane is dedicated to a specific purpose.

Left Pane (Rendering Tree)

Includes tabs for Rendering, Dynamic Actions, Processing, and Page Shared Components. Each tab displays a list of the corresponding component types and components created on the current page.

Right-click to access context sensitive menus. You can also drag components up and down within the trees to change the position or sequence of the selected component.

Central Pane

Includes tabs for Layout, Component View, Messages, Page Search, and Help.

  • Layout shows a visual representation of the page. You can add new components to a page by dragging them from the Gallery pane, at the bottom, and dropping them in Layout.

  • Component View groups user interface elements and application logic by component type.

  • Messages displays current errors and warnings. Clicking on a message changes the focus within Property Editor to the corresponding attribute associated with the error or warning.

  • Page Search enables you to search for any text within the current page.

  • Help displays attribute specific help. Click on the attribute name within Property Editor to see information and examples for that attribute.

Right Pane (Property Editor)

Displays the Property Editor. Use the Property Editor to update attributes for the selected components.

When you select multiple components, the Property Editor only displays common attributes. Updating a common attribute will update that attribute for all of the selected components.

4.5 Running the Application for the First Time

Your app is functionally ready to run.

When you "run" an app, you are telling Oracle Application Express to open a new browser window and render the app. The rendered app is called the "application runtime" (or just "runtime"). As you create new pages, you can run them individually, or run an entire application.

Run the app for the first time from Page Designer and view the application runtime.

To run the application from Page Designer:
  1. Click the Save and Run Page button on the toolbar.
    A Log In page appears.
  2. Enter your Application Express credentials and click Log In.

Explore the application by clicking on menu items and navigating to different pages in the navigation pane. The sample tables and data display on various pages in a raw format. The rest of this tutorial guides you through the development process to improve both the presentation and functionality of this data for your end users.

Tip:

From this point on, you can load a different script from the .zip file to start at the beginning of any of the following chapters. This is useful for skipping ahead or around, or double-checking your work like an answer key.

Proceed to the next lesson.