Hello World Pagelet
- by astemkov
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
