< Anterior | Próximo >

Lição 6: Criar o Manipulador de Resultados do Cálculo

O próximo manipulador que você criará, CalculationResultsHandler, cria um gráfico de setores circulares para ilustrar detalhes que são emitidos pela lógica anteriormente criada, MortgageCalculatorHandler.

O código que funciona como uma intermediário entre os dois manipuladores é um Infobus, que é uma biblioteca do EGL no projeto com.ibm.egl.rui.

O Infobus trabalha da seguinte maneira:
  • Um manipulador, como o CalculationResultsHandler, subscreve-se a um evento de um nome especificado. No momento da assinatura, o manipulador também fornece o nome de uma função que receberá os dados que o evento especificado ocorrer. Como um resultado dessa assinatura, o Infobus registra a função, mantendo os detalhes necessários para chamar a função posteriormente.
  • No momento certo, o mesmo ou um manipulador diferente publica o evento. Esse manipulador especifica o nome do evento e os dados específicos do evento e direciona o Infobus para chamar a função registrada.

Você começa essa lição trabalhando com a segunda dessas duas etapas. Atualize o manipulador MortgageCalculatorHandler gravado anteriormente para chamar a função publish do Infobus quando um novo cálculo for retornado do serviço remoto. Em seguida, assegure-se de que o manipulador CalculationResultsHandler tenha sido inscrito no evento.

A ação publicar-e-assinar torna possível a exibição do gráfico de setores circulares.

Publicar os Resultados do Serviço

  1. Localize a função displayResults() que foi criada na lição anterior. Inclua a seguinte linha antes da instrução end:
    InfoBus.publish("mortgageApplication.mortgageCalculated",
    retResult);
    O primeiro argumento é o nome do evento e o segundo é o registro que está sendo passado para as funções que estão registradas para esse evento. Chame novamente a estrutura desse registro se ela estiver conforme a seguir:
    record MortgageCalculationResult
       // user input
       loanAmount money;
       interestRate decimal(10, 8);
       term int;
    
       // calculated fields
       monthlyPayment money;
       interest money;
    end

    Uma marca de erro é exibida, pois a biblioteca Infobus não está sendo importada. Para incluir a instrução de importação requerida, pressione Ctrl+Shift+O. Para remover a marca de erro, salve o arquivo.

    A função displayResults() agora se parece com o seguinte:
    function displayResults(retResult MortgageCalculationResult in)
       paymentLabel.text = MortgageLib.formatMoney(retResult.monthlyPayment as STRING);
       inputRec_form.publish();
       hideProcessImage();
       InfoBus.publish("mortgageApplication.mortgageCalculated",
    retResult);
    	end

    Como antes, este código mostra a quantia de pagamento no campo pagamento e usa o mecanismo do MVC do Rich UI para publicar os resultados do cálculo no registro retResult. A nova instrução envolve um tipo diferente de publicação, tornando o registro disponível para qualquer widget que se subscreva ao evento mortgageApplication.mortgageCalculated.

    Nota: Os nomes de evento do Infobus fazem distinção entre maiúsculas e minúsculas. Por exemplo, “mortgageApplication” é diferente de “MortgageApplication.”
  2. Salve e feche o arquivo.

Criar o Manipulador CalculationResultsHandler

  1. No projeto MortgageUIProject, clique com o botão direito do mouse no pacote handlers e clique em Novo > Manipulador do Rich UI. Essas ações asseguram que a página Novo Manipulador do EGL Rich UI fará referência ao pacote.
  2. Especifique o nome do arquivo de origem como CalculationResultsHandler e clique em Concluir. O manipulador é aberto na visualização Design do editor Rich UI.
  3. Como foi feito quando você incluiu o código da calculadora, reduza o tamanho do widget GridLayout inicial para uma única célula. Na página Geral da visualização Propriedades, altere a propriedade linhas para 1 e a propriedade colunas para 1.
  4. Arraste um widget PieChart a partir da gaveta Visualização da paleta para uma única célula do layout de grade e forneça ao widget o seguinte nome:
    interestPieChart
    O EGL exibe um gráfico de setores circulares padrão.
    O gráfico de setores circulares padrão mostra modelos de carros.
  5. Na parte inferior do editor, clique na guia Origem.
  6. Na declaração do widget interestPieChart, altere a propriedade de altura para 250.
  7. São necessárias apenas duas seções no gráfico de setores circulares. Na declaração de interestPieChart, no campo data, substitua as quatro linhas que declaram registros PieChartData. A seguir está o novo código:
    new PieChartData{ y=1, text="Principal", 	color="#99ccbb"},
    new PieChartData{ y=0, text="Interest", 		color="#888855"}
    Para calcular quanto de um gráfico de setores circulares é usado por um determinado registro, divida o valor do campo y para esse registro pela soma dos valores do campo y. Neste caso, a divisão é 1/1 e a exibição inicial mostra a principal hipoteca em 100%. A exibição no momento do desenvolvimento é apenas um marcador até que o aplicativo manipule o primeiro cálculo padrão no tempo de execução.
  8. Subscreva-se ao evento do Infobus mencionado anteriormente incluindo a seguinte linha na função start:
    InfoBus.subscribe("mortgageApplication.mortgageCalculated",
    displayChart);
    Este código assegura que o Infobus chama a função displayChart sempre que o evento especificado ocorrer. A próxima etapa removerá as marcas de erro.
  9. Após a função start, inclua a função displayChart conforme a seguir e, em seguida, organize as instruções de importação digitando Ctrl+Shift+O:
    function displayChart(eventName STRING in, dataObject ANY in)
       localPieData PieChartData[2];
    
       resultRecord MortgageCalculationResult = 
          dataObject as MortgageCalculationResult;
       localPieData = interestPieChart.data;
       localPieData[1].y = resultRecord.loanAmount;
       localPieData[2].y = resultRecord.interest;
       interestPieChart.data = localPieData;
    end
    Quando o evento ocorre, a função displayChart recebe os dados de entrada no parâmetro dataObject. O uso de ANY como o tipo de parâmetro assegura que seja possível usar o mecanismo do Infobus para transferir qualquer tipo de registro.
    Em seguida, a função age da seguinte maneira:
    • Cria a matriz localPieData, que é do tipo PieChartData[], como é apropriado para a propriedade dados do gráfico de setores circulares.
    • Designa o valor recebido para um registro do tipo MortgageCalculationResult, em uma instrução que lança o segundo parâmetro de entrada para o tipo de dados que é apropriado para seu uso do Infobus:
      resultRecord MortgageCalculationResult = 
         dataObject as MortgageCalculationResult;
    • Designa a propriedade dados do gráfico de setores circulares, incluindo detalhe de cor, para a nova matriz localPieData.
    • Designa a quantia de empréstimo recebida e o valor dos juros para essa matriz.
    • Força a atualização do gráfico de setores circulares atualizando sua propriedade dados. Especificamente, designe a matriz localPieData para essa propriedade.
  10. 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 CalculationResultsHandler.egl após a Lição 6.

Testar o Gráfico de Setores Circulares

  1. Vá para a exibição Visualização. O EGL exibe um gráfico de setores circulares padrão mostrando 100% do principal.
    O círculo inteiro é aqua e mostra a palavra "Principal" em branco.
  2. Feche o arquivo.

Ponto de Verificação da Lição

Você aprendeu como concluir as tarefas a seguir:
  • Usar a biblioteca do InfoBus para passar informações entre manipuladores.
  • Criar um gráfico de setores circulares.

Na próxima lição, você criará o manipulador principal, que usa os outros.

< Anterior | Próximo >

Feedback