Desenvolvimento WEB com JavaServer Faces - Aula 02

Desenvolvimento WEB comJavaServer™ Faces

Renato V. MendesTéc. De Tecnologia da Informação – NTI/UFPE

Oct 17, 2012 Desenvolvimento WEB com JavaServer™ Faces 44

Aula 02 - Agenda

● JSF e o padrão MVC

● UI Components

● Navegação


Dica – Plugin JBoss Tools

● Conjunto de plugins para eclipse para trabalhar com tecnologias da JBoss

● Traz também facilidades para trabalhar com JSF no eclipse

● http://www.jboss.org/tools● Pode ser instalado no eclipse pelo Marketplace

– Help > Eclipse Marketplace...

http://www.jboss.org/tools


Entendendo o MVC no JSF

● MVC

– Padrão de projeto que separa a lógica da aplicação da interface do usuário.

● Os frameworks MVC possuem as seguintes classificações:

– Action Based

– Component Based

[8]


Frameworks WEB

Action Based x Componet Based Struts JSF

Spring MVC Wicket

VRaptor Tapestry

ASP.NET MVC

Rails

[13]


Frameworks WEB – Action Based

[13]


Frameworks WEB – Component Based

[13]


Frameworks WEB

[13] [14]

Action Based Component Based

Desacoplamento entre a visão Maior acoplamento entre visão e o framework

Não permite a criação de componentes ricos controlados por código Java

Permite criação de componentes ricos controlados por código Java

Dados são empurrados do controlador para a visão (MVC Push)

Os dados são puxados pela visão (MVC Pull)

Trabalha mais próximo do protocolo Http (Request e Response)

Protocolo Http é abstraído pelo framework


UI Components

● O JSF possui 04 bibliotecas de componentes padrão

– Core Library

– HTML Library

– Facelet Template Tag Library

– Composite Component Tag Library● Para aplicações que utilizam JSP, apenas as bibliotecas Core e

HTML estão disponíveis.

[8]


UI Components – Core Library

● Associado com o namespace f: e URI http://java.sun.com/jsf/core

● Disponibiliza componentes utilitarios comuns para o desenvolvimento de aplicações

– Validação

– Conversão

– Internacionalização

– Etc.● Componentes dessa biblioteca não possuem

representação visual para o usuário [8]



[8]

Tag Name View JSF Version

f:actionListener Facelets, JSP 1.0+

f:ajax Facelets 2.0+

f:attribute Facelets, JSP 1.0+

f:convertDateTime Facelets, JSP 1.0+

f:convertNumber Facelets, JSP 1.0+

f:converter Facelets, JSP 1.0+

f:event Facelets 2.0+

f:facet Facelets, JSP 1.0+

f:loadBundle Facelets, JSP 1.0+

f:metadata Facelets 2.0+

f:param Facelets, JSP 1.0+

f:phaseListener Facelets, JSP 1.2+

f:selectItem Facelets, JSP 1.0+



[8]

Tag Name View JSF Version

f:selectItems Facelets, JSP 1.0+

f:setPropertyActionListener Facelets, JSP 1.2+

f:subview JSP 1.0+

f:validateBean Facelets, JSP 2.0+

f:validateDoubleRange Facelets, JSP 1.0+

f:validateLength Facelets, JSP 1.0+

f:validateLongRange Facelets, SP 1.0+

f:validateRegex Facelets, JSP 2.0+

f:validateRequired Facelets, JSP 2.0+

f:validator Facelets, JSP 1.0+

f:valueChangeListener Facelets, JSP 1.0+

f:verbatim JSP 1.0+

f:view Facelets, JSP 1.0+

f:viewParam Facelets 2.0


UI Components – HTML Library

[8]

● Associado com o namespace h: e URI http://java.sun.com/jsf/html

● Disponibiliza componentes HTML

– Inputs

– Buttons

– Tables

– Checkboxes

– Etc.



[8]

● h:body (2.0+)

– <body> </body>

● h:button (2.0+)

– <input type="button" onclick="window.location.href='OUTCOME'; return false;" value="" />

● h:column (1.0+)

● h:commandButton (1.0+)

– <input type="submit|reset|image" name="j_idt7" value="" />

● h:commandLink (1.0+)

● h:dataTable (1.0+)

● h:form (1.0+)



[8]

● h:graphicImage (1.0+)

● h:head (2.0+)

– <head> </head>

● h:inputHidden (1.0+)

● h:inputSecret (1.0+)

● h:inputText (1.0+)

● h:inputTextarea (1.0+)

– <textarea></textarea>

● h:message e h:messages(1.0+)

– <span>



[8]

● h:link (2.0+)

– <a href="OUTCOME"></a>

● h:outputFormat (1.0+)

● h:outputLabel (1.0+)

● h:outputLink (1.0+)

● h:outputScript (2.0+)

– <script>

● h:outputStyleSheet (2.0+)

– <link>



[8]

● h:outputText (1.0+)

● h:panelGrid (1.0+)

– <table>

● h:panelGroup (1.0+)

– <span>

● h:selectBooleanCheckbox (1.0+)

– <input type="checkbox" />

● h:selectManyCheckbox (1.0+)

● h:selectManyListbox (1.0+)

– <select multiple="multiple" size=”0”></select>



[8]

● h:selectManyMenu

– <select multiple="multiple" size="1"></select>

● h:selectOneListBox

– <select size="2">

<option value="0">Item 0</option>


</select>

● h:selectOneMenu

– <select size="1">



</select>



[8]

● h:selectOneRadio

– <table>

<tr>

<td>

<input type="radio" value="0" /><label> Item 0</label>

</td>

<td>

<input type="radio" value="1" /><label> Item 1</label>

</td>

</tr>

</table>


UI Components – Facelet Template Library

[8]

● Associado com o namespace ui: e URI http://java.sun.com/jsf/facelets

● Adiciona funcionalidades para templates e layout

● *Será visto com mais detalhes na aula que falaremos sobre templates


UI Components – Composite Component Tag Library

[8]

● Associado com o namespace cc: e URI http://java.sun.com/jsf/composite

● Adiciona funcionalidades para criação de componentes através da composição de outros componentes

● *Será visto com mais detalhes na aula que falaremos sobre componentes customizados


Cadastro de Usuário

● Utilizando os componentes básicos do JSF vamos criar um cadastro simples de usuários

– Usuario (username)

– Senha (Deve-se pedir confirmação de senha e validar)

– Nome

– E-mail (Deve-se validar o formato do e-mail. Ex.: [email protected])

– Sexo (Tem que ser exibidas as duas opções)

– Data de nascimento (Deve-se validar o formato da data como DD/MM/AAAA)



● Além disso devemos:

– Informar ao usuário se alguma regra de validação não for seguida junto ao campo relacionado

– Os nome dos campos e botões devem ficar em um lugar único para toda aplicação, de formar que possam ser facilmente alterados em todos os lugares (Uso de properties)

– A requisição deve ser feita utilizando AJAX

– Se tudo estiver correto devemos exibir uma mensagem de sucesso ao usuário



● Exemplo da tela de cadastro



● Criamos um projeto do tipo JSF

– File > New > Project... > JSF Project

– Project Name: JSF

– JSF Enviroment: JSF 2.0

– Template: JSFBlanWithoutLibs● Adicionamos as bibliotecas do JSF


Classe Usuario

● Classe que representa o usuário a ser cadastrado

● Possui os atributos:

– Login

– Senha

– Nome

– Email

– Sexo

– Data de ascmento


Classe Usuario


Mensagens.properties

● Arquivo de properties com as mensagens e nomes de campos do cadastro (Localizado no pacote br.ufpe.nti.properties)


Classe UsuarioMBean● Managed Bean para o cadastro de usuário


Classe UsuarioMBean


Adicionar Bundle ao Faces-config.xml


Adicionar Bundle ao Faces-config.xml

● O uso de properties (bundles) poderia ser utilizado diretamente nas páginas usando a tag:

– <f:loadBundle var="msg" basename="br.ufpe.nti.curso.properties.menssagens"/>


Adicionar cadastrar.xhtml● Página com o formulário de cadastro de usuário


Adicionar cadastrar.xhtml


Observações cadastrar.xhtml

● O atributo prependId como false, faz com que os ids dos componentes, no html gerado, não sejam concatendados com o do form.

– Ex.: No lugar de ficar formUsuario:senha, ficará apenas senha.

– Serviu para facilitar a informação do id do componente (senha) no método validarUsuario do Manged Bean.

● O atributo columns="3" no panelGrid, faz com que a tabela gerda tenha 3 colunas, ou seja, como cada componente fica numa célula (<td>), a cada 3 células será iniciada uma nova linha (<tr>)

– Obs.: Componentes contidos dentro de outros componentes não são considerados



● O componente h:message associado com cada componente de entrada, serve para exibir mensagens específicas para cada componente.

● O componente f:validateRegex dentro da tag h:inputText de email, serve para validar o e-mail digitado de acordo com a expressão regular definida na propriedade email.regex no arquivo mensagens.properties.

– Caso seja preenchido, mas o padrão não seja seguido, será automaticamente adicionada uma mensagem de erro, capturada pelo h:message



● O componente f:convertDateTime dentro da tag h:inputText de data de nascimento, server para converter uma String do no padrão definido pela propriedade data.pattern do arquivo mensagens.properties (dd/MM/yyyy) para um objeto do tipo Date

– Caso não seja preenchido no formato correto será automaticamente adicionada uma mensagem de erro, capturada pelo h:message

● A tag f:ajax, dentro da tag h:commandButton, adiciona ao componente suporte ajax, de forma que, para executar o método cadastrar do Managed Bean, todo o formulário (@form) seja submetido e que toda a página (@all) seja atualizada.

● O h:messages no captura todas as mensagens que sejam globais (globalOnly), ou seja, que não seja específica de um componente


Navegação

● O JSF facilita a determinação do fluxo entre as página (page flow) da aplicação, ou seja, determinar qual a próxima página deve ser exibida baseado em alguma regra, sem a necessidade de redirecionar diretamente.

● Pode ser feita de duas formas:

– Navegaçao Implícita (JSF 2.0+)

– Navegação Baseada em regras

[8]


Navegação Implícita

● Novidade adicionada a partir do JSF 2

● Maneira simples de informar qual a próxima página após o submit

– Estou na pa inas ǵ cadastrar.xhtml e desejo ir para a página confirmar.xhtml.

– <h:commandButton value=”Cadastrar” action=”confirmar” />

– <h:commandButton value=”Cadastrar” action=”#{usuarioBean.cadastrar}” /> , onde o método cadastrar() retornaria uma String com o valor “confirmar”

– Em ambos os casos provocaria uma navegação implícita para a página confirmar.xhtml

[8]


Navegação Implícita

● Funciona com os componentes:

– h:commandButton e h:commandLink

● Através do atributo action

– h:button and h:link (JSF 2.0+)

● Através do atributo outcome● O valor do atributo pode ser:

– String colocada diretamente no código.

– EL expression que aponta diretamente para um método que retorne uam String

● Caso a página exista, será automaticamente redirecionado

● Estruturas de pastas também são aceitas (/pages/cadastrar)

[8]


Alterando o cadastro de usuário

● Vamos criar uma regra de navegação, onde em vez de tentarmos cadastrar o usuário diretamente iremos exibir uma tela de confirmação com os dados preenchidos.

● No formulário de cadastro redirecionaremos para a tela confirmar.xhtml

● Na página de confirmarção exibiremos os dados preenchidos e os botões:

– Confirmar

● Cadastrar o usuário e exibe a mensagem de sucesso

– Editar

● Retorna para o firmulário de cadastro (cadastrar.xhtml)


Alterando o cadastro de usuário

● Tela de confirmação

[8]


Navegação baseada em regras

● Oferece mais flexibilidade do que a navegação implícita

● As regras de navegações (navigation rules) são declaradas no faces-config.xml

● Permite desenhar o fluxo de navegação de forma visual devido ao crescente número de ferramentas.

– O usuário desenha ou liga páginas de forma visual

● Facilita quando o nome de um arquivo é alterado, pois é necessário alterar a referência em um único ponto, no faces-config.xml

[8]



● Exemplo:

[8]



[8]

● Vamos alterar o nosso cadastro



[8]

● Ao clicar em cadastrar, além de verificarmos a confirmação de senha, vamos verificar se já existe um usuário com o mesmo nome de usuário (username) cadastrado.

– Caso não passe em alguma dessas validações redirecionamos para erro.xhtml

– Caso o cadastro seja concluído redirecionamos para sucesso.xhtml

– Esse tipo de navegação é chamado de Navegação Dinâmica

● Nas telas de sucesso e erro devemos exibir um botão “Voltar”, que retorna diretamente para a página cadastrar.xhtml.

– Navegação Estática



● Tag <redirect/>

– Fará com que o cliente (Ex.: Browser) faça uma nova requisição para a view informada

● Leitura recomendada

– Artigo “Repitam comigo: Redirect não é forward”– http://www.rponte.com.br/2008/07/12/repitam-comigo-redirect-nao-e-forward/

[8]

http://www.rponte.com.br/2008/07/12/repitam-comigo-redirect-nao-e-forward/


Referências

● [8] JavaServer Faces 2.0: The Complete Reference. Ed Burns. Chris Schalk com Neil Griffin

● [13] http://blog.caelum.com.br/entenda-os-mvcs-e-os-frameworks-action-e-component-based/

● [14] Vídeo “Introdução ao desenvolvimento web” - Curso Online Desenvolvimento Web com JSF 2 – AlgaWorks – Acessado no link http://www.algaworks.com/cursos-online/desenvolvimento-web-com-jsf-2/116/introducao-ao-desenvolvimento-web/

http://blog.caelum.com.br/entenda-os-mvcs-e-os-frameworks-action-e-component-based/

http://blog.caelum.com.br/entenda-os-mvcs-e-os-frameworks-action-e-component-based/

http://www.algaworks.com/cursos-online/desenvolvimento-web-com-jsf-2/116/introducao-ao-desenvolvimento-web/

http://www.algaworks.com/cursos-online/desenvolvimento-web-com-jsf-2/116/introducao-ao-desenvolvimento-web/


Renato V. [email protected]

http://blog.vmendes.com.br

Desenvolvimento WEB comJavaServer™ Faces

mailto:[email protected]

http://blog.vmendes.com.br/

Desenvolvimento WEB com JavaServer Faces - Aula 02

Documents

Transcript of Desenvolvimento WEB com JavaServer Faces - Aula 02