4
Building Applications by Linking Components

Estimated completion time: 30 minutes

This chapter shows you how to use Oracle WebDB to build applications from the individual components you have created. Typically, you will build components as part of an application, not as standalone components. End users need to be able to easily access an application's components and the components themselves need to be able to link to each other and pass data between each other.

In this chapter you'll learn how to build menus to provide access to your application components and how to build links to add hypertext jumps and pass data between components.

This chapter includes the following sections:

Section
"Before You Begin"
"Building a Menu"
"Editing a Menu"
"Building a Link"
"What's Next?"

4.1 Before You Begin

• To complete this chapter, you must be a WebDB Developer (that is, you must be a member of the WEBDB_DEVELOPER role) and have Build In privileges on your own schema. If you are not a WebDB Developer, you will not be able to access WebDB's component building features. If you do not have Build In privileges on your own schema, you will not be able to build components in that schema. You must also be a member of the RESOURCE role. If you need to be added to the WEBDB_DEVELOPER or RESOURCE roles or granted Build In privileges on your own schema, ask your DBA.

• You must have completed Section 3.2, "Building a Form Based on a Table", Section 3.5, "Building a Report", and Section 3.6.3, "Adding parameters to a report" before starting this chapter.

• Your DBA must have created the HR_TUTORIAL role. Instructions for creating this role are provided in Appendix A, "Tutorial Setup Instructions".

4.2 Building a Menu

End users use menus to navigate within an application and access the different components that make up that application. The components you have built so far provide the beginnings of a Human Resources application. Let's create a menu to make it easier for Human Resources staff to access the components of that application.

1. In the toolbar at the bottom of the page, click.

   The page displayed is divided into three panels. For this exercise you will use the Create a New Menu panel.

   
   
2. Click Create to display the Create Menus Wizard.

3. In the Schema list, choose your own schema.

   Note: Your schema name is the same as your user name.

4. In the Menu Name field, type TUTORIAL_MENU.

5. Clickto display the Menu Options page.

   The Menu Options page is divided into two. The left side of the page shows the menu hierarchy including submenus and menu items.

   • A submenu is a menu that is accessed from another menu or submenu.

   • A menu item is a jump to another WebDB component, a link (shared component), or another URL.

   The right side of the page is where you set the options for the currently selected menu, submenu, or menu item.

   WARNING: Clickif you need to go back to a previous page of the wizard. Do not click your browser's Back button.

6. Currently My Menu is selected in the left side of the page and the right side of the page is displaying the menu options, so let's edit those.

7. In the Name field, type Tutorial Menu.

8. In the Welcome Text field, type:

   Welcome to the Tutorial Human Resources Application.<BR>
   Choose an option from the list below.
   
   

9. In the Menu Footer field, type:

   For enhancements, please email <A 
   HREF="mailto:your_email_address">your_name</A>.
   
   

   You have now defined the basic appearance of the menu. Let's add some submenus and menu items.

10. In the left side of the page, clicknext to My Menu to add a submenu or menu item to the menu.

    A pop-up menu appears, where you need to choose whether you are adding a submenu or a menu item.

    
    
11. In the pop-up menu, choose Add menu item.

    A menu item, called menu item 1, is added to the menu hierarchy in the left side of the page. The right side of the page is updated to display options for menu item 1.

    Note: As soon as you add the new menu item, My Menu changes to Tutorial Menu to reflect the changes you made previously.

    Now you need to specify the destination of the menu item.

12. In the Name field, type Oracle.

    This text is displayed as a hypertext link in the menu.

13. In the Link field, type http://www.oracle.com.

14. In the Description field, type:

    Go to the Oracle Corporation Web site.
    
    

    The description text is displayed just below the hypertext link and is used to provide end users with more information about where the link will take them when they click it.

    You can add submenus to organize the items in your menu.

15. In the left side of the page, clicknext to Tutorial Menu.

16. In the pop-up menu, choose Add submenu.

    A submenu, called submenu 2, is added to the menu hierarchy in the left side of the page. The right side of the page is updated to display options for submenu 2.

17. In the Name field, type Update Records.

    This text is displayed as a hypertext link in the menu. The text is also used as the title of the submenu which appears in a banner at the top of the page.

18. In the left side of the page, clicknext to submenu 2 to add a submenu or menu item to the Update Records submenu.

19. In the pop-up menu, choose Add menu item.

    A menu item, called menu item 3, is added to the menu hierarchy in the left side of the page. The right side of the page is updated to display options for menu item 3

    Note: As soon as you add the new menu item, submenu 2 changes to Update Records to reflect the changes you made previously.

20. In the Name field, type Add Employee.

21. In the Link field, type <YOUR_SCHEMA>.TUTORIAL_FORM.SHOW, where YOUR_SCHEMA is your own schema name.

    This is the run link of the form you created in Section 3.2, "Building a Form Based on a Table", and is used to link to the form.

22. In the Description field, type:

    Add information for a new employee.
    
    

23. Clickto display the Create Menu page.

24. Click OK to create the menu and display the Manage Component page.

25. Click Run to view your menu.

    
    

26. Click Update Records to display the Update Records submenu.

    
    

27. Click Add Employee to display the Employees form.

4.3 Editing a Menu

Now let's add some more submenus and menu items to the menu.

1. Click your browser's Back button three times to return to the Manage Component page.

2. Click Edit to display the Edit Menu: Menu Options page.

   
   

   Note: You can no longer see the Add Employee menu item because the Update Records submenu is no longer expanded. To see the Add Employees menu item you need to clickto expand the Update Records submenu.

   Let's add another submenu to Tutorial Menu.

3. In the left side of the page, clicknext to Tutorial Menu.

4. In the pop-up menu, choose Add submenu to create submenu 4.

   
   

5. In the Name field, type Charts and Reports.

6. In the left side of the page, clicknext to submenu 4 to add a menu item to the Charts and Reports submenu.

7. In the pop-up menu, choose Add menu item to create menu item 5.

   
   

8. In the Name field, type Department Salaries (Chart).

9. In the Link field, type <YOUR_SCHEMA>.TUTORIAL_CHART.SHOW, where YOUR_SCHEMA is your own schema name.

   This is the run link of the chart you created in Section 3.7, "Building a Chart", and is used to link to the chart.

10. In the left frame, clicknext to Charts and Reports to add another menu item to the Charts and Reports submenu.

11. In the pop-up menu, choose Add menu item to create menu item 6.

12. In the Name field, type Employees by Department (Report).

13. In the Link field, type <YOUR_SCHEMA>.TUTORIAL_REPORT.SHOW_PARMS, where YOUR_SCHEMA is your own schema name.

    This is the run link of the report you created in Section 3.5, "Building a Report", and is used to link to the report.

14. Click Finish to save your changes and display the Manage Component page.

15. Click Run to view your changes.

    
    

16. Click Charts and Reports to display the Charts and Reports submenu.

    
    

17. Click Department Salaries (Chart) to display the Department Salaries chart.

    Suppose you now wanted to see the salary of each employee in Department 10.

18. Click your browser's Back button to return to the Charts and Reports menu.

19. Click Employees by Department (Report) to display the parameter entry form for the Employees report.

    Note: The parameter entry form is displayed rather than the report itself because you used the SHOW_PARMS run link rather than the SHOW run link.

20. In the Department fields, choose = from the first list and choose Accounting (10) from the second.

21. Click Run Report to display a report of employees in the Accounting department (Department 10), in which you can view the salary of each employee in that department.

4.3.1 Adding role-level menu security

You can control who can view menu item hypertext links by adding role security.

1. Click your browser's Back button four times to return to the Manage Component page.

2. Click Edit to display the Edit Menu: Menu Options page.

3. In the left side of the page, click Update Records to edit the Update Records submenu options.

4. In the Role Security list, choose HR_TUTORIAL.

   Note: If HR_TUTORIAL is not listed, ask your DBA to create this role for you using the instructions in Appendix A, "Tutorial Setup Instructions".

5. Click Finish to save your changes and display the Manage Component page.

   Now only members of the HR_TUTORIAL role will be able to view the Update Records submenu hypertext link on Tutorial Menu.

   Note: Even though you have enabled members of the HR_TUTORIAL role to view the links on the menu, you still need to grant end users execute privileges on the individual components themselves to enable them to run the components linked to from the menu. You will also need to grant end users execute privileges on the menu. The most efficient way of granting multiple end users access to components is to use roles. If you need a role creating, ask your DBA.

4.4 Building a Link

WebDB links are shared components that WebDB Developers can add to components so that end users can navigate from one component to another component, parameter entry form, or Web page. For more information about shared components, see Section 3.8, "Building a Shared Component". This provides quick and easy access to additional information. You can also use links to pass data between components or to link to any Web page.

TUTORIAL_REPORT includes a parameter that restricts the data displayed in the report to a particular department. Let's create a link that passes a department number to that parameter. This link can then be added to other components so that end users can click a department number in one component and jump directly to a report that contains employee information about that department.

1. In the toolbar at the bottom of the page, click.

2. Click Links.

   The page displayed is divided into three panels. For this exercise you will use the Create New Link panel.

   
   
3. Click Create Link to display the Create Link Wizard.

4. In the Schema list, choose your own schema.

5. In the Link Name field, type TUTORIAL_LINK.

6. Clickto display the Link Target Type and Name page.

   Here, you identify where the link will jump to when it is clicked. It can jump to a component, and optionally pass values to that component to specify what data it displays. You can also link to a component parameter entry form where the end user can specify the values to use to display the component, or to any Web page.

7. Click WebDB Component to identify the target as a component.

8. Clicknext to The name of the component or page you are linking to field to list the components to which you can link.

9. Click Next to page through the list if necessary and click <YOUR_SCHEMA>.TUTORIAL_REPORT, where YOUR_SCHEMA is the name of your own schema.

10. Clickto display the Link Target Inputs page.

    This page lists the parameters and display options associated with the chosen component that the link can pass values to.

    Note: If you clicked WebDB Component Parameter Form or HTML Link, clickingon the Link Target and Name page displays the last page of the Create Link Wizard, because links pass values only to components.

11. In the row for the tutorial_table.deptno parameter:
    1. In the Condition list, choose =.

    2. In the Value Type list, choose Column.

       This specifies that the link passes the value of a column to the component. You can also choose Literal and specify a static value so that the link always passes the same value to the component.

    3. In the Value field, type DEPTNO.

       The link passes the values of this column to the component. If you chose Literal in the Value Type list, you would specify the static value that you want to pass to the component in the Value field.

       Note: In this page, you can also specify values for display options, such as Maximum Rows/Page, Output Format, and Font Size. If you do not change these values, the component is run using whatever display options were specified when the component was created.

12. Clickto display the Create Link page.

13. Click OK to create the link and return to the Manage Links page.

4.4.1 Testing a link

Once you have created a link, you can test it to check how it will appear in a component.

1. In the Manage Links page, scroll down to the Select a Recently Edited Link panel.

   
   

   If TUTORIAL_LINK is not listed:

   1. Scroll up to the Find an Existing Link panel.

      
      

   2. In the Link Name Contains field, type TUTORIAL_LINK.

   3. Click Find Link.

2. Click Test to test the behavior of TUTORIAL_LINK.

   
   

3. Click 30 to display TUTORIAL_REPORT with the Department parameter set to 30.

4.4.2 Using a link in a component

In the previous exercise you created a link to TUTORIAL_REPORT. In this exercise you will add the link to TUTORIAL_CHART so that end users can quickly display a report that lists the employees in a department, based on the department number that they click in the chart. Rather than having to exit the chart and run the report separately, end users can get straight to the information they want from the chart.

1. Click your browser's Back button to return to the Test Link page.

2. In the toolbar at the bottom of the page, click.

3. In the Schema list, choose your own schema.

4. In the Name Contains field, type TUTORIAL.

5. Uncheck all the check boxes except for Charts, and click Find.

6. Click TUTORIAL_CHART to display the Manage Component page for the chart.

7. Click Edit to display the Edit Charts: Table/View Columns page.

   
   

8. In the Link list, choose TUTORIAL_LINK.

9. Click Finish to save your changes and return to the Manage Component page.

10. Click Run to view your changes.

    The department number is underlined, identifying it as a link.

    
    
11. Click 30 to display TUTORIAL_REPORT showing all employees in Department 30.

4.5 What's Next?

In this chapter, you learned how to:

• Build a menu to provide access to the components in an application

• Create a link between components in an application

This concludes the application building part of the tutorial. Now you're ready to build your own applications. For more information about any subject you've learned in this chapter and others, see the WebDB online help.

If you will be using WebDB to build Web sites, see Chapter 5, "Creating WebDB Sites".

If you will be designing or adding content to WebDB sites, see Chapter 6, "Designing WebDB Sites".