Padrões Arquiteturais em Sistemas com Interfaces de...

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


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


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 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 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 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


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


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 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 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 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


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 genérica para sistemasinterativos

Softwaredaaplicação

Interface

Componentes da interface

Sistemade

Janelas

SistemaOpera-cional

Hardware

Sistema Interativo

SoftwareUsuário

8


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


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


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)


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


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


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


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.


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


Evolução das Arquiteturas de GIU

Fonte: Kazman, M & Bass, L. “Software Architectures for Human-Computer Interaction: Analysis and Construction”


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


Seeheim model

Presentation DialogueControl

Functionality(applicationinterface)

USERUSER APPLICATION

switch

lexical syntactic semantic


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


MVC – model-view-controller

model

view

controller


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


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


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


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


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


PAC – organização em camadas

• O PAC organiza agentes em camadas• Cada agente segue o MVC


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


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

Padrões Arquiteturais em Sistemas com Interfaces de...

Documents

Transcript of Padrões Arquiteturais em Sistemas com Interfaces de...