SlideShare a Scribd company logo
1 of 11
Download to read offline
Eric Gustavo Coronel Castillo
gcoronelc.blogspot.com
gcoronelc@gmail.com
JAVA SERVER FACES
COMPONENTES HTML
Temas
 Listado de componentes
 Menú de selección
 Paneles
 Tablas
 Demo
LISTADO DE COMPONENTES
 Librería
xmlns:h=http://java.sun.com/jsf/html
 Componentes
<h:column> <h:commandButton> <h:commandLink>
<h:dataTable> <h:form> <h:graphicImage>
<h:inputHidden> <h:inputSecret> <h:inputText>
<h:inputTextarea> <h:message> <h:messages>
<h:outputFormat> <h:outputLabel> <h:outputLink>
<h:outputText> <h:panelGrid> <h:panelGroup>
<h:selectBooleanCheckbox> <h:selectManyCheckbox> <h:selectManyListbox>
<h:selectManyMenu> <h:selectOneListbox> <h:selectOneMenu>
<h:selectOneRadio>
MENU DE SELECCIÓN
Caso 01
<h:outputLabel value="Producto:"/>
<h:selectOneMenu value="#{venta.codigo}">
<f:selectItem itemValue="A000" itemLabel="Seleccione un producto" />
<f:selectItem itemValue="A001" itemLabel="Computadora" />
<f:selectItem itemValue="A002" itemLabel="Impresora" />
<f:selectItem itemValue="A003" itemLabel="Laptop" />
<f:selectItem itemValue="A004" itemLabel="Disco duro" />
</h:selectOneMenu>
MENU DE SELECCIÓN
Caso 02
<h:outputLabel value="Producto:"/>
<h:selectOneMenu value="#{venta.codigo}">
<f:selectItem itemValue="A000" itemLabel="Seleccione un producto" />
<f:selectItems value="#{venta.productos}" />
</h:selectOneMenu>
En este caso venta.productos representa una colección de
objetos SelectItem.
MENU DE SELECCIÓN
Caso 03
<h:outputLabel value="Producto:"/>
<h:selectOneMenu value="#{venta.codigo}">
<f:selectItem itemValue="A000" itemLabel="Seleccione un producto" />
<f:selectItems value="#{venta.productos}"
var="r"
itemValue="#{r.codigo}"
itemLabel="#{r.codigo} - #{r.nombre}" />
</h:selectOneMenu>
En este caso venta.productos representa una colección de
objetos ProductoBean.
PANELES
<h:panelGrid columns="2" border="1">
<f:facet name="header">
<h:outputText value="Tabla con números"/>
</f:facet>
. . .
. . .
. . .
<f:facet name="footer">
<h:outputText value="Pie de tabla" />
</f:facet>
</h:panelGrid>
TABLAS
<h:dataTable value="${Coleccion}" var="item">
<h:column>
<f:facet name="header">
<h:outputText value=“Titulo" />
</f:facet>
<h:outputText value="#{item.propiedad}" />
</h:column>
. . .
. . .
</h:dataTable>
DEMO
https://goo.gl/v53pSS
Eric Gustavo Coronel Castillo
gcoronelc.blogspot.com
gcoronelc@gmail.com
JAVA SERVER FACES
Gracias

More Related Content

What's hot

PHPVigo #16 - Lightning filter input
PHPVigo #16 - Lightning filter inputPHPVigo #16 - Lightning filter input
PHPVigo #16 - Lightning filter inputRolando Caldas
 
Formulario Para Agregar Cliente
Formulario Para Agregar ClienteFormulario Para Agregar Cliente
Formulario Para Agregar Clientejameszx
 
05 sentencias basicas
05 sentencias basicas05 sentencias basicas
05 sentencias basicasCarlos
 
Lógica difusa utilizando matlab para un control de voltajes de un motor
Lógica difusa utilizando matlab para un control de voltajes de un motorLógica difusa utilizando matlab para un control de voltajes de un motor
Lógica difusa utilizando matlab para un control de voltajes de un motorcamaleon81
 
Serie Fibonacci en C
Serie Fibonacci en CSerie Fibonacci en C
Serie Fibonacci en CAbraham
 
Trabajo de ejercicios de lenguaje c
Trabajo de ejercicios de lenguaje cTrabajo de ejercicios de lenguaje c
Trabajo de ejercicios de lenguaje coswnes92
 

What's hot (16)

PHPVigo #16 - Lightning filter input
PHPVigo #16 - Lightning filter inputPHPVigo #16 - Lightning filter input
PHPVigo #16 - Lightning filter input
 
Formulario Para Agregar Cliente
Formulario Para Agregar ClienteFormulario Para Agregar Cliente
Formulario Para Agregar Cliente
 
05 sentencias basicas
05 sentencias basicas05 sentencias basicas
05 sentencias basicas
 
Lógica difusa utilizando matlab para un control de voltajes de un motor
Lógica difusa utilizando matlab para un control de voltajes de un motorLógica difusa utilizando matlab para un control de voltajes de un motor
Lógica difusa utilizando matlab para un control de voltajes de un motor
 
06 guiados combos_modelos Java
06 guiados combos_modelos Java06 guiados combos_modelos Java
06 guiados combos_modelos Java
 
Depuradores
DepuradoresDepuradores
Depuradores
 
Barra de menús
Barra de menúsBarra de menús
Barra de menús
 
Serie Fibonacci en C
Serie Fibonacci en CSerie Fibonacci en C
Serie Fibonacci en C
 
Laboratorio1 entrada-salida de datos / Lenguance C
Laboratorio1   entrada-salida de datos / Lenguance CLaboratorio1   entrada-salida de datos / Lenguance C
Laboratorio1 entrada-salida de datos / Lenguance C
 
Exposicion progra4
Exposicion progra4Exposicion progra4
Exposicion progra4
 
Hp
HpHp
Hp
 
Clase 07
Clase 07Clase 07
Clase 07
 
Trabajo de ejercicios de lenguaje c
Trabajo de ejercicios de lenguaje cTrabajo de ejercicios de lenguaje c
Trabajo de ejercicios de lenguaje c
 
Divisores de un número (código Dev C++)
Divisores de un número (código Dev C++)Divisores de un número (código Dev C++)
Divisores de un número (código Dev C++)
 
Introducción a TDD y PHPUnit
Introducción a TDD y PHPUnitIntroducción a TDD y PHPUnit
Introducción a TDD y PHPUnit
 
Ejercicios de consola en c++
Ejercicios de consola en c++Ejercicios de consola en c++
Ejercicios de consola en c++
 

Viewers also liked (7)

JAVA SERVER FACES - LECCION 01 - PRIMEROS PASOS
JAVA SERVER FACES - LECCION 01 - PRIMEROS PASOSJAVA SERVER FACES - LECCION 01 - PRIMEROS PASOS
JAVA SERVER FACES - LECCION 01 - PRIMEROS PASOS
 
Java Fundamentos - Programación Orientada a Servicios
Java Fundamentos - Programación Orientada a ServiciosJava Fundamentos - Programación Orientada a Servicios
Java Fundamentos - Programación Orientada a Servicios
 
Java Web Lección 02 - JSP
Java Web Lección 02 - JSPJava Web Lección 02 - JSP
Java Web Lección 02 - JSP
 
Java web 01 - servlets
Java web 01 - servletsJava web 01 - servlets
Java web 01 - servlets
 
JAVA SERVER FACES - LECCION 02 - NAVEGACION Y LENGUAJES DE EXPRESIONES
JAVA SERVER FACES - LECCION 02 - NAVEGACION Y LENGUAJES DE EXPRESIONESJAVA SERVER FACES - LECCION 02 - NAVEGACION Y LENGUAJES DE EXPRESIONES
JAVA SERVER FACES - LECCION 02 - NAVEGACION Y LENGUAJES DE EXPRESIONES
 
Java Web Lección 03 - MVC
Java Web Lección 03 - MVCJava Web Lección 03 - MVC
Java Web Lección 03 - MVC
 
Manual de Open Shift
Manual de Open ShiftManual de Open Shift
Manual de Open Shift
 

Similar to JAVA SERVER FACES - LECCION 03 - COMPONENTES HTML

Similar to JAVA SERVER FACES - LECCION 03 - COMPONENTES HTML (20)

Novedades en XAML
Novedades en XAMLNovedades en XAML
Novedades en XAML
 
Etiquetas básicas jsf
Etiquetas básicas jsfEtiquetas básicas jsf
Etiquetas básicas jsf
 
Php excel
Php excelPhp excel
Php excel
 
U.4Cuestionario
U.4CuestionarioU.4Cuestionario
U.4Cuestionario
 
Generador codigo
Generador codigoGenerador codigo
Generador codigo
 
Introduccion Lab View Seis Horas
Introduccion Lab View   Seis HorasIntroduccion Lab View   Seis Horas
Introduccion Lab View Seis Horas
 
Introduccion lab view seis horas
Introduccion lab view   seis horasIntroduccion lab view   seis horas
Introduccion lab view seis horas
 
ETIQUETAS FORMULARIOS HTML.pptx
ETIQUETAS FORMULARIOS HTML.pptxETIQUETAS FORMULARIOS HTML.pptx
ETIQUETAS FORMULARIOS HTML.pptx
 
ETIQUETAS FORMULARIOS HTML.pptx
ETIQUETAS FORMULARIOS HTML.pptxETIQUETAS FORMULARIOS HTML.pptx
ETIQUETAS FORMULARIOS HTML.pptx
 
Frames-Formularios
Frames-FormulariosFrames-Formularios
Frames-Formularios
 
Labo 2
Labo 2Labo 2
Labo 2
 
Visual basic
Visual basicVisual basic
Visual basic
 
SECATT
SECATTSECATT
SECATT
 
2.1. arena-y-binding
2.1. arena-y-binding2.1. arena-y-binding
2.1. arena-y-binding
 
Práctica Completa en Flash – ActionScript
Práctica Completa en Flash – ActionScriptPráctica Completa en Flash – ActionScript
Práctica Completa en Flash – ActionScript
 
Como crear un menú ribbons
Como crear un menú ribbonsComo crear un menú ribbons
Como crear un menú ribbons
 
Manual de Desarrollo Formularios Web de Maestros y Operaciones en eFactory S...
Manual de Desarrollo Formularios Web de Maestros  y Operaciones en eFactory S...Manual de Desarrollo Formularios Web de Maestros  y Operaciones en eFactory S...
Manual de Desarrollo Formularios Web de Maestros y Operaciones en eFactory S...
 
Guía Practica de JavaScript
Guía Practica de JavaScriptGuía Practica de JavaScript
Guía Practica de JavaScript
 
CSA - Web Parts en SharePoint 2010
CSA - Web Parts en SharePoint 2010CSA - Web Parts en SharePoint 2010
CSA - Web Parts en SharePoint 2010
 
Minimanual de r
Minimanual de rMinimanual de r
Minimanual de r
 

More from Eric Gustavo Coronel Castillo

EL MODELO DIRECTO DE DELL: TODO LO QUE HAY SOBRE LA INFORMACION
EL MODELO DIRECTO DE DELL: TODO LO QUE HAY SOBRE LA INFORMACIONEL MODELO DIRECTO DE DELL: TODO LO QUE HAY SOBRE LA INFORMACION
EL MODELO DIRECTO DE DELL: TODO LO QUE HAY SOBRE LA INFORMACIONEric Gustavo Coronel Castillo
 

More from Eric Gustavo Coronel Castillo (20)

Java Web JSTL
Java Web JSTLJava Web JSTL
Java Web JSTL
 
Model View Controller - MVC
Model View Controller - MVCModel View Controller - MVC
Model View Controller - MVC
 
JavaServer Page
JavaServer PageJavaServer Page
JavaServer Page
 
Java Web: Servlets
Java Web: ServletsJava Web: Servlets
Java Web: Servlets
 
Java Web - Presentación
Java Web - PresentaciónJava Web - Presentación
Java Web - Presentación
 
JAVA ORIENTADO A OBJETOS - EXCEPCIONES
JAVA ORIENTADO A OBJETOS - EXCEPCIONESJAVA ORIENTADO A OBJETOS - EXCEPCIONES
JAVA ORIENTADO A OBJETOS - EXCEPCIONES
 
JAVA ORIENTADO A OBJETOS - COLECCIONES
JAVA ORIENTADO A OBJETOS - COLECCIONESJAVA ORIENTADO A OBJETOS - COLECCIONES
JAVA ORIENTADO A OBJETOS - COLECCIONES
 
JAVA ORIENTADO A OBJETOS - ARREGLOS
JAVA ORIENTADO A OBJETOS - ARREGLOSJAVA ORIENTADO A OBJETOS - ARREGLOS
JAVA ORIENTADO A OBJETOS - ARREGLOS
 
JAVA ORIENTADO A OBJETOS - INTERFACES
JAVA ORIENTADO A OBJETOS - INTERFACESJAVA ORIENTADO A OBJETOS - INTERFACES
JAVA ORIENTADO A OBJETOS - INTERFACES
 
JAVA ORIENTADO A OBJETOS - HERENCIA
JAVA ORIENTADO A OBJETOS - HERENCIAJAVA ORIENTADO A OBJETOS - HERENCIA
JAVA ORIENTADO A OBJETOS - HERENCIA
 
JAVA ORIENTADO A OBJETOS - ALCANCE DE CLASE
JAVA ORIENTADO A OBJETOS - ALCANCE DE CLASEJAVA ORIENTADO A OBJETOS - ALCANCE DE CLASE
JAVA ORIENTADO A OBJETOS - ALCANCE DE CLASE
 
JAVA ORIENTADO A OBJETOS - SOBRECARGA
JAVA ORIENTADO A OBJETOS - SOBRECARGAJAVA ORIENTADO A OBJETOS - SOBRECARGA
JAVA ORIENTADO A OBJETOS - SOBRECARGA
 
JAVA ORIENTADO A OBJETOS - MIEMBROS DE CLASE
JAVA ORIENTADO A OBJETOS - MIEMBROS DE CLASEJAVA ORIENTADO A OBJETOS - MIEMBROS DE CLASE
JAVA ORIENTADO A OBJETOS - MIEMBROS DE CLASE
 
JAVA ORIENTADO A OBJETOS - CLASES Y OBJETOS
JAVA ORIENTADO A OBJETOS - CLASES Y OBJETOSJAVA ORIENTADO A OBJETOS - CLASES Y OBJETOS
JAVA ORIENTADO A OBJETOS - CLASES Y OBJETOS
 
Cursos Virtuales con Gustavo Coronel en UDEMY
Cursos Virtuales con Gustavo Coronel en UDEMYCursos Virtuales con Gustavo Coronel en UDEMY
Cursos Virtuales con Gustavo Coronel en UDEMY
 
JAVA ORIENTADO A OBJETOS - INTRODUCCIÓN
JAVA ORIENTADO A OBJETOS - INTRODUCCIÓNJAVA ORIENTADO A OBJETOS - INTRODUCCIÓN
JAVA ORIENTADO A OBJETOS - INTRODUCCIÓN
 
Buenas practicas para el Desarrollo de Software
Buenas practicas para el Desarrollo de SoftwareBuenas practicas para el Desarrollo de Software
Buenas practicas para el Desarrollo de Software
 
JAVA OO - TEMA 08 - COLECCIONES
JAVA OO - TEMA 08 - COLECCIONESJAVA OO - TEMA 08 - COLECCIONES
JAVA OO - TEMA 08 - COLECCIONES
 
EL MODELO DIRECTO DE DELL: TODO LO QUE HAY SOBRE LA INFORMACION
EL MODELO DIRECTO DE DELL: TODO LO QUE HAY SOBRE LA INFORMACIONEL MODELO DIRECTO DE DELL: TODO LO QUE HAY SOBRE LA INFORMACION
EL MODELO DIRECTO DE DELL: TODO LO QUE HAY SOBRE LA INFORMACION
 
ORACLE SQL
ORACLE SQLORACLE SQL
ORACLE SQL
 

Recently uploaded

BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...ITeC Instituto Tecnología Construcción
 
Segmentacion Segmantica_Modelos UNET and DEEPLABV3
Segmentacion Segmantica_Modelos UNET and DEEPLABV3Segmentacion Segmantica_Modelos UNET and DEEPLABV3
Segmentacion Segmantica_Modelos UNET and DEEPLABV3AlexysCaytanoMelndez1
 
Caso de éxito de Hervian con el ERP Sage 200
Caso de éxito de Hervian con el ERP Sage 200Caso de éxito de Hervian con el ERP Sage 200
Caso de éxito de Hervian con el ERP Sage 200Opentix
 
Introducción a Funciones LENGUAJE DART FLUTTER
Introducción a Funciones LENGUAJE DART FLUTTERIntroducción a Funciones LENGUAJE DART FLUTTER
Introducción a Funciones LENGUAJE DART FLUTTEREMMAFLORESCARMONA
 
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLOPARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLOSelenaCoronadoHuaman
 
Unidad_3_T1_AutomatasFinitos presentacion
Unidad_3_T1_AutomatasFinitos presentacionUnidad_3_T1_AutomatasFinitos presentacion
Unidad_3_T1_AutomatasFinitos presentacionarmando_cardenas
 
Manual de Usuario APPs_AppInventor-2023.pdf
Manual de Usuario APPs_AppInventor-2023.pdfManual de Usuario APPs_AppInventor-2023.pdf
Manual de Usuario APPs_AppInventor-2023.pdfmasogeis
 

Recently uploaded (7)

BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
 
Segmentacion Segmantica_Modelos UNET and DEEPLABV3
Segmentacion Segmantica_Modelos UNET and DEEPLABV3Segmentacion Segmantica_Modelos UNET and DEEPLABV3
Segmentacion Segmantica_Modelos UNET and DEEPLABV3
 
Caso de éxito de Hervian con el ERP Sage 200
Caso de éxito de Hervian con el ERP Sage 200Caso de éxito de Hervian con el ERP Sage 200
Caso de éxito de Hervian con el ERP Sage 200
 
Introducción a Funciones LENGUAJE DART FLUTTER
Introducción a Funciones LENGUAJE DART FLUTTERIntroducción a Funciones LENGUAJE DART FLUTTER
Introducción a Funciones LENGUAJE DART FLUTTER
 
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLOPARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
 
Unidad_3_T1_AutomatasFinitos presentacion
Unidad_3_T1_AutomatasFinitos presentacionUnidad_3_T1_AutomatasFinitos presentacion
Unidad_3_T1_AutomatasFinitos presentacion
 
Manual de Usuario APPs_AppInventor-2023.pdf
Manual de Usuario APPs_AppInventor-2023.pdfManual de Usuario APPs_AppInventor-2023.pdf
Manual de Usuario APPs_AppInventor-2023.pdf
 

JAVA SERVER FACES - LECCION 03 - COMPONENTES HTML

  • 1. Eric Gustavo Coronel Castillo gcoronelc.blogspot.com gcoronelc@gmail.com JAVA SERVER FACES COMPONENTES HTML
  • 2. Temas  Listado de componentes  Menú de selección  Paneles  Tablas  Demo
  • 3. LISTADO DE COMPONENTES  Librería xmlns:h=http://java.sun.com/jsf/html  Componentes <h:column> <h:commandButton> <h:commandLink> <h:dataTable> <h:form> <h:graphicImage> <h:inputHidden> <h:inputSecret> <h:inputText> <h:inputTextarea> <h:message> <h:messages> <h:outputFormat> <h:outputLabel> <h:outputLink> <h:outputText> <h:panelGrid> <h:panelGroup> <h:selectBooleanCheckbox> <h:selectManyCheckbox> <h:selectManyListbox> <h:selectManyMenu> <h:selectOneListbox> <h:selectOneMenu> <h:selectOneRadio>
  • 4. MENU DE SELECCIÓN Caso 01 <h:outputLabel value="Producto:"/> <h:selectOneMenu value="#{venta.codigo}"> <f:selectItem itemValue="A000" itemLabel="Seleccione un producto" /> <f:selectItem itemValue="A001" itemLabel="Computadora" /> <f:selectItem itemValue="A002" itemLabel="Impresora" /> <f:selectItem itemValue="A003" itemLabel="Laptop" /> <f:selectItem itemValue="A004" itemLabel="Disco duro" /> </h:selectOneMenu>
  • 5. MENU DE SELECCIÓN Caso 02 <h:outputLabel value="Producto:"/> <h:selectOneMenu value="#{venta.codigo}"> <f:selectItem itemValue="A000" itemLabel="Seleccione un producto" /> <f:selectItems value="#{venta.productos}" /> </h:selectOneMenu> En este caso venta.productos representa una colección de objetos SelectItem.
  • 6. MENU DE SELECCIÓN Caso 03 <h:outputLabel value="Producto:"/> <h:selectOneMenu value="#{venta.codigo}"> <f:selectItem itemValue="A000" itemLabel="Seleccione un producto" /> <f:selectItems value="#{venta.productos}" var="r" itemValue="#{r.codigo}" itemLabel="#{r.codigo} - #{r.nombre}" /> </h:selectOneMenu> En este caso venta.productos representa una colección de objetos ProductoBean.
  • 7. PANELES <h:panelGrid columns="2" border="1"> <f:facet name="header"> <h:outputText value="Tabla con números"/> </f:facet> . . . . . . . . . <f:facet name="footer"> <h:outputText value="Pie de tabla" /> </f:facet> </h:panelGrid>
  • 8. TABLAS <h:dataTable value="${Coleccion}" var="item"> <h:column> <f:facet name="header"> <h:outputText value=“Titulo" /> </f:facet> <h:outputText value="#{item.propiedad}" /> </h:column> . . . . . . </h:dataTable>
  • 11. Eric Gustavo Coronel Castillo gcoronelc.blogspot.com gcoronelc@gmail.com JAVA SERVER FACES Gracias