Introduction

This article aims to show you how to easily setup your XPages application to support bidirectional (bidi) scripts, e.g. Arabic and Hebrew.
Supporting bidi or right-to-left locales is important for any company as you reach and cater for a larger audience.
In this article you will learn how to add a theme, stylesheets(css) to support both left-to-right and right-to-left scripts, and also how to handle some of the issues you may encounter along the way.

Bidi Support

Firstly, I'll briefly describe what a theme is. A theme is used to define the look and feel of an application. They can be set globally (all applications) or per application. A theme is handled on the server side and drives the page creation and HTML generation.
There are two themes shipped with Lotus Domino Server, webstandard and OneUI, both of which support right-to-left locales. To use one of these themes, you can either change the server default by modifying the xsp.theme value in the xsp.properties file (<domino_directory>\xsp\nsf, to webstandard or oneui) or specify one of the themes in the application properties, Figure 1.

To add a theme to your application:

1. Open/Create an XPages application
2. Expand the Resources node in the Applications navigator.
3. Right-click on Themes and select New Theme...
4. Enter a name and click ok.

To use this theme instead of the server default, open the Application properties and select your theme from the Default theme combo box.
In the Source tab of the theme, you will see example XML for defining CSS files in the resources section and adding properties for controls.
Add a resource to define the main CSS file used in the application, set the content-type to “text/css” and the hyperlink(href) to the name of the stylesheet, e.g. style.css. An example of the XML for adding a resource can be seen in XPages Sample Code 1:

      text/css


       style.css

Those resource can have a conditional expression, for example based on the bidi mode. A developer can then provide different CSS files depending on the text alignement. So adding support in the theme file for bidirectional locales, involves a simple JavaScript call, context.isDirectionRTL() or context.isDirectionLTR(), which checks the value of the dir property in the XPage.
XPages Sample Code 2 shows the XML for adding the CSS files which will have left-to-right and right-to-left specific styling.

"#{javascript:context.isDirectionLTR()}"
 


       text/css


       bidiLTR.css





"#{javascript:context.isDirectionRTL()}"
 


       text/css


       bidiRTL.css

Figure 2 shows an example of a bidirectional XPage application. Create a new XPage, add a panel including some text.

XPages Sample Code 3 shows the classes which have been added to the stylesheets:

style.css


.bidiPanel {font-size:12pt;;
font-weight:bold;}




bidiLTR.css 

.bidiPanel{ 

      text-align:left;


      background:url(background.jpg)
no-repeat scroll left top;


}

In style.css, add the general properties that aren't affected by the locale, e.g. I have added font attributes. In bidiLTR, where all the left-to-right specific styling will be placed, I have left aligned the text within the panel and specified a background image which has a curved corner on the top left. To apply the bidiPanel class to the panel see Figure 2 above. Also within the application, I have set the left padding of the panel to 15pixels. The rendered left-to-right XPage can be seen in Figure 3 and the rendered XPage source code below.


In Figure 3 we can see that the text within the panel is left aligned and is indented because of the padding-left property being set to 15pixels, also the background image is left positioned.
The source code below, XPages Sample Code 4, shows the two new CSS files included. The bidiLTR.css was added because the locale of the browser is set to English, therefore context.isDirectionLTR() returned true and context.isDirectionRTL() returned false.

 

 






















 

 




hello world