Monday, December 24, 2012

WebCenter Content Interface Branding for 11g - Part 2


Continuing from part 1 (here) ...

Building the component

Using Component Wizard, we will start a new component.

This component will be named “WCC_Interface_Branding”. The main requirement of a component name is that it be unique to the system. I usually prefix a component with the name of the customer, such that for aurionPro SENA, the component could be named “APS_Interface_Branding”. Using this convention, all custom components created for aurionPro SENA would be prefixed with “APS_” to distinguish them as created for aurionPro SENA.
For this component we will need five resources:
1.       Resource – HTML Include
2.       Resource – Static Table (HTML Format)
3.       Template
4.       Resource – default cs_string include
5.       Resource – Strings – English cs_strings
Using the Component Wizard, create each of these as follows
Type of Resource
File Name
Load Order
HTML Include/String
resources/wcc_interface_branding_resource.htm
10
Static Table (HTML Format)
resources/wcc_interface_branding_static_tables.htm
10
Template
templates/wcc_interface_branding_template.hda
10
HTML Include/String
resources/lang/cs_strings.htm
10
HTML Include/String
resources/lang/en/cs_strings.htm
10

The first string resource is for the default language strings while the second holds the English version of the strings. Since the default is English, the English file is empty. It is needed only to prevent errors.

Strings

The string we want to add is the component description string. In Component Wizard,
1.       Select the resources/lang/cs_strings.htm resource on the left
2.       Select the Launch Editor… button on the left.
If you have not configured and editor you will get an error indicating this. If you get the error then select the Options menu and select Set HTML Editor. In Linux I set this to /usr/bin/gedit.
3.       When you created the resource, a sample string was added. You can delete that.
4.       Add the following within the body tags:
<@string csCompDesc_WCC_Interface_Branding@>
The WCC_Interface_Branding component alters 
the web interface to change the out of the 
box logo to a custom logo.
<@end@>
5.       Save and close the editor
Now edit the English string file to simply state that it is a dummy file.
1.       Select the resources/lang/en/cs_strings.htm resource on the left
2.       Select the Launch Editor… button on the left.
If you have not configured and editor you will get an error indicating this. If you get the error then select the Options menu and select Set HTML Editor. In Linux I set this to /usr/bin/gedit.
3.       When you created the resource, a sample string was added. You can delete that.
4.       Add the following within the body tags:
<@string csCompDesc_WCC_Interface_Branding@>
The WCC_Interface_Branding component alters 
the web interface to change the out of the 
box logo to a custom logo.
<@end@>
5.       Save and close the editor

Templates

Now add the templates. In Component Wizard,
1.       Select the template resource on the left,
2.       Then select the add button on the right to add a new template.
3.       Since the templates we need are out of the box templates that we will modify, we need to select them from the dialog rather than recreate them. So in the AddIntradoc Template dialog, select the Select button.
4.       Check the box to Show All.
5.       Locate and select the TOP_MENUS_LAYOUT_JS template and then select OK
Note that you can sort this list by selecting the column heading.
Repeat the process to select the TRAYS_LAYOUT_JS template
The next step is to edit the templates. Select the TOP_MENUS_LAYOUT_JS template on the right and select the Launch Editor… button on the right.
It is always a good habit to include notes in your work to help others that come after you. At the top of this file I included a comment of
/* ============================================================================
   Name:        top_menus_layout.js
   Description: template is modified to change the value of the logoImage
                to point to the SENA image
   ----------
   Change History
   Rev  Date        Responsible      Comments
   ---  ----------  ---------------- --------------------------------------
    1   2012-07-05  Steve Hamilton   Original version
============================================================================ */

Locate the line with the oracle_logo.png file called out. It looks like this:
/* Header/menu bar image src values */
var logoImage = httpSkinRoot + "oracle_logo.png";
Change it to
/* Header/menu bar image src values */
/* ============================================================================
       logoImage changed to SENA image
       2012-07-05 - Steve Hamilton
============================================================================ */
//var logoImage = httpSkinRoot + "oracle_logo.png";
var logoImage = httpSkinRoot + "sena.gif";

Save and close the editor.
Repeat this for the TRAYS_LAYOUT_JS  template. Add the comment to the top:
/* ============================================================================
   Name:        trays_layout.js
   Description: template is modified to change the value of the logoImage
                to point to the SENA image
   ----------
   Change History
   Rev  Date        Responsible      Comments
   ---  ----------  ---------------- --------------------------------------
    1   2012-07-05  Steve Hamilton   Original version
============================================================================ */
Locate the line with the oracle_logo.png file called out. It looks like this:
/* Header/menu bar image src values */
var logoImage = httpSkinRoot + "oracle_logo.png";
Change it to
/* Header/menu bar image src values */
/* ============================================================================
       logoImage changed to SENA image
       2012-07-05 - Steve Hamilton
============================================================================ */
//var logoImage = httpSkinRoot + "oracle_logo.png";
var logoImage = httpSkinRoot + "sena.gif";

Save and close the editor.

Resources

The next step is the resources. In Component Wizard,
1.       Select the resource file (resources/wcc_interface_branding_resource.htm) on the left,
2.       Then select the add button on the right to add a new resource.
3.       Since the resource we need is out of the box that we will modify, we need to select it from the dialog rather than recreate it. So in the Add HTML Resource Include dialog, select the Select button.
4.       Check the box to Show All.
5.       Locate the home_page_static_content resource, select it and then select OK twice.
6.       Select the Launch Editor button on the left.
7.       Again we add a comment for those that follow. Place it outside the resource so that it will not be in the rendered pages.
locate the line
<@dynamichtml home_page_static_content@>
and replace it with
<!-- ==========================================================================
   Name:        home_page_static_content
   Description: include is modified to change the logo image and add the 
                InstanceDescription variable to the headerDescription
   ----------
   Change History
   Rev  Date        Responsible      Comments
   ---  ----------  ---------------- --------------------------------------
    1   2012-07-05  Steve Hamilton   Original version
=========================================================================== -->
 
<@dynamichtml home_page_static_content@>
8.       Next, locate these lines
<img style="margin-bottom:-5px;" src="<$HttpImagesRoot$>stellent/mailheadinglogo.gif" alt="<$stripXml(lc("wwTopBannerLogo"))$>">&nbsp;
              <$lc("wwWelcomeTo", ProductID)$></h1>
And change them to
<img style="margin-bottom:-5px;" src="<$HttpImagesRoot$>sena/sena.gif" width="72" height="36" alt="<$stripXml(lc("wwTopBannerLogo"))$>">&nbsp;
              <$lc("wwWelcomeTo", ProductID)$> - <$InstanceDescription$></h1>

Using steps 1 – 6 above, add the std_navigation_header_top_row resource to our component.
Add the comment above the resource
<!-- ==========================================================================
   Name:        std_navigation_header_top_row
   Description: include is modified to adjust the height and width 
                of the logo image
   ----------
   Change History
   Rev  Date        Responsible      Comments
   ---  ----------  ---------------- --------------------------------------
    1   2012-07-05  Steve Hamilton   Original version
=========================================================================== -->

Locate the lines
html[html.length] = '<img src="' + logoImage + '" width="119" height="25" border="0" alt="' + lc("wwLogoAltText") + ' ' + lc("wwContentMgmt") + ' ' + lc("wwHome") + '" />';

And change to
html[html.length] = '<img src="' + logoImage + '" width="72" height="36" border="0" alt="' + lc("wwLogoAltText") + ' ' + lc("wwContentMgmt") + ' ' + lc("wwHome") + '" />';

Repeat for the resource std_javascript_header_functions
Add the comment above the resource
<!-- ==========================================================================
   Name:        std_javascript_header_functions
   Description: include is modified to add the InstanceDescription 
                variable to the headerDescription
   ----------
   Change History
   Rev  Date        Responsible      Comments
   ---  ----------  ---------------- --------------------------------------
    1   2012-07-05  Steve Hamilton   Original version
=========================================================================== -->
Locate the lines
var headerDescription = "<$ProductLabel ? js(ProductLabel) : lc('wwHeaderProductName')$>";

And change to
var headerDescription = "<$ProductLabel ? js(ProductLabel) : lc('wwHeaderProductName') $>" + " - <$InstanceDescription$>";

Publish

Now we need to set up the image files to be published. In the Component Wizard,
1.       Select the resources/wcc_interface_branding_static_tables.htm resource
2.       Select the Add button
3.       Ensure that
a.       The resource type selected is Resource – Static Table (HTML Format)
b.      The file name is the resources/wcc_interface_branding_static_tables.htm file
4.       Select Next
5.       Check the Merge To check box
6.       Select to merge to the PublishedStaticFiles
7.       Make sure theTable Name is set to WCC_Interface_Branding_PublishedStaticFiles
8.       Select OK to create it
9.       Select OK to open the editor
10.   Add the comment
<!-- ==========================================================================
   Name:        WCC_Interface_Branding_PublishedStaticFiles
   Description: Merge table to the PublishedStaticFiles table
                to control the publish of the SENA resources
                to the Weblayout static directories
   ----------
   Change History
   Rev  Date        Responsible      Comments
   ---  ----------  ---------------- --------------------------------------
    1   2012-07-05  Steve Hamilton   Original version
=========================================================================== -->
11.   Then change the table be be
<table border=1><caption><strong>
 
<tr>
<td>srcPath</td><td>path</td><td>class</td><td>loadOrder</td><td>doPublishScript</td><td>canDeleteDir</td>
</tr>
 
<tr>
       <td>publish/images/sena</td>
       <td>images/sena</td>
       <td>images:logo</td>
       <td>50</td>
       <td><$doPublish = 1$></td>
       <td>0</td>
</tr><tr>
       <td>publish/resources/layouts/Trays/Oracle</td>
       <td>resources/layouts/Trays/Oracle</td>
       <td>resources:layout:Trays</td>
       <td>50</td>
       <td><$doPublish = 1$></td>
       <td>0</td>
</tr>
<tr>
       <td>publish/resources/layouts/Trays/Oracle 2</td>
       <td>resources/layouts/Trays/Oracle 2</td>
       <td>resources:layout:Trays</td>
       <td>50</td>
       <td><$doPublish = 1$></td>
       <td>0</td>
</tr>
<tr>
       <td>publish/resources/layouts/Top Menus/Oracle</td>
       <td>resources/layouts/Top Menus/Oracle</td>
       <td>resources:layout:TopMenus</td>
       <td>50</td>
       <td><$doPublish = 1$></td>
       <td>0</td>
</tr>
<tr>
       <td>publish/resources/layouts/Top Menus/Oracle 2</td>
       <td>resources/layouts/Top Menus/Oracle 2</td>
       <td>resources:layout:TopMenus</td>
       <td>50</td>
       <td><$doPublish = 1$></td>
       <td>0</td>
</tr>
</table>
12.   Save and close the editor
Next we have to set up the publish source for the component. This involves file system work as well as component wizard work. First the file system: open your file browser or terminal. Browse to the custom directory of your instance. For me, that is
/u01/app/oracle/Middleware/user_projects/domains/dev_domain/ucm/cs/custom
Here you will find the directory for your component - WCC_Interface_Branding
Change into this directory.
Now create a directory structure that mimics the srcPath of the WCC_Interface_Branding_PublishedWeblayoutFiles table we created above. Into each bottom level directory, place our sena.gif file. When you are done it should look like the following

Next, in the Component Wizard,
1.       Select the Build, Build Settings menu
2.       Here, select Add
3.       For Entry Type, select Component Extra
4.       For the Sub Directory or File, enter “WCC_Interface_Branding/publish/”
5.       Select OK
6.       Enter a version if not already there: such as “2012_10_12-dev(build 1)”
7.       Select Advanced
a.       Enter Interface, Branding as the component tags
b.      Enter WCC_Interface_Branding as the Feature Extension.
c.       Select OK
8.       Select OK again

Enable

In Component Wizard, select Options, Enable to make the component available to the content server

Restart and Test

Restart your instance.
Once restarted log out so that you can get to the static home page and log in page for verify them

Static Home Page


This looks ok

Login page


This looks ok

Dynamic Pages


This looks ok

Conclusion

You have successfully created a component to rebrand your instance of WebCenter Content.
By the way, it also works on WebCenter Content: Records.

1 comment:

  1. Congrats for your amazing work. I wonder, it is possible to change the default color of UCM instance (the blue one, at the header) ?

    ReplyDelete