< Anterior | Próximo >

Lição 5: Incluir o Código para o Manipulador da Calculadora de Hipoteca

Inclua funções no manipulador que você criou na lição anterior.

Nesta lição, você trabalhará diretamente com o código de origem do EGL, iniciando com a gravação de uma biblioteca do EGL. Uma biblioteca pode conter constantes, variáveis e funções, as quais podem ser acessadas por diferentes unidades de lógica no aplicativo. Uma característica importante de uma biblioteca é que as mudanças em uma variável estão disponíveis para qualquer unidade de lógica que acessa a biblioteca. Entretanto, o foco neste tutorial está nas funções, que são colocadas em uma biblioteca para evitar que a mesma lógica amplamente usada tenha de ser mantida em diversos locais.

Para tratar alguns problemas comuns, é possível usar a estrutura do Model View Controller (MVC) do EGL, que é fornecida pelo projeto com.ibm.egl.rui. Embora as iniciais "MVC" normalmente descreva os diferentes componentes de um aplicativo corporativo, a estrutura do MVC no Rich UI refere-se apenas aos componentes de uma interface com o usuário. Aqui, o modelo é um campo de registro ou variável, a visualização é um widget e o controlador é uma declaração que controla a transferência dos dados entre o modelo e a visualização. A transferência de dados algumas vezes é automática e algumas vezes é uma resposta para uma chamada de função, conforme mostrado posteriormente.

As ações de arrastar e soltar da lição anterior incluíram não apenas declarações do controlador, mas um gerenciador de formulário, que é uma declaração que permite o tratamento de outras declarações como componentes de um formulário único. Um gerenciador de formulário inclui um conjunto de campos de formulário, cada um dos quais pode incluir um rótulo, um controlador e um campo de erro.

Criar uma Biblioteca do EGL

Criar uma biblioteca do EGL para reter uma função que fornece formato da moeda dos EUA para uma variável DINHEIRO. Uma versão mais complexa pode permitir símbolos monetários e separadores locais e tipos diferentes de entrada. Entretanto, para este tutorial, uma versão simples será suficiente.
  1. Selecione MortgageUIProject no Explorador de Projetos.
    MortgageUIProject está selecionado.
  2. Clique no botão Novo Arquivo de Origem EGL.
    O botão Novo Arquivo de Origem EGL é o segundo em um grupo de quatro.
  3. Na janela Nova parte do EGL, especifique o pacote conforme a seguir:
    libraries
  4. Nomeie o arquivo conforme a seguir:
    MortgageLib
  5. Clique em Concluir. O novo arquivo de origem é aberto no editor EGL.
  6. Remova o comentário do arquivo e inclua o código a seguir:
    library MortgageLib 
       function formatMoney(amount STRING in) returns(STRING)
          len int = strlib.characterLen(amount);
          index int = len - 6; // 2 dec places + decimal + 3 chars before
    separator
          while(index > 0)
             amount = amount[1 : index] :: "," :: amount[index + 1 : len];
             index -= 3;
             len += 1;
          end
          return("$" :: amount);
       end
    end

    Conforme mostrado, você especifica o nome da biblioteca e integra uma nova função, formatMoney(), que inclui vírgulas e um sinal de dólar em uma sequência de entrada. A suposição aqui é que o campo de entrada contenha um valor monetário com duas casas decimais.

  7. Salve o arquivo. A biblioteca é gerada automaticamente assim que o arquivo é salvo.
A biblioteca MortgageLib está pronta para uso.

Alterar o Código no Manipulador

Antes de incluir novas funções, você deve fazer algumas pequenas mudanças:
  1. Clique na guia Origem para MortgageCalculatorHandler.
  2. Configure valores padrão para os campos Quantia de empréstimo e Juros. Acesse a linha em que o registro inputRec está declarado e inclua as duas designações na declaração, conforme mostrado a seguir:
    inputRec MortgageCalculationResult 
       {term = 30, loanAmount=180000, interestRate = 5.2};
    Salve o arquivo e clique na guia Visualização. A interface agora mostra os valores padrão, incluindo o valor especificado na lição anterior, para o campo de prazo:
    A interface agora mostra uma quantia de empréstimo e taxa de juros.
  3. Na primeira linha do manipulador, antes da declaração do widget ui, declare uma variável que o código usa para acessar o serviço dedicado:
    mortService MortgageCalculationService{@dedicatedService};
    A declaração mortService vem antes da declaração de ui GridLayout.
  4. Passe o cursor do mouse sobre o x vermelho ou o sublinhado vermelho para saber se a causa do erro é a seguinte: “O tipo MortgageCalculationService não pode ser resolvido”. O erro pode ser confuso, uma vez que você configurou anteriormente o caminho de construção do EGL para o projeto no qual você está trabalhando para que o projeto possa acessar aquele que contém o serviço. O problema aqui é que o arquivo de origem não está importando a parte do Serviço desse outro projeto.
  5. Para remover o erro, digite a seguinte instrução de importação após as outras instruções de importação no arquivo:
    import services.MortgageCalculationService;
    Após poucos segundos, as marcas de erro são removidas mesmo que você não tenha salvado o arquivo.
  6. Em muitos casos, o ambiente de desenvolvimento pode inserir uma instrução de importação ausente para você. Para visualizar esta conveniência em ação, remova o instrução de importação que você acabou de digitar. Ao ver as marcas de erro retorne e digite Ctrl+Shift+O para inserir novamente a instrução.
  7. Salve o arquivo.

Concluir a Função inputRec_form_Submit

O EGL criou uma função stub inputRec_form_Submit. A intenção é que a função valide todos os campos no formulário e os “confirme”. A confirmação é parte da implementação do MVC e significa que o registro inputRec é atualizado com os valores nos widgets.

Você incluirá o código para chamar duas outras funções. A primeira função torna a imagem processImage visível e, dessa forma, avisa ao usuário que o aplicativo está trabalhando. A segunda função chama o serviço para calcular o pagamento de hipoteca.

Para concluir a função inputRec_form_Submit, atualize a instrução if para que seja lida conforme a seguir:
if(inputRec_form.isValid())
   inputRec_form.commit();
   showProcessImage();
   calculateMortgage();
else
   errorLabel.text = "Input form validation failed.";
end
Não se preocupe com o formato do código; uma seção posterior trata esse problema. Além disso, as próximas seções removem as marcas de erro que são mostradas a seguir:
A chamada de função inputRec_form_Submit() completa.

Incluir a Função showProcessImage

A função showProcessImage é necessária para tornar a imagem processImage visível. Para fornecer o código para a função no editor Rich UI, inclua as seguintes linhas antes da instrução end final no manipulador:
function showProcessImage()
   processImage.visible = yes;
end
Nota: A propriedade visível faz parte de qualquer widget Image. O valor inicial desta propriedade foi alterado na lição anterior, quando você desmarcou a caixa de seleção visível para a imagem processImage.

Incluir a Função hideProcessImage

A função hideProcessImage é necessária para ocultar a imagem quando necessário. Inclua as seguintes linhas após a função showProcessImage:
function
hideProcessImage()
   processImage.visible = no;
end

Incluir a Função calculateMortgage

A função calculateMortgage chama um serviço para executar um cálculo de hipoteca com base nos valores exibidos na IU. Para fornecer o código para a função no editor Rich UI, inclua as seguintes linhas após a função hideProcessImage e ignore as marcas de erro:
function calculateMortgage()
   call mortService.amortize(inputRec) 
      returning to displayResults 
      onException handleException;
end	
Nota:
  1. A instrução de chamada no Rich UI é uma variação usada apenas para acessar os serviços. A comunicação em tempo de execução neste caso é assíncrona, o que significa que o usuário pode continuar a interagir com o manipulador enquanto o serviço estiver respondendo.
  2. Um solicitante de serviço geralmente passa um registro para o serviço que está sendo acessado. Neste tutorial, o manipulador passa a variável inputRec global e recebe, no mesmo registro, o valor retornado do serviço.

Incluir a Função displayResults

A função displayResults é uma função de retorno de chamada, que é executada imediatamente após o serviço retornar com êxito os dados de negócios para o manipulador do Rich UI. Para fornecer o código para a função, inclua as seguintes linhas após a função calculateMortgage:
function
displayResults(retResult MortgageCalculationResult in)
   paymentLabel.text = MortgageLib.formatMoney(retResult.monthlyPayment as
STRING);
   inputRec_form.publish();
   hideProcessImage();
end
Nota:
  • Use a função formatMoney a partir da nova parte da Biblioteca do EGL para incluir vírgulas e um sinal de dólar na quantia de pagamento. Como a variável paymentLabel foi criada sem envolver a estrutura do MVC, você mesmo deve manipular a formatação.
  • Como observado anteriormente, um gerenciador de formulário inclui campos de formulário que, por sua vez, podem incluir controladores e outras declarações. A função publish está disponível em qualquer gerenciador de formulário e chama as funções publish específicas do controlador, uma de cada vez, para executar conforme a seguir:
    1. Recuperar os dados da variável que funciona como o modelo do controlador.
    2. Formatar esses dados.
    3. Gravar os dados formatados no widget que funciona como a visualização do controlador.

    Dada essa sequência de eventos, a função publish de nível de formulário é frequentemente chamada conforme a seguir: em uma função de retorno de chamada que recebe dados de um serviço.

Gravar o Manipulador de Exceções

Se a chamada de serviço resulta em um erro, a função de retorno de chamada usual não é chamada. Entretanto, se você planejou o uso de um manipulador de exceções, como neste caso, essa função será chamada.

Faça conforme a seguir:

  1. Após a função displayResults, inclua o seguinte código:
    	// catch-all exception handler
    	private function handleException(ae AnyException in)
    		errorLabel.text = "Error calling service: " + ae.message;
    	end
    Funções com o modificador particular podem apenas ser chamadas pela parte do EGL em que a função reside; neste caso, pelo manipulador de integração. A função coloca o texto no widget errorLabel criado na lição anterior.
  2. Atualize a função calculateMortgage imediatamente antes da instrução de chamada, conforme a seguir:
    errorLabel.text = "";
    Desta forma, o campo errorLabel é limpo antes de você chamar o serviço que executa um cálculo de hipoteca. Se esse código não for incluído, um erro, como a perda temporária da conexão do serviço, exibirá uma mensagem de erro, mesmo após o serviço ser chamado com êxito.
  3. Clique com o botão direito do mouse em um espaço vazio no editor. Clique em Organizar importações. O EGL inclui as instruções de importação para todos os símbolos indefinidos possíveis.
  4. 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 MortgageCalculatorHandler.egl após a Lição 5.
  5. Após resolver qualquer erro, formate novamente sua entrada pressionando Ctrl+Shift+F e salve o arquivo novamente.

Testar a Calculadora

Agora você está pronto para testar a calculadora.

  1. Vá para a exibição Visualização clicando na guia Visualização na parte inferior do editor. É possível testar completamente o aplicativo na exibição Visualização, incluindo a interface com o usuário e serviços, se os serviços foram implementados em um servidor ou se estão disponíveis apenas como código de origem do EGL. O EGL exibe os valores padrão inseridos durante a criação do manipulador.
  2. Clique em Calcular. O EGL exibe o pagamento mensal.
    A quantia do pagamento mensal aparece no campo Pagamento.
  3. Digite uma letra no primeiro campo. Como é verdade para vários widgets EGL Dojo, uma marca vermelha é exibida tão logo ocorra um erro, e uma mensagem de erro é exibida em uma dica de ferramenta adjacente.
    A quantia do pagamento mensal aparece no campo Pagamento.

    Quando o widget perde o foco, a dica de ferramenta é ocultada, e quando o widget obtém o foco novamente, a dica de ferramenta é mostrada.

  4. Altere os valores de qualquer um dos três campos e clique em Calcular novamente. O campo Pagamento é alterado adequadamente.

Ponto de Verificação da Lição

Você aprendeu como concluir as tarefas a seguir:
  • Trabalhar na guia Origem do editor Rich UI
  • Criar uma parte da Biblioteca do EGL para funções reutilizáveis
  • Usar a estrutura do Model-View-Controller do EGL
  • Chamar um Serviço do EGL a partir de uma função
  • Capturar e tratar erros

Na próxima lição, você criará um gráfico de setores circulares para comparar o total principal com os juros totais em um cálculo determinado.

< Anterior | Próximo >

Feedback