JavaServer Faces - jtech.ua.es

Especialista Universitario Java Enterprise

JavaServer Faces © 2008-2009 Depto. Ciencia de la Computación e IA Componentes JSF

JavaServer Faces

•Sesión 3: Componentes JSF


JavaServer Faces © 2008-2009 Depto. Ciencia de la Computación e IA Introducción a JSF

• Un ejemplo• Expresiones EL• Árbol de componentes• Ligando componentes a backing beans• Eventos• Ficheros de recursos• Componentes estándar JSF

Índice

2



Un ejemplo: todo

3



Listado de tareas todo

4

...<h:dataTable value="#{todoController.todos}" var="todo" styleClass="todo" headerClass="todoheader" columnClasses="first, rest"> <h:column> <f:facet name="header"> <h:column> <h:outputText value="#{msg.project}"/> </h:column> </f:facet> <h:outputText value="#{todo.project}"/> </h:column> <h:column> <f:facet name="header"> <h:column> <h:outputText value="#{msg.title}"/> </h:column> </f:facet> <h:outputText value="#{todo.title}"/> </h:column>...

Fichero todo.jsp



Backing beans

5

public class Todo { private String id; private String title; private String description; private String project; ... // constructor, getters y setters}

Fichero Todo.javapublic class TodoController { private List<Todo> todos; private List<String> projects; ... // getters, setters y // métodos de interfaz ... public TodoController() { todos = new ArrayList<Todo>(); todos.add( new Todo("Aprender JSF", "Terminar los ejercicios", "JSF")); todos.add( new Todo("Escribir en el blog", "Escribir sobre JSF", "Blog")); projects = new ArrayList<String>(); projects.add("Apuntes de JSF"); projects.add("LPP"); } ...}

Fichero TodoController.java



Añadir nuevas tareas

6



Demo

7



Expresiones EL• Se utilizan para dar valor a atributos de los

componentes JSF• Sintaxis: #{...}• Ampliación de las expresiones EL de JSP• Se evalúan en la fase de Apply Request Values,

cuando JSF llama al método decode del componente.• Expresiones con semántica getValue y con

semántica setValue

8

• Las expresiones EL se pueden utilizar en múltiples atributos de los componentes JSF, no sólo en el atributo value.



Ejemplos y usos de expresiones EL

9

#{foo.bar}#{foo[bar]}#{foo["bar"]}#{foo[3]}#{foo[3].bar}#{foo.bar[3]}#{customer.status == 'VIP'}#{(page1.city.farenheitTemp - 32) * 5 / 9}

<h:outputText value="El total del pedido es: #{pedido.importe}" style="#{pedido.cssStyle}"



Objetos implícitos JSF• requestScope, sessionScope, applicationScope: permite acceder a las

variables definidas sdfasdfasdf asdfasfasdf en el ámbito de la petición, de la sesión y de la aplicación.

• param: para acceder a los valores de los parámetros de la petición.

• paramValues: para acceder a los arrays de valores de los parámetros de la petición.

• header: para acceder a los valores de las cabeceras de la petición.

• headerValues: para acceder a los arrays de valores de los parámetros de la petición.

• cookie: para acceder a los valores almacenados en las cookies en forma de objetos javax.servlet.http.Cookie

• initParam: para acceder a los valores de inicialización de la aplicación.

• facesContext: para acceder al objeto javax.faces.context.FacesContext asociado a la aplicación actual.

• view: para acceder al objeto javax.faces.component.UIViewRoot asociado a la vista actual.

#{view.children[0].children[0].valid}

10



Funcionamiento básico de JSF

11



Componentes JSF

12



Usando componentes en los backing beans• Es posible ligar en la página JSF un componente

JSF a una propiedad del backing bean • El backing bean debe tener un campo con un tipo

compatible con el componente

13

<h:panelGroup> <h:inputText binding="#{todoController.inputText}" size="30"/> <h:commandLink value="Añadir projecto" actionListener="#{todoController.addNewProject}" immediate="true"/></h:panelGroup>...<h:selectOneMenu id="project" required="true" value="#{todo.project}"> <f:selectItems value="#{todoController.projects}" /></h:selectOneMenu>



TodoController

14

public class TodoController { ... private UIInput inputText; ... public UIInput getInputText() { return inputText; }

public void setInputText(UIInput inputText) { this.inputText = inputText; } public void addNewProject(ActionEvent event) { String newProject = (String)inputText.getSubmittedValue(); inputText.setSubmittedValue(null); projects.add(newProject); } ...}



Elementos JSF y componentes

15



Eventos• En JSF se pueden gestionar dos tipos de eventos: de acción y de

cambio de valor.• El programador JSF puede incluir manejadores de estos eventos:

código Java que se ejecute cuando se detectan. Para ello liga (bind) un método de un backing bean al atributo actionListener o valueChangedListener.

16

<h:panelGroup> <h:inputText binding="#{todoController.inputText}" size="30"/> <h:commandLink value="Añadir projecto" actionListener="#{todoController.addNewProject}" immediate="true"/></h:panelGroup>...<h:selectOneMenu id="project" required="true" value="#{todo.project}"> <f:selectItems value="#{todoController.projects}" /></h:selectOneMenu>



Backing Bean con el manejador del evento

17

public class TodoController { private List<Todo> todos; private List<String> projects; private Todo todo; private Todo todoDelete; // JavaServerFaces related variables private UIForm form; private UIForm tableForm; private UICommand addCommand; private UIInput inputText;

//...

public void addNewProject(ActionEvent event) { String newProject = (String)inputText.getSubmittedValue(); inputText.setSubmittedValue(null); projects.add(newProject); }

//...}



¿Cuándo se ejecuta el manejador?

18

• Eventos de cambio de valor: se lanzan al final de la fase Procesar validaciones.

• Eventos de acción: se lanzan todos en la fase Invocar aplicación, a no ser que el atributo inmediate del componente esté a true. En este caso, el evento asociado al componente se lanza después de la fase Aplicar valores petición y después se saltan todas las demás fases y se pasa directamente a la fase de Render de la respuesta.



Fichero de recursos• Es posible definir un fichero de recursos en el que definir

propiedades que usemos en nuestros ficheros JSF.• Fichero:

• Para incluirlo en un JSP:

19

<f:loadBundle basename="mensajes" var="msg" />...<h:commandLink binding="#{todoController.addCommand}" action="#{todoController.addNew}" value="#{msg.add}"></h:commandLink>

title=Tareadesc=Descripciónproject=Proyectoaccion=Acciónadd=Añadir nueva tarea

Fichero mensajes.properties



Internacionalización• Deberíamos definir un fichero de mensajes para

cada uno de los locales que soportemos: mensajes_es.properties, mensajes_en.properties• En el fichero faces_config.xml se definen los

locales soportados por la aplicación:

20

<application> <locale-config> <default-locale>es</default-locale> <supported-locale>en</supported-locale> </locale-config> <message-bundle> mensajes </message-bundle></application>



Componentes JSF

• 2 tipos de componentes: etiquetas core (<f:>) y etiquetas HTML (<h:>)• JavaDoc de las etiquetas: http://java.sun.com/

javaee/javaserverfaces/1.2/docs/tlddocs/• 20 etiquetas <f:> y 25 etiquetas <h:>

• Consultar el Geary & Hortsman

21



Apuntes

22



¿Preguntas?

23

Documents

JavaServer Faces - jtech.ua.es