jueves, 21 de diciembre de 2017

Componentes básicos Java Server Faces - JSF

En entradas anteriores vimos como configurar el ambiente de desarrollo para iniciar la construcción de nuestros sistemas JEE y les conté un poco sobre la especificación JEE y el porqué se eligió JSF para nuestros tutoriales, en esta ocasión veremos cuales son los componentes Gráficos que JSF nos provee.

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


Al hacerlo tenemos acceso a los componentes html-jsf, su uso básicamente se da para la construcción de formularios y elementos comunes de la interfaz de usuario (UI) (similares a los componentes gráficos de java swing o android, componentes de interfaz gráfica de usuario)

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

En la siguiente tabla se muestran las etiquetas core


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. 

¿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 ;) 


4 comentarios:

Eres libre de realizar cualquier comentario, desde que pueda ayudar con gusto lo atenderé, y si es un critica, bienvenida sea!!!