| Baterķa de ejemplos componentes ICEfaces - Campos de texto |
| Paso 1: Operativa |
Vista/Modelo - notaGastos.jspx - Calcular el total de gastos con AJAX
Ahora vamos a enlazar los datos que introduce el usuario en los gastos de dietas y transporte con un backing bean realizando peticiones AJAX de forma transparente
<?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"
value="#{notaGastosBackBean.dietas}">
<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"
value="#{notaGastosBackBean.transporte}">
<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:inputText value="#{notaGastosBackBean.dietas}"
- el atributo value de la etiqueta <ice:inputText> asocia el valor que el usuario introduce en el campo de texto con la propiedad o variable de instancia dietas del backing bean NotaGastosBackingBean
Nota: Recordemos que la variable de referencia notaGastosBackBean la obtiene el contenedor Web parseando el fichero de configuración JSF faces-config.xml. En el ejemplo que estamos siguiendo este es el contenido del mencionado fichero
<?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> |
Ahora ya sólo nos queda invocar al método getTotalGastos() del backing bean NotaGastosBackBean desde la página notaGastos.jspx y así de esta forma podamos ver el total de gastos de nuestra nota de gastos.
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"
value="#{notaGastosBackBean.dietas}">
<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"
value="#{notaGastosBackBean.transporte}">
<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"
value="#{notaGastosBackBean.totalGastos}">
<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:outputLabel value="#{notaGastosBackBean.totalGastos}"
- cuando el usuario modifca los gasto de dietas o transporte, al perder el foco en el campo de texto se está realizando una llamada AJAX transparente. En la respuesta AJAX, el Framework de ICEfaces se encarga de actualizar de forma transparente los atributos value de los componentes ICEfaces
