Embed Size (px)
Citation preview
Customizing IBM Lotus Connections 3.0
Ignacio Sánchez ([email protected])Client Technical Professional for IBM Collaboration SolutionsIBM Software GroupMadrid, M Spain
Jim Antill ([email protected])Software DeveloperLotus Quickr Templates TeamIBM Dublin Software LabMulhuddart, Ireland
Robert Campion ([email protected])Software EngineerIBM Dublin Software LabMulhuddart, Ireland
Lorenzo Notarfonzo ([email protected])Software EngineerIBM Dublin Software LabMulhuddart, Ireland
November 2010
© Copyright International Business Machines Corporation 2010. All rights reserved.
Summary: This white paper describes the various ways in which you can customize IBM® Lotus® Connections 3.x, including adding your company logo to the interface, changing the colors shown in the UI, presenting an agreement document on the log-in screen, adding custom menus, etc. We show examples of how to make these changes and explain the relevant supporting technology.
Table of Contents1 Introduction................................................................................................................22 Understanding the Wsadmin tool..............................................................................3
2.1 Overview.............................................................................................................32.2 Using the tool.....................................................................................................3
3 Setting up for customization......................................................................................43.1 Application source directories............................................................................43.2 Connections customization variables.................................................................53.3 Understanding the customization directories.....................................................63.4 Publishing customizations..................................................................................6
1
4 Customizing the interface..........................................................................................84.1 Adding a link to the header...............................................................................104.2 Viewing the results...........................................................................................104.3 Modifying theme colors.....................................................................................114.4 Adding menus to a header...............................................................................144.5 Adding a tab to the Getting Started page.........................................................164.6 Customizing the footer.....................................................................................20
5 Customizing for your company policy......................................................................225.1 Changing the log-in page.................................................................................225.2 Showing the Agreement text............................................................................235.3 Amending the log-in button..............................................................................245.4 Function to respond to the agreement.............................................................24
6 Customizing error pages.........................................................................................256.1 Parameters passed to the page.......................................................................256.2 Setting error values..........................................................................................266.3 Outputting details of the error...........................................................................26
7 Internationalization.................................................................................................267.1 Resource bundles............................................................................................277.2 Customizing resource bundles.........................................................................277.3 Customizing JavaScript strings........................................................................28
8 Working example: License agreement strings........................................................309 Working example: Customizing blog JavaScript strings.........................................3210 Conclusion.............................................................................................................3311 Resources..............................................................................................................33About the authors.......................................................................................................34
1 IntroductionLotus Connections 3.0 can be tailored to suit particular requirements; for instance, different aspects of the application can be changed to reflect a company's branding and policy. This white paper describes the various ways in which this can be done, covering topics that include:
• Adding your company logo to the interface• Changing colors shown in the UI• Presenting an agreement document on the log-in screen• Adding custom menus• Customizing localized strings used in the application
Supporting technology such as the wsadmin interface is also described so that you have all the knowledge you need to make the described changes.
Examples of how to make these changes are shown, and the supporting materials can be used to implement these changes on a Lotus Connections 3.0 server.
2
2 Understanding the Wsadmin toolSome of the steps to customize the Lotus Connections 3.0 interface require using the wsadmin tool. This section explains how to use this tool.
2.1 OverviewThe wsadmin client is a scripting environment that's installed as part of the Lotus Connections 3.0 setup. This client is used to run scripts to perform tasks such as checking out files. A number of ready-built scripts are supplied with Lotus Connections that handle all the tasks described in this article.
This section briefly covers how to start and use the wsadmin tool. Details of when to use the wsadmin client are given later in this paper. When the time comes, these instructions can be used to start the client and run scripts.
2.2 Using the toolBefore starting the tool, first ensure that the WebSphere® Application Server that's being used by Lotus Connections is running. The wsadmin client can only be used when WebSphere Application Server is running; if it's not, then start WebSphere Application Server.
To start the wsadmin client, open a Command prompt in Microsoft® Windows® or open a Terminal session, if you're using AIX®/LINUX®, and change to the directory:
<WASHome>\profiles\<DMGR>\bin
Note that wsadmin must be started from this location; otherwise, the scripts supplied with Lotus Connections won't work properly.
Once you're in one of those directories, launch wsadmin by using one of the following:
Microsoft Windows:wsadmin.bat -lang jython -user <admin-user-id> -password <password> -port <SOAP_port>
AIX/LINUX:./wsadmin.sh -lang jython -user <admin-user-id> -password <password> -port <SOAP_port>
The wsadmin tool uses the Simple Object Access Protocol (SOAP) Connector Port to communicate with WebSphere Application Server (the default port is usually 8879). If this has been left at the default for your installation, then it doesn't need to be specified.
However, if the SOAP Connector Port has been customized, then you must specify it using the -port argument on the wsadmin command.
If you're not using the default SOAP Connector Port, then you can find details for this in the WebSphere Application Server Console.
3
Deploying to the network:1. Go to the System Administrator / Deployment Manager.2. In Additional Properties, expand Ports, and look for the
SOAP_CONNECTOR_ADDRESS entry.3. When wsadmin has successfully started you'll be greeted with the wsadmin>
prompt, /wsadmin.sh -lang jython -port 8879 -username admin -password adminpass:
[root@myserver ~]# cd /opt/IBM/WebSphere/AppServer/profiles/Dmgr01/bin/ [root@myserver bin]# ./wsadmin.sh -lang jython -port 8879 -username admin -password pass WASX7209I: Connected to process "dmgr" on node nodeName-0CellManager01 using SOAP connector; The type of process is: DeploymentManager WASX7031I: For help, enter: "print Help.help()" wsadmin>
Running scripts using wsadmin:You can run scripts in the wsadmin console by entering text at the wsadmin> prompt. The exact details of what to enter are described when the commands are required.
Getting help and exiting the wsadmin console:You can display Help text for the wsadmin console, at the wsadmin> prompt, by typing:
wsadmin>print Help.help()
Find help on a particular topic by using Print Help.xxxx, where xxxx is one of a number of options. For example, to get help about the AdminApp object:
wsadmin>print Help.AdminApp
Typing “quit” or “exit” (without quotes) at the wsadmin> prompt will exit the scripting session:
wsadmin>exit
3 Setting up for customizationThere are a few things you need to do and understand before starting to customize Lotus Connections 3.0.
3.1 Application source directoriesLotus Connections 3.0 consists of a number of different applications (Activities, Blogs, Communities, etc.) Each application has its own .ear file in the Connections deployment, with each .ear containing the .war file for that application.
All the .war files are in the directory:
<WASHome>/profiles/<profile_name>/installedApps/<cell_name>
4
For example, the directory:
<WASHome>/profiles/<profile>/installedApps/<cell>/Homepage.ear
contains the homepage.war file.
Each application's .war file then contains the files specific to that application, as listed in table 1.
Table 1. Application's .war file namesApplication File nameActivities oawebui.war
Blogs blogs.war
Bookmarks dogear.webui.war
Communities comm.web.war
Files qkr.share.files.war
Forums forums.web.war
Home page homepage.war
Profiles lc.profiles.app.war
Search search.war
Wikis qkr.share.wiki.war
3.2 Connections customization variablesThere are a couple of WebSphere variables that we must look at in order to perform customization of the server. To view the variables, we log onto the WebSphere Application Server Console and select Environment > WebSphere Variables. From there we can view existing variables and create new ones if needed.
The first variable we need to look at is:
CONNECTIONS_CUSTOMIZATION_DEBUG
This must be set to “true” on the server. If the variable doesn't exist, it will need to be created at the node scope. Remember not to leave this setting at true on a production server as it will reduce performance.
The second variable that we're interested in is:
CONNECTIONS_CUSTOMIZATION_PATH
Lotus Connections uses a separate directory structure to hold files for customizations, allowing us to make changes without fear of harming the server irrecoverably. Note the location that this variable points to as we're going to use it throughout the article.
5
3.3 Understanding the customization directoriesTypically we carry out a customization by selecting the file that must be copied from the Connections directories, copying it into a directory on the customization path, and changing it there. The exact directory to which we copy on the customization path depends on what we're changing.
The Customization directory contains a subdirectory for each of the applications, for example, /activities, /homepage. Each of these directories contain customizations specific to each application.
The customization directory also contains a “common” subdirectory. Any changes made to files in this directory will affect all applications. For example, if you want to change the footer.jsp page across all applications, the amended footer.jsp would be placed under the “common” subdirectory.
The customization directory also contains a “/strings” subdirectory. All customizations made to strings in JavaTM resource bundles are placed in this directory, regardless of the application that the bundle is used by.
We discuss these directories in more detail later as we describe how to make changes.
3.4 Publishing customizationsWhen we're happy with all the customizations we've made, we can publish them. The basic steps to do this are:
1. First set the CONNECTIONS_CUSTOMIZATION_DEBUG variable to false (using the WebSphere Application Server Console). If we don't perform this action, there could be a major impact on product performance. Use only the debug mode while making the customizations.
2. Then stop and restart each of the Connections applications, using the WebSphere console.
3. Finally, each browser that accesses Connections needs to be forced to refresh all cached content.
Wsadmin commands used to publish customizationsThis subsection describes all the commands used to publish the customizations. Start the wsadmin tool and enter the following command to access the Connections configuration:
execfile("homepageAdmin.py")wsadmin>execfile("homepageAdmin.py") Connecting to WebSphere:name=HomepageAdminService,type=LotusConnections,cell=nodeName-0Cell01,node=nodeName-0Node01,process=cluster_server1 HomePage Administration initializedwsadmin>
Now check out the configuration files by using the wsadmin command:
6
HomepageCellConfig.checkOutGettingstartedConfig(“<working_directory”,”<cellName>”)wsadmin>HomepageCellConfig.checkOutGettingstartedConfig("/root/Desktop/wsadmin","cellName") Homepage Getting Started page configuration file successfully checked out wsadmin>
As you can see in the above command, the <working_directory> is replaced by the location to where you want the temporary copy of the configuration files to be copied.
NOTE: Forward slashes must be used to define the path, even on Windows.
The <cell_name> is the cell name of the server. You can see details of the cell by using the wsadmin command:
wsadmin>AdminControl.getCell()
Make your changes either by updating the configuration files manually or by using interface commands.
Alter all changes have been made, check the files back in:
HomepageCellConfig.checkInGettingstartedConfig(“<working_directory”,”<cell_name>”)wsadmin>HomepageCellConfig.checkInGettingstartedConfig("/root/Desktop/wsadmin","cellName") Loading schema file for validation: /root/Desktop/wsadmin/gettingstarted-config.xsd /root/Desktop/wsadmin/gettingstarted-config.xml is valid Homepage Getting Started page configuration file successfully checked in
This validates the files against a .xsd schema that ensures that the file structure is correct and also ensures that the file goes to the correct place.
Updating the datestampThe datestamp on the configuration files now needs to be changed in order for the application cache to be refreshed.
To do this, we must start the “connectionsConfig” interface, check out “lotusConnectons-config.xml”, change the “versionStamp”, and then check “lotusConnections-config.xml” back in.
The <gmt_timestamp> can either be a particular time stamp, or you can leave it blank, in which case the timestamp to apply will be automatically calculated. It is recommended that you leave a blank space, as in the following example:
execfile("connectionsConfig.py")
wsadmin>execfile("connectionsConfig.py")Connections Administration initializedut
7
LCConfigService.checkOutConfig("/root/Desktop/wsadmin","cellName")
wsadmin>LCConfigService.checkOutConfig("/root/Desktop/wsadmin","cellName")Connections configuration file successfully checked out
LCConfigService.updateConfig("versionStamp","")
wsadmin>LCConfigService.updateConfig("versionStamp","") Changing value from 20100927.103956 to 20100929.095426 Loading schema file for validation: /root/Desktop/wsadmin/LotusConnections-config.xsd Loading schema file for validation: /root/Desktop/wsadmin/service-location.xsd /root/Desktop/wsadmin/LotusConnections-config_CHANGED_.xml is valid
LCConfigService.checkInConfig("/root/Desktop/wsadmin","cellName")
wsadmin>LCConfigService.checkInConfig("/root/Desktop/wsadmin","cellName") Loading schema file for validation: /root/Desktop/wsadmin/LotusConnections-config.xsd Loading schema file for validation: /root/Desktop/wsadmin/service-location.xsd /root/Desktop/wsadmin/LotusConnections-config.xml is valid Connections configuration file successfully checked in
If the changes were made correctly, a success message will appear on the console; otherwise, you will get an error message. If that happens, revise the changes and try to check in again.
Once the changes have been checked back in, you don't need to clear the browser cache to view any changes made.
4 Customizing the interfaceThis section covers adding new items to the interface and amending existing items, such as showing a new company logo and introducing new menu items in the header. We then go on to modify the colors used in the theme.
Customizing the headerOne of the first steps in customizing a theme to reflect your company is to change the logo at the top of the theme and to add any company-specific links to the menu bar.
Each application has a header.jsp file in the path:
<washome>/profiles/<profile>/installedApps/<cell>/<Appname>.ear/<Appname>.war/nav/templates/header.jsp
Initially this is the same for each application; it contains the markup to show the company log and the menu items at the top of the display, for example, Home, Profiles, Communities, etc.
We have the option of using the same header for each application, by using the “common” customization area in the customization file structure, or to specify different headers for each application.
8
Depending on what we want to do, we copy the header.jsp file into the relevant area in the customization file structure. For example, to apply the header changes across all applications, copy it to:
CONNECTIONS_CUSTOMIZATION_PATH/common/nav/templates/header.jsp
Or, if we want the logo to apply to just one application, such as profiles, we would copy it to:
CONNECTIONS_CUSTOMIZATION_PATH/profiles/nav/templates/header.jsp
Customizing the logoFirst, we need to place the new logo image file into the directory structure. Again, this can be done across all applications, as follows:
CONNECTIONS_CUSTOMIZATION_PATH/common/nav/common/styles/images
or just for a specific application such as Profiles:
CONNECTIONS_CUSTOMIZATION_PATH/profiles/nav/common/styles/images
Two approaches can be taken to include the logo in the theme:
(1) Name the image logo.png and place it in either the common or application-specific directories, depending on what you need to customize. Making this change results in new amendments being required to defaultTheme.css or custom.css stylesheets.
(2) Put the log-in in the images directory and include additional styling in the custom.css file, to override the lotusLogo and lotusLoginLogo classes to reference the customized image:
.lotusui .lotusLogo, .lotusLoginLogo{height:24px;width:104px;margin-top: 4px;background-image:url("../images/<customized>.gif");background-repeat:no-repeat;}
If this second approach is taken, then the height and width of the logo specified must be correct. We will use the image shown in figure 1.
Figure 1. Example logo image
It is also a good practice to change the corresponding logo alternative text. So, inside header.jsp, find the corresponding span with the class “lotusAltText” and modify the value from “Lotus Connections” to the one you desire:
9
<div class="lotusLogo" id="lotusLogo"> <span class="lotusAltText">YourCo</span>
</div>
4.1 Adding a link to the headerWe now want to add a new link into the header. The header.jsp file contains a section that defines the links to applications, along with instructions on how to put a new link in place.
The markup for the links is composed of a <ul> element that contains a number of <li> elements. Place any additional links after the last </li> in the <ul> element place (see listing 1).
Listing 1. Example showing addition of new link to header
--%><li id="lotusBannerApps" class="<c:if test="${first}">lotusFirst</c:if> <c:if test="${'communities' != appName && 'profiles' != appName && 'homepage' != appName}">lotusSelected</c:if>"><%--
--%><a onmouseover="dojo.require('lconn.core.header');lconn.core.header.menuMouseover(this);" onclick="dojo.require('lconn.core.header');lconn.core.header.menuClick(this);" onfocus="dojo.require('lconn.core.header');lconn.core.header.menuFocus(this);" role="button" aria-owns="lconnheadermenu-apps" aria-label="<fmt:message key="label.menu.apps.name" />" src="<lc-cache:uri template="{staticLanguageRoot}/nav/templates/menu/apps.jsp" />" href="javascript:;"><%-- --%><fmt:message key="label.menu.apps.name" /><%-- --%> <img role="presentation" alt="" src="<lc-cache:uri template="{staticRoot}/nav/common/styles/images/blank.gif" />" class="lotusArrow lotusDropDownSprite"><span class="lotusAltText">▼</span><%-- --%></a><%-- --%></li><%-- --%><li><%--
--%><a href="https://greenhouse.lotus.com/places/myplaces">Team Places</a><%-- --%></li><%-- --%></ul><%-- --%></div><%--
--%></div><%--
4.2 Viewing the resultsTo view the results, first clear the browser cache and then refresh; the amended header is now displayed. Alternatively, you can apply the changes by modifying the timestamps on the configuration files as explained in the “Updating the datestamp” subsection above.
Note that, when deploying the changes across an organization, updating the timestamps on the configuration files is the best strategy.
Figure 2 is an example of an amended title bar, showing the new company logo and the new “Team Places” item.
10
Figure 2. Amended title bar
4.3 Modifying theme colorsYou can further personalize a theme by changing its colors to reflect the colors used by your company.
The main colors used across the application are contained in the defaultTheme.css file, which is initially the same for each application. This file is held in:
<WASHome>/profiles/<profile>/installedApps/<cell>/<appName>.ear/nav/common/styles/defaultTheme
The file custom.css also resides in this directory. The file is initially empty and is used to override styling supplied in the defaultTheme.css stylesheet. It's recommended that custom.css is used for most changes, with defaultTheme.css being used if the entire theme is being redesigned.
Using a changed version of these files involves the usual addition of the relevant file to the customization area. For example, if applying across all applications, place the changed files in:
CONNECTIONS_CUSTOMIZATION_PATH/common/nav/common/styles/defaultTheme
Or, if the changes are just for one application, say Profiles, place the changed file in:
CONNECTIONS_CUSTOMIZATION_PATH/profiles/nav/common/styles/defaultTheme
The CSS file is quite complex and uses CSS classes to define different styles. One of the easiest ways to find out which parts of the file to modify is to first locate the required component, using a tool such as Firebug, to look at the classes used in that component, and then modify those classes in the custom.css or defaultTheme.css files.
Once you've made the required changes, refresh your browser to show the theme changes. It is not necessary to restart the server, but make sure you clear the browser's cache.
The theme shown in figure 3 was created by overriding parameters from the defaultTheme.css style file by use of the custom.css stylesheet. To view the changes, place the custom.css stylesheet in the directory:
CONNECTIONS_CUSTOMIZATION_PATH/common/nav/common/styles/defaultTheme
11
Figure 3. Our modified theme
Here are some examples of the changes made:
(1) Top Banner Gradient:
.lotusBanner {
padding:0 10px; background-color:#fff; background-image:-moz-linear-gradient(top, #707070 0%, #525252 100%); → bg for
Firefox-webkit-gradient(linear, left top, left bottom, from(#525252), to(#000000)); → bg for IE
}
(2) Tabs Bar Gradient:
.lotusTitleBar {
margin:0; border-bottom:8px solid #fff; background-color:#0f3805; background-image:-moz-linear-gradient(#96ad84 0, #96ad84 1px, #769f6f 1px,
#487d3c 50%, #337030 50%, #285e28 100%); background-image:-webkit-gradient(linear, left top, left bottom, from(#8495ad),
to(#283f5e), color-stop(.03, #8495ad), color-stop(.03, #6f849f), color-stop(50%, #3c587d), color-stop(50%, #304b70), color-stop(100%, #283f5e));}
12
(2) MainTabs Background:
.lotusTitleBar .lotusTabs li {
border-bottom-color:#1e2f47; background-color:#285e29;
}
(3) Top Border:
.lotusMain {
margin:0; padding:0; border-width:0;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0; border-top:1px solid #1e6f27; background-color:transparent;
}
(4) Border Color:
.lotusui .lotusContent {
margin:0; border:1px solid #1e6f27; padding:20px 25px 25px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0; border-top-width:0 !important;
}
(5) Widget Head:
.lotusWidget2 h2 {
margin-bottom:0; padding:4px 5px 6px 10px; font-size:1em; color:#000;-webkit-box-shadow:#eee 0px 3px 5px;
-moz-box-shadow:#eee 0 3px 5px; box-shadow:#eee 0 3px 5px;
border:1px solid #1e6f27; background-color:#4cbf4c; background-image:none; background-image:-moz-linear-gradient(top, #bae8ba 0%,
#d5ecd5 100%); background-image:-webkit-gradient(linear, left top, left bottom,
from(#bae8ba), to(#d5ecd5)); background-position:left top;-moz-border-radius-topright:3px;-moz-border-radius-
topleft:3px;-webkit-border-top-right-radius:3px;-webkit-border-top-left-radius:3px;border-top-right-radius:3px;border-top-left-radius:3px; }
(6) Widget Footer:
.lotusWidget2 .lotusWidgetFooter
13
{ border-width:0 1px 1px 1px; border-style:solid; border-color:#1e6f27; background-color:#fafafa;
-webkit-box-shadow:#eee 0 3px 5px;-moz-box-shadow:#eee 0 3px 5px;box-shadow:#eee 0 3px 5px;height:auto; }
Links:
.lotusui a, .lotusui a:visited {
color:#044b06; } .lotusui a:active {
color:#044b06; }
Body Background:
.lotusui {
color:#1d680b; background-color:#fdfffd;
}
Search Box:
.lotusTitleBar .lotusSearch .lotusBtnImg {
background-color:#285e29; color:#fff;
}
4.4 Adding menus to a headerExtra menus can be added into the header quite simply.
The first step is to change the header.jsp file to include the extra menu. The menus are held as <li> elements in a <ul> element. Copy one of the existing menu block and append it after the last <li> element.
Listing 2 shows example code for a new menu added for YourCo. Ensure that the id attribute of the <li> is changed to prevent conflicts with other existing menus.
Note that the attributes in bold were changed so as not to conflict with the existing names.
14
Listing 2. Code for new menu added to “YourCo”
--%><li id="lotusBannerYourCo" class="<c:if test="${first}">lotusFirst</c:if> <c:if test="${'YourCo' == appName}">lotusSelected</c:if>"><%-- --%><a onmouseover="dojo.require('lconn.core.header');lconn.core.header.menuMouseover(this);" onclick="dojo.require('lconn.core.header');lconn.core.header.menuClick(this);" onfocus="dojo.require('lconn.core.header');lconn.core.header.menuFocus(this); src="<lc-cache:uri template="{staticLanguageRoot}/nav/templates/menu/yourco.jsp" />" --%>YourCo Menu<%-- --%> <img role="presentation" alt="" src="<lc-cache:uri template="{staticRoot}/nav/common/styles/images/blank.gif" />" class="lotusArrow lotusDropDownSprite"><span class="lotusAltText">▼</span><%-- --%></a><%-- --%></li><%-- --%><c:set var="first" value="false" scope="page" /><%--
The menus themselves are contained in a separate JSP file held in the /templates/menu directory.
Now let's create a new file such as yourco.jsp in the area in the customization file structure that's relevant to what we want to do. For example, to apply the menu changes across all applications, copy it to:
CONNECTIONS_CUSTOMIZATION_PATH/common/nav/templates/menu/yourco.jsp
Or, if we want the menu to apply to just one application, such as profiles, we would copy it to:
CONNECTIONS_CUSTOMIZATION_PATH/profiles/nav/templates/menu/yourco.jsp
Copy the contents of one of the simpler ones, such as person.jsp, paste it into the new yourco.jsp, and alter the text and links to suit your company, as shown in listing 3.
Listing 3. Sample JSP for new menu
yourco.jsp
<%-- Copyright IBM Corp. 2010 All Rights Reserved. --%><%--
This JSP generates the "Profiles" menu that is displayed when a user clicks or hovers over the link in the Connections header. === DO NOT CHANGE === --%><%@ page contentType="text/html;charset=UTF-8" %><%-- --%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%-- --%><%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %><%-- --%><%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %><%-- --%><%@ taglib prefix="bidi" uri="http://www.ibm.com/lconn/tags/bidiutil" %><%-- --%><%@ taglib prefix="lc-ui" uri="http://www.ibm.com/lconn/tags/coreuiutil" %><%-- --%><%@ taglib prefix="lc-cache" uri="http://www.ibm.com/connections/core/cache" %><%--
15
--%><jsp:useBean id="services" class="com.ibm.lconn.core.web.util.taglib.ServiceEnabledBean" scope="application"/><%-- --%><lc-ui:bundle basename="com.ibm.lconn.core.strings.templates"><%-- === DO NOT CHANGE ===
--%><div role="document"><table class="lotusLayout" cellpadding="0" cellspacing="0"><%--
--%><tr><%-- --%><th scope="row" class="lotusNowrap"><%-- --%><a href="http://yourcohelp.com"><%-- --%><strong>YourCo Help</strong><%-- --%></a><%-- --%></th><%-- --%></tr><%-- --%><tr><%-- --%><th scope="row" class="lotusNowrap lotusLastCell"><%-- --%><a href="http://yourcocontact.com"><%-- --%><strong>YourCo Contact</strong><%-- --%></a><%-- --%></th><%-- --%></tr><%--
--%><tr><%-- --%><th scope="row" class="lotusNowrap lotusLastCell"><%-- --%><a href="http://yourcodownloads.com"><%-- --%><strong>YourCo Downloads</strong><%-- --%></a><%-- --%></th><%-- --%></tr><%-- --%></table></div><%--
--%></lc-ui:bundle>
The src attribute of the new <a> element in the header.jsp file for the menu must refer to the JSP file that contains the menu.
Make the changes, refresh the browser cache, and the new menu is ready for use (see figure 4).
Figure 4. New YourCo menu
4.5 Adding a tab to the Getting Started pageThe “YourCo” company needs to have a space on the homepage in which information about the company itself can be placed so that, when users log in, they can have access to this information straight away.
16
The chosen place to put this information is the Homepage landing page, the page to which you are redirected after logging into the Homepage.
The Homepage landing page contains a panel with three tabs with information about how to get started using Lotus Connections, about what you can do with Lotus Connections and some advice about how to use Lotus Connections.
So we introduce the new tab “About YourCo”, so YourCo can add information about the company (see figure 5).
Figure 5. New “About YourCo” tab
To perform this operation we must modify gettingstarted-config.xml, which is the file that holds the configuration of this page. This time, the changes are made by use of wsadmin tool.
We will check out the file, make the changes, check it back in, and update the timestamp:
1. Refer to Section 2.2, “Using the tool,“ to determine in which directory you must run the following command to start up the wsadmin:
Windows:wsadmin.bat -lang jython -user <admin-user-id> -password <password> -port <port>
AIX/LINUX:./wsadmin.sh -lang jython -user <admin-user-id> -password <password> -port <port>
17
2. Once you are in wsadmin, initialize the interface for the Homepage by typing:
execfile("homepageAdmin.py")
wsadmin>execfile("homepageAdmin.py") Connecting to WebSphere:name=HomepageAdminService,type=LotusConnections,cell=nodeName-0Cell01,node=nodeName-0Node01,process=cluster_server1 HomePage Administration initializedwsadmin>
3. We now need to check out the configuration files by using the wsadmin command:
HomepageCellConfig.checkOutGettingstartedConfig(“<working_dir”,”<cellName>”)
wsadmin>HomepageCellConfig.checkOutGettingstartedConfig("/root/Desktop/wsadmin","cellName") Homepage Getting Started page configuration file successfully checked out wsadmin>
In this way, “gettingstarted-config.xml” will be checked out and placed into the <working_dir>.
4. Get the cell name by typing the following command:
wsadmin>AdminControl.getCell()
5. Go to the <working_directory> and open gettingstarted-config.xml with a text editor. You can add, delete, or change tabs as follows:
• Add a new tab. Copy an existing <step>....</step> and paste it into the <steps>....</steps> block. The order of the steps in the <steps> element block determines the order of the vertical tabs.
• Change tab title. You can either add the new title directly, as follows:
<step enabled="true"> <title bundle="">Ubuntu</title> <body-links unsecure="url goes here" secure="url goes here"/> </step>
or you can specify a key that you define in a corresponding resource bundle that you also define. For example, the title of the second tab is “Share,” and it is defined by the jsp.start.share.tab.title key that is stored in the com.ibm.lconn.homepage.resources.nls.jsp.jsp_resources resource bundle.
Note that you must always specify the bundle attribute on the title element, even if it is blank.
18
• Change the contents of the tab. The contents must be inside the <body-links> element and must be a Web site URL that can get contents from an external Web site:
<step enabled="true"> <title bundle="">Ubuntu</title> <body-links unsecure="http://server/homepage/web/proxy/http/www.ubuntu.com/" secure="https://server/homepage/web/proxy/https/www.ubuntu.com/"/></step>
Note that the proxy server must be used to view content from an external Web site. If you find that the proxy server prevents images and the .css from being viewed, an alternative way to show an external Web site is to point to a page on the Lotus Connections server deployment that contains an iFrame pointing to the external site.
To get this working, place this new file (html, jsp, etc.) inside the public http folder. If you are using IBM HTTP Server, the file should be placed in:
/IBM/HTTPServer/htdocs/en_US/myfile.html
where myfile.html could contain an iFrame such as in the example below:
<iframe src="http://www.ubuntu.com/" style="width:100%; height:100%;" scrolling="auto" frameborder="0"> <p>Ubuntu</p> </iframe>
If we chose this solution, the <step> element would look like this:
${lcurl:<component-name>.<connection-type>}/path/to/file
<step enabled="true"> <title bundle="">Ubuntu</title> <body-links secure="${lcurl:homepage.secure}/myFile.html" unsecure="${lcurl:homepage.unsecure}/myFile.html"/></step>
where <component-name> is the name of the Lotus Connections application in which it is defined from the LotusConnections-config.xml file, and <connections-type> specifies whether the resource is secure or unsecure.
The remainder of the address contains a path to the appropriate file. The file can be any Web resource, such as a JSP, servlet, or html file provided by the corresponding application.
Similar URLs can be used to obtain contents from an internal Lotus Connections Web site; for example:
<step enabled="true"><title bundle="com.ibm.lconn.homepage.resources.nls.jsp.jsp_resources">jsp.start.step1.tab.title</title
19
><body-links secure="${lcurl:homepage.secure}/web/stepOnePage.action" unsecure="${lcurl:homepage.unsecure}/web/stepOnePage.action"/></step>
• Delete an existing tab. Set the value for the “enabled” property to false, to hide the tab:
<step enabled="false"> <title bundle="com.ibm.lconn.homepage.resources.nls.jsp.jsp_resources">jsp.start.step1.tab.title</title><body-links secure="${lcurl:homepage.secure}/web/stepOnePage.action" unsecure="${lcurl:homepage.unsecure}/web/stepOnePage.action"/></step>
6. Save and close the gettingstarted-config.xml file, and run the following command to check the configuration files back in:
HomepageCellConfig.checkInGettingstartedConfig(“<working_directory”,”<cell_name>”)wsadmin>HomepageCellConfig.checkInGettingstartedConfig("/root/Desktop/wsadmin","cellName") Loading schema file for validation: /root/Desktop/wsadmin/gettingstarted-config.xsd /root/Desktop/wsadmin/gettingstarted-config.xml is valid Homepage Getting Started page configuration file successfully checked in
7. Update the timestamp as described in the “Updating the datestamp section” and, finally, restart the HomePage application servers.
4.6 Customizing the footerAnother customization option is to change the footer, perhaps adding some company- specific links to it. Each application has a footer.jsp file in the path:
<washome>/profiles/<profile>/installedApps/<cell>/<Appname>.ear/nav/templates/footer.jsp
Initially this is the same for each application and contains the markup to show the company footer at the bottom of the display, for example, Home, Profiles, or Communities.
We have the option of either using the same footer for each application, by using the “common” customization area in the customization file structure, or specifying different footers for each application.
Copy the footer.jsp file into the relevant area in the customization file structure, depending on what you want to do. For example, to apply the footer changes across all applications, copy it to:
CONNECTIONS_CUSTOMIZATION_PATH/common/nav/templates/footer.jsp
20
Or if we wanted the footer changes to apply to just one application, such as profiles, we would copy it to:
CONNECTIONS_CUSTOMIZATION_PATH/profiles/nav/templates/footer.jsp
Just copy the code in bold in listing 4 with your links, or any other resource such as images you want to add to the footer, into footer.jsp.
Listing 4. Example showing new link in footer
--%><table cellspacing="0" role="contentinfo"><%-- --%><tbody><%-- --%><tr><%-- --%><td class="lotusFirstCell lotusLastCell"><%-- --%><ul><%--
The links to the Homepage and the demo. If Homepage is not installed the "Home" link points to the current application --%><li><%-- --%><c:if test="${services.homepage}"><%-- --%><lc-ui:serviceLink serviceName="homepage" var="urlHomepage" /><%-- --%><a href="<c:out value="${urlHomepage}" />"><%-- --%><fmt:message key="label.footer.connections.home" /><%-- --%></a><%-- --%></c:if><%-- --%><c:if test="${!services.homepage}"><%-- --%><a href="${pageContext.request.contextPath}"><%-- --%><fmt:message key="label.footer.connections.home" /><%-- --%></a><%-- --%></c:if><%-- --%></li><%-- --%><lc-ui:templateLink key="connections.demo" appname="${appName}"><fmt:message key="label.footer.connections.demo" /></lc-ui:templateLink><%--
--%><li><%-- --%><a href="http://YourCoHomepage.com" />"><%-- --%>Your Co Homepage<%-- --%></a><%-- --%></li><%--
--%><li><%-- --%><a href="http://YourCoHelp.com" />"><%-- --%>Your Co Help<%-- --%></a><%-- --%></li><%--
--%><li><%-- --%><a href="http://YourCoDownloads.com" />"><%-- --%>Your Co Downloads<%-- --%></a><%-- --%></li><%--
--%><li><%-- --%><a href="http://YorCoContact.com" />"><%-- --%>Your Co Contact<%--
21
--%></a><%-- --%></li><%-- …..........
To view the results, first clear the browser cache and then refresh. The amended footer will now be displayed (see figure 6).
Figure 6. Amended footer
5 Customizing for your company policy
5.1 Changing the log-in pageThe company for which we're changing the theme first needs to get each person logging into Lotus Connections to accept an agreement. So we need to display the agreement on the log-in screen and then configure a checkbox on the screen so that the log-in button is disabled until the checkbox is ticked.
NOTE: This is only a partial solution to the problem. To make this process totally secure, we should perform a validation of the agreement, using server-side code, to prevent a user from gaining access without agreeing by tampering with the JavaScript code. However, this modification is beyond the scope of this article.
The page that we need to change is the login.jsp page, which is located at:
<WASHome>/profiles/<profile>/installedApps/<cell>/<appName>.ear/<appName>.war/nav/templates
The log-in page is the same for each application. Once we change the log-in page, it can be placed either in the common area on the customization path so the changes affect all the applications:
CONNECTIONS_CUSTOMIZATION_PATH/common/nav/templates
Or we can place it in the path for a particular application so each application has its own log-in screen. For example, for profiles:
CONNECTIONS_CUSTOMIZATION_PATH/profiles/nav/templates
In this example we place the amended.jsp file on the common path. So we take a copy of the login.jsp file from one of the applications, say, homepage, and place it in the common/nav/templates directory.
We're now ready to get started on changing the markup!
22
5.2 Showing the Agreement textThe markup for the log-in page is clearly commented. The log-in page is split into two columns, left and right. The left-hand column initially holds a couple of links to more information about Lotus Connections, with the right-hand column holding the name, password, and log-in button controls.
We replace the links on the left-hand side of the page with the agreement and checkbox, as shown in figure 7.
Figure 7. Amended left-hand side of page
To amend the markup of the left-hand side of the screen to show the agreement in a table cell that gets a scroll bar, if required, we use the code shown in listing 5, with the amended parts shown in bold.
Listing 5. Code to show agreement in a table cell
<div class=”lotusLoginBox lotusLoginBoxWide”><div class=”lotusLoginContent”>
<div class=”lotusDescription” style=”margin-top: 20px;”><%--
This is the left column of the login page. Use this section to displayinformation about your deployment.
--%><h1>Usage Agreement</h1><div style=”height: 140px; overflow-y: scroll;”> <table class=”lotusLayout”>
<tr><td>
<h4>Terms of agreement</h4><p>1. Use Lotus Connections only for company
business</p> <p>2. Abide by all ethical policies</p> <p>3. All content may be monitored</p> <p>4. No inflammatory or derogatory content to be
published</p> <p>5. No profanity to be used</p> <p>6. All content must be accurate to best of knowledge</p>
</td></tr>
</table> </div>
23
NOTE: All the strings are hard coded now, but we fix that later in the article by using string bundles to localize the agreements.
The next step is to add the checkbox that the user ticks to agree to the license. This is just a normal checkbox that fires off a small JavaScript function.
To put in the agreement, paste the following code immediately following the last <div> element in the code in listing 5:
<input id=”acceptCondition” type=”checkbox” onclick=”activateLogin()”class=”lotusCheckbox” style=”margin-top: 10px;”>Agree to terms and conditions
</input>
5.3 Amending the log-in buttonWe also need to amend the log-in button, giving it an id attribute so it can be easily located using JavaScript code, and make it disabled.
We can easily find the HTML for the log-in button by looking for the a <div> with the “lotusBtnContainer” class containing an <input> element of type “submit”. So, after we add the id, disable the button, and style it correctly, we get the code in listing 6, with the changes shown in bold.
Listing 6. Amended log-in button code
<div class=”lotusBtnContainer”><input id=”lclogin” type=”submit” class=”lotusBtnDisabled lotusBtn lotusBtnSpecial disabled=”disabled”
value=”<c:out value=”${msgLogin}” />”></div>
5.4 Function to respond to the agreementThe final step is to add a JavaScript function that will cause the log-in button to be enabled, if the agreement checkbox is clicked; and to be disabled, if the tick is taken off the box. This code is placed in a <script> section at the end of the JSP (see listing 7).
Listing 7. JavaScript function
<script type=”text/javascript”>/* Custom function to handle whether to enable login button if agreement has been accepted. */
function activateLogin() {
var accept = document.getElementById(“acceptCondition”);var loginBtn = document.getElementById(“lclogin”);if (accept.checked) {
24
loginBtn.disabled=””;loginBtn.className=”lotusBtn lotusBtnSpecial”;
} else {
loginBtn.disabled=””;loginBtn.className=”lotusBtnDisabled lotusBtn lotusBtnSpecial”;
}}</script>
Testing the changesTo test our changes we just need to clear the browser cache and log the current user out. When the log-in screen is re-displayed, it will contain our changes.
6 Customizing error pagesWhen using Lotus Connections there is a chance that errors may occur as a result of a variety of failures. If such an error occurs, then it is important that the user is given as much information about the error as possible and the steps they should take.
Lotus Connections provides an error page that is shown when an error occurs and, as with the log-in page, this can be customized. The page we need to customize is error.jsp, located at:
<WASHome>/profiles/<profile>/installedApps/<cell>/<appName>.ear/<appName>.war/nav/templates
The error page is initially the same for each application, so the page from any of the applications can be copied and placed in the customization area. As with the log-in page, the error.jsp page can be placed in either the common customization directory:
CONNECTIONS_CUSTOMIZATION_PATH/common/nav/templates
Or in the directory for a particular application, in this example, profiles:
CONNECTIONS_CUSTOMIZATION_PATH/profiles/nav/templates
6.1 Parameters passed to the pageA number of parameters can be passed into the error page from the failing code, including those shown in table 2.
Table 2. Parameters passed to error pageParameter DescriptionerrorType String that indicates the type of error, e.g., notReader,
duplicateUser, unavailable.
errorStatusCode HTTP status code for the error.
errorDetails Details of the exception that occurred.
25
errorTitle Title that should be shown for the error message.
errorActions Object that represents a list of procedures that should be carried out in response to the error.
These parameters can be used in the customized page so that we can do different things, depending on the error. In the initial page there is a <c:choose> JSP tag that contains numerous <c:when> tags to handle different combinations of errors.
6.2 Setting error valuesThe top part of the error.jsp page (as supplied) takes the parameters passed in and sets variables such as the errorMessage variable, depending on the status code, etc., that's passed in. We can customize this behavior by amending the JSP conditions.
For example, we could use a section here to amend the error message shown when we try to access an application that is stopped or can't be accessed. We can do this by detecting the errorStatusCode of 503 and setting the errorMessage to be a particular value. Different error messages are set by use of JSP tags to set the contents of the errorMessage variable.
Typically these values are taken from string bundles, so localized messages can be displayed for different errors. You can customize these error messages by changing the JSP; for instance, you can output a different localized message if you get an error stating that an application isn't available (errorStatusCode=503).
6.3 Outputting details of the errorThe details of the error are output in a section of the error.jsp page that you can identify by finding a form of the class “lotusErrorForm”. This segment of the page generates HTML markup using the values defined in the JSP variables.
For example, the following line of HTML outputs the value of the errorMessage variable:
<p><c:out value=”${errorMessage}” /></p>
Any of this markup section can be customized to make the error page specific to your company, etc., including company logos, for example,
Testing the changesTo test our changes, just clear the browser cache and produce the error that our new customization will handle. When the error screen is re-displayed, it'll contain our changes.
7 InternationalizationLotus Connections can be installed in many different locales and, as different locales use different languages, the various UI elements and messages shown must be translatable into the different languages.
Since new features can be added by use of the various customizations, it is vital that we can provide our own strings or, in some cases, we may need to modify the existing strings to better fit in with company policy, etc.
26
The property files are split into two separate categories, those sourced from string resource bundles, and those sourced from JavaScript.
7.1 Resource bundlesStrings for Lotus Connections 3.0 are held in property files that are termed bundles. Each bundle is given a name that is suffixed by the language code that the strings are in; for example, “de” for a file containing strings for the German language.
A version of each property file is also held without the _<language_code> suffix, the contents of which are used by default. When a string is retrieved, the property file containing it with the locale-specific suffix is looked at first. If the required property is there, then that is used. If it can't be found or the required locale is unsupported, the string from the default property file is used.
There are a large number of properties bundle files used within Lotus Connections. The different applications within Connections (Profiles, Homepage, etc.) use different properties files and may well use multiple properties files. In most cases the property files are contained in the .jar files listed in table 3.
Table 3. Property files and corresponding .jar files Property file .jar fileCommon <war>/WEB-INF/lib/lc.util.web-3.0.jar
Activities Activities.ear/oawebui.war/WEB-INF/lib/oawebui.jar
Blogs (files in directory) Blogs.ear/blogs.war/WEB-INF/classes/com/ibm/lconn/blogs/strings
Bookmarks Blogs.ear/lc-bookmarklet,war/WEB-INF/lib/lc-bookmarklet.jar
Communities Communities.ear/comm.web.war/WEB-INF/lib/comm.web.jar
Files Files.ear/lconn.files.ui.jar
Forums Forums.ear/forum.web.war/WEB-INF/lib/forum.web.jar
Home Page homepage.war/WEB-INF/lib/homepage.utils.jar
News News.ear/news.web.war/WEB-INF/lib/news.common.jar
Profiles lc.profiles.app.war/WEB-INF/lib/lc.profiles.web.app-3.0.jar
Search Search.ear/search.common.jar
Wikis Wikis.ear/lconn.wikis.ui.jar
A complete list of the property files and supported locales can be found on the Lotus Connections documentation page.
7.2 Customizing resource bundlesTo customize the values of property strings you first need to create a new file to hold the amendments. If the amendments are for a particular language, the file must have the appropriate language code as the suffix to the file name.If the changes are to be for all locales, then the default property file should be used, that is, no language code suffix.
The new customized string files must be put in the directory, CONNECTIONS_CUSTOMIZATION_PATH/strings, which is set up during the Connections installation. There are no separate directories for each application within the /strings directory; rather, each application uses differently named string files.
27
After the changed files have been put in place, you must stop and restart the application, using the WebSphere Application Server console. The browser cache must then be cleared and the changes can then be tested.
In order for the changes to be picked up, the amended string files in the Customization directory must be given the full name of the string as found in the .jar. For example, the templates.properties string file for the common strings must be given the name com.ibm.lconn.core.strings.templates.properties in the customization directory.
Publishing changesOnce the customized string changes have been tested, each user's browser must be forced to refresh its cache to pick up the changes. This is done via the wsadmin console, detailed in Section 3.4, “Publishing customizations,” above.
7.3 Customizing JavaScript stringsMany strings in the user interface are sourced from JavaScript files, which are held within the .war directory structure for each application.
As with the resource bundles, the string files sourced from JavaScript contain the language code in their file names. In this instance the format is:
filename_xx.js
where xx is the language code. For example, blogs_en.js is the strings profile used for Blogs in the English locale.
The process for customizing JavaScript strings is a little different than for the resource bundles. Various directories within the customization directory structure are used to hold the string files for each application. These are all detailed as follows:
Activities:
<customizationDir>\activities\javascript\dojo-ibm\lconn\nls\act_xx.js
Blogs:
<customizationDir>\blogs\roller-ui\scripts\dojo14\dojo\nls\dojo_xx.js <customizationDir>\blogs\roller-ui\scripts\dojo14\dojo\nls\blogs_xx.js Blog widget in Communities: <customizationDir>\communities\lc-widgets-communities-blogs.war\script\lconn\communitiesBlog\nls\strings.js
Bookmarks:
Bookmarks Application:<customizationDir>\dogear\lwp\dogear.web\coreui\dojo\lconn\dogear\nls\strings.js Bookmarklet: <customizationDir>\sn.infra\lwp\lc.bookmarklet\dojo\lconn\dogear\nls\strings.js
Communities:
<customizationDir>\communities\javascript\dojo_1.4.1\lconn\communities\nls\strings.js
28
Forums:
<customizationDir>\forums\javascript\build\lconn\forums\nls\forums_xx.js <customizationDir>\forums\javascript\build\lconn\forums\nls\communityWidget_xx.js
Home page:
Strings displayed in several pages in the Home page application, such as Getting Started, Widgets, and Updates:<customizationDir>\homepage\com\ibm\enabler\nls\common_en.js: Strings displayed in the Updates page <customizationDir>\homepage\dojo_1.4\lconn\nls\updates_en.js: Strings displayed in the getting started page <customizationDir>\homepage\dojo_1.4\lconn\nls\gettingstarted_en.js: Strings displayed in the widgets page <customizationDir>\homepage\dojo_1.4\lconn\nls\widgetsPage_en.js: Strings displayed in widgets <customizationDir>\homepage\base\nls\iWidgets_en.js: Strings displayed in base widget provided by the Dojo Toolkit <customizationDir>\homepage\dojo_1.4\dojo\nls\dojo_en.js:
News repository:
Strings for dijit in email digest preferences page:<customizationDir>\news\dojo_1.4\lconn\nls\emailDigest_en.js:
Profiles:
<customizationDir>\profiles\dojo_1.4\dojo\nls\dojo_en.js <customizationDir>\profiles\dojo_1.4\dojo\nls\mum_enabler_connections_en.js <customizationDir>\profiles\dojo_1.4\dojo\nls\profiles_en.js
Search:
<customizationDir>\search\dojo_1.4\lconn\nls\search_en.js
Wikis:
<customizationDir>\wikis\iwidgets\CommunityWidget\nls\en\WikiWidget.js
As an example, the Blogs application uses a couple of JavaScript property files whose customized versions need to be placed in this directory:
<customizationDir>\blogs\roller-ui\scripts\dojo14\dojo\nls
The first step is to copy the required JavaScript property files and place them in the relevant customization directory.
The properties requiring amendment should then be changed, with any unchanged properties being removed from the file. These properties will be read from the applications property files rather than from the customization files.
Restart the affected application, using the WebSphere Application Server console, and refresh the browser cache. The changed properties should now be visible and can be tested.
29
Publishing changesAs with the strings read from resource bundles, once the customized string changes have been tested, each user's browser must be forced to refresh its cache to pick up the changes. Again, this is done via the wsadmin console.
8 Working example: License agreement stringsAs an example of internationalizing strings, we change the strings for the licence agreement shown on the customized log-in page.
The licence agreement is commonly shown across all the applications, so the strings we change must be in the com.ibm.lconn.core.strings.templates file.
Let's create a Spanish and English set of properties for the agreement:
1. First, locate the string files that we need to change. These are held in the <war>/WEB-INF/lib/lc.util.web-3.0.jar .
2. Open the .jar, locate the templates_es.properties and templates.properties files, and extract them to the CONNECTIONS_CUSTOMIZATION/strings directory.
3. Rename them so they have the com.ibm.lconn.core.strings prefix; for example:
com.ibm.lconn.core.strings.templates_es.propertiescom.ibm.lconn.core.strings.templates.properties
The set of strings we must put in needs to cover a couple of headings, the agreement points, and the accept agreement string. Each of the properties is coded into the file in the form <key>=<value>.
The templates_es.properties file contains the strings for the Spanish language, while the templates.properties file contains the default English strings.
The English strings for the default file are:
agreement.condition1=1.Not publish sensitive informationagreement.condition2=2.Abide by all ethical policiesagreement.condition3=3.All content may be monitoredagreement.condition4=4.No inflammatory or derogatory commentsagreement.condition5=5.No profanity to be usedagreement.condition6=6.All content must be accurate to best of knowledgeagreement.accepttext=I agree to terms and conditionsagreement.title=Usage Agreementagreement.title.terms=Terms of Agreement
And for the Spanish _es file:
agreement.condition1=1.No publicar informaci\u00f3n comprometida agreement.condition2=2.Cumplir con todas las pol\u00edticas \u00e9ticas agreement.condition3=3.Todos los comentarios podr\u00edan ser monitorizados agreement.condition4=4.Est\u00e1n prohibidos todos los comentarios despectivos o exaltadores agreement.condition5=5.No blasfemar agreement.condition6=6.Hasta donde tengo conocimiento, toda la informaci\u00f3n es cierta y
30
correcta agreement.accepttext=Acepto los t\u00e9rminos y las condiciones agreement.title=Contrato de uso agreement.title.terms=T\u00e9rminos del contrato
4. The login.jsp file that we previously customized can now be amended to contain the references to the new strings. This file is in the directory:
CONNECTIONS_CUSTOMIZATION/common/nav/templates
The bundle that holds the strings is already loaded at the top of the page, so we just need to insert references to the strings in the JSP, as shown in listing 7.
NOTE: Be very careful when editing.
Listing 7. Insert references to the strings
<h1><fmt:message key="agreement.title" /></h1> <div style="height: 140px; overflow-y: scroll;">
<table class="lotusLayout"> <tr>
<td> <h4><fmt:message key="agreement.title.terms" /></h4> <p><fmt:message key="agreement.condition1" /></p> <p><fmt:message key="agreement.condition2" /></p> <p><fmt:message key="agreement.condition3" /></p> <p><fmt:message key="agreement.condition4" /></p> <p><fmt:message key="agreement.condition5" /></p> <p><fmt:message key="agreement.condition6" /></p>
</td> </tr>
</table> </div> <input id="acceptCondition" type="checkbox" onchange="activateLogin()" class="lotusCheckbox" style="margin-top: 10px;"> <fmt:message key="agreement.accepttext" /> </input>
5. After all the changes have been made, stop and restart the applications on the server, using the WebSphere Application Server console. Refresh the browser cache and then reload the Log-in page.
The localized strings will appear in the default language for any language except Spanish. For the Spanish language the strings will appear as they are in the Spanish properties file, shown in figure 8.
31
Figure 8. Spanish language strings
9 Working example: Customizing blog JavaScript stringsIn this example we take some of the English JavaScript strings that the Blogs application uses and customize them.
The first step is to copy the blogs_en.js file from the /Blogs.ear/blogs/war/roller-ui/scripts/dojo14/dojo/nls directory and place it into the customization directory:
CONNECTIONS_CUSTOMIZATION_DIR/blogs/roller-ui/scripts/dojo14/dojo/nls
The properties file is structured as a JavaScript file that provides a number of Dojo classes. After editing, the file must be a valid JavaScript file, so great care must be taken when editing.
Now we want change the string that is shown for “You have recommended this entry” so it says “Thank you for recommending this entry”. Let's take a look at the old value first:
Log into Blogs, create a blog with an entry, and then recommend the entry. When you hover over the gold star shown for the recommendation, you will see the text “You have recommended this entry” in a box (see figure 9).
Figure 9. Box with old text
Each of the properties in the file consists of a key and value, separated by a colon. Each key:value pair is separated by a comma. The key part of each pair must not be changed as this is used by the application to retrieve the string. Also be careful when placing quotes, apostrophes, etc. in the value part of each pair.
32
The key that we want is “RatingEntryRated”, which is initially in the file as:
"RatingEntryRated":"You have recommended this entry."
So we change the value part of the string so the whole entry reads:
"RatingEntryRated":"Thank you for recommending this entry ."
We must now save the file, use the WebSphere Application Server console to stop and restart the Blogs application, and then refresh the browser cache.
When we log back into the application and hover over the recommendation marker we are shown the new text (see figure 10).
Figure 10. Box with new text
10 ConclusionThis white paper has shown some of the key customizable areas in Lotus Connections and how straightforward it is to change them. For example, changes to the theme can be easily implemented and tested by use of the customization directory.
We've also explained how to add new, internationalized content and functionality to Lotus Connections 3.0 and how to use the command line tools that are used to test and deploy customizations.
11 ResourcesIBM Lotus Connections 3.0 Reviewer's Guide:http://www.ibm.com/developerworks/lotus/documentation/connections/dw-l-lc3reviewersguide/
Lotus Connections documentation page:http://www.ibm.com/developerworks/lotus/documentation/connections/
Synch.rono.us, the Lotus Connections product team blog: http://synch.rono.us/social/blog.nsf/
developerWorks® Lotus zone:http://www.ibm.com/developerworks/lotus/
Lotus Connections product page:http://www.ibm.com/software/lotus/products/connections/
33
Participate in the Lotus Connections Forum:http://www.lotus.com/ldd/lcforum.nsf
About the authors
Ignacio Sánchez is a Lotus Client Technical Professional, focusing mainly on Lotus Quickr, Lotus Connections, and LotusLive. Ignacio has more than 3 years of experience providing technical sales support for Lotus products.
Jim Antill is a Software Developer working on social and team collaboration software. Jim's main focus has been on the Member Management functionality within Lotus Quickr for WebSphere Portal 8.5, and accessibility customization in Lotus Connections.
Robert Campion joined IBM in 2008, since which time he has worked as a Software Engineer on Lotus Quickr and Lotus Connections, primarily in the area of front-end development. He graduated from Dublin City University, Ireland, with a B.Sc. in Computer Applications.
Lorenzo Notarfonzo is a Software Engineer based at IBM's Dublin Software Laboratory, focusing on social software. Currently he works on Lotus Connections and is part of a team developing Homepage and News components, for which he also developed part of the Notification Framework. Lorenzo received his Master's degree in Software Engineering from the University of Roma III in 2005.
Trademarks• AIX, developerWorks, IBM, Lotus, and WebSphere are trademarks or registered trademarks of
IBM Corporation in the United States, other countries, or both.
• Microsoft and Windows are registered trademarks of Microsoft Corporation in the United States, other countries, or both.
• Java and all Java-based trademarks and logos are trademarks or registered trademarks of Sun Microsystems, Inc., in the United States, other countries, or both.
• Other company, product, and service names may be trademarks or service marks of others.
34
