| Baterķa de ejemplos componentes ICEfaces - Campos de texto |
| Paso 1: Operativa |
Vista - notaGastos.jspx - Crear el formulario de la nota de gastos
Vamos a crear un formulario que muestre
- el literal Nota de gastos con un tamaño de letra de 24 pixels y un color RGB 00, 33, 99 expresado en hexadecimal
- una etiqueta que muestre el literal Dietas
- un campo de texto con un tamaño de 80 pixels y que sus valores estén indentados a la derecha
- y finalmente otro literal que indique el tipo de moneda que en este ejemplo van a ser Euros
Primero vamos a añadir dos selectores al final de la hoja de estilo en cascada stylesheet.css
/*
----------- 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
} |
Y seguidamente ampliamos el código de la página JSPX con componentes ICEfaces 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"
style="left: 118px; top: 66px; position: absolute"
styleClass="iceInpTxtNumeros"/>
<ice:outputLabel value="€"
style="left: 204px; top: 70px; position: absolute"/>
</ice:form>
</body>
</html>
</f:view> |
- <ice:form id="frmNotaGastos">
- renderiza la etiqueta <form> de HTML
- <ice:outputText id="txtNotaGastos"
- renderiza el contenido del atributo value como un texto o literal
- <ice:inputText id="txfDietas"
- renderiza la etiqueta <input> de un formulario HTML con el atributo type con valor text
- <ice:outputLabel id="lblDietas"
- es muy conveniente cuando trabaja en conjunción con el elemento <ice:inputText>. Más adelante ya veremos la utidad de su attribbuto for
Si ejecutamos la aplicación veremos lo siguiente
Ahora vamos a añadir Transporte como un nuevo gasto y Total gastos
- el literal Total gastos va estar en negrita
- en la hoja de estilos vamos a crear un nuevo selector llamado .iceOutLblNegrita
- el valor del total de gastos va a ser una etiqueta <ice:outputLabel> en vez de un campo de texto <ice:inputText>
- en la hoja de estilos vamos a crear un nuevo selector llamado .iceOutLblNumerosTotales
Este es el aspecto de la página Web que vamos a crear
Este es el código de la hoja de estilo en cascada stylesheet.css después de añadirle los dos nuevos selectores
/*
----------- 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;
} |
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"
style="left: 118px; top: 66px; position: absolute"
styleClass="iceInpTxtNumeros"/>
<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>
|
