0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<(args.length-2); i+=3) if ((obj=findObj(args[i]))!=null) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; } obj.visibility=v; } } //Define function to show one layer and hide others: function show(whichLayer) { if(layerDisp) { showHide(layerDisp,'','hide'); } showHide(whichLayer,'','show'); layerDisp = whichLayer; } //Define function to keep score and display feedback: function Engine(question, answer, layerSuffix) { if (answer != ans[question]) { show('incorrect'+layerSuffix); } else { if (!done[question]) { score++; } show('correct'+layerSuffix); } done[question] = -1; } //Define function to verify answer for checkbox: function checkAnswer(question, whichform, whichbox) { var checkTotal = 0; with (whichform) { for (i = 0; i < whichbox.length; i++) { if (whichbox[i].checked == true) { checkTotal = checkTotal + eval(whichbox[i].value); } } } Engine(question,checkTotal,question*10); } //Define function to show correct answer for checkbox: function showAnswer(question, whichform, whichbox) { var residue = ans[question]; var currAnswer = 1; if(layerDisp) { showHide(layerDisp,'','hide'); } with (whichform) { for (i = 0; i < whichbox.length; i++) { if ((residue>0) && (residue%(currAnswer*2)==currAnswer)){ whichbox[i].checked = true; residue-=currAnswer; } else { whichbox[i].checked = false; } currAnswer*=2; } } } //Define function to init a form function clearForm(form) { //Set all checkboxes and radio buttons on form to unchecked: for (xx=0; xx < form.elements.length; xx++) { if (form.elements[xx].type == 'checkbox' | form.elements[xx].type == 'radio') { form.elements[xx].checked = false; } } } //Define function to init all forms on reload: function InitForm() { clearForm(document.form1) clearForm(document.form2) clearForm(document.form3) } // End --> function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theURL,winName,features); } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i

Building Portlets Declaratively

Purpose

For developers who want quick solutions to build components, OracleAS Portal provides wizards that guide them step-by-step through the process of creating a portlet. This lesson describes how to create portlets in OracleAS Portal without the need to write any code. It then describes how portlets can be mapped together by using parameter values and events to create a fully functional, integrated page.

Topics

This module discusses the following topics:

 Overview
 Prerequisites
 Creating a Portlet Based on a CSV File Using OmniPortlet
 Creating a Portal Database Provider to Manage Data-Driven Portlets
 Creating a Report Portlet Based on a SQL Query
 Integrating Portlets Using Page Parameters and Events
 Creating a Portlet Using the Web Service Data Source

Viewing Screenshots

Move your mouse over this icon to see all images on the page Place the cursor on this icon to display all screenshots. You can also place the cursor on each icon to see only the screenshot associated with it.

Overview

Back to Topic List

Portlets

OracleAS Portal includes a declarative environment and extensibility features that make it easy for developers to expose enterprise data as portlets. PortalTools is a part of the Oracle Application Server Portal Developer Kit (OracleAS PDK), and contains new portlets designed to capture and integrate data from multiple data sources including Web services, spreadsheets, Extensible Markup Language (XML), and Web sites. Portlet developers can also use the local database providers, including 13 data-driven components, to create portlets that interact with enterprise data in an Oracle database or other data sources.

OmniPortlet and Web Clipping portlets shift the customization and integration of portal development from information technology (IT) departments to nontechnical users using self-service interfaces. OmniPortlet, which is a subcomponent of OracleAS Portal, is specifically targeted at enabling content contributors and content managers to quickly and easily publish data from various data sources by using a Web-based wizard. Web Clipping is an intuitive, straightforward tool to speed up the creation of portlets by using existing Web-based content and functionality. Web clippings are sections of existing Web content that can be reused in Portal pages.

Parameters and Events

In addition to publishing data, portlets can also use OracleAS Portal's page parameters and events. In OracleAS Portal, you can pass parameters between portlets residing in the same page or on different pages by using page parameters and events. This powerful technology enables portlets to easily work together, thus helping to create a cohesive application.

A page parameter in a portlet can drive the content and display of other portlets and pages. Page parameters enable you to declare a public data input interface to a page. This interface can then be used to transmit data from page to portlet in a standardized method that is directly supported by OracleAS Portal. Using public portlet parameters, any portlet on a page can easily receive its value from the mapped page parameter, regardless of the portlet parameter names. Public portlet parameters enhance your portlet's flexibility by enabling you to reuse your portlets on multiple pages.

An event is a specific action that a portlet can perform. Portlet events model the page navigation and the data output of a portlet when a user clicks a link or submits a form. A portlet can raise events, and you can use these events to send one or more parameters to a page. This feature enables you to create dynamic pages that are based on each user’s interaction with the page.

Prerequisites

Back to Topic List

In order for this lesson to work successfully, you must have performed the following:

1. Completed the Installing the Oracle Application Server 10g Infrastructure lesson
2. Completed the Installing the Oracle Application Server 10g Portal and Wireless lesson
3. Downloaded portalOBE.zip and unzip into your working directory
4. Completed the Building the Portal Site lesson
5. Completed the Publishing and Searching Content lesson

Creating a Portlet Based on a CSV File Using OmniPortlet

Back to Topic List

OmniPortlet in OracleAS Portal enhances your experience in publishing content. You can use OmniPortlet to quickly and easily publish data from various data sources and render the results in varied formats. You can format your data in a tabular layout, chart, news layout, bulleted list, form layout, and other custom layouts. OmniPortlet provides you with a wizard-based portlet creation experience and supports content caching to improve performance. You can build simple but powerful applications in OracleAS Portal by combining OmniPortlet, the Simple Parameter Form portlet, and the page parameters and events model.

In this lesson, you will use OmniPortlet to publish the data contained in a comma-separated value (CSV) file as a pie chart. You will use the CSV file that you added to your portal using the WebDAV client in the Publishing and Searching Content lesson.

Adding an OmniPortlet to the HR Tab

1. Click the HR tab.

Move your mouse over this icon to see the image

2. In the empty region directly under the tabs, click the Add Portlet  icon.

Move your mouse over this icon to see the image

3. In the Portlet Repository section, click the Portlet Builders link.

Move your mouse over this icon to see the image

4. Click the OmniPortlet link to move it to the Selected Portlets section.

Move your mouse over this icon to see the image

5. Click OK.

Move your mouse over this icon to see the image

OmniPortlet utilizes a develop-in-place model that lets you place a shell portlet on the page. After placing this shell portlet on the page, you can configure this portlet to meet your requirements by using a wizard. This feature of developing portlets in-place enables you to create, edit, and manage portlets while building a portal page.

Copying the URL for the Data Source

Before you edit the portlet to define its contents, you need to have all the required information to specify the data source for OmniPortlet. For CSV data sources, you must know the URL for the CSV. The CSV that you will use in this lesson is one of the files that you copied in the WebDAV section of Publishing and Searching Content. To find the URL for this file, navigate to the page containing the file and copy its URL.

1. Click < YourName> Oracle By Example in the Path field.

Move your mouse over this icon to see the image

2. Click the OBEWebDAV link.

Move your mouse over this icon to see the image

3. Right-click the dept link and select the Open in New Window menu option.

Move your mouse over this icon to see the image

4. Copy the URL from your browser's Address field into the clipboard, and close this browser window

Move your mouse over this icon to see the image

5. Access your OracleAS Portal application. You are in the OBEWebDAV page.

Move your mouse over this icon to see the image

6. Click < YourName> Oracle By Example in the Path field.

Move your mouse over this icon to see the image

7. Click the < YourName> OBE Home Page link.

Move your mouse over this icon to see the image

Developing Portlets In-Place

Now, you will develop the portlet in-place based on the department spreadsheet (dept.csv).

1. Click the Define link to define the contents of this OmniPortlet.

Move your mouse over this icon to see the image

2. Select the S preadsheet - A text file with comma separated values (CSV) option button.

Move your mouse over this icon to see the image

OmniPortlet allows for a variety of different data sources. Later in this lesson, you create another OmniPortlet that uses a Web service as a data source

3. Click Next to move to the Define your OmniPortlet page in the wizard.

Move your mouse over this icon to see the image

4. In the CSV URL field, paste the URL for the dept file.

Move your mouse over this icon to see the image

If the data source required any connection information, such as to a database, you would provide that information here.

5. Click Next. Use the Filter page to further refine, filter, or sort the data being returned from the specified data source.

Move your mouse over this icon to see the image

6. Click Next. You can specify the display settings for the OmniPortlet on the View page.

Move your mouse over this icon to see the image

7. Enter Departments in the Title field.

Move your mouse over this icon to see the image

8. Clear the Show Header Text check box.

Move your mouse over this icon to see the image

9. Clear the Show Footer Text check box.

Move your mouse over this icon to see the image

10. In the Layout Style section of the page, click the Chart option button.

Move your mouse over this icon to see the image

11. Click Next.

Move your mouse over this icon to see the image

12. Select Pie for the chart style.

Move your mouse over this icon to see the image

13. In the Legend field, select Bottom from the list.

Specify the settings for the Column Layout section as shown below.

  • Select <None> for the Group field.
  • Select Department for the Category field.
  • Select pct for the Value field.

Move your mouse over this icon to see the image

14. Click Finish.

Move your mouse over this icon to see the image

15. Click the Edit Region  icon for the region that contains the pie chart. You configure the display settings for the portlet added to this region.

Move your mouse over this icon to see the image

16. In the Region Display Options section, set the value in the Number of Columns field to 2.

Move your mouse over this icon to see the image

17. Specify the settings for the P ortlet Display Options section as shown below.

  • Set the value in the Space Between Portlets field to 6 pixels.

  • Set the value in the Space Around Portlets field to 4 pixels.

  • Deselect the Show Portlet Headers check box.

  • Deselect the Show Portlet Borders check box.

Move your mouse over this icon to see the image

18. Click OK.

Move your mouse over this icon to see the image

For more information on how to publish content from disparate sources, refer to the Publishing Content Using an OmniPortlet OBE lesson.

 

Creating a Portal Database Provider to Manage Data-Driven Portlets

Back to Topic List

A portlet provider is an entity that manages one or more portlets and acts as a conduit for communication between OracleAS Portal and the portlets. Providers abstract the actual implementation of portlets from the portal, allowing for a simpler portal architecture.

Providers can be broadly categorized into two groups: Web providers and database providers. Web providers are deployed to a Java 2, Enterprise Edition (J2EE) application server or remotely from OracleAS Portal and communicate with OracleAS Portal using HTTP. The database providers are implemented in PL/SQL and deployed in the Oracle database where OracleAS Portal is installed. The database providers are beneficial when you want to perform data-intensive operations, because OracleAS Portal offers a rich set of portlet-building tools and environments.

A database provider may contain one or more portlets; there is no limit on the number of portlets a provider may contain. In this lesson, you will create a database provider to contain reusable portlets.

1. Click the Navigator link at the top right of the screen.

Move your mouse over this icon to see the image

2. Click the Providers tab.

Move your mouse over this icon to see the image

3. Click the Locally Built Providers link.

Move your mouse over this icon to see the image

4. Click the Database Provider link in the Create New... field.

Move your mouse over this icon to see the image

5. In the Portal DB Provider Name field, enter < YourName>Provider .

Move your mouse over this icon to see the image

6. In the Portal DB Provider Display Name field, enter < YourName> DB Provider .

Move your mouse over this icon to see the image

7. Select HR from the Portal DB Provider Schema drop-down list.

Move your mouse over this icon to see the image

8. Click OK.

Move your mouse over this icon to see the image

Creating a Report Portlet Based on a SQL Query

Back to Topic List

Next, you will create a portlet within the provider you just created. The portlet queries the HR.EMPLOYEES table and shows the employees for a given department.

1. Click the < YourName> DB Provider link.

Move your mouse over this icon to see the image

2. Click the Report link in the Create New... field.

Move your mouse over this icon to see the image

3. Click the Reports From SQL Query link.

Move your mouse over this icon to see the image

4. In the Name field, enter empRpt .

Move your mouse over this icon to see the image

5. In the Display Name field, enter < YourName> Employee Repor t .

Move your mouse over this icon to see the image

6. In the Portal DB Provider list, ensure < YourName>PROVIDER is selected.

Move your mouse over this icon to see the image

7. Click Next.

Move your mouse over this icon to see the image

8.

Enter the following SQL statement:

select first_name || ' ' || last_name, hire_date
from hr.employees
where department_id = :deptno

Move your mouse over this icon to see the image

Note the bind parameter, deptno, is used to dynamically update the report in the portal page.

9. Click Next.

Move your mouse over this icon to see the image

10. Select the Tabular option for the report layout.

Move your mouse over this icon to see the image

11. Click Next.

Move your mouse over this icon to see the image

12. Change the Column Heading Text from the concatenated name to Employee Name.

Move your mouse over this icon to see the image

13. Click Next.

Move your mouse over this icon to see the image

14.

In the Formatting Conditions section, set the condition as shown below:

 

Column Names Values
Column HIRE_DATE
Condition <
Value 01-jan-1980
Row/Col <ROW>
Color Blue, Cadet

 

Move your mouse over this icon to see the image

15. Click Next.

Move your mouse over this icon to see the image

16. Click Next to skip through the Display Options section.

Move your mouse over this icon to see the image

17. In the Customization Form Display Options section, you see an entry for each bind variable in your SQL statement. For the deptno bind variable, assign a default value of 10, and select the Make Public check box.

Move your mouse over this icon to see the image

Note: Checking the Make Public check box exposes and allows you to set this parameter on the page on which this portlet is displayed.

18. Click Next through the remainder of the wizard pages to see what other options can be set or click Finish now.

Move your mouse over this icon to see the image

19. Click Close.

Move your mouse over this icon to see the image

20. Click the Navigator link at the top right of the page.

Move your mouse over this icon to see the image

21. Click the Page Groups tab.

Move your mouse over this icon to see the image

22.

Ensure that your path is Path: Page Groups > < YourName> Oracle By Example > Pages .

Click the Edit link to the right of < YourName> OBE Home Page . Ensure that the HR tab is selected.

Move your mouse over this icon to see the image

23. Click the Add Portlet  icon to add another portlet in the region containing the OmniPortlet pie chart.

Move your mouse over this icon to see the image

24. In the Search field, enter < YourName> and click Go.

Move your mouse over this icon to see the image

When you build portlets and providers using the built-in tools in OracleAS Portal, such as the Portlet Builder, OracleAS Portal automatically registers the provider for you. After you have created your portlet, it is automatically displayed in the Portlet Repository.

25. In the Portlet Repository Search Results section, click the < YourName> Employee Report link to move it to the Selected Portlets section.

Move your mouse over this icon to see the image

26. Click OK.

Move your mouse over this icon to see the image

Note: The report shows the employees in department 10 because you gave the report deptno parameter a default value of 10.

Integrating Portlets Using Page Parameters and Events

Back to Topic List

We now have a pie chart that shows departments, and an employee report that shows employees based on department. You will now map these two portlets together so that when a user clicks on a pie slice, the Employee report updates to show the number of employees in the department associated with that pie slice. You will create a page parameter to hold the department number, which will be passed between the two portlets.

1. Create a department parameter on the < YourName> OBE Home Page .

Click the Page Properties link.

Move your mouse over this icon to see the image

2. Click the Parameters tab.

Move your mouse over this icon to see the image

Note: The Parameters and Events tabs show for all pages that are owned by a page group that has parameters and events enabled. Parameters and events are enabled by default in OracleAS Portal.

3. In the New Page Parameter section, enter dept in the Parameter Name field.

Move your mouse over this icon to see the image

4. Click Add.

Move your mouse over this icon to see the image

5. The dept parameter now shows in the Page Parameter Properties section.

In the Default Value field, enter 30 . You can see how parameter values passed from the page override the default values of the Report portlet.

Move your mouse over this icon to see the image

6. You have a parameter with the value of 30. Next, you need to pass this parameter value to the Employee report.

In the Portlet Parameter Values section, click the HR : < YourName> Employee Report portlet link.

Move your mouse over this icon to see the image

7. When defining the Report portlet, you made the deptno parameter public. You can use this portlet parameter to pass a value from the page.

In the drop-down list, select Page Parameter.

Move your mouse over this icon to see the image

8. This causes another list to appear. In this list, you select the page parameter to bind to the portlet parameter.

Select dept. Now, you have mapped the deptno portlet parameter to the dept page parameter.

Move your mouse over this icon to see the image

9. Click OK.

Move your mouse over this icon to see the image

Note: There are more values showing in the Employee report. This is because you are passing the value 30 (the page parameter default value) to the Employee report. You can see more employees in department 30 than in department 10.

Defining an Event Action

Next, you create an event. In this lesson, the event is clicking on a pie slice. When you click a pie slice, the department number for that pie slice is raised. This value is passed to the Employee report using the page parameter, which, in turn, causes the Employee report to refresh with the new value.

1. Click the Edit  icon for the Pie chart OmniPortlet.

Move your mouse over this icon to see the image

2. Click the Layout tab.

Move your mouse over this icon to see the image

3. In the Chart Drilldown section, select Event1 from the list.

Move your mouse over this icon to see the image

This setting triggers a predefined event called Event1 when a pie slice is clicked.

4. Click the Events tab.

Move your mouse over this icon to see the image

5. In the Event Outputs section, select Department from the Event1Param1 drop-down list. Click OK.

Move your mouse over this icon to see the image

Now, when Event1 is raised, the department value is passed to the Param1 parameter.

7. Portlets are self-contained content on a page. Now that the portlet is raising an event, you need to configure the page to respond to this event.

Click the Page Properties link at the top of the page.

Move your mouse over this icon to see the image

8. Click the Events tab.

Move your mouse over this icon to see the image

9. In the Portlets Events section, click the HR : OmniPortlet link.

Move your mouse over this icon to see the image

Note: If you are not able to access the OmniPortlet event in the Page Properties, refresh your OmniPortlet Provider. To refresh your OmniPortlet Provider, access the Navigator in Portal. Click the Providers tab. Click the Locally Built Providers link. You should be able to see OmniPortlet Provider. Click the Refresh link.

 

Move your mouse over this icon to see the image

10. Click Event1.

Move your mouse over this icon to see the image

Earlier, you specified in the OmniPortlet settings that this event should be raised when a pie slice is clicked. Now, you need to specify what should happen when this event is raised. In this lesson, you refresh the OBE Home Page with the new parameter value.

11. The section on the right of the page refreshes to set the event information. Click the Go to page option button.

Move your mouse over this icon to see the image

12. Click the List of Values icon to the right of the Go to page field.

Move your mouse over this icon to see the image

13. Find < YourName> Oracle By Example page group in the list.

Click the plus icon to expand your page group.

Move your mouse over this icon to see the image

14. Click the Return Object link to the right of < YourName> OBE Home Page .

Move your mouse over this icon to see the image

15. Next, you need to specify the values that should be passed to the page from the output of the portlet.

In the Page Input section, select Event Output from the list.

Move your mouse over this icon to see the image

16.

Select Event1Param1 from the second list.

Move your mouse over this icon to see the image

This maps the event output to the dept page parameter.

17. Click OK.

Move your mouse over this icon to see the image

Notice how clicking on different pie slices changes the value of the Employee report.

To summarize the steps that you have performed:

bullet In the properties for the pie chart, you specified this portlet would raise an event and pass out the value of the department.
bullet In the page properties, in the Events tab, you set the page to listen for the event, which the pie chart raises and place the output of the event into the page parameter called department.
bullet In addition, in the page properties, you set the page to refresh itself when the event was raised. When the page is refreshed, the new value in the page parameter is passed to the Employee report.

Creating a Portlet Using a Web Service as a Data Source

Back to Topic List

Web services provide a means of encapsulating business services and publishing them on a network. A Web service is a discrete business service that is platform and language independent and can be programmatically accessed over a network by using standard protocols, such as Simple Object Access Protocol (SOAP) and HTTP. A Web service can be described, published, discovered, and invoked in a distributed computing environment. A number of business functions, such as currency exchange rates, stock quotes, and global weather, are available as Web services.

A Web service can be used as a data source with OmniPortlet. In this lesson, you will add an Omniportlet on the Key Indices tab. This Omniportlet uses Web services as a data source. This Web service exposes the DEPT and EMP tables of the Oracle Database SCOTT schema as Web services.

1. Click the Key Indices tab.

Move your mouse over this icon to see the image

2. Click the Add Portlet  icon.

Move your mouse over this icon to see the image

3. Click Portlet Builders.

Move your mouse over this icon to see the image

4. Click the OmniPortlet link to move it to the Selected Portlets section.

Move your mouse over this icon to see the image

5. Click OK.

Move your mouse over this icon to see the image

6. Click the Define link for the new portlet.

Move your mouse over this icon to see the image

 

7. Choose the Web Service option button.

Move your mouse over this icon to see the image

 

8. Click Next.

Move your mouse over this icon to see the image

 

9. Enter http://webservices.oracle.com/ws/emp/oracle.ws.scott.OTNDeptEmp?WSDL in the WSDL URL field.

Click Show Methods to see what methods are available from this Web service.

Move your mouse over this icon to see the image

 

10. In the Web Service Methods section, select the OTNDeptEmp.getEmpXML method from the Available Methods for this Web Service list. This Web service method returns all the employees of the Employee table as XML.

Move your mouse over this icon to see the image

 

Note: The methods exposed in a Web service enable you to interact with the Web service. Some methods expose parameters.

 

11.

Click Show Parameters to check whether the OTNDeptEmp.getEmpXML method accepts any parameters.

Move your mouse over this icon to see the image

 

12.

You could note that the selected method does not accept any parameters.

Now, click Next to filter the data returned from the data source. In this lesson, you restrict the returned data to only one department from the Employee table.

Move your mouse over this icon to see the image

 

13.

In the Conditions section, select DEPTNO from the Column list, Equals from the Operator list, and enter 20 for the Value field.

 

Move your mouse over this icon to see the image

 

14. Click Next.

Move your mouse over this icon to see the image

 

15. Enter Employees in Department 20 in the Title field.

Move your mouse over this icon to see the image

 

16.

Deselect the Show Header Text check box.

Enter OmniPortlet using Web services as data source in the Show Footer Text field.

Ensure that the Show Footer Text check box is selected.

Move your mouse over this icon to see the image

 

17. Select the Tabular option button for Layout Style section and click Next.

Move your mouse over this icon to see the image

 

18.

In the Tabular Style section, select the Alternating option button.

In the Column Layout section, enter the details as shown in the following table:

Name
Column Label
Column
Label Display As Action
Field1
Employee Number
EMPNO
Left Text None
Field2
Employee Name
ENAME
Left Text None
Field3
Job Title
JOB
Left Text None
Field4
Salary
SAL
Left Text None
Field5
Department Number
DEPTNO
Left Text None

Move your mouse over this icon to see the image

 

19. Click Finish.

Move your mouse over this icon to see the image

 

You can see the details of all the employees in department 20 being dispalyed in a tabular format.

Move your mouse over this icon to see the image

 

In this lesson, you were introduced to the declarative environment for building portlets. You used OmniPortlet to create a chart and published it as a portlet on your Portal page. You created a Portal database provider and used the OracleAS Portal wizards to build a report portlet to display data from a database. You also learned how to use parameters and events to integrate these two portlets on a page.

For more information about OracleAS Portal, please visit Oracle Portal Center Home.

If you have questions or comments, please post them in the Oracle by Example discussion forum on the Oracle Technology Network.

 Place the cursor on this icon to hide all screenshots.

Copyright © 2004, Oracle Corporation. All rights reserved. Contact Us • Legal Notices and Terms of Use • Privacy Statement