Objetos de Interface
© 2001 Jaelson Castro
Objetos de Interface 1
Objetivos






Arquitetura em três camadas - camada de
apresentação.
Diagramas de Seqüência - adicionando classe
de interface do usuário.
Fazer o protótipo da interface do usuário.
Representando classes de interface do usuário
em diagramas de classes e diagramas de
pacote.
Padrões de projeto - MVC.
Diagramas Statechart.
© 2003 Jaelson Castro
Objetos de Interface 2
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
lógica/negócio da aplicação e do
armazenamento de dados.
O mesmo princípio é usado no Modelo-VisãoControlador (MVC) em SmallTalk.
Classes de negócio não se preocupam como
vão ser apresentadas aos usuários.
© 2003 Jaelson Castro
Objetos de Interface 3
Ex: Avaliar o custo da campanha
© 2003 Jaelson Castro
Objetos de Interface 4
Adiciona um objeto caixa de
diálogo
© 2003 Jaelson Castro
Objetos de Interface 5
Protótipo do diálogo

Protótipo pode ser usado para
determinar como o diálogo deve parecer.
© 2003 Jaelson Castro
Objetos de Interface 6
Diagrama de Classes
Dialog

Composição
mostra que
caixa de
diálogo é
composta por
outros
componentes
Label
© 2003 Jaelson Castro
CBWindow
1
1
1
2
2
Button
2
1
Choice
1
TextField
Objetos de Interface 7
Diagrama de Classes

Isto também
pode ser
mostrado como
uma classe com
os componentes
gráficos
aparecendo como
atributos.
© 2003 Jaelson Castro
CBWindow
clientLabel
campaignLabel
budgetLabel
checkButton
closeButton
budgetTextField
client Choice
campaignChoice
Objetos de Interface 8
Pacotes

Diagrama de classes mostra a dependência
entre classes de diferentes pacotes
© 2003 Jaelson Castro
Objetos de Interface 9
Diagrama de Classes Revisado

Composição
mostra que
caixa de diálogo
é feita de outros
componentes
Java do pacote
AWT.
AWT::Dialog
CBWindow
1
© 2003 Jaelson Castro
1
2
1
2
AWT::Button
3
AWT::Label
1
AWT::Choice
1
AWT::TextField
Objetos de Interface 10
Protótipo do Diálogo

Existem opções para definir como será
a entrada do nome do Cliente e da
Campanha:



© 2003 Jaelson Castro
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.
Objetos de Interface 11
Protótipos das alternativas do
diálogo

© 2003 Jaelson Castro
Janela de consulta separada
Objetos de Interface 12
Protótipos das alternativas do
diálogo

© 2003 Jaelson Castro
Controle do tipo explorer
(3 níveis)
Objetos de Interface 13
Atualizando o Diagrama de
Seqüência
Escolha:
Cliente (CL)
&
Campanha (CA)

Lookup
© 2003 Jaelson Castro
Objetos de Interface 14
Atualizando o Diagrama de
Classes
© 2003 Jaelson Castro
Objetos de Interface 15
Padrões de Projeto para
Interface do Usuário

A abordagem mais usada é ModeloVisão-Controlador (MVC), baseado em
três padrões (Observador, Composto,
Estratégia).



© 2003 Jaelson Castro
Modelo é o objeto de negócio
Visão é a apresentação ao usuário
Controle define como a interface do
usuário responde às ações do usuário
Objetos de Interface 16
Modelo-Visão-Controlador MVC
4: Update Presentation
User Event
:Controller
6: Notify Change
:View
1: Broadcast
7: Request Model data
2: Update self
5: Ask What Has Changed
:Model
3: Notify Change
© 2003 Jaelson Castro
Objetos de Interface 17
Padrões de Projeto para
Interface do Usuário


Java AWT usa o padrão composto para
exibir objetos dentro de outros gráficos
aninhados.
Java pode usar MVC, com a interface
Observer e a classe Observable.
Normalmente usa ActionListener, etc.
para interfaces dirigidas por eventos.
© 2003 Jaelson Castro
Objetos de Interface 18
Abordagem ActionListener
4: Update Self
User Event
:Component
any:Class
1: ActionPerformed
(ActionEvent e)
2: Inspect Event
© 2003 Jaelson Castro
:ActionListener
3: [Event of Interest]
Notify Class of Event
Objetos de Interface 19
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 na tela de cima para baixo.
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 ser selecionada?
Use o diagrama de Statechart
© 2003 Jaelson Castro
Objetos de Interface 20
Client listbox, Campaign Listbox,
Cursor
© 2003 Jaelson Castro
Objetos de Interface 21
CheckButton, BudgetTextbox
© 2003 Jaelson Castro
Objetos de Interface 22
Leituras Adicionais


Bennett S, Farmer R and McRobb S (1999) ObjectOriented Systems Analysis and Design using UML.
McGraw-Hill. Chapter 16 - Designing interface
objects.
Larman C (1998) Applying UML and Patterns.
Prentice-Hall. Chapter 22 - Issues in System Design.
© 2003 Jaelson Castro
Objetos de Interface 23