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. 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 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 Hardware da IU Designer JFrame frame = new JFrame( MyWindow"); Usuário 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 BIOS Aplicações do usuário API Funções de E/S Interpretador de comandos (shell) Sistema operacional (SO) 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 printf(); API scanf(); 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 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 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 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 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 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 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 genérica para sistemas interativos Interface Software da aplicação Componentes da interface Sistema de Janelas Sistema Operacional Hardware Software Usuário Sistema Interativo 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 aplicação Componentes da interface Toolkits Ferramentas de alto nível Sistema de Janelas Sistema Operacional Hardware 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 8
Camadas de abstração - MS Windows Aplicação para Windows Aplicação para Windows Borland (OWL) Object Windows Library Windows API DOS (Win32) Microsoft Foundation Class DOS Windows API (Win32) Camadas de abstração no X/Unix/Linux Aplicação XWindow/Unix Aplicação Motif Aplicação OPENLOOK (cliente) (cliente) Motif Widgets XView Unix XLib Unix XLib Servidor X Dispositivos Protocolo X 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 OpenGL Core Audio Core Image Darwin 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. Cliente <<usa>> Camada n Camada n-1 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. Camada 1 10
Padrão Layers (Camadas) visão de implementação em UML é um estereótipo de pacotes Camada n Camada n-1 Componentes executáveis exe, jar, lib, dll, etc. Padrão Layers (Camadas) visão lógica em UML Classes organizadas em camadas Camada n Camada n-1 Diagrama de classes 11
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: presentation dialogue application Modelo Arch/Slinky func. core adaptor dialogue lexical Fonte: Dix et. al., functional core physical 12
Seeheim model lexical syntactic semantic USER Presentation Dialogue Control Functionality (application interface) APPLICATION switch Arch/Slinky Acrescenta mais camadas Acrescenta a camada física Acrescenta um adaptador entre diálogo um núcleo funcional func. core adaptor dialogue lexical functional core physical 13
MVC model-view-controller view model 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 B C A = 50% B = 30% C = 20% 14
Padrão MVC estrutura Model update 1..* Observer Upadate( ) coredata observers Attach(Observer) Detach(Observer) Notify ( ) getdata Service( ) Attach getdata View mymodel mycontroller Initialize(Model) makecontroller( ) Activate( ) Display() Update() create Controller mymodel myview Initalize(Model,View) handleevent( ) Update( ) Attach callservice Padrão MVC dinâmica :main m:model Initialize(m) makecontroller( ) v:view Attach(v) v:controller Initialize(m,v) Attach(c) starteventprocessing handleevent( ) Service( ) Update( ) getdata( ) Update( ) Display( ) getdata( ) 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 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 Vários agentes de nível base 16
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 17
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 18