VII.1- Toolkits: Entrada & Comunicações

Transcrição

1 Melhor ou pior? VII Desenvolvimento e Toolkits VII.1- Toolkits: Entrada & Comunicações Developing User Interfaces, Cap. 4, Qual dos dois controlos reduz o volume? O botão de descer para cima ou o botão de descer para baixo? Dan Olsen 2 Melhor e Pior Resumo Aula Anterior Carrinho de Compras Personalização. Porquê? Se o conteúdo não estiver actualizado, consumidores não voltam Quatro modos de coligir informação Editar Entrevistar Deduzir Filtros Colaborativos Standards de desenho Web Necessidade e Vantagens Cascade Style Sheets (CSS) Separação de conteúdo vs apresentação Locais de validação de páginas web 3 4 Sumário Introdução Introdução ao Modelo de Antes das aplicações interactivas de manipulação directa Acontecimentos Sistemas de Janelas Acontecimentos associados a Janelas Encaminhamento de acontecimentos Comunicação entre widgets Arquitecturas de interacção eram muito simples Programas sequenciais Interpretadores linha de comandos (DOS, UNIX) Programa controla e pede entradas Utilizadores esperam pelo programa Utilizadores introduzem informação 5 6 1

2 Programas Sequenciais Programas Sequenciais (cont.) Arquitectura Loop (forever) Programa lê linha de texto Programa analisa entrada Programa avalia o resultado Possivelmente gera saídas End (loop) Problema: Como modelar múltiplas acções dos utilizadores? Por exemplo processador de texto? Precisa de imprimir, editar, inserir, quando o utilizador quiser Geralmente conduz a muitos modos montes de variáveis de estado Exemplos de modos Programas de pintura (linha, bucket-fill, rectângulo, etc) Controlos remotos universais com modo TV / VCR Modos de comando e edição do vi 7 8 Programas Sequenciais (cont.) Modelo de Acontecimentos Problemas com modos? Demasiados modos confundem utilizadores Modelo desenvolvido para suportar criação de Interfaces de Manipulação directa Provocam erros (modo errado) Como alternar entre modos? Permite comunicação entre objectos interactivos e o sistema de entradas/saídas Indicação clara sobre modo corrente (H2-1) Programa espera pelo utilizador (controlo externo) Precisamos de um modelo mais sofisticado para simplificar programação de Sistemas Interactivos Comunicação na Interface Gráfica : Com outras aplicações Com o sistema de janelas Entre os vários elementos que a constituem Com o código que implementa funcionalidade 9 10 Modelo de Acontecimentos Modelo de Acontecimentos Comunicação realizada via Acontecimentos (Event) Todos os acontecimentos gerados vão para uma lista de acontecimentos Um acontecimento é qualquer coisa de interessante que ocorre no sistema Botão do rato premido, Objecto arrastado, Teclado accionado, etc. Fornecida pelo sistema operativo Assegura que os acontecimentos são tratados pela ordem que acontecem Acontecimentos têm: Tipo de acontecimento Posição do cursor ou tecla + modificador Mouse Software Keyboard Software Event Queue Janela à qual se destina o acontecimento

3 Exemplo de Acontecimentos Questões Tratamento Acontecimentos Barra título Cx fechar Divisão entre Aplicação e Sistema de Janelas Pasta Tipos de Acontecimentos que uma janela pode receber Decomposição da IU em objectos de Barra enrolamento Controlo tamanho interacção (widgets / controlos) Distribuição de acontecimentos pelos objectos de Interacção Modelos de comunicação entre objectos Sistemas de Janelas Sistema de Janelas Várias Aplicações simultâneas Separação de funções para evitar o caos Infra-estrutura para suportar serviços comuns Dois aspectos principais: Serviços de software para aplicações Criar & organizar janelas Realizar interacção nas janelas Gestor de janelas Controla tamanho e colocação de janelas Divide o ecrã em fragmentos independentes Programador escreve código para esses fragmentos ou reutiliza (Widgets) Fragmentos são compostos numa estrutura em árvore para fazer uma aplicação Sistema de Janelas é responsável por gerir os acontecimentos Árvore de Interactores Ex. Árvore de Interactores Decompor objectos interactivos em árvore Objectos interactivos tb designados por widgets Rectângulos aninhados Utilizada para distribuir acontecimentos Acontecimentos despachados (enviados) para rotinas nos widgets Estas rotinas (event handlers) processam o acontecimento Variedade de métodos de encaminhamento Detalhes mais tarde Ecrã Janela D:\ipm-slides0203 Janela Interior Menu Bar barra localização barra desenr. vertical área de conteúdo pasta antigas pasta cartoons controlo tamanho Status Bar

4 Ex. Árvore de Interactores Widgets / Controlos = ENT Ecrã Janela Exterior [amarelo] Janela Interior [verde] Resultados [rosa] Texto resultado Teclado [verdeescuro] Botão = Botão Botão + Botão 0 19 Objectos interactivos reutilizáveis Tratam determinados acontecimentos Dizem em que acontecimentos estão interessados A queue de acontecimentos envia acontecimentos para o widget correcto Mudam de aparência ex. Button up / Button down 20 Sistemas de janelas em rede X-Window XWindow e NeWS concebidos para aplicações que podem correr remotamente Usam modelo cliente-servidor Servidor X Software std sistema Utilizador Rede Cliente Software aplicação Notem a inversão da terminologia Utilizador está no servidor e não no cliente Servidor X Interpreta comandos X e envia acontecimentos Determina que janela recebe acontecimentos Envia através da rede para cliente correspondente Cliente X Software de interface X (Xlib) Combina dados gerados pelas rotinas Xlib em pacotes para transmitir ao servidor X-Window Acontecimentos de Entrada Problemas de Interacção? Servidor X Software std sistema Rede Cliente Software aplicação Botões de localizador (rato / caneta) Premido / libertado (Down / Up) modificadores (teclas shift, control, Alt, etc.) duplo click Utilizador Larg. banda (bps) Latência (tempo) Largura de banda em bits por segundo Acontecimentos de deslocamento Permitem desenhar com rato/caneta Arrastar objectos com rato Latência de rede = tempo de transferir e processar dados 23 Acontecimentos de entrada/saída e.g., se entra / sai de uma região / botão 24 4

5 Concretização de Botões Acontecimentos (cont.) Teclado transforma códigos de tecla em ASCII/Latin 1 Botão KeyDown, KeyUp Acontecimentos específicos de janelas mouse enter mouse exit criação / destruição iconificar / restaurar Botão seleccionar / desseleccionar Modificar tamanho redesenhar desenhar porções recém-expostas janela (rect.) Ciclo de Acontecimentos Como são processados os acontecimentos? Event loop Inicialização While (continuar) { obtém acontecimento A Processa acontecimento A } A substância do programa reside no código que processa os acontecimentos 0 switch (A.window) { case TECLA-CINCO: if (A.type == left-down){ quant = *quant; display (quant); Prime tecla last-op = NUMBER; = ENT } switch (A.window) { case TECLA-DOIS: if (A.type == left-down) { quant = *quant; display (quant); last-op = NUMBER; Prime tecla 2 = ENT } = ENT Prime tecla + switch (A.window) { case TECLA-MAIS : if (A.type == left-down){ push (quant); quant = 0; last-op = COM; }

6 0 switch (A.window) { case TECLA_SEIS: if (A.type == left-down) { quant = *quant; display (quant); 0 Prime + - tecla 6 last-op = NUMBER; = ENT } = 6 ENT Prime tecla enter switch (A.window) { case TECLA-ENTER: if (A.type == left-down){ if (last-op == NUMBER) push (quant); result = pop() + pop(); push (result); display (result); quant = 0; last-op = COM; } Filtragem de Acontecimentos Podem usar máscaras para seleccionar = ENT acontecimentos desejados ex., filtrar movimentos localizador num formulário Só recebe acontecimentos de entrada e saída (nos campos) onenter/onexit (javascript) JavaScript filtra automaticamente acontecimentos de arrasto Ignora todos os outros acontecimentos, não desperdiçando recursos Processamento de Acontecimentos Encaminhar Acontecimentos Se utilizador desenrola texto o sistema DEVE: Encaminhar acontecimentos do rato para barra de enrolamento Actualizar representação barra durante o arrasto Notificar a janela de texto que precisa de desenrolar-se para parecer que o texto se deslocou 35 Modelo baseado na árvore de interactores Algoritmo selecciona região mais abaixo e mais à frente na árvore de interactores (que está debaixo do acontecimento ) Barra de desenrolamento ou conteúdo da janela e não a janela exterior (mais baixo na hierarquia) Barra de desenrolamento e não conteúdo (mais à frente) Cada janela processa apenas os seus acontecimentos Conhecido como bottom-first event dispatch 36 6

7 Encaminhar Acontecimentos Comunicação entre Widgets Alternativa de encaminhamento Como comunicam e interactuam os Widgets entre si? Top-down event dispatch Acontecimentos enviados para janela de topo, mais à frente e.g., se a barra de enrolamento se desloca, o texto correspondente deve deslocar-se Esta encaminha-os para uma ou mais descendentes Comunicação Entre Widgets Comunicação Entre Widgets Usando Pseudo-acontecimentos Pseudo não correspondem a entradas Acesso directo a irmãos Indicar janela irmã como propriedade (Tk) reais, mas sim geradas Criam novos acontecimentos para comunicação entre widgets Envia pseudo-acontecimento para widget apropriado Especificar irmã no código (subarctic, AWT) Notificar pai Cada widget tem identificador único Notificam pai widget sobre alterações ocorridas Pai efectua a acção apropriada Resumo Vídeos Modelo de Acontecimentos Acontecimentos de entrada tais como teclado, localizador(rato), janela, etc. Sistemas de Gestão de Janelas Malha principal de acontecimentos serve para Encaminhar (despachar) acontecimentos Árvores de interacção servem para Descobrir quem recebe que acontecimentos Encaminhar acontecimentos Duas abordagens principais + Abaixo e + à frente / top-down Comunicação entre Widgets Directamente ou através do pai 41 BajaVista FoldnDrop 42 7

8 Próxima Aula Definição de MVC Porque precisamos de modelos? Alterando o ecrã Fluxo de acontecimentos Arrastar em cadências interactivas 43 8