Linguagem de Programação Orientada

a Objetos para Web
Profa.: Alessandra Gomes
E-mail: alegomesbr@gmail.com

IFB – Técnico em Informática – 3° Módulo [2° semestre - 2014]

Agenda [Aula 11]
PrimeFaces

Introdução

Definição

Características

A Biblioteca de Componentes

Como Usar?

Exemplos

.Introdução Levar para a Web a ideia de componentes sofisticados existentes no desenvolvimento Desktop.

Definição de PrimeFaces PrimeFaces Framework desenvolvido pela Prime Teknoloji (Turquia) que oferece um conjunto de componentes ricos para o JSF. .

Características ● Possui um rico conjunto de componentes de interface ● Nenhuma configuração extra é necessária ● ● Componentes construídos com Ajax no padrão JSF 2. .0 Rica documentação com exemplos de código.

A Biblioteca de Componentes PrimeFaces Site: http://primefaces.org/ .

Exemplo de Utilização JSF JSF + PrimeFaces .

org/ .Como Usar? PrimeFaces Site: http://primefaces.

Como Usar? PrimeFaces .

Como Usar? PrimeFaces ● Criar um novo projeto no NetBeans ● Adicionar a biblioteca do PrimeFaces .

.) <h:form> <p:outputLabel value="Nome: " /> <p:inputText value="#{usuario.nome}" /> <p:commandButton value="Enviar" action="resultado"/> </h:form> (.Como Usar? //index.org/ui"> (.jcp.w3.xhtml <html xmlns="http://www...org/1999/xhtml" xmlns:h="http://xmlns..org/jsf/html" xmlns:p="http://primefaces.) </html> .

Exemplo de Componentes – PrimeFaces .

Exemplo de Componentes – PrimeFaces .

Implementando Componentes – PrimeFaces ● InputMask ● Slider ● Switch ● Rating ● Calendar .

Implementando Componentes – PrimeFaces InputMask .

hora}" mask="99:99:99" /> .Implementando Componentes – PrimeFaces InputMask <p:outputLabel value="Data: " /> <p:inputMask value="#{usuario.fone}" mask="(99)9999-9999"/> <p:outputLabel value="Hora: " /> <p:inputMask value="#{usuario.dataMascara}" mask="99/99/9999"/> <p:outputLabel value="Fone: " /> <p:inputMask value="#{usuario.

Implementando Componentes – PrimeFaces Slider .

numero2}" size="5"/> <p:slider type="vertical" /> .Implementando Componentes – PrimeFaces Slider <p:outputLabel value="Selecione um valor: " /> <p:inputText value="#{usuario.numero1}" size="5"/> <p:slider style="width: 200px" /> <p:outputLabel value="Selecione um valor: " /> <p:inputText value="#{usuario.

Implementando Componentes – PrimeFaces Switch <p:outputLabel value="Concorda com os termos de uso?" /> <p:inputSwitch value="#{usuario.valor}" onLabel="não" offLabel="sim" /> .

classificacao}" /> .Implementando Componentes – PrimeFaces Rating <p:outputLabel value="Classificação do filme:" /> <p:rating value="#{usuario.

Implementando Componentes – PrimeFaces Calendar .

data3}" showOn="button" /> .data1}" readonlyInput="true"/> <p:outputLabel value="Data 2:" /> <p:calendar value="#{usuario.Implementando Componentes – PrimeFaces Calendar <p:outputLabel value="Data 1:" /> <p:calendar value="#{usuario.data1}" mode="inline" /> <p:outputLabel value="Data 3:" /> <p:calendar value="#{usuario.

Dúvidas? .