Projeto de Objetos de Interface
CIn-UFPE
1
Objetivos





A Interface do usuário e a arquitetura em três
camadas - camada de apresentação.
Adicionando classes de interface do usuário aos
Diagramas de Seqüência.
Representando classes de interface do usuário em
diagramas de classes e diagramas de pacote.
O protótipo da interface do usuário.
Modelando Comportamento Dinâmico da Interface
com Diagramas de Statechart.
CIn-UFPE
2
A Interface do usuário e a arquitetura três
camadas



A interface do usuário é representada na arquitetura
de três camadas pela camada de apresentação.
Isto separa a interface do usuário das classes de
lógica/negócio da aplicação e do armazenamento de
dados.
Classes de negócio não se preocupam como vão ser
apresentadas aos usuários.
CIn-UFPE
3
Ex: Verificar o orçamento de uma campanha
publicitária – fluxo de eventos




O gerente de campanhas digita o nome do cliente da
campanha;
O sistema lista todas as campanhas para o cliente;
O gerente seleciona a campanha relevante;
O sistema calcula o custo de todos os anúncios
referentes à campanha, deduz este custo da verba
da campanha e mostra o balanço.
CIn-UFPE
4
Ex: Verificar o orçamento de uma campanha
publicitária – diagrama de seqüência
CIn-UFPE
5
Adicionando um objeto caixa de diálogo
CIn-UFPE
6
Diagrama de Classes
Dialog

Composição
mostra que a caixa
de diálogo é
composta por
outros
componentes
CBWindow
1
1
1
2
2
Button
3
Label
CIn-UFPE
1
Choice
1
TextField
7
Diagrama de Classes

Isto também pode ser
mostrado como uma
classe com os
componentes gráficos
aparecendo como
atributos.
CIn-UFPE
CBWindow
clientLabel
campaignLabel
budgetLabel
checkButton
closeButton
budgetTextField
client Choice
campaignChoice
8
Pacotes

Diagrama de pacotes mostra a dependência entre classes de
diferentes pacotes
CIn-UFPE
9
Diagrama de Classes Revisado

Composição mostra
que a caixa de diálogo
é feita de outros
componentes Java do
pacote AWT.
AWT::Dialog
CBWindow
1
1
1
2
2
AWT::Button
3
AWT::Label
CIn-UFPE
1
AWT::Choice
1
AWT::TextField
10
Protótipo do Diálogo


Um protótipo pode ser usado para determinar como
o diálogo deve parecer.
Existem opções para definir como será a entrada do
nome do Cliente e da Campanha:



Usar uma janela de consulta separada para cada classe
Permitir que o usuário entre com uma parte do nome para
receber uma lista com alguns nomes correspondentes
Usar estruturas do tipo explorer que mostram as instâncias
como uma hierarquia.
CIn-UFPE
11
Protótipos das alternativas do diálogo

Janela de consulta separada
CIn-UFPE
12
Protótipos das alternativas do diálogo

Campos selecionados em uma lista
CIn-UFPE
13
Protótipos das alternativas do diálogo

Controle do tipo explorer (3 níveis)
CIn-UFPE
14
Atualizando o Diagrama de Seqüência
Escolha:
Cliente (CL)
&
Campanha (CA)
Lookup

CIn-UFPE
15
Atualizando o Diagrama de Classes
CIn-UFPE
16
Modelando o Comportamento Dinâmico
da Interface


Os diagramas de seqüência mostram a visão
seqüencial do usuário trabalhando com os campos
da tela de cima para baixo, em ordem seqüencial
Mas nas interfaces GUI, o usuário pode clicar no
objeto interface fora da seqüência


O que acontece se o usuário clica no botão Check antes do
cliente e da campanha serem selecionados?
Use o diagrama de Statechart
CIn-UFPE
17
Client Listbox, Campaign Listbox, Cursor
CIn-UFPE
18
CheckButton, BudgetTextbox
CIn-UFPE
19