São Paulo, 01 de agosto de 2002
Propaganda
www.fiap.com.br Laboratório Passo-a-Passo JSF - Primefaces Primefaces 3 Prof. Leandro Rubim de Freitas [email protected] Versão 1.0 Professor: Leandro Rubim de Freitas Página - 1 - www.fiap.com.br Recursos necessários: Sistema Operacional Windows; Eclipse IDE versão 3.5 ou superior; JDK versão 1.6 ou superior; JARS de uma implementação do JSF 2 JARS do Primefaces 3 Professor: Leandro Rubim de Freitas Página - 2 - www.fiap.com.br Passo 1 – Realizar o download do Mojarra Project (JSF 2) e o PrimeFaces 3 Download dos JARs do Mojarra Project a partir do link http://javaserverfaces.java.net/download.html Download dos JARs do Primefaces 3 a partir do link http://primefaces.org/downloads.html Passo 2 – Criar um projeto JavaWeb no Eclipse (Dynamic Web Project) File New Dynamic Web Project (ou File New Web Dynamic Web Project) Dê um nome ao projeto, e o configure para trabalhar com o Apache Tomcat 7 e configurações de JavaServer Faces v2.0 Project. Professor: Leandro Rubim de Freitas Página - 3 - www.fiap.com.br Clique em “Next” até chegar na tela abaixo. Realize a configuração para “Disable Library Configuration” e altere o item “URL Mapping Patterns” para “ *.xhtml ”. Clique em “Finish”. Passo 3 – Configurar o projeto para JSF e Primefaces No passo 1 foi realizado o download dos componentes JSF e Primefaces. Vamos adicioná-los ao projeto. Copie fisicamente os três arquivos do download para a pasta “WebContent\WEB-INF\lib” do projeto. Em seguida, selecione estes arquivos, e com o botão direito selecione “Build Path Add to Build Path”. Professor: Leandro Rubim de Freitas Página - 4 - www.fiap.com.br Passo 4 – Desenvolver um projeto exemplo – DataTable Sorting Crie uma nova classe no seu projeto (Java Resources src botão direito New class) e complete com os nome do pacote e da classe (circundados de vermelho), e clique em “Finish”. Complete a classe conforme segue: package com.table; import import import import import java.io.Serializable; java.util.ArrayList; java.util.List; javax.faces.bean.ManagedBean; javax.faces.bean.RequestScoped; @ManagedBean(name="tableBean") @RequestScoped public class TableBean implements Serializable { private List<Car> carsSmall = new ArrayList<Car>(); public TableBean() { carsSmall.add(new carsSmall.add(new carsSmall.add(new carsSmall.add(new } Car("250cv", Car("300cv", Car("350cv", Car("400cv", 1980, 1970, 2008, 2012, "Mercedes", "Black")); "BMW", "White")); "Audi", "Yellow")); "Ferrari", "Red")); public List<Car> getCarsSmall() { return carsSmall; } } Professor: Leandro Rubim de Freitas Página - 5 - www.fiap.com.br Seguindo o mesmo procedimento, crie uma classe chamada Carro, conforme segue: package com.table; public class Car { private private private private String model; int year; String manufacturer; String color; public Car(String model, int year, String manufacturer, String color) { this.model = model; this.year = year; this.manufacturer = manufacturer; this.color = color; } // Getters and Setters } Crie uma nova página xhtml no seu projeto (WebContent botão direito New HTML file) e complete conforme a sequência das telas (circundados de vermelho), e clique em “Finish”. Professor: Leandro Rubim de Freitas Página - 6 - www.fiap.com.br Substitua o conteúdo do xhtml conforme segue: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"> <h:head> <h:link rel="#{request.contextPath}/resources/css/style.css" /> </h:head> <h:form> <p:dataTable var="car" value="#{tableBean.carsSmall}"> <f:facet name="header"> Ajax Sorting </f:facet> <p:column sortBy="#{car.manufacturer}"> <f:facet name="header"> <h:outputText value="Manufacturer" /> </f:facet> <h:outputText value="#{car.manufacturer}" /> </p:column> <p:column sortBy="#{car.color}"> <f:facet name="header"> <h:outputText value="Color" /> </f:facet> <h:outputText value="#{car.color}" /> </p:column> <p:column sortBy="#{car.model}"> <f:facet name="header"> <h:outputText value="Model" /> </f:facet> <h:outputText value="#{car.model}" /> </p:column> <p:column sortBy="#{car.year}"> <f:facet name="header"> <h:outputText value="Year" /> </f:facet> <h:outputText value="#{car.year}" /> </p:column> </p:dataTable> </h:form> </html> Professor: Leandro Rubim de Freitas Página - 7 - www.fiap.com.br Passo 5 – Realizar o teste Clique com o botão direito no arquivo “index.xhtml” “Run As” “Run on Server” “Finish” Resultado: Ordenando por “Manufacturer”: Professor: Leandro Rubim de Freitas Página - 8 -
