|Oracle® Fusion Middleware User Interface Customization Guide for Oracle WebCenter Interaction
10g Release 4 (10.3.3.0.0)
Part Number E14110-03
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.
The image below shows the standard directory structure of the Image Service.
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.
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.
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.
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>