Baixe o app para aproveitar ainda mais
Prévia do material em texto
Desenvolvimento de Software para WEB JSF (JavaServer Faces) – Parte 2 Prof. Regis Pires Magalhães regispires@lia.ufc.br Agradecimentos • Agradecemos ao Prof. Fábio Dias (UFC Quixadá) por ter gentilmente cedido seus slides para adaptação e uso nesta disciplina. • Managed Beans representam classes java que são automaticamente criadas, inicializadas e armazenadas no escopo apropriado quando solicitados • Essa facilidade permite: ▫ Declarar e inicializar as propriedades de um bean em um arquivo central (faces-config) ▫ Controlar facilmente o escopo onde o bean é armazenado ▫ Modificar uma classe ou propriedade do bean sem recompilar código ▫ Inicializar um bean com Value Binding Expressions ▫ Acessar um bean utilizando simples expressões da JSF EL Introdução Managed Beans package br.ufc.dsweb.controller; @ManagedBean(name="loginController") @RequestScoped public class LoginController { private Login login = new Login(); //Metodos gets e sets } <h:inputText value="#{loginControler.login.nome}"/> annotations O bean pode ser acessado na página através de uma value- binding expression index.xhtml Managed Beans <managed-bean> <managed-bean-name>loginController</managed-bean-name> <managed-bean- class>br.ufc.dsweb.controller.LoginController</managed-bean- class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> <h:inputText value="#{loginControler.login.nome}"/> faces-config.xml O bean pode ser acessado na página através de uma value- binding expression login.jsp • A configuração de um bean pode ser feita no faces-config.xml através do elemento managed- bean: Configuração Descrição do bean Nome utilizado por ferramentas GUI Ícone utilizado por ferramentas GUI Nome lógico para acessar o bean Nome da classe que representa o bean Escopo onde o bean será armazenado • Existem 4 escopos a partir do JSF 2: ▫ @RequestScoped: os beans gerenciáveis de escopo request são instanciados e permanecem disponíveis durante uma mesma requisição HTTP. ▫ @ViewScoped: os beans gerenciáveis de escopo view permanecem disponíveis enquanto o usuário permanecer em uma mesma página de uma aplicação. ▫ @SessionScoped: os beans gerenciáveis de escopo session são salvos na sessão HTTP de um usuário. ▫ @ApplicationScoped: os beans gerenciáveis de escopo application permanecem disponíveis enquanto a aplicação estiver no ar, e podem ser acessados por todos os usuários da aplicação. Escopos do Managed-Bean • Diversos componentes de interface possuem um atributo chamado value, que permite especificar: ▫ Um valor diretamente: ▫ Uma ligação com uma propriedade de um bean(value- binding): Value-Binding Expressions <h:outputText value=“Olá Pessoal"/> <h:outputText value=“#{loginBean.nome}"/> • No segundo caso, utilizando JSF EL – JSF Expression Language. • A JSF EL foi criada para ser utilizada dentro de uma value-binding expression: • Utilizando JSF EL, o valor associado ao atributo pode ser utilizado tanto para leitura, quanto para escrita: ▫ Propriedade get → chamada ao desenhar o componente. ▫ Propriedade set → chamada quando a resposta do usuário é processada. Value-Binding Expressions • Inclusive, é possível efetuar um encadeamento acessando beans contidos dentro de outros beans • Utiliza-se o ponto como separador • No exemplo acima, um bean pessoa possui um bean como propriedade chamado endereco, que possui uma propriedade chamada cidade. Value-Binding Expressions <h:outputText value=“#{pessoa.endereco.cidade}"/> Java Server Faces Navegação • Páginas são associadas a nomes lógicos • Os nomes lógicos são utilizados para efetuar um redirecionamento para as páginas Introdução • O exemplo abaixo mostra uma navegação de uma página de origem (login.xhtml) para dois possíveis destinos (error.xhtml ou saudacao.xhtml). Introdução Nomes lógicos das páginas de destino Página de origem Possíveis páginas de destino • A navegação opera de acordo com eventos de ação disparados por fontes de ação. • Fontes de ação capturam uma ação do usuário ▫ Exemplos de fontes: botões, links • Uma fonte de ação é associada a um: ▫ Método de ação, que executa a lógica de aplicação e retorna o nome lógico da página a ser exibida. ▫ Nome lógico, que pode ser especificado diretamente na fonte de ação Navegação • Exemplo de nome lógico em método de ação: Navegação <h:commandButton type="submit" value="Enviar“ action="#{loginController.efetuarLogin}"/> public String efetuarLogin(){ if(login.equals("fabio") && senha.equals("12345")) return "sauda"; else return "falha"; } • Exemplo de nome lógico hard-coded na página. <h:commandButton type="submit" value="Enviar“ action=“sauda"/> • A navegação do JSF opera com base em um conjunto de regras de navegação (elemento navigation-rule do faces-config.xml) ▫ Regras de navegação definem que páginas podem ser alcançadas a partir de outras páginas • Cada caminho para uma página é representado por um elemento navigation-case do faces-config.xml ▫ O navigation geralmente é selecionado com base no nome lógico solicitado. Regras de Navegação Regras de Navegação Configuração Define uma regra de navegação Opcionalmente especifica a página de origem à qual a regra se aplica Define qual método de ação pode chamar esta página Nome lógico dado ao recurso Página seguinte a ser carregada • Com base nas configurações que podem ser efetuadas, os redirecionamentos podem ser de dois tipos: ▫ Redirecionamento local Busca as páginas de redirecionamento a partir de uma página específica, definida no elemento from-view-id ▫ Redirecionamento global Busca páginas de redirecionamento definidas globalmente, ou seja, não associadas a uma página de origem em específico Redirecionamento Global e Local • Para o redirecionamento local, três situações podem ser definidas: 1. Apenas usando um nome lógico específico 2. Usando um nome lógico e vindo de um método de ação 3. Apenas vindo de um método de ação especificado Redirecionamento Local • O esquema mais simples é definir um nome lógico para redirecionamento a partir de uma página. • Para isso, basta incluir: ▫ No from-view-id: a página de onde se está redirecionando ▫ No from-outcome: o nome lógico da próxima página Redirecionamento Local Nome Lógico Específico <navigation-rule> <from-view-id>/login.xhtml</from-view-id> <navigation-case> <from-outcome>sauda</from-outcome> <to-view-id>/saudacao.xhtml</to-view-id> </navigation-case> </navigation-rule> • Para garantir que o nome lógico foi chamado a partir de um método de ação específico, deve-se utilizar o elemento from-action. ▫ Útil quando deseja-se diferenciar dois métodos de ação que produzem um mesmo nome lógico Redirecionamento Local Nome Lógico + Ação <navigation-rule> <from-view-id>/login.xhtml</from-view-id> <navigation-case> <from-action>#{loginBean.efetuarLogin}</from-action> <from-outcome>sauda</from-outcome> <to-view-id>/saudacao.xhtml</to-view-id> </navigation-case> </navigation-rule> • Pode-se ainda definir que sempre que um método de ação seja executado, ele irá chamar uma determinada página. ▫ Para isso, define-se apenas o elemento from- action, sem o from-outcome. Redirecionamento Local Ação Específica <navigation-rule> <from-view-id>/login.xhtml</from-view-id><navigation-case> <from-action>#{loginBean.efetuarLogin}</from-action> <to-view-id>/saudacao.xhtml</to-view-id> </navigation-case> </navigation-rule> • Para o redirecionamento global, duas situações podem ser definidas: 1. O redirecionamento vir de qualquer página 2. O redirecionamento vir de um grupo de páginas Redirecionamento Global • As regras de navegação podem ser definidas de forma que um nome lógico pode ser utilizado por qualquer página ▫ Para isso, deve-se utilizar o wildcard (*) no elemento from-view-id ou simplesmente não definir este elemento Redirecionamento Global Qualquer Página Redirecionamento Global Qualquer Página <navigation-rule> <from-view-id>*</from-view-id> <navigation-case> <from-outcome>login</from-outcome> <to-view-id>/login.xhtml</to-view-id> </navigation-case> </navigation-rule> <navigation-rule> <navigation-case> <from-outcome>logout</from-outcome> <to-view-id>/logout.xhtml</to-view-id> </navigation-case> </navigation-rule> Pode-se usar o * Ou não definir o elemento from-view-id • As regras de navegação podem definidas de forma que um nome lógico pode ser utilizado por um grupo de páginas ▫ Para isso, deve-se utilizar o wildcard (*) no elemento from-view-id sempre como sufixo Redirecionamento Global Grupo de Páginas Redirecionamento Global Grupo de Páginas <navigation-rule> <from-view-id>/funcionario/*</from-view-id> <navigation-case> <from-outcome>sucesso</from-outcome> <to-view-id>/sucesso.xhtml</to-view-id> </navigation-case> </navigation-rule> <navigation-rule> <from-view-id>/cadastro*</from-view-id> <navigation-case> <from-outcome>erroCadastro</from-outcome> <to-view-id>/erro.xhtml</to-view-id> </navigation-case> </navigation-rule> Pode-se aplicar o * para referenciar páginas em um diretório Pode-se aplicar o * para um conjunto de recursos que iniciam com um prefixo qualquer • Não precisamos definir um nome lógico para as páginas, apenas retornar o nome absoluto da página. Navegação Implícita public String efetuarLogin(){ if(login.equals("fabio") && senha.equals("12345")) return "saudacao.xhtml"; else return "error.xhtml"; } <h:commandButton type="submit" value="Enviar“ action=“saudacao.xhtml"/> Java Server Faces Tags Padrão da JSF Parte 1 • O desenvolvimento de aplicações que utilizem a tecnologia JSF requer um bom conhecimento das bibliotecas de tags da JSF • As bibliotecas padrão da JSF possuem um total de 43 tags e são divididas em duas bibliotecas: ▫ Core Representam tags genéricas independentes da forma de renderização (visualização) dos dados ▫ HTML Representam tags específicas para renderização de páginas HTML Introdução • Assim como outras bibliotecas de tags, as Tags JSF precisam ser declaradas na página para poderem ser utilizadas ▫ O prefixo padrão das tags Core é f ▫ O prefixo padrão das tags HTML é h • Sintaxe: Introdução • As tags core são abordadas aos poucos durante o desenvolvimento das aplicações, sendo assim, focaremos nas tags html xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html • As tags HTML servem para representar diversos tipos de componentes apresentados em uma página: ▫ Inputs ▫ Outputs ▫ Comandos ▫ Seleção ▫ Outros Tags JSF –HTML Tags JSF –HTML Categoria Tags Entrada de dados inputText, inputTextArea, inputSecret, inputHidden Saída de dados outputLabel, outputLink, outputFormat, outputText Comandos commandButton, commandLink Seleções selectOneListbox, selectOneMenu, selectOneRadio, selectBooleanCheckbox, selectManyCheckbox, selectManyListbox, selectManyMenu Layout panelGrid, panelGroup Tabela de dados dataTable, column Outras form, graphicImage Tags JSF - HTMl • h:form ▫ <h:form> ... </h:form> • JSF possui suporte para três tipos de campos textuais (campos de entrada de dados): ▫ h:inputText ▫ h:inputSecret ▫ h:inputTextArea Tags JSF – HTML Componentes – Campos Textuais Tags JSF – HTML Componentes – Campos Textuais <h:inputText value="#{bean.testeString}" readonly="true"/> <h:inputSecret value="#{bean.testeString}" redisplay="true"/> <h:inputSecret value="#{bean.testeString}" redisplay=“false"/> <h:inputText value="inputText" style="color: Yellow; background: Teal;"/> <h:inputText value="1234567890" maxlength="6" size="10"/> <h:inputTextarea value="123456789012345" rows="3" cols="10"/> • JSF possui suporte três tipos de campos de exibição de textos e imagens: ▫ h:outputText ▫ h:outputFormat ▫ h:graphicImage Tags JSF – HTML Componentes – Exibindo Textos e Imagens h:outputText • Considerado um elemento a ser contado para uso de h:panelGrid. • Mais seguro. • Permite o uso de CSS específico. • Permite o uso de conversores. <h:outputText value="#{automovel.preco}"> <f:convertNumber type="currency" /> </h:outputText> h:outputText • Isso dá erro em uma página .xhtml processada pelo JSF: ▫ <p>ação</p> Error Parsing /login.xhtml: Error Traced[line: 47] A entidade "ccedil" foi referenciada, mas não declarada. Ele interpreta como uma entidade xml. • Solução: <p> <h:outputText value="a&ccedil;&atilde;o" escape="false" /> </p> • Resultado: ▫ ação Tags JSF – HTML Componentes – Exibindo Textos e Imagens <h:outputText value="Number #{bean.number}"/> <h:outputText value="<input type=’text’ value=’hello’/>"/> <h:outputText value="<input type=’text’ value=’hello’/>“ escape="true"/> <h:outputFormat value="{0} tem {1} anos"> <f:param value=“Carla"/> <f:param value=“18"/> </h:outputFormat> Carla tem 18 anos <h:outputFormat value="Hoje é {0, date, medium}."> <f:param value="#{bean.data}"/> </h:outputFormat><br> <h:outputFormat value="Hoje é {0, date, dd-MM-yyyy}."> <f:param value="#{bean.data}"/> </h:outputFormat> Hoje é 17/Set/2010. Hoje é 17-09-2010. <h:graphicImage value="/images/ufc.jpg" /> <h:graphicImage library="images" value="ufc.jpg" /> JSF – Textos e Imagens • JSF possui suporte para o campo hidden através da tag: ▫ h:inputHidden • Ela possui os mesmos atributos básicos das outras sendo o mais importante o value Tags JSF – HTML Componentes – Campos Hidden JSF – Botões e Links • JSF possui suporte cinco tipos de botões e/ou links: ▫ h:commandButton ▫ h:commandLink ▫ h:outputLink ▫ h:link ▫ h:button • Os dois primeiros representam componentes de comando: ▫ Disparam ações quando clicados/selecionados • O 3º é útil para a inclusão de links simples na página: ▫ Apontam para recursos sem envolver JSF. ▫ Usa método GET do HTTP. ▫ A URL da requisição é definida explicitamente e não é tratada pelo JSF. ▫ Útil para acesso a páginas externas à aplicação. JSF – Botões e Links • JSF possui suporte cinco tipos de botões e/ou links: ▫ h:commandButton ▫ h:commandLink ▫ h:outputLink ▫ h:link ▫ h:button • Os dois últimos também realizam requisições através do método GET do HTTP. ▫ Usam o atributo outcome para definir a página de destino. JSF – Botões e Links <h:commandButton value="Adiciona curso" action ="#{cursosBean.adicionaCurso}"/> <h:commandLink value="Remove curso" action ="#{cursosBean.removeCurso}"/> <h:button value="Lista de cursos" outcome="lista_cursos" /> <h:link value="Home" outcome="home"/> <h:outputLink value="http://www.ufc.br"/> • Os componentes de comando possuem alguns atributos particulares: Tags JSF – HTML Componentes – Botões e Links Atributo Descrição action Nome lógico definido no face-config para redirecionamento ou método que executará a ação e retornará uma string com o redirecionamento actionListener Method-binding especificando o método: void nome(ActionEvent) image Caminho para imagem especificada em um commandButton (/app/img.gif) type Tipo de botão gerado (commandButton):button, submit, reset value Valor expresso no botão ou link (imagem) <h:commandButton value="Clique neste Botão" onclick="alert('button clicked')" type="button"/> <h:commandButton value="disabled" disabled="#{not bean.botaoHabilitado}"/> Tags JSF – HTML Componentes – Botões e Links <h:commandLink value=“Clique para Entrar" action="#{loginController.efetuarLogin}"/> <h:commandLink action="#{loginController.efetuarLogin}"> <h:outputText value="Clique para Entrar"/> <f:param name="nome" value="Fabio"/> <f:param name="id" value="#{loginBean.id}"/> </h:commandLink> Passando parâmetros para o link • Existem tags JSF que permitem gerar tabelas automaticamente e posicionar os componentes dentro dessas tabelas • h:panelGrid ▫ Cria tabelas • h:panelGroup ▫ Trata vários componentes como sendo um só Tags JSF – Organização • No exemplo a abaixo, uma tabela será criada contendo 2 colunas ▫ O número de linha depende da quantidade de elementos inseridos no corpo da tag ▫ Cada elemento é inserido da esquerda para a direita e de cima para baixo ▫ Caso não seja especificado, o número de colunas será igual a 1 Tags JSF – Organização <h:panelGrid columns=“2"> ... </h:panelGrid> Tags JSF – Organização <h:panelGrid columns="2"> <h:outputText value="Nome:"/> <h:inputText value=“#{...}" required="true"/> <h:outputText value=“Idade:"/> <h:inputText value=“#{...}" required="true"/> <h:outputText value=“Endereço:"/> <h:inputText value=“#{...}" required="true"/> </h:panelGrid> • Alguns outros atributos que podem ser especificados na tag panelGrid são descritos abaixo: Tags JSF – Organização Atributo Descrição bgcolor Cor de background border Espessura da borda cellpadding/cellspacing Espaçamento interno/externo das células columnClasses/rowClasses Classes CSS usadas para definir o estilo (no plural indica separação por vírgula) • A tag panelGrid costuma ser utilizada em conjunto com a tag panelGroup • Agrupar componentes faz com que sejam colocados em uma mesma célula da tabela Tags JSF – Organização <h:panelGrid columns="2"> ... <h:panelGroup> <h:outputText value=“Nome:”/> <h:inputText id="name" value="#{usuarioBean.nome}"> </h:panelGroup> ... </h:panelGrid> Tags JSF – Organização <f:view><h:form> <h:panelGrid columns="2" rowClasses="oddRows,evenRows"> <h:outputText value="Nome:"/> <h:inputText id="name" required="true"/> <h:outputText value="CEP:"/> <h:panelGroup> <h:inputText size="6"/> <h:outputText value="-"/> <h:inputText size="3"/> </h:panelGroup> </h:panelGrid> <h:commandButton value="Enviar"/> </h:form></f:view> Tags JSF – Organização <style type="text/css"> .evenRows{ background: PowderBlue; } .oddRows{ background: MediumTurquoise; } </style> • Componentes de formulário em JSF não apresentam os atributos method e action: ▫ O método é sempre POST ▫ O action é definido pelo comando disparado: A navegação pode carregar outra página ou recarregar a mesma Tags JSF – HTML Componentes – Formulários Tags JSF – HTML Componentes –Formulários <h:form> ... <h:inputText id="senha".../> <h:inputText id="confirmeSenha".../> ... <h:commandButton type="button" action=“#{loginController.efetuarLogin}”/> ... </h:form> h:selectOneMenu, f:selectItem e f:selectItems <h:selectOneMenu value="#{modeloBean.modelo.marca}"> <f:selectItem itemLabel="-- Selecione --“ noSelectionOption="true"/> <f:selectItems value="#{marcaBean.marcas}" var="marca“ itemValue="#{marca}" itemLabel="#{marca.nome}"/> </h:selectOneMenu> h:selectOneRadio <h:selectOneRadio value="#{modeloBean.modelo.marca}"> <f:selectItems value="#{marcaBean.marcas}" var="marca" itemValue="#{marca}" itemLabel="#{marca.nome}" /> </h:selectOneRadio> Layout line direction Layout page direction h:selectOneListbox <h:selectOneListbox value="#{modeloBean.modelo.marca}" size="5"> <f:selectItems value="#{marcaBean.marcas}" var="marca" itemValue="#{marca}" itemLabel="#{marca.nome}" /> </h:selectOneListbox> h:selectManyMenu <h:selectManyMenu value="#{automovelBean.automovel.acessorios}"> <f:selectItems value="#{acessorioBean.acessorios}" var="acessorio" itemValue="#{acessorio}" itemLabel="#{acessorio.descricao}" /> </h:selectManyMenu> h:selectManyListbox <h:selectManyListbox value="#{automovelBean.automovel.acessorios}" size="5"> <f:selectItems value="#{acessorioBean.acessorios}" var="acessorio" itemValue="#{acessorio}" itemLabel="#{acessorio.descricao}" /> </h:selectManyListbox> h:selectManyCheckbox <h:selectManyCheckbox value="#{automovelBean.automovel.acessorios}"> <f:selectItems value="#{acessorioBean.acessorios}" var="acessorio" itemValue="#{acessorio}" itemLabel="#{acessorio.descricao}" /> </h:selectManyCheckbox> Layout line direction Layout page direction h:selectBooleanCheckbox <h:selectBooleanCheckbox value="#{usuarioBean.usuario.inativo}"/> h:inputFile <h:form enctype="multipart/form-data"> Imagem: <h:inputFile value="#{automovelBean.uploadedFile}"/> <h:commandButton value="Salvar" action="#{automovelBean.salvar}"/> </h:form> h:inputFile – recebendo o upload public void class AutomovelBean { private javax.servlet.http.Part uploadedFile; private Automovel automovel; // getters e setters public void salvar(){ try { InputStream is = uploadedFile.getInputStream(); byte[] bytes = IOUtils.toByteArray(is); automovel.setImagem(bytes); em.persist(automovel); } catch (IOException e) { // tratar exceção } } } Pasta resources • Pasta que irá conter todas as imagens, arquivos CSS e Javascript. • Pode tanto estar na raiz do contexto web quanto na pasta META-INF dentro de um jar ou no classpath da aplicação. Pasta resources • Para acessar esses arquivos usa os seguintes códigos na sua página: <h:head> <h:outputStylesheet library="css" name="nomeArquivoCSS.css"/> <h:outputScript library="js" name="nomeArquivoJS.js" /> </h:head> <h:graphicImage library="img" name="nomeArquivoImagem.gif"/> h:outputScript e h:outputStylesheet <h:outputStylesheet library="css" name="facesmotors.css"/> <h:outputScript library="js" name="facesmotors-commons.js" target="head"/> Exercícios • Crie uma aplicação que exibe um formulário de cadastro de medicamentos de uma farmácia e depois exibe em uma página os dados enviados • O formulário de cadastro deve conter os seguintes campos: – Nome de remédio (campo texto) – Princípio ativo (campo texto) – Observações (área) – Botão de submissão para cadastro – Link de submissão para cadastro– Na tela inicial tem um link simples para o cadastro Data Table • Para exibir tabelas de dados em uma página, pode- se utilizar a tag dataTable. • A tag itera sobre uma lista de dados para criar um elemento table. A tag dataTable <h:dataTable value="#{bean.lista}" var="item"> <h:column> <h:outputText value="#{item.nome}"/> </h:column> <h:column> <h:outputText value="#{item.idade}"/> </h:column> </h:dataTable> • Atributos: • value: lista contendo os dados a serem exibidos ▫ Pode ser: vetor, List, ResultSet, DataModel • var: variável temporária criada para acessar cada elemento da lista • Tag column ▫ A tag column representa uma coluna a ser criada na tabela ▫ No corpo da tag, especifica-se o valor da variável (var) ou da propriedade presente na variável que deseja-se exibir A tag dataTable A tag dataTable - Exemplo <h:outputText value="#{pessoaController.nome}" /> <h:dataTable value="#{pessoaController.telefones}" var="fone"> <h:column> <h:outputText value="#{fone.tipo} :" /> </h:column> <h:column> <h:outputText value="#{fone.numero}" /> </h:column> </h:dataTable> A tag dataTable - Exemplo @ManagedBean public class PessoaBean { private Pessoa pessoa = new Pessoa(); } public class Telefone{ private String tipo; private String numero; } • Para especificar um cabeçalho e/ou um rodapé, é necessário utilizar a tag <f:facet ...>. Cabeçalhos e Rodapés Cabeçalhos e Rodapés <h:dataTable value="#{pessoaController.telefones}" var="fone"> <h:column> <f:facet name="header"> <h:outputText value="Tipo" /> </f:facet> <h:outputText value="#{fone.tipo} :" /> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Número" /> </f:facet> <h:outputText value="#{fone.numero}" /> </h:column> </h:dataTable> Cabeçalhos e Rodapés Exercício 1) Converta seu sistema de cadastro de pessoa utilizando JSF. Deve ter o módulo de cadastro, atualização, exclusão e listagem.
Compartilhar