< Anterior | Próximo >

Lição 1: Planejar o Aplicativo de Hipoteca

Projete seu aplicativo no papel antes de iniciar a codificação.
Ao planejar um aplicativo, faça o seguinte:
  • Liste seus objetivos, assim como foi feito neste tutorial anteriormente.
  • Faça o rascunho da interface.
  • Identifique a estrutura do aplicativo.

Fazer o Rascunho da Interface

Use este rascunho como um guia durante a criação dos componentes da interface:
O rascunho mostra três seções no lado esquerdo da tela para a calculadora, o gráfico de setores circulares e o histórico. No lado direito está uma seção contendo um mapa de roteiro.

Identificar a Estrutura do Aplicativo

Ao gravar um aplicativo do Rich UI complexo, grave o código em vários manipuladores do Rich UI, cada um dos quais correspondendo a uma página da Web ou a uma seção de uma página da Web. Conforme observado anteriormente, os manipuladores podem acessar serviços, alguns dos quais você pode desenvolver usando uma parte de Serviço do EGL.

Sempre que possível, use recursos preexistentes. Como um exemplo, seu aplicativo do Rich UI acessará um serviço hospedado pelo Yahoo! para recuperar uma lista de concessores de hipoteca dentro de um CEP especificado. Como um segundo exemplo, você usará os seguintes projetos do EGL que são fornecidos com o produto:
com.ibm.egl.rui.dojo.samples
Fornece os seguintes tipos de código e mais:
  • Widgets que dividem a interface em duas seções, para flexibilidade no momento do desenvolvimento
  • Lógica que cria as caixas de diálogo com as quais você notifica o usuário que fornece dados inválidos
  • Widgets de mapa do Google
com.ibm.egl.rui.dojo.widgets
Fornece os seguintes tipos de widget para este tutorial:
  • DojoButton
  • DojoComboBox
  • DojoCurrencyTextBox
  • DojoPieChart
  • DojoTextField
  • PieChartData

Todos esses tipos de widget são baseados em Dojo, assim como vários outros widgets que estão disponíveis para você. Para obter detalhes em segundo plano sobre essa tecnologia, consulte Dojo Toolkit (http://dojotoolkit.org).

com.ibm.egl.rui
Fornece o Infobus do EGL, que fornece comunicação entre os manipuladores do Rich UI que contribuem com a interface. O projeto também fornece os seguintes tipo de widget para este tutorial:
  • Box
  • DataGrid
  • GridLayout
  • HyperLink
  • Image
  • TextField
  • TextLabel
Você desenvolverá a seguinte lógica:
MortgageCalculationService
Um serviço dedicado que calcula pagamentos mensais
MortgageLib
Uma biblioteca que fornece código a vários manipuladores
MainHandler
Um manipulador que declara outros manipuladores, sendo que cada um deles controla um seção da página da Web ou executa outro trabalho em segundo plano
MortgageCalculatorHandler
Um manipulador que calcula pagamentos mensais
CalculationHistoryHandler
Um manipulador que exibe uma lista interativa de cálculos de pagamento anteriores
CalculationResultsHandler
Um manipulador que exibe um gráfico de setores circulares de pagamentos de juros e de principal
MapLocatorHandler
Um manipulador que exibe as localizações dos concessores de hipoteca

Ponto de Verificação da Lição

Nesta lição, você concluiu as tarefas a seguir:
  • Fez o rascunho da interface de aplicativo
  • Identificou a estrutura do aplicativo

Na próxima lição, você importará o projeto de amostras Dojo e criará dois projetos do EGL para reter seu código.

< Anterior | Próximo >

Feedback