< Anterior | Próximo >

Lição 4: Criar a Interface com o Usuário para a Calculadora

Inicie a construção da calculadora usando assistentes EGL e, em seguida, o editor Rich UI.

É possível incluir widgets em uma página da Web arrastando o conteúdo para a área Design do editor Rich UI. A ação de arrastar e soltar e a interação subsequente com o editor atualiza o código de origem do manipulador do Rich UI que está sendo desenvolvido.

Duas origens do conteúdo para arrastar e soltar estão disponíveis:
  • Uma paleta de tipos de widget
  • A visualização Dados do EGL, que fornece definições de tipo de dados, tais como as partes do Registro EGL. Você arrastará primeiro o conteúdo desta visualização e, em seguida, escolherá entre os tipos de widget que podem exibir o tipo dos dados selecionados.

Por padrão, a paleta de widgets está no lado direito do editor e a visualização Dados está na parte inferior esquerda do ambiente de trabalho.

Criar um Manipulador do Rich UI

  1. No projeto MortgageUIProject, selecione a pasta EGLSource e clique no botão Novo Manipulador do Rich UI na barra de menus.
    O ícone Novo manipulador do Rich UI é o terceiro de quatro no segundo grupo de ícones na barra de menus.
  2. Na janela “Nova Parte do Manipulador do Rich UI”, insira a seguinte informação:
    1. No campo Pacote, insira o seguinte nome:
      handlers
    2. No campo Nome do Arquivo de Origem EGL, insira o seguinte nome:
      MortgageCalculatorHandler
    3. Clique em Concluir.
    O novo manipulador é aberto na visualização Design no editor Rich UI. O EGL cria o pacote handlers na pasta EGLSource.
    O editor Rich UI é aberto na visualização Design por padrão e mostra uma paleta de widgets no lado direito.

Construir a Interface com o Usuário

Para construir a IU para a calculadora:

  1. Crie uma variável de registro.
    1. A visualização Dados do EGL, que está localizada por padrão no canto inferior esquerdo do ambiente de trabalho, lista todas as variáveis de registro e primitivas para o manipulador que está atualmente aberto no editor. Clique com o botão direito do mouse no espaço vazio abaixo da entrada do manipulador MortgageCalculatorHandler. Clique em Nova > Variável EGL.
    2. No assistente Criar uma nova Variável de Dados do EGL, solicite uma nova variável de registro baseada na parte do Registro MortgageCalculationResult:
      • Certifique-se de que Seleção de Tipo esteja configurado como Registro.
      • Selecione o registro MortgageCalculationResult. Este deve ser o primeiro tipo na lista.
      • Na seção Propriedades da Matriz, deixe Matriz desmarcado.
      • No campo Inserir o nome do campo, insira o texto a seguir:
        inputRec
      • Clique em Concluir.
    O assistente Criar uma nova Variável de Dados do EGL.
    Este processo cria a seguinte declaração de registro no código de origem para o manipulador:
    inputRec MortgageCalculationResult;
    O processo também mostra a nova variável de registro na visualização Dados do EGL para que seja possível arrastar a variável no editor.
    A visualização Dados do EGL mostra a variável inputRec.
  2. O EGL cria automaticamente um widget GridLayout como sua IU inicial. Por padrão, esse widget possui quatro linhas e três colunas. É possível usar mecanismos diferentes para variar o número de linhas e colunas, conforme demonstrado a seguir:
    1. Clique com o botão direito do mouse no widget GridLayout para destacar uma célula.
    2. Clique em Excluir > Linha
    3. Novamente, clique com o botão direito do mouse no widget GridLayout para destacar uma célula.
    4. Clique em Excluir > Coluna
    5. Agora acesse a visualização Propriedades, que por padrão é uma das páginas tabuladas abaixo da área de janela do editor.
    6. Na página Geral, configure a propriedade linhas como 1 e a propriedade colunas como 1.
      A visualização Propriedades.
    O widget GridLayout modificado permanece como a IU inicial da página da Web, mas agora possui uma única célula na qual outro conteúdo será incluído.
  3. Clique na variável inputRec na visualização Dados do EGL e arraste a variável da visualização Dados do EGL para a única célula do widget GridLayout no editor.
    Arrastando um registro da visualização Dados para o widget Grid Layout.
    O EGL exibe a página Configurar widgets de dados do assistente Inserir Dados. Use essa página para configurar os widgets que o EGL cria com base nos campos no registro arrastado no editor.
  4. Na página Configurar widgets de dados, faça as seguintes mudanças:
    1. Na seção Criar Widgets para, clique em Dados editáveis. Essa opção determina os widgets padrão que o EGL exibe no assistente, nenhum dos quais possui a restrição de somente leitura.
    2. Na coluna Tipo de Widget do campo loanAmount, clique no valor atual na coluna Tipo de Widget, clique na seta para baixo e selecione DojoCurrencyTextBox. Este widget fornece formatação e validação para quantias de dinheiro.
    3. Deixe o widget DojoTextField padrão para o widget interestRate.
    4. Na coluna Tipo de Widget do campo term, clique no valor atual na coluna Tipo de Widget, clique na seta para baixo e selecione DojoComboBox.
    5. Desmarque a caixa de seleção dos campos monthlyPayment e interest. Um widget para o campo de pagamento mensal será incluído posteriormente; o campo de juros não faz parte desta interface com o usuário.
    6. Altere os valores na coluna Rótulo conforme a seguir, incluindo os dois pontos:
      • Altere "loanAmount" para "Quantia de empréstimo:"
      • Altere "interestRate" para "Taxa de juros:"
      • Altere "term" para "Prazo:"

      Você acabou de customizar os prompts de cada um dos primeiros campos de entrada de dados no formulário que está sendo construído.

    7. Assegure-se de que Incluir suporte para formatação e validação esteja selecionado. Essa opção inclui um rótulo e controlador para cada widget, junto com um gerenciador de formulário e funções relacionadas que se aplicam a todo o conteúdo no novo layout de grade. Não selecione Usar rótulo de erro para suportar mensagem de erro. Essa opção fornece um rótulo de erro para qualquer mensagem de erro específica do controlador, mas este tutorial usa outros mecanismos para indicar que um erro ocorreu.
    8. Visualize a imagem a seguir. Quando sua página estiver essencialmente igual, clique em Concluir.
    A página Configurar widgets de dados com todos os campos corrigidos.
    A visualização Design é exibida, incluindo um novo layout de grade interno que está dentro do layout de grade original e que contém o novo conteúdo.
    Um layout de grade é exibido no outro.
  5. Para salvar seu trabalho, pressione Ctrl+S.
  6. Ajuste o tamanho do segundo e do terceiro campo de entrada para obter uma aparência mais uniforme:
    1. Destaque o campo de entrada para a taxa de juros. A linha pontilhada deve incluir apenas esse campo.
      Apenas o quadrado que segue o rótulo de Taxa de juros é destacado.
    2. Na visualização Propriedades, na página Posição, insira o seguinte valor para a propriedade largura:
      100
      Esse valor é o mesmo da largura padrão do widget DojoCurrencyTextBox usada para a quantia de empréstimo.
    3. Repita as etapas a e b para o campo Prazo. Clique na área Exibição para ver a mudança.
  7. Configure os valores válidos e o valor padrão para a caixa de combinação Dojo:
    1. Com o campo Prazo destacado, clique na página Geral da visualização Propriedades.
    2. Próximo à propriedade valores, clique nas reticências (...) para exibir a janela valores.
      A janela valores.
    3. Digite o número a seguir no campo Incluir ou remover sequências a partir da lista:
      5
    4. Clique em Incluir.
    5. Digite cada um dos números a seguir, clicando em Incluir após cada adição:
      10
      15
      30
      A janela valores deve parecer com esta imagem:
      Cada número na janela valores é exibido em uma nova linha.
    6. Clique em OK.
  8. Para assegurar que a exibição inicial da caixa de combinação inclui o valor 30, faça o seguinte:
    1. Clique na guia Origem do editor Rich UI.
    2. Configure um valor padrão para o prazo. Acesse a linha em que o registro inputRec está declarado e inclua um bloco de valores de configuração na declaração, conforme mostrado a seguir:
      inputRec MortgageCalculationResult {term = 30};
      Um valor padrão está sendo integrado à declaração, da forma mais fácil. Entretanto, você pode ter atualizado a função start() conforme a seguir, com o mesmo efeito:
      function start()
         inputRec.term = 30;
      end
  9. Enquanto estiver visualizando o código de origem, revise a seguinte declaração do controlador, que relata a variável inputRec.term com a caixa de combinação Dojo:
    inputRec_term_controller Controller 
       { @MVC {model = inputRec.term, view = inputRec_term_comboBox as
    Widget}};
    A declaração do controlador assegura que o valor designado para a variável inputRec.term será usado para inicializar a caixa de combinação.
  10. Para salvar seu trabalho, pressione Ctrl+S.
  11. Clique na guia Visualização do editor Rich UI. A página da Web mostra a exibição do tempo de execução e deve parecer com esta imagem:
    Os campos são exibidos e a caixa de combinação possui o valor de inicialização.
    Se precisar atualizar a exibição, clique no ícone mais à direita na barra de ferramentas do Rich UI, que está na parte superior direita da página Visualização e é mostrada aqui:
    A barra de ferramentas do Rich UI
  12. Inclua o novo conteúdo no widget GridLayout interno, que retém o detalhe de registro:
    1. Clique na guia Design do editor Rich UI.
    2. Clique com o botão direito do mouse no widget GridLayout interno, que é denominado inputRec_ui. Esse nome é exibido na parte superior da visualização Propriedades.
    3. Na página Geral da visualização Propriedades, altere a propriedade linhas com o valor a seguir:
      6
      Após clicar na área Design, as novas linhas são exibidas abaixo da linha Prazo.
      O widget GridLayout interno possui agora seis linhas.
  13. Inclua um segundo widget GridLayout interno para reter um botão de envio.
    1. A partir da gaveta Layout da paleta, arraste um widget GridLayout para a primeira célula na primeira linha em branco.
      Descartando o layout de grade.
      O widget GridLayout será usado para posicionar o botão de envio e uma imagem de processamento animada. Forneça o seguinte nome ao widget:
      buttonLayout
    2. Clique com o botão direito do mouse no novo widget para exibir o menu mostrado a seguir.
      Excluindo uma linha.
    3. Selecione Excluir e, em seguida, clique em Linha. A página Geral da visualização Propriedades agora indica que o layout de grade possui 2 linhas.
    4. Use a visualização Propriedades ou o menu que você acabou de usar para modificar buttonLayout para obter uma coluna. Se tiver cometido um erro e desejar reverter para uma exibição anterior, pressione Ctrl+Z.
    5. Quando buttonLayout estiver ativo, acesse a página Layout da visualização Propriedades. Faça conforme a seguir para que o layout esteja centralizado em uma linha em branco de outra forma:
      • Altere a propriedade horizontalAlignment para CENTRO.
      • Altere a propriedade horizontalSpan para 2.
      O novo widget GridLayout está centralizado na linha em branco.
  14. Para salvar seu trabalho, pressione Ctrl+S.
  15. Crie um botão de envio e ligue-o a uma função stub:
    1. A partir da gaveta Exibição e Entrada da paleta, arraste um botão Dojo na célula superior de buttonLayout.
      Arraste o botão na primeira das duas células.
    2. Forneça o seguinte nome ao botão:
      calculationButton
    3. Na página Geral da visualização Propriedades, altere a propriedade texto com o rótulo a seguir:
      Calculate
      A seguir, você deve ligar o botão à função que foi criada quando você arrastou a variável inputRec no editor.
    4. Na guia Eventos, selecione a linha com o evento onClick. Clique no espaço em branco na coluna Função para exibir um botão de seta. Clique no botão de seta e selecione inputRec_form_Submit. Você concluirá o código para essa função na próxima lição.
      O menu mostra duas funções disponíveis.
      Observe o sinal de mais na última coluna da linha. Você poderia ter clicado neste botão para criar uma nova função para ligar ao botão Calcular. O ambiente de trabalho poderia ter levado você até a visualização Origem e criado automaticamente uma função stub, que é uma função que não possui nenhum código, mas está pronta para entrada.
  16. Inclua uma imagem animada que indica que um cálculo de hipoteca está sendo processado.
    1. A partir da gaveta Exibição e Entrada da paleta, arraste um widget Image para a célula vazia abaixo do botão Calcular.
    2. Na janela Nova Variável, forneça o seguinte nome à imagem:
      processImage
    3. Na visualização Propriedades, na página Geral, designe uma origem para a imagem no campo src:
      tools/spinner.gif

      A imagem está localizada na pasta com.ibm.egl.rui.dojo.samples/WebContent. O ambiente de desenvolvimento trata as pastas WebContent de todos os projetos na área de trabalho como uma única pasta virtual.

    4. Também na visualização Propriedades, na página Aparência, desmarque a caixa de seleção visível. A imagem permanece oculta até que o botão Calcular seja clicado.
    5. Também na visualização Propriedades, na página Layout, configure a propriedade horizontalAlignment como CENTRO.
  17. Para salvar seu trabalho, pressione Ctrl+S.
  18. Inclua um widget para exibir os resultados do cálculo.
    1. Arraste um widget TextLabel a partir da gaveta Exibição e Entrada da paleta para a primeira célula da quinta linha, que está abaixo do novo gráfico. Designe o seguinte nome ao widget:
      paymentLabel
      Um widget de rótulo é usado aqui, pois o usuário não altera este campo. O aplicativo calcula e atualiza o conteúdo.
    2. Na visualização Propriedades, na página Geral, insira o seguinte valor para a propriedade texto (incluindo o sinal de dólar):
      $0.00
    3. Na mesma página, configure a propriedade tamanho da fonte como 18.
    4. Também na visualização Propriedades, na página Layout, configure as seguintes propriedades:
      • Configure horizontalAlignment como CENTRO.
      • Configure horizontalSpan como 2.
      Ao clicar na área Design, a página da Web estará agora parecida com esta imagem:
      O campo de pagamento mensal é mostrado em uma fonte maior.
  19. Inclua um campo de erro para erros gerais, tais como problemas de conexão com o serviço.
    1. Arraste um widget TextLabel a partir da gaveta Exibição e Entrada da paleta para a primeira célula da última linha vazia e designe o nome a seguir:
      errorLabel
    2. Altere as seguintes propriedades do widget TextLabel:
      • Na página Geral, exclua o valor padrão da propriedade texto que lê "TextLabel".
      • Também na página Geral, clique no botão em branco próximo ao campo de propriedade cor e, em seguida, clique em Formato do nome, role para baixo na lista e selecione Vermelho. Clique em OK. Isso configura a cor da fonte para todas as mensagens exibidas no rótulo.
      • Na página Posição, configure a propriedade largura como 250.
      • Na página Layout, altere a propriedade horizontalSpan para 2.
    3. Clique em qualquer lugar na área Design e pressione Ctrl+S para salvar o manipulador.
A interface concluída deve parecer com esta imagem:
A interface completa inclui três campos de entrada, o botão Calcular e o campo Pagamento.
Para revisar o código de origem, clique na guia Origem na parte inferior da área de janela do editor. O código deve corresponder ao conteúdo do arquivo em Código Concluído para MortgageCalculatorHandler.egl após a Lição 4.

Ponto de Verificação da Lição

Você aprendeu como executar as tarefas a seguir:
  • Criar um Manipulador do Rich UI.
  • Criar uma variável na visualização Dados do EGL.
  • Atualizar uma interface com o usuário arrastando uma variável de registro no editor Rich UI.
  • Usar o editor EGL Rich UI para alterar uma interface.
  • Usar a visualização Propriedades para formatar a interface.

Na próxima lição, você incluirá o código para suportar a interface que você acabou de criar.

< Anterior | Próximo >

Feedback