Padrões Arquiteturais em Sistemas com Interfaces de Usuário

(1)

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.

(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

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 IU Hardware da IU Designer Usuário

(3)

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

Interpretador de comandos (shell) BIOS Sistema operacional (SO) Funções de E/S Aplicações do usuário API

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

printf(); scanf(); API Aplicação do usuário

(4)

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

Sistema operacional (SO) Funções de E/S Interpretador de comandos read write Analisador sintático Gerador de mens. erros Interpretador de comandos

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

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

(6)

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 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-and-feel:

– o foco em uma janela – como ocorre a

sobreposição entre janelas

– a aparência das janelas

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

interativos

Software da aplicação Interface Componentes da interface Sistema de Janelas Sistema Opera-cional Hardware

Sistema Interativo

Software Usuá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 da aplicação Sistema de Janelas Toolkits Ferramen-tas de alto nível Opera-cional Hardware Sistema

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 Windows Library Microsoft Foundation Class

Camadas de abstração - MS Windows

Windows API (Win32) (Win32)

Aplicação XWindow/Unix

Aplicação Motif Unix Aplicação OPENLOOK Unix

Motif Widgets XView

XLib XLib (cliente) (cliente) Servidor X Dispositivos Protocolo X

(10)

Camadas de abstração no Mac OS X

Darwin Graphics and media

Quicktime Core Audio Core Video Core Image OpenGL Application Frameworks

Cocoa Carbon Java

User experience

Aqua Dashboard Spotlight Accessibility

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

Camada n-1

Camada 1

(11)

Padrão Layers (Camadas) – visão de

implementação em UML

<<camada>> <<camada>> <<camada>> <<camada>> <<camada>> Camada n Camada n-1 <<camada>> é um estereótipo de pacotes Componentes executáveis – exe, jar, lib, dll, etc.

Padrão Layers (Camadas) – visão lógica

em UML

<<camada>> <<camada>> <<camada>> <<camada>> <<camada>> Camada n Camada n-1 Classes organizadas em 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ão

execução

• Modelo Linguístico:

– Léxico, sintático e semântico

• Modelo Seeheim:

• Modelo Arch/Slinky

presentation dialogue application

dialogue lexical physical functional core func. core adaptor

(13)

Seeheim model

Presentation Dialogue_Control

Functionality (application

interface)

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 physical functional core func. core adaptor

(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 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 = 50% B = 30% C = 20%

(15)

Padrão MVC – estrutura

Model coreData observers Attach(Observer) Detach(Observer) Notify ( ) getData Service( ) View myModel myController Initialize(Model) makeController( ) Activate( ) Display() Update() Controller myModel myView Initalize(Model,View) handleEvent( ) Update( ) Observer Upadate( ) 1..* update Attach getData create Attach callService

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

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

uma forma hierárquica

abstraction

presentation

control

Padrão PAC –

Presentation-Abstraction-Control

• 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

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

(18)

Estrutura de um agente PAC

• O agente base deve

possui componentes:

– Presentation

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