Bidirectional user interfaces in WebFacing

WebFacing offers the ability to preserve the existing bidirectional (or bi-di) support from a 5250 application when it is Web-enabled.

Computer systems can process text and user interface elements left to right (as is the case in English) or right to left. Software that has support to handle these languages are said to have bi-di support.

Because existing 5250 applications are often already bi-di enabled, converting these applications requires some special steps to ensure that the WebFacing process interprets the direction of the input screens correctly.

Bidirectional considerations

The following are examples of things that can change from left to right or right to left:
  • display of bidirectional text
  • the relative position of HTML elements including table columns
  • tabbing index order for cursor control through the user interface (focus switching from one widget to the next)
  • cursor progression through a field
  • position of a scroll bar or helper buttons in relation to the widget it controls

Web technology like HTML and XHTML support bi-di with the common base direction attribute dir which can have a value of ltr (left-to-right) or rtl (right-to-left). This attribute can be applied to a number of different tags and the effect depends on the type of widget. Child elements inherit from the parent element. For example, to set the base direction of the entire HTML document to right-to-left, you would apply the attribute to the <html> tag: <html dir="rtl">.

In DDS, there are three keywords that control these kinds of behavior:
  • DSPRL for reversing the displays of screens symmetrically from left-to-right to right-to-left.
  • CHECK(RLTB) to make field tabbing proceed right-to-left and top-to-bottom.
  • CHECK(RL) to make the cursor progress right-to-left through a field.
The WebFacing Tool applies a unique set of rules to the conversion and enablement of bidirectional user interfaces. Here are some of the fundamental principles:
  • The rarely used DSPRL keyword is not supported and the WebFacing HTML page always has a document direction of left-to-right.
  • If the CHECK(RLTB) keyword is specified, then WebFacing assigns tab index values based on a grid (see below).
  • Any field which had the CHECK(RL) keyword specified on it has the dir="rtl" attribute assigned to its generated HTML.

The tab index layout grid

Tabbable widgets (elements that should be accessible by using the Tab key like fields and hyperlinks) can be assigned a tab index. Most browsers assume a default tab index order that proceeds through all tabbable widgets from left-to-right and top-to-bottom.

On 5250 screens where the CHECK(RLTB) keyword is used, WebFacing assigns a tabindex to correctly implement right-to-left tabbing order within the left-to-right HTML page. These tabindices are assigned based on the DDS row and column position. To leave room for moving fields outside of their DDS positions that are constrained to 27 rows and 132 columns at most, WebFacing uses a grid that has 132 rows and 250 columns. (The maximum value for the tabindex attribute is 32767.)

The WebFacing tab index grid for bidi applications

You need to understand this tab index grid in the following circumstances:
  • adding your own tabbable widgets through Web settings or direct editing of WebFacing JSP files
  • using CSS-P to move a tabbable widget enough to change its relative position in the tab index order

In the case of new tabbable widgets added through Web settings, you can use the substitution variable &{TABINDEX}. This will calculate the correct tab index order of your widget at conversion time.

Web Setting Limitations

Note: for information on futher limitations, please refer to the DCF Technote "Limitations when Converting and running BiDirectional Applications with WebFacing."
The Arabic 420 EBCDIC code page does not have the following characters:
  \
  { }
  [ ]
Therefore, the tab index substitution variable is not supported for members using the Arabic 420 code page, nor are other Javascript constructs, like arrays, that rely on these characters.

In addition, Arabic becomes unshaped because it is stored in logical format in the member which is visual format.

Related tasks
Setting tab order for bidirectional applications

Feedback