| Batería de ejemplos componentes ICEfaces - Campos de texto |
| Paso 1: Operativa |
Vista - notaGastos.jspx - Cambiar el texto de un mensaje de validación estándar
En este paso vamos a cambiar el texo del mensaje de validación estándar javax.faces.converter.NumberConverter.NUMBER que muestra por defecto el mensaje frmNotaGastos:txfDietas: 'ABC' is not a number. Example: 99, por un mensaje nuestro personalizado.
Esta imagen muestra un mensaje de error JSF estándar.
Esta otra imagen muestra un mensaje de error personalizado.
Primero de todo vamos a hacer que se muestre el mensaje de error estándar en color rojo.
Para ello vamos a ampliar la hoja de estilos externa stylesheet.css.
....
/*
----------- message ----------
*/
.iceMsg {
}
.iceMsgFatal {
}
.iceMsgError {
font-size:11px;
color: #FF0000;
width:300px;
}
.errorMessage {
}
.iceMsgWarn {
}
.iceMsgInfo {
}
....
/*
----------- Nuevos selectores --------
*/
.iceOutTxtTituloCabecera {
color: #003399;
font-size: 24px;
}
.iceInpTxtNumeros {
border: 1px solid #ABABAB;
background-color: #FFFFFF;
margin: 2px;
padding: 2px;
text-align: right;
width: 80px
}
.iceOutLblNegrita {
color: #000000;
padding-left: 0px;
padding-right: 0px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
}
.iceOutLblNumerosTotales {
border: 1px solid #ABABAB;
background-color:#FAE7AD;
color: #003399;
margin: 2px;
padding: 2px;
text-align: right;
width: 74px;
height: 17px;
font-weight: bold;
}
|
- .iceMsgError {
- la API que muestra el comportamiento de la etiqueta <ice:message> nos indica que el atributo errorClass de esta etiqueta tiene como valor por defecto iceMsgError
- por lo tanto, hemos añadido las propiedaes font-size, color y width al selector .iceMsgError
Y también vamos a añadir la etiqueta <ice:message> a la página notaGastos.jspx
<?xml version="1.0" encoding="UTF-8"?>
<f:view xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ice="http://www.icesoft.com/icefaces/component">
<html>
<head>
<ice:outputStyle href="./resources/stylesheet.css" id="outputStyle1"/>
<title>ICEfaces: Nota de gastos</title>
</head>
<body>
<ice:form id="frmNotaGastos">
<ice:outputText id="txtNotaGastos"
value="Nota de gastos"
style="left: 30px; top: 20px; position: absolute"
styleClass="iceOutTxtTituloCabecera"/>
<ice:outputLabel id="lblDietas"
value="Dietas"
style="left: 30px; top: 70px; position: absolute" />
<ice:inputText id="txfDietas"
partialSubmit="true"
style="left: 118px; top: 66px; position: absolute"
styleClass="iceInpTxtNumeros">
<f:convertNumber maxFractionDigits="2" minFractionDigits="2" locale="es" />
</ice:inputText>
<ice:outputLabel value="€"
style="left: 204px; top: 70px; position: absolute"/>
<ice:message for="txfDietas"
style="left: 220px; top: 76px; position: absolute"/>
<ice:outputLabel id="lblTransporte"
value="Transporte"
style="left:30px; top: 100px; position: absolute"/>
<ice:inputText id="txfTransporte"
partialSubmit="true"
style="left: 118px; top: 96px; position: absolute"
styleClass="iceInpTxtNumeros">
<f:convertNumber maxFractionDigits="2" minFractionDigits="2" locale="es" />
</ice:inputText>
<ice:outputLabel value="€"
style="left: 204px; top: 100px; position: absolute"/>
<ice:message for="txfTransporte"
style="left: 220px; top: 106px; position: absolute"/>
<ice:outputLabel id="lblTotalGastos"
value="Total gastos"
style="left:30px; top: 130px; position: absolute"
styleClass="iceOutLblNegrita"/>
<ice:outputLabel id="lblValorTotalGastos"
style="left: 118px; top: 126px; position: absolute"
styleClass="iceOutLblNumerosTotales">
<f:convertNumber maxFractionDigits="2" minFractionDigits="2" locale="es" />
</ice:outputLabel>
<ice:outputLabel value="€"
style="left: 204px; top: 130px; position: absolute"/>
</ice:form>
</body>
</html>
</f:view> |
- <ice:message for="txfDietas"
- el valor txfDietas del atributo for, indica que este mensaje trabaja para el campo de texto de dietas
Ahora vamos a crear un nuevo Resource Bundle que estará dedicado a los mensajes de validación de los datos introducidos por los usuarios.
1. Crear una nueva carpeta
2. Crear un nuevo fichero de properties
3. Crear un Resource Bundle para la lengua inglesa
Ahora vamos a crear un nuevo fichero de properties para el idioma inglés a partir del fichero ErroresBundle.properties que se encuantra en la carpeta literales.
Nota: Como este ejemplo no está pensado para una aplicación multidioma, no hubiera hecho falta crear un Resource Bundle para la lengua inglesa. Pero así de esta forma hemos aprovechado para ver como se realiza.
4. Editar el Resource Bundle
Nota: En el siguiente vínculo encontramos una lista de todas las llaves (keys) de los mensajes JavaServer Faces estándares Apéndice - Mensajes de error JSF estándares
Para crear una nueva propiedad vamos a hacer clic sobre el botón 
En el cuadro de diálogo New Property introducimos los siguientes datos
- Key: javax.faces.converter.NumberConverter.NUMBER
- esta llave pertenece a un conjunto de llaves de mensajes de validación y conversión predeterminados del Framework JSF
- Value: Valor "{0}" tiene que ser numérico
Para salir de este cuadro de diálogo hacemos clic sobre el botón 
Ahora escribimos Value "{0}" must be a number en la columna en - inglés
5. Declarar el Message Bundle en el fichero de configuración de JSF
Para que el Framework JavaServer Faces sepa donde puede localizar los ficheros Message Bundle, vamos a añadir los siguiente elementos o etiqueta al fichero de configuración de JSF faces-config.xml.
<?xml version='1.0' encoding='UTF-8'?>
<faces-config version="1.2"
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_1_2.xsd">
<application>
<message-bundle>literales.ErroresBundle</message-bundle>
<locale-config>
<default-locale>es</default-locale>
</locale-config>
</application>
<managed-bean>
<managed-bean-name>notaGastosBackBean</managed-bean-name>
<managed-bean-class>com.empresa.backbeans.NotaGastosBackBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
</faces-config> |
