Primefaces 3. Laboratório Passo-a-Passo. JSF - Primefaces. Prof. Leandro Rubim de Freitas Versão 1.

Tamanho: px

Começar a partir da página:

Download "Primefaces 3. Laboratório Passo-a-Passo. JSF - Primefaces. Prof. Leandro Rubim de Freitas Versão 1."

Otávio Salazar Pinto
6 Há anos
Visualizações:

1 Laboratório Passo-a-Passo JSF - Primefaces Primefaces 3 Prof. Leandro Rubim de Freitas leandro.fiap@gmail.com Versão 1.0 Professor: Leandro Rubim de Freitas Página - 1 -

2 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 -

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ê

3 Passo 1 Realizar o download do Mojarra Project (JSF 2) e o PrimeFaces 3 Download dos JARs do Mojarra Project a partir do link Download dos JARs do Primefaces 3 a partir do link 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 -

$Vamos adicioná-los ao projeto. Copie fisicamente os três arquivos do download para a pasta WebContent\WEB-INF\lib do projeto.$

4 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 -

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

5 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 java.io.serializable; import java.util.arraylist; import java.util.list; import javax.faces.bean.managedbean; public class TableBean implements Serializable { private List<Car> carssmall = new ArrayList<Car>(); public TableBean() { carssmall.add(new Car("250cv", 1980, "Mercedes", "Black")); carssmall.add(new Car("300cv", 1970, "BMW", "White")); carssmall.add(new Car("350cv", 2008, "Audi", "Yellow")); carssmall.add(new Car("400cv", 2012, "Ferrari", "Red")); public List<Car> getcarssmall() { return carssmall; Professor: Leandro Rubim de Freitas Página - 5 -

String manufacturer, String color) { this.model = model; this.year = year; this.manufacturer = manufacturer; this.

6 Seguindo o mesmo procedimento, crie uma classe chamada Carro, conforme segue: package com.table; public class Car { private String model; private int year; private String manufacturer; private 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 -

7 Substitua o conteúdo do xhtml conforme segue: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xmlns:ui=" xmlns:h=" xmlns:f=" xmlns:p=" <h:head> <h:link rel="#{request.contextpath/resources/css/style.css" /> </h:head> <h:form> <p:datatable var="car" value="#{tablebean.carssmall"> Ajax Sorting <p:column sortby="#{car.manufacturer"> <h:outputtext value="manufacturer" /> <h:outputtext value="#{car.manufacturer" /> </p:column> <p:column sortby="#{car.color"> <h:outputtext value="color" /> <h:outputtext value="#{car.color" /> </p:column> <p:column sortby="#{car.model"> <h:outputtext value="model" /> <h:outputtext value="#{car.model" /> </p:column> <p:column sortby="#{car.year"> <h:outputtext value="year" /> <h:outputtext value="#{car.year" /> </p:column> </p:datatable> </h:form> </html> Professor: Leandro Rubim de Freitas Página - 7 -

8 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 -

Documentos relacionados

POO Programação Orientada a Objetos

POO Programação Orientada a Objetos Mãos à Obra Jefferson S. Silva IFET - PI Copyright Jefferson S. Silva Slide 1 O sistema Nossa empresa foi contratada por uma pequena gravadora de música que deseja entrar