< Anterior | Próximo >

Lição 6: Incluir Dados na Página

Neste exercício, você incluirá dados a partir do banco de dados incluído com esse tutorial na página da Web que criou no exercício anterior.
Esta tarefa possui as seguintes partes:

Nessa lição, você também usará o recurso de assistente de conteúdo do EGL, uma ferramenta que pode ser usada para concluir instruções de programação sem precisar digitar a instrução inteira.

Incluir uma Matriz de Registro na Visualização Dados da Página e no Manipulador JSF

  1. Se o arquivo allcustomers.jsp não estiver aberto, abra-o dando um clique duplo nele na visualização Enterprise Explorer.
  2. Localize a visualização Dados da Página, que está normalmente no canto inferior esquerdo do ambiente de trabalho. Você pode revelar a visualização Dados da Página, usando as guias, mas se você não conseguir localizar essa visualização, clique em Janela > Mostrar Visualização > Dados da Página.
  3. Localize a visualização Paleta, que está normalmente no lado direito do ambiente de trabalho. Se você não conseguir localizar essa visualização, clique em Janela > Mostrar Visualização > Básico > Paleta.
  4. Na visualização Paleta, clique no sacador de letra de câmbio EGL para abri-la.
  5. Arraste o ícone Nova Variável da visualização Paleta para a página allcustomers.jsp no editor. A janela Criar uma Nova Variável de Dados EGL é aberta.
  6. Em Seleção de Tipo, clique em Registro.
  7. Em Tipo de Registro, clique em Cliente. Dessa forma, você seleciona a parte de Registro em que cada um dos elementos da matriz serão baseados.
  8. No campo Digite o nome do campo, digite este texto:
    clientes
  9. Em Propriedades da Matriz, selecione a caixa de opção Matriz. Deixe o campo Tamanho em branco.
  10. Limpe a caixa de opção Incluir Controles para Exibir o Elemento do EGL na Página da Web.

    A janela Criar uma Nova Variável de Dados EGL é semelhante a esta:

    Janela Criar uma Nova Variável de Dados EGL

  11. Clique em OK. Nada aparece no JSP para onde você arrastou a variável. A razão é que o EGL criou a variável em um arquivo separado, chamado de Manipulador JSF, que contém código para responder a eventos no JSP. Um item representando a nova variável aparece na visualização Dados da Página em Manipulador JSF > Dados.
  12. Expanda Manipulador JSF > Dados e, em seguida, expanda customers - Customer[]. Há 12 ícones abaixo de clientes, representando os 12 campos nesse registro do banco de dados.

A visualização Dados da Página é semelhante a esta:

Visualização Dados da Página com a variável da matriz de clientes visível

Incluindo entradas na visualização Dados da Página, você também incluiu uma matriz de registros no manipulador JSF. Na próxima seção, você criará os campos relacionados na página da Web.

Exibir os Dados na Página da Web

Os dados que estão listados na visualização Dados da Página podem ser incluídos na página da Web.
  1. A partir da visualização Dados da Página, arraste a variável da matriz customers - Customer[] para o arquivo allcustomers.jsp, soltando-a abaixo do texto Lista de Todos os Clientes, nas linhas em branco incluídas no exercício anterior.

    A janela Inserir Controle de Lista é aberta. Esta janela lista todos os campos do registro do banco de dados. Você pode usar essa janela para escolher quais campos exibir na página.

  2. Em Controle de Dados para Criar, deixe o valor padrão, uma Tabela de Dados de Várias Colunas.
  3. Em Criar Controles para, clique em Exibindo um Registro Existente (somente leitura).

    Com esta opção selecionada, os dados da página são exibidos nos campos de saída de somente leitura. Se você escolher Atualizando um Registro Existente, os campos da página serão campos de entrada nos quais você pode digitar e, abaixo dos campos, estarão botões para os quais você liga ações. Você criará esse tipo de campo em outra página. Para nosso propósito, a opção Criando um Novo Registro é igual a Atualizando um Registro Existente, exceto que os botões padrão são diferentes.

  4. Em Colunas para Exibição, clique no botão Nenhum. Você cancelou a seleção de todos os campos.
  5. Selecione as caixas de opção ao lado destes campos:
    • CUSTOMERID
    • FIRSTNAME
    • LASTNAME

    A janela Inserir Controle de Lista é semelhante a esta:

    Janela Inserir Controle de Lista

  6. Clique em Concluir. Uma tabela de dados é criada em sua página com três colunas para os três campos selecionados na janela Inserir Controle de Lista.
  7. Salve a página.

A página é semelhante a este exemplo:

Aparência Atual da Página

As colunas na tabela de dados possuem títulos com base nos nomes dos campos no banco de dados. Você pode alterar esses títulos clicando neles, abrindo a visualização Propriedades e alterando o campo Valor.

Os três campos de texto na tabela de dados, que aparecem como {CUSTOMERID}, {FIRSTNAME} e {LASTNAME}, representam os locais em que as informações do banco de dados aparecerão na página.

Chamar uma Função da Biblioteca do EGL

A próxima etapa é incluir código nesta página que chama uma função na biblioteca CustomerLibrary.egl. Essa função lê os dados do banco de dados e os disponibiliza para a página.

  1. Clique com o botão direito do mouse em qualquer lugar na área de formato livre do arquivo allcustomers.jsp.
  2. No menu pop-up, clique em Editar Código da Página.

    O arquivo allcustomers.egl é aberto no editor. Este arquivo contém uma parte do Manipulador JSF. Nas próximas etapas, você inclui código nesse Manipulador JSF que recupera dados do banco de dados e os coloca na página.

  3. No arquivo allcustomers.egl, localize a linha customers Customer[0];

    Esta é a linha de código que define a variável de registro criada para exibição na página. Também é necessário definir um registro para armazenar o código de sucesso ou de falha da chamada do SQL.

  4. Em uma linha em branco imediatamente após a linha customers Customer[0];, inclua o seguinte código, exatamente como escrito:
    status StatusRec;
    Observe a linha vermelha ondulada em StatusRec, indicando que o tipo não é conhecido pelo manipulador. Será necessário incluir uma instrução de importação que diz ao manipulador onde localizar a definição de registro StatusRec. É possível fazer isso automaticamente clicando com o botão direito do mouse no espaço em branco na janela do editor e clicando em Organizar Importações.
    A linha vermelha ondulada em StatusRec e o menu suspenso mostrando a opção Organizar Importações.

    O atalho de teclado desse recurso é Ctrl+Shift+O. O EGL verifica todos os arquivos visíveis para isso, localiza as informações necessárias e inclui uma instrução de importação na parte superior do arquivo.

    Agora você possui o registro a ser recuperado do banco de dados e o registro de status SQL. A etapa final na inclusão dos dados em sua página é transmitir essas duas variáveis para a função que acessa o banco de dados. Essa função, nomeada GetCustomerListAll(), foi criada pelo assistente Aplicativo de Acesso aos Dados em uma lição anterior.

    Observe as linhas entre chaves que seguem a declaração de manipulador. Essas linhas designam valores para propriedades do Manipulador JSF. No EGL, as propriedades são pares nome-valor que modificam o comportamento de uma parte. A maioria dos tipos de partes do EGL possui uma ou mais propriedades, e cada tipo de parte pode ter propriedades diferentes. Nesse caso, o Manipulador JSF possui quatro propriedades definidas:

    onConstructionFunction = onConstruction
    A propriedade onConstructionFunction especifica uma função no Manipulador JSF que é executada na primeira vez que a página da Web (JSP) associada ao Manipulador JSF é exibida em um navegador. Nesse caso, a propriedade especifica uma função nomeada onConstruction, que é criada por padrão no Manipulador JSF. Você não trabalhará com esta função neste tutorial.
    onPreRenderFunction = onPreRender
    A propriedade onPreRenderFunction especifica uma função no Manipulador JSF que é executada toda vez que a JSP associada é exibida no navegador, incluindo quando o usuário atualiza a página ou retorna para ela depois de visualizar outra página. Nesse caso, a propriedade especifica uma função nomeada onConstruction, que é criada por padrão no Manipulador JSF. Nas próximas etapas, você incluirá o código nessa função para recuperar dados atuais do banco de dados toda vez que a página for carregada.
    view = "allcustomers.jsp"
    A propriedade view especifica a página da Web associada ao Manipulador JSF. Por padrão, a página da Web e o Manipulador JSF possuem o mesmo nome, exceto as extensões do arquivo.
    viewRootVar = viewRoot
    Você usa a variável viewRoot para obter acesso à árvore de componente do JSF. Você não usará a variável viewRoot neste tutorial. Para saber mais sobre componentes do JSF e a variável viewRoot, consulte Acesso a Árvore de Componentes.
  5. Inclua o código para chamar a função da biblioteca GetCustomerListAll() na função onPreRender(). Essa função recupera os dados do cliente do banco de dados. Nesse caso, tente usar a ferramenta do assistente de conteúdo no editor do EGL:
    1. Coloque o cursor em uma linha em branco entre function onPreRender() e end.
    2. Digite o código a seguir:
      cust
    3. Pressione Ctrl+Barra de espaço. A janela de conclusão do código é aberta com todos os comandos e recursos disponíveis do EGL começando com cust.
    4. Na janela do assistente de conteúdo, selecione a biblioteca CustomerLib realçando-a com o teclado e pressionando Enter ou dando um clique duplo nela com o mouse.

      Agora a nova linha do código lê CustomerLib.

    5. Digite um ponto após CustomerLib.
    6. Pressione Ctrl+Barra de espaço novamente. A janela de conclusão do código é aberta novamente.
    7. Na janela de conclusão do código, selecione a função GetCustomerListAll(customerArray Customer[], status StatusRec) realçando-a e pressionando Enter ou dando um clique duplo nela com o mouse. Tenha cuidado para não selecionar a função GetCustomerList(listSpec ListSpecification, listOut Customer[], status StatusRec).

      Agora, a nova linha do código lê CustomerLib.GetCustomerListAll(customerArray, status) e o argumento customerArray é realçado.

    8. Altere o argumento customerArray padrão na nova linha do código para o nome de sua variável de registro: customers.
    9. Encerre a linha do código com um ponto-e-vírgula.
    Finalmente, a nova linha do código lê:
    CustomerLib.GetCustomerListAll(customers, status);
    Além disso, observe que há uma nova instrução import próxima ao início do arquivo que se lê import eglderbydb.access.CustomerLib;. Essa linha importa a biblioteca para que não seja necessário escrever o caminho completo para a biblioteca no código, podendo se referir a ela diretamente.

    O assistente de conteúdo incluiu esta instrução import automaticamente. Se você não tivesse usado o assistente de conteúdo ou o recurso Organizar Importações para criar essa instrução import, teria de especificar o local explícito da biblioteca, qualificando o nome da biblioteca com os seguintes nomes: eglderbydb.access.CustomerLib.

  6. Salve o arquivo.
O arquivo allcustomers.egl agora é semelhante ao seguinte exemplo:
Código do Arquivo allcustomers.egl

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

Testar a Página

Agora a página está pronta para ser executada no servidor. Siga estas etapas para testar e ver como os dados do banco de dados aparecem na página.

Antes de prosseguir, tome as seguintes precauções:
  1. Salve os dois arquivos allcustomers.egl e allcustomers.jsp, se ainda não tiver feito isso e, em seguida, feche-os.
  2. Certifique-se de que o servidor de aplicativos seja iniciado e sincronizado.
  1. Na visualização do Enterprise Explorer, clique com o botão direito do mouse no projeto EGLWeb e, em seguida, clique em Gerar.
  2. Na visualização do Enterprise Explorer, clique com o botão direito do mouse no arquivo allcustomers.jsp, e não no arquivo allcustomers.egl.
  3. No menu pop-up, clique em Executar Como > Executar no Servidor.

    Como na lição anterior, a página da Web é aberta em um navegador da Web dentro do ambiente de trabalho. Desta vez, os dados dinâmicos aparecem na página. Se você não visualizar os dados dinâmicos, clique no ícone atualizar próximo à barra de endereço. A página é semelhante a esta:

    Aparência Atual da Página allcustomers.jsp

Na próxima lição, você criará uma página de detalhes para mostrar todos os campos em um registro do cliente individual.
< Anterior | Próximo >

Feedback