Monday, March 12, 2012

ADF: Add locale aware CSS to an individual component

Some locales have a right to left layout orientation. When creating a skin in ADF Faces, it's (relatively) easy to add locale aware CSS using the :rtl psuedo-class on the end of a skinning key to indicate that the skinning key should be used when the renderer is rendering right to left.
Example:

In this example, we want some padding before the start of the text in the content element of the component. In right to left locales, the start of the text is on the right side by default, so we need to change the padding from the left to the right.

Let's say, however, that you want to specify a locale aware CSS style on an individual component using the contentStyle attribute. There is a handy ADF Faces EL function to help you out here: isRTL. For our example, let's say we want an inputText component whose text content is 'end' aligned. If you weren't considering RTL locales, you could code this as:

This, however, will be right aligned regardless of locale. This is where isRTL() comes to the rescue. This is how we would code this to be locale aware:

The af:isRTL() EL function returns true if we are rendering in RTL, so we can use it to pick the appropriate text alignment.

No comments :

Post a Comment