Oracle® Fusion Middleware User's Guide for Oracle WebCenter Spaces 11g Release 1 (11.1.1.4.0) E10149-06 |
|
![]() Previous |
![]() Next |
To help you leverage most of the mashup building capabilities in WebCenter Spaces, this appendix describes a variety of business scenarios that require creation of business mashups, and explains how to meet those requirements. It includes the following sections:
Section C.1, "Creating Mashups with Data from the Analytics Service"
Section C.2, "Creating a Mashup that Displays Employee Data from SQL Data Control"
Section C.3, "Creating a Mashup with Data from the WebCenter Spaces MDS Repository"
Section C.4, "Creating a Mashup with Data from a WebCenter Spaces Web Service Data Source"
Section C.5, "Creating a Mashup with Data from a Siebel Data Source"
Section C.6, "Building and Using a Custom Mashup Style with Predefined Columns"
Section C.7, "Building and Using a Custom Mashup style with Date Fields"
Section C.8, "Creating a Mashup with a Graph That Is Wired to the Page Navigation"
Section C.9, "Creating a Mashup with a Graph that Is Wired to the Inherited Page Navigation"
Section C.10, "Creating a Master-Detail Mashup that Contains a Google Maps Task Flow"
Section C.11, "Creating a Mashup with a Customized RSS Feed OmniPortlet"
Note: This appendix describes only the high level steps to perform a task. For the detailed steps, you are pointed to Chapter 26, "Creating Business Mashups." |
Sample Applications on OTN
Sample applications created for some of the examples in this appendix are available on Oracle Technology Network (OTN). The following page on OTN provides links to business mashup-specific samples and other sample applications that illustrate the different WebCenter Spaces capabilities:
http://www.oracle.com/technetwork/middleware/webcenter/ps3-samples-176806.html
A readme file available with each sample describes what the application illustrates and provides guidance for extending or customizing the application for real life use cases.
The Analytics service displays metrics, such as community traffic, portlet traffic, searched keywords, response times, and usage behavior, for the entire WebCenter Spaces application. This section describes how to create a mashup with date retrieved from the Analytics service data source. It includes the following sections:
Section C.1.2, "Using a Parameterized Task Flow to Display a Graph of Page Hits in a Space"
Section C.1.3, "Creating a Graph to View Portal Site Traffic"
Section C.1.4, "Creating a Mashup with Two Task Flows in a Master-Detail Relationship"
Section C.1.5, "Creating a Table with Hyperlinks to Download Documents"
If you have configured WebCenter Services in your application, WebCenter Spaces provides an Analytics service connection, ActivitiesDS
, out-of-the-box. You can use this connection to create a SQL data control and consume that data control as a graph to display statistics for the WebCenter Spaces application.
For information about configuring the Analytics service, see "Managing the Analytics Service" in Oracle Fusion Middleware Administrator's Guide for Oracle WebCenter.
To create a graph that displays statistics for pages in your application:
Create a SQL data control, PageStats
, using the ActivitiesDS
connection. Specify the following SQL query and bind parameters:
Query:
SELECT space.name_ spaceName, page.name_ pageName, space.id, page.id, count(1), fact.page_, page.resourceid_ FROM asfact_wc_pagevie_0 fact , asdim_wc_groupsp_0 space , asdim_wc_pages_0 page, asdim_wc_applica_0 app WHERE space.id = fact.groupspace_ and page.id = fact.page_ and app.id = fact.application_ and fact.occurred between to_date(:startdate, :dateformat) and to_date(:enddate, :dateformat) and app.name_ = :appname and page.personal_ = :ispersonal and space.name_ is not null and page.name_ is not null and space.id is not null and page.id is not null and fact.page_ is not null and page.resourceid_ is not null GROUP BY space.name_, page.name_, space.id, page.id, fact.page_, page.resourceid_ ORDER BY count(1) desc
Bind Parameters:
startdate
- 01/01/2008
dateformat
- MM/DD/YYYY
appname
- webcenter
ispersonal
- 1
enddate
- 01/01/2011
For the detailed steps, see Section 26.2.1.2, "Creating the Data Control."
Expose the data control in the Resource Catalog by selecting Show from the Edit menu.
Create a task flow, Page Hits
, based on the blank mashup style.
For detailed steps, see Section 26.3.1, "Creating a Task Flow."
Edit the task flow, click Add Content, and in the catalog, locate the PageStats
data control and drill down to the Analytics_PageViews_DC
accessor.
Add the accessor as a graph. In the Create Graph dialog, select the following options:
Select the Bar graph type.
On the Placement page, select the Space Name, Page Name and Page ID data columns to be mapped along the X-axis, and Count to be mapped as Bars.
Accept the default values on all other pages of the dialog.
For the detailed steps, see Section 26.4.1.3, "Adding a Data Control as a Graph."
The graph is displayed as shown in Figure C-1.
In the previous example, you saw how to view page hits in your WebCenter Spaces application. This section describes a similar example, but with the ability to display page hits for a specific Space only. In this case, the data control is added as a graph to a parameter form task flow. The input parameter allows users to specify a Space name and display statistics for that Space in the graph. This section includes the following subsections:
Section C.1.2.2, "Creating a Custom Mashup Style with a Parameter to Specify the Space Name"
Section C.1.2.3, "Creating a Task Flow Using the Custom Mashup Style"
Section C.1.2.4, "Consuming the Data Control in the Task Flow"
If you have configured WebCenter Services in your application, an Analytics service connection, ActivitiesDS
, is available out-of-the-box. You can use this connection to create a SQL data control. This section describes how to create a data control to view the top five page hits for the last 7 days for a given Space.
To create the data control:
See Also: Section 26.2.1.2, "Creating the Data Control" for the detailed steps to create a data control. |
Use the ActivitiesDS
connection and create a SQL data control named PageHits
.
Specify the following SQL query:
SELECT * FROM
(SELECT page.name_ pageName, space.name_ spaceName, COUNT(1) hits
FROM asdim_users u, asdim_wc_pages_0 page, asdim_wc_applica_0 app, asdim_wc_groupsp_0 space, asfact_wc_pagevie_0 fact
WHERE fact.page_ = page.id AND fact.userid = u.id AND fact.application_ = app.id
AND fact.groupspace_ = space.id AND fact.occurred BETWEEN(SYSDATE-6) AND (SYSDATE+1) AND app.name_ = 'webcenter'
AND u.userid <> 'anonymous' AND upper(space.name_) LIKE upper(:spacename) AND space.name_ IS NOT NULL
AND page.name_ IS NOT NULL AND space.id IS NOT NULL AND page.id IS NOT NULL
AND fact.page_ IS NOT NULL AND page.resourceid_ IS NOT NULL
GROUP BY page.name_, space.name_ ORDER BY hits DESC)
WHERE rownum <= 5 ORDER BY rownum
The data control is created with the spacename
bind variable.
Set the spacename
bind variable to Home space
.
Test the query and view the data retrieved from the data source, as shown in Figure C-2.
This section describes how to create a custom mashup style, Input Space Name
, with an input text field that can be wired to the SQL data control's bind variable. With this type of wiring, users can provide a Space name to view page hits for that Space.
To create the custom mashup style:
Copy an existing mashup style in the Resource Manager and name it Input Space Name
.
Edit the source of the task flow, click the Fragment tab, and replace the entire code with the following:
<?xml version='1.0' encoding='UTF-8'?> <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:pe="http://xmlns.oracle.com/adf/pageeditor" xmlns:cust="http://xmlns.oracle.com/adf/faces/customizable" xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich"> <af:panelGroupLayout id="pgl"> <af:panelGroupLayout id="pg2" layout="horizontal" halign="center" inlineStyle="padding-bottom:5px;"> <af:inputText id="ip1" value="#{pageFlowScope.bindVarId}" label="Space Name" shortDesc="Enter a Space name. The default value is home space."/> <af:commandButton text="#{dataComposerBundle.MASHUP_STYLES_GO}" id="cb1"/> </af:panelGroupLayout> <cust:panelCustomizable id="pc1" halign="center"/> </af:panelGroupLayout> </jsp:root>
Select the mashup style in the Resource Manager, and from the Edit menu, click Show.
For the detailed steps to create and edit a mashup style, see Section 26.3.4, "Managing Mashup Styles."
In the Resource Manager, create a task flow, Top Five Page Hits for a Space
, based on the new mashup style, as shown in Figure C-3.
For the detailed steps, see Section 26.3.1, "Creating a Task Flow."
From the Edit menu, select Show to include the task flow in the Resource Catalog.
To add the page hits data control to the new task flow:
Edit the Top Five Page Hits for a Space
task flow, and add the PageHits
data control accessor as a graph, as shown in Figure C-4.
In the Create Graph dialog, on the Type page, choose Bar.
On the Placement page, place PAGENAME and SPACENAME on the X Axis, and HITS as the Bars.
On the DC Parameters page, specify the following value for the spacename
parameter:
#{empty pageFlowScope.bindVarId ? 'home space' : pageFlowScope.bindVarId}
This section describes the steps you must perform to test whether the graph in the task flow displays data specific to the Space name you provide.
To test the task flow:
Create a test page and add the task flow from the Add Content dialog.
To ensure that the graph displays properly on the page:
Edit the task flow.
In the Component Properties dialog, on the Basic page of the Display Options tab, deselect the Allow Resize option.
On the Advanced page of the Display Options tab, set Stretch Content to Auto.
Specify a different Space name in the input text field. The graph displays data specific to that Space, as shown in Figure C-5.
This section explains how to retrieve the site traffic data from the Analytics service and display it as a Pie graph.
To create a mashup with the portal site traffic data:
Create a SQL data control, PortalStats
, using the ActivitiesDS
connection. Specify the following SQL query and bind parameters:
Query:
SELECT 'Spaces' Name, count(1) Hits FROM asfact_wc_groupsp_0 fact , asdim_wc_groupsp_0 space , asdim_wc_applica_0 app WHERE space.id = fact.groupspace_ and app.id = fact.application_ and fact.occurred between to_date(:startdate, :dateformat) and to_date(:enddate, :dateformat) and app.name_ = :appname and space.personal_ = :ispersonal UNION ALL SELECT 'Pages' Name, count(1) Hits FROM asfact_wc_pagevie_0 fact , asdim_wc_pages_0 page , asdim_wc_applica_0 app WHERE page.id = fact.page_ and app.id = fact.application_ and fact.occurred between to_date(:startdate, :dateformat) and to_date(:enddate, :dateformat) and app.name_ = :appname and page.personal_ = :ispersonal UNION ALL SELECT 'Portlets' Name, count(1) Hits FROM asfact_wc_portlet_0 fact , asdim_wc_applica_0 app WHERE app.id = fact.application_ and fact.occurred between to_date(:startdate, :dateformat) and to_date(:enddate, :dateformat) and app.name_ = :appname UNION ALL SELECT 'Logins' Name, count(1) Hits FROM asfact_wc_logins_0 fact , asdim_wc_applica_0 app WHERE app.id = fact.application_ and fact.occurred between to_date(:startdate, :dateformat) and to_date(:enddate, :dateformat) and app.name_ = :appname UNION ALL SELECT 'Searches' Name, count(1) Hits FROM asfact_wc_searche_0 fact , asdim_wc_applica_0 app WHERE app.id = fact.application_ and fact.occurred between to_date(:startdate, :dateformat) and to_date(:enddate, :dateformat) and app.name_ = :appname UNION ALL SELECT 'Wikis' Name, count(1) Hits FROM asfact_wc_doclib__0 fact , asdim_wc_documen_0 doc , asdim_wc_applica_0 app WHERE app.id = fact.application_ and fact.document_ = doc.id and fact.occurred between to_date(:startdate, :dateformat) and to_date(:enddate, :dateformat) and app.name_ = :appname and doc.objecttype_ like '%WIKI%' UNION ALL SELECT 'Blogs' Name, count(1) Hits FROM asfact_wc_doclib__0 fact , asdim_wc_documen_0 doc , asdim_wc_applica_0 app WHERE app.id = fact.application_ and fact.document_ = doc.id and fact.occurred between to_date(:startdate, :dateformat) and to_date(:enddate, :dateformat) and app.name_ = :appname and doc.objecttype_ like '%BLOG%' UNION ALL SELECT 'Documents' Name, count(1) Hits FROM asfact_wc_doclib__0 fact , asdim_wc_documen_0 doc , asdim_wc_applica_0 app WHERE app.id = fact.application_ and fact.document_ = doc.id and fact.occurred between to_date(:startdate, :dateformat) and to_date(:enddate, :dateformat) and app.name_ = :appname and doc.objecttype_ like '%DOCUMENT%' UNION ALL SELECT 'Discussions' Name, count(1) Hits FROM asfact_wc_discuss_1 fact , asdim_wc_applica_0 app WHERE app.id = fact.application_ and fact.occurred between to_date(:startdate, :dateformat) and to_date(:enddate, :dateformat) and app.name_ = :appname
Bind Parameters:
startdate
- 01/01/2008
dateformat
- MM/DD/YYYY
appname
- webcenter
ispersonal
- 1
enddate
- 01/01/2011
For the detailed steps, see Section 26.2.1.2, "Creating the Data Control."
Expose the data control in the Resource Catalog by selecting Show from the Edit menu.
Create a task flow, Portal Traffic
, based on the blank mashup style.
For detailed steps, see Section 26.3.1, "Creating a Task Flow."
Edit the task flow, click Add Content, and in the catalog, locate the PortalStats
data control and drill down to the Site_Traffic_DC
accessor.
Add the accessor as a graph. In the Create Graph dialog, select the following options:
Select the Pie graph type.
On the Placement page, select Name data column to be plotted as slices and Hits as the pie.
Accept the default values on all other pages of the dialog.
For the detailed steps, see Section 26.4.1.3, "Adding a Data Control as a Graph."
The graph is displayed as shown in Figure C-6.
This example describes how to wire two task flows in a master-detail relationship so that a selection in one task flow results in an action on the second one. This section illustrates how to do the following:
Create a master task flow that displays page hits in a table.
Hyperlink the user names column in the table.
Create a details task flow that displays a graph of top five page hits for a user.
On clicking a user name in the master, display the details task flow in a popup window.
The master task flow displays a table with the top five page views for a given Space during the last seven days.
To create the task flow:
Create a SQL data control, TopFiveDocViewsForSelectedSpace
, using the ActivitiesDS
connection. Specify the following SQL query:
select * from (select u.id id , u.userid userid, count(fact.userid) pageviewsfrom asdim_users u , asfact_wc_pagevie_0 fact,asdim_wc_applica_0 app where fact.userid=u.idand u.userid <> 'anonymous' and fact.application_ = app.id and app.name_ = 'webcenter' and fact.occurred BETWEEN (SYSDATE-7) and ( SYSDATE+1)group by u.id,u.useridorder by pageviews desc )where rownum<11
For the detailed steps, see Section 26.2.1.2, "Creating the Data Control."
This query returns the top five page hits for a given Space for the last seven days.
Select the new data control, and from the Edit menu, click Show.
Create a task flow, Top 10 Visitor Page Hits
, based on the Blank mashup style.
For the detailed steps, see Section 26.3.1, "Creating a Task Flow."
Edit the task flow and add the TopFiveDocViewsForSelectedSpace
data control accessor as a table.
Create a read-only table. On the Columns page in the Create Table dialog, choose to display the USERID column as hyperlinks, and specify the URL to be http://www.oracle.com
, as shown in Figure C-7.
The table displays a user-wise listing of the top page hits. The USERID column displays user names as hyperlinks, as shown in Figure C-8.
Select the new task flow, and from the Edit menu, click Show.
You have seen how to create a master task flow that displays the top page hits in a table, in which the user names are hyperlinked. The next step is to create a details task flow that must be displayed on clicking a user name in the master task flow. This section describes how to create a details task flow that displays a graph of all page hits for a given user.
To create the details data control and task flow:
Create a SQL data control, PageHitsForSelectedUser
, using the ActivitiesDS
connection. Specify the following SQL query and bind variable:
SELECT page.name_ pageName, space.name_ spaceName, COUNT(1) hits
FROM asdim_users u, asdim_wc_pages_0 page, asdim_wc_applica_0 app,
asdim_wc_groupsp_0 space, asfact_wc_pagevie_0 fact
WHERE fact.page_ = page.id AND fact.userid = u.id
AND u.userid=(:userid) AND fact.application_ = app.id
AND fact.groupspace_ = space.id AND fact.occurred
BETWEEN (SYSDATE-7) and SYSDATE and app.name_ = 'webcenter'
AND u.userid <> 'anonymous' AND space.name_ IS NOT NULL
AND page.name_ IS NOT NULL AND space.id IS NOT NULL
AND page.id IS NOT NULL AND fact.page_ IS NOT NULL
AND page.resourceid_ IS NOT NULL GROUP BY page.name_, space.name_
Set the userid
bind variable to weblogic
.
For the detailed steps, see Section 26.2.1.2, "Creating the Data Control."
Select the new data control, and from the Edit menu, click Show.
Create a task flow, Page Hits for Selected User
, based on the Blank mashup style.
For the detailed steps, see Section 26.3.1, "Creating a Task Flow."
Edit the task flow and add the PageHitsForSelectedUser
data control accessor as a graph.
Create a bar graph, and plot SPACENAME and PAGENAME along the X-Axis and HITS as Bars.
On the DC Parameters page in the Create Graph dialog, specify the following value for the userid
parameter:
#{empty pageFlowScope.userid ?'weblogic': pageFlowScope.userid}
This ensures that weblogic
is selected as the default user if no user name is specified for the parameter. The graph displays as shown in Figure C-9.
Create a task flow parameter called userid
, and set its value to the pageFlowScope
, as shown in Figure C-10.
Select the new task flow, and from the Edit menu, click Show.
This section describes how to wire the master and details task flows so that a user can click a user name in the master task flow to pop up the details task flow displaying the page hits graph for that user.
To wire the master and details task flows:
Edit the source of the master task flow, Top 10 Visitor Page Hits
. Click the Fragment tab in the Edit Source dialog, and paste the following code below <af:panelGroupLayout id="pgl1">
to reference the details task flow in a popup:
<af:popup id="popup1" launcherVar="source" eventContext="launcher" contentDelivery="lazyUncached"> <af:dialog> <af:region xmlns:af="http://xmlns.oracle.com/adf/faces/rich" id="oc_449838760region1" value="#{bindings.popTaskflow.regionModel}"/> </af:dialog> <af:setPropertyListener from="#{source.attributes.userid}" to="#{viewScope.userid}" type="popupFetch"/> </af:popup>
Find the <af:goLink>
code segment and replace it with the following so that the USERID column displays command links that invoke a popup dialog:
<af:commandLink text="#{row.bindings.USERID.inputValue}" id="userLink"> <af:clientAttribute name="userid" value="#{row.bindings.USERID.inputValue}"/> <af:showPopupBehavior popupId="::popup1" alignId="userLink" align="afterEnd"/> </af:commandLink>
Click the Page Definition tab, and add a reference to the details task flow. Paste the following code within the <executable>
tag and below the <iterator>
tag:
<taskFlow id="popTaskflow" taskFlowId="details_taskflow_definition_path#blanktaskflow"
xmlns="http://xmlns.oracle.com/adf/controller/binding" Refresh="ifNeeded">
<parameters>
<parameter id="userid" value="#{viewScope.userid}"/>
</parameters>
</taskFlow>
where details_taskflow_definition_path is the path to the task flow in your instance, for example, /oracle/webcenter/siteresources/scopedMD/s8bba98ff_4cbb_40b8_beee_296c916a23ed/taskFlow/gsr34e6278e_9e9a_45eb_bbbf_31aa5ae34381/taskflow-definition.xml
.
You can get this path by selecting the task flow in the Resources Manger, and clicking Edit Properties on the Edit Menu. The Metadata File
attribute provides the complete path to the task flow.
Test the master-detail relationship. Preview the Top 10 Visitor Page Hits
task flow in the Resources Manager. When you click a user name link, the page hits graph for that user is displayed in a popup window, as shown in Figure C-11.
This section describes how to create a mashup with a table listing the top five documents viewed in a Space. The document names in the table are displayed as hyperlinks so that a user can click a link to open the selected document in a new window. The data for the table comes from a SQL data control to the WebCenter Spaces Analytics service. This section includes the following sections:
Section C.1.5.2, "Creating a Custom Mashup Style with a Parameter to Specify the Space Name"
Section C.1.5.3, "Creating a Task Flow Using the Custom Mashup Style"
Section C.1.5.4, "Consuming the Data Control in the Task Flow"
Section C.1.5.5, "Testing the Parameter Wiring in the Task Flow"
This section describes how to create a data control to view the top five document hits for the last 7 days for a given Space.
Use the ActivitiesDS
connection and create a SQL data control named Top Five Doc Views for Given Space in the Past Week
and specify the following SQL query:
SELECT * FROM( SELECT doc.name_ name,space.name_ space,count(1) hits,doc.path_ download_url FROM asfact_wc_doclib__0 fact , asdim_wc_documen_0 doc , asdim_wc_applica_0 app,asdim_wc_groupsp_0 space WHERE app.name_ = 'webcenter' AND app.id = fact.application_ AND fact.document_ = doc.id AND fact.occurred BETWEEN (SYSDATE-6) AND (SYSDATE+1) AND doc.name_ is not null AND doc.id is not null AND fact.document_ is not null AND doc.resourceid_ is not null AND fact.GROUPSPACE_ = space.id AND upper(space.name_) LIKE upper(:spacename) AND space.name_ IS NOT NULL GROUP BY doc.name_, doc.id,space.name_ ,doc.path_ ORDER BY hits DESC) WHERE rownum <= 5 ORDER BY rownum
The data control is created with the spacename
bind variable.
Set the spacename
bind variable to Home space
.
Test the query and view the data retrieved from the data source, as shown in Figure C-12.
This section describes how to create a custom mashup style, Input Space Name
, with an input text field that can be wired to the SQL data control's bind variable. With this type of wiring, users can provide a Space name to view page hits for that Space.
To create the custom mashup style:
Copy an existing mashup style in the Resource Manager and name it Input Space
.
Edit the source of the task flow, click the Fragment tab, and replace the entire code with the following:
<?xml version='1.0' encoding='UTF-8'?> <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:pe="http://xmlns.oracle.com/adf/pageeditor" xmlns:cust="http://xmlns.oracle.com/adf/faces/customizable" xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich"> <af:panelGroupLayout id="pgl"> <af:panelGroupLayout id="pg2" layout="horizontal" halign="center" inlineStyle="padding-bottom:5px;"> <af:inputText id="ip1" value="#{pageFlowScope.bindVarId}" label="Space Name" shortDesc="Enter A Space Name, by default it's all spaces"/> <af:commandButton text="#{dataComposerBundle.MASHUP_STYLES_GO}" id="cb1"/> </af:panelGroupLayout> <cust:panelCustomizable id="pc1" halign="center"/> </af:panelGroupLayout> </jsp:root>
Select the mashup style in the Resource Manager, and from the Edit menu, click Show.
To create a task flow using the custom style:
In the Resource Manager, create a task flow, Top Five Doc Hits for a Given Space in a Week
, based on the new mashup style, as shown in Figure C-13.
Select the task flow in the Resource Manager, and from the Edit menu, click Show.
To consume the page hits data control in the new task flow:
Edit the Top Five Doc Hits for a Given Space in a Week
task flow and add the Top Five Doc Views for Given Space in the Past Week
data control accessor as a table, as shown in Figure C-14.
Create a read-only table. On the Items page in the Create Table dialog (shown in Figure C-15), ensure that the DOWNLOAD_URL
column is not displayed.
On the Columns page, choose to display the Name column as hyperlinks, and specify the URL to be the following (as shown in Figure C-16):
{
doc path pre fix
}#{empty row.DOWNLOAD_URL ? '' : row.DOWNLOAD_URL}
where
doc path pre fix
is the prefix to be used for the document URL. To find the prefix for a document path, select a document on the Documents page and click Get a Link from the View menu. The first part of the Download URL (ending in path) is the prefix to be used. For example, http://my.company.com:8889/webcenter/content/conn/xyz18-ucm11g/path
.
On the DC Parameters page, specify the following value for the spacename
parameter:
spacename: #{empty pageFlowScope.bindVarId ? '%' : pageFlowScope.bindVarId}
The data control is now shown as a table in the task flow.
Optionally, edit the table. In the Component Properties dialog, change the value of the Column Stretching field to last
, as shown in Figure C-17. This ensures that the last column is stretched when required.
To ensure that the table displays properly on the page:
Edit the task flow.
In the Component Properties dialog, on the Basic page of the Display Options tab, deselect the Allow Resize option.
On the Advanced page of the Display Options tab, set Stretch Content to Auto
.
This section describes the steps you must perform to test whether the table in the task flow displays data specific to the Space name you provide.
To test the task flow:
Create a test page and add the task flow from the Resource Catalog.
The task flow displays the table.
Specify a different Space name in the input text field. The table displays data specific to that Space.
The NAME column displays hyperlinks that enable you to download the documents, as shown in Figure C-18.
The tasks in this section use examples based on an employee database. This section describes how to add a visualization for the retrieved employee data and customize this visualization by performing a few simple configurations. This section describes how to add the EmpDetails
data control as a table to the Employee Details
task flow and perform different customizations on the table, such as showing or hiding columns and sorting rows. It includes the following sections:
Section C.2.2, "Adding the Data Control and Binding Task Flow Parameters to Data Control Parameters"
Section C.2.4, "Adding the Data Control in a Parameter Form Task Flow"
Perform the following tasks to create a data control for the employee database:
Create a connection to the employee database. For the detailed steps, see Section 26.2.1.1, "Creating a Database Connection."
Create a SQL data control, EmpDetails
, to retrieve data using this database connection. Use the following query to retrieve data:
select ename, empno, mgr, deptno from emp where job in (:jobId) order by empno asc
For the detailed steps, see Section 26.2.1.2, "Creating the Data Control."
This data control returns records for all employees whose designation matches the value of jobId
. The records are sorted by employee number.
Create a task flow, Employee Details
, based on the Blank mashup style. For the detailed steps, see Section 26.3.1, "Creating a Task Flow."
Perform the following steps to add the data control as a table:
Edit the Employee Details
task flow in Oracle Composer.
In the Add Content dialog, navigate to the EmpDetails
data control's accessor, click Add, and select Table, as shown in Figure C-19.
Figure C-19 Employee Details Data Control Accessor
Create an editable table, enable row selection, filtering and sorting, and select columns ename
, empno
, and deptno
to be displayed in the table.
For the detailed steps, see Section 26.4.1.1, "Adding a Data Control as a Table."
The table displays with an empty field at the top of each column, as shown in Figure C-20. You can use those fields to specify filter criteria for the columns.
Figure C-20 Table in the Employee Details Task Flow
Create a task flow parameter, designation
.
For the detailed steps, see Section 26.4.2, "Creating Task Flow Parameters."
To use the designation
parameter to drive the data displayed in the table, copy the storage value of the parameter, #{pageFlowScope.designation}
, and paste it as the value for the bind variable, jobId
, on the Data tab of the table's Component Properties dialog.
For the detailed steps, see Section 26.4.3, "Binding Data Control Parameters to Task Flow Parameters."
Create a page and add the Employee Details
task flow to the page.
For the detailed steps, see Section 26.4.5, "Consuming Task Flows that Contain Visualizations."
Edit the Employee Details
task flow on the page, and on the Parameters tab, specify a designation to view corresponding details in the table.
In your SQL query, you specified that the data control must retrieve the columns ename
, empno
, deptno
, and mgr
. However, you chose to display only the ename
, empno
, and deptno
columns. In this case, the data control retrieves data from all four data columns, but displays only three. You can render the fourth column in the table but editing the table's source code. To do this:
On the Resource Manager - Task Flows page, select the Employee Details task flow.
Click Edit Source, then the Fragments tab, and locate the code for the hidden column. It would be similar to the code in the following example:
<column sortProperty="MGR" filterable="true" sortable="true"
headerText="#{bindings.accessor_gsrf2d136f7_d907_481d_ad3a_eb2b9dbe7c35.hints.MGR.label}"
id="column4" rendered="false">
<af:inputText value="#{row.bindings.MGR.inputValue}"
label="#{bindings.accessor_gsrf2d136f7_d907_481d_ad3a_eb2b9dbe7c35.hints.MGR.label}"
required="#{bindings.accessor_gsrf2d136f7_d907_481d_ad3a_eb2b9dbe7c35.hints.MGR.mandatory}"
columns="#{bindings.accessor_gsrf2d136f7_d907_481d_ad3a_eb2b9dbe7c35.hints.MGR.displayWidth}"
maximumLength="#{bindings.accessor_gsrf2d136f7_d907_481d_ad3a_eb2b9dbe7c35.hints.MGR.precision}"
shortDesc="#{bindings.accessor_gsrf2d136f7_d907_481d_ad3a_eb2b9dbe7c35.hints.MGR.tooltip}"
id="inputText4">
<f:validator binding="#{row.bindings.MGR.validator}"/>
<af:convertNumber groupingUsed="false" pattern="#{bindings.accessor_gsrf2d136f7_d907_481d_ad3a_eb2b9dbe7c35.hints.MGR.format}"
id="convertNumber3"/>
</af:inputText>
</column>
Set the rendered
attribute to true
.
The table now displays all four columns, as shown in Figure C-21.
Figure C-21 Table Displaying Four Columns
Similarly, you can hide a visible column by setting its rendered
attribute to false
.
The Parameter Form task flow provides an input text field where a user can specify a value. This value is passed to a data control accessor parameter so that the accessor displays data based on the user input.
You can add a data control as a table inside a Parameter Form task flow so that users can specify a value in the field to view corresponding details in the table.
To add a data control inside a Parameter Form task flow:
Create a task flow based on the Parameter Form
mashup style.
For the detailed steps, see Section 26.3.1, "Creating a Task Flow."
Edit the task flow in Oracle Composer and add the EmpDetails
data control as a table inside the task flow.
For the steps, see Section C.2.2, "Adding the Data Control and Binding Task Flow Parameters to Data Control Parameters."
Wire the jobId
parameter on the data control to the Input Text
component in the Parameter Form task flow, by specifying the jobId
value to be #{pageFlowScope.bindVarId}
.
For detailed steps, see Section 26.4.4, "Wiring a Data Control to a Parameter Form Task Flow."
You can now specify a value in the input text field to view the corresponding records in the table, as shown in Figure C-22.
Figure C-22 Data Control in a Parameter Form Task Flow
WebCenter Spaces applications are seeded with the following repository connections:
WebCenterDS
mds-owsm
mds-SpacesDS
ActivitiesDS
You can create data controls for any of these connections and consume them in pages and task flows. This section describes how to create a data control to connect to the WebCenter Spaces repository and display details about the Spaces and pages in the application and so on. It includes the following subsections:
Create a data control, WebCenter Pages
, to retrieve page-related data from the WebCenter Spaces data source. Use the mds-SpacesDS connection and enter the following SQL query:
select 'Home Space Pages' metric, count(*) value from mds_paths where path_type = 'DOCUMENT' and path_name like '%.jspx' and path_high_cn is null and path_fullname like '%/user/%' union select 'Business Role Pages' metric, count(*) value from mds_paths where path_type = 'DOCUMENT' and path_name like '%.jspx' and path_high_cn is null and path_fullname like '%/businessRolePages/%' union select 'Space Template Pages' metric, count(*) value from mds_paths where path_type = 'DOCUMENT' and path_name like '%.jspx' and path_high_cn is null and path_fullname like '%/spacetemplate/%' union select 'Group Space Pages' metric, count(*) value from mds_paths where path_type = 'DOCUMENT' and path_name like '%.jspx' and path_high_cn is null and (path_fullname not like '%/user/%' and path_fullname not like '%/businessRolePages/%' and path_fullname not like '%/spacetemplate/%')
This query retrieves information about the different type of pages and the count of each page type, as shown in Figure C-23.
Figure C-23 Data Control with Page Information from the WebCenter Spaces Repository
This type of information can be represented either in a table or a graph. The following section describes how to add this data control as a graph.
Create a blank task flow and add the data control as a Graph. Select the Pie graph type, and place the METRIC column as slices and the VALUE column as the Pie. The graph is added to the task flow as shown in Figure C-24.
Figure C-24 Page Metrics Displayed as a Pie Graph
You can create a data control to the WebCenter Spaces Web Service and retrieve information about the application and Spaces, for example, list the Spaces in the instance. However, you must first prepare your WebCenter Spaces instance to expose Web Services.
Getting Started
Before you begin with the configurations in this section, you must configure WS-Security for your WebCenter Spaces instance. For the detailed steps, see the "Configuring WS-Security" chapter in Oracle Fusion Middleware Administrator's Guide for Oracle WebCenter. If you create a mashup without configuring WS-Security, an error occurs when retrieving data from the data source.
This section describes the following use cases:
Section C.4.1, "Creating a Mashup to List the Spaces in the Application"
Section C.4.2, "Creating a Mashup with a Form to Rename Spaces"
This section describes how to create a mashup to display a list of Spaces. The Space names are displayed as hyperlinks so that a user can click a link to view the selected Space.
To create a data control and task flow to display the list of Spaces:
Create a Web Service data control, SpacesWS
, (Figure C-25) using a WSDL URL with the appropriate machine name and port number, as shown in the following example:
http://myserver.us.oracle.com:8888/webcenter/SpacesWebService?WSDL
For the detailed steps, see Section 26.2.2.1, "Creating the Data Control."
On the OWSM Security page, apply the following additional policy, as shown in Figure C-26:
oracle/wss11_saml_token_with_message_protection_client_policy
Click Create.
Select the data control, and from the Edit menu, select Show.
Create a blank task flow, Spaces
, to consume the data control.
For the detailed steps, see Section 26.3.1, "Creating a Task Flow."
Edit the Spaces
task flow and add the SpacesWS
data control accessor as a table.
For the detailed steps, see Section 26.4.1.1, "Adding a Data Control as a Table."
To display the Space names as links, on the Columns page in the Create Table dialog, select Hyperlink in the Display As field. Then in the URL field (Figure C-27), specify the URL to which the Space name must be appended so that it opens the Space in a separate window, for example /spaces/#{row.item}
.
The table displays as shown in Figure C-28
This section references the SpacesWS
Web Service data control created in the previous section and describes how to create a form that can be used to rename a given Space.
To create a custom form:
Create a task flow, Rename Space
, using the Blank mashup style.
Edit the task flow and click Add Content.
Drill down to view the SpacesWS
data control, and add the renameGroupSpace
method.
Open the renameGroupSpace
method and add arg1
and arg0
attributes as ADF Input Text w/Label
, as shown in Figure C-29. This step adds two input text fields, where users can specify the old Space name and new Space name.
Save and close the task flow.
Change the labels for the input text fields:
Select the task flow, and from the Edit menu, select Edit Source.
Replace the label
value for the first inputText
component (#{bindings.arg0.hints.label}
) to Old Space Name
.
Replace the label
value for the second inputText
component (#{bindings.arg1.hints.label}
) to New Space Name
.
Click OK.
The task flow now appears as shown in Figure C-30.
In the Resources Manager, select the task flow, and click Show from the Edit menu.
You can now add this task flow to any page and provide the capability to change Space names.
This section describes how to create a mashup with data from a Siebel data source using a Web Service data control. It includes the following sections:
Prerequisites
To create a Web Service data control to the Siebel data source, you must first create an inbound Web Service and generate a WSDL for the service. Refer to the following document for the steps to be performed:
http://st-curriculum.oracle.com/obe/fmw/soa_apps_integ/10g/10_132_siebel/siebel.htm
On the Resource Manager - Data Controls page, create a Web Service data control, CustData
, using the WSDL for the Siebel Web Service.
For the detailed steps, see Section 26.2.2.1, "Creating the Data Control."
This example shows a connection to a Web Service that provides two methods, MyQueryById
and MyInsertOrUpdate
. MyQueryById
takes a complex parameter, MyQueryById_Input
, and MyInsertOrUpdate
takes a parameter, MyInsertOrUpdate_Input
. MyInsertOrUpdate_Input
is an array parameter, which can be used to update multiple records in the table.
Note: The parameter names used in this section are examples only. You can provide parameter names of your choice while creating the Web Service. |
Expose the CustData
data control in the Resource Catalog by selecting Show from the Edit menu.
To consume the CustData
data control in a task flow:
On the Resource Manager - Task Flows page, create a task flow based on the Parameter Form style.
For the detailed steps, see Section 26.3.1, "Creating a Task Flow."
Edit the task flow and click Add Content.
Locate the CustomerData
data control and expand it to view its contents. Open MyQueryById, Return, then ListOfAccountInterface.
Add Account, shown in Figure C-31, as an editable table.
In the Create Table dialog, select the columns to be displayed, as shown in Figure C-32.
On the DC Parameters page of the wizard, from the context menu next to the MyQueryById_Input
field, click Parameter Structure.
In the Parameters dialog, expand the complex parameter to view the PrimaryRowId
parameter, specify the binding for this parameter as #{pageFlowScope.id}
, as shown in Figure C-33, then click OK.
Click Create.
At this point, as the parameter passes a null value, the table displays all available records, as shown in Figure C-34.
As the table is inside a parameter form task flow, you must wire the task flow parameter to the data control parameter. To do this:
From the View menu, select Source.
In Source view, select the inputText
component at the bottom of the page and click Edit on the toolbar.
Change its Value attribute to #{pageFlowScope.id}
, as shown in Figure C-35.
Click OK.
Additionally, delete the commandButton
component with the title GO
.
As an alternative to this button, you will learn how to use one of the Web Service methods to query the data source.
Switch back to Design mode of the page.
As you deleted the GO
button in the parameter form task flow, there is currently no way to query the data source from the task flow. Therefore, the next step is to add a Web Service method to query the data source.
The Siebel Web Service in this example provides the MyQueryById
method, which supports a single parameter, MyQueryById_Input
. Add this method as a button to the task flow. As you already wired the MyQueryById_Input
parameter to the task flow parameter in the previous step, the button is automatically wired to the task flow parameter.
To enable querying using the MyQueryById
method:
Edit the task flow and click Add Content.
In the catalog, locate the CustData
data control and expand it.
Add the MyQueryById method as an ADF Button.
You can now specify an account ID in the parameter field to view details for that account in the table, as shown in Figure C-36.
If a data source allows writing into it, Web Service data controls provide array parameters to update multiple records simultaneously. The Siebel Web Service in this example allows writing back to the data source. It provides the MyInsertorUpdate_Input
parameter, which is a complex parameter that can be used to populate multiple records at a time. This section describes how to use array parameters to update records in the table. Input Text
fields added to the bottom of the page are used to update table columns.
To update records in the table:
Edit the task flow and click Add Content.
In the catalog, locate the CustData
data control and expand it.
Add the MyInsertOrUpdate method as an ADF Button.
Switch to Source view of the page, select the new button, and click Edit to view its properties.
Click the Data tab, and from the context menu on the MyInsertOrUpdate_Input
field, select Parameter Structure.
In the Parameter dialog, expand MyInsertOrUpdate_Input, ListOfAccountInterface, and Account.
The Account
parameter is an array type parameter and therefore displays an Add link.
In each row, define a bind parameter value for each column that you want to update, as shown in Figure C-37. For example, #{pageFlowScope.id1}
and #{pageFlowScope.alias1}
in the first row, and #{pageFlowScope.id2}
and #{pageFlowScope.alias2}
in the second row.
Tip: To delete any of the columns you just added, leave the columns empty. Empty columns are deleted before passing the values back as Web Service parameter values. |
You can update values for two rows, Account[0]
and Account[1]
, by default. Click Add to add more rows.
Click OK in the Parameters dialog, then again in the Component Properties dialog.
Save and close the task flow.
To update values in the table, at the bottom of the page, add one Input Text field for each table cell that you want to update. To do this:
Select the task flow in the Resource Manager and click Edit Source from the Edit menu.
Copy the source code for the parameter form's inputText
component and paste it four times.
Change the id
attribute value so that each ID is unique.
Change the value
attribute to contain the values you defined in the Parameters dialog in step 7, for example, #{pageFlowScope.id1}
.
Figure C-38 shows the source code for the new components.
Optionally, to organize the page components better, group the four inputText
components in a Box component.
The task flow is now wired to write back to the data source. Figure C-39 shows how the task flow appears. The first field is wired to the MyQueryById
button and the remaining fields are used to provide values for the table. The new values are written to the data source when you click the MyInsertOrUpdate
button.
Figure C-39 Task Flow with a Table and Options to Query and Update
This section describes how to create a custom mashup style in the Resource Manager and use that style to create a task flow. The custom style is designed to list the top five page hits in a Space in a layout similar to the WebCenter Spaces Activity Stream layout. An input text field allows users to specify a Space name to view page hits for that Space.
As the Resource Manager does not provide a Create option on the Mashup Styles page, the only way to build a new mashup style is by copying an out-of-the-box mashup style and replacing its source code.
To build the custom mashup style:
Create a copy of the blank mashup style and name it PageHitsStyle
.
Edit the source of PageHitsStyle
and replace the code on the Fragment tab with the following:
<?xml version='1.0' encoding='UTF-8'?> <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:pe="http://xmlns.oracle.com/adf/pageeditor" xmlns:cust="http://xmlns.oracle.com/adf/faces/customizable" xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich"> <af:panelGroupLayout id="pgl1"> <af:panelGroupLayout id="pg2" layout="horizontal" halign="center" inlineStyle="padding-bottom:5px;"> <af:inputText id="ip1" value="#{pageFlowScope.bindVarId}" label="Space Name" shortDesc="Enter A Space Name, by default it's all spaces"/> <af:commandButton text="#{dataComposerBundle.MASHUP_STYLES_GO}" id="cb1"/> </af:panelGroupLayout> <cust:panelCustomizable id="pc1"> <table border="0" width="100%"> <af:iterator id="i1" value="#{dataPresenter.dummyData.collectionModel}" var="row"> <tr class="PortletText1"> <td width="12px"> <af:image id="img1" source="/adf/webcenter/star_sm_ena.png"/> </td> <td> <af:outputText id="otCol1" value="#{empty row.USERNAME ? '#{row.USERNAME}' : row.USERNAME}" inlineStyle="color:#333333; font-size:12px; font-weight:bold;"/> <af:spacer id="spacer1" width="5px"/> <af:outputText id="otCol2" value="viewed" inlineStyle="color:#333333; font-size:12px;"/> <af:spacer id="spacer2" width="5px"/> <af:goLink id="gl1" destination="{doc path pre fix}#{empty row.DOWNLOAD_URL ? '#{row.DOWNLOAD_URL}' : row.DOWNLOAD_URL}" targetFrame="_blank" text="#{empty row.DOCNAME ? '#{row.DOCNAME}' : row.DOCNAME}"/> </td> </tr> <tr> <td/> <td> <af:outputText id="otCol3" value="#{empty row.HITS? '#{row.HITS}' : row.HITS}" inlineStyle="color:#666666; font-size:12px;"/> <af:spacer id="spacer3" width="5px"/> <af:outputText id="otCol4" value="TIMES" inlineStyle="color:#666666; font-size:12px;"/> <af:spacer id="spacer4" width="5px"/> <af:outputText id="otCol5" value="in the last 7 days" inlineStyle="color:#333333; font-size:12px;"/> </td> </tr> <tr> <td/> <td> <af:outputText id="otCol6" value="Last Visit at " inlineStyle="color:#333333; font-size:12px;"/> <af:outputText id="otCol7" value="#{empty row.LASTVIEWED ? '#{row.LASTVIEWED}' : row.LASTVIEWED}" inlineStyle="color:#666666; font-size:12px;"> <af:convertDateTime type="both"/> </af:outputText> </td> </tr> </af:iterator> </table> </cust:panelCustomizable> </af:panelGroupLayout> </jsp:root>
where,
#{pageFlowScope.bindVarId}
is a reference that provides the input Space name
#{dataPresenter.dummyData.collectionModel}
is a dummy reference that gets replaced when you use the mashup style
#{row.
COLUMN
}
are placeholders that will reference data from data controls when the mashup style is used
{
doc path pre fix
}
is the prefix to be used for the document URL. To find the prefix for a document path, select a document on the Documents page and click Get a Link
from the View menu. The first part of the Download URL (ending in path
) is the prefix to be used. For example, http://my.company.com:8889/webcenter/content/conn/xyz18-ucm11g/path
.
If you preview the mashup style, it displays as shown in Figure C-40.
You can use this mashup style to build mashups that display page hits.
This section describes how to use the PageHits
mashup style to create a mashup that displays page hits in an Activity Stream layout. To illustrate this, you must create a SQL data control using the ActivitiesDS
database connection, then consume the data control in a task flow based on the PageHits
mashup style. However, to display the data from the data control in an Activity Stream layout instead of the typical table or graph layout, you must perform the following tasks:
Create a SQL data control.
Create a task flow based on the new PageHits
mashup style.
Add the data control as a table.
Copy the data control's accessor ID from the table's properties.
Hide the table.
Wire the input text field in the task flow to the data control using the accessor ID.
To use the custom mashup style:
Creare a SQL data control, Top Five Viewed Documents in a Given Space
, using the ActivitiesDS
connection. Specify the following query:
SELECT * FROM (SELECT users.userid username, doc.name_ docname,doc.path_ download_url, count(1) hits,max(fact.occurred) lastviewed FROM asfact_wc_doclib__0 fact , asdim_wc_documen_0 doc , asdim_wc_applica_0 app,asdim_wc_groupsp_0 space , asdim_users users WHERE app.id = fact.application_ AND app.name_ = 'webcenter' AND fact.occurred BETWEEN (SYSDATE-7) AND SYSDATE AND fact.document_ = doc.id AND doc.name_ is not null AND doc.id is not null AND fact.document_ is not null AND doc.resourceid_ is not null AND fact.GROUPSPACE_ = space.id AND upper(space.name_) LIKE upper(:spacename) AND space.name_ IS NOT NULL AND fact.userid=users.id GROUP BY users.userid, doc.name_,doc.path_ ORDER BY hits DESC) WHERE rownum <= 5 ORDER BY rownum
Set the spacename
bind parameter value to Home Space
.
Select the data control in the Resources Manager and click Show on the Edit menu.
Create a task flow, Top Five Viewed Documents in a Given Space
, using the PageHits
mashup style, as shown in Figure C-41.
Edit the task flow and add the data control as a table, as shown in Figure C-42.
Create a read-only table, and accept the defaults on Items and Columns pages of the Create Table dialog.
On the DC Parameters page, specify the following as the parameter value for spacename
:
#{empty pageFlowScope.bindVarId ? '%' : pageFlowScope.bindVarId}
To get the accessor ID:
Switch to Source view of the task flow, and select the Table component.
Click Edit to view the table's properties.
In the Component Properties dialog, copy the value of the Value
attribute. This is the accessor ID for the data control. The value may be as shown in the following example:
#{bindings.accessor_gsraffebf20_b500_480f_bf92_a9d33922a0a7.collectionModel}
Select the showDetailFrame component wrapping the table and click Hide on the context menu.
Right-click the iterator component, and click Edit.
Replace the value in the Value
attribute with the accessor ID you copied from the table's properties.
You now have a task flow with the Activity Stream-like seeded layout.
Save the task flow and exit Oracle Composer.
In the Resources Manager, select the task flow and click Show on the Edit menu.
Consume the task flow in a page. It appears as shown in Figure C-43.
This section describes how to create a custom mashup style with fields to specify a date range and a content area to display a visualization of data for the specified date range. Figure C-44 shows a task flow created using such a mashup style. This section also describes how to create a task flow using the custom style.
As the Resource Manager does not provide a Create option on the Mashup Styles page, the only way to build a new mashup style is by copying an out-of-the-box mashup style and replacing its source code.
To build the custom mashup style:
Create a copy of the blank mashup style and name it Input Dates
.
Edit the source of Input Dates
and replace the code on the Fragment tab with the following:
<?xml version='1.0' encoding='UTF-8'?> <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:pe="http://xmlns.oracle.com/adf/pageeditor" xmlns:cust="http://xmlns.oracle.com/adf/faces/customizable" xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich"> <af:panelGroupLayout id="pgl"> <af:panelGroupLayout id="pg2" layout="horizontal" halign="center" inlineStyle="padding-bottom:5px;"> <af:panelFormLayout id="pfl1" partialTriggers="ipl" inlineStyle="padding-bottom:5px;"> <af:inputDate id="ip1" value="#{pageFlowScope.bindVarId1}" label="Start Date" autoSubmit="true"/> <af:inputDate id="ip2" value="#{pageFlowScope.bindVarId2}" label="End Date"/> <af:commandButton text="#{dataComposerBundle.MASHUP_STYLES_GO}" id="cb1"/> </af:panelFormLayout> </af:panelGroupLayout> <cust:panelCustomizable id="pc1" halign="center"/> </af:panelGroupLayout> </jsp:root>
The inputDate
components provide the two date fields, and the panelCustomizable
provides the content area. When previewed, the mashup style appears as shown in Figure C-45.
You can use this mashup style to build a mashup and populate the content area with a visualization of your choice.
This section describes how to use the Input Dates
mashup style to create a mashup that displays a graph of the page hits for a specified date range. To illustrate this, you must create a SQL data control using the ActivitiesDS
database connection, then consume the data control in a task flow based on the Input Dates
mashup style.
To use the custom mashup style:
Creare a SQL data control, Page Usage Between Two Dates
, using the ActivitiesDS
connection. Specify the following query:
SELECT page.name_ pageName, space.name_ spaceName, COUNT(1) hits FROM asdim_users u, asdim_wc_pages_0 page, asdim_wc_applica_0 app, asdim_wc_groupsp_0 space, asfact_wc_pagevie_0 fact WHERE app.name_ = 'webcenter' AND fact.page_ = page.id AND fact.userid = u.id AND fact.application_ = app.id AND fact.groupspace_ = space.id AND fact.occurred BETWEEN to_timestamp_tz(to_char(:startdate), :dateformat) AND to_timestamp_tz(to_char(:enddate), :dateformat) AND space.name_ IS NOT NULL AND page.name_ IS NOT NULL AND space.id IS NOT NULL AND page.id IS NOT NULL AND fact.page_ IS NOT NULL AND page.resourceid_ IS NOT NULL GROUP BY page.name_, space.name_
The data control is created with the bind variables startdate
, dateformat
, and enddate
.
Set the bind parameter values as required, for example, to query the usage of all pages in the year 2010, as shown in Figure C-46.
Test the query and view the data retrieved from the data source, as shown in Figure C-47.
Select the data control in the Resources Manager and click Show on the Edit menu.
Create a task flow, Page Usage Between Two Dates
, using the Input Dates
mashup style, as shown in Figure C-48.
Edit the task flow and add the data control as a graph (Figure C-49).
In the Create Graph dialog, on the Type page, choose Bar.
On the Placement page, place PAGENAME
and SPACENAME
on the X Axis, and HITS
as the Bars.
On the DC Parameters page, specify the following values for the bind parameters:
startdate
:
#{empty pageFlowScope.bindVarId1 ? '01' : pageFlowScope.bindVarId1.month+1}/#{empty pageFlowScope.bindVarId1 ? '01' : pageFlowScope.bindVarId1.date}/#{empty pageFlowScope.bindVarId1 ? '2010' : pageFlowScope.bindVarId1.year+1900}
(01/01/2010
is set as the default initial start date value if no date selected)
dateformat
: MM/DD/YYYY
enddate
:
#{empty pageFlowScope.bindVarId2 ? '01' : pageFlowScope.bindVarId2.month+1}/#{empty pageFlowScope.bindVarId2 ? '01' : pageFlowScope.bindVarId2.date}/#{empty pageFlowScope.bindVarId2 ? '2011' : pageFlowScope.bindVarId2.year+1900}
(01/01/2011
is set as the default initial end date value if no date selected)
Create the graph, save the task flow, then exit Oracle Composer.
In the Resources Manager, select the task flow and click Show on the Edit menu.
Consume the task flow in a page. It appears as shown in Figure C-50.
This section describes how to create a sample page that contains a navigation tree and a mashup wired in such a way that clicking a Space name displays the page hits for that Space in the graph, as shown in Figure C-51.
The steps to build such a mashup include:
If you have configured WebCenter Services in your application, an Analytics service connection, ActivitiesDS
, is available out-of-the-box. You can use this connection to create a SQL data control. This section describes how to create a data control to view the top five page hits for the last 7 days for a given Space.
To create the data control:
See Also: Section 26.2.1.2, "Creating the Data Control" for the detailed steps to create a data control. |
Use the ActivitiesDS
connection and create a SQL data control named PageHits
.
Specify the following SQL query:
SELECT * FROM
(SELECT page.name_ pageName, space.name_ spaceName, COUNT(1) hits
FROM asdim_users u, asdim_wc_pages_0 page, asdim_wc_applica_0 app, asdim_wc_groupsp_0 space, asfact_wc_pagevie_0 fact
WHERE fact.page_ = page.id AND fact.userid = u.id AND fact.application_ = app.id
AND fact.groupspace_ = space.id AND fact.occurred BETWEEN(SYSDATE-6) AND (SYSDATE+1) AND app.name_ = 'webcenter'
AND u.userid <> 'anonymous' AND upper(space.name_) LIKE upper(:spacename) AND space.name_ IS NOT NULL
AND page.name_ IS NOT NULL AND space.id IS NOT NULL AND page.id IS NOT NULL
AND fact.page_ IS NOT NULL AND page.resourceid_ IS NOT NULL
GROUP BY page.name_, space.name_ ORDER BY hits DESC)
WHERE rownum <= 5 ORDER BY rownum
The data control is created with the spacename
bind variable.
Set the spacename
bind variable to Home space
.
Test the query and view the data retrieved from the data source, as shown in Figure C-52.
Select the data control in the Resource Manager and click Show on the Edit menu.
This section describes how to create a navigation tree to list the available Spaces, consume it in a JSPX page, then add the page hits data control to the page.
To create a page with a navigation and page hits graph:
Create a page, Top Five Page Views for Given Space Within Past Week
, using the Left Narrow page style.
The new page opens in Oracle Composer.
Click Page Properties and create a new page parameter, space
, with the following value (Figure C-53):
#{empty navigationContext.currentNavigationModel.currentSelection.parameters.space ? '
Space_Name
' : navigationContext.currentNavigationModel.currentSelection.parameters.space}
Replace Space_Name
with sample1
or the name of any other Space for which you want to display details by default.
Figure C-53 Page Properties Dialog with new Parameter
Click OK.
Add the PageHits
data control accessor as a graph, as shown in Figure C-54.
In the Create Graph dialog, on the Type page, choose Bar.
On the Placement page, place PAGENAME
and SPACENAME
on the X Axis, and HITS
as the Bars.
On the DC Parameters page, wire the data control parameter, spacename
, to the page parameter, space
, as follows:
#{empty bindings.space ? 'sample1' : bindings.space}
In the Resource Manager, create a navigation model called Spaces Navigation
with three Link navigation items, Sample1
, Sample2
, and Sample3
, as shown in Figure C-55.
Select Sample1
and click Edit.
In the Edit Navigation Item dialog, specify the path to the Top Five Page Views for Given Space Within Past Week
page, as shown in Figure C-56.
Click the Parameters tab and specify the space
parameter value to be Sample1
.
Similarly, edit the Sample2
and Sample3
links in the navigation model by repeating the previous three steps.
In these steps, you are wiring the same task flow to the three links in the navigation, but by specifying different Space names for each link.
Click OK to close the navigation editor.
Select Spaces Navigation
in the Resource Manager and click Show on the Edit menu.
Edit the Five Page Views for Given Space Within Past Week
page and add a Navigation Tree component in the left column of the page.
A default navigation displays on the left of the page.
Click the Edit icon on the default navigation, as shown in Figure C-57.
On the Parameters tab, specify Spaces Navigation
in the Navigation field, as shown in Figure C-58, then click OK.
The new navigation model now displays on the left side of the page, as shown in Figure C-59.
Click Save and Close to exit page edit mode.
When you view the page, it displays the navigation tree and the graph as shown in Figure C-60.
Click a different Space in the navigation to view the page hits graph for that Space, as shown in Figure C-61.
The previous example described how to create a graph of page hits for a given Space and wire it to a page containing a navigation tree. Taking this one step further, this section describes how to wire the page hits graph to the navigation tree inherited from a page template.
The steps to build such a mashup include:
Section C.9.3, "Creating and Applying a Custom Page Template"
Section C.9.4, "Testing the Wiring Between the Page Hits Graph and the Inherited Navigation"
Perform the steps in Section C.8.1, "Creating the Page Hits Data Control."
This section describes how to consume the data control in a task flow, then consume the task flow in a page that displays the inherited navigation tree.
To consume the data control:
Create a task flow, Top Five Page Views for Given Space Within Past Week
, using the Blank mashup style.
Add the PageHits
data control accessor as a graph.
In the Create Graph dialog, on the Type page, choose Bar.
On the Placement page, place PAGENAME
and SPACENAME
on the X Axis, and HITS
as the Bars.
On the DC Parameters page, set the data control parameter, spacename
, to the following:
#{empty pageFlowScope.spacename ? 'home space' : pageFlowScope.spacename}
Click Create.
Click Task Flow Properties and create a string parameter, spacename
, in pageFlowScope
, as shown in Figure C-62.
Click Save and Close to exit edit mode.
Select the task flow in the Resource Manager and click Show on the Edit menu.
Create a page, Sample8b
, and add the new task flow inside the page.
This ensures that the task flow displays the page hits graph for the Home Space by default.
This section describes how to create a custom navigation component and a page template containing a navigation tree, and how to apply the new page template.
To create a custom navigation component:
In the Resource Manager, create a navigation model called Spaces Navigation
with three Link navigation items, Sample1
, Sample2
, and Sample3
, as shown in Figure C-63.
Select Sample1
and click Edit.
In the Edit Navigation Item dialog, specify the path to the Top Five Page Views for Given Space Within Past Week
page, as shown in Figure C-64.
Click the Parameters tab and specify the space
parameter value to be Sample1
.
Similarly, edit the Sample2
and Sample3
links in the navigation model by repeating the previous three steps.
In these steps, you are wiring the same task flow to the three links in the navigation, but by specifying different Space names for each link.
Click OK to close the navigation editor.
Select Spaces Navigation
in the Resource Manager and click Show on the Edit menu.
To create and apply a custom page template:
Create a custom page template, Sample Template
, based on the out-of-the-box Side Navigation – Flow template.
Add a Navigation Tree component to the template.
A default navigation displays on the left of the page.
Click the Edit icon on the default navigation, as shown in Figure C-65.
On the Parameters tab, specify Spaces Navigation
in the Navigation field, then click OK.
The new navigation model now displays on the left side of the template, as shown in Figure C-66.
Click Save and Close to exit page edit mode.
Select the new template in the Resource Manager and click Show on the Edit menu.
Navigate to the Spaces administration page, then click the Configuration tab.
On the General page, in the Default Page Template field, select the new sample template that you created (Figure C-67), then click Apply.
The navigation tree in the template now displays on all application pages.
To verify that the graph is wired to the navigation correctly:
Open the page, Sample8b
.
It displays the navigation tree and the page hits graph for the home Space, as shown in Figure C-68.
Click a different Space in the navigation to view the page hits graph for that Space, as shown in Figure C-69.
This section describes how to create a mashup that displays two task flows wired in a master-detail relationship so that a selection in the master task flow results in an update to the Google Map address in the details task flow, as shown in Figure C-70.
The steps to create a similar mashup include:
Creating a SQL data control to retrieve static data for the purpose of the demo.
Creating a master task flow that consumes this data control as a static table.
Adding hyperlinks in the user names column in the table.
Creating a details task flow to integrate the latest Google Maps API Version 3.
Wiring the master and detail task flows so that clicking a record in the master table results in a location change in the Google Map.
This section describes how to perform these tasks. It includes the following subsections:
For the purpose of this example, create a data control to get address data using select * from dual
statements. You can use any existing data source connection to create the data control. In real time, you must replace it with the required SQL data source connection. To create the data control:
Create a SQL data control, addresses, using any available database connection, and specify the following query:
SELECT 'Steve' Buddy, 'Palo Alto' City, 'CA' State FROM dual UNION SELECT 'Doris' Buddy, 'Belmont' City, 'CA' State FROM dual UNION SELECT 'John' Buddy, 'New York' City, 'NY' State FROM dual UNION SELECT 'Lily' Buddy, 'Boston' City, 'MA' State FROM dual
Select the new data control in the Resource Manager, and from the Edit menu, click Show.
This section describes how to create a details task flow that will display the Google map.
To create the details task flow:
Create a task flow, Basic Maps
, based on the Blank mashup style.
Select the task flow and click Edit Source on the Edit menu.
Replace the code on the Fragment tab with the following:
<?xml version='1.0' encoding='UTF-8'?> <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:pe="http://xmlns.oracle.com/adf/pageeditor" xmlns:cust="http://xmlns.oracle.com/adf/faces/customizable" xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich" xmlns:trh="http://myfaces.apache.org/trinidad/html"> <af:resource type="javascript" source="http://maps.google.com/maps/api/js?sensor=true"/> <af:resource type="javascript"> var geocoder; var map; function initialize(){ geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(37.529526, -122.263969); var myOptions = { zoom: 3, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); } function navigate(event) { initialize(); var city= event.getSource().getProperty('city')+""; var state= event.getSource().getProperty('state')+""; var address; if(city== "undefined"||state== "undefined"||city== "NULL"||state== "NULL"){ address="CA, USA"; } else { map.setZoom(8); address=city+" "+state+" USA"; } geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("Geocode was not successful for the following reason: " + status); } }); } </af:resource> <af:panelGroupLayout id="pgl1"> <af:group id="g1"> <div id="map_canvas" style="width: 600px; height: 600px"/> </af:group> <af:inlineFrame source=""> <af:clientListener type="inlineFrameLoad" method="navigate"/> <af:clientAttribute name="city" value="#{empty pageFlowScope.city? '' : pageFlowScope.city}"/> <af:clientAttribute name="state" value="#{empty pageFlowScope.state ? '' : pageFlowScope.state}"/> </af:inlineFrame> </af:panelGroupLayout> </jsp:root>
The code in bold, <af:inline>
, calls the navigate
Google Map javascript method each time the page is loaded, and it parses two pageFlowScope
parameters to the navigate
method to update the address on the map.
Click OK to exit the source editor.
Ensure that the task flow is selected in the Resource Manager and click Edit on the Edit menu.
Click Task Flow Properties and create two string task flow parameters, city
and state
, in pageFlowScope
, as shown in Figure C-71.
This section describes how to create the master task flow to consume the addresses
data control as a table and the Basic Maps
task flow.To create the master task flow:
Create a task flow, Address on Google Maps
, based on the Blank mashup style.
Edit the task flow and add the Basic Maps
task flow, as shown in Figure C-72.
Add the Address on Google Maps
data control accessor as a read-only table with row selection enabled.
The master task flow displays the addresses table on top and the map below it, as shown in Figure C-73.
This section describes how to wire the master and details task flows so that a user can click a name in the table to show the corresponding location in the map.To wire the master and details task flows:
Click the Edit icon on the Basic Maps
task flow.
In the Component Properties dialog, modify the values for the two task flow parameters, city
and state
, as follows:
city: #{empty dataComposerViewContext.dataSelection.CITY ? 'NULL' : dataComposerViewContext.dataSelection.CITY}
state: #{empty dataComposerViewContext.dataSelection.CITY ? 'NULL' : dataComposerViewContext.dataSelection.CITY}
To hide the header on the map, click the Display Options tab and clear the Display Header checkbox.
Click the Advanced link on the Display Options tab, then set Stretch Content to Auto
.
This ensures that the map displays a scroll bar only when required.
Click OK to save your changes.
The map displays the location corresponding to the currently selected name in the table.
Click Save and Close to exit edit mode.
The task flow displays as shown in Figure C-74.
Optionally, you can change the layout of the task flow so that the table displays to the left of the map. To refine the layout of the master task flow:
1.Edit the source of the master task flow, and on the Fragment tab, replace the following lines:
<af:panelGroupLayout id="pgl1"> <cust:panelCustomizable id="pc1">
with
<af:panelGroupLayout id="pgl1" layout="horizontal" valign="top"> <cust:panelCustomizable id="pc1" layout="vertical" valign="top">
Move the end tag of </cust:panelCustomizable>
to the right, after the first </showDetailFrame>
tag and before the second <showDetailFrame>
tag.
To disable default selection in the table, remove the selectedRowKeys
attribute on the <table>
tag.
To ensure that the map stretches when required, change the columnStretching
attribute to last
.
To test the master-detail task flow further, create a page and add the Address on Google Maps
task flow to it.
Edit the task flow on the page and set the Stretch Content option to auto
.
Note: To ensure that the page reflects your recent changes, you may need to directly use the URL to open the page afresh, as against clicking the Refresh button. |
The task flow displays as shown in Figure C-75.
Click a name in the table; the map points the location corresponding to that name.
This section describes how to create a mashup with an OmniPortlet instance that displays live, scrolling news information to users from a Really Simple Syndication (RSS) news feed, such as Oracle Technology Network Headlines. It also describes how to share the portlet across WebCenter Spaces instances.
Registering the Producer
To consume an OmniPortlet in a task flow, you must first register the portlet producer with the application. For the detailed steps, see Section 6.5, "Registering Portlet Producers."
To create a mashup with an Omniportlet instance:
Create a new task flow based on the Blank mashup style.
Add the Omniportlet to the task flow from the Resource Catalog, shown in Figure C-76.
Click the Customize icon on the top right corner of the portlet header, shown in Figure C-77.
On the Type page of the OmniPortlet wizard, shown in Figure C-78, choose XML as the data source type, then click Next.
On the Source page, specify the XML URL and the XSL Filter URL to be the following, as shown in Figure C-79:
XML URL: http://www.oracle.com/technology/syndication/rss_otn_news.xml
XSL Filter URL: http://www.oracle.com/technology/products/ias/portal/viewlets/omniportletnews.xsl
In the Portlet Parameters section, define a new parameter, Display Num
, as shown in Figure C-80, then click Next.
On the Filter page, shown in Figure C-81, set the filter limit to ##Param1##
, then click Next.
On the View page, in the Layout Style section, select News, as shown in Figure C-82.
Figure C-82 Layout Style Section on the View Page of the OmniPortlet Wizard
On the Layout page, under the Column Layout section, use two fields to specify a title and description as shown in Figure C-83.
Click Finish to exit the wizard.
Click Save and Close to exit Oracle Composer.
Select the new task flow in the Resource Manager, and from the Edit menu, click Show.
To verify that the portlet in the task flow renders correctly:
Preview the task flow or consume it in an application page.
The portlet displays ten news items.
Click the Personalize icon, shown in Figure C-84, on the top right corner of the task flow.
In the resulting screen, shown in Figure C-85, change the value of the Display Num
variable to a number of your choice.
The portlet displays the specified number of news items.
You can share the task flow containing the portlet with another WebCenter Spaces instance by exporting it from your instance and importing it in that instance. However, the imported task flow renders the portlet only if the producer for the OmniPortlet is registered with the same name on the other instance also.
To share the task flow with another WebCenter Spaces instance:
On the target instance, register the OmniPortlet producer with the same name that was used for the producer registration on your instance.
For the detailed steps, see Section 6.5, "Registering Portlet Producers."
Export the task flow from the Resource Manager on the source instance.
For the detailed steps, see Section 10.5.2, "Downloading a Resource."
Import the task flow in the Resource Manager of the target instance. For the detailed steps, see Section 10.5.3, "Uploading a Resource."
The portlet is now available with all customizations made on the source instance.