Padrões Arquiteturais em Sistemas com Interfaces

Padrões Arquiteturais em Sistemas
com Interfaces de Usuário
Jair C Leite
Objetivos
• Apresentar exemplos de padrões
arquiteturais para sistemas com interfaces
de usuário
• O foco será nos sistemas com interfaces
de usuário gráficas (IU)
• Discutiremos possibilidades de aplicação
das soluções em IU múltiplas plataformas.
Arquitetura de Software, © Jair C Leite
1
Conceitos – 1/2
• Sistemas Interativos
– Sistema que realizam interação durante a execução
– Nosso foco: interação com usuário
• Interfaces de Usuário
– Parte do Sistema com a qual o usuário tem contato físico,
perceptivo e cognitivo
Arquitetura de Software, © Jair C Leite
Conceitos – 2/2
• Elementos da IU
– Hardware da IU
• Monitor, teclado, mouse, alto-falantes, joystick, ...
– Software da IU
• BIOS, sistemas de janelas, ferramentas, ...
• Visões da IU
– Externa – visão do usuário
• Janelas, menus, ícones, sons, comandos, formulários, ...
– Interna – visão do designer
• Arquitetura de software da IU, framework de IU, código fonte, ...
Software da IU
Designer
JFrame frame =
new JFrame(“MyWindow");
Hardware
da IU
Usuário
Arquitetura de Software, © Jair C Leite
2
Arquitetura em interfaces texto
• Aplicações interagem
através de operações de
entrada e saída (E/S)
• Interpretadores de
comandos são exemplos
de aplicações
• Linguagens de
programação oferecem
APIs que utilizam essas
funções
• O sistema operacional
utiliza a BIOS e oferece
funções de E/S
• A BIOS faz as operações
básicas de E/S
Aplicações
do usuário
Interpretador
de comandos
(shell)
API
Funções de E/S
Sistema
operacional
(SO)
BIOS
Arquitetura de Software, © Jair C Leite
Arquitetura de aplicações com IU texto
• Aplicações
convencionais
– Organizadas de forma
hierárquica
– Chamadas E/S
incluídas no núcleo
funcional
– Difícil
manutenibilidade e
portabilidade
Aplicação
do usuário
API
printf();
scanf();
Arquitetura de Software, © Jair C Leite
3
Arquitetura de interpretadores de comandos
• Três camadas
– Semântica
• Interpreta os comandos
e chama as aplicações
correspondentes
– Sintática
• Analisa se a forma dos
comandos está correta
• Monta as respostas
– Léxica
• Ler caracteres e strings
• Escreve respostas
Interpretador de comandos
Interpretador de comandos
Analisador
sintático
read
Gerador de
mens. erros
write
Sistema operacional (SO)
Funções de E/S
Arquitetura de Software, © Jair C Leite
Programação baseada em ciclo de leitura e
avaliação
repeat
read-event(myevent)
case myevent.type
type_1:
do type_1 processing
type_2:
do type_2 processing
...
type_n:
do type_n processing
end case
end repeat
Arquitetura de Software, © Jair C Leite
4
Requisitos para interfaces gráficas
• Hardware
– Monitor e placa gráfica com mapeamento de bits –
pixels
– Acionadores da placa (device drivers)
– Independência de dispositivos
• Interação
– Usuário utiliza várias aplicações ao mesmo tempo
– Processos independentes e correntes
– As diferentes aplicações devem responder à eventos
do usuários
Arquitetura de Software, © Jair C Leite
Arquitetura de sistemas de janelas
• Dois componentes
importantes permitem
– Independência de
dispositivos
• PostScript (MacOS X,
NextStep)
• Graphical Kernel
System (GKS)
• Programmers'
Hierarchical Interface to
Graphics (PHIGS)
– Controle de múltiplas
aplicações
• Notificador
Arquitetura de Software, © Jair C Leite
5
Arquitetura cliente-servidor no X Window
• As diferentes
aplicações (clientes)
podem ser exibidas
num mesmo dispositivo
• Cada máquina possui
um servidor X para
controlar os
dispositivos:
– Gerencia os recursos
para as diferentes
aplicações
– Interage com os
dispositivos
Arquitetura de Software, © Jair C Leite
Arquitetura do X Windows
• O protocolo X define a
comunicação entre a
aplicação cliente e o
servidor X
• O gerenciador de
janelas é uma
aplicação cliente que
controla o look-andfeel:
– o foco em uma janela
– como ocorre a
sobreposição entre
janelas
– a aparência das
janelas
Arquitetura de Software, © Jair C Leite
6
Programação baseada em notificação
void main(String[] args) {
Menu menu = new Menu();
menu.setOption(“Save”);
menu.setOption(“Quit”);
menu.setAction(“Save”,mySave)
menu.setAction(“Quit”,myQuit)
...
}
int mySave(Event e) {
// save the current file
}
int myQuit(Event e) {
// close down
}
Arquitetura de Software, © Jair C Leite
Arquitetura genérica para sistemas
interativos
Interface
Software
da
Componentes Sistema
de
da interface
Janelas
aplicação
Sistema
Opera-
Hardware
cional
Software
Usuário
Sistema Interativo
Arquitetura de Software, © Jair C Leite
7
Ferramentas de interface
• Toolkits
– APIs que permitem a implementação de componentes da interface
– GTK, QT, Java AWT, Java Swing, MFC, Motif, ...
• Ferramentas de alto-nível
– Ambientes de desenvolvimento visual da interface
– Microsoft Visual Studio, Netbeans, Interface builder, ...
Software da Interface
Software
da
Sistema
Componentes
da interface
Sistema
de
Toolkits Janelas
aplicação
Operacional
Hardware
Ferramentas de alto
nível
Arquitetura de Software, © Jair C Leite
Diferentes visões de arquitetura de SI
• Visão de desenvolvimento
– Normalmente são organizados em camadas de abstração –
estilo camadas
– Oferece diferentes níveis de abstração para o desenvolvedor
– Equivalente à:
• Visão de módulos no Siemens 4 Views
• Visão de implementação no RUP 4+1
• Visão de execução
– Normalmente possuem três componentes:
• Aplicação, Diálogo e Apresentação
– Descreve o fluxo de controle entre o software da interface e da
aplicação
– Equivalente à:
• Visão de execução no Siemens 4 Views
• Visão de implantação no RUP 4+1
Arquitetura de Software, © Jair C Leite
8
Camadas de abstração - MS Windows
Aplicação para Windows
Borland (OWL)
Object Windows
Library
Windows API
(Win32)
DOS
Aplicação para Windows
Microsoft
Foundation Class
Windows API
DOS
(Win32)
Arquitetura de Software, © Jair C Leite
Camadas de abstração no X/Unix/Linux
Aplicação XWindow/Unix
Aplicação Motif
(cliente)
Aplicação OPENLOOK
(cliente)
Motif Widgets
XView
XLib
XLib
Unix
Unix
Servidor X
Protocolo X
Dispositivos
Arquitetura de Software, © Jair C Leite
9
Camadas de abstração no Mac OS X
User experience
Aqua
Dashboard
Spotlight
Accessibility
Application Frameworks
Cocoa
Carbon
Java
Graphics and media
Quicktime
Core Video
Core Audio
OpenGL
Core Image
Darwin
Arquitetura de Software, © Jair C Leite
Padrão Layers (Camadas)
• Contexto: Um sistema
complexo que requer
decomposição.
• Problema: Decompor um
sistema e aumentado a
abstração diminuindo as
dependências entre as partes.
• Solução: Decompor em
camadas de abstração de
forma que uma camada não
depende da superior e utiliza
serviços apenas da camada
imediatamente inferior.
Cliente
<<usa>>
Camada n
Camada n-1
Camada 1
Arquitetura de Software, © Jair C Leite
10
Padrão Layers (Camadas) – visão de
implementação em UML
<<camada>>
<<camada>>
<<camada>> é
um estereótipo
de pacotes
Camada n
<<camada>>
Camada n-1
<<camada>>
<<camada>>
Componentes executáveis –
exe, jar, lib, dll, etc.
Arquitetura de Software, © Jair C Leite
Padrão Layers (Camadas) – visão lógica
em UML
Classes
organizadas
em camadas
<<camada>>
<<camada>>
Camada n
<<camada>>
Camada n-1
<<camada>>
<<camada>>
Diagrama de classes
Arquitetura de Software, © Jair C Leite
11
Evolução das Arquiteturas de GIU
Fonte: Kazman, M & Bass, L. “Software Architectures for HumanComputer Interaction: Analysis and Construction”
Arquitetura de Software, © Jair C Leite
Modelos de arquitetura de SI – visão
execução
• Modelo Linguístico:
– Léxico, sintático e semântico
• Modelo Seeheim:
presentation
dialogue
application
• Modelo Arch/Slinky
dialogue
func. core
adaptor
functional
core
lexical
physical
Fonte: Dix et. al.,
Arquitetura de Software, © Jair C Leite
12
Seeheim model
USER
USER
lexical
syntactic
semantic
Presentation
Dialogue
Control
Functionality
(application
interface)
APPLICATION
switch
Arquitetura de Software, © Jair C Leite
Arch/Slinky
• Acrescenta mais camadas
– Acrescenta a camada física
– Acrescenta um adaptador entre diálogo um núcleo
funcional
dialogue
func. core
adaptor
functional
core
lexical
physical
Arquitetura de Software, © Jair C Leite
13
MVC – model-view-controller
view
model
controller
Arquitetura de Software, © Jair C Leite
Padrão Model-View-Controler - MVC
•
•
•
Contexto: Aplicações interativas com interfaces de usuário gráficas
flexíveis e controladas pelo usuários.
Problema: Interfaces gráficas precisam representar uma mesma interface
em diferentes janelas. O usuário deve poder tomar a iniciativa de controle
de entrada e mudanças dos dados. Todas as janelas devem ser
atualizadas sempre que houver mudanças nos dados.
Solução: Utilizar o padrão Observer e estendê-lo para permitir o controle
das janelas baseado-em-eventos. O Padrão MVC estende o Observer
incorporando um elemento controlador (Controller). O MVC foi introduzido
originalmente no Smalltalk-80.
A BC
A = 50%
B = 30%
C = 20%
Arquitetura de Software, © Jair C Leite
14
Padrão MVC – estrutura
1..*
update
Observer
Upadate( )
Model
coreData
observers
Attach(Observer)
Detach(Observer)
Notify ( )
View
Controller
myModel
myController
create
getData
Service( )
Attach Initialize(Model)
getData makeController( )
Activate( )
Display()
Update()
myModel
myView
Initalize(Model,View)
handleEvent( )
Update( )
Attach
callService
Arquitetura de Software, © Jair C Leite
Padrão MVC – dinâmica
:main
m:Model
v:View
Initialize(m)
Attach(v)
makeController( )
v:Controller
Initialize(m,v)
Attach(c)
startEventProcessing
handleEvent( )
Service( )
Update( )
Display( )
getData( )
Update( )
getData( )
Arquitetura de Software, © Jair C Leite
15
PAC - presentation–abstraction-control
• PAC baseado no Seeheim
– abstraction – estado lógico do agente
– presentation – controle da interação
– control – relacionamento entre abstração e apresenta
• Permite gerenciamento de multiplas visualizações de
uma forma hierárquica
control
abstraction
presentation
Arquitetura de Software, © Jair C Leite
Padrão PAC – Presentation-AbstractionControl
• Contexto
– Desenvolvimento de
aplicações interativas
baseadas em agentes
• Problema
– O sistema é baseado em
agentes e é importante
separar as responsabilidades
e permitir decomposição
horizontal e vertical
• Solução
– Estruturar o sistema como
hierarquia de agentes
cooperativos (agentes PAC).
– Deverá haver:
• Um agente de nível topo,
• Vários agentes de nível
intermediário
• Vários agentes de nível base
Arquitetura de Software, © Jair C Leite
16
PAC – organização em camadas
• O PAC organiza agentes em camadas
• Cada agente segue o MVC
Arquitetura de Software, © Jair C Leite
Estrutura do PAC
• Agente nível-topo:
– Prover a
funcionalidade
principal
– Controlar a
hierarquia de
agentes
• Agentes nível
intermediário
– Coordenadar os
agentes nível base
– Compor agentes
bases em uma
única unidade mais
abstrata
• Agentes nível base
– Prover uma visão
específica
– Prover uma serviço
do sistema
Arquitetura de Software, © Jair C Leite
17
Estrutura de um agente PAC
• O agente base deve
possui componentes:
– Presentation
ViewCoordinator
• Visualização e
interação com o usuário
– Control
• Interação com o
componente de nível
intermediário
– Abstraction
• Mantém informações
sobre os dados a
serem exibidos
Arquitetura de Software, © Jair C Leite
18