Sunday, September 30, 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 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’.

 

Styling

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*/
.WCSiteTemplateBackground{
    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 defining:

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!

Thursday, September 27, 2012

Set a PanelTab height dynamically using JavaScript

It's not a common scenario but interesting to note down what's the use case and how to implement it.

The use case is to get the view port height on the ADF page and set height to the PanelTab or other component related to the view port height. Most sites are still designed with flow layout on fixed width of the page. Users would have all kinds of different desktop resolutions so that their browser would render the ADF pages a bit differently. Some with large resolution would have large blank space. To make the site more appealing (or even readable at least) and fit into different browser window sizes, we can definitely control the heights of ADF components using JavaScript. In this example, we will look at the PanelTab component but it can be applied to any other ADF components. There is actually a web design - responsive web design - supposed to solve these kind of problems and render the site in multiple platforms. But the solution in this blog is more or less a fix/workaround to an existing ADF application designed with flow layout that requires such effects.

First, we want to get the browser window size (height) when the page is rendered/refreshed. Using the following JavaScript to get the view port height for the ADF page.

function getViewPortHeight(evt) {
    var topComp = evt.getSource();
    var height = topComp.getProperty("viewPortHeight");
    if (height == null) {
        var vpHeight = document.documentElement.clientHeight;
        AdfCustomEvent.queue(evt.getSource(), "getHeightEvent",
        {
            height : vpHeight
        },
        true);
        evt.cancel();
    }
}


The JavaScript is called from the af:document component of your jspx page. Only af:document supports the 'load' type clientListener so we can get the heights when page loads.






The ClientListener will get the height and pass it to the managed bean for further processing. That's how the serverListener is used here.

    public void storeViewPortalHeight(ClientEvent clientEvent) {
        Double height = (Double)clientEvent.getParameters().get("height");
        log.debug("The view Portal height is : {}", height);
        getSessionScope().put("vpHeight", height);
    }


In storeViewPortHeight() method, it gets the height from the clientListener and save it into session scope.

    public void setConfigurationPanelTab(RichPanelTabbed panelTab) {
        String heightStyle = null;
        Double vpHeight = 650.0;
        if (this.getSessionScope().get("vpHeight") != null) {
            vpHeight = (Double)this.getSessionScope().get("vpHeight");
        }
        heightStyle = "height:" +
vpHeight + "px;";
        if (hightStyle != null) {
            configurationPanelTab.setInlineStyle(hightStyle);
        } else {
            log.info("View Port is not available");
        }
        this.
panelTab= panelTab;
    }


In the above method, we get the height from session scope and set it as inline style on the component setter method.

Wednesday, September 26, 2012

Manully Change the WebLogic Security Authenticator Type

It's triggered by a configuration mistake on LDAP authenticator provider. I was trying to register the OpenLDAP store with Weblogic Server. But by mistake, I chose "LDAPAuthenticator" as the provider type  which should be "OpenLDAPAuthenticator".


















I didn't realize the mistake until I restarted the Admin server and got the errors - "JPS-00027: internal error You configured a generic WLS LDAPAuthenticator".


Caused By: oracle.security.jps.service.idstore.IdentityStoreException: JPS-00056: Failed to create identity store service instance idstore.ldap.provider:idstore.ldap. Reason: oracle.security.jps.JpsRuntimeException: JPS-00027: internal error You configured a generic WLS LDAPAuthenticator.
The identity store type cannot be determined. Please choose an LDAP Authentication provider that matches your LDAP server.
                at oracle.security.jps.internal.idstore.ldap.LdapIdentityStoreProvider.getIdStoreConfig(LdapIdentityStoreProvider.java:199)
                at oracle.security.jps.internal.idstore.ldap.LdapIdentityStoreProvider.access$300(LdapIdentityStoreProvider.java:74)
                at oracle.security.jps.internal.idstore.ldap.LdapIdentityStoreProvider$NoLibOvd.getInstance(LdapIdentityStoreProvider.java:246)
                at oracle.security.jps.internal.idstore.ldap.LdapIdentityStoreProvider.getInstance(LdapIdentityStoreProvider.java:118)
                at oracle.security.jps.internal.idstore.ldap.LdapIdentityStoreProvider.getInstance(LdapIdentityStoreProvider.java:74)
                Truncated. see log file for complete stacktrace
>
<Sep 26, 2012 11:03:39 AM CDT> <Notice> <WebLogicServer> <BEA-000365> <Server state changed to FAILED>
<Sep 26, 2012 11:03:39 AM CDT> <Error> <WebLogicServer> <BEA-000383> <A critical service failed. The server will shut itself down>
<Sep 26, 2012 11:03:39 AM CDT> <Notice> <WebLogicServer> <BEA-000365> <Server state changed to FORCE_SHUTTING_DOWN>


So the admin server cannot be started because of the wrong authenticator type. But here is how to manually change the authenticator type. Target $Domain_HOME/config/config.xml, you will find the following line:













The fix is to replace "wls:ldap-authenticatorType" with "wls:open-ldap-authenticatorType". What it does is to switch the authenticator type from LDAPAuthenticator to OpenLDAPAuthenticator. Here you go, start the admin server and the error is cleared.

Tuesday, September 25, 2012

Oracle ADF Essential For Free

Personally I think this is a milestone event. Cheers!

Check out for details:

JDeveloper PM Blog.
Official link.
FAQ link.

Setup your own WebCenter Suite on a VM from scratch


I’d like to share my own “Install Notes” on step-to-step how to build your own WebCenter Suite on a VM from scratch. If you follow my notes here, you should have your own WebCenter work station in a few hours. The install notes here are based on the Linux 64 OS which is the industry standard. Let’s begin.

Software needed (can be obtained from e-delivery)

a.       Oracle Linux64 bit (ver6.2 or whatever latest)
b.      Oracle VirtualBox
c.       Oracle DB XE11g Linux 64
d.      Oracle RCU
e.      Oracle Weblogic Server 11g Linux
f.        Oracle WebCenter 11g
g.       Oracle UCM 11g
h.      Oracle Web Tier 11g

Create a new Virtual Disk

a.       Install VirtualBox on your host. Start the virtualbox and create a new virtual disk.
b.      Set the memory to 4096Mb or above depending on how much RAM you have on your host.
c.       Storage: choose “dynamic” and set the size to 50Gb

Install Linux 64bit

Download the Linux 64bit and install it on the virtual disk created in the previous step. After the system is installed, do the following using root.

Install required kernels

a.       Enable yum - on oracle Linux 6 series, do the following:
# cd /etc/yum.repos.d

b.      Update the system:
# yum update
And
# yum update kernel

c.       Install GNU C compiler and the kernel development package:
# yum install gcc
# yum install kernel-devel
# yum install kernel-uek-devel-2.6.32-300.3.1.1el6uek.x86_64
To make it more generic:
# yum install kernel-uek-devel-`uname –r`
d.      Install DKMS by using the following:

# cd /tmp
# wget http://linux.dell.com/dkms/permalink/dkms-2.2.0.3-1.noarch.rpm
# yum install /tmp/dkms-2.2.0.3-1.noarch.rpm –nogpgcheck


Install VBox Guest Addition

There are numbers of reasons that you want to install the VBox guest additions. You can enable the file sharing between your host and VM. Also, the graphic support is enhanced so the resolution of the VM is dynamically set to the VM window size.

In case there is an error in installing VBox guest addition, the error could be:


Here is the fix:

# cd /lib/modules/2.6.32-300.3.1.1el6uek.x86_64
# ls –l
You would see there is no such folder “2.6.32-300.3.1.1el6uek.x86_64” exists. So the fix is to install the package using the following:
# yum install kernel-uek-devel-2.6.32-300.3.1.1el6uek.x86_64

Before doing this step, do a vm clone or take a snapshot of the VM. Mount the guest addition, and execute the following:
# sh ./VBoxLinuxAdditions.run
Share the resource folder with the host

Install required libraries on Linux 64

Check all the required libraries from Fusion Middleware: http://docs.oracle.com/html/E18558_01/fusion_requirements.htm#BABCEFEA
This is the list for Oracle Linux 6/Red Hat 6 (Totally 17 packages)
compat-libcap1-1.10-1
compat-libstdc++-33-3.2.3-69.e16 for x86_64
compat-libstdc++-33-3.2.3-69.e16 for i686
libaio-0.3.107-10.e16
libaio-devel-0.3.107-10.e16
libgcc-4.4.4-13.e16
libstdc++-4.4.4-13.e16 for x86_64
libstdc++-4.4.4-13.e16 for i686
libstdc++-devel-4.4.4-13.e16
libXext for i686
libXtst for i686
gcc-4.4.4-13.e16
gcc-c++-4.4.4-13.e16
glibc-2.12-1.7.e16 for x86_64
glibc-2.12-1.7.e16 for i686
glibc-devel-2.12-1.7.e16
sysstat-9.0.4-11.e16

Install Oracle DB 64 bit

Create the dba group in the system:
# /usr/sbin/groupadd dba 
Create the installation folder as root
# mkdir –p /u01/app/oracle
Change the ownership of the folder:
# chown –R oracle:dba /u01/app/oracle
Modify the permission on the directory to 775:
# chmod –R 775 /u01/app/oracle
Configure the oracle user environment before installation:
Login as oracle user:
# ORACLE_SID=XE
# export ORACLE_SID
# ORACLE_BASE=/u01/app/oracle
# export ORACLE_BASE
If the domain name of the machine has been changed during OS installation, here the domain name 
must be added to the system before continue. Change the user to ‘root’:
# vi /etc/hosts
Add the domain name after the “127.0.0.1”.
Start the db install:
# su -c "rpm -i ./oracle-xe-univ-10.2.0.1-1.0.i386.rpm"
Configure the db after install:
# su –c “/etc/init.d/oracle-xe configure”
Once you finish your install, make sure it’s up and running then connect to Oracle XE as sys and change the PROCESSES param to 300.
SQL> conn sys/sena as sysdba
SQL> alter system set processes=300 scope=spfile; 
After that, restart your instance:
su -c "/sbin/service oracle-xe reload"

Using RCU to create Schemas

You can use RCU in two ways: on your host or on the Linux VM. To use it on your host (I assume it’s a 
windows host), first disable the firewall on the Linux VM so that the host can access the DB hosted on 
the VM:
# su -c “/etc/init.d/iptables save”
# su –c “/etc/init.d/iptables stop”
Then you can use the RCU on your windows to create schemas. 
To use it on your Linux VM: 
If the linux system is on 64 versions, do the following (this will 32bit lib).
# yum install /lib/ld-linux.so.2 
# yum install libXext.i686*
# yum install libXtst.i686*
After this, we can continue with RCU – 
# cd rcuHome/bin
# ./rcu

Install JRockit JDK

      # ./jrockit*****.bin

Install Weblogic Server

Set the JAVA_HOME and PATH evn variables. Navigate to the directory of the 
wls1036_generic.jar:
# export JAVA_HOME=/jrockit_install_path
# export PATH=$JAVA_HOME/bin:$PATH
# java –d64 –jar wls1036_generic.jar

Install WebCenter/UCM/WebTier


Modify the limits.conf file:
# vi /etc/security/limits.conf
Add the following if not exist:
# oracle soft nofile 4096;
# oracle hard nofile 4096;
And run the installer:
./runInstaller

Create WebCenter WSL domain (clustering, SSL)

# cd $FMW_HOME/Oracle_WC1/common/bin
# ./config.sh

After all the above, you can start your Admin server and managed servers. You are ready to explore your WebCenter environment.

Monday, September 24, 2012

JDBC Data Sources and Connection Pooling

Here I am describing JDBC Data Sources and Connection Pooling using a few slides that I borrowed from Oracle Weblogic 12c BootCamp.

1. What's JDBC Data Source?




2. Scope of Data Source: system or application. All JDBC configurations must conform to the new weblogic-jdbc.xsd schema. IDE can validate the JDBC modules based on the schema.




3. What’s a Connection Pooling?




4. How Connection Pooling works?




5. Benefits of Connection Pooling?




6. How Data Source Connection Pooling is used?




7. Connection Pooling Configuration




8. Connection Pooling Hints





Saturday, September 22, 2012

Oracle Weblogic 12c


I attended the Weblogic 12c boot camp this week and learned some great features of it and I like to share some of them.

The Cloud Application Foundation: everything you need in one box. It’s the foundation of the next generation of Fusion Middleware stack. Oracle traffic directory sitting on the top serves the software load balancer (can replace web cache server). Virtual assembly builder sitting at the bottom better simplifies the deployment process for multi-tier application topologies in a centralized virtualized environment.


Oracle Traffic Director: Oracle Traffic Director is a fast, reliable, and scalable layer-7 software load balancer that you can deploy as the reliable entry point for all HTTP and HTTPS traffic to application servers and web servers in your network. OTD will replace Oracle Web Cache as a software load balancer on Oracle Exalogic Elastic Cloud. Oracle says it delivers a 3 to 4 times performance boost to the Oracle WebLogic applications. OTD Data sheet can be found here. Documentation on OTD can be found here. Documentation on VSB can be found here.

Java 6/7 support: with new Java release, you are supposed to write less code to achieve your functionalities. Dependency injection, annotation, POJO and REST are all supported. You will have a cleaner and more maintainable application with Java 6/7. Besides, some nice code automations: on JDBC, no need to close the connection and the Java does it for you after execution of your code.









Enhanced Enterprise Manager with Cloud Control: lots of new features come with the EM on performance monitoring and diagnostics, configuration management and cloud management. You can take a snapshot of the diagnostics logs before restart the server for later analysis. Cloud management with build-in oracle support allows easy patching/unpatching and upgrading.




Wednesday, September 19, 2012

How to get the source codes of Build-In WebCenter Spaces Task Flows

Since WebCenter PS5, Oracle brings lots of standard task flows inside WebCenter Spaces. Some of them are already registered within the resource catalog and ready to use, most of them are also ready but you need to add them to the resource catalog first for business users to utilize. But from a developer standpoint, you may be interested in reviewing the source codes of the standard task flow shipped with Oracle WebCenter Spaces. Today I will show you how to locate the EAR or WAR file and take the advantages of build-in task flows.

After the Oracle WebCenter Spaces is installed, go to the following directory and you will find the relevant EAR and WAR files are already installed. In my case, it’s WebCenter PS5 but it’s applicable to other 11g releases.

$FMW_HOME/<WebCenter Instance Name>/webcenter/modules/oracle.webcenter.spaces_11.1.1













The one we are interested is the one at the bottom ‘oracle.webcenter.spaces.webapp.war’ file. You can ftp the file from the server to your local directory and extract it. You will find there are two subfolders in the file – “META-INF” and “WEB-INF”. If you are familiar with WebCenter/ADF development/deployment, those two folders should not be strange. The “META-INF” folder contains configuration files for applications, extensions, class loaders and services. The “WEB-INF” contains the static content that could be referenced and defined in some configuration files in META-INF folder for libraries pre-loading. So there is a folder ‘lib’ residing in WEB-INF and contains the JAR files that is pre-loaded when the server starts and they are the libraries that contains the build-in task flows. Here is the snapshot of the lib directory:


Again, it contains several JAR files that aggregate different set of resources in terms of their modules of functionalities and scope of use. We will look at the one at the bottom “spaces-web” JAR file. In this jar file, you will find all kinds of build-in task flows that are used internally in standard WebCenter Spaces resources. For example, in WebCenter Spaces, the default page template is a template called “Top Navigation”. In the template files, there are several regions being used are those task flows, which can be found here. Take the navigation region as an example, you could find the navigation task flow in this package ‘oracle.webcenter.webcenterapp.view.taskflows.navigation’. Here is the screenshot of the directory you can find about navigation task flows:


In the same ‘spaces-web’ jar file, you could find:

  •  All the templates jspx file and their page definition files
  • Standard task flows that you can access from resource catalog
  • Java Beans that manage/support the transactions for the task flows and page fragments

If you want to learn a certain functionality that how Oracle WebCenter build or just find out the source codes that behind the scene, you can find all the relevant info by this means.