Developing a Mashup Scenario for SAP NetWeaver 7.3

Posted by Roman Loshevsky in SAP NetWeaver Portal on Apr 28, 2011 5:52:23 AM

Prerequisites:

Familiarity with the basics of portal application development (Developing Portal Applications).

Developing a Mashup Application

A mashup application consists of a number of portal or Web Dynpro components than pass data to each other through defined connections.

The following shows how to create an application consisting of a source component that passes data to a target component.

Part 1 - Source Component

1. Create a project of the following structure:

************************************************************

2. In the PORTAL-INF folder, create an XML descriptor ports.xml that contains the definitions of ports and parameters:

********************************************************

3. In the JavaScript Source.html file, raise a client-side event with the parameters matching those defined in ports.xml.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Messenger</title>
<script language="javascript" type="text/javascript">

function send(){
/*
after mashup scenario created in the page, some JS objects added to page:
EPCM.getSAPTop() is known public EPCM API
MashupAPI - added as part of mashup JS framework,
EventData - part of mashup JS event framework,
to prevent JS error - use 'if' constraint before using EventData
*/
    if(EPCM.getSAPTop().MashupAPI != undefined){
     var data = document.getElementById('user_input').value;
     // receive new EventData from MashupAPI
     var eventData = EPCM.getSAPTop().MashupAPI.getEventData();
     // 'setID' and 'setPortID' are required set methods for mashup event
     // use sourceId value name the same as defined in the component Java code
     // other parameters are part of port description from ports.xml
     // parameter name must be the same as defined in port descriptor
     // addData(String name, var value) is public API for object EventData.
eventData.setID(SimpleMashupSource_SenderComponent_ID);
eventData.setPortID("sender_port1");
// dynamic parameter value
eventData.addData("saying", data);
// static parameter value
eventData.addData("whoami", "Mr. Smith");
// this line could be copied as is - only 'eventData' object name is not constant
EPCM.raiseEvent("com.sap.portal.mashup", "mashSourceEvent", eventData.toString());
    }
    }

    </script>
</head>
<body>
<a>Message: </a>
    <input id="user_input" value=""> </input>
    <button id="ok" onclick="send();">Send</button>
</body>
</html>

****************************************************************

4. In the portal component’s server-side code (SenderComponent.java), connect the client-side code to component:

package com.sap.example.mashup;

import com.sapportals.portal.prt.component.*;
import com.sapportals.portal.prt.resource.IResource;

public class SenderComponent extends AbstractPortalComponent
{
/*
* This example shows how to raise mashup events
*/
    public void doContent(IPortalComponentRequest request, IPortalComponentResponse response)
    {
     /* paste component code here */

     // Get iView ID from component request. iView ID is required for mashup.
     String fullComponentID = request.getComponentContext().getContextName();
     String iviewID = fullComponentID.substring(fullComponentID.lastIndexOf('/') + 1);

     // Add iView ID to the component response as global variable to be used by own client-side implementation.
     // Component client side logic will use it to raise event for data passing.
     // Name of variable must be unique, to prevent value override by other iViews in the page.
     // Suggestion is to use EAR name + component name + any parameter name.
     // Like: SimpleMashupSource + SenderComponent + ID
     response.write("<SCRIPT language ='JavaScript'> var SimpleMashupSource_SenderComponent_ID = '" + iviewID + "';</SCRIPT>");

     /* Paste component code here */

     // See client side implementation in the project (MashupSourceComponentClientSideImpl.html) describe mashup events.
     // add this implementation to component runtime
     IResource implementation = request.getResource(IResource.STATIC_PAGE, "scripts/Source.html");
     response.include(request, implementation);

     /* paste component code here */
    }

}

************************************************************

The following shows how to create an application consisting of a target component that receives data from a source component.

Part 2 – Target Component

1. Create a project of the following structure:

***************************************************************

2. In the PORTAL-INF folder, create an XML descriptor ports.xml that contains the definitions of ports and parameters:

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="ports_def.xsd" >
<component name="ReceiverComponent" >
<port id="target_port1" direction="IN" label="Message" description="Show message">
     <parameters>
     <parameter id="message" description="Message" label="Message">
     </parameter>
     </parameters>
</port>
</component>
</application>

***************************************************************

3. In the JavaScript Target.html file, subscribe to client-side event with the parameters matching those defined in ports.xml.

<head>
    <title>Show message</title>
    <script language="javascript" type="text/javascript">
// the JS function handled mashup events
    function eventHandlerForPort_t1(eventData){
        // read data from event
     var data = eval("(" + eventData.dataObject + ")");
     // read parameter 'message' defined by port descriptor in ports.xml for port target_port1

     var message = data.message;
     // specific logic: show received message as lable - use any own logic to process received data
     document.getElementById('mashup_message_viewer').value = message;
    }

    // subscribe to mashup event used SimpleMashupTarget_Receiver_ID defined by server side java code
    // in portal component implementation. Use eventHandler defined below to process received mashup event.
    // MUST BE subscribed with unique iView ID and '_' and port ID - predefined mashup protocol.

    if(typeof SimpleMashupTarget_Receiver_ID != "undefined"){
     EPCM.subscribeEvent("com.sap.portal.mashup",
       SimpleMashupTarget_Receiver_ID + "_" + "target_port1", // this is the convention for creating event name
          eventHandlerForPort_t1);
    }

    </script>
</head>

*************************************************************

4. In the portal component’s server-side code (ReceiverComponent.java), connect the client-side code to component:

package com.sap.example.mashup;

import com.sapportals.portal.prt.component.*;
import com.sapportals.portal.prt.resource.IResource;

public class ReceiverComponent extends AbstractPortalComponent
{
/*
* This example show how to create iView subscribed to mashup events.
*/
    public void doContent(IPortalComponentRequest request, IPortalComponentResponse response)
    {
     /* paste component logic here */

     // Get iView ID from component request. iView ID is required for mashup.
     String fullComponentID = request.getComponentContext().getContextName();
     String iviewID = fullComponentID.substring(fullComponentID.lastIndexOf('/') + 1);

     response.write("<SCRIPT language ='JavaScript'> var SimpleMashupTarget_Receiver_ID = '"
         + iviewID
         + "';</SCRIPT>");

     IResource implementation = request.getResource(IResource.STATIC_PAGE, "scripts/Target.html");
     response.include(request, implementation);
    }
}