Introduction

The goal of this exercise is to give you a basic feel of how you can use Pagelet Producer to proxy a web page

We will proxy a simple static Hello World web page, cut one section out of that page and present it as a pagelet that you can later insert on your own application page or to your portal page such as WebCenter Portal space or WebCenter Interaction community page.

Hello World sample app

This is the static web page we will work with:

Let's assume the following:

• The Hello World web page is running on server http://appserver.company.com:1234/
• The Hello World web page path is: http://appserver.company.com:1234/helloworld/

Initial Pagelet Producer setup

Let's assume that the Pagelet Producer server is running on http://pageletserver.company.com:8889/pagelets/

First let's check that Pagelet Producer is up and running. In order to do that we just need to access the following URL: http://pageletserver.company.com:8889/pagelets/

And this is what should be returned:

Now you can access Pagelet Producer administration screens using this URL: http://pageletserver.company.com:8889/pagelets/admin

This is how the UI looks:

Now if you connect to the internet via proxy server, you need to configure proxy in Pagelet Producer settings.

• In the Navigator pane: Jump To -> Settings
• Click on "Proxy"
• Enter your proxy server configuration:
  

Creating a resource

First thing that you need to do is to create a resource for your web page. This will tell Pagelet Producer that all sub-paths of the web page should be proxied. It also will allow you to setup common rules of how your web page should be proxied and will serve as a container for your pagelets.

• In the Navigator pane: Jump To -> Resources
• Click on any existing resource (ex. welcome_resource)
• Click on "Create selected type" toolbar button at the top of the Navigator pane
  
• Select "Web" in the "Select Producer Type" dialog box and click "OK"
  
• Now after the resource is created let's click on "General" sub-item a specify the following values
• Name = AppServer
• Source URL = http://appserver.company.com:1234/
• Destination URL = /appserver/
• Click on "Save" toolbar button at the top of the Navigator pane
  

After the resource is created our web page becomes accessible by the URL: http://pageletserver.company.com:8889/pagelets/appserver/helloworld/

So in original web page address Source URL is replaced with Pagelet Producer URL (http://pageletserver.company.com:8889/pagelets) + Destination URL

Creating a pagelet

Now let's create "Hello World" pagelet.

• Under the resource node activate Pagelets subnode
• Click on "Create selected type" toolbar button at the top of the Navigator pane
  
• Click on "General" sub-node of newly created pagelet and specify the following values
• Name = Hello_World
• Library = MyLib
  Library is used for logical grouping. The portals use the "Library" value to group pagelets in their respective UI's. For example, when adding pagelets to a WebCenter Portal space you would see the individual pagelets listed under the "Library" name.
• URL Suffix = helloworld/index.html
  this is where the Hello World page html is served from
• Click on "Save" toolbar button at the top of the Navigator pane
  

The Library name can be anything you want, it doesn't have to match the resource name at all. It is used as a logical grouping of pagelets, and you can include pagelets from multiple resources into the same library or create a new library for each pagelet.

After you save the pagelet you can access it here:

http://pageletserver.company.com:8889/pagelets/inject/v2/pagelet/MyLib/Hello_World
which is : http://pageletserver.company.com:8889/pagelets/inject/v2/pagelet/ + [Library] + [Name]

Or to test the injection of a pagelet into iframe you can click on the pagelets "Documentation" sub-node and use "Access Pagelet using REST" URL:

This is what we will see:

Clipping

The pagelet that we just created covers the whole web page, but we want just the "Hello World" segment of it. So let's clip it.

• Under the Hello_World pagelet node activate Clipper sub-node
• Click on "Create selected type" toolbar button at the top of the Navigator pane
• Specify a Name for newly created clipper. For example: "c1"
  
• Click on "Content" sub-node of the clipper
• Click on "Launch Clipper" button
  
• New browser window will open
• By moving a mouse pointer over the web page select the area you want to clip:
  
• Click left mouse button - the browser window will disappear and you will see that Clipping Path was automatically generated
  
• Now let's save and access the link from the "Documentation" page again
• Here's our pagelet nicely clipped and ready for being used on your Web Center Space