Etiquetas Básicas JSF - HTML
JSF brinda una biblioteca de tags o etiquetas HTML, que brindan un comportamiento especial y más potente que las etiquetas HTML estándar.
Para poder usarlas se debe agregar la siguiente línea dentro de la etiqueta html, allí vemos que se importa mediante el prefijo h para html
La lista de componentes es muy amplia, en la siguiente tabla se muestran algunas de las etiquetas básicas.
TIPO ETIQUETA
DESCRIPCION
Agrupación <h:form />
Define el formulario JSF - HTML
<h:panelGrid />
Crea una tabla con los componentes incluidos en el panelGrid
<h:panelGroup />
Permite agrupar dos o más componentes
Entrada <h:inputText />
Campo de texto para entrada de datos
<h:inputHidden />
Vincula un campo oculto en el formulario
<h:inputSecret />
Vincula un campo de texto de datos de tipo contraseña (no muestra el contenido)
<h:inputTextarea />
Componente área de texto (entrada de datos multilínea)
Salida <h:outputText />
Etiqueta de texto
<h:outputLabel />
Etiqueta de texto (se puede asociar a otro componente)
<h:outputLink />
Permite crear un enlace o hipertexto
<h:outputFormat />
Permite dar formato a un texto de salida
Errores y Mensajes <h:message />
Permite imprimir un mensaje de error en la página
<h:messages />
Permite imprimir varios mensajes de error en la página
Comandos – botones y enlaces <h:commandButton />
Crea un botón para realizar acciones
<h:commandLink />
Crea un enlace al que se le puede asociar a un botón
Selección <h:selectOneMenu />
Lista de selección múltiple con única respuesta.
<h:selectOneRadio />
Lista de radioButtons
<h:selectManyListbox />
Lista de selección múltiple con múltiple respuesta
<h:selectManyCheckbox />
Lista de checkbox
<h:selectBooleanCheckbox />
Componente checkbox
<h:selectManyMenu />
Componente de selección múltiple
Tablas de Datos <h:dataTable />
Permite vincular una tabla de datos dinámicos, se obtienen de una lista de elementos.
Imágenes <h:graphicImage />
Permite vincular imágenes
Etiquetas Básicas JSF - CORE
JSF brinda una serie de etiquetas “core” usadas para manejo de eventos, atributos, validación, conversión de datos, administración de componentes entre otros
Para poder usarlas se debe agregar la siguiente línea dentro de la etiqueta html, allí vemos que se importa mediante el prefijo f para componentes core jsf
ETIQUETA DESCRIPCION
<f:view /> Permite crear una vista en la página
<f: subview /> Permite crear una sub vista en la página
<f: facet /> Permite añadir un elemento facet a un componente (para cabeceras y pies de página por ejemplo)
<f: attribute /> Añade un atributo a un componente mediante clave - valor
<f: param /> Añade un parámetro a un componente
<f: actionListener /> Añade una acción (listener) a un componente
<f: valueChangeListener /> Añade un nuevo valor al escuchador de un componente
<f: convertDateTime /> Agrega fecha a un componente
<f: convertNumber /> Añade conversión de un número a un componente
<f: validator /> Añade un validador a un componente
<f: validateDoubleRange /> Permite validar un rango de tipo double para datos ingresados en el componente
<f: validateLength /> Permite validar longitud del valores de ingresados en un componente
<f: validateLongRange /> Permite validar un rango de tipo long para valores ingresados en componentes
<f: loadBundle /> Carga origen de un elemento bundle
<f: selectitems /> Permite especificar los ítems que se van a cargar en un componente de selección (tomados por lo regular de un arreglo o listas)
<f: selectitem /> Permite especificar el ítem que se va a mostrar en un componente de selección (cuando se hace directamente)
<f: verbatim /> Añade una marca a una página jsf
Algunos de estos componentes se pueden ver en la siguiente imagen, donde vemos el código JSF y su resultado gráficamente.
Lo que da como resultado
Que como vemos aún no presenta un aspecto gráfico muy llamativo pero es la base para nuestros desarrollos a las que mas adelante se le podrían combinar estilos css o librerías graficas que den otro aire a nuestra aplicación.
Y Listo!!!
Existen otra serie de etiquetas usadas para el uso de facelets identificadas con el prefijo “ui” sin embargo estás al estar asociadas a procesos más avanzados serán trabajadas más adelante junto con la aplicación de los componentes presentados mediante ejemplos prácticos y demás ejercicios.
En mi blog y en mi canal les he venido compartiendo material en torno a este gran lenguaje de programación, pueden encontrar muchos artículos y vídeos desde cero, les muestro como descargar las herramientas necesarias para empezar a programar, vamos subiendo cada vez más por los conceptos básicos, pasando por los conceptos de programación orientada a objetos, patrones, hilos, estructuras de datos, acceso a bases de datos entre otros, hasta construir aplicaciones con interfaces grafías de usuario.
Además podrán encontrar un curso desde cero donde les enseño a crear aplicaciones móviles en android mediante una secuencia de vídeos paso a paso que constantemente se está actualizando.
Y ahora iniciaré la secuencia también desde cero donde nos adentraremos al mundo del java Enterprise edition, les mostraré como configurar el ambiente de desarrollo y como crear sus primeras aplicaciones web con java.
Por eso los invito a que visiten a codejavu.blogspot.com, que visiten mi canal Cristian Henao y que estén muy pendientes de las nuevas secuencias
También te podría Interesar.
- Que es Java . Caracteristicas y generalidades
- Introducción y Generalidades JEE
- Conceptos Básicos JEE
- Configuración Ambiente de Desarrollo
- Porqué JSF y no JSP y Servlets
- Ejemplo Eventos del Teclado en Java
- Que son los Patrones de Diseño ?
- Ejemplo Conectando Java con MySql
- Manejo de Excepciones en Java
- Conceptos Básicos de Programación Orientada a Objetos.
- ¿ String Vrs StringBuffer Vrs StringBuilder ?
- Comparando Fechas En Java
- Integración Continua, Primeros Pasos Con Jenkins
¿Hay algo que quieras anexar o comentar sobre esta entrada? no dudes en hacerlo.....y si te gustó, te invito a compartir y Suscribirte ingresando al botón "Participar en este sitio" para darte cuenta de mas entradas como esta ;)