Adding Additional Components to your Existing Database Application Using Oracle Application Express 4.2

Overview

Purpose

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

Note: Some screenshots in this tutorial may be slightly different depending on what browser or operating system you use.

Time to Complete

Approximately 40 minutes.

Prerequisites

Before you perform this tutorial, you should:

Adding a Flash Chart

You want to create a flash chart. First, you create a 2D pie chart that shows the number of tasks per project. Then, you convert this 2D pie chart into a 3D pie chart. Perform the following steps:

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

  2. Select Chart Page Type and click Next >.

  3. Make sure Flash Chart is selected for Chart Rendering. Oracle Application Express 4.2 provides different types of Flash Charts. Select Pie & Doughnut, and click Next >.

  4. You can create a 3D Pie, 2D Pie, or a 2D Doughnut chart. Select 2D Pie, and click Next >.

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

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

  7. Select the following chart attributes.

    • Chart Title: Tasks per Project Chart
    • Chart Animation: Side From Left
    • Background Type: Solid Color
    • Background Color 1: #FFFFFF
    • Show Legend: Bottom

    Observe the Application Express provides five positions for a legend on your chart.

    Make sure the Show Hints, Show Labels, and the Show Labels boxes are selected and click Next >.

  8. 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

  9. Click Create to create the chart.

  10. Click Run Page.

  11. If the login screen appears, enter the user's Oracle Application Express credentials and click Login.

  12. Observe the animation as the chart is loaded, appearing from the left side of the page. The flash chart shows the number of tasks per project. Keep your mouse over the pie to display the tooltips for the chart data.

  13. Click on any slice of the pie to see the effect of exploding slides.

  14. You want to change the 2D Pie to a 3D Pie chart. Click Edit Page.

  15. In the Page Rendering section, under Regions, locate Tasks per Project Chart. Right-click Tasks per Project Chart and select Edit Chart.

  16. Under Chart Settings, select 3D Pie for Chart Type, Look 1 for Color Scheme, and click Display Settings.

  17. Under Display Settings, select Diamond for Marker. Click Apply Changes.

  18. Click Run.

  19. The 3D Pie chart is displayed. You can click any slice of the pie to see the effect of exploding slides. Click the Application<n> link in the developer tool bar.

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 selected for the Display Column. Then click Next >.

  8. Select Create new edit page for Link Target. 

  9. Shift-select all the columns for Select Columns except PROJECT_ID and click Next.

  10. Accept the default and click Next >.

  11. Click Create to create the calendar.

  12. Click Run Page.

  13. The calendar shows the projects on the date due. Note: If you do not see your tasks in the displayed month, click Next> tab till you see it.

  14. Select a project on the calendar. In this case, select Public Website Modified.


  15. The Edit Calendar Entry window is displayed. Change the name to something else and change the Project Deadline to one day greater  than the current date of the project. Click Apply Changes.


  16. Notice that the Project is now contained on the calendar for the date you specified.


  17. You can also create a new project from the calendar. Click the day you want to create a project on.


  18. Enter your project information and click Create.


  19. The new entry has been created and now appears on the date specified. Select the Application<n> link in the developer toolbar.


  20. You want to create a button on the Projects page that will redirect to the calendar. Click the Projects page.


  21. In the Page Rendering section, right-click Region Buttons and select Create.


  22. Enter View Calendar for the Button Name and click Next >. Notice that the wizard already detects the region you want to create the button in and what type of button you want to create so the wizard starts in the middle rather than at the beginning.

  23. Accept the defaults and click Next >.

  24. Select Redirect to Page in this Application for Action.

  25. Click the List of Values icon to select the Project Tasks Calendar page and click Create Button.

  26. The button gets created. Observe VIEW_CALENDAR button listed under the Region Buttons node. Move your mouse over VIEW_CALENDAR. The text for Button Action should say Redirect to page 6(in this case).

  27. Click Run to view the Report with the button.

  28. Click View Calendar.

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

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. Click Edit Application Properties.

  2. Click the User Interface tab.

  3. Click the Logo subtab.

  4. Select Text for the Logo Type. Enter Project Tracker for Logo and select Black Text from the list of Logo Attributes. Then click Apply Changes.

  5. To see the logo, click the Run Page.

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

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. Under Page Rendering, Regions node, locate Navigation. Right click Navigation and select Edit List.

  3. You want to modify the existing entry. Click Grid Edit.

  4. Change the link text to Manage Projects and Tasks and click Apply Changes.

  5. Select the List Details breadcrumb.

  6. Click Create List Entry >.

  7. Enter 20 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 List of Values icon for Page.

  8. Select 4 Tasks per Project Chart.

  9. Check the reset pagination for this page option and click Create List Entry.

  10. Your entry was added to the list. Click the Run Page icon.

  11. Notice the modified and new entry. Click Manage Projects and Tasks.

  12. The Projects report is displayed. Click the Home link.

  13. Click View Tasks per Project Chart. The page is listed. Click the Application<n> link in the developer tool bar.



Applying a New Theme

When you created the application, you selected the theme 1. 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 Shared Components.

  2. Under User Interface, click Themes.

  3. To create a new theme, click Create >.

  4. Accept the default From the Repository and click Next > .

  5. Accept the default click Next > .

  6. Select the Theme 26 radio button and click Next >.

  7. Click Create.

  8. To use Theme 26 in your application, you need to make it the current theme. Click Switch Theme.

  9. For Currently Active Theme, make sure 1. Simple Red is selected.  Select 26. Productivity Application for Switch to Theme and click Next > .

  10. 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 >.

  11. To confirm the theme switch, click Switch Theme.

  12. To see the new theme, click Application<n> breadcrumb.

  13. Select the View Report icon in the toolbar.

  14. Select the Run icon for the Projects page (page 2).

  15. Notice that the entire appearance of your application has changed. The color scheme has changed. Edit one of your projects.

  16. The Master Detail page has also changed to the new theme.

Summary

    In this tutorial, you have learned how to:

    • Add and modify a report, form, chart, and calendar
    • Adding a logo
    • Update a navigation list
    • Apply a new theme

    Resources

    Credits

    • Lead Curriculum Developers: Veerabhadra Rao Putrevu, Drue Swadner
    • Original Curriculum Developer: Dimpi Sarmah
    • Other Contributors: David Peake, Chaitanya Koratamaddi

To navigate this Oracle by Example tutorial, note the following:

Topic List:
Click a topic to navigate to that section.
Expand All Topics:
Click the button to show or hide the details for the sections. By default, all topics are collapsed.
Hide All Images:
Click the button to show or hide the screenshots. By default, all images are displayed.
Print:
Click the button to print the content. The content that is currently displayed or hidden is printed.

To navigate to a particular section in this tutorial, select the topic from the list.