16 Adding Custom Images

The Oracle WebCenter Interaction Image Service hosts all static web-based components, including style sheets, images, and JavaScript files. Removing these components from the main portal server reduces the amount of processing required to make pages available to the user. This chapter describes the Image Service and how to work with it.

To add custom images to the portal UI, always copy the image file to the specially designated location in the portal Image Service. This ensures that your custom images do not conflict with the many portal images.

Image Service Structure

The image below shows the standard directory structure of the Image Service.

Description of the illustration imageserver_structure.gif

More directories appear as products and services are added to the portal. Some areas can be customized and might be slightly different in an established implementation. There are two directories directly below the main \ptimages directory:

• The \tools directory contains tools that help make the Image Service and its components more dynamic.

• The \imageserver directory contains all the web-enabled components of the Image Service used by the portal, including images, style sheets, and JavaScript files. (The \legacy, \RemoteGadgets and \webservices folders are included for backward compatibility.)

All Oracle WebCenter Interaction components are found under the \imageserver\plumtree folder; this configuration defines the namespace controlled by Oracle WebCenter Interaction. If you make any additions to the \imageserver directory, first create a subfolder with the associated company or product name.

The two main folders within the \plumtree directory are \common and \portal.

• The \common directory contains all objects that are used in the portal application and also by associated server applications.

• The \portal directory contains any objects that are part of the Image Service that are shipped with the portal. This includes images, style sheets, JavaScript objects, and help files.

Within each of the \common and \portal directories, there is a \public and \private folder. This distinction allows developers to determine whether or not a component is static and backward-compatible.

• Anything within a \public directory can be considered available for use. A public component may change slightly throughout the release cycle of the related product, but it will always be there.

• A \private directory contains implementation-specific components that should not be accessed by developers; the content within a \private directory can be changed or removed in a future release.

• Any new content added for UI customization should be stored in a \custom folder at the same level as the \public and \private directories in the appropriate area to ensure that the files will not be modified by the installer in a future release. Adding custom images is explained next.

Adding a Custom Image

As explained above, custom images should be stored in the following location in a standard portal installation: \ptimages\imageserver\plumtree\portal\custom\img.

If the image appears in a portlet or other gatewayed page, you can use the //images URI constant in the transformer Adaptive Tag library to access the URL to the Image Service. This is the recommended method. For details on using adaptive tags, see the Oracle WebCenter Interaction Web Service Development Guide.

If the image appears in a section of custom UI, you can also access the Image Service custom image folder using the code below.

// Get the base Image Service URL for a custom static content item
String strMyImageServerBaseURL = ImgSvrURLHelper.GetInstance().GetCustomURL(m_asOwner.GetIsSecuredSpace(), "portal");
 
// Add “img/” to that URL
strMyImageServerBaseURL = XPStringUtility.ForceEndsWith(strMyImageServerBaseURL, "/") + ImgSvrURLHelper.STR_L4_FILE_TYPE_IMG + "/";
 
// Create the completed URL to the image
String strImageURL = strMyImageServerBaseURL + "myImageName.gif";
 
// Assign the properties needed by this image to variables
String strImageAltTag = "Click here to see XYZ!";
String strImageHeight = "25";
String strImageWidth = "25";
 
// Create a new object of type HTMLImg
HTMLImg myImage = new HTMLImg(strImageURL, strImageAltTag, strImageHeight, strImageWidth); 

To make sure that you have generated a good image, you can print the HTML to be generated to Logging Spy using the following code:

// Print to PTSpy
String strTest = myImage.GetDisplayString();
PTDebug.Trace(Component.Portal_UI_Infrastructure, TraceType.Error, "***" + strTest + "***");  

After redeploying your code and looking at Logging Spy, you should be able to confirm that the link is valid. It should look something like the following:

<img src="http://localhost/imageserver/plumtree/portal/custom/img/myImageName.gif" alt="Click here to see XYZ!" height="25" width="25"></img>