Skip Headers
Oracle® Fusion Middleware User's Guide for Oracle WebCenter Spaces
11g Release 1 (11.1.1.5.0)

Part Number E10149-08
Go to Documentation Home
Home
Go to Book List
Book List
Go to Table of Contents
Contents
Go to Index
Index
Go to Feedback page
Contact Us

Go to previous page
Previous
Go to next page
Next
View PDF

C Business Mashup Examples

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:

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.

C.1 Creating Mashups with Data from the Analytics Service

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:

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.

C.1.1 Creating a Graph to Display Page Hits

To create a graph that displays statistics for pages in your application:

  1. 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."

  2. Expose the data control in the Resource Catalog by selecting Show from the Edit menu.

  3. Create a task flow, Page Hits, based on the blank mashup style.

    For detailed steps, see Section 26.3.1, "Creating a Task Flow."

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

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

    Figure C-1 Bar Graph Displaying Page Hits

    Bar Graph Displaying Page Hit Statistics

C.1.2 Using a Parameterized Task Flow to Display a Graph of Page Hits in a Space

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:

C.1.2.1 Creating the Page Hits Data Control

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.
  1. Use the ActivitiesDS connection and create a SQL data control named PageHits.

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

  3. Set the spacename bind variable to Home space.

  4. Test the query and view the data retrieved from the data source, as shown in Figure C-2.

    Figure C-2 SQL Data Control Query Test Result

    SQL data control query test result

C.1.2.2 Creating a Custom Mashup Style with a Parameter to Specify the Space Name

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:

  1. Copy an existing mashup style in the Resource Manager and name it Input Space Name.

  2. 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>
    
  3. 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."

C.1.2.3 Creating a Task Flow Using the Custom Mashup Style

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.

Figure C-3 Create New Task Flow Dialog Displaying the New Mashup Style

New mashup style displayed in the Create dialog

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.

C.1.2.4 Consuming the Data Control in the Task Flow

To add the page hits data control to the new task flow:

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

    Figure C-4 Graph Option on the PageHits Data Control Accessor

    Graph option on the PageHits data conrtol accessor
  2. In the Create Graph dialog, on the Type page, choose Bar.

  3. On the Placement page, place PAGENAME and SPACENAME on the X Axis, and HITS as the Bars.

  4. On the DC Parameters page, specify the following value for the spacename parameter:

    #{empty pageFlowScope.bindVarId ? 'home space' : pageFlowScope.bindVarId}

C.1.2.5 Testing the Parameter Wiring in the Task Flow

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:

  1. Create a test page and add the task flow from the Add Content dialog.

  2. To ensure that the graph displays properly on the page:

    1. Edit the task flow.

    2. In the Component Properties dialog, on the Basic page of the Display Options tab, deselect the Allow Resize option.

    3. On the Advanced page of the Display Options tab, set Stretch Content to Auto.

  3. Specify a different Space name in the input text field. The graph displays data specific to that Space, as shown in Figure C-5.

    Figure C-5 Bar Graph Displaying Page Hits for a Given Space

    Graph Displaying Page Hits for a Space

C.1.3 Creating a Graph to View Portal Site Traffic

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:

  1. 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."

  2. Expose the data control in the Resource Catalog by selecting Show from the Edit menu.

  3. Create a task flow, Portal Traffic, based on the blank mashup style.

    For detailed steps, see Section 26.3.1, "Creating a Task Flow."

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

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

    Figure C-6 Graph Displaying Portal Traffic Statistics

    Graph displaying portal traffic statistics

C.1.4 Creating a Mashup with Two Task Flows in a Master-Detail Relationship

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.

C.1.4.1 Creating the Master Data Control and Task Flow

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:

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

  2. Select the new data control, and from the Edit menu, click Show.

  3. 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."

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

    Figure C-7 Display Columns as Hyperlinks

    Options to display columns as hyperlinks

    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.

    Figure C-8 Master Task Flow Displaying Top Page Hits

    Task flow displaying a table with the top page hits
  5. Select the new task flow, and from the Edit menu, click Show.

C.1.4.2 Creating the Details Data Control and Task Flow

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:

  1. 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."

  2. Select the new data control, and from the Edit menu, click Show.

  3. 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."

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

    Figure C-9 Bar Graph Displaying Page Hits for a Selected User

    Bar Graph Displaying Page Hits for a User
  5. Create a task flow parameter called userid, and set its value to the pageFlowScope, as shown in Figure C-10.

    Figure C-10 Parameter Defined on the Details Task Flow

    Parameter Defined on the Details Task Flow
  6. Select the new task flow, and from the Edit menu, click Show.

C.1.4.3 Wiring the Master and Details Task Flows

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:

  1. 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>
    
  2. 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>
    
  3. 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.

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

    Figure C-11 Master-Detail Relationship Between Two Task Flows

    Master table in background and details graph in foreground

C.1.5 Creating a Table with Hyperlinks to Download Documents

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:

C.1.5.1 Creating the Document Views Data Control

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.

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

  2. Set the spacename bind variable to Home space.

  3. Test the query and view the data retrieved from the data source, as shown in Figure C-12.

    Figure C-12 New Data Control Query Test Results

    Query test results for the new data control

C.1.5.2 Creating a Custom Mashup Style with a Parameter to Specify the Space Name

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:

  1. Copy an existing mashup style in the Resource Manager and name it Input Space.

  2. 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>
    
  3. Select the mashup style in the Resource Manager, and from the Edit menu, click Show.

C.1.5.3 Creating a Task Flow Using the Custom Mashup Style

To create a task flow using the custom style:

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

    Figure C-13 New Mashup Style in the Create New Task Flow Dialog

    New mashup style in the Create New Task Flow dialog
  2. Select the task flow in the Resource Manager, and from the Edit menu, click Show.

C.1.5.4 Consuming the Data Control in the Task Flow

To consume the page hits data control in the new task flow:

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

    Figure C-14 Table Option on the Data Control Accessor

    Option to drop the data control accessor as a table

    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.

    Figure C-15 Items Page of the Create Table Dialog

    DOWNLOAD_URL item not selected in the Create Table dialog

    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.

    Figure C-16 Name Column Defined as a Hyperlink

    Name column defined as a hyperlink
  2. 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.

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

    Figure C-17 Component Properties Dialog for the Table

    Column Stretching property
  4. To ensure that the table displays properly on the page:

    1. Edit the task flow.

    2. In the Component Properties dialog, on the Basic page of the Display Options tab, deselect the Allow Resize option.

    3. On the Advanced page of the Display Options tab, set Stretch Content to Auto.

C.1.5.5 Testing the Parameter Wiring in the Task Flow

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:

  1. Create a test page and add the task flow from the Resource Catalog.

    The task flow displays the table.

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

    Figure C-18 Table with Hyperlinked Document Names

    Table with hyperlinked document names

C.2 Creating a Mashup that Displays Employee Data from SQL Data Control

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:

C.2.1 Creating the SQL Data Control

Perform the following tasks to create a data control for the employee database:

  1. Create a connection to the employee database. For the detailed steps, see Section 26.2.1.1, "Creating a Database Connection."

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

  3. 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."

C.2.2 Adding the Data Control and Binding Task Flow Parameters to Data Control Parameters

Perform the following steps to add the data control as a table:

  1. Edit the Employee Details task flow in Oracle Composer.

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

    Employee Details Data Control Accessor
    Description of "Figure C-19 Employee Details Data Control Accessor"

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

    Table in the Employee Details Task Flow
    Description of "Figure C-20 Table in the Employee Details Task Flow"

  4. Create a task flow parameter, designation.

    For the detailed steps, see Section 26.4.2, "Creating Task Flow Parameters."

  5. 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."

  6. 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."

  7. Edit the Employee Details task flow on the page, and on the Parameters tab, specify a designation to view corresponding details in the table.

C.2.3 Showing a Hidden Column 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:

  1. On the Resource Manager - Task Flows page, select the Employee Details task flow.

  2. 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>
    
  3. 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

    Table Displaying Four Columns
    Description of "Figure C-21 Table Displaying Four Columns"

Similarly, you can hide a visible column by setting its rendered attribute to false.

C.2.4 Adding the Data Control in a Parameter Form Task Flow

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:

  1. Create a task flow based on the Parameter Form mashup style.

    For the detailed steps, see Section 26.3.1, "Creating a Task Flow."

  2. 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."

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

Data Control in a Parameter Form Task Flow
Description of "Figure C-22 Data Control in a Parameter Form Task Flow"

C.3 Creating a Mashup with Data from the WebCenter Spaces MDS Repository

WebCenter Spaces applications are seeded with the following repository connections:

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:

C.3.1 Creating the Data Control

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

Page Information from WebCenter Spaces Repository
Description of "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.

C.3.2 Adding the Data Control as a Graph Inside a Task Flow

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

Page Metrics Displayed as a Pie Graph
Description of "Figure C-24 Page Metrics Displayed as a Pie Graph"

C.4 Creating a Mashup with Data from a WebCenter Spaces Web Service Data Source

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:

C.4.1 Creating a Mashup to List the Spaces in the Application

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:

  1. 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."

    Figure C-25 WebCenter Spaces Web Service Data Control

    WebCenter Spaces Web Service Data Control - WSDL Page
  2. 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
    

    Figure C-26 WebCenter Spaces Web Service Data Control - OWSM Security

    WebCenter Spaces Web Service Data Control - Security Page
  3. Click Create.

  4. Select the data control, and from the Edit menu, select Show.

  5. Create a blank task flow, Spaces, to consume the data control.

    For the detailed steps, see Section 26.3.1, "Creating a Task Flow."

  6. 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}.

    Figure C-27 Hyperlink Option on the Table Create - Columns Page

    Hyperlink Option on Table Create - Columns Page

    The table displays as shown in Figure C-28

    Figure C-28 Mashup Displaying a List of Spaces

    Table displaying one column with list of Spaces

C.4.2 Creating a Mashup with a Form to Rename Spaces

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:

  1. Create a task flow, Rename Space, using the Blank mashup style.

  2. Edit the task flow and click Add Content.

  3. Drill down to view the SpacesWS data control, and add the renameGroupSpace method.

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

    Figure C-29 Options to Add renameGroupSpace Attributes

    Options to Add renameGroupSpace Attributes
  5. Save and close the task flow.

  6. Change the labels for the input text fields:

    1. Select the task flow, and from the Edit menu, select Edit Source.

    2. Replace the label value for the first inputText component (#{bindings.arg0.hints.label}) to Old Space Name.

    3. Replace the label value for the second inputText component (#{bindings.arg1.hints.label}) to New Space Name.

    4. Click OK.

    The task flow now appears as shown in Figure C-30.

    Figure C-30 Task Flow to Change a Space Name

    Task flow with two fields and a rename button
  7. 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.

C.5 Creating a Mashup with Data from a Siebel Data Source

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

C.5.1 Creating a Web Service Data Control

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.

C.5.2 Adding a Data Control Method as a Table to a Task Flow

To consume the CustData data control in a task flow:

  1. 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."

  2. Edit the task flow and click Add Content.

  3. Locate the CustomerData data control and expand it to view its contents. Open MyQueryById, Return, then ListOfAccountInterface.

  4. Add Account, shown in Figure C-31, as an editable table.

    Figure C-31 Table Option on the Account Method

    Table Option on the Account Method
  5. In the Create Table dialog, select the columns to be displayed, as shown in Figure C-32.

    Figure C-32 Items Page in the Create Table Dialog

    Items Page in the Create Table Dialog
  6. On the DC Parameters page of the wizard, from the context menu next to the MyQueryById_Input field, click Parameter Structure.

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

    Figure C-33 Parameters Dialog

    Parameters Dialog
  8. Click Create.

    At this point, as the parameter passes a null value, the table displays all available records, as shown in Figure C-34.

    Figure C-34 Table Inside a Parameter Form Task Flow

    Table Inside a Parameter Form Task Flow
  9. 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:

    1. From the View menu, select Source.

    2. In Source view, select the inputText component at the bottom of the page and click Edit on the toolbar.

    3. Change its Value attribute to #{pageFlowScope.id}, as shown in Figure C-35.

      Figure C-35 Component Properties Dialog for Input Text Field

      Component Properties Dialog for Input Text
    4. Click OK.

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

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

C.5.3 Querying 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:

  1. Edit the task flow and click Add Content.

  2. In the catalog, locate the CustData data control and expand it.

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

    Figure C-36 Table and Query Button inside the Parameter Form Task Flow

    Table and Query Button inside Task Flow

C.5.4 Updating Data Source Records

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:

  1. Edit the task flow and click Add Content.

  2. In the catalog, locate the CustData data control and expand it.

  3. Add the MyInsertOrUpdate method as an ADF Button.

  4. Switch to Source view of the page, select the new button, and click Edit to view its properties.

  5. Click the Data tab, and from the context menu on the MyInsertOrUpdate_Input field, select Parameter Structure.

  6. In the Parameter dialog, expand MyInsertOrUpdate_Input, ListOfAccountInterface, and Account.

    The Account parameter is an array type parameter and therefore displays an Add link.

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

    Figure C-37 Array Parameter Definition in the Parameter Dialog

    Array Parameter Definition in the Parameter Dialog
  8. You can update values for two rows, Account[0] and Account[1], by default. Click Add to add more rows.

  9. Click OK in the Parameters dialog, then again in the Component Properties dialog.

  10. Save and close the task flow.

  11. 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:

    1. Select the task flow in the Resource Manager and click Edit Source from the Edit menu.

    2. Copy the source code for the parameter form's inputText component and paste it four times.

    3. Change the id attribute value so that each ID is unique.

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

      Figure C-38 Source Code of the New Input Text Components

      Source Code of Input Text Components
  12. 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

    Table with query and update options
    Description of "Figure C-39 Task Flow with a Table and Options to Query and Update"

C.6 Building and Using a Custom Mashup Style with Predefined Columns

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.

C.6.1 Building the Custom Mashup 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:

  1. Create a copy of the blank mashup style and name it PageHitsStyle.

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

    Figure C-40 Preview of the Custom Mashup Style

    Mashup Style using Activity Stream format

You can use this mashup style to build mashups that display page hits.

C.6.2 Creating a Task Flow Based on the Custom Style

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:

  1. 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 
    
  2. Set the spacename bind parameter value to Home Space.

  3. Select the data control in the Resources Manager and click Show on the Edit menu.

  4. Create a task flow, Top Five Viewed Documents in a Given Space, using the PageHits mashup style, as shown in Figure C-41.

    Figure C-41 Create New Task Flow Dialog with PageHits Style

    Create New Task Flow Dialog with PageHits Style
  5. Edit the task flow and add the data control as a table, as shown in Figure C-42.

    Figure C-42 Top Five Viewed Documents in a Given Space

    Top Five Viewed Documents in a Given Space

    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}

  6. To get the accessor ID:

    1. Switch to Source view of the task flow, and select the Table component.

    2. Click Edit to view the table's properties.

    3. 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}

  7. Select the showDetailFrame component wrapping the table and click Hide on the context menu.

  8. Right-click the iterator component, and click Edit.

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

  10. Save the task flow and exit Oracle Composer.

  11. In the Resources Manager, select the task flow and click Show on the Edit menu.

  12. Consume the task flow in a page. It appears as shown in Figure C-43.

    Figure C-43 Page Displaying Top Five Page Hits in a Space

    Page Displaying Top Five Page Hits in a Space

C.7 Building and Using a Custom Mashup style with Date Fields

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.

Figure C-44 Task Flow Using Custom Mashup Style with Date Fields

Task flow with date fields and page hits graph

C.7.1 Building the Custom Mashup 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:

  1. Create a copy of the blank mashup style and name it Input Dates.

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

    Figure C-45 Preview of Custom Style with Date Fields

    Custom style with date fields and Go button

    You can use this mashup style to build a mashup and populate the content area with a visualization of your choice.

C.7.2 Creating a Task Flow Based on the Custom Style

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:

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

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

    Figure C-46 Bind Parameter Values for the Data Control

    Bind Parameter Values for the Data Control
  3. Test the query and view the data retrieved from the data source, as shown in Figure C-47.

    Figure C-47 Data Control Query Test Results

    Data Control Query Test Results
  4. Select the data control in the Resources Manager and click Show on the Edit menu.

  5. Create a task flow, Page Usage Between Two Dates, using the Input Dates mashup style, as shown in Figure C-48.

    Figure C-48 Input Dates Mashup Style in the Create New Task Flow Dialog

    Input Dates Mashup Style in the Create New Task Flow Dialog
  6. Edit the task flow and add the data control as a graph (Figure C-49).

    Figure C-49 Graph Option on the Data Control Accessor

    Graph Option on the Data Control Accessor
    • 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)

  7. Create the graph, save the task flow, then exit Oracle Composer.

  8. In the Resources Manager, select the task flow and click Show on the Edit menu.

  9. Consume the task flow in a page. It appears as shown in Figure C-50.

    Figure C-50 Mashup Showing Graph for Specified Date Range

    Mashup Showing Graph for Specified Date Range

C.8 Creating a Mashup with a Graph That Is Wired to the Page Navigation

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.

Figure C-51 Mashup with Left Navigation and a Page Hits Graph

Mashup showing left navigation and a graph at the center

The steps to build such a mashup include:

C.8.1 Creating the Page Hits Data Control

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.
  1. Use the ActivitiesDS connection and create a SQL data control named PageHits.

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

  3. Set the spacename bind variable to Home space.

  4. Test the query and view the data retrieved from the data source, as shown in Figure C-52.

    Figure C-52 SQL Data Control Query Test Result

    SQL data control query test result
  5. Select the data control in the Resource Manager and click Show on the Edit menu.

C.8.2 Consuming the Data Control in a Page with a Navigation Tree

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:

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

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

    Page Properties dialog with a new parameter
    Description of "Figure C-53 Page Properties Dialog with new Parameter"

  3. Click OK.

  4. Add the PageHits data control accessor as a graph, as shown in Figure C-54.

    Figure C-54 Graph Option on the PageHits Data Control Accessor

    Graph option on the PageHits data control accessor

    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}

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

    Figure C-55 Navigation Component with Three Link Navigation Items

    Navigation Component with Three Link Navigation Items
  6. Select Sample1 and click Edit.

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

    Figure C-56 Navigation Item Properties Dialog

    Navigation item properties dialog
  8. Click the Parameters tab and specify the space parameter value to be Sample1.

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

  10. Click OK to close the navigation editor.

  11. Select Spaces Navigation in the Resource Manager and click Show on the Edit menu.

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

  13. Click the Edit icon on the default navigation, as shown in Figure C-57.

    Figure C-57 Edit Icon on the Default Navigation Tree Component

    Edit icon on the default navigation tree component
  14. On the Parameters tab, specify Spaces Navigation in the Navigation field, as shown in Figure C-58, then click OK.

    Figure C-58 Navigation Tree Component Properties Dialog

    Navigation tree component properties dialog
  15. The new navigation model now displays on the left side of the page, as shown in Figure C-59.

    Figure C-59 Navigation Model with Space Name Links

    Navigation model with space name links
  16. Click Save and Close to exit page edit mode.

  17. When you view the page, it displays the navigation tree and the graph as shown in Figure C-60.

    Figure C-60 Mashup with Left Navigation and Page Hits Graph for Sample1

    Mashup showing page hits graph for Sample1
  18. Click a different Space in the navigation to view the page hits graph for that Space, as shown in Figure C-61.

    Figure C-61 Mashup with Left Navigation and Page Hits Graph for Sample2

    Mashup showing page hits graph for Sample2

C.9 Creating a Mashup with a Graph that Is Wired to the Inherited Page Navigation

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:

C.9.1 Creating the Page Hits Data Control

Perform the steps in Section C.8.1, "Creating the Page Hits Data Control."

C.9.2 Consuming 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:

  1. Create a task flow, Top Five Page Views for Given Space Within Past Week, using the Blank mashup style.

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

  3. Click Task Flow Properties and create a string parameter, spacename, in pageFlowScope, as shown in Figure C-62.

    Figure C-62 New Parameter in the Taskflow Properties Dialog

    New Parameter in the Taskflow Properties Dialog
  4. Click Save and Close to exit edit mode.

  5. Select the task flow in the Resource Manager and click Show on the Edit menu.

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

C.9.3 Creating and Applying a Custom Page Template

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:

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

    Figure C-63 Navigation Component with Three Link Navigation Items

    Navigation Component with Three Link Navigation Items
  2. Select Sample1 and click Edit.

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

    Figure C-64 Navigation Item Properties Dialog

    Navigation item properties dialog
  4. Click the Parameters tab and specify the space parameter value to be Sample1.

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

  6. Click OK to close the navigation editor.

  7. Select Spaces Navigation in the Resource Manager and click Show on the Edit menu.

To create and apply a custom page template:

  1. Create a custom page template, Sample Template, based on the out-of-the-box Side Navigation – Flow template.

  2. Add a Navigation Tree component to the template.

    A default navigation displays on the left of the page.

  3. Click the Edit icon on the default navigation, as shown in Figure C-65.

    Figure C-65 Edit Icon on the Default Navigation Tree Component

    Edit icon on the default navigation tree component
  4. 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.

    Figure C-66 Custom Page Template with a Navigation Tree

    Custom page template with a navigation tree
  5. Click Save and Close to exit page edit mode.

  6. Select the new template in the Resource Manager and click Show on the Edit menu.

  7. Navigate to the Spaces administration page, then click the Configuration tab.

  8. On the General page, in the Default Page Template field, select the new sample template that you created (Figure C-67), then click Apply.

    Figure C-67 Default Page Template Configuration

    Default page template configuration

    The navigation tree in the template now displays on all application pages.

C.9.4 Testing the Wiring Between the Page Hits Graph and the Inherited Navigation

To verify that the graph is wired to the navigation correctly:

  1. Open the page, Sample8b.

    It displays the navigation tree and the page hits graph for the home Space, as shown in Figure C-68.

    Figure C-68 Page Hits Graph for Sample1 Selected in the Navigation

    Page Hits Graph for Sample1 Selected in the Navigation
  2. Click a different Space in the navigation to view the page hits graph for that Space, as shown in Figure C-69.

    Figure C-69 Page Hits Graph for Sample2 Selected in the Navigation

    Page Hits Graph for Sample2 Selected in the Navigation

C.10 Creating a Master-Detail Mashup that Contains a Google Maps Task Flow

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.

Figure C-70 Mashup Displaying a Table and Google Map

Mashup Displaying a Table and Google Map

The steps to create a similar mashup include:

This section describes how to perform these tasks. It includes the following subsections:

C.10.1 Creating the Data Control

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:

  1. 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
    
  2. Select the new data control in the Resource Manager, and from the Edit menu, click Show.

C.10.2 Creating the Details Task Flow

This section describes how to create a details task flow that will display the Google map.

To create the details task flow:

  1. Create a task flow, Basic Maps, based on the Blank mashup style.

  2. Select the task flow and click Edit Source on the Edit menu.

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

  4. Click OK to exit the source editor.

  5. Ensure that the task flow is selected in the Resource Manager and click Edit on the Edit menu.

  6. Click Task Flow Properties and create two string task flow parameters, city and state, in pageFlowScope, as shown in Figure C-71.

    Figure C-71 New Parameters on the Basic Maps Task Flow

    New Parameters on the Basic Maps Task Flow

C.10.3 Creating the Master Task Flow

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:

  1. Create a task flow, Address on Google Maps, based on the Blank mashup style.

  2. Edit the task flow and add the Basic Maps task flow, as shown in Figure C-72.

    Figure C-72 Basic Maps Task Flow in the Resource Catalog

    Basic Maps Task Flow in the Resource Catalog
  3. 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.

    Figure C-73 Master-Detail Task Flow with Table and Google Map

    Master-Detail Task Flow with Table and Google Map

C.10.4 Wiring the Master and Details Task Flows

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:

  1. Click the Edit icon on the Basic Maps task flow.

  2. 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}

  3. To hide the header on the map, click the Display Options tab and clear the Display Header checkbox.

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

  5. Click OK to save your changes.

    The map displays the location corresponding to the currently selected name in the table.

  6. Click Save and Close to exit edit mode.

    The task flow displays as shown in Figure C-74.

    Figure C-74 Master-Detail Task Flow with Table and Google Map

    Master-Detail Task Flow with Table and Google Map
  7. 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. 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">
      
    2. Move the end tag of </cust:panelCustomizable> to the right, after the first </showDetailFrame> tag and before the second <showDetailFrame> tag.

    3. To disable default selection in the table, remove the selectedRowKeys attribute on the <table> tag.

    4. To ensure that the map stretches when required, change the columnStretching attribute to last.

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

    Figure C-75 Mashup Displaying a Table and Google Map

    Mashup Displaying a Table and Google Map

    Click a name in the table; the map points the location corresponding to that name.

C.11 Creating a Mashup with a Customized RSS Feed OmniPortlet

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

C.11.1 Creating a Task Flow with an OmniPortlet

To create a mashup with an Omniportlet instance:

  1. Create a new task flow based on the Blank mashup style.

  2. Add the Omniportlet to the task flow from the Resource Catalog, shown in Figure C-76.

    Figure C-76 OmniPortlet in the Resource Catalog

    OmniPortlet in the Resource Catalog
  3. Click the Customize icon on the top right corner of the portlet header, shown in Figure C-77.

    Figure C-77 Customize Icon on the OmniPortlet Header

    Customize Icon on the OmniPortlet Header

    See Also:

    Section 27.2, "Working with the OmniPortlet Wizard" for detailed information.
  4. On the Type page of the OmniPortlet wizard, shown in Figure C-78, choose XML as the data source type, then click Next.

    Figure C-78 OmniPortlet Wizard Type Page

    Type Page of the OmniPortlet Wizard
  5. 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

    Figure C-79 Source Page of the OmniPortlet Wizard

    Source Page of the OmniPortlet Wizard
  6. In the Portlet Parameters section, define a new parameter, Display Num, as shown in Figure C-80, then click Next.

    Figure C-80 Portlet Parameters Section of the OmniPortlet Wizard Source Page

    Portlet Parameters Section of the Source Page
  7. On the Filter page, shown in Figure C-81, set the filter limit to ##Param1##, then click Next.

    Figure C-81 Limit Section on the Filter Page of the OmniPortlet Wizard

    Limit Section on the Filter Page of the Wizard
  8. 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

    Layout style section in OmniPortlet Wizard
    Description of "Figure C-82 Layout Style Section on the View Page of the OmniPortlet Wizard"

  9. On the Layout page, under the Column Layout section, use two fields to specify a title and description as shown in Figure C-83.

    Figure C-83 Column Layout Section on the Layout Page of the OmniPortlet Wizard

    Column Layout Section on the Layout Page of the Wizard
  10. Click Finish to exit the wizard.

  11. Click Save and Close to exit Oracle Composer.

  12. Select the new task flow in the Resource Manager, and from the Edit menu, click Show.

C.11.2 Testing the Task Flow

To verify that the portlet in the task flow renders correctly:

  1. Preview the task flow or consume it in an application page.

    The portlet displays ten news items.

  2. Click the Personalize icon, shown in Figure C-84, on the top right corner of the task flow.

    Figure C-84 Personalize Icon on the Task Flow Header

    Personalize Icon on the Task Flow Header
  3. In the resulting screen, shown in Figure C-85, change the value of the Display Num variable to a number of your choice.

    Figure C-85 Portlet Parameter Customization Screen

    Portlet parameter customization screen

    The portlet displays the specified number of news items.

C.11.3 Sharing the Task Flow with the Customized Portlet

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:

  1. 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."

  2. Export the task flow from the Resource Manager on the source instance.

    For the detailed steps, see Section 10.5.2, "Downloading a Resource."

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