Você está na página 1de 12

Tutorial – Aplicações Multicamadas

Parte II – Módulo WEB


Agosto, 2008

Oscar A. Konno Sampaio

Neste tutorial será dado prosseguimento ao desenvolvimento do aplicativo


AcmeApp. Será desenvolvido o módulo WEB para o cadastro de Categorias.

Criando o menu principal


1. Clique com o botão direito sobre o módulo Web (AcmeApp-war) no
painel de projetos e selecione “Novo  Visual Web Página JSF...”

2. Preencha o wizard atribuindo o nome MenuPrincipal para a página e


atribuindo para o pacote padrão com.acme.web

3. Clique em finalizar. O Netbeans irá criar os arquivos:

MenuPrincipal.jsp
com.acme.web.MenuPrincipal.java

4. Edite o jsp de forma a ele ficar como abaixo:


Use um texto estático para fazer o texto “Lojas ACME – Módulo
Administrativo” e utilize a paleta de propriedades para configurar a
cor e tamanho de fontes.

Criando um managed session bean para categoria


Agora iremos criar um managed session bean, não confundir com o Session
EJB. O bem que iremos criar será uma classe Java (bean) gerenciado pelo
JSF (lembrar as aulas da disciplina Linguagem e Padrões Web).

O objetivo desse managed bean é guardar informações entre requisições e


durante uma sessão do usuário para as páginas JFS.

1. Clique com o botão direito sobre o modulo WEB e selecione “Novo 


Novo Bean de sessão JSF de Visual Web”

2. Nomeie o Bean de Sessão como CategoriaSessionBean

3. Clique em finalizar

Criando a página principal do cadastro de categorias


1. Crie uma página JSF Visual com o nome CategoriaIndex. Iremos
utilizar a seguinte convenção para nome das páginas:

<nome da entidade><Ação>

Por exemplo, para criar uma nova categoria nomearemos a página


como “CategoriaNew”, para editar “CategoriaEdit” e para remover
“CategoriaDelete”.

2. Edite o bean de sessão criado anteriormente


(CategoriaSessionBean.java) e adicione a propriedade categorias do
tipo array de Categoria. Esta propriedade será utilizada para
armazenar a lista de categorias cadastradas. Veja o código abaixo:

public class CategoriaSessionBean extends AbstractSessionBean {


...
private void _init() throws Exception {
}
...
Categoria[] categorias;
public Categoria[] getCategorias() {
return categorias;
}

public void setCategorias(Categoria[] categorias) {


this.categorias = categorias;
}

3. Adicione um componente Tabela a página criada (CategoriaIndex.jsp)

4. Clique com o botão direito sobre a tabela e selecione “Vincular aos


Dados...”

5. Selecione categorias em CategoriaSessionBean na opção “Obter


Dados de”

6. Ordene os campos de forma ficarem na ordem id  nome 


descrição

7. Crie mais duas colunas (botão editar e remover) configurando os


mesmo para conterem um botão
Um para editar e outro pra remover

8. Adicione um botão acima da tabela para incluir uma nova categoria e


outro para voltar ao menu principal.

A página de ficar com a aparência a seguir:

9. Vamos agora obter as categorias que serão mostradas na tabela


recém criada. Para isso teremos que obter a informação acessando a
camada de lógica de negócios, mais especificamente o EJB
CategoriaFacade. Para isso, vá até o código do bean
CategoriaIndex.java e clique com o botão direito sobre o editor.
Selecione a opção “Recursos Corporativos  Chamar Enterprise
Bean”. Selecione o EJB CategoriaFacade e clique em Finalizar. O
NetBean irá adicionar o código :

@EJB
private CategoriaFacadeLocal categoriaFacade;
A anotação @EJB diz ao container para injetar a referencia para o EJB
CategoriaFacade. Isso faz com que possamos usar o EJB em qualquer
método do Managed Bean .

10.O próximo passo consiste em preencher o vetor de categorias de


CategoriaSessionBean com as categorias obtidas do EJB
(CategoriaFacade). Adicione o código abaixo no método prerender de
CategoriaIndex:

@Override
public void prerender() {
getCategoriaSessionBean().setCategorias(categoriaFacade.findAll().toArray(new

Categoria[1]));
}

Isto fará com que antes de renderizar a página, todas as categorias


sejam obtidas (chamando o método findAll de categoriaFacade) e
inseridas na propriedade categorias de CategoriaSessionBean.

Criando a navegação da página principal para o cadastro de


categorias
1. Edite o arquivo faces-config.xml e inclua a regra de navegação
abaixo:

<navigation-rule>
<from-view-id>/MenuPrincipal.jsp</from-view-id>
<navigation-case>
<from-outcome>categoria_index</from-outcome>
<to-view-id>/CategoriaIndex.jsp</to-view-id>
</navigation-case>
</navigation-rule>

Esta regra de navegação informa ao JSF que se uma ação retornar o


string “categoria_index” o fluxo de navegação será redirecionado
para a página “CategoriaIndex.jsp”.

2. De um duplo clique sobre o botão “Cadastro de Categorias” no menu


principal. O NetBeans irá abrir o editor de código no método
button1_action. Digite o código abaixo:

public String button1_action() {


// TODO: Substitua o código
return "categoria_index";
}
Com isso ao se clicar no botão o action irá retornar o string
“categoria_index” que fará com que seja apresentada a página
“CadastroIndex” conforme configurado no faces-config.xml.

Executando o aplicativo
1. Execute o projeto . Se acompanhar a janela de saída (embaixo)
podemos verificar que o netbeans irá compilar os fontes, montar os
arquivos de deploy (war e ear), executar o servidor, se ainda não tiver
no ar, fazer o deploy no servidor e finalmente abrir o browser com a
página principal do site.

O nosso caso de uso completo para o cadastro de Categorias pode ser


visto abaixo:

A tela que acabamos de montar consiste do caso de uso “Cadastro de


Categorias”. A partir dele o usuário pode selecionar as seguintes ações:
criar uma nova categoria (botão “Nova Categoria”), editar uma categoria
existente (botão “Editar” ao lado da categoria) ou remover uma categoria
existente (botão “Remover”).

Iremos agora criar as páginas correspondentes aos casos de uso novo,


editar e remover categoria.

Criando o caso de uso “Nova Categoria”


1. Clique sobre o projeto web com o botão direito e crie uma nova
Pagina Visual JSF, dando o nome CategoriaNew.

2. Crie os campos para entrada de dados do nome e descrição e dois


botões, um para salvar os dados e outro para cancelar a criação da
categoria.
3. Precisamos criar uma propriedade do tipo categoria onde será
armazenado a nova categoria ser criada. Para isso adicione as
seguintes linhas de código:

public CategoriaNew() {
}

Categoria categoria;

public Categoria getCategoria() {


return categoria;
}

public void setCategoria(Categoria categoria) {


this.categoria = categoria;
}
4. Precisaremos inicializar esta variável de forma a ela ficar disponível
para a página. Para isso adicione o código a seguir no método
preProcess:

public void preprocess() {


categoria=new Categoria();
}

5. Vamos agora associar os campos da página a propriedade categoria


que criamos. Clique com o botão direito sobre o campo de entrada
correspondente ao nome e selecione “Vincular aos dados...”. Na
janela de diálogo selecione “CategoriaNewcategorianome”.

6. Faça o mesmo com a entrada de dados do campo descrição.

Com isso o JSF irá utilizar as entradas de dados para preencher a


propriedade categoria do managed bean. Precisamos agora apenas
persistir a informação digitada utilizando o EJB CategoriaFacade. Da
mesma forma como fizemos na página CategoriaIndex iremos precisar
de uma referencia para o EJB.

7. Clique com o botão direito sobre o código de CategoriaNew e


selecione “Recursos Corporativos  Chamar Enterprise Bean”.
Selecione o EJB CategoriaFacade e clique em Finalizar. O NetBeans irá
inserir uma referencia para CategoriaFacade.
Antes de criar a ação de salvar a categoria temos de definir as transições
de páginas, já que após a inclusão da categoria o sistema deve retornar
para a página de cadastro principal.

8. Edite o arquivo faces-config.xml (na pasta “Arquivos de


Configuração”) e acrescente as regras de navegação a seguir:

<navigation-rule>
<from-view-id>/CategoriaIndex.jsp</from-view-id>
<navigation-case>
<from-outcome>categoria_new</from-outcome>
<to-view-id>/CategoriaNew.jsp</to-view-id>
</navigation-case>
</navigation-rule>

<navigation-rule>
<from-view-id>/CategoriaNew.jsp</from-view-id>
<navigation-case>
<from-outcome>categoria_index</from-outcome>
<to-view-id>/CategoriaIndex.jsp</to-view-id>
</navigation-case>
</navigation-rule>

A primeira regra de navegação corresponde a transição da página


principal do cadastro (CategoriaIndex.jsp) para a página de novo
cadastro. A segunda faz o inverso.

9. Volte para a página CategoriaIndex.jsp, no modo “Design”, de um


duplo clique sobre o botão “Nova Categoria” e adicione o código
abaixo:

public String button1_action() {


// TODO: Processe a ação. O valor de retorno é um nome de caso
// de navegação em que nulo fará retornar para a mesma página.
return "categoria_new";
}
Isto fará com que ao clicar o botão o sistema vá para a página
CategoriaNew.jsp.

10.Na página CategoriaNew.jsp dê um duplo clique sobre o botão


“Salvar” e adicione o código abaixo:

public String button1_action() {


// TODO: Processe a ação. O valor de retorno é um nome de caso
// de navegação em que nulo fará retornar para a mesma página.
categoriaFacade.create(categoria);
return "categoria_index";
}
No código digitado o objeto categoriaFacade é utilizado para criar a
categoria. O JSF neste momento já preencheu os campos da variável
categoria com os dados digitados e ao chamar o método create de
categoriaFacade o EJB irá salvar a categoria.

Após isso retornará o string “categoria_index” que fará com que o


sistema volte para a página CategoriaIndex.jsp.

11.De um duplo clique sobre o botão “Cancelar” e digite o código abaixo:

public String button2_action() {


// TODO: Processe a ação. O valor de retorno é um nome de caso
// de navegação em que nulo fará retornar para a mesma página.
return "categoria_index";
}
Isso fará com que o sistema retorne à página CategoriaIndex.jsp sem
fazer nada.

12.Execute a aplicação e teste a criação de uma nova categoria.

Implementando o caso de uso Editar Categoria


1. Crie a página CategoriaEdit.jsp e coloque os objetos para entrada de
dados e botões como abaixo:

2. Cria as regras de navegação entre CategoriaIndex.jsp e


CategoriaEdit.jsp

<navigation-rule>
<from-view-id>/CategoriaIndex.jsp</from-view-id>
<navigation-case>
<from-outcome>categoria_new</from-outcome>
<to-view-id>/CategoriaNew.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>categoria_edit</from-outcome>
<to-view-id>/CategoriaEdit.jsp</to-view-id>
</navigation-case>
</navigation-rule>

<navigation-rule>
<from-view-id>/CategoriaEdit.jsp</from-view-id>
<navigation-case>
<from-outcome>categoria_index</from-outcome>
<to-view-id>/CategoriaIndex.jsp</to-view-id>
</navigation-case>
</navigation-rule>

3. Edite o arquivo fonte de CategoriaSessionBean e adicione a


propriedade categoria (no singular). É através desta variável que
iremos passar a informação da categoria selecionada para edição (em
CategoriaIndex) para a página onde ela será editada (CategoriaEdit).

Categoria[] categorias;
Categoria categoria;

public Categoria getCategoria() {


return categoria;
}

public void setCategoria(Categoria categoria) {


this.categoria = categoria;
}
public Categoria[] getCategorias() {
return categorias;
}

public void setCategorias(Categoria[] categorias) {


this.categorias = categorias;
}

4. Na página CategoriaIndex.jsp, de um duplo clique sobre o botão


“Editar” (se não funcionar, pode-se usar a janela de navegação – lado
esquerdo da tela, para localizar o botão) e digite o código abaixo:

public String button2_action() {


RowKey rk = tableRowGroup1.getRowKey();
if (rk!=null){
Categoria[] categorias =
getCategoriaSessionBean().getCategorias();
Categoria c =
categorias[Integer.parseInt(rk.getRowId())];
getCategoriaSessionBean().setCategoria(c);
return "categoria_edit";
}
return null;
}
Este código encontra a categoria a qual o botão se refere (a partir de
tableRowGroup) e a coloca na variável c.

Precisamos agora passar a categoria encontrada para a página


CategoriaEdit.jsp. Para isso iremos utilizar o Managed Bean
“CategoriaSessionBean”, setando a variável categoria criada
anteriormente.
5. Associe os campos de entrada ‘nome’ e ‘descrição’ a propriedade
categoria de CategoriaSessionBean (utilize a opção “Vincular Dados”
de cada campo).

6. Crie uma referencia ao EJB CategoriaFacade usando a opção “Recurso


CorporativoChamar Enterprise Bean”

7. Vá para o modo design da página CategoriaEdit e de um duplo clique


sobre o botão “Salvar” (ou use o navegador). Digite o código abaixo:

public String button2_action() {


Categoria c=getCategoriaSessionBean().getCategoria();
categoriaFacade.edit(c);
return "categoria_index";
}
Este código irá utilizar o EJB para salvar os dados da categoria.

8. Adicione o código para o botão cancelar – retornando para


CategroriaIndex.

9. Execute a aplicação

Implementando o caso de uso Remover Categoria


1. Crie uma nova página JSF chamada CategoriaDelete eadicione os
componentes como abaixo:

Observar que o campo abc é um texto estático vinculado a


propriedade categoria de CategoriaSessionBean

2. Crie as regras de navegação entre CategoriaIndex e CategoriaDelete

<navigation-rule>
<from-view-id>/CategoriaIndex.jsp</from-view-id>
<navigation-case>
<from-outcome>categoria_new</from-outcome>
<to-view-id>/CategoriaNew.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>categoria_edit</from-outcome>
<to-view-id>/CategoriaEdit.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>categoria_delete</from-outcome>
<to-view-id>/CategoriaDelete.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>menu_principal</from-outcome>
<to-view-id>/MenuPrincipal.jsp</to-view-id>
</navigation-case>
</navigation-rule>
...

<navigation-rule>
<from-view-id>/CategoriaDelete.jsp</from-view-id>
<navigation-case>
<from-outcome>categoria_index</from-outcome>
<to-view-id>/CategoriaIndex.jsp</to-view-id>
</navigation-case>
</navigation-rule>

3. Crie o método para tratar o clique do botão “Remover” na tabela da


página CategoriaIndex

public String button3_action() {


RowKey rk = tableRowGroup1.getRowKey();
if (rk!=null){
Categoria[] categorias =
getCategoriaSessionBean().getCategorias();
Categoria
c=categorias[Integer.parseInt(rk.getRowId())];
getCategoriaSessionBean().setCategoria(c);
return "categoria_delete";
}
return null;
}

O raciocínio é o mesmo usado no caso de uso Editar Categoria. No


entanto agora o retorno da ação é o string “categoria_delete”

4. Crie uma referencia para o EJB em CategoriaDelete

5. Na página CategoriaDelete implemente ação para obotão “Sim”

public String button1_action() {


Categoria categoria =
getCategoriaSessionBean().getCategoria();
categoriaFacade.remove(categoria);
return "categoria_index";
}
6. Implemente a ação de retorno para CadastroIndex (botão “Não”)

7. Execute o aplicativo

Você também pode gostar