< Anterior | Próximo >

Lição 7: Criar o Manipulador Principal do Rich UI

A página principal usa o widget de portal do EGL para gerenciar a comunicação entre manipuladores diferentes.
Conforme observado em uma lição anterior, o Rich UI fornece um novo significado para a noção duradoura do Model View Controller (MVC), que é redefinida especificamente para lógica que é executada no navegador. De forma semelhante, o Rich UI fornece um novo significado para as palavras portal e portlet.

Em geral, um portal é uma página da Web que controla componentes de IU independentes chamados portlets. No uso tradicional desses termos, um portal é um código do lado do servidor. Os portlets integrados pelo portal são fragmentos da página da Web, sendo que cada um deles pode ser armazenado em um local remoto diferente. A página da Web é construída no servidor em que o código do portal reside e a página da Web completa é transferida do servidor para o navegador.

Em contrapartida, um portal do Rich UI é um widget que é executado no navegador e que faz referência a um conjunto de widgets de portlet, cada um deles fazendo referência a um manipulador do Rich UI. As próximas seções demonstram como incluir o código em um portal e portlets no Rich UI.

Criar o Manipulador MainHandler

  1. Crie um novo Manipulador do Rich UI no pacote handlers do projeto MortgageUIProject, como foi feito na lição anterior. O nome do manipulador neste caso é MainHandler. O Manipulador é aberto na visualização Design do editor Rich UI.
  2. Se você não visualizar a gaveta Amostras na visualização da Paleta, clique no botão Atualizar paleta à esquerda da visualização da Paleta.
    O botão Atualizar paleta
  3. Selecione o widget GridLayout inicial que foi criado para o manipulador. Certifique-se de que o widget inteiro esteja cercado pela linha pontilhada.
    O widget GridLayout inicial está selecionado.
  4. Pressione a tecla Delete para remover o widget.
  5. A partir da gaveta Amostras da paleta, arraste um widget de portal para o editor e forneça a ele o seguinte nome:
    mortgagePortal
  6. Na parte inferior do editor, clique na guia Origem.
  7. Na declaração do mortgagePortal, altere o número de colunas para 2 e configure as larguras da coluna como 350 e 650. O conteúdo do arquivo fica conforme mostrado a seguir:
  8. Após a declaração do mortgagePortal, pule uma linha e inclua as seguintes declarações:
    	calculatorHandler MortgageCalculatorHandler{};
    	resultsHandler CalculationResultsHandler{};
    Essas instruções declaram duas variáveis, cada uma delas com base em uma parte do Manipulador; neste caso, uma parte do Manipulador desenvolvida neste tutorial.
  9. Pule uma linha e inclua o código a seguir:
    calculatorPortlet Portlet{children = [calculatorHandler.ui],
       title = "Calculator"};
    resultsPortlet Portlet{children = [resultsHandler.ui],
       title = "Results", canMove = TRUE, canMinimize = TRUE};
    Cada nova variável do portlet é declarada com uma referência para a IU inicial no manipulador integrado.
  10. Para remover marcas de erro, pressione Ctrl+Shift+O.
  11. Inclua o código para a função start conforme a seguir:
    function start()
       mortgagePortal.addPortlet(calculatorPortlet, 1);
       mortgagePortal.addPortlet(resultsPortlet, 1);
    
       // Subscribe to calculation events 
       InfoBus.subscribe("mortgageApplication.mortgageCalculated",
    restorePortlets);
    
       // Initial state is minimized
       resultsPortlet.minimize();
    end	
    O código age da seguinte maneira:
    • Inclui os portlets declarados anteriormente no portal: um para mostrar a calculadora e outro para mostrar o gráfico de setores circulares.
    • Assegura que o manipulador principal está inscrito no mesmo evento do CalculationResultsHandler, neste caso, para garantir que a função restorePortlets seja executada quando o serviço remoto retorna um cálculo de hipoteca.
    • Minimiza o segundo portlet para que no tempo de execução, o gráfico de setores circulares não esteja visível inicialmente.
  12. Após a função start, inclua a função que será chamada quando o serviço retornar um cálculo:
    function restorePortlets(eventName STRING in, dataObject ANY
    in)
       if(resultsPortlet.isMinimized())
          resultsPortlet.restore();
       end
    end
    A função restore específica do portlet faz com que o gráfico de setores circulares seja exibido.
  13. Para remover as marcas de erro, pressione 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 MainHandler.egl após a Lição 7.

Testar o Portal

Teste o portal principal para certificar-se de que o portlet de resultados recebe mudanças a partir do portlet de cálculo.
  1. Na parte inferior do editor, clique em Visualizar. O EGL exibe o manipulador principal, em que o portal está declarado. O manipulador exibe os dois portlets subordinados.
    O portlet de Calculadora mostra valores padrão e o portlet de Resultados é minimizado.
  2. Clique em Calcular. A imagem animada indica que o processamento está em andamento. Quando o cálculo é concluído, o gráfico de setores circulares é exibido.
    O portlet de Resultados restaurado mostra o gráfico de setores circulares.
  3. Mova seu cursor sobre uma das seções do gráfico de setores circulares para obter uma visualização expandida.
  4. Altere qualquer um dos valores do cálculo e clique em Calcular novamente. O gráfico de setores circulares reflete as mudanças na proporção do principal para os juros.
  5. Feche o arquivo.

Ponto de Verificação da Lição

Você aprendeu como concluir as tarefas a seguir:
  • Criar um widget de portal.
  • Incluir portlets no portal e, dessa forma, tornar disponíveis os manipuladores criados nas lições anteriores.

Na próxima lição, você incluirá um portlet para listar seus cálculos de hipoteca.

< Anterior | Próximo >

Feedback