Saturday, September 29, 2012

Skin Analysis on WebCenter Spaces Page Template

Oracle WebCenter Spaces provides framework and resources that ready for business users to use after installation and configurations. But we all know the default look and feel of the site is really not appealing. I’ve seen prospective customers direct eyes on the WebCenter great features but step back because of the look and feel. I will have to confirm them that the site can be skinned and customized to whatever you want the site to look like. And that’s true, there are indeed great looking sites out there using sophisticated CSS and JavaScript (e.g. JQuery). Those sites are mostly designed from a HTML markup perspective and mixed with ADF components, which could make the source codes of the pages hard to read and maintain. Hard to read? Who cares, as long as it works for what the customer wants. But one of the drawbacks I’ve seen and it’s worthy to mention is it breaks the partial page rendering because of the mix of html and ADF components. Most of the pretty WebCenter public sites so far don't have the PPR feature - every navigation is a full page refresh - which doesn't surprise me (If anyone knows any public sites with PPR enabled, please let me know). Therefore, I will do a few analyses on the standard WebCenter Space page template and make a few changes on the CSS file to improve the look and feel of the WebCenter Spaces site. It might not be good enough for your needs, but should be a good start to begin with.

The default page template widely used in WebCenter Spaces is the one called “Top Navigation”. Please note there is another version of top navigation but stretchable. I will take the non-stretchable one to present as it is the default one being used. Here is the screenshot of it using the default top navigation page template. 

Page Structure

I’ve marked four regions which will represent on the page definition later on. To grab the source codes for the page template, just go to the administration section -> resources, from the ‘page template’ group, make a copy of the top navigation template and rename it whatever you like, from the edit link, you will be able to see the ‘Edit Source’ link enabled and that’s how you can grab the source code easy and quick. You can paste the source codes into JDeveloper which will help us to understand the page template structure. Here is the screenshot of the page structure:

As you can see, the page template starts with a panelGroupLayout in a scroll layout, and this is how this template is a flow layout template (fixed width of the page). For a stretchable layout, you will see it starts with the ‘panel stretch layout’.

Next you will find two Spaces tags <wcdc> and we will skip that.

Next is a decorative box component and it’s the template header part and the A region in the first image. This region contains site logo, a search inputbox region and several command/go links. You are definitely free to customize those components if you like. One thing you may consider to do is to upload your site logo to content server and put the image url to an ADF image component for the site logo. Decorative box comes with two facets: center and top. By default, the top facet doesn’t have any background (white color), but the center has some light gray background on the top edge of it. See the following:

Besides, decorative box provides an additional property for styling call “theme”.

Tips: About Theme

The purpose of themes is to provide a consistent look and feel across multiple components for a portion of a page. A common usage for themes is in a page template where certain areas have a distinct look. For example, a page may have a branding area at the top with a dark background and light text, a navigation component with a lighter background, and a main content area with a light background.
A component that sets a theme exposes that theme to its child components and therefore the theme is inherited. Themes can be set (started or changed) by the following components:

·         af:document
·         af:decorativeBox
·         af:panelStretchLayout
·         af:panelGroupLayout

By definition, themes are cascaded down through all child components. All HTML elements that are rendered by a rich component within a themed component will have the theme added to its list of style classes. Themes are not compatible with tonal styles and therefore only one method can be used per page (themes or tonal styles). A blank theme will remove the current theme, and a value of "inherit", null or not setting a theme will use the current theme. Skins are the sources of the themes. Some skins may have no themed definitions. Suggested theme names include "dark", "medium", "light", and "default".

Besides decorative box, Spaces have additional theme styling, such as “webcenter” is applied to the decorative box by default. If you want to have your own background and styling, I suggest avoiding using the decorative box simply by dragging its direct child out of the decorative box. In this case it’s ‘panel border layout’. Just drag the panel border layout out of the decorative box and comment it. You can apply your styling directly on the panel border layout.

Next component is the navigation panel region which is marked as ‘B’. The region is referring a build-in navigation task flow. To examine the source codes of it, please refer to another blog I posted here.

Next part is the content which is just a facet in a page template. It’s marked as ‘C’.

The last part is the ‘panel border layout’ component again wrapping the footer of the page template. It’s marked as ‘D’.


Spaces template uses style class for styling purpose, which comes with “WC” as its prefix. Now I will list all the style class that are used in the top navigation template by what effect it could take for styling in the page.

Here I am going to change the background to white:
/*override the background*/
    background: #FFFFFF !important;

Change the navigation background to dark gray color:
/*change the styling of the page template top navigation*/
.WCSiteTemplateTopNavPanel {
    background: #666666 !important;

To change the navigation links text color to white:
af|commandMenuItem.WCSiteTemplateTopNavPanel::bar-item-text {
    color: #FFFFFF !important;

You can add hover effect if you want by defining:
af|commandMenuItem.WCSiteTemplateTopNavPanel::bar-item-text:hover {}

Define the background of the navigation link when it’s selected:
/*the styling when tab is selected*/
.WCSiteTemplateTopNavPanelSelected {
    background: #FF8000 !important;

You can define the text color to change when it’s selected by:
af|commandMenuItem.WCSiteTemplateTopNavPanelSelected::bar-item-text {}

Define the navigation link to change color when hovering:
/*the styling when mouse hover*/
.WCSiteTemplateTopNavPanel:highlighted {
    background: #7A7A7A !important;

Change the footer background:
/*change the background of the page template footer*/
.WCSiteTemplateFooter {
    background: #666666 !important;

Change the header and footer font color:
/*change the font color on the template header*/
.x106, .x107 {
    color: #FFFFFF !important;
    font-weight: bold !important;

By the above few CSS changes and some minor change on the template, you will find your pages could look like this:

Is it nice and neat? Besides, you won’t have your ppr navigation broken. Enjoy!

ContentiD - the iPhone app for Oracle WebCenter Content

Hey all, 

We've officially announced the release of our WebCenter Content mobile app ContentiD!

 It will have the ability to execute searches, save searches, execute saved searches, review search results, view content metadata, and review and process workflow assignments.

The app is currently in the approval queue with Apple and will be available soon. Once it is released, we will announce it right here and provide you the link for the download in the iTunes store. If you’d like to receive an email when the app is available, please send an email to with the subject line “ContentID Notification”.

For more information, please see:

For more of our mobile offerings:

Thanks all!


Tuesday, September 25, 2012

Launching News Articles Using WebCenter Navigation Model’s Display Options

Custom WebCenter Portal  Application - (PS5)

One of our customers had a requirement to display news articles on their custom
WebCenter Portal. On the home page of the portal, user can see a list of news articles
and clicking on any of them, displays the full news article. User can click on a “Send
Email” link on the full news article page and type in an email id to send the link to. The
recipient can then click on the email link to view the full article. This is a very common
behavior in most of the news sites today.

In our solution, the news articles are created and stored as HTML documents in the
WebCenter Content store. Creation and management of the news articles is out of
scope for this blog.

WebCenter Portal provides many out of the box document management task flows for
displaying and managing HTML content. We used Document Viewer, for displaying the
articles (HTML content stored in the WebCenter Content) and also for providing
comments and Likes features available with Document Viewer task flow. Using the
“featuresOff” parameter, we can hide all the other features not required on the
Document Viewer task flow.

To provide additional customer specific functionality like “Send Email” and calendar
events, a custom ADF task flow was created as a wrapper for the Document Viewer taskflow.  The task flow defines an input parameter “newsId” to identify the article to be
displayed and passes this input parameter value to the document viewer task flow’s
input parameter “resourceId”.

For making the page accessible through a link in the email, WebCenter Navigation
Model‘s display options “ExternalId” attribute was used.

Here’s a step by step implementation for creating the article page and using the
navigation model to make it accessible externally.

  1. Create a custom task flow called “NewsArticle” and define input parameter as “newsId”. Map the value to #{pageFlowScope.currentNewsId}
  2. Add a view activity and map it to view.jsff file.
  3. In the view.jsff add Document Viewer task flow and map the bind parameter resourceId to #{‘UCMConnection#dDocName:’}#{pageFlowScope.currentNewsId}where UCMConnection is the name of the connection to the WebCenter Content server.
  4. Create a WebCenter page “newsarticle.jspx” under /oracle/webcenter/portalapp/pages/news. (Note: This page could be anywhere in the Web Content folder, but to make it manageable at runtime; it must reside under /oracle/webcenter/portalapp folder.)
  5. Add the custom task flow “NewsArticle” to the newsarticle.jspx page and map its input parameter “newsId” to ${facesContext.externalContext.requestParameterMap['newsId']} This code retrieves the value of the newsId request parameter and passes it to the NewsArticle Task Flow.
  6. Define a new navigation model e.g. link-navigation-model.xml under /oracle/webcenter/portalapp/navigations folder in the WebCenter project. This is mainly to avoid the page appearing on the main portal navigation. This can be also handled by using default navigation model and hiding the newsarticle node programmatically. But if there are many such pages used in the portal, then using a separate navigation model is more efficient.)
  7. Add the newsarticle.jspx page to the new navigation model by opening the navigation model and dragging and dropping the newsarticle page in the model.
  8. Select the page in the model and click on the plus sign under URL Attributes and select ExternalId. Specify the Display Value as “MyNews”.
This completes the display part. Let's take a look at the link creation.

  1. “ExternalId” is “an ID to enable a direct reference to a node in the navigation model from a static link in the page”. This attribute can also be used with a non-default navigation model to make a node in the non-default navigation model accessible through static links.
  2. The URL to use is /faces/wcnav_externalId/MyNews?wcnav.model=/oracle/webcenter/portalapp/navigations/ link-navigation-model&newsId=<newsId>
    MyNews – is the externalId attribute value, specified for the newsarticle node.
    wcnav.model value is the full path to the non-default navigation model (without the xml extension)
    newsId – is the id of the news article currently being viewed by the user. In our case, the navigation from the home page to full news page was implemented using “Resource Action Handling” framework.
  3. One challenge we faced, in implementing this solution, is that the Oracle documentation has the parameter name as “wcnav.modelPath” where as the actual parameter required to specify the model path is “wcnav.model”. We found it the hard way, but hope this blog helps others.
  4. Append host, port and web context root information at the beginning of the URL to form an absolute URL. Send the URL in an email body using Java Mail API.
  5. When the recipient clicks on the link, WebCenter framework can identify the page by looking at the wcnav.model and ExternalId attributes. The article id passed in the “newsId” request parameter identifies the article to be displayed, which is passed to the Document Viewer task flow.

    By using WebCenter navigation model’s display option attribute “ExternalId”, we can make a WebCenter page accessible externally. Using a simple request parameter approach and a Document Viewer task flow, we can display news articles that are accessible from the external URLs.
Note: Document Viewer task flow displays some additional document information like 
name of author and last updated date. This can be easily hidden by using skinning

Wednesday, September 19, 2012

Considerations on WebCenter/ADF Performance

This post is originally posted here.

Performance for WebCenter/ADF is always a hot topic. For every application (ADF web apps, WebCenter Portal/Spaces apps, or others), you will be ended up to deal with it sooner or later. Sooner is of course better, it's recommended to be considered at the time the project is plotted out since you will need to consider your budget for hardware/software acquisitions. I have experienced with couples of clients that requested to tune performance after the application went to production which is still OK but not the ideal time, simple because there are so many restrictions dealing with performance tuning after it went on production. The performance no doubt is a broad topic. This article will try to include a checklist of areas you need to bear in mind for the matter of performance in the WebCenter/ADF world, but will not go into very detail on each section.

Performance is limited by many factors, such as hardware resource and the application architecture. The CPU type/speed, physical memory directly determines if there is any bottleneck to maintain the application performance at an expected level. The application architecture defines the interaction between applications, middleware components, databases and various business domains. It is a potential high-level constraint for the application performance if the application architecture is not laid out for best practice in performance, scalability and high availability. It is also important for business users or stock holders to understand user expectations. One way to set the expectations is to perform a capacity planning with assessment of system performance goals. Such information can be obtained to help understand the goals: anticipated number of concurrent users, amount of data and consistency, target CPU/memory usage, number and size of requests, network latency, etc.

Ideally, for a typical WebCenter/ADF application, consider the following setup in terms of performance, scalability and availability.
·                     Clustered Managed Servers
·                     Cache Servers (e.g: Web Cache Server)
·                     Hardware Load Balancer (and/or software load balancer)
Setting up the clustered environment will help performance by distributing loads over several managed servers. Besides, JVM garbage collection impact can be reduced and the response stability can be improved.

1. Caching 

Caching is another broad topic and can be addressed alone for another article. Basically caching can be implemented on various components on various layers. Caching can be implemented in the following areas:
·                     Client browser caching
·                     Web Cache Server caching
·                     Weblogic Server caching
·                     Database caching
Client browser caching and compression can be enabled to cache the compressed requested objects locally.  This way it saves the trips to fetch the cached objects from the server and performance can be greatly improved. To configure, Apache Http Server needs to be installed (Oracle Http Server is one type of Apache Server). Caching is enabled by defining the http header field "Cache-Control". Refer to here for details. The syntax could be:

Header set Cache-Control "cache-request-directive, cache-response-directive"

Apache uses mod_deflate module to compress. Refer to this link for details. Here is a list of MIME type that can be compressed:
·                     text/plain
·                     text/xml
·                     application/xhtml+xml
·                     text/css
·                     application/xml
·                     image/svg+xml
·                     application/rss+xml
·                     application/atom+xml
·                     application/x-javascript
·                     text/html
A file with extension ".conf" needs to be created for the caching and compression. The file needs to be put under $WebTier_Directory/instances/instance_name/config/OHS/ohs_name/moduleconf to be taken by OHS when the next time server starts.

Oracle Web Cache is the primary caching mechanism provided with Oracle Fusion Middleware. It improves the performance, scalability, and availability of Web sites that run on Oracle Fusion Middleware by storing frequently accessed URLs in memory. To use Web Cache, it needs to be installed and configured. You will need to configure the memory size for caching, define the caching rules, define the expiration policies, etc. Once the configuration is done, restart the web cache server and the caching activity can be monitored by the request statistics and popular requests. From there, you can also tell whether your caching rules are caching efficiently otherwise update or add new caching rules.

There are other caching available, like enable coherence on the weblogic server and database caching which will not be covered in this article. I would like to blog something on coherence in a later effort.

2. JVM Tuning 

JVM Tuning is another broad topic. Jrockit JVM is the default one for Fusion Middleware currently. It is the first JVM to adopt adaptive memory management system whose behavior is based on runtime feedback. The foremost advantage of automatic memory management is its contributions to the speed of the software development cycle. An additional advantage is that an adaptive memory manager may pick the appropriate garbage collection strategy for an application based on its current behavior, appropriately changing the number of garbage collection threads or fine turning other aspects of garbage collection strategies whenever needed. The question for which garbage collection algorithms is suitable for your WebCenter/ADF cannot be answered without investigation and analysis. A best way to analyze is to test your application with experiments. Try with different combination of GC policy, heap size, nursery size, and other parameter if applicable (eg: pause time target). Jrockit mission control provides a great graphic way to monitor the JVM performance. You could watch the JVM performances online or record the activities by flight recordings.

3. Application Tuning

Source codes with quality will be wrote with considerations of performance. There are so many places you can mess around with performances. Code refinement or code reviews by peers from time to time are always good practices. 

3.1 ADF BC/Faces Tuning

If you are working on an ADF project using BC as the model layer, there are a few declarative options to tune VO and AM pooling. ADF application should always be tested to ensure it's activation-safe by disabling AM pooling.

There are many tips on this sub-topic. I would refer to this Oracle document for details - Oracle ADF performance tuning.

3.2 WebCenter Portal/Spaces Application Tuning

There are numbers of factors that could impact the WebCenter Spaces/Portal performance inside application configurations. The following configuration files can be examined:
• adf-config.xml - Stores design time application-level settings, such as which discussions server or mail server the WebCenter Portal application is currently using.
• web.xml - Stores initialization parameters, custom tag library locations, and security settings.
• connections.xml - Stores connection details for WebCenter Portal services.

CSS/JavaScript can be heavily used in WebCenter portal/spaces applications. It's recommended to centralize those files to reduce the possibilities of duplicate usages. Since every page is based on a page template, the page template is a good start to be examined for any code refinement. Here is just an example list of items could be checked when examining a page.

a. Consolidate inline styling into one CSS file by converting all inline styles into class style.
b. Centralize CSS files if multiple CSS files exist
c. Consolidate individual JavaScript functions (from template, individual pages and custom task flows) into one centralized JavaScript file.
d. Identify and remove duplicate/redundant CSS, JS, ADF and HTML code (this is common in CSS especially).
e. Check the security permissions on the user visibility and rendered attributes for ADF component tags to make sure they are not making incorrect or duplicate calls.
f. Examine the following improvement points in the page source codes:
  1. Component id attribute value length – if longer than 7 characters then change it less.
  2. Client component attribute set to ‘true’ – This should be set to false most of the time unless there is a specific need for the component to be added in the DOM at the render time.
  3. Immediate attribute – determines load behavior of the button to button (load immediately upon page load, or lazy ‘after’ page load).
  4. Other property attributes – any other unnecessary or incorrectly configured attributes and ADF tags.

g. Search for render=”false” and visibility=”false” and remove if not needed.
h. Check all code – including the page definition for the template for any external references to resources and task flows that are not being used.

4. Others

4.1 OID/LDAP authenticator can be tuned and I would refer to this blog - Tuning Weblogic LDAP Authenticator Providers.

4.2 CDN is now supported in PS5. Check out 
this link for a How-to example.
Also, Logs can be helpful to determine performance issues.

To end, performance tuning is not one time job. Performance should be considered at the beginning of a project (before development) and carried on multiple times during development. After the development is done, stress test should be run at least once to make sure the application performance meets the business's expectations. 

Thursday, September 13, 2012

WebCenter Content - 101 syllabus

There are a number of posts in the forums looking for starter information. Don't worry. There are many resources out there that can be easily accessed online.

The first place to go is the application's documentation. It is a resource that should be each and every person's first line of defense. At least read through the table of contents before you start to code.

WebCenter Content Documentation Home:

The WebCenter community page also has dozens of resources that are publicly available:

A key asset is the 2006 "Definitive Guide to Stellent Content Server Development" written by Bex Huff:

And, a number of sample components can be found from the Downloads page:

and, also on the "Sample Code" page:

Each of those links can be found from the product's homepage on There are many, many resources out there, but you're only going to get out of them what you put in!

The Oracle team and a number of people in the community (forums & blogs) have put a vast amount of information out there for everyone's reference and knowledge. All you have to do is search and absorb.

Once you've put some of your own time into your skill set, then the next step is putting together a forum post or support ticket. Each will be similar in content. You'll need to supply a basic amount of information so that others will have some idea of your situation (remember that we haven't been over your shoulder for the last 10 hours debugging with you! :) )

  • Your basic environment (os, application version & build #, application server version, whether you're using a web server or any other application layers, database version and type, and any other pertinent information)
  • Your requirement - what you're expecting the system to do
  • Your Error - the error message, screenshots, full stack traces, etc
  • Your Use-Case - how did you trigger the error. is it regular or is it random? do some cases work, but other fail? Was this working in the past, but recently stopped working? 

Always error on the side of too much information.

I bet that there's at least a 50% chance that you'll uncover your own solution when you go through that last scan of due diligence!

The links and information above will send you on your journey.

Good luck!