Tuesday Nov 22, 2011

Consuming Hello World pagelet in WebCenter Spaces


The goal of this exercise is to show how you can use Hello World pagelet that you just created from your web space.


Let's assume the following:

  • Pagelet Producer is running on http://pageletserver.company.com:8889/pagelets/
  • WebCenter is running on http://webcenter.company.com:8888/webcenter/
  • You created Hello_World pagelet as described here.

For our exercise we will need a space created. So let's login into WebCenter Portal and create a space called "myspace" using "Portal Site" template:

Registering Pagelet Producer with WebCenter portal

In order to use our newly created pagelet from WebCenter Spaces, we first need to register Pagelet Producer:

  • Click "Administraion" link on WebCenter toolbar
  • Open the "Configuration" tab
  • Click on "Services" link on the upper-left corner of the page
  • Click on "Portlet Producers" link on the right hand pane of the screen
  • Click on "Register" button
  • Select "Pagelet Producer" radio button and type
    • Producer Name = "MyPageletProducer"
    • Server URL = http://pageletserver.company.com:8889/pagelets/
  • Click "Test" button
  • If everything is succesful you will see the following screen:
  • Now click "OK'. Pagelet producer is registered:

Inserting Hello World pagelet to WebCenter Space

Now let's insert Hello World pagelet into "myspace" page:

  • Let's go back to "myspace", click on the icon in a upper-right corner of the page and select "Edit Page"
  • Click on one of the "Add Content" buttons:
  • Select "Mash-Ups":
  • Select "Pagelet Producers:
  • You will see the MyPageletProducer that we just registered:
  • Click on it. You will see the library "MyLib" that contains our "Hello_World" pagelet.
  • Click on "MyLib" and you will see "Hello_World" pagelet. Click on "Add" button, and then "Close" button.
  • Click "Save" button, and then "Close".

Now we see that our "Hello World" pagelet is inserted into "myspace" page:

Monday Nov 21, 2011

Hello World Pagelet


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:

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:


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



November 2011 »