1
Padrões Arquiteturais em Sistemascom Interfaces de Usuário
Jair C Leite
Arquitetura de Software, © Jair C Leite
Objetivos
• Apresentar exemplos de padrõesarquiteturais para sistemas com interfacesde usuário
• O foco será nos sistemas com interfacesde usuário gráficas (IU)
• Discutiremos possibilidades de aplicaçãodas soluções em IU múltiplas plataformas.
2
Arquitetura de Software, © Jair C Leite
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, ...
JFrame frame = new JFrame(“MyWindow");
Software da IUHardware
da IU
Designer Usuário
3
Arquitetura de Software, © Jair C Leite
Arquitetura em interfaces texto
• Aplicações interagematravés de operações deentrada e saída (E/S)
• Interpretadores decomandos são exemplosde aplicações
• Linguagens deprogramação oferecemAPIs que utilizam essasfunções
• O sistema operacionalutiliza a BIOS e oferecefunções de E/S
• A BIOS faz as operaçõesbásicas de E/S
Interpretadorde comandos
(shell)
BIOS
Sistema operacional
(SO)Funções de E/S
Aplicaçõesdo usuário
API
Arquitetura de Software, © Jair C Leite
Arquitetura de aplicações com IU texto
• Aplicaçõesconvencionais– Organizadas de forma
hierárquica– Chamadas E/S
incluídas no núcleofuncional
– Difícilmanutenibilidade eportabilidade
printf();
scanf();
API
Aplicaçãodo usuário
4
Arquitetura de Software, © Jair C Leite
Arquitetura de interpretadores de comandos
• Três camadas– Semântica
• Interpreta os comandose chama as aplicaçõescorrespondentes
– Sintática• Analisa se a forma dos
comandos está correta• Monta as respostas
– Léxica• Ler caracteres e strings• Escreve respostas
Sistema operacional (SO)
Funções de E/S
Interpretador de comandos
read write
Analisadorsintático
Gerador demens. erros
Interpretador de comandos
Arquitetura de Software, © Jair C Leite
Programação baseada em ciclo de leitura eavaliação
repeatread-event(myevent)case myevent.type
type_1:do type_1 processing
type_2:do type_2 processing
...type_n:
do type_n processingend case
end repeat
5
Arquitetura de Software, © Jair C Leite
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 componentesimportantes permitem– Independência de
dispositivos• PostScript (MacOS X,
NextStep)• Graphical Kernel
System (GKS)• Programmers'
Hierarchical Interface toGraphics (PHIGS)
– Controle de múltiplasaplicações
• Notificador
6
Arquitetura de Software, © Jair C Leite
Arquitetura cliente-servidor no X Window
• As diferentesaplicações (clientes)podem ser exibidasnum mesmo dispositivo
• Cada máquina possuium servidor X paracontrolar osdispositivos:– Gerencia os recursos
para as diferentesaplicações
– Interage com osdispositivos
Arquitetura de Software, © Jair C Leite
Arquitetura do X Windows
• O protocolo X define acomunicação entre aaplicação cliente e oservidor X
• O gerenciador dejanelas é umaaplicação cliente quecontrola o look-and-feel:– o foco em uma janela– como ocorre a
sobreposição entrejanelas
– a aparência dasjanelas
7
Arquitetura de Software, © Jair C Leite
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 sistemasinterativos
Softwaredaaplicação
Interface
Componentes da interface
Sistemade
Janelas
SistemaOpera-cional
Hardware
Sistema Interativo
SoftwareUsuário
8
Arquitetura de Software, © Jair C Leite
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
Componentes da interface
Software
daaplicação
Sistemade
JanelasToolkitsFerramen-tas de altonível
Opera-cional
HardwareSistema
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
9
Arquitetura de Software, © Jair C Leite
Aplicação para Windows
DOS
Windows API
Aplicação para Windows
DOS
Borland (OWL)Object WindowsLibrary
MicrosoftFoundation Class
Camadas de abstração - MS Windows
Windows API
(Win32) (Win32)
Arquitetura de Software, © Jair C Leite
Aplicação XWindow/UnixAplicação Motif
Unix
Aplicação OPENLOOK
Unix
Motif Widgets XView
XLibXLib
(cliente) (cliente)
Servidor X
DispositivosProtocolo X
Camadas de abstração no X/Unix/Linux
10
Arquitetura de Software, © Jair C Leite
Camadas de abstração no Mac OS X
Darwin
Graphics and mediaQuicktime
Core Audio
Core Video
Core Image
OpenGL
Application FrameworksCocoa Carbon Java
User experience
Aqua Dashboard Spotlight Accessibility
Arquitetura de Software, © Jair C Leite
Padrão Layers (Camadas)
• Contexto: Um sistemacomplexo que requerdecomposição.
• Problema: Decompor umsistema e aumentado aabstração diminuindo asdependências entre as partes.
• Solução: Decompor emcamadas de abstração deforma que uma camada nãodepende da superior e utilizaserviços apenas da camadaimediatamente inferior.
Cliente Camada n
Camada n-1
Camada 1
<<usa>>
11
Arquitetura de Software, © Jair C Leite
Padrão Layers (Camadas) – visão deimplementação em UML
<<camada>>
<<camada>>
<<camada>>
<<camada>>
<<camada>>
Camada n
Camada n-1
<<camada>> éum estereótipode pacotes
Componentes executáveis –exe, jar, lib, dll, etc.
Arquitetura de Software, © Jair C Leite
Padrão Layers (Camadas) – visão lógicaem UML
<<camada>>
<<camada>>
<<camada>>
<<camada>>
<<camada>>
Camada n
Camada n-1
Classesorganizadasem camadas
Diagrama de classes
12
Arquitetura de Software, © Jair C Leite
Evolução das Arquiteturas de GIU
Fonte: Kazman, M & Bass, L. “Software Architectures for Human-Computer Interaction: Analysis and Construction”
Arquitetura de Software, © Jair C Leite
Modelos de arquitetura de SI – visãoexecução
• Modelo Linguístico:– Léxico, sintático e semântico
• Modelo Seeheim:
• Modelo Arch/Slinky
presentation dialogue application
dialogue
lexical
physicalfunctional
core
func. coreadaptor
Fonte: Dix et. al.,
13
Arquitetura de Software, © Jair C Leite
Seeheim model
Presentation DialogueControl
Functionality(applicationinterface)
USERUSER APPLICATION
switch
lexical syntactic semantic
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
lexical
physicalfunctional
core
func. coreadaptor
14
Arquitetura de Software, © Jair C Leite
MVC – model-view-controller
model
view
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 controlede entrada e mudanças dos dados. Todas as janelas devem seratualizadas sempre que houver mudanças nos dados.
• Solução: Utilizar o padrão Observer e estendê-lo para permitir o controledas janelas baseado-em-eventos. O Padrão MVC estende o Observerincorporando um elemento controlador (Controller). O MVC foi introduzidooriginalmente no Smalltalk-80.
A = 50%B = 30%C = 20%
A B C
15
Arquitetura de Software, © Jair C Leite
Padrão MVC – estrutura
Model
coreDataobservers
Attach(Observer)Detach(Observer)Notify ( )
getDataService( )
View
myModelmyController
Initialize(Model)makeController( )Activate( )Display()Update()
Controller
myModelmyView
Initalize(Model,View)handleEvent( )Update( )
Observer
Upadate( )
1..*update
AttachgetData
create
AttachcallService
Arquitetura de Software, © Jair C Leite
Padrão MVC – dinâmica
m:Model
:main
v:View
v:Controller
Initialize(m) Attach(v)
Initialize(m,v)
Attach(c)
startEventProcessing
handleEvent( ) Service( )Update( )
Display( )getData( )
makeController( )
Update( )getData( )
16
Arquitetura de Software, © Jair C Leite
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 deuma forma hierárquica
abstraction presentation
control
Arquitetura de Software, © Jair C Leite
Padrão PAC – Presentation-Abstraction-Control• Contexto
– Desenvolvimento deaplicações interativasbaseadas em agentes
• Problema– O sistema é baseado em
agentes e é importanteseparar as responsabilidadese permitir decomposiçãohorizontal e vertical
• Solução– Estruturar o sistema como
hierarquia de agentescooperativos (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
17
Arquitetura de Software, © Jair C Leite
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
funcionalidadeprincipal
– Controlar ahierarquia deagentes
• Agentes nívelintermediário– Coordenadar os
agentes nível base– Compor agentes
bases em umaúnica unidade maisabstrata
• Agentes nível base– Prover uma visão
específica– Prover uma serviço
do sistema
18
Arquitetura de Software, © Jair C Leite
Estrutura de um agente PAC
• O agente base devepossui componentes:– Presentation
• Visualização einteração com o usuário
– Control• Interação com o
componente de nívelintermediário
– Abstraction• Mantém informações
sobre os dados aserem exibidos
ViewCoordinator
Top Related