Programação Visual Orientada a Eventos

1. Programação Visual Orientada a Eventos

2. 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.

3. 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

4. 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.

5. 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.

6. 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.

7. 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.

8. 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")

9. 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.

10. Janela Secundária de Propriedades de objetos Barras de rolagem

11. Janela Secundária de Operações sobre objetos

12. 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.

13. Os componentes podem ser de diversos tipos

14. Componentes para exibição e entrada de textos • Rótulos ou textos • Caixas de texto

15. 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)

16. Componentes do tipo botões de comando (CommandButton) • Barras de Rolagem (ScrollBar)Componentes que exibem figuras e gráficos • Caixas de figuras (PictureBox)ImagensFormas e linhas (Shape, Line)

17. Painel Caixa de seleção Rótulo Botão de opção Caixa de texto Caixa combinada Botão de comando

18. Janela secundária tipo paleta

19. Componentes adicionais • MenusControles de Acesso a DadosControles de Sistemas de ArquivosControles DiversosRelógio (Timer)Caixas de diálogo comum (CommonDialog)Repositório de OLE (OLEContainer)Quadros (Frame)Barras de Ferramentas (Toolbar)Caixas de Diálogo

20. Menus Barra de menus (Drop-Down) Títulos de Menus Item de Menus Menus flutuantes (Pop-Up)

21. Menu tipo cortina

22. 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)

23. Controles de Sistemas de Arquivos Caixas de Listas de Unidades (DriveListBox) Caixas de Listas de Pastas (DirListBox) Caixas de Listas de Arquivos (FileListBox)

24. Menu Suspenso Caixa de listas de unidades Caixa de listas de pastas Caixa de listas de arquivos

25. Janela de arquivos

26. Controles Diversos Relógio (Timer) Caixas de diálogo comum (CommonDialog) Repositório de OLE (OLEContainer) Quadros (Frame) Menus

27. Caixas de Diálogo Caixas modais e não modais Caixas Customizadas Caixas pré definidas Caixas de Entrada (InputBox) Caixas de Mensagens (MsgBox)

28. Caixa de mensagens

29. Caixa de diálogo

30. Descrição Sumária dos Componentes

31. Componentes do tipo botões de comando (CommandButton)Barras de Rolagem (ScrollBar)Componentes que exibem figuras e gráficosCaixas de figuras (PictureBox)ImagensFormas e linhas (Shape, Line)

32. 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.

33. 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.

34. 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.

35. 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.

36. Componente Imagem

37. 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.

38. Componente Figura

39. Propriedades

40. 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

41. 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;

42. 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;

43. 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.

44. Caixa de propriedades

45. Métodos

46. Métodos • Métodos são ações próprias do componente e que são previamente programadas

47. Métodos

48. Utilização

49. 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”).

50. 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.