| Baterķa de ejemplos componentes ICEfaces - Campos de texto |
| Paso 1: Operativa |
Vista - notaGastos.jspx - Convertir los valores de los campos de texto a numéricos
Cuando un usuario introduce por ejemplo la cantidad 246 en el campo de texto de dietas, y seguidamente pierde el foco de este campo de texto el valor que se va a mostrar es 246,00 con dos números decimales precedidos de una coma.
En esta imagen podemos observar que introducimos 246 € en concepto de dietas
y al perder el foco esta cantidad se convierte en 246,00
Este es el código de la página JSPX notaGastos.jspx con componentes ICEfaces
<?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:outputLabel id="lblTransporte"
value="Transporte"
style="left:30px; top: 100px; position: absolute"/>
<ice:inputText id="txfTransporte"
style="left: 118px; top: 96px; position: absolute"
styleClass="iceInpTxtNumeros"/>
<ice:outputLabel value="€"
style="left: 204px; top: 100px; 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"/>
<ice:outputLabel value="€"
style="left: 204px; top: 130px; position: absolute"/>
</ice:form>
</body>
</html>
</f:view> |
- <ice:inputText id="txfDietas" partialSubmit="true"
- el atributo partialSubmit hace posible que se realice una llamada AJAX al servidor de forma transparente cuando se pierde el foco del componente
- <f:convertNumber maxFractionDigits="2" minFractionDigits="2" locale="es" />
- esta etiqueta es propia del núcleo de JSF (JavaServer Faces)
Ahora vamos a tratar el campo de texto Transporte de la misma forma que el campo de texto Dietas, es decir realizando una petición AJAX cuando se pierde el foco. También tendremos en cuenta que el campo de texto Transporte y la etiqueta Total gastos tienen valor es como localización y los números tienene que tener dos decimales.
Este es el código ampliado de la página JSPX 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: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: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> |
