Introduction

WebSphere Portal Version 4.1 introduces the concept of Web clipping. Web clipping allows portal administrators to build portlets that consume external content and filter it to present a view of only the relevant portions of that content. To facilitate this, several new administrative portlets have been added to the suite of built-in portlets. The Web clipping portlet provides a front-end user-interface that allows the administrator to build new portlets by specifying the URL of the content to retrieve and various constraints that direct how the content should be modified (or "clipped") before it is presented. The portlets created by the Web clipping portlet, called Web clippers or simply cliplets, are based on one of two templates provided by the portal. These templates provide the internals necessary to retrieve and modify the content. This tutorial demonstrates the Web clipping portlet to create, edit, and delete a cliplet. It will also show you how to add a finished cliplet to a portal page and how to customize certain settings of the cliplet using more advanced features provided by the Web clipping portlet.

Back to top

Requirements and assumptions

To exercise the steps outlined in this tutorial, you will need the following:

• One of the WebSphere Portal family of products (Enable, Extend, or Experience) installed on an accessible server. Individual software/hardware requirements for these packages vary. Please see the documentation and release notes provided with the product for this information.
• A working network connection.
• A Web browser supported by WebSphere Portal. Internet Explorer (IE) Version 4.x and higher or Netscape Version 6.
• An account on your WebSphere Portal server either with administrative rights or appropriate rights to be able to view the Web clipping portlet and create other portlets (cliplets) within the portal.

This tutorial assumes that you are familiar with working with WebSphere Portal and in particular with portal administration via the portal administration portlets. Specifically, you should be comfortable with the flow of portal administration portlets including the navigation mechanisms and terms such as Done, Cancel, Next, and Save as they apply to the portal environment. The Web clipping portlet utilizes these same mechanisms and conforms to the general look and feel of the other portal administration portlets. You should also be familiar with general WebSphere Portal terminology and concepts such as pages, page groups, portlets, and portlet applications.

Lastly, please note the following throughout the tutorial.

• It is assumed that the location of the server where your WebSphere Portal is located is http://portal.mycompany.com
• It is assumed that the password for the administrator account (wpsadmin) is wpsadmin
• All screen shots displaying portal pages show theses pages with the default theme and skin for that page. If you have modified your preferences for any of the pages herein, you may see a different configuration and layout of the portlets and page controls than those shown in the figures.

You have reached the end of this section. In the next section, you will learn how to access the Web clipping portlet.

Back to top

Accessing the Web clipping portlet

The Web clipping portlet is housed under the Portlets page on the Administration page group. To access this page, you will need to have administrative privileges or the appropriate equivalent. To access the Web clipping portlet, complete the following steps.

1. Point your Web browser to http://portal.mycompany.com/wps/portal
2. Click the Log in button ().
3. In the User ID entry field, enter wpsadmin.
4. In the Password entry field, enter wpsadmin.
5. Click the Confirm button () or press the Enter key.

Once you have completed the steps above, you will be presented with the Welcome page within the Home page group. This page will look similar to that shown in figure 1.

From the Welcome page, you will now need to navigate to the appropriate page and page group containing the Web clipping portlet. To do so, complete the following steps.

1. Using the page group navigation control, select the Portal Administration page group. Note: The page group navigation control will be different depending on the theme and skin you have selected. In Figure 1, the page group navigation control is the drop-down menu located at the top left of the page above the page name.
2. Select the Portlets page from the list of pages. Note: Again, the actual control and location of the control may differ from theme to theme.
3. Select the Web Clipping portlet from the tabbed list of portlets.

Once you have completed the steps above, you will be presented with the Web Clipping management page. The page will look similar to that shown in Figure 2. From the Web Clipping management page you can perform all the operations that are necessary to manage your Web clippers, or cliplets.

The Web Clipping management page

Take a look at the page in Figure 2. The primary control on this page is the list on the left of the page. This list displays all the Web clippers that exist within your portal. Since we haven't yet added any, the list is empty.

To the right of this list are three buttons labeled Add (), Edit (), and Delete (), from top to bottom. Each of these buttons invokes a particular Web clipping management function. As you might guess, the Add button lets you create a new Web clipper within your portal. The Edit button lets you modify the Web clipper that is selected in the list on the right. The Delete button allows you to remove the Web clipper that is selected in the list on the right. Note that both Edit and Delete require a Web clipper to be selected. If you select either one of these without first selecting a Web clipper, you will be prompted to make a selection. Again, since we haven't added any Web clippers yet, we can't make a selection.

You have reached the end of this section. In the next section, you will learn how to create a new Web clipper.

Back to top

Creating a Web clipper

Now that we've learned how to access the Web clipping portlet and become familiar with the Web Clipping management page, it's time to create our first Web clipper.

Specify basic settings

The first step in creating a new Web clipper is to specify the basic settings that tell the Web clipping portlet what to name the new Web clipper and the base URL of the external content to serve as the content of the new Web clipper.

1. From the Web Clipping management page, select the Add button. This will bring up the Basic Settings page displayed in Figure 3. For now, you can ignore everything on this page except the two entry fields labeled Name and default locale title and URL to clip.
2. In the Name and default locale title entry field, enter the name SimpleCliplet.
3. In the URL to clip entry field, enter the fully qualified URL of the location you would like to clip. Throughout this example, we will use the WebSphere samples page as the location to clip. The URL for this Web application is http://portal.mycompany.com/webapp/examples. Note: To use this in your configuration, ensure that the Default Server is running within the WebSphere Application Server.
4. Click the Next () button from either the top or the bottom of the Basic Settings page.

Clip the contents

The next step in creating a new Web clipper is to clip the contents of the URL specified on the Basic Settings page. Clipping a Web page is the process of selecting elements of the page to be retained in the output of a Web clipper. Only those selected (clipped) elements will be displayed within the output of the Web clipper. All other elements will be discarded, that is, not displayed in the output. There are three methods for clipping the contents of the page within the Web clipping portlet. This tutorial covers only the first method -- HTML clipping.

HTML clipping (default) Despite its slightly misleading name, this method of clipping does not require any knowledge of the HTML tagging language. It is the easiest of the three methods and is also the default method. When selected, the Web clipping portlet will display a rendered view of the contents from the specified URL. That is, it displays it as you would see it in a browser. To select the elements of the page to clip, you simply move your mouse over the element and click on it. The element will be highlighted to indicate to you that is has been clipped. To deselect it, you simply click on it again and the element will be unhighlighted. Text clipping Text clipping is slightly more complicated than HTML clipping, in particular because it requires knowledge of the structure of the page being clipped. Text clipping allows the contents from the specified URL to be clipped based on a pair of strings whose occurrences within the content denote the boundaries of the portions of content to be retained. The pair of strings is specified by the user, the first string being the start string and the second the end string. When selected, the contents from the specified URL will be searched for literal occurrences of the start string followed by the end string. The portions of content between such occurrences are presented to the user, allowing the user to select which occurrences should be retained. No clipping As its name implies, when this method is selected, no clipping will be performed on the contents from the specified URL. The contents will be brought through untouched. This method is useful if you simply want to create a portlet to proxy some external content without filtering it.

If you don't modify the clipping options for the new Web clipper, (and we haven't done this here), the Web clipping portlet will assume that you want to use the HTML clipping method by default and it will present the HTML clipping page, shown in Figure 4.

Continuing with our example, let's say that we've decided to keep the title, Examples, and the middle four links. As you recall from above, to select the elements of the page to clip, you simply move your mouse over the element and click on it. The element will be highlighted to indicate to you that is has been clipped.

1. Select the text Examples by clicking on it.
2. Select each of the links Sample Error Servlet, Show server configuration, Ping, and Hit Count Servlet in the same manner.

After completing the steps above, your HTML clipping page should look like Figure 5. Note that the elements that you selected in the steps above are now highlighted.

Preview the contents

Now, let's explore the built-in preview functionality. This feature allows you to view a preview of the Web clipper content as you are building it within the HTML clipping page. The preview is displayed within the preview window. The preview window is accessed via the Preview () button at the top right of the HTML clipping page. If the preview window is not open, clicking the Preview button will cause the preview window to open and display a preview of the current Web clipper contents. If the preview window is already open, the contents of the preview will be updated to reflect any changes since the last time the preview was updated. In the steps below, we will excercise the preview functionality by opening the preview window, selecting elements to keep on the HTML clipping page updating the preview window, and closing it. To do this, complete the following steps.

1. Click the Preview button. This will cause the preview window to open. It should look like Figure 6. Note that as described by the inline help within this window, any links within the content are disabled and any URLs within the content have not been rewritten. This is because these features require information that is available only when the new Web clipper has been created.
2. Leave the preview window open, and return to the HTML clipping page.
3. Select the second link, labeled simple.jsp [directly accessed]... by clicking on it. The link should highlight in the same manner as the other links did in the steps above.
4. Click the Preview button again. This will cause the preview window to update. To view the update, you need to switch back to the preview window. Note: For various technical reasons, the preview window is not brought to the front when its contents are updated. The preview window should now look like Figure 6 with the addition of the extra link that was selected above.
   Figure 6. Preview window
   
   
5. When you're ready to proceed, click the Next button from either the top or the bottom of the HTML clipping page. Note that the preview window will automatically close when you exit the HTML clipping page.

Finish

The last step in the clipper creation process is to verify the output for the Web clipper you've just created. The Finish page displays an exact preview of the content of the new Web clipper, with the exception that the URLs have not yet been rewritten and links have been disabled. This is because these features require information that is available only when the new Web clipper has been created and that the links have been disabled to prevent navigation. This allows you a final opportunity to preview the contents and ensure that you are satisfied. To make changes, click the Cancel () button from either the top or the bottom of the finish page to return to the HTML clipping page. Once you are satisfied, click the Done () button.

After completing the steps thus far, your fnished page should look like Figure 7. If it does not, click Cancel to return to the HTML clipping page and select the appropriate elements. If everything looks correct, click the Done button to complete the Web clipping creation process.

Congratulations! You have just created your first Web clipper. Your Web clipping management page should now look like that in Figure 8. In the next section you will learn how to add SimpleCliplet to a page within your portal.

Back to top

Adding a Web clipper to your portal

You are now ready to add your Web clipper to a page within your portal. Because a Web clipper is simply another portlet, the technique for adding it to a page within the portal is no different than adding any other portlet to a page within the portal. Though it is slightly outside of the scope of this article to discuss this procedure, it is non-intuitive enough that we will review it. In the example below, we will add our Web clipper to the Welcome page within the Home page group. If you wish to add it to a different page, simply substitute the name of your page and its containing page group. To add the Web clipper we just created, SimpleCliplet, to a portal page, complete the following steps.

1. Using the page group navigation control, select the Work With Pages page group.
2. Select the Edit Layout page from the list of pages.
3. In the Page Group drop-down menu, select the page group named Home.
4. In the Page drop-down menu, select the page named Welcome. You should now see a page similar to that in Figure 9.
   Figure 9. Edit layout page
   
   
5. Click the Get Portlets () button. This button is located in the middle of the Edit Layout and Content page shown in Figure 9. You will now be presented with the Get Portlets page shown in Figure 10.
   Figure 10. Get portlets page
   
   
6. On the Get Portlets page, click the Show all portlets button.
7. Select the Go () button. The Get Portlets page will refresh and display all available portlets in the table labeled Search results at the bottom of the page.
8. Locate our new Web clipper SimpleCliplet within the search results table and click on the Add () button. You may not notice a visual response or action to indicate that this button has been clicked. This is okay. You will notice that the SimpleCliplet has been added to the list at the top of the page.
9. Select the OK () button. This will return you to the Edit Layout page.
10. The list at the top of the Edit Layout page should now contain a single item, SimpleCliplet. Select this item. The page should now look like Figure 11.
    Figure 11. Edit layout page with SimpleCliplet selected
    
    
11. The table at the bottom of this page displays the layout of the portlets on the Welcome page. Note that it is divided into two columns, called containers. You now want to add SimpleCliplet to the bottom of the first container. To do so, click on the Add portlet to container () button at the top of the left column. The page will refresh and the first column will be updated to include the new portlet at the bottom of the column. The page should now look like Figure 12.
    Figure 12. Edit layout page with SimpleCliplet added
    
    
12. The last step is to activate the page you have been working on. As soon as you start working on it, your portal will deactivate the page so that users cannot access it in an inconsistent state. To activate it, click on the Activate () button on the top right of the page.

Congratulations! You have successfully added SimpleCliplet to your portal. You are now ready to take a look at your first Web clipper. To do this, use the page group navigation controls to navigate back to the Home page group and the Welcome page. Your Welcome page should now look like that in Figure 13. In the next section you will learn how to add a description to SimpleCliplet and how to modify the clippings.

Back to top

Modifying a Web clipper

Now that you've added the Web clipper to your portal, what happens if you decide that the content isn't exactly what you wanted? The Web clipping portlet allows you to edit your Web clippers at any time after they have been created. Not only can you edit the clippings being displayed, you can edit any of the Web clipper's settings, including the more advanced settings which we do not discuss within this tutorial. The only thing that cannot be changed is the name of the Web clipper itself. For example, let's say that we would like to add a description to our Web clipper and that we've decided we really only need the third, fourth, and fifth links on the content page. To do this, complete the following steps.

1. Return to the Web Clipping management page using the page group and page navigation controls.
2. Locate the Web clipper named SimpleCliplet within the list box on the left of the page and select it.
3. Click the Edit () button. This will bring up the Basic Settings page just as if you clicked the Add button with the following differences:
   • All applicable fields on the Web clipping pages are automatically filled with the corresponding setting, should one exist, for the selected Web clipper, in this case, SimpleCliplet.
   • The field labeled Name and default locale title on the Basic Settings page is disabled, that is, it cannot be edited. The Web clipper name is the only field which may not be edited.
   For example, note that the URL to clip field on the Basic Settings page has been filled with the value we entered when we created the Web clipper, that is, http://portal.mycompany.com/webapp/examples.
4. In the Description field, enter My first Cliplet.
5. Click the Next button from either the top or the bottom of the Basic Settings page. This will bring you to the HTML Clipping page again. It should look like Figure 14. Note that the elements that you selected when you created the Web clipper are highlighted, telling you that these elements are already being retained.
   Figure 14. HTML clipping page with elements selected
   
   
6. Click on the second link, labeled simple.jsp [directly accessed].... The highlighting will be removed from this link, indicating that the link will no longer be retained in the Web clipper output.
7. Click on the sixth link, labeled Hit Count Servlet. The highlighting will be removed from this link as well. Your HTML Clipping page should now look like Figure 15.
   Figure 15. Final HTML clipping page
   
   
8. When you're ready to proceed, click the Next button from either the top or the bottom of the HTML Clipping page.
9. Click the Done button from either the top or the bottom of the Finish page.
10. Using the page group and page navigation controls, return to the Welcome page within the Home page group. The portlet named SimpleCliplet on that page should now look like Figure 16.
    Figure 16. SimpleCliplet
    
    

You have reached the end of this section. In the next section you will learn how to remove a Web clipper from your portal.

Back to top

Removing a Web clipper

The last task we will perform in this tutorial is to delete the Web clipper that we've created, SimpleCliplet. If you'd like to keep this Web clipper around as an example, read over this section but do not complete the tasks.

Removing a Web clipper is simple. To remove SimpleCliplet, complete the following steps.

1. Return to the Web Clipping management page using the page group and page navigation controls.
2. Locate the Web clipper named SimpleCliplet within the list box on the left of the page and select it.
3. Click the Delete () button. This will bring up the confirmation dialog shown in Figure 17.
4. Click the OK button.

Once you have completed these steps, the Web Clipping management page will refresh and SimpleCliplet will no longer be in the list of Web clippers.

Back to top

Conclusion

Congratulations! You have reached the end of this tutorial. In this tutorial, we have covered the basics of Web clipping. We have introduced the concept of Web clipping and talked about how to access the Web clipping portlet. We have also discussed how to add, edit, and remove a Web clipper and how to add a finished Web clipper to a page within your portal. As you begin to explore the Web clipping portlet on your own, you will realize, however, that there is much that this article does not cover. In fact, there is a host of topics that we have not covered in this article. Some of these topics are listed below.

Authentication How to create Web clippers that access restricted content -- content which requires some form of authentication. Proxies and firewalls How to create Web clippers that access content through a proxy or firewall. URL rewriting What is URL rewriting? How do the URL rewriting settings affect what happens when hyperlinks within a Web clipper are followed? How do they affect other URLs within the page? Single vs. multi-device clippers What is the difference between the two and under which conditions is multi-device functionality available? HTML clipping limitations Not all HTML pages can be easily clipped. In particular, there are several limitations in the areas of clipping pages with JavaScript and HTML frames.

In the next article on Web clipping, we will discuss some of these issues and step you through some of the more advanced features described above.

Top of page

Resources

• IBM WebSphere Portal Family
  
  
• IBM WebSphere Portal Version 4.1
  
  
• IBM WebSphere Portal for Multiplatforms
  
  
• IBM WebSphere Portal Toolkit
  
  

About the author

Scott DeWitt is a Staff Software Engineer at the IBM Software Group lab in Research Triangle Park, NC. He works with the Transcoding Technology group designing and developing Transcoding tools including the Web clipping portlets and the External Annotation Editor and associated tools. He enjoys playing classical guitar, reading Harry Potter (please finish the fifth book soon JK!), and spending time with his family in his limited free time. You can reach Scott DeWitt at dewittsc@us.ibm.com .

Comments (Undergoing maintenance)

Back to top

Trademarks  |  My developerWorks terms and conditions

Table of contents

• Introduction
• Requirements and assumptions
• Accessing the Web clipping portlet
• Creating a Web clipper
• Adding a Web clipper to your portal
• Modifying a Web clipper
• Removing a Web clipper
• Conclusion
• Resources
• About the author
• Comments

Local resources

• IBM Innovation Center - Austin, TX
• IBM Innovation Center - Chicago, IL
• IBM Innovation Center - Dallas, TX
• IBM Innovation Center - San Mateo, CA
• IBM Innovation Center - Waltham, MA
• Technical Briefings in North America

My developerWorks community

Dig deeper into WebSphere on developerWorks

DB2 pureScale

See how true transparent scaling architecture can be achieved on distributed platforms

Special offers