Adding Additional Components to your Existing Application

Purpose

This tutorial shows you how to add additional components to your existing application.

Time to Complete

Approximately 30 minutes.

Topics

This tutorial covers the following topics:

 Overview
 Prerequisites
 Adding a Flash Chart
 Adding a Calendar
 Applying a New Theme
 Adding a Logo
 Updating the Home Page Navigation List
 Summary

Viewing Screenshots

 Place the cursor over this icon to load and view all the screenshots for this tutorial. (Caution: This action loads all screenshots simultaneously, so response time may be slow depending on your Internet connection.)

Note: Alternatively, you can place the cursor over an individual icon in the following steps to load and view only the screenshot associated with that step. You can hide an individual screenshot by clicking it.

Overview

In this tutorial, you create a flash chart, add a calendar, apply a new theme, add a logo and add some entries to the Home page navigation list.

Back to Topic List

Prerequisites

Before you perform this tutorial, you should:

1.

Perform the Manipulating Database Objects tutorial.

2.

Perform the Creating and Running an Application tutorial.

Back to Topic List

Adding a Flash Chart 

You want to create a flash chart. You need to create a 2D pie chart that shows the number of tasks per project. Perform the following steps:

1.

Click Create Page > in the Project Tasks Application home page.

 

2.

Select the Chart Page Type and click Next >.

 

3.

Select the Flash Chart radio button and click Next >.

 

4.

Enter the page name as Tasks per Project Chart, accept the other default values, and click Next >.

 

5.

Select the Do not use tabs option and click Next >.

 

6.

Select 2D Pie as the Chart Type, enter Tasks per Project as the Chart Title and click the Update button to refresh the chart preview.

 

7.

Make sure the Show Hints, Show Labels, and the Show Labels check boxes are selected.

 

8.

Click Next >.

 

9.

Copy and paste the following query into the query field. Click Next >.

                                       
select null link,
       p.project label,
       t.task_count value
  from (select project_id,
               count(*) task_count
          from obe_tasks
         group by project_id) t,
       obe_projects p
 where t.project_id = p.project_id
                                    

 

10.

Click Finish to create the chart.

 

11.

The flash chart has been created. Click the Run Page icon to view the flash chart.

 

12.

The flash chart shows the number of tasks per project. The first number for each slice of pie is the project and the second number is the number of tasks. Click the Application <n> link in the developer tool bar.

 

Back to Topic List

Adding a Calendar  

You want to add a calendar that shows the deadlines of each project and then add a button on the Projects report to link to the Calendar. Perform the following steps:

1.

Click Create Page > in the Project Tasks Application home page.

 

2.

Select the Calendar Page Type and click Next >.

 

3.

Select the Easy Calendar radio button and click Next >.

 

4.

Enter Project Tasks Calendar for the Page Name and Region Name. Then, click Next >.

 

5.

Select the Do not use tabs option and click Next >.

 

6.

Select OBE_PROJECTS for the Table / View Name and click Next > .

 

7.

Ensure that PROJECT_DEADLINE is selected for the Date Column and PROJECT is select for the Display Column. Then click Next >.

 

8.

Click Finish to create the calendar.

 

9.

The calendar has been created. Before you run the page, you need to edit some settings. Click the Edit Page icon.

 

10.

Click the Modern Blue link in the Theme region.

 

11.

Select the Component Defaults tab.

 

12.

Select Calendar from the drop-down list for Calendar. Click Apply Changes.

 

13.

Click the Run Page icon to view the calendar.

 

14.

The calendar shows the projects on the date due. You can also view the calendar in daily or weekly mode. Click Weekly.

 

15.

The Weekly calendar mode is displayed. You can advance to next week. Click Next.

 

16.

You can create a button to this calendar from the Projects report. Scroll down to the bottom of the weekly calendar and click the Application <n> link in the developer tool bar.

 

17.

Click the Projects page.

 

18.

In the buttons area, Click the Create (  ) icon. Note: If you don't see the Buttons area, click the Show All icon.

 

19.

Select the second Projects 1 (10) region and click Next >.

 

20.

Select Create a button in a region position and click Next >.

 

21.

Enter View Calendar for the Button Name and click Next >.

 

22.

Accept the defaults and click Next >.

 

23.

Accept the defaults and click Next >.

 

24.

Click the up area to select a page to branch to.

 

25.

Select Project Tasks Calendar.

 

26.

Click Create Button.

 

27.

The button gets created.

 

28.

Check the text next to View Calendar in the Buttons region. It should say Redirect to page 5. If it says Submit as View_Calendar, click the View Calendar link.

 

29.

Select the URL Redirect tab.

 

30.

For Target is a, select Page in this Application. To select the page, click the up button and select Project Tasks Calendar. Click Appy Changes.

 

31.

Click Run to view the Report with the button.

 

32.

Click View Calendar.

 

33.

The calendar is displayed. Click the Application <n> link in the developer tool bar.

 

Back to Topic List

Applying a New Theme  

When you created the application, you selected the theme 20. You can change the look and feel of the application by changing the theme. You first create a new theme by selecting one from the Oracle Application Express Repository. To apply a new theme, perform the following steps:

1.

Click the down arrow next to Shared Components > User Interface > Themes.

 

2.

To create a new theme, click Create.

 

3.

Accept the default From the Repository and click Next >.

 

4.

From the Theme options, select the Theme 14 option. Click Next >.

 

5.

Click Create.

 

6.

To switch to the Modern theme, click Switch Theme.

 

7.

For Switch to Theme, make sure 14. Modern is selected. Click Next >.

 

8.

Notice that the page displays the compatibility between the two themes. This utility checks whether there is a template in the new theme to replace each of the templates in the current theme. The check marks in the Status column indicate that the templates are compatible. Click Next >.

 

9.

To confirm the theme switch, click Switch Theme.

 

10.

To see the new theme, click the Run Page icon (  ) at the top right of the page.

 

11.

Notice that the entire appearance of your application has changed. The color scheme has changed. Click the Application <n> link from the developer tool bar.

Back to Topic List

Adding a Logo  

You can very easily add a text or image logo to the application. In this case, you add a text logo. Perform the following steps:

1.

Select the down arrow next to Shared Components and select Application>Definition.

 

2.

Click the Logo tab.

 

3.

Select Text for the Logo Type. Enter Project Tracker for Logo and style="font-family:Arial; color:#000000; font-size:18; white-space:nowrap; font-weight:bold;" for Logo Attributes. Then click Apply Changes.

 

4.

To see the logo, click the Run Page icon (  ) at the top right of the page.

 

5.

The text is displayed. Click the Application <n> link from the developer tool bar.

 

Back to Topic List

Updating the Home Page Navigation List  

Now that you have completed your Master Detail Form and Flash Chart, you need to add them to the Home Page Navigation List . Perform the following steps:

1.

Click the Home page.

 

2.

Select the Regions (  ) icon.

 

3.

In the regions area, click the List link.

 

4.

Click Create List Entry >.

 

5.

Enter 20 for the Sequence, Manage Projects and Tasks in the List Entry Label field. Ensure that Page in this Application is selected in the Target type and then click the up arrow for the Page.

 

6.

Select 2 Projects.

 

7.

Select the reset pagination for this page option and click Create and Create Another. By selecting to reset pagination, the link always displays the first set of records when the user clicks the link regardless of which set they were viewing the last time they accessed the page.

 

8.

Enter 30 for the Sequence, View Tasks per Project Chart in the List Entry Label field. Ensure that Page in this Application is selected in the Target type and then click the up arrow for the Page.

 

9.

Select 4 Tasks per Project Chart.

 

10.

Select the reset pagination for this page option and click Create.

 

11.

Your entry was added to the list. Click the Run Page 1 (  ) icon.

 

12.

Notice the new two entries. Click Manage Projects and Tasks.

 

13.

The Projects report is displayed. Click the Home link.

 

14.

Click View Tasks per Project Chart.

 

15.

The page is listed. Click the Application <n> link in the developer tool bar.

 

Back to Topic List

Summary

In this tutorial, you learned how to:

 Add and modify a report, form, chart, and calendar
 Create LOVs and validation items
 Apply a new theme
 Update a navigation list

Back to Topic List

 Place the cursor over this icon to hide all screenshots.

 

 

 

Left Curve
Popular Downloads
Right Curve
Untitled Document