1. Miguel Camargo
Laura Mesa

2. Componentes de interfaz de
usuario
• La tecnología JavaServer Faces proporciona una
arquitectura de componentes rica y flexible.
• Un componente puede ser simple (botón, tabla,
etc) o puede tener varios componentes.
• La tecnología JavaServer Faces proporciona un
conjunto de clases de componentes UI

3. Componentes de interfaz de
usuario
• Todas las clases de componentes UI de
JavaServer Faces descienden de la clase
UIComponentBase, que define el estado y el
comportamiento por defecto de un UIComponent.
• El conjunto de clases de componentes UI incluido
en la última versión de JavaServerFaces:

4. Conjunto de clases UI
• UICommand
• UIForm
• UIGraphic
• UIInput
• UIOutput
• UIPanel
• UISelectItem
• UISelectItems
• UISelectBoolean
• UISelectMany
• UISelectOne

5. Componentes de interfaz de
usuario
• La mayoría de los autores de páginas y de los
desarrolladores de aplicaciones no utilizaran estas
clases directamente sino que incluirán los
componentes en una página usando la etiqueta
correspondiente al componente. La mayoría de
estos componentes se pueden renderizar de
formas diferentes.

6. Componentes de interfaz de
usuario
• La implementación de referencia de JavaServer
Faces proporciona una librería de etiquetas
personalizadas para renderizar componentes en
HTML. Estas son las etiquetas básicas, con su
respectivo componente:

7. Etiquetas Básicas
y Componentes
• UIForm (form) • UICommand (Command Boton)
<h: form> … </h: form> <h:commandButton
value="Aceptar"
action="siguiente"/>
• UIGraphic (Graphic Image)
<h:graphicImage
value="/imagenes/tux.png"/> • UISelectBoolean(selectBooleanCheckbox)
<h:selectBooleanCheckbox
value="#{cuestionario.recibiremail}"/>

8. Etiquetas Básicas
y Componentes
• UIInput (input text)
<h:inputText
value="#{formulario.usuario}" /> • UIInput (inputTextArea)
<h:inputTextarea
rows="3" cols="15"
value="Enter your text here.."/>
• UIInput (inputSecret)
<h:inputSecret
value="#{formulario.password}" />

9. Etiquetas Básicas
y Componentes
• UIOutput (output link)
• UIOutput (Output text) <h:outputLink
<h:outputText value="http://www.hoylodejo.com/">
value="Hola Mundo!"/> <h:outputText value="Pinche
aqui"/>
</h:outputLink>
Hola Mundo
Pinche aqui

10. Etiquetas Básicas
y Componentes
• UISelectMany (selectManyCheckbox)
<h:selectManyCheckbox
value="#{cuestionario.colorespreferidos}">
<f:selectItem itemValue=“red" itemLabel=“Red"/>
<f:selectItem itemValue=“blue" itemLabel=“Blue"/>
<f:selectItem itemValue=“yellow" itemLabel=“Yellow"/>
<f:selectItem itemValue=“green" itemLabel=“Green"/>
<f:selectItem itemValue=“orange" itemLabel=“Orange"/>
</h:selectManyCheckbox>

11. Etiquetas Básicas
y Componentes
• UISelectMany (selectManyListbox)
<h:selectManyListbox
value="#{cuestionario.nacionalidades}">
<f:selectItem itemValue=“italian" itemLabel=“Italian"/>
<f:selectItem itemValue=“greek" itemLabel=“Greek"/>
<f:selectItem itemValue=“austrian" itemLabel=“Austrian"/>
<f:selectItem itemValue=“mexican" itemLabel=“Mexican"/>
</h:selectManyListbox>

12. Etiquetas Básicas
y Componentes
• UISelectMany (selectManyMenu)
<h:selectManyMenu value="#{cuestionario.semana}">
<f:selectItem itemValue=“sunday" itemLabel=“Sunday"/>
<f:selectItem itemValue=“monday" itemLabel=“Monday"/>
<f:selectItem itemValue=“tuesday" itemLabel=“Tuesday"/>
<f:selectItem itemValue=“wednesday" itemLabel=“Wednesday"/>
<f:selectItem itemValue=“thursday" itemLabel=“Thursday"/>
<f:selectItem itemValue=“friday" itemLabel=“Friday"/>
<f:selectItem itemValue=“saturday" itemLabel=“Saturday"/>
</h:selectManyMenu>

13. <h:graphicImage value="/imagenes/duke.gif"/>
Conjunto de clases UI
• UISelectOne (SelectOneRadio) • UISelectOne (selectOneMenu)
<h:selectOneRadio <h:selectOneMenu
value="#{cuestionario.fumador}"> value="#{cuestionario.cargo}">
<f:selectItem itemValue="si" <f:selectItem itemValue=“gerente"
itemLabel=“Yes"/> itemLabel=“Gerente"/>
<f:selectItem itemValue="no" <f:selectItem itemValue=“vendedor"
itemLabel="No"/> itemLabel=“Vendedor"/>
</h:selectOneRadio> </h:selectOneMenu>

14. <h:graphicImage value="/imagenes/duke.gif"/>
Conjunto de clases UI
• UISelectOne (selectOneListbox)
<h:selectOneListbox value="#{cuestionario.sexo}">
<f:selectItem itemValue=“female" itemLabel=“Female"/>
<f:selectItem itemValue=“male" itemLabel=“Male"/>
</h:selectOneListbox>

15. Etiquetas Básicas
y Componentes
• UIPanel (PanelGrid y PanelGroup)
<h:panelGrid columns="3" border="4">
<h:panelGroup>
<h:graphicImage url="tux.png"/>
<h:outputText value="Columna 1"/>
</h:panelGroup>
<h:outputText value="(1,1)"/>
<h:outputText value="(1,2)"/>
<h:outputText value="(1,3)"/>
<h:outputText value="(2,1)"/>
<h:outputText value="(2,2)"/>
<h:outputText value="(2,3)"/>
</h:panelGrid>