< Anterior | Próximo >

Lição 8: Criar uma Página de Atualização

Neste exercício, você criará a página da Web que permite que os usuários atualizem a tabela CUSTOMER. Essa página receberá o parâmetro transmitido pela outra página, exibirá apenas o registro indicado por esse parâmetro e aceitará as informações atualizadas para o registro.

Criar o Arquivo updatecustomer.jsp

  1. Na visualização do Enterprise Explorer, clique com o botão direito do mouse na pasta WebContent do projeto EGLWeb.
  2. Clique em Nova > Página da Web.
  3. No campo Nome do Arquivo, digite este texto como o nome do novo arquivo:
    updatecustomer.jsp
  4. Certifique-se de que o campo Pasta liste a pasta /EGLWeb/WebContent.
  5. Na lista Modelo, clique em Meus Modelos.
  6. Na caixa Visualizar, clique no modelo A_gray.htpl.
  7. Clique em Concluir. A nova página é criada e aberta no editor.
  8. Substitua o texto padrão por este texto:
    Atualizar informações do cliente
  9. Pressione Enter três vezes para inserir três linhas em branco.
  10. Salve a página.
A nova página updatecustomer.jsp é semelhante a esta:

Aparência da Página updatecustomer.jsp

Incluir um Registro do EGL e Exibi-lo na Página

A próxima etapa é incluir os dados do EGL nesta página. Quando você criou o arquivo allcustomers.jsp, incluiu os dados na página em uma etapa e depois exibiu os dados na página, arrastando-os da visualização Dados da Página em uma segunda etapa. Desta vez, você selecionará a caixa de opção Incluir Controles para Exibir o Elemento do EGL na Página da Web para incluir os dados na página e exibi-los na página em uma etapa.
  1. Abra a gaveta EGL na visualização Paleta.
  2. Arraste o ícone Nova Variável para a página, abaixo do texto "Atualizar Informações do Cliente". A janela Criar uma Nova Variável de Dados EGL é aberta.
  3. Em Seleção de Tipo, clique em Registro.
  4. Em Tipo de Registro, clique em Cliente.
  5. No campo Digite o nome do campo, digite o seguinte texto:
    cliente
  6. Em Propriedades da Matriz, desmarque a caixa de opção Matriz.
  7. Selecione a caixa de opção Incluir Controles para Exibir o Elemento do EGL na Página da Web.
  8. Clique em OK. O novo registro aparece na visualização Dados da Página, e a janela Inserir Controle será aberta.
  9. Na janela Inserir Controle, clique em Atualizar um registro existente.
  10. Clique em Opções. A janela Opções é aberta.
  11. Selecione a caixa de opção Botão Submeter.
  12. Desmarque a caixa de opções Botão Excluir.
  13. Para o Rótulo do botão Submeter, digite este texto:
    Atualizar este registro
  14. Clique em OK.
  15. Clique em Concluir.
  16. Salve a página.

Os controles de dados para atualizar o registro são inseridos na página da Web. Observe que existe um controle {Mensagens de Erro} na página. Esse controle não significa que sua página tenha erros; o controle {Mensagens de Erro} marca o local em que mensagens de erro do tempo de execução serão exibidas.

A página é semelhante a esta:

Aparência da Página updatecustomer.jsp

Recuperar os Dados

Agora que há campos para os dados na página, é necessário incluir o código que recupera os dados do banco de dados. Lembre-se que, na lição anterior, você incluiu um link para transmitir o número do ID do cliente para um parâmetro nomeado CID. Nestas etapas, você configurará o manipulador para a nova página da Web para aceitar esse parâmetro e recuperar o registro apropriado do banco de dados para ser exibido na página.
  1. Clique com o botão direito do mouse em qualquer lugar na área de formato livre do arquivo updatecustomer.jsp.
  2. No menu pop-up, clique em Editar Código da Página. O arquivo updatecustomer.egl é aberto no editor.
  3. Como no Manipulador JSF anterior editado, é necessário incluir um registro para armazenar o código de sucesso ou de falha da chamada do SQL. Imediatamente após a linha customer Customer;, inclua o seguinte código, exatamente como escrito:
    status StatusRec;
    A próxima etapa para incluir os dados na página é configurar o manipulador JSF para aceitar o parâmetro CID para o qual o link transmitirá.
  4. Altere a linha function onPreRender() para o seguinte código, exatamente como escrito:
    function onPreRender(CID INT)
    Agora o manipulador JSF está configurado para aceitar um parâmetro inteiro nomeado CID.
  5. Em uma linha em branco imediatamente após function onPreRender(CID INT), inclua este código, exatamente como escrito:
    customer.customerId = CID;
    Agora você designou o número do ID ao registro do cliente. A próxima etapa é recuperar o registro com este número de ID do banco de dados
  6. Na próxima linha, inclua este código, exatamente como escrito. É possível usar o recurso de conclusão do código que você aprendeu em Lição 6: Incluir Dados na Página.
    CustomerLib.GetCustomer(customer, status);
    A função GetCustomer trabalha como a função GetCustomerAll usada anteriormente, mas a função GetCustomer recupera um registro, enquanto a função GetCustomerAll recupera uma matriz de registros. Agora o registro do cliente contém o registro com o ID transmitido para este manipulador JSF.
    A nova função é semelhante a esta:
    	function onPreRender(CID
    INT)
    		customer.CustomerId = CID;
    		CustomerLib.GetCustomer(customer, status);
    	end
  7. Otimize as importações e salve o arquivo.
O manipulador JSF é semelhante a este:
Aparência do Arquivo updatecustomer.egl

Agora, quando você clica em um link na página allcustomers.jsp, a página updatecustomer.jsp é carregada com detalhes sobre o registro desse cliente. Agora mesmo, é possível alterar as informações nos campos na página da Web, mas não há nenhuma função para enviar essas atualizações ao banco de dados. Na próxima seção, você usará a função UpdateCustomer para fazer essas atualizações no banco de dados.

Atualizar o Registro no Banco de Dados

Nesta seção, você inclui uma nova função do EGL no manipulador JSF nomeada updateRecord. Em seguida, você ligará essa função ao botão que criou na página da Web. Desta maneira, ao clicar no botão na página da Web, a função updateRecord será executada e chamará a função UpdateCustomer para atualizar o registro do banco de dados. Finalmente, a função updateRecord redirecionará o navegador de volta para a página allcustomers.jsp para que você possa ver as alterações feitas no registro.
  1. No arquivo updatecustomer.egl, imediatamente antes da instrução End final, inclua a seguinte função, exatamente como mostrado. Você pode desejar usar a conclusão do código ou colar a função desta página para garantir que esteja correta.
    function updateRecord()
      CustomerLib.UpdateCustomer(customer, status);
      forward to "allcustomers";
    end
  2. Salve e feche o arquivo.

    A próxima etapa é ligar essa função ao botão na página da Web.

  3. Abra a página updatecustomer.jsp no editor. Você ainda pode ter esta página aberta nas guias do editor. Se não for possível localizá-lo ali, clique duas vezes no arquivo updatecustomer.jsp na visualização Explorador de Projetos, na pasta EGLWeb/WebContent.
  4. Na visualização Dados da Página, expanda Manipulador JSF > Ações. Esta pasta lista todas as funções no manipulador JSF, exceto as funções onPreRender() e onConstruction(). Nesse caso, essa pasta mostra a função updateRecord() que você acabou de criar.
  5. Arraste a função updateRecord() diretamente sobre o botão na página da Web rotulada "Atualizar este Registro". A aparência da página não é alterada, mas a função está agora ligada ao botão e será executada quando o botão for pressionado.
  6. Salve a página.

Este é o código completo do arquivo updatecustomer.egl. Se houver erros marcados por símbolos X em vermelho no arquivo, certifique-se de que seu código corresponda ao código nesse arquivo:Arquivo updatecustomer.egl Concluído Após a Lição 8

Aparência do Arquivo updatecustomer.egl

Testar o Site Concluído

Agora o site está pronto para teste. Agora você pode atualizar e visualizar qualquer um dos registros na tabela Cliente do banco de dados.
  1. Na visualização do Enterprise Explorer, clique com o botão direito do mouse no arquivo allcustomers.jsp e, em seguida, clique em Executar como > Executar no Servidor. A página relacionada é aberta no navegador da Web. Agora, cada sobrenome do cliente na lista é um hyperlink para a página da Web exibida por updatecustomer.jsp.
  2. Clique em um dos sobrenomes de cliente. Você é enviado para a página da Web exibida por updatecustomer.jsp e essa página da Web mostra as informações específicas da linha.
  3. Digite um novo FIRST_NAME para o registro.
  4. Digite novas informações para alguns outros campos nesta página. Não altere o campo CUSTOMER_ID.
  5. Quando terminar de digitar as novas informações, clique no botão Atualizar Este Registro.
Ao clicar no botão Atualizar Este Registro, você retorna para a página allcustomers.jsp. Observe que o registro foi alterado para mostrar o novo FIRST_NAME digitado. É possível clicar no último nome deste registro novamente para visualizar as novas informações que foram salvas no banco de dados.

Você Concluiu o Tutorial

Neste tutorial você construiu um utilitário de manutenção de arquivo em funcionamento para um arquivo do cliente, usando um banco de dados Derby de amostra. Agora é possível desenvolver esse conhecimento concluindo o tutorial Construir uma Página de Procura JSF com EGL.
< Anterior | Próximo >

Feedback