< Anterior | Próximo >

Lição 8: Criar o Manipulador de Histórico do Cálculo

Crie uma tabela na qual seja possível clicar em uma linha para exibir um cálculo anterior.

Nesta lição, você usará o widget DataGrid para criar uma tabela. O widget DataGrid possui recursos avançados para interação e apresentação visual que o torna preferível em relação ao widget GridLayout para exibição de uma matriz de registros.

Na lição 4, você arrastou uma variável de registro para o editor para criar um widget GridLayout. Nesta lição, você arrastará uma matriz de registros para o editor, que por padrão cria um widget DataGrid.

Criar o Manipulador

  1. No pacote handlers, crie um manipulador do Rich UI denominado CalculationHistoryHandler. O Manipulador é aberto na visualização Design do editor Rich UI.
  2. Exclua o widget GridLayout padrão.
  3. Crie uma variável para reter uma matriz de registros MortgageCalculationResult.
    1. Clique com o botão direito do mouse no plano de fundo da visualização Dados do EGL e, em seguida, clique em Nova > Variável EGL.
    2. No assistente Criar uma nova Variável de Dados do EGL, na seção Criação de Tipo, selecione o registro MortgageCalculationResult, como foi feito na Lição 4.
    3. Para Inserir o nome do campo, insira o seguinte nome:
      historyResults
    4. Em Propriedades da Matriz, selecione a caixa de opção Matriz. Não especifique um tamanho.
      O assistente está configurado para criar uma matriz de registros.
    5. Clique em Concluir.
  4. Arraste a nova variável para a área Exibição no editor Rich UI. O EGL exibe o assistente Inserir Dados. Esse assistente é o mesmo assistente que você viu na Lição 4, embora com padrões diferentes porque a variável que você arrastou para o editor é uma matriz dinâmica.
  5. Faça as seguintes mudanças no assistente Inserir Dados:
    1. Em Criar Widgets para, mantenha o valor padrão de Dados para somente leitura.
    2. Desmarque a caixa de seleção do campo interest.
    3. Altere os rótulos dos campos restantes conforme a seguir:
      • Altere loanAmount para Principal.
      • Altere interestRate para Taxa.
      • Altere term para Anos.
      • Altere monthlyPayment para Pagamento.
      O assistente usa esses rótulos como cabeçalhos da coluna da grade.
    4. Desmarque a caixa de seleção Incluir suporte para formatação e validação. O assistente concluído deve parecer com a imagem a seguir:
      A página do assistente mostra os dados selecionados a serem exibidos na grade.
    5. Clique em Concluir. A página da Web parece com o seguinte.
      A grade vazia possui um cabeçalho com quatro colunas.
    Você incluirá o código no restante do manipulador de histórico do cálculo na visualização Origem.
  6. Na parte inferior do editor, clique na guia Origem.
  7. Na declaração do widget historyResults_ui DataGrid, inclua o seguinte conteúdo antes da propriedade colunas:
    selectionMode = DataGridLib.SINGLE_SELECTION,
    O valor especificado assegura que o usuário possa selecionar apenas uma linha da grade em vez de diversas linhas.
  8. Na linha após você configurar selectionMode, digite o seguinte código:
    selectionListeners ::= cellClicked,

    Você acabou de atualizar uma propriedade do listener, o que faz com que uma matriz de funções seja executada na ordem de elemento de matriz. Em particular, você anexou uma função à matriz de funções associada com a propriedade selectionListeners. Você incluirá o código da nova função posteriormente nesta lição.

    As funções do listener são executadas em resposta a uma ação do usuário, tal como um clique ou, em alguns casos, em resposta a uma chamada de função que seleciona ou limpa a seleção de uma linha ou que atualiza uma caixa de seleção.

  9. Altere as larguras padrão das colunas para que elas se ajustem na menor janela de portlet:
    • Configure a largura da coluna Principal como 80.
    • Configure a largura da coluna Taxa como 80.
    • Configure a largura da coluna Anos como 50.
    • Configure a largura da coluna Pagamento como 70.
  10. Após cada um dos valores de largura que você acabou de especificar, no mesmo bloco de valores de configuração (a área com os colchetes de chave), configure uma propriedade de alinhamento para alinhar à direita os números em cada coluna:
    , alignment = DataGridLib.ALIGN_RIGHT
    Por exemplo, a declaração para a coluna Principal agora se parece com o seguinte código:
    new DataGridColumn {name = "loanAmount", displayName =
    "Principal", width = 80,
                        alignment = DataGridLib.ALIGN_RIGHT},
  11. Inclua a propriedade formatador para três das declarações de coluna, conforme a seguir:
    1. Para a coluna Principal, consulte a função formatDollars customizada, que você gravará posteriormente neste lição:
      , formatters = [ formatDollars ]
      A declaração inteira agora se parece com o seguinte código:
      new DataGridColumn {name = "loanAmount", displayName =
      "Principal", width = 80,
      				alignment = DataGridLib.ALIGN_RIGHT, formatters = [ formatDollars ]},
    2. Inclua o seguinte código para a coluna Taxa:
      , formatters = [ DataGridFormatters.percentage ]
    3. Não é necessária nenhuma formatação especial para a coluna Anos.
    4. Inclua o seguinte código para a coluna Pagamento:
      , formatters = [ formatDollars ]
      O código agora possui o seguinte conteúdo:
      Captura instantânea do código historyResults_ui

      Em geral, a propriedade formatadores produz uma matriz de nomes da função. As funções podem ser predefinidas ou é possível gravar funções customizadas. Por exemplo, a função percentage é fornecida na biblioteca DataGridFormatters que está incluída no projeto com.ibm.egl.rui.widgets.

  12. Inclua o seguinte código para a função start:
    InfoBus.subscribe("mortgageApplication.mortgageCalculated",
    addResultRecord);
    Como antes, use InfoBus para chamar a função quando o serviço retornar um novo cálculo.
  13. Inclua a função addResultRecord após a função start():
    // Update the grid to include the latest mortgage calculation
    function addResultRecord(eventName STRING in, dataObject ANY in)
       resultRecord MortgageCalculationResult = dataObject as
    MortgageCalculationResult;
       historyResults.appendElement(resultRecord);
       historyResults_ui.data = historyResults as ANY[];
    end
    Aqui, você lança um valor de entrada no registro MortgageCalculationResult. Em seguida, você anexa os novos resultados à matriz de resultados e atualiza a propriedade dados. Essa atualização provoca a atualização do widget.
  14. Inclua a seguinte função do listener:
    // Publish an event to the InfoBus whenever the user selects an
    old calculation
    function cellClicked(myGrid DataGrid in)
       updateRec MortgageCalculationResult = myGrid.getSelection()[1] 
                                             as MortgageCalculationResult;
       InfoBus.publish("mortgageApplication.mortgageResultSelected",
    updateRec);
    end
    A função recupera a linha da grade de dados selecionada pelo usuário e fornece essa linha ao Infobus. O Infobus, por sua vez, chama uma função em qualquer manipulador que assinou o evento denominado “mortgageApplication.mortgageResultSelected.”
  15. Inclua a seguinte função para as quantias de formato monetário:
    function formatDollars(class string, value string, rowData any
    in)
       value = mortgageLib.formatMoney(value);
    end
    O valor do segundo parâmetro está disponível para o código de tempo de execução do EGL porque o modificador de parâmetro é InOut por padrão.

    Observe que você esta reutilizando a função formatMoney da biblioteca mortgageLib.

  16. Formate o arquivo novamente pressionando Ctrl+Shift+F. Em seguida, remova as marcas de erro pressionando Ctrl+Shift+O e salve o arquivo. Se erros forem vistos em seu arquivo de origem, compare seu código com o conteúdo do arquivo em Código Concluído para CalculationHistoryHandler.egl após a Lição 8.
  17. Feche o arquivo.

Ponto de Verificação da Lição

Você aprendeu como concluir as tarefas a seguir:
  • Arrastar e soltar uma matriz de registros para criar uma grade de dados.
  • Acionar um evento quando uma célula da grade de dados é clicada.
  • Formatar colunas na grade de dados.

Na próxima lição, você integrará este manipulador com o restante do aplicativo.

< Anterior | Próximo >

Feedback