1. In your Oracle WebCenter Sites installation, navigate to sites-home\bootstrap\samples\miscellaneous\SampleProxy\proxy_sample. In the subsequent steps this directory is referred to as ${WCS_PROXY}.
2. Copy the proxy_samples directory under the web application root on the server. For example, sites-webapp-server\webapps\sites\proxy_samples.
   This directory contains the sample JSON and images to simulate a third-party API.
3. To test the proxy_samples directory, start the server and navigate to http://localhost:8080/sites/proxy_samples/search/ski.json. Then click one of the files in your browser to see the JSON text.

1. Log into WebCenter Sites and launch the Admin interface.
2. Expand Admin, then Proxy Asset Maker, and then double click Add New.
3. In the form, enter values in these fields: Name (e.g: ProxyTest), Description, and Plural Form (e.g.: ProxyTests) for the proxy asset.
4. Click Save.
5. Enable the ProxyTest asset in your site. To do this, create a Search start menu for ProxyTest.
   You cannot yet access the ProxyTest Search start menu in the Contributor interface.

1. Open Sites Explorer and log in to your WebCenter Sites instance.
2. In Sites Explorer, under Tables/ElementCatalog/CustomElements, create the following directory structure: ProxyTest/UI/Data/Search:
   
3. Under ProxyTest/UI/Data/Search, add two new rows.
4. Copy and paste the contents from the corresponding files in ${WCS_PROXY}\src\jsp\cs_deployed\CustomElements\ProxyTest\UI\Data\Search and save:
   • SearchAction

     • elementname: SearchAction

     • url: CustomElements\ProxyTest\UI\Data\Search\SearchAction.jsp

   • SearchJson

     • elementname: SearchJson

     • url: CustomElements\ProxyTest\UI\Data\Search\SearchJson.jsp

5. In Sites Explorer, under ElementCatalog, add ProxyTest: Tables\ElementCatalog\ProxyTest.
6. Under Tables\ElementCatalog\ProxyTest, create a new entry by copying and pasting the contents from ${WCS_PROXY}\src\jsp\cs_deployed\ProxyTest\GetData.jsp : GetData (elementname: GetData, url: ProxyTest/GetData.jsp), and then save these changes.
7. In the Contributor interface, in the Search field for ProxyTest, enter ski, surfing, or nothing.
   You should see a list populated with proxy assets.

1. In Sites Explorer, under Tables\ElementCatalog\CustomElements\ProxyTest\UI, create the following folder structure: \Layout\CenterPane\Search\View.
2. Add the following entries by copying and pasting the contents from the corresponding files in ${WCS_PROXY}\src\jsp\cs_deployed\CustomElements\ProxyTest\UI\Layout\CenterPane\Search\View.
   • ThumbnailViewConfig:

     • elementname: ThumbnailViewConfig

     • url: CustomElements\ProxyTest\UI\Layout\CenterPane\Search\View\ThumbnailViewConfig.jsp

   • DockedThumbnailViewConfig:

     • elementname: DockedThumbnailViewConfig

     • url: CustomElements\ProxyTest\UI\Layout\CenterPane\Search\View\DockedThumbnailViewConfig.jsp

3. In the Contributor interface, enter a valid search term for ProxyTest assets.
   You will see the thumbnail images in the grid mode.

1. In Sites Explorer, under Tables\ElementCatalog\ProxyTest, create a directory called Tree.
2. Add the following entries by copying and pasting the contents from the corresponding files in ${WCS_PROXY}\src\jsp\cs_deployed\ProxyTest\Tree.

   • Load

     • elementname: Load

     • url: ProxyTest\Tree\Load.jsp

   • Root

     • elementname: Root

     • url: ProxyTest\Tree\Root.jsp

3. Switch to the Admin interface.
4. Add a tree tab:
   1. Expand the Admin node.
   2. In the tree, double-click Tree.
      The Tree Tabs page is displayed.
   3. Click Add New Tree Tab.
   4. Enter the following:

      • In the Title field, enter ProxyTestTreeTab.

      • In the Sites box, choose avisports (or whichever site you're using).

      • In the Required Roles box, choose Any.

      • In the Tab Contents box, select ProxyTest and click Add Selected Items.

      • In the selected box, click ProxyTest.

      • In the Section Name field, enter ProxyTest.

      • In the Element Name field, enter ProxyTest/Tree/Root ( use only forward slashes).

      • Click Edit Section, then click Save.

5. Switch to the Contributor interface.
6. On the Content Tree, and expand the ProxyTestTreeTab tree tab.
   You should see the categories ski and surfing available for drag and drop, along with their respective assets.

1. On the Admin node, expand Proxy Asset Manager, and double-click Add New.

   The Add New Proxy Asset Type page opens.

   Figure 44-2 Add New Proxy Asset Type Page

   
   Description of "Figure 44-2 Add New Proxy Asset Type Page"
2. In the Name field, enter a name for the proxy asset type. Similarly, enter a description in the Description field, and enter a plural form of the name in the Plural Form field.

   Note:

   Creating or editing proxy assets through the Contributor interface is not available. Consequently, in this step, only a Search start menu should be enabled.

   In this example, and to use with the examples continuing through the rest of the document, enter ProxyTest in the Name field, ProxyTest in the Description field, and ProxyTests in the Plural Form field.

3. Click Save.

As explained in Customizing the Search Start Menu, an override of the controller element UI/Data/Search/Search for the ProxyTest asset type is created using the following elements:

\sites-home\bootstrap\samples\miscellaneous\SampleProxy\proxy_sample\src\jsp\cs_deployed\CustomElements\ProxyTest\UI\Data\Search\SearchAction.jsp
\sites-home\bootstrap\samples\miscellaneous\SampleProxy\proxy_sample\src\jsp\cs_deployed\CustomElements\ProxyTest\UI\Data\Search\SearchAction.jsp\SearchJson

The figure below shows the ProxyTest option in the search drop-down. Selecting ProxyTest (that is, the name of the proxy asset type created) runs the custom search code, instead of the Lucene-based search.

Figure 44-3 Search Drop-Down Showing ProxyTest Asset

Description of "Figure 44-3 Search Drop-Down Showing ProxyTest Asset"

To implement a full custom search, complete the remaining topics in this section.

This topic includes the following:

• Getting Search Results Using the Provided Third-Party API

• Turning Search Results into Proxy Assets, Filter Incoming Search Results, Register External Content, and Gather Data for Search Grid Widget

• Building a Data Store for the Grid Widget

• Testing Custom Search

• Additional Customizations

A custom tree is useful to allow users to browse external content by category.

Figure 44-8 Custom Tree

Description of "Figure 44-8 Custom Tree"

Two elements are created to render the tree:

• ProxyTest/Tree/Root: Renders the tree root nodes, that is, the content categories.

• ProxyTest/Tree/Load: Renders all content under a given category.

To implement the custom tree, you must first register the custom tree tab, and then implement the custom tree code.

This topic includes the following:

• Registering the Custom Tree Tab

• Implementing the Tree Code

Templates can be defined for proxy assets, just as templates can be defined for any other asset type.

1. In the Admin interface, click New on the menu bar and then choose New Template.
   The Template form is displayed.
2. In the Name field, enter ProxyTestSummary.
3. From the For Asset Type drop-down list, choose ProxyTest.
4. In the Applied to subtypes box, choose Any, if not selected already.
5. On the Element tab:
   • From the Usage drop-down list, choose Element is used as Layout.
   • In the Create Template Element? section, click JSP .
   • In the Element Logic box, enter the following code from ${WCS_PROXY}\templates\ProxyTestSummary.jsp:

   <%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld"
   %><%@ taglib prefix="ics" uri="futuretense_cs/ics.tld"
   %><%@ taglib prefix="render" uri="futuretense_cs/render.tld"
   %><%@ taglib prefix="fragment" uri="futuretense_cs/fragment.tld"
   %><%@ page import="javax.ws.rs.client.*"
   %><%@ page import="javax.ws.rs.core.*"
   %><%@ page import="org.codehaus.jettison.json.*"
   ><%@ page import="com.fatwire.cs.ui.framework.UIException"
   %><%@ taglib prefix="asset" uri="futuretense_cs/asset.tld"%> 
   
   <cs:ftcs>
   <%-- ProxyTest/ProxyTestSummary	--%>
   
   <%-- Record dependencies for the Template --%>
   <ics:if condition='<%=ics.GetVar("tid")!=null%>'>
        <ics:then><render:logdep cid='<%=ics.GetVar("tid")%>' c="Template"/>
        </ics:then>
   </ics:if>
   
   <%-- Set the urlPath to proxy_samples --%>
   <%
   String host = request.getServerName();
   String port = Integer.toString(request.getServerPort());
   String contextPath = request.getContextPath();
   String urlPath = "http://"+host+":"+port+"/"+contextPath+"/proxy_samples/content/";
   %>
   
   <%-- first, retrieve the external id --%>
   <asset:load name="asset" type='<%=ics.GetVar("c") %>'
          objectid='<%=ics.GetVar("cid") %>' />
   <asset:get name="asset" field="name" />
   <asset:get name="asset" field="externalid" />
   
   <%
   // given the external content id, invoke the  third-party repository API
   // to retrieve content metadata
   Client client = ClientBuilder.newClient();
   Response resp = null;
   WebTarget res = null;
   
   try {
        res = client.target(urlPath + ics.GetVar("externalid") + ".json");
        resp = res.request(MediaType.APPLICATION_JSON).get();
   } catch (Exception e) {
        // propagate exception to client-side
        request.setAttribute(UIException._UI_EXCEPTION_, e);
        e.printStackTrace();
        throw e;
   }
   
   String jsonString = resp.readEntity(String.class);
   JSONObject data = new JSONObject(jsonString);
   %>
   
   <%-- finally render content --%>
   <h4><%=data.getString("title") %></h4>
   <p><%=data.getString("foo") %></p>
   <img src="<%=data.getString("image") %>" alt="<%=data.getString("title") %>" />
   
   </cs:ftcs>
   

6. In the Contributor interface, search for ProxyTest assets while leaving the Search field blank.
7. Click a ProxyTest asset that includes asset details (for example, YellowSkier).
8. Click Preview , then choose the ProxyTestSummary layout, and then click Apply.

Title, metadata, and image of the ProxyTest asset should be displayed.

Proxy assets can be embedded inside pages using the exact same tags and principles that apply to standard assets.

1. Create a Page attribute:
   1. In the Name field, enter ProxyTestAttribute.
   2. From the Attribute Type drop-down list, choose asset.
   3. From the Asset Type drop-down list, choose ProxyTest.
   4. Click the Save icon.
2. Create a Page definition:
   1. In the Name field, enter ProxyTestPageDef.
   2. In the Attributes section, select the ProxyTest attribute and then click Optional.
   3. Click the Save icon.
3. Create a template for the Page asset:
   1. In the Name field, enter ProxyTestSlotTemplate.
   2. From the For Asset Type drop-down list, choose Page.
   3. In the Applied to subtypes box, choose Any, if not selected already.
   4. On the Element tab:

      • From the Usage drop-down list, choose Element is used as Layout.

      • In the Create Template Element? section, click JSP .

      • In the Element Logic box, enter the following code from ${WCS_PROXY}\templates\ProxyTestSlotTemplate.jsp

        <%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld"%>
        <%@ taglib prefix="ics" uri="futuretense_cs/ics.tld"%>
        <%@ taglib prefix="render" uri="futuretense_cs/render.tld"%>
        <%@ taglib prefix="insite" uri="futuretense_cs/insite.tld"%>
        <%@ taglib prefix="assetset" uri="futuretense_cs/assetset.tld"%>
        <cs:ftcs><render:logdep cid='<%=ics.GetVar("tid")%>' c="Template"/>
        <html>
        <head>
             <title>ProxyTest Slots Example</title>
        </head>
        <body>
             <assetset:setasset name="page" id='<%=ics.GetVar("cid") %>'
                                type='<%=ics.GetVar("c") %>' />
             <assetset:getattributevalues attribute="ProxyTestAttribute" listvarname="ProxyTest"
                                name="page" typename="PageAttribute" />
             <ics:listget listname="ProxyTest" fieldname="value" output="id" />
             <h3>ProxyTest Slots Example</h3>
             <insite:calltemplate field="ProxyTestAttribute" c='ProxyTest'
                                cid='<%=ics.GetVar("id") %>' tname="ProxyTestSummary" />
        </body>
        </html>
        </cs:ftcs>

4. Create the Page asset:
   1. In the Contributor interface, from the menu bar, select Content, New, and then select Page (Section).
   2. In the Name field, enter ProxyTestPage.
   3. From the Page Definition drop-down list, choose ProxyTestPageDef.
   4. From the Template drop-down list, choose ProxyTestSlotTemplate.
   5. In form mode and web mode, drag and drop ProxyTest assets into the ProxyTestAttribute slot.
      In web mode, the ProxyTest asset is rendered using the ProxyTestSummary template.