Making JSF website multilingual - jsf

Trying to make JSF web application multilingual. For that purpose cover all the HTML code with <f:view> tags:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns= ... >
<f:view locale="#{actionsContainer.languageDetails.locale}">
<head>
<meta charset="utf-8" />
<f:loadBundle basename="messages.Messages" var="key" />
</head>
<body>
<h:outputText value="#{key.myText}" />
</body>
</f:view>
</html>
Than in resources I have several 'Messages.properties' files with a translations to some languages:
Messages_en.properties
Messages_es.properties
Messages.properties // default
The sample content of this files 'Messages_es.properties' is:
myText=España
Let's take, my locale is "es", and than Spanish translation file loads it's value and renders to the screen. However, the special characters (eg 'ñ') doesn't display properly in a browser output. Instead of special Spanish letters I am getting something like this "ó".
I have tried to save .properties file with UTF-8 encoding, without BOM. And the output has been changed to something like this "".
And so the question is how do I get this special any language letters in an output?!

Properties files are by default read using the ISO-8859-1 encoding. You need the JDK native2ascii tool to convert UTF-8 properties files to ISO-8859-1 properties files and then use those instead.
In JSF you can however also specify a custom ResourceBundle with a Control wherein you overridde the reading of properties files to use UTF-8 instead. See also this article.

when working with resource bundles, consider using ResourceBundle Editor plugin for eclipse (http://sourceforge.net/projects/eclipse-rbe/).

Related

render html from string without affecting formatting [duplicate]

Is there any way to setup Firefox and Chrome to work with escape=false attribute in h:outputText tag. When there is some html that needs to be shown in the browser, Firefox and Chrome show parsed string correctly, but any other links in application are freezed (??).
The example html from db:
<HEAD>
<BASE href="http://"><META content="text/html; charset=utf-8" http-equiv=Content-Type>
<LINK rel=stylesheet type=text/css href=""><META name=GENERATOR content="MSHTML 9.00.8112.16434">
</HEAD>
<BODY><FONT color=#000000 size=2 face="Segoe UI">läuft nicht</FONT></BODY>
Parsed HTML on the page:
läuft nicht
What is very weird, is that in IE everything works (usually it is opposite).
I use primefaces components (v2.2), .xhtml, tomcat 7 and JSF 2.0
You end up with syntactically invalid HTML this way:
<html>
<head></head>
<body>
<head></head>
<body>...</body>
</body>
</html>
This is not right. There can be only one <head> and <body>. The browsers will behave unspecified. You need to remove the entire <head> and the wrapping <body> from that HTML so that you end up with only
<FONT color=#000000 size=2 face="Segoe UI">läuft nicht</FONT>
You'd need to either update the DB to remove unnecessary HTML, or to use Jsoup to parse this piece out on a per-request basis something like as follows:
String bodyContent = Jsoup.parse(htmlFromDB).body().html();
// ...
Alternatively, you could also display it inside a HTML <iframe> instead with help of a servlet. E.g.
<iframe src="htmlFromDBServlet?id=123"></iframe>
Unrelated to the concrete problem:
Storing HTML in a DB is a terrible design.
If the HTML originates from user-controlled input, you've a huge XSS attack hole this way.
The <font> tag is deprecated since 1998.
It seems to me that you're trying to do something that JSF was not really meant to do. Rather than try to insert HTML in your web page, you ought to try having the links already on your page and modifying the "rendered" attribute through an AJAX call.

JSF Shared Facelets

I have a project in jsf that is shared by multiple projects. The structure of the project is the same as that mentioned in the answer to the question Structure for multiple JSF projects with shared code
The someTemplate.xhtml mentioned in that structure has a outputStyleSheet statement immediately after the opening
<h:body>
tag :
<h:outputStylesheet name="css/some.css" library="common"></h:outputStylesheet>
The shared project is packaged into shared.jar and is placed into the WEB-INF/lib directory of a client project.
When I make a client file (as part of a client project) that uses the someTemplate.xhtml as a template using
<ui:composition template="/common/someTemplate.xhtml">
the file some.css is not recognized. None of the styles mentioned in some.css take effect.
When I look into the source of the page that is generated, I see these two lines:
<link type="text/css" rel="stylesheet" href="/javax.faces.resource/some.css.jsf" />
<link type="text/css" rel="stylesheet" href="RES_NOT_FOUND" />
I have tried many different combinations of file names and locations for the css file, and the template file as well. But the problem remains the same. In all cases, the styles in some.css were not recognized. I am also curious as to why it says 'RES_NOT_FOUND' in the href. Any help will be highly appreciated.
Thanks
Mahendra

Charset Encoding Issue with JavaDB and EclipseLink in JSF

I'm new at JSF projects. What I would like my project to display UTF-8 characters correctly. When I fill an inputText with UTF-8 characters and then I press commandButton, web site doesn't display it correctly. But I can insert a word that contains utf-8 into database. I use Apache Derby(JavaDB) and EclipseLink. How can I fix this issue ?
You could encode your HTTPHeader with UTF-8 in your servlet:
resource.setContentType ("text/html;charset=utf-8");
Also you could put this at the top of your page:
<%# page pageEncoding="UTF-8" %>
OR (The following within the header on your xHTML)
<meta http-equiv="content-type" content="text/html; charset=utf-8">
And also make sure your databases are encoding UTF-8:
ALTER DATABASE dbname DEFAULT CHARACTER SET utf8;

how to send an alert message with Turkish characters

I am programming a Web-Application with Java EE and JSF.
I want to give alert (javascript) messages with Turkish characters (such as Ç,ü and ö etc.) on my app. But, after alert function is fired, I see the alert message with unrelated characters such as <?>, instead of Turkish characters on .xhtml pages on any browser (I tried it on IE10 and Chrome).
I need an advice to handle the problem. If I find a solution, I can also use this to set values of element (ex./h:commandButton) by javascript.
EDIT:
Additional information - Static strings that includes Turkish letters on html or jsf tags are shown properly. However, when I change them via some javascript functions, if there is any Turkish characters in strings that are changed, these Turkish letters cannot be shown properly.
It is too old question but I want to answer for maybe someone need.
If your problem with alert messages, open your javascript file on notepad and save as with Utf-8 options.
Or you can use same technic for others js file you need encoding char.
If its just specific to chrome may be you could try changing the page encoding.
Got Control->Tools->Encoding and change that to Auto Detect or Unicode or turkish etc..
If its a general issue then add the meta info
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1254">
<META HTTP-EQUIV="Content-language" CONTENT="tr">
or
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-9">
<META HTTP-EQUIV="Content-language" CONTENT="tr">
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1254">
<META HTTP-EQUIV="Content-language" CONTENT="tr">
<title>Sample</title>
<script>
function alertText() {
alert(document.getElementById("turkish").innerHTML);
}
</script>
</head>
<body>
<div id="turkish">Türkçe olarak hellow dünya</div>
<input type="Button" onclick="alertText()" value="Say" />
</body>
</html>

Can we include angularjs component in Facelets page

I am new to angularjs, and was trying to create a sample angularjs in a Facelets file. But I am getting an error in the line <html ng-app> in Eclipse IDE. The error specifies that the ng-app attribute should be followed by an = character. Is it not possible to include angularjs code in a Facelets XHTML file?
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:ng="http://angularjs.org" ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
Take a look at following:
Try angular faces: https://github.com/stephanrauh/AngularFaces
And there is also a project: https://github.com/pankajtandon/PointyPatient
Prime faces refer to: http://angularprime.appspot.com/#/main
The best way is to go with HTML & JS as Client, and JAX-RS on Server Side.
I had similar problems, with Primefaces and Bootstrap, and became convinced, that JS & HTML at the moment is better for client side development.
Give the attribute the ng-app.
The value of the attribute would be the same as the name of variable that contains the return value of angular.module().
for ex:
ng-app="SampleApp"
in the html page
var SampleApp = angular.module("SampleApp", ["ngResource"]).
config(
//your code
);
in the app.js file
I think this should work for you.
The logic is that, when you define the ng-app it gives the reference to the particular module of app.js that would call the relevant controllers.
There is an app.js file in angularjs. This contains all the controllers define. These controllers act as connecters and data pipeliners between the html(our view) and the .cs(mvc controller) files.
These controllers are defined in a module (as i have defined one in the above answer).
There can be numerous modules in app.js. and hence they wil have numerous controllers.
ng-app is a directive that contains the name of the module you want to use as attribute.
ng-app defined will be active till the closing tag of the tag defined. That means if you have defined ng-app in html tag, it will work till the html tag closes, if in a div, it will work for that division.
If you dont get anything, google it, or refer the angularjs documentation, or shoot me a question.!!
I hope you got something out of it.:-)
Stumbled on this while searching myself.
XHTML does not allow an attribute without a value. While you can ignore this in Eclipse, the latest JSF libraries blow up and you'll get an exception.
Specify a value, which corresponds to your module name. For example, if you initialize your angular module with:
var myAppModule = angular.module('myApp', []);
Then you need to specify:
<html ng-app="myApp">
And all should be good minus some warnings in eclipse for not recognizing "ng-app". Works for me. Also, you probably want the HTML 5 doc type instead of the strict you have. Try:
<!DOCTYPE html>
<html ng-app="myApp">

Resources