testcontent
This tutorial shows you how to add additional components to your existing application.
Time to Complete
Approximately 30 minutes.
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 |
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.
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.
Before you perform this tutorial, you should:
| 1. |
Perform the Manipulating Database Objects tutorial. |
|
| 2. |
Perform the Creating and Running an Application tutorial. |
|
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.
|
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 (
|
| 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.
|
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 (
|
| 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.
|
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 (
|
| 5. |
The text is displayed. Click the Application <n> link from the developer tool bar.
|
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 (
|
| 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 (
|
| 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.
|
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 | |