JSF – Usando arquivos de propriedades(Resource Bundle) para internacionalização de aplicativos

 

Este artigo tem como objetivo mostrar o uso de arquivos .properties (os Resources Bundles), eles servem pra inúmeras coisas, mas nesse artigo iremos dar um enfoque maior em seu uso para internacionalização de aplicações em JSF.

 

index.jsp

<%@page contentType="text/html"%>

<%@page pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

   "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>JSF - Usando Properties Files</title>

    </head>

    <body>

    <h1>JSF - Usando Properties Files</h1>

    <br/>

    <li><a href="./simples.jsf">Exemplo Mensagens Simples</a></li>

    <li><a href="./parametros.jsf">Exemplo Mensagens Parametrizadas</a></li>

    <li><a href="./parametros.jsf">Internacionalização</a></li>

</body>

</html>

 

simples.jsp

<%@page contentType="text/html"%>

<%@page pageEncoding="UTF-8"%>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>

<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>Mensagens Simples</title>

    </head>

    <body>

        <f:view>

            <h1>JSF - Usando Properties Files</h1>

            <f:loadBundle basename="recursos.mensagens" var="msgs"/>

            <h2><h:outputText value="#{msgs.title}"/></h2>

            <BR>

            <h:outputText value="#{msgs.text}"/>

            <P>

            <h:form>

                <table border="0" cellspacing="2" cellpadding="2">

                    <tbody>

                        <tr>

                            <td> <h:outputText value="#{msgs.firstNamePrompt}"/>:</td>

                            <td><h:inputText /></td>

                        </tr>

                        <tr>

                            <td><h:outputText value="#{msgs.lastNamePrompt}"/>:</td>

                            <td> <h:inputText /></td>

                        </tr>

                        <tr>

                            <td><h:outputText value="#{msgs.emailAddressPrompt}"/>:</td>

                            <td><h:inputText /></td>

                        </tr>

                        <tr>

                            <td><h:commandButton

                                value="#{msgs.buttonLabel}"/></td>

                            <td></td>

                        </tr>

                    </tbody>

                </table>               

            </h:form>

        </f:view>

    </body>

</html>

 

Altere o contéudo do arquivo web.xml acrescentando as seguintes linhas:

 

<servlet>

        <servlet-name>Faces Servlet</servlet-name>

        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>

        <load-on-startup>1</load-on-startup>

        </servlet>

    <servlet-mapping>

        <servlet-name>Faces Servlet</servlet-name>

        <url-pattern>*.jsf</url-pattern>

 </servlet-mapping>

<welcome-file-list>

      <welcome-file>

            index.jsp

        </welcome-file>

</welcome-file-list>

 

Agora vamos criar um pacote chamado recursos e dentro do pacote recursos vamos criar um arquivo com extensão .properties, vamos chama-lo de mensagens.properties.

 

E nele adicionaremos o seguinte conteúdo:

 

title=Inscrição para Workshop

text=Por favor insira o seu nome e sobrenome e email.

firstNamePrompt=Nome

lastNamePrompt=Sobrenome

emailAddressPrompt=Email

buttonLabel=Inscrever

 

Ao Executarmos o nosso aplicativo nós nos depararemos com a tela mostrada na figura1, que é nossa pagina índice:

 

cvjsfuapiafig01.jpg 

Figura1

 

Clique no link Exemplo Mensagens Simples.

 

E você será levado para o conteúdo da figura2:

 

cvjsfuapiafig02.jpg 

Figura2

 

Como pode ver o nosso formulário foi composto com os campos existentes no arquivo mensagens.properties.

 

Pode parecer meio inútil mas vamos prosseguir e você começara a ver utilidades pro exemplo a seguir.

 

Crie o arquivo parametros.jsp e insira o segundo contéudo:

 

<%@page contentType="text/html"%>

<%@page pageEncoding="UTF-8"%>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>

<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Mensagens Parametrizadas</title>

</head>

<body>

    <div align="center">

        <f:view locale="#{facesContext.externalContext.request.locale}">

        <f:loadBundle basename="recursos.mensagens2" var="msgs"/>

        <h1><h:outputText value="#{msgs.title}"/></h1>

        <h:outputFormat value="#{msgs.text}">

            <f:param value="#{msgs.firstName}"/>

            <f:param value="#{msgs.lastName}"/>

            <f:param value="#{msgs.emailAddress}"/>

        </h:outputFormat>

    </div>

    <P>

    <h:form>

        <table border="0" cellspacing="2" cellpadding="2" align="center">

            

            <tbody>

                <tr>

                    <td> <h:outputFormat value="#{msgs.prompt}">

                            <f:param value="#{msgs.firstName}"/>

                    </h:outputFormat>:</td>

                    <td><h:inputText /></td>

                </tr>

                <tr>

                    <td><h:outputFormat value="#{msgs.prompt}">

                            <f:param value="#{msgs.lastName}"/>

                    </h:outputFormat>:</td>

                    <td><h:inputText /></td>

                </tr>

                <tr>

                    <td><h:outputFormat value="#{msgs.prompt}">

                            <f:param value="#{msgs.emailAddress}"/>

                    </h:outputFormat>:</td>

                    <td><h:inputText /></td>

                </tr>

                <tr>

                    <td><h:commandButton

                            value="#{msgs.buttonLabel}" />

                        </td>

                    <td></td>

                </tr>

            </tbody>

        </table>  

    </h:form>

    </f:view>   

</body>

</html>

 

Agora vamos criar o arquivo mensagens2,properties também no pacote recursos.

 

O conteúdo dele é o mostrado a seguir:

 

title=WorkShop Registration

firstName=first name

lastName=last name

emailAddress=email address

text=Please enter your {0}, {1}, and {2}.

prompt=Enter {0}

buttonLabel=Register Me

 

Como pode ver no conteúdo de mensagens.properties usamos valores entre cochetes, para a formar uma frase e com isso evitar escrevermos nomes dos campos novamente num properties file, usamos isso na pratica  no arquivo parametros.jsp:

 

<h:outputFormat value="#{msgs.text}">

<f:param value="#{msgs.firstName}"/>

<f:param value="#{msgs.lastName}"/>

<f:param value="#{msgs.emailAddress}"/>

</h:outputFormat>

 

O resultado é mostrado a seguir:

 

cvjsfuapiafig03.jpg 

Figura3

 

Agora vamos ver o  uso dos Properties Files para Internacionalização de aplicativos, graças a estes arquivos é possível fazer uma aplicação que atenda a varios usuários de nacionalidades diferentes sem necessáriamente ter que criar uma versão da aplicação para cada idioma.

 

Vamos criar arquivos para 4 idiomas :  Inglês, Português, Espanhol e Francês;

 

mensagens2_en.properties

# Sample ResourceBundle properties file

title=Registration

firstName=first name

lastName=last name

emailAddress=email address

text=Please enter your {0}, {1}, and {2}.

prompt=Enter {0}

buttonLabel=Register Me

 

mensagens2_pt.properties

# Sample ResourceBundle properties file

title=Cadastro

firstName=nome

lastName=Sobrenome

emailAddress=endereço de email

text=Informe por favor seu {0}, {1}, e {2}.

prompt=Informe {0}

buttonLabel=Enviar

 

mensagens2_es.properties

# Sample ResourceBundle properties file

title=Registro

firstName=primer nombre

lastName=apellido

emailAddress=dirección de email

text=Incorpore por favor su {0}, {1}, y {2}.

prompt=Incorpore {0}

buttonLabel=Coloqúeme

 

mensagens2_fr.properties

# Sample ResourceBundle properties file

title=Enregistrement

firstName=prénom

lastName=nom

emailAddress=adresse électronique

text=Merci de entrer votre {0}, {1}, et {2}.

prompt=Entrez votre {0}

buttonLabel=Enregistrez moi

 

A rodar a aplicação ela irá verificar qual a localidade do Browser usado pelo visitante e ira carregar a pagina de acordo com o idioma setado, caso não encontre ela usa o idioma padrão contido no arquivo mensagens2,properties.

 

Para isso é necessário modificar o idioma usado no navegador e reiniciar a pagina para ver a pagina sendo exibida em outro idioma.

 

No Firefox use Edit Preferences e configure conforme mostrados nas figuras  e  mostradas abaixo:

 

cvjsfuapiafig04.jpg 

Figura4

 

Em Languages(Linguagem) clique em Choose(escolher).

 

cvjsfuapiafig05.jpg 

Figura5

 

Para priorizar um idioma clique na seta move up(mover para cima) ou move down(mover para baixo).

 

Caso você use Netscape é bem parecido, no IE eu não me lembro e no Opera  é só ir em  Tools >>  Preferences >> General >> Languages e escolher o idioma desejado.

 

O resultado é mostrado:

 

cvjsfuapiafig06.jpg 

Figura6

 

cvjsfuapiafig07.jpg 

Figura7

 

cvjsfuapiafig08.jpg 

Figura8

 

cvjsfuapiafig09.jpg 

Figura9

 

Sobre este artigo:

IDE utilizada: Netbeans 5.5

Versão do Bd: não se aplica.

Navegadores Utilizados: Firefox 2.x, Opera 9.x