É 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.
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.
handlers
MortgageCalculatorHandler

Para construir a IU para a calculadora:
inputRec

inputRec MortgageCalculationResult;



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



100Esse valor é o mesmo da largura padrão do widget DojoCurrencyTextBox usada para a quantia de empréstimo.

5
10 15 30A janela valores deve parecer com esta imagem:

inputRec MortgageCalculationResult {term = 30};
function start() inputRec.term = 30; end
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.

6Após clicar na área Design, as novas linhas são exibidas abaixo da linha Prazo.


buttonLayout



calculationButton
CalculateA seguir, você deve ligar o botão à função que foi criada quando você arrastou a variável inputRec no editor.

processImage
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.
paymentLabelUm widget de rótulo é usado aqui, pois o usuário não altera este campo. O aplicativo calcula e atualiza o conteúdo.
$0.00

errorLabel

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