Programação Visual
Orientada a Eventos
1
Conceito
• Programação Visual é um modelo de
Programação no qual os usuários obtém
informações através de imagens e objetos
usualmente oriundos de uma tela de vídeo.
2
Programação Visual e Janelas
• Usam-se Interfaces Gráficas (baseadas em janelas ) para
interação com o usuário
• As interfaces gráficas contém uma janela principal e um
número variável de janelas secundárias
• A janela principal trata da interação primária com o usuário
e contém um número arbitrário de objetos
• As janelas secundárias fornecem detalhes sobre os objetos
exibidos na janela principal e sobre operações envolvendo
esses objetos
3
Programação Visual e Janelas
• O usuário interage com o sistema
selecionando um ou mais objetos (clicando
sobre eles, por exemplo) e depois
escolhendo uma operação (usando um
menu, por exemplo) para ser executada
sobre os objetos selecionados. São
operações usuais Cortar, Copiar, Colar,
Excluir e Ver Propriedades.
4
Programação Visual e Janelas
• Janelas principais possuem uma barra de menus tipo
cortina ou "drop-down".
• Pode-se escolher operações por meio de menus suspensos
ou "pop-up" (acionando o botão direito do mouse sobre o
objeto desejado).
• Caso o número de objetos presentes seja grande pode-se
empregar barras de rolagem ou simplesmente
redimensionar a janela.
• As janelas também podem ser subdivididas em painéis ou
quadros, que se pode redimensionar ou rolar.
5
Janelas Secundárias
• Janelas Secundárias dão suporte às janelas
principais. Na janela principal só é possível exibir
algumas propriedades dos objetos nela contidos.
Outras propriedades podem ser vistas em janelas
secundárias nas quais podem ser manipuladas por
meio de botões Liga/Desliga, Caixas de Seleção,
Botões de Seleção, Réguas, Caixas de Texto e
Caixas Combinadas.
6
Janelas Secundárias
• Para diferenciar uma janela principal de
uma janela secundária é interessante
verificar que:
 Janelas principais são consideradas mais
importantes, recebendo o maior foco de atenção de
projetistas e usuários
 Janelas secundárias são exibidas navegando a partir
das janelas principais e não vice versa.
7
Janelas Secundárias
• Além das janelas de propriedades, outros
tipos de janelas secundarias são:
 Caixas de Diálogo
 Caixas de Mensagens
 Paletas
 Janelas suspensas ("pop-up")
8
Janelas Secundárias
• Muitas aplicações são baseadas em
arquivos. Os usuários podem disparar estas
aplicações com operações de Abrir um
arquivo ou objeto e a janela principal
mostra os objetos armazenados no arquivo
aberto ou objeto selecionado. As operações
usuais sobre arquivos são Salvar, Salvar
Como, Abrir e Novo.
9
Janela Secundária de
Propriedades de objetos
Barras de rolagem
10
Janela Secundária de Operações
sobre objetos
11
Conceitos
• Formulário – Uma superfície retangular
que serve para modelar o fundo de imagem
e para receber diversos componentes;
Componente – Um objeto que pode ser
anexado a um formulário para acrescentar
uma
determinada
funcionalidade.
12
Os componentes podem ser de
diversos tipos
13
Componentes para exibição e
entrada de textos
• Rótulos ou textos
• Caixas de texto
14
Componentes que apresentam
escolhas para os usuários
Caixas de seleção (CheckBox)
Botões de opção (OptionButton)
Caixas de Listas (ListBox)
Caixas combinadas (ComboBox)
15
• Componentes do tipo botões de comando
(CommandButton)
• Barras
de
Rolagem
(ScrollBar)
Componentes que exibem figuras e
gráficos
• Caixas
de
figuras
(PictureBox)
Formas
e
Imagens
linhas
(Shape,
Line)
16
Painel
Caixa de seleção
Rótulo
Botão de opção
Caixa de texto
Caixa combinada
Botão de comando
17
Janela secundária tipo paleta
18
•
Componentes adicionais
Menus
Controles de Acesso a Dados
Controles de Sistemas de Arquivos
Controles Diversos
Relógio (Timer)
Caixas de diálogo comum (CommonDialog)
Repositório de OLE (OLEContainer)
Quadros (Frame)
Barras de Ferramentas (Toolbar)
Caixas de Diálogo
19
Menus
Barra de menus (Drop-Down)
Títulos de Menus
Item de Menus
Menus flutuantes (Pop-Up)
20
Menu tipo cortina
21
Controles de Acesso a Dados
‫ﴂ‬
‫ﴂ‬
‫ﴂ‬
‫ﴂ‬
‫ﴂ‬
Listas de Dados (DataList)
Caixas combinadas de dados (DataCombo)
ADO Data Control
Grelhas de Dados (DataGrid)
Grelhas Hierárquicas (HierarchicalFlexGrid)
22
Controles de Sistemas de Arquivos
Caixas de Listas de Unidades (DriveListBox)
Caixas de Listas de Pastas (DirListBox)
Caixas de Listas de Arquivos (FileListBox)
23
Menu Suspenso
Caixa de
listas de
unidades
Caixa de listas
de pastas
Caixa de
listas de
arquivos
24
Janela de arquivos
25
Controles Diversos
Relógio (Timer)
Caixas de diálogo comum (CommonDialog)
Repositório de OLE (OLEContainer)
Quadros (Frame)
Menus
26
Caixas de Diálogo
Caixas modais e não modais
Caixas Customizadas
Caixas pré definidas
Caixas de Entrada (InputBox)
Caixas de Mensagens (MsgBox)
27
Caixa de mensagens
28
Caixa de diálogo
29
Descrição Sumária dos
Componentes
30
Componentes do tipo botões de comando
(CommandButton)
Barras de Rolagem (ScrollBar)
Componentes que exibem figuras e
gráficos
Caixas de figuras (PictureBox)
Imagens
Formas e linhas (Shape, Line)
31
Descrição dos Componentes
• Rótulos são áreas contendo textos e/ou
imagens que, durante a execução do
programa não podem ser alterados
diretamente pelo usuário.
• Caixas de texto são áreas contendo textos
que, durante a execução do programa
podem ser alterados diretamente pelo
usuário.
32
Descrição dos Componentes
• Botões de comando são áreas que
correspondem a botões de acionamento de
máquinas
virtuais
construídas
pelo
programa.
• Quadros, painéis ou “frames” são áreas
diferenciadas do formulário destinadas a
agrupar diversos componentes cujo
emprego tenha uma ligação lógica.
33
Descrição dos Componentes
• Caixas de seleção são áreas utilizadas para
indicar
opções
que
podem
estar
selecionadas ou não sendo que essas opções
são independentes umas das outras.
Botões de opção são áreas utilizadas para
indicar opções mutuamente exclusivas
fazendo com que quando o usuário
selecionar um desses botões torne sem ação
todas as demais opções de mesma natureza.34
Descrição dos Componentes
• Imagens servem para exibição de gráficos.
Esses controles aceitando cliques de mouse
servem também como botões de comando.
Quando se carregar uma figura em um
controle imagem o ajustamento entre
tamanhos é feito pela propriedade Strecht.
Quando esta for verdadeira a figura se
ajusta ao tamanho do controle, podendo
gerar distorções. Quando a propriedade for
false o controle imagem se ajusta ao
tamanho da figura.
35
Componente Imagem
36
Descrição dos Componentes
• Os controles Figura exibem gráficos e
servem como aglutinadores de outros
controles. Os controles figura são mais
poderosos que os controles Imagem e
consomem mais recursos computacionais.
37
Componente Figura
38
Propriedades
39
Propriedades
• Os formulários e componentes são
caracterizados por uma lista de propriedades
ou atributos.
• Para cada elemento visual as propriedades
mais comuns são descritas a seguir
40
Propriedades
 Nome – identificador do componente
dentro da programação;
 “Caption”- texto identificador do
componente e que é exibido para o
usuário;
 Dimensões – largura e comprimento do
componente
que,
usualmente,
é
retangular;
41
Propriedades
 Posição no formulário – distâncias entre as
bordas esquerda e superior do formulário e
as bordas correspondentes do componente;
 Cor de fundo – cor da superfície do
componente;
 Cor de frente – cor do texto apresentado no
componente;
 Bordas – tipo de borda exibido;
42
Propriedades
 Variação automática de tamanho – capacidade
de acomodação a textos de tamanho variável e ao
tamanho da tela;
• As dimensões podem ser expressas em diversas
unidades. Usualmente são expressas em twips que
correspondem a 1/20 de um ponto de impressão.
Como existem 72 pontos por polegada existem
1440 twips por polegada ou 567 twips por
centímetro.
43
Caixa de propriedades
44
Métodos
45
Métodos
• Métodos são ações próprias do
componente e que são previamente
programadas
46
Métodos
Método
Botão de comando Rótulo Caixa de Texto Caixa de Listas
Refresh
sim
sim
sim
sim
Set Focus
sim
sim
sim
sim
Move
sim
sim
sim
sim
ADDItem
não
não
não
sim
Clear
não
não
não
sim
47
Utilização
48
Utilização
• Os componentes são exibidos em barras de
componentes ou paletas. Ao se iniciar um
projeto automaticamente é exibido um
formulário ainda não utilizado (“em
branco”).
49
Utilização
• Para inserir um componente no formulário
seleciona-se o componente na barra ou paleta
(com o mouse) e, a seguir, pressiona-se o botão
esquerdo do mouse no ponto do formulário que
corresponderá ao vértice superior esquerdo do
componente inserido. Mantendo o mesmo botão
pressionado leva-se o mouse até o ponto
correspondente ao vértice direito inferior do
componente e solta-se o botão.
50
Formulário e Barra de ferramentas de
componentes
Barra de ferramentas de componentes
Formulário
51
Utilização
• Imediatamente é exibida a lista de atributos
ou propriedades do componente que poderá,
então, ser preenchida ou alterada. Quando
se desejar inserir outro componente basta
repetir o procedimento.
52
Utilização
• A qualquer tempo pode-se selecionar um
componente do formulário. Nessa ocasião o
componente anteriormente selecionado
perderá o foco de atenção e a lista de
atributos exibida será a do novo
componente selecionado. Caso seja
acionada a tecla “Delete” estando
selecionado um componente o mesmo será
excluído do formulário.
53
Utilização
• Chama-se de foco à capacidade de receber
entradas do usuário via teclado ou mouse. Apenas
um componente de cada vez possui o foco que
pode ser transferido por ações de mouse, teclado
ou programação.
• Normalmente o ordem de transferência de foco é
definida pela propriedade ordem de tabulação pois
as teclas de entrada e de tabulação alteram a
ordem de transferência de foco.
54
Utilização
• Para alterar tamanho de um componente
selecionado basta aproximar o mouse de suas
bordas. Nessa ocasião exibem-se setas duplas
indicando direção de crescimento/decrescimento
do componente. Basta, então arrastar as bordas no
sentido desejado que pode ser horizontal, vertical
ou inclinado sendo que neste último caso serão
mantidas as proporções entre as dimensões do
componente antes e depois da alteração de
tamanho.
55
Utilização
• Para mudar um componente de posição
basta colocar o mouse sobre o componente
e mover o mouse na direção desejada.
56
Utilização
• Pode-se
selecionar
simultaneamente
diversos
componentes
para
ajustar
propriedades comuns tais como dimensões,
cor, tipo de letra, borda ou propriedades de
alinhamento.
57
Eventos
58
Eventos são ações que atuam sobre o
ambiente do programa. Os eventos mais
comuns e evidentes são provenientes da
ação do usuário, tais como
 Ação do mouse (botão sendo abaixado, ou
clique)
 Entrada de dados via teclado
 Seleção de um item de uma lista
 Mudança de uma lista ou caixa
59
Eventos
• Na programação orientada a eventos os
programas
não
tem
processamento
monolítico iniciando-se no disparo do
programa e indo até a última linha de
código e seu encerramento de uma só vez.
Os programas são divididos em pequenos
trechos que descrevem as respostas que o
sistema deve fornecer a determinados
eventos.
60
Eventos
• Após processar a resposta a um
determinado evento o sistema permanece
em estado de espera da ocorrência de um
outro evento, Os programas só terminam em
resposta ao evento de encerramento ou em
caso de falha.
61
Eventos
• Os eventos usuais, que já tem cabeçalhos
prontos para auxiliar o programador,
comuns
a
praticamente
todos
os
componentes são : Click, DragDrop,
DeagOver,
GotFocus,
LostFocus,
KeyDown, KeyUp, KeyPress, MouseDown,
MouseUp, MouseUp e MouseMove.
62
Eventos
• Alguns componentes possuem previstos
eventos de Change, Scroll, DbClick,
ItemChecked e outros.
63
Tratamento de Eventos
64
Tratamento de Eventos
• Os eventos, quase sempre, são associados a
componentes do formulário. Para escrever o
código correspondente a um evento ligado a
um componente deve-se passar ao editor de
código. Isto é feito dando um duplo clique
no componente (na janela do formulário).
65
Tratamento de Eventos
• Isto faz com que se abra a janela do editor
de
código
com um protótipo do
procedimento de tratamento do evento já
iniciado. Para cada componente existem
definidos um grande número de possíveis
eventos que o editor de código exibe em um
ComboBox
(Caixa de Procedimentos/Eventos).
66
Tratamento de Eventos
• Nesta Caixa é exibido o Procedimento
associado ao evento selecionado. Uma outra
ComboBox é a Caixa de Objetos que exibe
o objeto selecionado e contém a lista de
todos os objetos associados ao formulário.
67
Tratamento de Eventos
• O código normalmente é dividido em
diversas seções, sendo uma delas a seção
geral para as variáveis globais e
declarações, uma seção relativa ao
formulário e uma seção para cada objeto
contido no formulário. Na seção de cada
objeto
podem
existir
diversos
procedimentos de tratamento de eventos.
68
Editor de códigos
• O editor de códigos apresenta um recurso de
completamento de código através do qual
sempre que se digitar o nome de um
componente ou objeto e se aguardar um
instante será apresentada uma lista de
possíveis continuações da qualificação do
objeto.
69
Editor de código
Editor de código
70
Completamento de código
71
“Arrays” de componentes
• Coleção ou grupo de componentes que compartilham o mesmo nome,
o tipo e os procedimentos de tratamento de eventos
• Emprego mais freqüente é em menus e em agrupamento de botões de
opção
• Utiliza menor quantidade de recursos do que o uso de múltiplos
componentes semelhantes independentes uns dos outros
• Para criar um “array” de componentes basta dar o mesmo nome de um
componente existente e confirmar a intenção de criar um “array” de
componentes
• Os elementos de um “array” são identificados pelo nome do “array”
seguido da numeração seqüencial de sua posição dentro do “array”,
entre parênteses. A numeração inicia em zero.
72
Um projeto Visual Basic
compreende diversos arquivos
 Módulos de formulários (.frm)
 Módulos de classes (.class)
 Módulos padrão (.bas)
 Módulos de recursos (.res)
 Documentos ActiveX (.dob)
 Controles do usuário (.ctl)
 Módulos de propriedade de páginas (.pag)
 Controles ActiveX (.ocx)
73
Inclusão de Controles ActiveX
• A inclusão de controles ActiveX em um projeto é feita
através da Caixa de Diálogos de Componentes. Na lista de
componentes exibida na aba Controles deve-se selecionar a
caixa de seleção à esquerda do nome do componente e
acionar o botão OK. Isto fará com que o componente passe
a aparecer na barra de ferramentas. Caso o componente
não figure na Caixa de Diálogo deve-se acionar o botão
Browse e procurar em outras pastas os discos o arquivo
com o componente desejado. Quando este arquivo é
selecionado automaticamente o nome do componente vai
para a caixa de diálogo com a caixa de seleção selecionada.
74
Dimensões Visuais
• As dimensões visuais são posição, tamanho, forma
e cor.
• A usabilidade das interfaces cresce bastante
usando dimensões visuais dos objetos e seus
atributos.
• Por meio das dimensões visuais pode-se exibirde
um número de atributos maior do que aquele
mínimo necessário para identificar um objeto.
75
Vantagens de exibição de maior
número de atributos
• Evitar que o usuário tenha o trabalho
adicional de navegação para visualizar
outros atributos do objeto selecionado
• Permitir que o usuário verifique os diversos
aspectos dos objetos ao mesmo tempo, o
que é bom para comparações e o
reconhecimento de padrões.
76
Posição
• Combinando com tamanho pode exibir as
posições do mundo real
• Essencial para GIS, CAD, WYSIWYG
• Em algumas situações é importante e em
outras não (tamnho de aeroporstos em
cartas aeronáuticas)
77
Tamanho
• Para representar um arquivo, por exemplo, o
tamanho do objeto exibido pode representar o
espaço de armazenamento ocupado pelo arquivo
• Para uma conta bancária o tamanho do objeto
exibido pode representar o saldo.
• Uma escala logarítmica é melhor do que uma
escala linear, pois escalas lineares tendem a
crescer muito, ocupando muito espaço nas janelas.
78
Forma
• O atributo forma usualmente é explorado
por meio de ícones. As formas são boas na
representação de tipos mas não o são para
dados numéricos ou literais.
79
Ícones
80
Cor
• A percepção visual pode ser dividida em três
componentes: matiz, saturação e sombra.
• Matiz pode representar tipo para uma pequena
enumeração de valores.
• Saturação pode ser má escolha pois alta saturação
torna a interface desagradável e baixa diferenças
de saturação são difíceis de perceber visualmente.
• Para que a sombra não seja confusa deve-se evitar
o branco e o preto totais, ficando entre o
sombreamento alto e baixo.
81