aula 12 - diemesleno.com.br · interfaces gráficas do usuário - gui a visicorp era uma das...

Programação Orientada a ObjetosAula 12

Programação Orientada a Objetos

Na aula passada, vimos:

Entrada e Saída

Programação Orientada a Objetos

Na aula de hoje, veremos:

Interfaces Gráficas do Usuário - GUI


A forma como os humanos interagem com os computadores sempre foi uma preocupação da indústria da informática.

Durante algumas décadas, essa interação passou da linha de comando, em modo texto, para desktops em três dimensões e softwares que aceitam comandos por voz ou gestos com o propósito de facilitar e tornar mais intuitiva a utilização das máquinas.


Como boa parte das tecnologias existentes, a ideia de uma Interface Gráfica do Usuário (GUI) começou muito tmeo antes de possuírmos a tecnologia necessária para implementá-la.


Com o surgimento da Smalltalk, linguagem de programação e ambiente de desenvolvimento que possuía uma interface gráfica diferenciada, a GUI começou a ganhar aspectos mais modernos, em 1974.


A grande inovação foram as janelas, que possuíam bordas de títulos que permitiam a identificação e o reposicionamento delas.


O conceito de ícones também surgiu na mesma época, assim como o menu de contexto. No mesmo período, também foram apresentadas as barras de rolagem, as caixas de diálogo e os botões de opções (radio buttons).


Outro passo importante na história das interfaces gráficas foi dada pela startup criada por Steve Jobs e Steve Wozniak, em 1876.

A equipe de desenvolvedores trabalhou em uma interface baseada em ícones, em que cada um deles indicava uma documento ou uma aplicação.


Além disso, a equipe cr iou a pr imeira barra de menu desdobrável (pull-down), que hospedava todos os menus logo nas primeiras linhas da tela.


Outras inovações ficaram a cargo das marcas de verificação (checkmarks), que ajudavam a destacar os itens do menu que estejam ativados, e também o conceito de atalhos de teclado para os comandos mais comuns.

Mais uma novidade foi a aparição do ícone da Lixeira, para onde o usuário podia arrastar arquivos para removê-los posteriormente.

O mouse, que havia se consagrado com três botões, passou a ter apenas um no Lisa (Apple Computer) e, como a interface exigia pelo menos duas ações para cada ícone, uma para selecionar e outra para executar o programa ou arquivo, foi criado o conceito de duplo clique.


A VisiCorp era uma das empresas que também estava trabalhando em interfaces gráficas para computadores pessoais.

Responsável pela planilha eletrônica VisiCalc, a empresa lançou uma interface para PCs, em 1983, mas que não chegou a fazer muito sucesso.

Além do preço alto e de exigir muito recurso de hardware, a VisiOn, como era chamada, também teve alguns retrocessos, como deixar de usar ícones e eliminar o cursor do mouse.


A VisiCorp era uma das empresas que também estava trabalhando em interfaces gráficas para computadores pessoais.


Outra interface que surgiu na década de 80 foi a Tandy DeskMate, da Tandy Computers, e a GEM, que fornecia uma interface gráfica para o DOS (Disk Operating System) e era tão parecida com a interface do computador Lisa que a Apple chegou a processar os fabricantes.


Os computadores Amiga, da Commodore, também introduziram uma nova GUI, a Workbench, que trouxe algumas inovações ao mundo dos computadores pessoais, como a possibilidade de redimensionar ou mover uma janela sem trazê-la para o foco principal.


Em 1986, a Berkeley Softwares lançou a GEOS, interface para computadores Commodore 64 e Apple, que t inha uma aparência parecida com a da GEM. Mais tarde, essa GUI foi portada para PCs e, com isso, acabou se tornando uma concorrente para a Microsoft, que havia anunciado a primeira versão do Windows em 1983.


Uma das mudanças radicais da interface gráfica do Windows foi o fato de que cada janela tinha a sua própria barra de menus, diferentemente do Lisa e dos Macintosh, que tinham uma barra única no topo da área de trabalho.

Outro diferencial, que não sobreviveu até a versão 2.0 do Windows, em 1987, foi a disposição lado a lado das janelas.

Vale lembrar que, no começo, a Microsoft trabalhava como uma empresa terceirizada para a Apple e, por isso, testou os modelos em fase Beta dos Macs. Isso serviu de inspiração para a criação da sua interface gráfica e, durante o lançamento do Windows 2.0, a empresa chegou até a ser processada pela Apple.


Em 1987, também surgiu um novo conceito no mundo das GUIs: o Dock.

A responsável pela criação foi a empresa Acorn Computers, que desenvolveu a Arthur, interface que também foi a primeira a usar fontes com anti-aliasing, mesmo em modo de 16 cores.


Já a NextSTEP, em 1988, foi a interface que introduziu uma aparência 3D aos seus componentes, além de ter sido a primeira a usar o botão em forma de "X" para fechar janelas.


Na mesma época surgiu a primeira versão gráfica do OS/2. projeto colaborativo entre Microsoft e IBM para desenvolver um sistema que pudesse substituir o MS-DOS. A interface da versão 1.1 era muito simular à do Windows 2.0


No fim dos anos 80, muitas interfaces gráficas começaram a surgir para as estações Unix.

Essas GUIs eram executadsa sobre um sistema gráfico e com suporte à rede, conhecido como X.

Mais tarde, esse sistema também se tornou a base dos ambientes gráficos do Linux.

Uma das novidades do X Window System foi o fato de poder habilitar o foco em uma janela apenas posicionando o mouse sobre ela, sem clicar.

Atualmente, muitos projetos gráficos ainda fazem o uso do X, como o KDE e o GNOME.


Durante os anos 90, apenas duas empresas resistiram à "peneirada" do mercado: a Microsoft e a Apple.

As demais entraram em falência ou foram adquiridas por outras companhias.


O Windows ganhou muita popularidade com as versões 3.0, em 1990, e 3.1, em 1992.

Apesar de ainda não ter alguns recursos simples, que já estavam implementados no Macintosh, foram vendidas milhões de cópias dessas versões do sistema da Microsoft.

Mais tarde, com a chegada do Windows 95, a empresa de Bill Gates se consolidou como a líder do mercado e detentora de um dos softwares mais famosos até hoje.


Quando o cenário já parecia ter se estabilizado, eis que surge uma novidade: o BeOS, sistema operacional da Be Incorporated, com uma interface em que a barra de título lembrava a do Smalltalk, ocupando apenas parte de toda a extensão das janelas.


A Apple também continuou inovando a lançou a interface Aqua, para o novo sistema operacional da empresa, o Mac OS X.

Além da aparência nova, uma das principais novidades da Aqua era o fato de que as janelas podiam ser redesenhadas rapidamente, de maneira imperceptível aos olhos, quando movidas ou redimensionadas.


A Apple também continuou inovando a lançou a interface Aqua, para o novo sistema operacional da empresa, o Mac OS X.


Outras inovações ficaram por conta dos efeitos de animação executados durante o ato de minimizar programas. Em versões masi recentes, a empresa também adicionou o conceito de Exposé, que mudou a forma como as pessoas alternavam entre os softwares abertos na área de trabalho.


A Microsoft também continiou inovando. Com o lançamento do Windows Vista, pudemos ver a estreia do Aero, responsável pelos efeitos visuais de sombra e transparência na Área de Trabalho.

Com o Windows 7, a interface foi aprimorada, ganhando suporte a telas touchscreen e multitouch, além de apresentar uma barra de ferramentas totalmente reformulada e o Aero Shake, que permite interação com as janelas ao sacudi-las.


A Microsoft também continiou inovando. Com o lançamento do Windows Vista, pudemos ver a estreia do Aero, responsável pelos efeitos visuais de sombra e transparência na Área de Trabalho.


O Windows 7 também ganhou efeitos 3D, semelhantes aos proporcionados pelo Compiz, no Linux.

O próprio Compiz acabou se inspirando no Exposé, da Apple, para fornecer um efeito semelhante sobre o X Window System.

Interfaces Gráficas do Usuário - Java


A plataforma Java oferece recursos sofisticados para construção de interfaces gráficas do usuário. Estes recursos fazem parte do framework Java Foundation Classes (JFC) conforme a visão geral:

• Java Web Start: Permite que aplicações Java sejam facilmente implantadas nas máquinas dos usuários.

• Java Plug-in: Permite que applets executem dentro dos principais navegadores.

• Java 2D: Possibilita a criação de imagens e gráficos 2D.

• Java 3D: Possibilita a manipulação de objetos 3D.

• Java Sound: Disponibiliza a manipulação de sons para as aplicaçõs Java.


• AWT (Abstract Window Toolkit): Conjunto básico de classes e interfaces que definem os componentes de uma janela desktop. AWT é a base para Java Swing API.

• Swing: Conjunto de classes e interfaces básicos que definem os componentes visuais e serviços necessários para constru i r uma inter face gráf ica do usuár io. (Será descotinuado no Java 9)

• JavaFX: Nova API Java para aplicações GUI que utiliza os conceitos de RIA - Rich Internet Application. (Será padrão no Java 9)

GUIs - Java - Swing

GUIs - Java - Swing

No pacote da aula 12, crie o Programa1

GUIs - Java - Swing

No pacote da aula 12, crie o Programa1

Execute!

GUIs - Java - Swing

A classe JFrame define janelas com título, borda e alguns ítens definidos pelo sistema operacional, como botão para minimizar, minimizar ou fechar.

GUIs - Java - Swing

É possível assiciar uma das ações abaixo ao botão de fechar da janela.

• DO_NOTHING_ON_CLOSE: Não faz nada.

• HIDE_ON_CLOSE: Esconde a janela.

• DISPOSE_ON_CLOSE: Fecha a janela.

• EXIT_ON_CLOSE: Fecha a aplicação.

GUIs - Java - Swing

A classe JPanel define um componente que basicamente é utilizado para agrupar nas janelas outros componentes como caixas de texto, botões, listas, entre outros.

Normalmente, criamos um objeto da classe JPanel e associamos a um objeto da classe JFrame para agrupar todo o conteúdo da janela.

GUIs - Java - Swing

Crie o Programa2

GUIs - Java - Swing

Crie o Programa2

Execute!

GUIs - Java - Swing

Para textos maiores, podemos aplicar o componente definido pela classe JTextArea.

GUIs - Java - Swing

Crie o Programa3

GUIs - Java - Swing

Em formulários que necessitam de caixa de texto para digitar senhas, podemos aplicar o componente definido pela classe JPasswordField.

O conteúdo digitado na caixa de texto gerado pelo componente da classe JPasswordField não é apresentado ao usuário.

GUIs - Java - Swing

Crie o Programa4

GUIs - Java - Swing

Os botões que permitem que os usuários indiquem quais ações ele deseja que a aplicação execute podem ser criados através do componete definido pela classe JButton.

GUIs - Java - Swing

Crie o Programa5

GUIs - Java - Swing

Podemos criar formulários com checkboxes utilizando o componente da classe JCheckBox.

GUIs - Java - Swing

Crie o Programa6

GUIs - Java - Swing

Podemos criar formulários com comboboxes utilizando o componente da classe JComboBox.

GUIs - Java - Swing

Crie o Programa7

GUIs - Java - Swing

Podemos criar formulários com radio buttons, utilizando o componente da classe JRadioButton.

GUIs - Java - Swing

Crie o Programa8

GUIs - Java - Swing

Os componentes do tipo Radio Button são de seleção única, portando não podem deixar o usuário selecionar mais que um elemento.

Para solucionar esse problema, devemos agrupá-los em um ButtonGroup.

GUIs - Java - Swing

Muitas pessoas consideram que uma das tarefas mais compl icadas quando se ut i l i za a Java Swing AP I é o posicionamento e o tamanho dos componentes.

Posicionamento e tamanho dos componentes Java Swing são controlados por Layout Managers.

GUIs - Java - Swing

Um Layout Manager é um objeto Java associado a um componente Java Swing que na maioria dos casos é um componente de background como uma janela ou painel.

Um Layout Manager controla os componentes que estão dentro do componente ao qual ele está associado.

Conheceremos agora os quatro principais Layout Managers do Java Swing.

GUIs - Java - Swing

Border Layout

Este Layout Manager divide a área de um componente de background em cinco regiões (norte, sul, leste, oeste e centro). Somente um componente pode ser adicionado em cada região.

Eventualmente, o Border Layout altera o tamanho preferencial dos componentes para torná-los compatíveis com o tamanho das regiões.

O Border Layout é o Layout Manager padrão de um JFrame.

GUIs - Java - Swing

Crie o Programa9

GUIs - Java - Swing

Flow Layout

Esse Layout Manager arranja os componentes da esquerda para a direita e quando o tamanho horizontal não é suficiente ele "pula" para a próxima "linha".

O Flow Layout não altera o tamanho preferencial dos componentes.

O Flow Layout é o Layout Manager padrão de um JPanel.

GUIs - Java - Swing

Crie o Programa10

GUIs - Java - Swing

Box Layout

Este Layout Manager arranja os componentes de cima para baixo "quebrando linha" a cada componente adicionado.

O Box Layout não al tera o tamanho preferencia l dos componentes.

GUIs - Java - Swing

Crie o Programa11

GUIs - Java - Swing

Grid Layout

Este Layout Manager divide a área de um componente de background em células semelhante a uma tabela.

As células possuem o mesmo tamanho.

GUIs - Java - Swing

Crie o Programa12

GUIs - Java - Swing

A principal função de uma interface gráfica de usuário é permitir a interação entre usuários e a aplicação.

Os usuários interagem com uma aplicação clicando em botões, preenchendo caixas de texto, movimentando o mouse, entre outros.

Essas ações dos usuár ios d isparam eventos que são processados pela aplicação através de listeners (callbacks).

Para criar um listener, devemos implementar a interface correspondente ao tipo de evento que queremos tratar.

GUIs - Java - Swing

• ActionListener: Esta interface deve ser implementada quando desejamos tratar eventos como por exemplo cliques em botões, seleção de itens de um menu ou teclar enter dentro de uma caixa de texto.

• MouseListener: Essa interface deve ser implentada quando desejamos tratar eventos como cliques dos botões do mouse.

• KeyListener: Esta interface deve ser implentada quando desejamos tratar eventos de pressionar ou soltar teclas do teclado.

GUIs - Java - Swing

Crie o Programa13

GUIs - Java - Swing

Dú[email protected] http://www.diemesleno.com.br

aula 12 - diemesleno.com.br · interfaces gráficas do usuário - gui a visicorp era uma das...

Documents