PDF de programación - Sesión 4: Internacionalización - JavaServer Faces

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

JavaServer Faces

•Sesión 4: Internacionalización.
Mensajes Flash. RichFaces

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 4

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Índice
• Internacionalización

• Declaración
• Múltiples idiomas
• Mensajes Flash
• RichFaces

• Librerías de componentes profesionales
• Características de RichFaces
• Peticiones Ajax y ciclo de vida
• Skins
• Componentes Ajax
• Redibujado de componentes
• Algunos ejemplos

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 4

2

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Internacionalización
• Internacionalización: diseñar software que pueda
adaptarse a diferentes idiomas y regiones cambios
de ingeniería de código.
• Localización: adaptar el software para una región
específica mediante la adición de componentes
específicos de un locale y la traducción de los textos.
• Buena práctica: colocar todos los mensajes en una
misma localización central.
• Los textos se guardan en un fichero .properties
src/es/ua/jtech/i18n/messages.properties

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 4

3

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Indicar fichero de recursos (I)
• En el faces-config.xml

<?xml version="1.0"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-
facesconfig_2_0.xsd"
version="2.0">
<application>
<resource-bundle>
<base-name>es.ua.jtech.messages</base-name>
<var>msgs</var>
</resource-bundle>
</application>
</faces-config>

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 4

4

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Indicar fichero de recursos (II)
• En cada vista/plantilla

<f:loadBundle basename="es.ua.jtech.messages"
var="msgs"/>

• En cualquier caso, podemos acceder al fichero de
recursos mediante expresiones EL:

#{msgs.login_nombre}

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 4

5

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Placeholders en los mensajes
• Muchos mensajes tienen partes variables en el
mismo.

tuPuntuacion=Tienes {0} puntos.

• Los placeholders se numeran partiendo de cero.
• Uso de f:param para rellenar los placeholders

<h:outputFormat value="#{msgs.tuPuntuacion}">
<f:param value="#{marcadorBean.puntos}"/>
</h:outputFormat>

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 4

6

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise
Acceder a los recursos desde el código
Java

public String checkDni(){
if("11222333".equals(dni.getNumero()) && "N".equalsIgnoreCase(dni.getLetra())){
   FacesContext facesContext = FacesContext.getCurrentInstance();
    ResourceBundle msgs =
facesContext.getApplication().getResourceBundle(facesContext, "msgs");
    facesContext.getExternalContext().getFlash().put("message",
msgs.getString("reset_pass_ok"));
    return "OK";
  }
                
  return "ERROR";
}

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 4

7

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Múltiples idiomas
• Indicar en el faces-config.xml los idiomas soportados

<faces-config>
<application>
<locale-config>
<default-locale>en</default-locale>
<supported-locale>de</supported-locale>
</locale-config>
</application>
</faces-config>

• Idioma por defecto de la aplicación: el del navegador

• Cabecera Accept-Language

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 4

8

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Cambiar el idioma
• De manera programada

UIViewRoot viewRoot = FacesContext.getCurrentInstance().getViewRoot();
viewRoot.setLocale(new Locale("de"));

• Usando el componente f:view

<f:view locale="de">

<f:view locale="#{langController.lang}">

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 4

9

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Mensajes Flash
• Mensajes que se declaran en una petición y se usan
en la siguiente.
• Tomado prestado de Ruby on Rails.
• Uso habitual: paso de mensajes.
ExternalContext.getFlash().put("message", "Campo actualizado
correctamente");
• Recuperamos el mensaje de dos maneras:

#{flash.message}

#{flash.keep.message}

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 4

10

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Librerías de componentes profesionales
• JSF Matrix: http://www.jsfmatrix.net/

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 4

11

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Características de RichFaces
• Proyecto de JBoss (RedHat)
• Licencia LGPL v2.1
• Librería completa de componentes
• Framework maduro, formado por 2 librerías: Ajax4jsf
<a4j:> y componentes RichFaces <rich:>
• Los componentes Ajax pueden usarse con componentes
normales JSF sin modificar casi nada las páginas
existentes
• Posibilidad de gestionar recursos en la propia aplicación
web: imágenes, código javascript y hojas de estilo CSS
• Facilidades para generar recursos en caliente: gráficas,
imágenes, sonido

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 4

12

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Versión 4.2
• Versión 4.2 en el mercado desde abril de 2012

• Componentes nuevos

rich:editor
rich:pickList
rich:orderingList
rich:notify

• Mejoras en componentes ya existentes (drag and drop,
fileUpload, ...)
• Uso de HTML5 para mayor compatibilidad con
dispositivos móviles
• Resource packaging

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 4

13

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Demo

http://showcase.richfaces.org
(RichFaces 4.2.2)

http://www.jtech.ua.es/richfaces-showcase
(RichFaces 4.0)

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 4

14

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Peticiones Ajax
• Con el soporte Ajax es posible realizar peticiones al servidor y

hacer que sólo se redibujen los componentes que nos interesan.
• También es posible ligar eventos javascript de los componentes

HTML con llamadas a métodos en el servidor.

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 4

15

<h:form id="myform"> <h:panelGrid columns="2"> <h:inputText id="myinput" value="#{userBean.name}"> <a4j:support event="onkeyup" render="outtext" /> </h:inputText> <h:outputText id="outtext" value="#{userBean.name}" /> </h:panelGrid></h:form> Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Funcionamiento de las peticiones Ajax

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 4

16

Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Skins
• En RichFaces podemos configurar el aspecto de la
aplicación mediante skins
• Se define mediante un parámetro en el fichero
web.xml

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 4

17

<context-param> <param-name>org.richfaces.SKIN</param-name> <param-value>wine</param-value></context-param>DEFAULTplainemeraldTownblueSkywinejapanCherryrubyclassicdeepMarine Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Componentes Ajax
• a4j:commandButton

• a4j:support

• eventos: onblur, onchange, onclick,
ondblclick, onfocus, onkeydown, onkeypress,
onkeyup, onmousedown, onmousemove,
onmouseout, onmouseover, onmouseup, onselect

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 4

18

<a4j:commandButton value="Enviar" action="#{bean.doAction} rerender=”miBloque"/><h:inputText value="#{user.name}"> <a4j:support event="onkeyup" action="#{bean.doAction} rerender=”miBloque”"/></h:inputText> Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Componentes: pickList

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 4

19

<rich:pickList> <f:selectItem itemLabel="Option 1" itemValue="1"/> <f:selectItem itemLabel="Option 2" itemValue="2"/> <f:selectItem itemLabel="Option 3" itemValue="3"/> <f:selectItem itemLabel="Option 4" itemValue="4"/> <f:selectItem itemLabel="Option 5" itemValue="5"/></rich:pickList> Experto Universitario Java Enterprise
Especialista Universitario Java Enterprise

Componentes: Panel modal

Componentes de presentación

© 2012-2013 Depto. Ciencia de la Computación e IA

Sesión 4

20

<rich:modalPanel id="panel" width="350" height="100"> <f:facet name="header"> <h:panelGroup> <h:outputText value="Modal Panel"></h:outputText> </h:panelGroup> </f:facet> <f:facet name="controls"> <h:panelGroup> <h:graphicImage value="/images/modal/close.png" styleClass="hidelink" id="hidelink" /> <rich:componentControl for="panel" attachTo="hidelin