Exercício 2.3: Criando e Configurando Dados do Lado Cliente

Antes de iniciar, você precisa concluir o Exercício 2.2: Incluindo Dados do Lado do Servidor.

Neste exercício, você aprenderá a incluir dados do lado cliente, que consiste em criar um objeto de dados do lado cliente para uma página (com base em um bean do lado do servidor criado anteriormente) e configurar o objeto de dados, conforme necessário.

Criar um Objeto de Dados do Lado Cliente

Exatamente como criou seu bean na visualização Dados de Página, você criará um objeto Dados de Cliente equivalente.

  1. Assegure-se de que o arquivo tutorial.jsp esteja aberto.
  2. Na visualização Dados de Cliente (próximo à guia Dados da Página), clique com o botão direito do mouse em um espaço vazio e selecione Novo > Dados de Cliente.
  3. Selecione o bean raiz na seção Modelo de Dados do Servidor e clique em OK.

Neste ponto, você verá o bean raiz na visualização Dados de Cliente. A única diferença importante entre o bean Dados de Cliente e o bean Dados de Página refere-se ao campo purchaseDate na seção Usuários/Portfólios/Posições. Com dados do lado cliente, as Datas são tratadas como tipo básicos, como Cadeias.

Nota: Se um modelo tiver uma propriedade do tipo BigDecimal, os números decimais de precisão arbitrária não são suportados no lado cliente e são rebaixados para duplo. Isso significa que pode ocorrer perda de precisão nos dados se você utilizar valores BigDecimal.

Durante a criação de objetos de dados do lado cliente, as ferramentas geram vários arquivos e classes em seu projeto. Em seu pacote de origem raiz, um arquivo de propriedades denominado ‘OdysseyBrowserFramework.properties’ será criado, caso ainda não exista. No pacote com.ibm.dynwdo4jsmediators, dois arquivos são criados e o arquivo de propriedades é modificado para registrar estes dois arquivos para o projeto:

O pacote com.ibm.dynwdo4jsmediators.root contém arquivos mediadores e diffhandler especialmente gerados:

Visualização Dados do Cliente com Bean

Configurar o Objeto de Dados do Lado Cliente

Nesta seção, você aprenderá a configurar dados do lado cliente para:

Para ativar a ferramenta Configurar Dados de Cliente, que você utilizará no restante deste exercício, localize a visualização Dados de Cliente. Clique com o botão direito do mouse no nó raiz e escolha Configurar. A ferramenta Configurar Dados de Cliente aparecerá.

Ferramenta Configurar Cliente

Sobre Nome de Modelo

Por padrão, quando você cria um bean, o nome do bean é utilizado internamente para representar o nome do modelo à medida que é exportado para o navegador. Entretanto, isso nem sempre pode ser desejável para seu aplicativo da Web. Em particular, em um ambiente do portal, você pode querer especificar um nome bem conhecido para que vários portlets possam realmente compartilhar os dados do modelo no navegador. Por outro lado, você pode querer garantir que o modelo seja apenas para seu portlet, neste caso deseja fornecer a ele um nome específico apenas para seu portlet.

Em qualquer situação, certifique-se de que o nome do modelo não seja comum. Por exemplo, nomeá-lo como Raiz seria problemático, uma vez que outros desenvolvedores poderiam utilizar o mesmo nome. No navegador, há um espaço de nomes simples; portanto, haveria conflito entre dois modelos com o mesmo nome. Por essa razão, é geralmente recomendável utilizar nomes complexos que reflitam nomes de classes no Java. Por exemplo, com_ibm_myApp_myModel.

Para este tutorial, você pode deixar o nome do modelo como padrão.

Removendo a Estrutura de Dados do Lado Cliente

Às vezes você recebe muitos dados do servidor; pode haver classes ou atributos que não precisem ser enviados para o cliente. O objeto Dados de Cliente pode ser configurado de modo que classes ou atributos desnecessários possam ser removidos.

  1. Na guia Básico, expanda raiz (Raiz) na janela Modelo de Dados de Cliente.
  2. Desmarque as caixas de opções na frente dos nós stocks (Stock[]) e placeHolderStock (Ações) sob o nó raiz.
  3. Desmarque as caixas de opções na frente dos nós portfólio (Portfólio) e usuário (Usuário) sob o nó raiz/usuários/portfólio/posições. Esses ponteiros de retorno são geralmente necessários para aprimorar o desempenho ao programar com estruturas de dados complexas; entretanto, para a finalidade neste tutorial, eles são utilizados, na realidade, quando criam uma estrutura recursiva que complica a exibição final dos dados na visualização Dados de Cliente.

Nota: Se uma determinada classe for utilizada várias vezes em uma determinada estrutura de dados, a personalização de seus campos em algum lugar refletirá essas alterações em todos os lugares em que a classe for utilizada. Para testar isso, ative a propriedade raiz.usuários.portfólios.usuário e selecione algumas caixas de opções. Você verá que esses mesmos campos são automaticamente atualizados na referência à classe Usuário sob Raiz.

Definindo os Atributos Principais

Você pode configurar como a identidade de seu objeto é reconhecida. Se você clicar em uma propriedade regular de uma classe, por exemplo, a propriedade de nome da raiz, aparecerá uma caixa de opções denominada Principal selecionada.

Considerando duas instâncias da mesma classe, como você pode saber se são ou não iguais? Se você tiver dois usuários, como pode saber se são iguais ou diferentes? Você não pode fazer a distinção, a menos que saiba quais partes do Usuário tornam uma instância exclusiva: sua chave principal. Aprender Mais sobre Definição de Chaves Principais.

  1. Expanda o nó usuários para ver quatro propriedades: refNum, lastName, id e portfólios. Da maneira como essa classe foi definida, assegura-se a exclusividade do campo refNum para dois usuários diferentes, portanto esse é o único campo que precisa ser marcado como Principal. Se você consultar os outros campos, verá que refNum, lastName e ID foram marcados como Principal. Por padrão, qualquer campo que não seja uma lista ou matriz é automaticamente marcado como principal. Não há como o sistema reconhecer quais campos são, ou não, principais.
  2. Você deve indicar quais campos são principais e quais não são. Embora isso não seja intrinsecamente necessário (os padrões funcionarão), considere seriamente certificar-se de que os campos principais estejam adequadamente definidos em seu modelo. Percorra a estrutura de dados e certifique-se de que apenas os campos listados a seguir estejam marcados como principais para este tutorial:
    Classe Campo
    Raiz Nome
    Usuários refNum
    Portfólio usuário, porfolioName
    Posição refNum
    Ação Símbolo

Incluindo Atributo de Cliente

Você utilizará a grade de dados para exibir o conteúdo de um determinado portfólio (suas posições). De acordo com a estrutura de dados, a classe Posição possui oito atributos: preço (o preço de compra), quantidade, refNum, symbol, purchaseDate, ação (a ação comprada), portfólio (o portfólio que possui essa posição) e usuário (o proprietário da posição).

Está faltando algo: uma propriedade valor que será igual à quantidade multiplicada pelo preço atual da ação.Uma maneira de fornecer essa informação seria alterar os Java beans e deixar que o produto seja computado aqui. Entretanto, isso é problemático porque o valor computado seria uma captura instantânea no tempo: se a quantidade fosse alterada no navegador, o valor computado não refletiria a alteração. Para evitar esse procedimento, utilize um atributo de cliente, que é uma expressão JavaScript arbitrária executada no contexto do objeto para o qual ela foi criada.

  1. Na caixa de diálogo Configurar Dados de Cliente, selecione o nó posições sob usuários e portfólios.
  2. Clique em Incluir Atributo de Cliente. Uma nova entrada é criada na lista de atributos para a classe Posição.
  3. Selecione flutuante como o tipo e nomeie o valor do campo porque você armazenará um valor em dólar nesse local.
  4. Digite a seguinte expressão na área de texto Expressão:
    this.eGet('quantidade')*this.eGet('ação').eGet('currentPrice')
    Campos Corretos para Incluir Atributo

    Essa expressão utiliza o objeto SDO no navegador e o método eGet pode ser chamado com uma cadeia indicando o atributo a ser obtido. Se o atributo for uma lista ou matriz nos dados do lado do servidor, eGet retornará uma matriz JavaScript no navegador. Portanto, o campo quantidade desse objeto posição é multiplicado pelo campo currentPrice do objeto ação apontado por esse objeto posição. No navegador, essa expressão será avaliada toda vez que o novo atributo for solicitado e, portanto, será sincronizada com os valores quantidade e currentPrice.

    Qualquer JavaScript válido pode ser digitado na área de texto Expressão. Por exemplo, você poderia ter uma função que retorna uma porcentagem para dois valores. Você também poderia incluir um campo que mostra o valor total do portfólio inteiro, iterando em cada posição e acumulando um total grande. É possível chamar o que houver, incluindo a função JavaScript personalizada que você gravou. Há apenas duas regras a serem observadas:
    1. O ponteiro this refere-se a uma instância da classe para a qual o atributo foi criado. A expressão deve retornar um valor compatível com o tipo especificado para o atributo.
    2. Se o atributo foi definido como um inteiro e uma expressão retornar uma Cadeia que não pode ser convertida em um inteiro, você obterá uma exceção de tempo de execução.
    Nota: Verifique se sua expressão não é dependente de um outro atributo de cliente que também tenha uma expressão com uma dependência nesse atributo. Essa dependência causa um loop infinito e você receberá uma exceção de estouro de pilha no navegador. Deve-se aplicar essa mesma precaução se você estava gravando qualquer código Java.

Sobre a Guia Avançado

Embora a guia Avançado não seja utilizada neste tutorial, é conveniente entender os diversos botões que ela contém. O primeiro, Carregar Origem EMap, permite acessar um arquivo de chave no sistema que configura como os dados do lado do servidor são enviados para o navegador e retornados para processamento Dif. O configurador fornece uma interface para configurar as informações nesse arquivo. Esse arquivo deverá ser alterado apenas se você for um usuário avançado.

Utilize o segundo botão, Regenerar a partir de dados do lado do servidor, para atualizar as informações de dados de cliente se os dados do servidor forem alterados. Neste ponto, o objeto Dados de Cliente não reflete as alterações que possam ter ocorrido em suas origens de dados do servidor; portanto, é necessário regenerar os recursos internos, por exemplo, para capturar os novos campos.

O terceiro botão, Remover do Projeto, permite remover todos os artefatos dos dados de cliente de seu projeto. Isso é útil durante o teste ou nos primeiros estágios de desenvolvimento quando sua página e seus dados não foram finalizados. Se você selecionar um nó na visualização Dados de Cliente para ser removido, estará removendo apenas a entrada para essa página, mas todos os artefatos gerados na primeira vez em que o elemento de dados de cliente foi criado ainda permanecerão no projeto. Se você desejar removê-los, deverá fazer isso individualmente.

Agora você está pronto para iniciar o Exercício 2.4: Ligando Dados e Personalizando a Exibição.

Termos de Utilização | Feedback
(C) Copyright IBM Corporation 2000, 2005. Todos os Direitos Reservados.