IDE (Integrated Development Environment) / RAD (Rapid ... · TIC - Programação Visual Unidade 12 – IDE / RAD 7 Pré-requisitos • Conhecimento de Programação Orientada a Objetos;

TIC - Programação Visual

Unidade 12 – IDE / RAD 1

Instituto Federal de Educação, Ciência e Tecnologia do Triângulo MineiroAgosto de 2012

Prof. Edwar Saliba Júnior

IDE (Integrated Development Environment) / RAD (RapidApplication Development)



Introdução

• Uma “interface gráfica” ou GUI (Graphical User Interface) apresenta um mecanismo amigável ao usuário para interagir com um aplicativo;

• Objetivo: tornar o software cada vez mais amigável para facilitar a interação do usuário com este.



Comentário

• Interfaces consistentes permitem que o usuário aprenda mais rápido novos aplicativos.



Exemplo Interface Gráfica

• Comparação com ambiente caractere.



Pergunta

• Você já se imaginou acessando a Internet num computador onde o mouse não funciona? E fora do ambiente gráfico?



Importante• A interface gráfica deve facilitar o entendimento da

aplicação, ou seja, deve ser o mais amigável possível;• Não abuse nas cores:

– O uso de cores fortes não é recomendável para aplicativos comerciais;

– O uso de uma única cor também (o tradicional cinza) às vezes torna a tela desagradável ou de difícil entendimento.

• Faça uso de imagens significativas para melhorar o entendimento do software. Lembre-se: “uma imagem vale mais que mil palavras!!!”



Pré-requisitos

• Conhecimento de Programação Orientada a Objetos;

• Cada componente (formulário, botão, menu, barra de rolagem e etc.) será um objeto que deverá ser instanciado em seu aplicativo;

• Conhecimento de Programação Orientada a Eventos (que nos abordaremos nesta disciplina);

• Conhecimento de uma linguagem de programação que possua todos estes quesitos;

• Nesta disciplina usaremos linguagem Java e a IDE Netbeans.



Ferramentas RAD• São softwares que nos proporcionam uma

maneira rápida de desenvolvermos outros softwares;

• Nos fornecem componentes prontos para serem usados (drop and down):– janelas,– rótulos,– botões,– campos de texto,– campos de imagem e– etc.



Exemplos de Ferramentas RAD

• Delphi,• Netbeans,• Dreamwiver,• Visual Studio .Net e• Etc.



Delphi• Empresa:

Embarcadero• Linguagens:

Object Pascal• S.O.: Windows• Programação

Estruturada, Orientada a Objetos e Eventos.

• Versão: Paga.



Netbeans• Empresa: Oracle• Linguagens: Java,

PHP, C++, HTML, Java Script e etc.

• S.O.: Windows, GNU/Linux, FreeBSD, Unix, Mac OS e etc.

• Programação Orientada a Objetos e Eventos.

• Versão: Gratuita.



Dreamwiver

• Empresa: Adobe• Linguagens: HTML,

Flash, Java Script e etc.

• S.O.: Windows.• Programação

Estruturada, Orientada a Objetos e Eventos.

• Versão: Paga.



Visual Studio .Net• Empresa: Microsoft• Linguagens: C#, J#,

VB# e etc.• S.O.: Windows.• Programação

Orientada a Objetos e Eventos.

• Versões: Paga e Gratuita(recursos reduzidos).



Nesta Disciplina Usaremos a IDE NetBeans

• Inicializar a ferramenta;• E vamos a nossa primeira atividade.



IDE NetBeans• Desenvolvida pela Sun Microsystems, empresa

comprada pela Oracle;

• Uma das melhores existentes no mercado;

• Proporciona extrema facilidade na construção de aplicativos gráficos no estilo drag and drop;

• Proporciona também uma maneira fácil de se acessar e alterar as propriedades e métodos de cada componente visual, através da paleta “Properties”;

• Para isto, utilizaremos um pacote de classes conhecido como SWING, onde poderemos encontrar diversos componentes visuais;

• Vamos começar!



Entendendo a IDE NetBeansProjetos

Código-fonte ou componentes visuais

Propriedades dos componentes visuais

Componentes visuais



Primeiro Aplicativo Gráfico



• Formulário:–A maioria das janelas é uma

instância ou subclasse dessa classe;–Fornece a barra de título;–Fornece botões para minimizar,

maximizar e fechar a aplicação.• Propriedades:

– title – define o título da janela;– background – define a cor de fundo da janela.

JFrame



Componente JFrame



JLabel

• Rótulo:– Instruções de texto ou informações que

declaram o propósito de cada componente.

• Propriedades:– text – altera o texto apresentado pelo

componente;– displayedMnemonic – permite a criação de

uma tecla de atalho para o componente;– labelFor – faz a ligação do rótulo a um outro

componente.



Componente JLabel



JTextField

• Campo de Texto:– Utilizado para entrada de dados simples em

formulários;– Ideal para entradas que não ultrapassem o

tamanho de uma linha.

• Propriedades:– text – propriedade que armazenará o texto

digitado pelo usuário do software.



Componente JTextField



JButton

• Botão:– Ao ser apertado desencadeia uma ação específica

previamente programada.

• Propriedades:– text – define o texto que será apresentado no botão;– mnemonic – cria uma tecla de atalho para o botão;– icon – define um ícone para o botão.

• Evento (o que é?):– ActionPerformed – evento disparado quando se aperta o

botão. É neste local que será colocada a funcionalidade do botão.



Componentes JButton



JOptionPane

• Caixa de Diálogo:– Componente não visual;

– Utilizadas pelas aplicações para interagir com o usuário;

– Contém diálogos de entrada e diálogos de mensagem.



Componente JOptionPane

JOptionPane.showMessageDialog(null,”Olá!”);

• Componente não visual;

• Deve ser instanciado no código-fonte, conforme exemplo a seguir:



Mensagens ao Usuário

Tipo de diálogo de mensagem Ícone Descrição

ERROR_MESSAGE

Um diálogo que indica um erro para o usuário.

INFORMATION_MESSAGE

Um diálogo com uma mensagem informativa para o usuário.

WARNING_MESSAGE

Um diálogo que adverte o usuário de um problema potencial.

QUESTION_MESSAGE

Um diálogo que impõe uma pergunta ao usuário. Normalmente, esse diálogo exige uma resposta, como clicar em um botão Yes ou No.

PLAIN_MESSAGE Nenhum ícone

Um diálogo que contém uma mensagem, mas nenhum ícone..



Programando os Eventos dos Botões

• A parte de programação visual foi concluída;• Vamos programar a parte não visual para

concluirmos o software;• Clique no botão “Olá!”:

– vá a paleta “Properties” do NetBeans, clique na aba “Events”;

– serão mostrados todos os eventos do componente;– clique no JCombo que aparece a frente do evento

“ActionPerformed” grafado com a palavra “none”;– Escolha a única opção existente e logo a tela do código

fonte aparecerá para você já com toda a classe do formulário criada e com o cursor posicionado no método referente ao evento “ActionPerformed”.



Programação dos Botões

• Olá!

• Limpar



Pronto!

• Agora é só executar o software e testar suas funcionalidades!



Observação!

• Todo componente visual possui uma “propriedade”, na aba “Code” da paleta “Properties” chamada: “Variable Name”;

• Esta propriedade permite você dar um nome específico para cada componente visual que você utilizar no seu aplicativo;

• Dar nomes significativos a cada componentes é considerada uma ótima prática de programação.



Sabendo disto,

• Vamos alterar o nome dos seguintes componentes:– jTextField1 → tfDigiteSeuNome– jButton1 → btnOla– JButton2 → btnLimpar– NewFrame1 → Form1



Programação dos Botões

• Olá!

• Limpar



Nosso IDE está assim



Entendendo o Ambiente

Projeto

Package (Pacote)

Classe Main (Principal)JFrame

Bibliotecas da Linguagem



Entendendo o Código

• Classe Principal

Comentário

Comentário

Comentário

Declaração de Pacote

Declaração de Classe

Declaração do método “main” (Principal)

Declaração e instanciaçãoda classe “Form1” como

objeto “form1”

Chamada do método“setVisible”, que faz oJFrame aparecer na tela do computador



Entendendo o Código

• Classe Form1Pacote no qual a

Classe está inserida

Importe de outraclasse java, deoutro pacote

Declaração da classee implementação de

herança Método construtor

Código gerado automaticamente

para os componentescolocados no JFrameEvento disparado ao

se pressionar o botão “Olá”

Evento disparado aose pressionar o botão

“Limpar”

Variáveis criadas paraos componentes colocados

no JFrame



Perguntas???



Bibliografia• DEITEL, H. M.; DEITEL, . . P J Java Como

Programar; 6. ., : ed São Paulo, 2005.Pearson

Documents

IDE (Integrated Development Environment) / RAD (Rapid ... · TIC - Programação Visual Unidade 12 – IDE / RAD 7 Pré-requisitos • Conhecimento de Programação Orientada a Objetos;