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.
Exatamente como criou seu bean na visualização Dados de Página, você criará um objeto Dados de Cliente equivalente.
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:
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á.
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.
À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.
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.
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.
Classe | Campo |
---|---|
Raiz | Nome |
Usuários | refNum |
Portfólio | usuário, porfolioName |
Posição | refNum |
Ação | Símbolo |
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.
this.eGet('quantidade')*this.eGet('ação').eGet('currentPrice')
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: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. 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.