How to add locale aware CSS to an individual component in ADF Faces.
- by [email protected]
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. Example:af|inputListOfValues::content { padding-left: 3px;}af|inputListOfValues::content:rtl { padding-left: 0px; padding-right: 3px;}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:<af:inputText id="idInputTextRight" label="right aligned" value="Test" contentStyle="text-align: right;"/>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:<af:inputText id="idInputTextEnd" label="end aligned"
value="Test"
contentStyle="text-align:
#{af:isRTL()?'left':'right'};"/>
The af:isRTL() EL function returns true if we are rendering in RTL, so we can use it to pick the appropriate text alignment.
