Customization of the User Interface
By Claudia Holanda
Dynamic Language Switch is one of the new features in WebFOCUS 5 that shows Information Builders is taking its flagship products in an unchartered direction for Business Intelligence products.
In this column, I will describe how to customize your user interface by taking advantage of the Dynamic Language Switch feature.
This new feature provides users an option to dynamically toggle between user interface languages in their logon pages without affecting other users. The number of languages available for switching depends on the languages selected during the installation of WebFOCUS.
Currently we provide English, French (Canadian), French (Standard), German (Austrian), German (Standard) and Spanish. Japanese and Hebrew will follow.
As a result of the Dynamic Language Switch feature, customization of logon pages changed considerably. All text that appears in WebFOCUS screens is now located in resource files. Thus editing a text directly in the HTML page is no longer possible, as was the case in previous releases.
Each language has its own set of resource files. Depending on the languages selected during installation, the following directory structure will be available:
Local_drive:\ibi\WebFOCUS52\ibi_html\javaassist\intl\
at German (Austrian)
de German (Standard)
en English
es Spanish
fc French Canadian
fr French Standard
Each folder contains all necessary files to display a localized WebFOCUS User Interface. It contains GIFs, TXT, JavaScript and CSS files.
Locating a Resource File
To make changes to the User Interface in Release 5, you must first locate the resource file associated with the feature. Each HTM file now has JavaScript code indicating which resource file it is associated with.
Let's use logon.htm to illustrate an example:
1. Open ibi_html\workbnch\logon.htm with a text editor.
2. Search for the name addIntlTranslatedJS in the file – this is the parameter that allows you to determine which resource file an HTM file is using.
3. Locate the name of the file described in double quotes within the JavaScript code – workbnchtrans.js.
4. We've determined that workbnchtrans.js is the resource file used to populate the strings for logon.htm (see Figure 1).
|
<script type="text/javascript">var ibiOptions = new Array("ibilangtrans");</script>
<script type="text/javascript" src="/ibi_html/javaassist/intl/ibimultilanguage.js"></script>
<script type="text/javascript" src="/ibi_html/javaassist/nlsselect.js"></script>
<script type="text/javascript" src="/ibi_html/javaassist/ibi/html/js/ibigbl.js"></script>
<script type="text/javascript">addIntlTranslatedJS("workbnchtrans.js");</script>
<script type="text/javascript">ibigblloadCss(null);</script>
<script type="text/javascript" src="/ibi_html/javaassist/ibi/html/mre/mrestyle.js"></script
|
Figure 1
Understanding the Resource File
WebFOCUS 5 interprets all text in ibi_html\workbnch\logon.htm as a variable that must be referenced in its resource file – ibi_html\javaassist\intl\en\workbnchtrans.js.
The first string in double quotes is the variable and should not be changed. The second is the text that will be displayed (see Figure 2).
|
// $Revision: 1.22 $
var workbnchtrans_js_Revision = "$Revision: 1.22 $";
function workbnchTransTable()
{
var workbnchtrans = new ibihash(null);
workbnchtrans.put("Select Language","Select Language");
workbnchtrans.put("Submit","Submit");
workbnchtrans.put("Reset","Reset");
workbnchtrans.put("OK","OK");
workbnchtrans.put("admin","admin");
workbnchtrans.put("Logon","Logon");
workbnchtrans.put("Logoff","Logoff");
workbnchtrans.put("Help","Help");
workbnchtrans.put("Welcome","Welcome");
workbnchtrans.put("Welcome to Managed Reporting","Welcome to Managed Reporting");
workbnchtrans.put("Welcome to WebFOCUS Web Services","Welcome to WebFOCUS WebServices");
workbnchtrans.put("User ID:","User ID:");
|
Figure 2
Customizing the User Interface
You should follow two basic rules while editing HTM files to customize the User Interface. Any new or changed text must
 |
Be referenced in its resource file for each language installed, or |
|
Be disabled for the dynamic language switch translation through the use of the noibi translate flag inside HTML tags. |
Here are examples of adding text with and without noibitranslate:
Add New Text With Translation
You want to add a description to the page instructing the user how to log on to their account. Enter the Customer ID and PIN number that was e-mailed to you.
1. Add the new text in the desired location in logon.htm.
2. Open workbnchtrans.js and add the code located in Figure 3 anywhere between the { and } brackets.
|
// $Revision: 1.22 $
var workbnchtrans_js_Revision = "$Revision: 1.22 $";
function workbnchTransTable()
{
var workbnchtrans = new ibihash(null);
workbnchtrans.put("Select Language","Select Language");
workbnchtrans.put("Submit","Submit");
workbnchtrans.put("Description","Please enter your Customer ID and PIN that was e-mailed to you");
|
Figure 3
On a multilingual environment, you should repeat the second step on each intl\xx\xxworkbnchtrans.js (where xx is the language prefix).
Add List Box With Permanent Values (No Translation)
You want to add a list box populated with products your company sells. However, the product names are not required to be translated into other languages. Here, you should disable the Dynamic Language Switch translation:
1. Add the list box in the desired location in the HTM page.
2. Place the flag noibitranslate in the HTML tag preceding each list box value (see Figure 4).
|
<OPTION noibitranslate VALUE="WebFOCUS">WebFOCUS 5</option>
[Flag] [Text]
|
Figure 4
By adding this flag, you are not required to add the following line on each language resource file:
‘workbnchtrans.put("WebFOCUS 5",
"WebFOCUS 5");'
Add New GIF
You want to add your company logo to the logon.htm page. Here you should follow the same instructions for adding a new text to the page as described above.
I know what you're thinking: Company logos do not require translation, so I could use the noibitranslate flag here too, right? Wrong. Every file name-referenced in an HTM page must also be referenced in each resource file. So you may not use the noibitranslate flag with GIFs. Here the correct
approach is as follows:
1. Add the new GIF in the desired location in logon.htm.
2. Open workbnchtrans.js and add the following line anywhere between the { and } brackets: workbnchtrans.put("new_logo.gif","/path/new_logo.gif");
You should now be able to customize your application's User Interface. More tips and detailed documentation are available in the National Language Support for International Computing Manual, second edition.
 
|
