Display rtl for the whole page for multilanguage using JSF - jsf

I built web site using JSF, support multi-language(German and English).
I just set the internationalization values for each language in properties to be use in xhtml. Now I added Arabic language and create lang_ar.properties for Arabic values. It works fine, but the direction is still displayed in the wrong place. Since Arabic is RTL, so when change to Arabic the its should change the direction of the whole content of the page to RTL.
I searched a lot for the solution but I didn't find what I am looking for.
If I use html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar" dir="rtl">
It will change the direction of the page even if I use German or English. I don't want to use separate page for Arabic content I want use the same pages which take the value from properties files just like English and German, but I need to change the direction when use arabic properties.
If I use the following:
<h:inputText ... dir="#{view.locale.language eq 'ar' ? 'rtl' : 'ltr'}" />
This will works just for the plain text entered in the input field not to the input field itself. So the input field will stay ltr but the text inside will be rtl.
Can any one help me?

Related

How to display default text when translation is missing using jhiTranslate

in JHipster application I want to display a default text within a html element when a translation is missing.
I use angular ngFor directive to display elements in an array, some of which have a translation and some of which are inserted by a user, and therefore have no translation in i18n json. I couldn't find any documentation that explained how to use jhiTranslate
I was thinking about syntax like this
<div jhiTranslate="example.1">Default Text</div>
and if this particular translation was missing a "Default Text" would be shown. for now it shows "translation-not-found[example.1]".
Is there a way to achieve this using jhiTranslate?

How to change date time format on a localized website?

I have a localized website for different languages
Users can select which language to use in a profile and this will be applied beforePageLoad
using
context.setLocalString("en")
"en" is default to en-US i believe so the dates on the website is displayed in the US format so I learned that I can use instead.
context.setLocale(new Locale("en","gb"))
the problem with setLocal is that is does not update the HTML lang="en" attribute so event though the dates are correct after using setLocal the language file that is used is still the englisn(US) and not the english(uk) one. (i.e not html lang="en-gb")
so when users from england set their language to en-uk in thier profile they get the US language file.
So I tried to do both like this
context.setLocale(new Locale("en","gb"))
context.setLocalString("en-GB")
but then the setLocalString overrides the setLocalString and vice versa. so it looks like I can't use them both
Is there any way I can add code on beforePageLoad to make sure both the html lang attribute gets updated with correct language and my dates dispay in the correct format for the language set?
Instead of using the context object try to set the locale directly in the view root during beforeRenderResponse:
<xp:this.beforeRenderResponse>
<![CDATA[#{javascript:
facesContext.getViewRoot().setLocale( new java.util.Locale("en-GB") );
}]]>
</xp:this.beforeRenderResponse>
Or you can switch the locale in a phase listener as described here:
http://openntf.org/XSnippets.nsf/snippet.xsp?id=xpages-localization-setter
EDIT:
The locale setting is a little bit strange. You have to use an underscore between en and GB when using context.setLocaleString() (as Panu Haaramo answered), but this won't solve problem, because the ViewRootRender uses only the language setting for the generation of the lang attribute while rendering the HTML output.
This
new java.util.Locale("en", "GB").getLanguage()
will return en only, the "GB" is ignored.
Using the context.setLocaleString will bring the same result because this only parses the given string and converts it into a java.util.Locale which returns the same result as descibed.
But using an undefined Locale will generate a lowercased lang attribute. F.e. this
<xp:this.beforeRenderResponse>
<![CDATA[#{javascript:
facesContext.getViewRoot().setLocale( new java.util.Locale("en-Blabla-Blubb") );
}]]>
</xp:this.beforeRenderResponse>
generates the following HTML tag:
<html lang="en-blabla-blubb">
Thats why the code at top of this answer sets the lang attribute to en-gb, but this is still incorrect: It should set it to en-GB as described here: w3.org: Best Practices: Specifying Language in XHTML & HTML Content

How to handle formatting like bold, italic, images, etc with resource bundle internationalization

I am using JSF 2.0 framework to build a web application.
I know how to handle java web application internalization (i18n) using ResourceBundle.
This approach is suitable when you have to work on single words or phrase.
But when you have an entire paragraph or a whole text whith formatting (blod, italic, images, etc), how can we handle i18n in this case? Because of formatting, I don't know if it will be a good idea to put that text in a properties file.
There is not really a standard for this. It's in general affordable as long as you don't put markup which represent layout in the resource bundle files. Elements representing layout are usually HTML block elements like <div>, <p>, <h1>, etc. So, you need to make sure that you restrict to using HTML inline elements like <b>, <i>, <img>, <span>, <br>, etc in properties files.

JSF: Hide input when typing in the text box

I want to hide the first 6 characters of SSN when user types in the text box. Something like *--1234
Is there any built in tag I can achieve this. Thanks in advance.
The "built in" components of the standard JSF implementation only represents the standard HTML elements. Your functional requirement is not covered by any of those HTML elements, so the standard JSF implementation won't have it as well. The closest one is the HTML <input type="password"> which is provided by JSF <h:inputSecret> component, but this will mask all characters instead of only a specified subset.
Also no 3rd party JSF component libraries comes to mind which is able to do this. You have basically 2 options, an easy one and a harder one.
Split the SSN over two input fields. One <h:inputSecret> and one <h:inputText>. Add if necessary some onkeyup JavaScript helper code which auto-tabs to the next field when 6 characters are entered. In the server side just glue the two parts together.
Use a <h:inputHidden> for the value and a normal <input type="text"> with some onkeydown JavaScript helper code which fills the hidden input and returns the masked character to the visible input for the first 6 characters.

How to display HTML inside h:inputTextarea

How to display value with HTML tag inside h:inputTextarea?
In DB I have column contain data, it contain plain text and HTML tag, I want display it on h:inputTextarea. How can I do it?
i want display HTML inside h:inputTextArea it mean in DB contain <br/> or <b> and </b> , when it display on h:inputTextArea it must display bold or break line.
That's not possible due to the nature of HTML <textarea> element. Even, if it was possible this puts doors wide open to XSS injection attacks. Also, how would you ever let the enduser edit the markup in the textarea like changing bold to for example italics or to add another markup? That's plain impossible with a <textarea>.
If your sole intent is to have a rich text editor, then you need to homegrow one with help of a <div> and a good shot of JavaScript or, better, use an existing JSF component which achieves this. For example, PrimeFaces' <p:editor>.
Or, if your sole intent is to display it only, then use <h:outputText> with the escape attribute set to false. Once again, keep XSS risks in mind.
Use the f:verbatim tag -> JSF Verbatim Tag

Resources