1

Introduo ao Java Swing e AWT

Como se v pela figura, saber construir interfaces grficas com o utilizador no significa saber construir boas interaces. No entanto, para saber desenhar e implementar boas interfaces, o primeiro passo um passo meramente tcnico que consiste em aprender uma linguagem de construo de interfaces grficas. Assim, este captulo do Guia dos Laboratrios de Interaco Homem-Mquina pretende iniciar os alunos na construo de Interfaces com o utilizador usando as Java Foundation Classes (JFC) Swing. No que diz respeito linguagem Java, a programao de Interfaces Grficas com o Utilizador, frequentemente designadas por GUIs (do ingls Graphical User Interfaces) deu os seus primeiros passos com o Abstract Window Toolkit (AWT). O AWT tem estado presente em todas as verses do Java. Os objectos AWT so construdos sobre objectos de cdigo nativo, o que fornece um look-and-feel nativo. Costumam ser designados como o menor denominador comum de todas as plataformas. Os objectos Swing (que so os que iremos estudar) so escritos em Java puro e apresentam o mesmo look-and-feel em todas as plataformas. No entanto, podem ser adaptados pelo programador para estilos particulares. No JDK 1.2, os objectos Swing so parte integrante das JFCs. Por todos estes motivos, os objectos AWT caram em desuso e em importncia ao longo do tempo.

Componentes Bsicos
O seguinte esquema mostra a maioria das classes que compem o Java Swing e mostra tambm a relao entre as classes AWT (a amarelo) e as classes Swing (a azul):

Interaco Homem-Mquina Guia dos Laboratrios

Pedro F. Campos e Nuno J. Nunes

Figura 1: Diagrama resumido das classes AWT (amarelo) e Swing (azul). Vamos comear pelas classes JButton e JFrame. Vamos criar dois botes com imagens e responder perante a seleco deles. Alm de reagir ao rato vamos responder tambm a eventos vindos do teclado atravs dos chamados aceleradores. Obtenha os ficheiros para este exemplo: FirstSwing.java, bee.gif e dog.gif. Importe o pacote Swing. Defina duas instncias da classe Icon na classe FirstSwing chamadas bee e dog. Carregue os ficheiros dessas duas imagens. Crie dois botes com cone chamados bee e dog. Adicione um acelerador a cada boto. Ao trabalharmos com JFrames adicionamos componentes a uma rea interior JFrame: obtenha uma referencia para este Container atravs do mtodo getContentPane() . Para fazer com que os botes apaream um por cima do outro, modifique o esqueleto do construtor para que o layout (disposio) do contedo seja um GridLayout com 2 linhas e 1 coluna. Adicione os botes a esse GridLayout. Corra e teste a IU. Note que a tecla aceleradora a Alt em Windows e Solaris e Option em Mac.

Interaco Homem-Mquina Guia dos Laboratrios

Pedro F. Campos e Nuno J. Nunes

Fornecendo opes ao utilizador

Nesta seco vamos explorar as classes JRadioButton, JCheckBox e JScrollPane. So as classes mais usadas quando se pretende possibilitar ao utilizador a realizao de uma ou mais escolhas. Sero utilizadas na construo de um programa para encomendas de pizzas que ilustra esta situao. Existem trs possveis tamanhos para as pizzas (Pequena, Mdia e Grande) assim como trs possveis ingredientes (Pimentos, Anans e Pepperoni). Como designer da IU, seu trabalho mostrar as opes ao cliente e deix-lo seleccionar a encomenda. Uma vez seleccionada a encomenda, deve ser mostrada uma imagem da pizza especificada. Comece por obter os ficheiros Order.java (cdigo esqueleto inicial) e pizza.jar. Guarde o ficheiro da imagem na sua directoria de trabalho. Primeiro vamos criar um ButtonGroup chamado sizeGroup com trs objectos JRadioButton. Para o cdigo de tratamento de eventos (j includo) funcionar sem modificaes, temos de declarar a varivel sizeGroup como final. As etiquetas ( labels) dos botes devem ser Small, Medium e Large. Large deve estar seleccionado inicialmente. Para cada boto, associe um ActionCommand etiqueta de texto. Isto permite perguntar ao ButtonGroup qual o JRadioButton que se encontra seleccionado. Coloque os botes rdio numa Box vertical na rea esquerda do cran. Adicione uma etiqueta Tamanho ao topo dessa Box. Faa com que ela aparea a uma distncia igual (verticalmente) com 5 pixels a separar os itens. O painel de contedo da JFrame pode ser referenciado pela varivel local content. Para os ingredientes, crie trs itens Checkbox chamados peppers, pepperoni e pineapple com as etiquetas textuais apropriadas para os trs ingredientes (veja a Figura com o resultado final). Devem aparecer todos no-seleccionados e todas as variveis devem ser declaradas como final para que o cdigo de tratamento de eventos funcione sem modificaes. Para cada uma das checkboxes, em vez de usar a caixa de escolha standard, crie cones nas cores apropriadas para os estados seleccionado/no-seleccionado. Existe uma classe que suporta isto, ColoredToggle, cujo construtor requer uma cor e o estado de toggle. Existem trs cores pr-definidas que podemos usar: pepperColor , pepperoniColor, pineappleColor.

Interaco Homem-Mquina Guia dos Laboratrios

Pedro F. Campos e Nuno J. Nunes

Associe os cones aos objectos JCheckbox apropriados. Use o mtodo setIcon() para associar o cone ao estado no-seleccionado e setSelectedIcon para o estado seleccionado.

Coloque as checkboxes numa Box vertical na rea direita do cran. Adicione uma etiqueta Ingredientes a caixa do tamanho. Por fim, crie um JScrollPane com um JLabel para a zona central do cran. O label ser usado para mostrar a imagem da pizza. Necessita ser declarado como final e ter o nome imageLabel. O boto de encomenda de pizza est j colocado no cran no quadrante Sul (no cdigo esqueleto inicial). Corra o programa desenvolvido e teste a IU.

Organizando espacialmente a informao

Para organizar a informao em termos de grupos e espao existe outro mecanismo alm dos grid layouts: as fronteiras (borders). Obtenha o exemplo referente a esta seco e importe o pacote border. Vamos criar uma grelha com 2 linhas e 3 colunas de botes que demonstrem as borders pr-existentes assim como as que podemos criar. Comece por obter uma referncia rea de contedo interno da JFrame. Crie uma grelha de 2 linhas por 3 colunas para colocar botes. Deixe um espao de 5 pixis na horizontal e na vertical. Para o primeiro boto, crie um JButton e coloque a sua fronteira a cinzento com uma linha LineBorder. Adicione-lhe uma etiqueta Um e adicione o boto interface. Para o segundo boto, crie um JButton com a border EtchedBorder e a etiqueta Dois. Para o terceiro boto crie um JButton com a fronteira vazia e dois pixis de espao volta. A etiqueta deste boto Trs. Para o quarto, use uma TitledBorder para mostrar o ttulo Clica-me num tipo de letra 10 pontos, itlico centrado no topo de uma LineBorder preta e adicione a etiqueta Quatro. Antes de criar o quinto boto, crie uma subclasse de JButton que ir mostrar uma fronteira diferente quando o boto seleccionado (clicado). Chame essa classe DoubleBorderedButton e faa o seu construtor aceitar dois objectos Border como parmetros.
8

Interaco Homem-Mquina Guia dos Laboratrios

Pedro F. Campos e Nuno J. Nunes

Adicione um MouseListener e faa-o alternar entre os dois tipos de border quando o rato for clicado. Para o quinto boto, crie um DoubleBorderedButton. Faa uma das suas borders ficar com relevo (BevelBorder) com uma cor de destaque azul e sombra amarela. Para a outra faa o mesmo mas com o relevo ao contrrio. A etiqueta deste boto deve ser Azul. O ltimo boto usa uma border diferente, DashedBorder. Esta mostra uma linha a tracejado em vez da slida. Antes de us-la, porm, preciso completar a definio. A interface Border tem trs mtodos, paintBorder(), isBorderOpaque() e getBorderInsets(). Os mtodos paintBorder() e isBorderOpaque() j esto definidos. Defina o mtodo getBorderInsets() para retornar um objecto Insets com THICKNESS volta. THICKNESS uma constante pr-definida na classe DashedBorder. Compile, corra e teste. O resultado dever ser algo semelhante a esta figura:

Uma aplicao completa: editor de texto

Nesta seco vamos construir um editor de texto muito simples, mas com uma barra de menus, barra de ferramentas e tooltips, como nas aplicaes completas. O editor precisa de menus para criar um novo texto, abrir um texto j existente, gravar um texto, fechar a janela e mostrar uma caixa Acerca de.... A barra de ferramentas precisa de botes para Novo, Abrir, Guardar e Acerca de e mostra tambm tooltips. Obtenha o cdigo esqueleto para este exemplo. Este cdigo j contm as seguintes funcionalidades:
doNewCommand() doOpenCommand() doSaveCommand() doAboutCommand() doCloseCommand(statusCode)

excepo do doAboutCommand(), ser necessrio fazer as ligaes necessrias ao tratamento de eventos. Para o comando doAbout() ser necessrio criar o correspondente JDialog. No cdigo esqueleto comece por criar do topo para baixo, uma JToolbar, JTextArea e uma JLabel (para uma mensagem de estado do sistema). Guarde as referncias para a JTextArea e JLabel no painel de variveis de instncia pane e statusInfo, respectivamente, j que os mtodos de tratamento de eventos necessitam de lhes aceder. Coloque a JTextArea dentro de um JScrollPane a fim de suportar scrolling .
9

Interaco Homem-Mquina Guia dos Laboratrios

Pedro F. Campos e Nuno J. Nunes

A JToolbar no deve ser flutuvel para no ser arrastada fora da frame. Crie agora uma JMenuBar e adicione-a JFrame. Crie o primeiro menu nessa JMenuBar. Crie um JMenu chamado Ficheiro com os respectivos itens (JMenuItems): Novo, Abrir..., Guardar e Fechar. Coloque um separador entre Guardar e Fechar. Adicione uma mnemnica de teclado para cada item. Para cada JMenuItem, crie um ActionListener annimo para processar o evento e chamar o mtodo apropriado ao tratamento desse evento (ex: Novo ... doNewCommand() etc.) No mtodo doAboutCommand(), crie um JDialog chamado dialog que ir mostrar a informao do Acerca de.... Esta varivel tem de ser final a fim de poder ser usada no tratamento de eventos interno. Agora que os menus esto feitos, resta a barra de ferramentas. Vamos criar quatro JButtons, chamados Novo, Abrir..., Guardar e Acerca de..., e coloc-los na barra. Adicione um separador entre o Guardar e Acerca de....

Para cada boto, adicione uma tooltip com uma mensagem apropriada. Crie ainda um ActionListener annimo para processar o evento e chamar o mtodo necessrio ao tratamento do evento. Compile e corra o editor de texto.

Criando interfaces Swing usando o padro Modelo-Vista-Controlador

O padro Modelo-Vista-Controlador serve para tornar a apresentao independente dos dados e das operaes sobre esses dados. Tornou-se nos ltimos anos um padro muito utilizado e os prprios programadores do Swing o aplicaram ao desenhar as classes que vimos na seco anterior. A robustez deste padro permite criar interfaces grficas com o utilizador que so extremamente flexveis, requerendo um esforo mnimo para alter-las, mesmo que j estejam colocados todos os componentes no programa. A arquitectura MVC composta por: Modelo: o modelo representa os dados do domnio da aplicao. Serve como uma aproximao via software ao processos e tarefas da vida real. Ex.: num sistema de reservas de hotel, o modelo contm os dados sobre clientes, quartos, reservas.
10

Interaco Homem-Mquina Guia dos Laboratrios

Pedro F. Campos e Nuno J. Nunes

Vista: A vista apresenta o contedo de um modelo. responsabilidade da vista manter a consistncia quando o modelo se altera. Controlador: o controlador traduz as interaces realizadas na vista em aces a serem realizadas pelo modelo. Em Swing, por exemplo, as interaces podem ser cliques no boto do rato ou seleces de itens num menu. As aces realizadas pelo modelo incluem activar processos de negocio (por exemplo, iniciar uma reserva) ou alterar o estado do modelo. Baseado nas interaces do utilizador e no resultado das aces do modelo, o controlador responde seleccionando uma vista apropriada.

Vistas em rvore
O Swing fornece um componente que permite desenhar vistas em rvore que mostram uma vista hierarquizada de outros componentes: JTree. Cada n da JTree implementa a interface TreeNode, onde a classe fornecida por defeito a DefaultMutableTreeNode. Nesta seco, vamos criar uma vista hierrquica muito simples contendo algumas das classes da biblioteca Swing. Vamos mostrar a rvore numa caixa com scroll para o caso da rvore ficar maior do que a frame que a contm. Quando o utilizador seleccionar um n, devemos mostrar tanto a localizao especfica desse n como o caminho para l chegar. Obtenha o cdigo esqueleto para este exemplo e comece por importar o pacote Swing tree. De seguida, crie um conjunto de objectos DefaultMutableTreeNode no construtor do TreeExample, um para cada n na hierarquia de classes.
Component Container Box JComponent AbstractButton JButton JMenuItem JToggleButton JLabel ... [literalmente "..."]

Use construes do tipo DefaultMutableTreeNode component = new DefaultMutableTreeNode("Component");

Uma vez criados todos os ns, adicione-os a cada um para construir a hierarquia. DefaultMutableTreeNode inclui um mtodo add que define os filhos de um n. Uma vez criada a hierarquia, crie uma classe que implemente TreeSelectionListener. Faa-a mostrar a etiqueta da clula seleccionada e o caminho completo at ela. Depois de criar a classe TreeSelectionListener, instancie-a. Crie uma classe TreePanel e passe-a raiz do componente da hierarquia e ao TreeSelectionListener. Adicione o painel frame. Vamos completar a descrio do TreePanel depois. A classe TreePanel ir oferecer a representao visual da rvore. Modifique o construtor do TreePanel para que este crie uma JTree chamada tree ligada root passada no construtor. Modifique a propriedade lineStyle da rvore para Angled. Associe o TreeSelectionListener JTree se este for no-nulo.
11

Interaco Homem-Mquina Guia dos Laboratrios

Pedro F. Campos e Nuno J. Nunes

Crie ento um objecto JScrollPane e coloque a rvore nesse objecto. Compile, corra o programa e teste a IU.

Exerccios
1.1. Escreva um programa que permite ao utilizador escolher uma (e apenas uma) de entre as seguintes trs opes: Dolby B, Dolby C e Dolby S. O programa deve tambm mostrar uma legenda com a opo seleccionada. 1.2. Escreva um programa que apresente trs botes: Desporto, Msica e Arte. O programa deve permitir ao utilizador seleccionar os botes apropriados atravs do rato e tambm atravs do teclado via uma mnemnica onde uma letra sublinhada utilizada para a seleco. 1.3. Crie uma simples interface de login/password em Swing. No se preocupe em validar ou verificar os campos de texto, concentre-se apenas na interface. 1.4. Crie uma interface que permita ao utilizador seleccionar uma estao de rdio de entre as seguintes: Rdio Clube Ingls Rdio Especial Rdio Renascimento Rdio 4

(a) a partir da barra de menus da aplicao Swing; (b) a partir de um menu pop-up; (c) a partir de uma toolbar; 1.5. A Loja do Cidado contratou-o para desenhar em Java Swing uma interface de introduo de dados do cidado, para ser usado pelos funcionrios. A interface deve permitir a introduo de: Primeiro e ltimo Nome; Morada, que inclui Rua, Nmero de Porta, Cdigo Postal e Cidade; Tipo de requisio (h trs tipos: B.I., Passaporte e Carta de Marinheiro).

12

Interaco Homem-Mquina Guia dos Laboratrios

Pedro F. Campos e Nuno J. Nunes

1.6. Redesenhe a interface anterior usando containers para dividir a informao no espao de interaco. 1.7. Crie uma interface simples que apresente: Trs botes so dispostos horizontalmente e etiquetados como H1, H2 e H3; Trs botes so dispostos verticalmente e etiquetados como V1, V2 e V3; Os botes horizontais devem apresentar uma border vermelha volta; Os botes verticais devem apresentar uma border azul volta; Os botes verticais devem ser centrados e alinhados com o boto H2 do painel horizontal.

1.8. Crie uma interface que permite ao utilizador compor uma mensagem de correio electrnico semelhante da seguinte figura:

13

Casos de Utilizao Essenciais

In The Interaction Designers Coffee Break, www.guuui.com

Most of us do many things quite well without having much of a clue as to precisely how we do them. L. Constantine, Software For Use.

Motivao
Como so desenhadas as Interfaces com o Utilizador (IU) hoje em dia? As boas abordagens so aquelas onde se ganha uma correcta percepo das tarefas do utilizador e do papel que este assume perante o sistema. So abordagens iterativas, em que se constroem e revem modelos e prottipos da IU. As abordagens aceitveis (e infelizmente mais frequentes) consistem em implementar um prottipo da IU recorrendo aos populares Interface Builders, focando-se na disposio dos elementos, mas imitando IUs familiares ou bem sucedidas e seguindo as convenes (as famosas Guidelines). As abordagens realmente ms focam-se na implementao e nos aspectos tcnicos do sistema, deixando a construo da IU para ltimo plano. Normalmente os designers que seguem estas abordagens assumem que so eles prprios os utilizadores do sistema. Portanto, se eles se sentem familiares e confiantes, tambm os utilizadores finais do produto se sentiro.

Casos de Utilizao Essenciais de Constantine

No contexto do desenvolvimento de software, e em particular no desenvolvimento da Interface com o Utilizador (IU), perguntar meramente aos utilizadores que tarefas eles realizam e como as realizam no suficiente para nos permitir desenhar bons programas. Eles podem responder-nos, com toda a honestidade, o que eles acreditam que fazem no seu quotidiano laboral, mas se os espreitarmos a trabalhar poderemos concluir que os vemos a fazer coisas diferentes. Aprender a desenhar bons programas requer por isso um trabalho conjunto entre analistas e utilizadores, a fim de evolurem ambos para uma compreenso precisa do trabalho que dever ser suportado pelo produto a realizar. esse o objectivo dos

Interaco Homem-Mquina Guia dos Laboratrios

Pedro F. Campos e Nuno J. Nunes

modelos de tarefas que representam a estrutura das necessidades dos utilizadores: a arquitectura do uso do sistema (Constantine, 2003). Existem muitas formas de modelar o uso de um sistema. Desde diagramas de fluxo (que descrevem as tarefas em termos de eventos sequenciais) at cenrios (que representam narrativas de uma ou mais actividades). Nos casos de utilizao estruturados, a narrativa do cenrio de utilizao do sistema dividida em duas seces: o modelo das aces do utilizador, que mostra o que o utilizador faz, e o modelo de resposta do sistema, que mostra como o sistema reage ao utilizador. A Tabela seguinte mostra um exemplo clssico de um caso de utilizao estruturado para a tarefa de obter dinheiro a partir de uma caixa multibanco: Obter dinheiro
Aces do Utilizador Inserir carto Resposta do Sistema Ler fita magntica Pedir PIN Inserir PIN Verificar PIN Mostrar menu de opes de transaco Carregar na tecla Pedir quantia a levantar Inserir quantia Mostrar quantia Carregar na tecla Devolver carto Remover carto Fornecer dinheiro Remover dinheiro

Os casos de utilizao estruturados tipicamente contm muitas pr-definies (quer implcitas quer explcitas) sobre a forma da IU que ainda est para ser desenhada. Tendem por isso a ficar muito prximos dos detalhes de implementao do sistema, e se nos basearmos num caso de utilizao muito concreto que contenha decises de desenho implcitas, corremos o risco de perder muitas hipteses de obter um desenho bom, focado nos utilizadores e no no computador, linguagem de programao, etc. Isto levou inveno dos casos de utilizao essenciais, que so definidos da seguinte maneira: Um caso de utilizao essencial uma narrativa estruturada, expressa na linguagem do domnio da aplicao e dos utilizadores, composta por uma descrio simplificada, generalista, abstracta e independente da tecnologia da tarefa ou interaco que completa, com significado e bem definida do ponto de vista dos utilizadores, cujos papis personificam o propsito ou intenes subjacentes interaco. Um caso de utilizao essencial estruturado em trs partes: uma frase que descreve a inteno expressa do utilizador, e uma narrativa dividida em duas partes: o modelo da inteno do utilizador e o modelo da responsabilidade do sistema.

16

Interaco Homem-Mquina Guia dos Laboratrios

Pedro F. Campos e Nuno J. Nunes

A diferena entre um caso de utilizao essencial e um caso de uso estruturado pode parecer subtil, mas as consequncias no. Constantine descreve o seguinte exemplo, que consiste em reescrever o caso anterior na forma essencial, focando-se nas intenes e no nas aces, e tambm simplificando e generalizando a partir do caso concreto. Comeamos por nos interrogar sobre o porqu de um utilizador inserir um valioso carto numa caixa multibanco. primeira vista, pareceria uma aco ridcula, sobretudo tendo em conta que uma mquina pode falhar e ficar com o carto, nunca o devolvendo. No entanto, milhes de utilizadores cumprem esta tarefa todos os dias. Portanto, a questo que pomos : Para qu? Para que ele (o utilizador) se identifique perante o sistema multibanco. Eles fazem isto porque no querem que mais ningum retire dinheiro das suas contas. O caso essencial reescrito desta forma: Obter dinheiro
Intenes do Utilizador Identificar-se Responsabilidades do Sistema Verificar identidade Oferecer escolhas Escolher Fornecer dinheiro Levar dinheiro

Este caso de utilizao essencial dramaticamente mais curto e simples que o concreto (para a mesma interaco) porque inclui apenas os passos que so essenciais e de interesse genuno ao utilizador. Visto ser orientado ao problema, e no soluo, deixa propositadamente em aberto muitas possibilidades em aberto em relao ao desenho e implementao do sistema. Por exemplo, alm de cartes de fita magntica, existem muitas outras maneiras de identificar um utilizador perante um sistema. A caixa multibanco pode examinar a retina ou a impresso digital para descobrir quem est a utilizar o sistema. Outra possibilidade que deixada em aberto pelo caso essencial oferecer as escolhas atravs da voz ou confirm-las pelo processamento da resposta vocal.

Introduo ao mtodo Wisdom

O mtodo Wisdom (Whitewater Interactive System Development with Object Models) foi desenvolvido para ir de encontro s necessidades de desenvolvimento das pequenas equipas de software que precisam de desenvolver e manter sistemas interactivos seguindo um processo de qualidade (Nunes, 2000b). O Wisdom uma nova proposta de um mtodo de desenvolvimento de software simplificado que compreende trs aspectos importantes: (i) o processo Wisdom, que define uma alternativa ao Processo Unificado especialmente adaptada ao desenvolvimento de software por pequenos grupos de pessoas de uma forma rpida e assente num modelo controlado de prototipificao evolutiva;

17

Interaco Homem-Mquina Guia dos Laboratrios

Pedro F. Campos e Nuno J. Nunes

(ii) o modelo de desenvolvimento subjacente ao processo Wisdom, que assenta numa nova arquitectura de modelos UML que suporta o desenvolvimento centrado nos utilizadores e o desenho de interfaces com o utilizador; (iii) a arquitectura Wisdom introduz novos modelos UML que suportam a modelao de perfis de utilizadores, da interaco, do dilogo homem-mquina, e das questes de apresentao; (iv) a notao Wisdom uma contextualizao e extenso do UML que define um novo conjunto de elementos de modelao que suportam o processo e a arquitectura Wisdom. Como o Wisdom um mtodo focado nos sistemas interactivos, utiliza a interpretao essencial dos casos de utilizao de Constantine, que vimos na seco anterior. O Wisdom guiado pelos casos de utilizao, os quais tambm servem para encontrar e especificar classes de anlise, fluxos de tarefas, espaos de interaco e mesmo requisitos no-funcionais (usando notas/comentrios). Os fluxos de tarefas so fulcrais na abordagem Wisdom. Um fluxo de tarefas corresponde a uma descrio das intenes do utilizador e responsabilidades do sistema durante o decorrer de uma tarefa especfica. Essa descrio feita de uma forma independente da tecnologia. Na soluo proposta no Wisdom, promove-se uma representao diagramtica que facilita simultaneamente a integrao com materiais utilizados em sesses participadas ( esquerda) e diagramas de actividade UML que so fceis de manter, relacionar com outros elementos de modelao e expandir medida que o conhecimento do problema aumenta. Desta forma, o Wisdom combina as narrativas essenciais propostas por Constantine com tcnicas participadas. Esta representao, consistente com a norma da UML, promove a recolha de requisitos atravs de tcnicas participadas uma vez que permite uma melhor manipulao do que as narrativas em linguagem natural propostas por Constantine. Os fluxos de tarefas, construdos inicialmente em sesses participadas atravs de materiais lowtech (cartes adesivos, stickers, etc.), so depois traduzidos em diagramas UML fceis de manter, estender, relacionar e documentar pela equipa de desenvolvimento. A ideia garantir que a equipa de desenvolvimento produza uma interface de utilizador que reflicta a estrutura do uso do produto e no a estrutura interna da aplicao.

18

Interaco Homem-Mquina Guia dos Laboratrios

Pedro F. Campos e Nuno J. Nunes

Figura 2: Exemplo de modelao Wisdom para um sistema de reservas de hotel: (a) modelo de casos de utilizao essenciais para dois utilizadores distintos; (b) modelo do domnio e (c) fluxo de tarefas para o caso de uso check-out. [Retirado de (Nunes, 2000a)]. A Figura 2 ilustra a modelao de casos de utilizao essenciais e fluxo de tarefas para um exemplo clssico: um sistema de reservas de hotel: The guest makes a reservation with the Hotel. The Hotel will take as many reservations as it has rooms available. When a guest arrives, he or she is processed by the registration clerk. The clerk will check the details provided by the guest with those that are already recorded. Sometimes guests do not make a reservation before they arrive. Some guests want to stay in non-smoking rooms. When a guest leaves the Hotel, he or she is again processed by the registration clerk. The clerk checks the details of the staying and prints a bill. The guest pays the bill, leaves the Hotel and the room becomes unoccupied. O diagrama de casos de utilizao essenciais (a) exemplifica um requisito no funcional (Availability must be real time) . O modelo de domnio (b) representa os objectos mais importantes no contexto do sistema. O fluxo de tarefas (c) modelado em UML por um diagrama de actividade que no exemplo da Figura refere-se ao caso de utilizao da tarefa de Checkout.

Exerccios
2.1. Suponha que est a construir uma ferramenta de modelao (UML por exemplo) e que aps algumas iteraes voc e a sua equipa chegaram ao esquema de casos de utilizao descrito na figura seguinte:

19

Interaco Homem-Mquina Guia dos Laboratrios

Pedro F. Campos e Nuno J. Nunes

A fim de refinar o caso de utilizao Procurar Modelo, especifique o caso de utilizao essencial seguindo a norma de Constantine. De seguida especifique (para o mesmo caso) o diagrama de fluxo de tarefas de acordo com o mtodo Wisdom. 2.2. Considere um caso de utilizao consultar saldo bancrio. Especifique o caso de utilizao essencial e o diagrama de fluxo de tarefa. Repita o mesmo exerccio para o caso de utilizao transferir dinheiro (entre contas bancrias) e consultar transaces do carto

20

Modelao da Arquitectura Wisdom

na fase de anlise que so refinados e estruturados os requisitos descritos na arquitectura do uso do sistema. As principais actividades de anlise so identificar e estruturar classes de anlise e classes especficas ao mtodo Wisdom (espaos de interaco e tarefas). As classes de anlise representam abstraces de conceitos capturados na fase de requisitos. So focadas nos requisitos funcionais, deixando os requisitos nofuncionais para a fase de desenho. Seguindo a norma UML, as classes de anlise so divididas em trs tipos: entity (entidade, informao passiva), control (controlo, lgica de negcio complexa) e boundary (fronteira, comunicao com o exterior). O mtodo Wisdom estende a modelo conceptual de anlise do UML introduzindo duas novas classes especficas interface com o utilizador. Espaos de interaco (interaction spaces) so uma classe que modela a interaco entre o sistema e os actores. So responsveis por receber e apresentar informao de/para os utilizadores. As classes interaction spaces tm aces (actions) em vez de operaes e atributos estereotipados com input e output elements que modelam, respectivamente, informao recebida pelo utilizador e informao apresentada ao utilizador. A outra classe a das Tarefas (tasks). As classes tarefa so responsveis pelo sequenciamento das tarefas e pela consistncia das entidades de apresentao (espaos de interaco). As classes tarefa encapsulam as dependncias temporais complexas, e outras restries, entre actividades, isolando as alteraes na estrutura de dilogo; A Figura 3 mostra as notaes para o modelo de anlise e de interaco.

Interaco Homem-Mquina Guia dos Laboratrios

Pedro F. Campos e Nuno J. Nunes

Figura 3: Notaes alternativas para os esteretipos de classes dos modelos de anlise e interaco. A Figura 4 ilustra um exemplo de uma arquitectura Wisdom para o mesmo sistema de reservas de hotel do captulo anterior, com as classes de anlise esquerda e as classes de interaco direita.

Figura 4: Exemplo da arquitectura Wisdom para o modelo de Interaco e de Anlise, para um sistema de reservas de hotel.

Exerccios
3.1. Considere que est a modelar uma sistema para deteco e gesto de informao sobre defeitos de usabilidade de programas. Para o seguinte diagrama de tarefas relativo ao caso de utilizao Gravar Defeito de Usabilidade, apresente uma arquitectura para o modelo de anlise e de interaco seguindo o mtodo Wisdom:

22

Interaco Homem-Mquina Guia dos Laboratrios

Pedro F. Campos e Nuno J. Nunes

3.2. Para os diagramas de fluxo de tarefas relativos ao exerccio 2.2 (casos de utilizao consultar saldo bancrio, transferir dinheiro (entre contas bancrias) e consultar transaces do carto, especifique uma arquitectura conceptual Wisdom.

23

Modelao do desenho de Apresentao Wisdom

A notao Wisdom (Nunes, 2000a) consiste num conjunto de notaes compatveis com o UML, que suportam a modelao eficaz e eficiente de sistemas interactivos. Para suportar a modelao dos aspectos de apresentao da IU numa fase de desenho, o mtodo Wisdom prope as seguintes extenses ao UML (Nunes, 2000a): - Interaction Space, um esteretipo de classe que representa o espao contido na IU onde o utilizador interage com todas as ferramentas e materiais no decorrer de uma tarefa ou conjunto de tarefas inter-relacionadas; - navigates, um esteretipo de associao entre dois espaos de interaco que denota uma mudana de espao de interaco por parte do utilizador; - contains, um esteretipo de associao entre duas classes espaos de interaco que denota que a classe fonte (o contentor) contm a classe alvo (o contedo); Este esteretipo de associao s pode ser utilizado entre dois espaos de interaco e unidireccional; - input element, um esteretipo de atributo que denota informao recebida pelo utilizador, isto , informao sobre a qual o utilizador pode operar (note-se a semelhana deste conceito com os hbridos da notao cannica); - output element, um esteretipo de atributo que denota informao apresentada ao utilizador, ou seja, informao que o utilizador recebe mas no manipula; - action, um esteretipo de operao que denota algo que o utilizador pode realizar na IU e que causa uma alterao significativa no estado interno do sistema. A Figura 5 mostra a criao de interfaces concretas via modelo de apresentao Wisdom, para o mesmo problema que temos vindo a considerar nos captulos anteriores.

Interaco Homem-Mquina Guia dos Laboratrios

Pedro F. Campos e Nuno J. Nunes

Figura 5: Transformao do modelo de apresentao Wisdom do sistema de reservas de hotel numa interface concreta.

Exerccios
4.1. (Exame poca Especial 2003/2004). A Figura seguinte representa uma interface que permite ao utilizador compor uma mensagem de correio electrnico. Apresente um modelo de apresentao para esta interface utilizando as tcnicas do mtodo Wisdom. Comece por reduzir o modelo aos espaos de interaco mais genricos e depois detalhe cada um dos espaos de interaco em termos dos seus elementos de entrada, sada e aces.

25

Interaco Homem-Mquina Guia dos Laboratrios

Pedro F. Campos e Nuno J. Nunes

4.1. A Figura seguinte representa outra interface bem conhecida que permite ao utilizador imprimir uma folha de clculo. Apresente um modelo de apresentao para esta interface. Comece por reduzir o modelo aos espaos de interaco mais genricos e depois detalhe cada um dos espaos de interaco em termos dos seus elementos de entrada, sada e aces.

4.3. Apresente um modelo de apresentao Wisdom para o diagrama de fluxo de tarefas relativo ao caso de utilizao essencial Procurar Modelo do exerccio 2.1. Esboce uma possvel concretizao desse modelo para um sistema Windows.

26

Modelao de Prottipos Abstractos Cannicos

Formas diferentes de retratar janelas: esquerda o abstracto Fentres de R. Delaunay. direita o concreto Venetian Windows de M. Flemingham.

A prototipagem rpida de sistemas interactivos utilizada com o objectivo de validar e avaliar ideias de desenho numa fase inicial do processo de desenvolvimento. Tenta-se, portanto, promover a colaborao entre todas as pessoas envolvidas no projecto (desde os gestores, designers e programadores at aos utilizadores finais), assim como facilitar os ciclos iterativos de reviso e teste. Neste captulo, descreve-se alguns mtodos para o desenvolvimento rpido de prottipos de IU e a notao base que iremos estudar, a notao Abstracta Cannica: uma nova linguagem de especificao de prottipos abstractos que assenta numa notao prtica para definir e comparar ideias de interaco visuais (Constantine, 2003).

Tcnicas para prototipagem rpida de Interfaces

Como vimos no captulo anterior, a linguagem de modelao UML tornou-se uma alternativa muito popular para a estruturao dos elementos de apresentao de sistemas interactivos (Nunes, 2001). Em particular, a notao Wisdom segue a norma do UML, o que promove e facilita a comunicao com os programadores e designers de software. Esta uma boa estratgia para se conseguir alcanar uma maior taxa de aceitao das ferramentas de modelao.

Interaco Homem-Mquina Guia dos Laboratrios

Pedro F. Campos e Nuno J. Nunes

Outra estratgia, utilizada pela abordagem DiaMODL, combina este aspecto com uma ligao mais forte ao elementos concretos da IU (Trtteberg, 2003), esperando-se com isso favorecer o processo de teste, uma vez que o utilizador lida com um cran concreto. A prototipagem de interfaces atravs de ferramentas de esboo electrnicas tambm obteve algum sucesso em sistemas como o SILK (Landay 2001) ou o DENIM (Newman, 2003). O esboo importante durante o processo de prototipagem inicial porque incentiva a criatividade do designer: a ambiguidade inerente dimenso ou tipo dos esboos encoraja a explorao de novos desenhos sem que o designer se perca em detalhes. Isto obriga a que o designer se concentre nos assuntos mais importantes desta etapa, como a estrutura geral e o fluxo da interaco (Landay, 2001). Contudo, a tarefa de reconhecimento dos componentes concretos a partir do esboo no fcil, uma vez que qualquer algoritmo de reconhecimento de padres susceptvel de errar. Testes de usabilidade a estas ferramentas revelaram que alguns utilizadores sentiram dificuldades em manipular e introduzir elementos textuais, assim como em compreender a forma de seleccionar, agrupar e mover objectos.

A notao Abstracta Cannica

Prottipos Abstractos Cannicos (PAC) constituem uma nova linguagem de especificao de IU, proposta por Constantine. Esta linguagem composta por uma coleco estvel de componentes de interface abstractos, desenvolvida a partir de muitas iteraes em projectos da vida real. Estes componentes podem ser seleccionados a partir de uma palette a fim de construir prottipos abstractos cannicos. A existncia de um conjunto normalizado de componentes abstractos facilita a comparao de alternativas de desenho, promovendo simultaneamente a comunicao entre os membros da equipa de desenvolvimento (Constantine, 2003). A notao simblica inerente aos PAC definida a partir de dois smbolos universais, genricos e extensveis: um material ou contentor genrico, representado por um quadrado e uma ferramenta ou aco genrica, representada por uma seta. Os materiais representam contedo, informao, dados ou quaisquer outros objectos da IU manipulados ou apresentados ao utilizador no decorrer de uma tarefa. As ferramentas representam operadores, mecanismos ou controladores que podem ser usados para manipular ou transformar os materiais. Atravs da combinao destas duas classes de componentes possvel gerar uma terceira classe de componentes genricos, designados por hbridos ou materiais activos. Estes representam qualquer componente com caractersticas de ambos os componentes material e ferramenta, como por exemplo um campo para entrada de texto (um material manipulvel que consistem num elemento de IU que apresenta informao que pode ser editada ou introduzida).

Figura 6: Os trs smbolos bsicos sobre os quais assenta a notao abstracta cannica (da esquerda para a direita): ferramenta abstracta genrica, material abstracto genrico e material activo (ou hbrido) genrico.
28

Interaco Homem-Mquina Guia dos Laboratrios

Pedro F. Campos e Nuno J. Nunes

A Figura 1 mostra os trs smbolos bsicos da notao Abstracta Cannica. A Figura contm a notao em mais detalhe. A notao completa e detalhada encontra-se descrita e exemplificada nas figuras seguintes.

Apesar de os PACs no possurem um formalismo preciso nem a semntica necessria a fornecer ferramentas de suporte ou gerao automtica de IU, verificamos que a notao suficientemente expressiva para gerar Interfaces concretas a partir da especificao abstracta cannica.

29

Interaco Homem-Mquina Guia dos Laboratrios

Pedro F. Campos e Nuno J. Nunes

Desenho de Prottipos Abstractos Cannicos

Figura 7: esquerda, uma representao PAC de uma interface de pr-visualizao. direita, um exemplo concreto (dilogo do Microsoft PowerPoint). Na Figura 7, apresentamos as representaes Wisdom e Cannica para o padro de IU identificado e classificado como Pr-visualizao (Welie, 2000). Tambm apresentamos um exemplo concreto deste padro (neste caso, um dilogo do Microsoft PowerPoint). O problema ocorre quando o utilizador procura por um item numa pequeno conjunto de itens e tenta encontrar o item desejado navegando nesse conjunto. Este padro particularmente til quando a natureza do contedo do item no a mesma que a natureza do seu ndice de procura (por exemplo, um conjunto de imagens ou clips udio indexadas pelo nome). A soluo consiste em fornecer ao utilizador uma pr-visualizao do item que estiver seleccionado num determinado instante (Welie, 2000).

Exerccios
5.1. Modele em PAC o padro de Navegao em Contentores. Quando o utilizador necessita de encontrar um item numa coleco de contentores, a soluo deste padro consiste em dividir o espao de interaco em trs partes: uma para visualizar a coleco de todos os contentores, outra para visualizar um determinado contentor e outra para visualizar um determinado item desse contentor. A mostra um exemplo concreto deste padro: o visualizador de Mail/News do Netscape Navigator, assim como a representao de desenho Wisdom. Discuta as vantagens de uma notao em relao outra. Nota : na sua soluo, tenha em conta que o utilizador selecciona, em primeiro lugar, um determinado contentor, depois um item contido nesse contentor e s ento visualiza o item seleccionado. (Sugesto: lembre-se da forma ocidental de leitura/escrita).

30

Interaco Homem-Mquina Guia dos Laboratrios

Pedro F. Campos e Nuno J. Nunes

Figura 8: O padro de Navegao em Contentores. 5.2. Escolha um padro de interface de entre os disponveis na coleco Amsterdam (www.welie.com/patterns). Modele esse padro em Wisdom e PAC. Discuta as diferenas de cada soluo. 5.3. Considere o prottipo abstracto representado na figura seguinte. Apresente uma representao concreta (em esboo ou em Java Swing) para este prottipo. Lembre-se que a soluo deve ser criativa e suportar a tarefa: mostrar uma lista de itens dando ao mesmo tempo a possibilidade de reorden-los. A primeira interface que desenhar provavelmente ir ter problemas. Identifique-os, corrija-os e reitere at chegar a uma soluo no-trivial.

5.4. Proponha um prottipo abstracto cannico para o caso de utilizao essencial relativo ao Procurar Modelo do exerccio 2.1. 5.5. Proponha um prottipo abstracto cannico para o caso de utilizao Transferir dinheiro do exerccio 2.2.

31