Java com café: agosto 2010

Introdução ao JavaScript - Parte 1

Hoje teremos um post sobre JavaScript pra variar um pouco. Farei este post em duas partes. Na primeira vou fazer uma introdução sobre a linguagem dando alguns conteitos básicos e também falarei sobre variáveis e eventos. Na próxima parte teremos objetos importantes, suas propriedades e também sobre semelhanças com a linguagem Java.

O que é JavaScript?

De acordo com a famosa enciclopédia digital "JavaScript é uma linguagem de programação criada por Brendan Eich para a Netscape em 1995, que a princípio se chamava LiveScript. A Netscape, após o sucesso inicial desta linguagem, recebeu uma colaboração considerável da Sun, a qual possibilitou posteriormente dizer que o JavaScript é uma linguagem compatível com a linguagem Java, por esta razão, a semelhança dos nomes."
Pontos importantes sobre JavaScript quanto aos tipos:
  • fraca - sua tipagem é mutável;
  • dinâmica - uma variável pode assumir vários tipos diferentes durante a execução;
  • implícita - as variáveis são declaradas sem tipo.
Porque usar JavaScript? JavaScript permite tornar páginas HTML mais dinâmicas. Usamos a linguagem para interagir com a página, validar formulários, etc. Vamos ao que interessa.

10 Perguntas básicas sobre JavaScript

Estas perguntas foram baseadas num quiz disponível aqui. É necessário obter 100% pra dizer que se tem um conhecimento básico sobre JavaScript.

1. Qual elemento é utilizado para os scripts?

Em uma página HTML colocamos os códigos JavaScript dentro de tags script, como mostra o exemplo:



2. Qual é o lugar correto para inserir JavaScript?

Os scripts podem ser inseridos tanto no cabeçalho(head) quanto no corpo(body) da página.

3. Qual a sintaxe para fazer referência a um script externo?

Scripts externos devem ser salvos com a extenção js e podem ser referenciados utilizando o parâmetro src:



4. Arquivos JavaScript externos precisam ter a tag script?

Não, somente códigos.

5. Como escrever um texto na página?

Para escrever na página usa-se document.write:

document.write("Hello World");

6. Como mostrar mensagens utilizando uma caixa de alerta?

Mensagens podem ser exibidas numa caixa de alerta simplesmente chamando:

alert("Hello World");

7. Como criar uma função?

Funções podem ser criadas utilizando a palavra function, veja:

function myFunction()
{
//Códigos da função
}

8. Como chamar uma função?

Funções podem ser chamadas simplesmente digitando seu nome:

myFunction()

9. Como abrir uma janela?

Pode-se abrir uma janela chamando window.open:

window.open("http://marciosouzajunior.blogspot.com");

10. Como colocar uma mensagem de status no navegador?

Mensagens de status são uma propriedade do objeto window e podem ser modificadas diretamente:

window.status = "Mensagem";

Obviamente existe muito mais sobre JavaScript que você deveria saber. Essas perguntinhas foram apenas pra você poder falar com os amigos que sabe alguma coisa de JavaScript. E também se algum dia for fazer uma prova que caia JavaScript, não passe em branco. Vamos ver outras coisas importantes agora.


Variáveis

JavaScript possui 3 tipos de dados: número, caractere e booleano. Não tem segredo. Como já foi dito, as variáveis podem ser declaradas sem um tipo específico. A simples associação de um valor faz com que a variável passe a existir:

x = 2;

E seu tipo pode mudar como quiser:

var x = 2;
alert(x);
x = "texto";
alert(x);

Usar a palavra var é opcional. Usamos apenas quando queremos declarar a variável sem um valor inicial. Se fizermos isto o seu valor será undefined. Também podemos associar um valor null, que é quase a mesma coisa que undefined.
Não tem muito o que falar sobre variáveis em JavaScript, os criadores da linguagem deixaram as coisas bem simples de trabalhar.

Eventos

Eventos são coisas que podem acontecer durante a execução de um programa (neste caso da página). Um clique de mouse, uma caixa que perde o foco, são eventos que podem ocorrer a qualquer momento. Podemos desejar que esses eventos disparem alguma ação. Logo abaixo temos uma lista de eventos que o JavaScript pode capturar e quando eles acontecem:

  • onLoad: Quando a página é carregada.
  • onUnload: Quando a página é fechada.
Esses dois eventos só ocorrem no body, portanto poderiam chamar alguma ação da seguinte forma:

<_body onload="alert('Oi');">

Todos sabemos que body não tem underline, mas sou obrigado a escrever assim porque mais uma vez o blogger está confundindo as coisas. Espero que todos tenham entendido. Continuando...Agora vamos ver 3 eventos que podem ocorrer em objetos text, select e textarea:
  • onChange: Acontece quando o objeto perde o foco e houve mudança de conteúdo.
  • onBlur: Acontece quando o objeto perde o foco, independente de ter mudado o conteúdo.
  • onFocus: Quando o objeto ganha o foco.
Aqui temos um exemplo:



O próximo evento pode ser usado para text e textarea:
  • onSelect: Ocorre quando seleciona parte ou todo texto do objeto.
Os próximos eventos tem a ver com o mouse:
  • onClick: Quando o objeto é clicado. Pode acontecer nos objetos button, checkbox, radio, link, reset e submit.
  • onMouseOver: Quando passa o mouse sobre o objeto.
  • onSubmit: Quando clica no botão submit. Váido somente para forms.
Exemplo:

Blog do Márcio

Certamente numa prova de JavaScript teria pelo menos uma questão sobre esses eventos. Principalmente sobre o evento onBlur, porque facilmente alguém acreditaria que um suposto evento onLostFocus estaria certo.

Fim da Parte 1

Bom, ficamos por aqui com esta introdução ao JavaScript. Espero que você possa ter tirado algum proveito do material. Em breve teremos a segunda parte com mais informações sobre os objetos document, window e também sobre semelhanças com a o Java.


Bons estudos!

Enums - Java

Enums são um tipo de classe Java que quase nunca utilizamos. Acredito que muita gente nem imagina que esse tipo de classe existe. Diferente de classes comuns e interfaces, o Enum foi inserido na versão 5 do Java. Ele permitie enumerar uma quantidade de valores pré-definidos que podem ser aceitos para uma variável.
Vamos a um exemplo prático. Precisamos de uma variável que só aceite 3 valores: maçã, pera e uva. Então declaramos:
enum Frutas { MAÇÃ, PERA, UVA }; //É opcional colocar ponto-e-vírgula
Obs.: Por convenção as constantes são escritas em maiúsculas. Um Enum é constituido basicamente por suas constantes, mas logo veremos que podem existir outras coisas a mais. Eles podem ser declarados como membro de uma classe ou fora da classe, mas nunca dentro de métodos (inclusive o main). Outro ponto importante é que os Enums só aceitam os modificadores default e public (não aceita private, protected, final, abstract nem static). Veja um exemplo de declaração fora da classe:
enum Frutas { MAÇÃ, PERA, UVA }

public class Run {

 Frutas tipo; //Run tem uma variável de instância do tipo Frutas

 public static void main(String[] args) {
 
     Run r = new Run();
     r.tipo = Frutas.MAÇÃ;
 
 }
}
Enums não são do tipo String ou de outro tipo. Eles são do seu próprio tipo, neste caso Frutas. MAÇÃ, PERA ou UVA são tipos de Frutas. Se fizermos o teste:
if (Frutas.MAÇÃ instanceof Frutas)
 System.out.println("Maçã é do tipo Fruta");
O resultado será: Maçã é do tipo Fruta
Então sabemos o que são Enums, como e onde declará-los. E também sabemos que por ser uma classe, tem seu próprio tipo. Agora vamos ver umas coisas mais interessantes.
Construtores, Métodos e Variáveis em um Enum
Como os Enums são um tipo especial de classe, eles podem ter construtores, variáveis e até um corpo de classe para as constantes (mais adiante explico o que é essa coisa bizarra). Vamos ver como funcionam esses membros passando um parâmetro para cada constante:
 MAÇÃ("vermelha"), PERA("verde"), UVA("roxa");
Cada tipo de fruta agora recebe um parâmetro do tipo String, como numa chamada de método normal (poderíamos ter outros tipos, dependendo do construtor). De acordo com os argumentos, neste caso teríamos o seguinte construtor:
 Frutas(String cor){
     this.Cor = cor;
 }
Sendo assim, devemos ter uma variável de instância para receber a cor:
 private String Cor;
E ainda um método para retornar a cor da fruta escolhida:
 void getCor(){
     System.out.println("A cor da fruta escolhida é " + Cor);
 }
O Enum completo ficaria assim:
enum Frutas {

 //Passando parâmetros a cada constante
 MAÇÃ("vermelha"), PERA("verde"), UVA("roxa");

 //Construtor
 Frutas(String cor){
     this.Cor = cor;
 }
 //Variavel de instância
 private String Cor;

 //Método que mostra a cor da fruta escolhida
 void getCor(){
     System.out.println("A fruta escolhida é " + Cor);
 }

}
Observe que quando temos mais membros além das constantes é obrigatório o ponto-e-vírgula após as constantes.
Agora modifique a classe Run para que fique parecida com esta:
public class Run {

 Frutas nome;

 public static void main(String[] args) {
 
     Run r = new Run();
     r.nome = Frutas.MAÇÃ;
     r.nome.getCor();
 }
}
A saída será: A fruta escolhida é vermelha
Sobre o construtor do Enum devemos saber que ele nunca poderá ser invocado diretamente. Ele só pode ser chamado pelo próprio Enum, ou melhor, por cada constante. Os construtores também podem ser sobrecarregados, como no exemplo:
 MAÇÃ("vermelha"), PERA("verde"), UVA("roxa", "verde");

 Frutas(String cor){
     this.Cor = cor;
 }
 //Construtor sobrecarregado
 Frutas(String cor, String cor2){
 }
Corpo de Classe específico da constante
Como eu mencionei anteriormente, os Enums podem possuir uma coisa estranha chamada corpo de classe específico da constante. Esse corpo é um bloco de código que podemos definir para cada constante. Usamos esse corpo para substituir um método definido dentro do Enum. Vamos ver na prática:
enum Frutas {

 MAÇÃ,
 PERA,
 UVA{
     //Corpo da constante UVA
     //Códigos legais aqui...
 };

 void getFoo(){
     System.out.println("Frutas são saudáveis.");
 }

}
Observe que se chamarmos por r.nome.getFoo(), independente de qual fruta tenha sido escolhida, sempre teremos a saída: Frutas são saudáveis. Porém agora vamos sobrescrever o método dentro do corpo da constante UVA:
enum Frutas {

 MAÇÃ,
 PERA,
 UVA{
     void getFoo(){
         System.out.println("BAD FRUIT!!!");
     }
 };

 void getFoo(){
     System.out.println("Frutas são saudáveis.");
 }

}
E então chamamos:
     r.nome = Frutas.UVA;
     r.nome.getFoo();
A saída será: BAD FRUIT!!!
Ok, mas pra que fazer isso? Imagine que todos os elementos do Enum tenham uma propriedade, um código por exemplo. Mas um determinado elemento não pode ter aquele código. Então usamos o corpo da constante para definir um comportamento especial pra ele. É realmente difícil imaginar uma aplicação para isso, mas apenas saiba como funciona que será o bastante para passar no exame! E por hoje é só.
Bons estudos!

Menu Dinâmico - Java

Olá! Hoje vou mostrar como implementar um menu dinâmico. Na verdade eu usei esta aplicação para gerar um menu com todos os LookAndFeels disponíveis. Criar menus ou qualquer outro tipo de objeto dinâmico significa que ele é criado em tempo de execução. Mas pra que fazer isso? Por exemplo, num sistema ERP cada usuário tem um nível de acesso, então dependendo de quem logar no sistema, determinados itens no menu estarão disponíveis ou não. O sistema verifica no banco de dados quais as permissões daquele usuário e monta o menu em tempo de execução.
Mas no exemplo que vou mostrar não usa banco de dados, mas seria interessante implementar alguma forma de salvar o LookAndFeel selecionado. Porque fazer isto dinamicamente? Neste caso o menu teria que ser dinâmico porque os LookAndFeels podem ser instalados ou removidos da JRE.
Também vou mostrar como escrever um ActionListener que será usado ao acionar os eventos dos itens no menu.

Utilizando LookAndFeels

Antes de mais nada vamos fazer os seguintes imports:

import javax.swing.UIManager;
import javax.swing.UIManager.LookAndFeelInfo;

E também declarar uma variável de instância:

static LookAndFeelInfo skins[] = UIManager.getInstalledLookAndFeels();

Agora temos um array com os LookAndFeels disponíveis. Deixaremos como static para não ter que instanciar depois quando for preciso chamar no Listener (mais adiante você vai entender).

Montando o Menu

Para montar o menu eu criei um método que retorna um tipo JMenuBar. Para adicionar o menu na sua aplicação simplesmente chame o método dentro do construtor:

super.setJMenuBar(montaMenu());

O método é algo parecido com isto:

JMenuBar montaMenu(){

//Cria a barra
JMenuBar barraMenu = new JMenuBar();

//Cria o menu
JMenu menuSkins = new JMenu("Skins");

/*Aqui vamos adicionar os itens dinamicamente no menu Skins
Mas por enquanto um pouco de suspense....*/

//Adiciona o menu na barra
barraMenu.add(menuSkins);

//Retornamos a barra prontinha
return barraMenu;

}

Bom, agora só falta adicionar os itens no menu Skins. Esta parte pode parecer um pouco confusa a primeira vista mas não é!
Primeiramente vamos criar um array do tipo JMenuItem do tamanho de skins.length, isto é, com quantas posições forem necessárias para acomodar todos os LookAndFeels instalados.

JMenuItem itemSkin[] = new JMenuItem[skins.length];

Agora criamos outro array do tipo myListener (???) para os ActionListeners dos itens declarados acima. Calma que logo veremos essa classe myListener. O tamanho do array segue o mesmo exemplo mostrado.

myListener [] eventosMenu = new myListener[skins.length];

Agora vai ficar bom! Vamos entrar num for passando por todos skins:

for (int skin = 0; skin /*sinal de menor aqui*/ skins.length; skin++)
{
itemSkin[skin] = new JMenuItem(skins[skin].getName());
eventosMenu[skin] = new myListener(skin);
itemSkin[skin].addActionListener(eventosMenu[skin]);
menuSkins.add(itemSkin[skin]);
}

O que acontece? Primeiro o array itemSkin recebe um item com o nome do LookAndFeel. Então um Listener é criado no array e recebe como parâmetro o número daquele skin (mais adiante explico porque). Depois o ActionListener é adicionado ao item. Por último o item é adicionado ao menu. Nao esqueça de colocar o sinal de menor no for onde está comentado, se eu colocar o Blogger pensa que é uma tag e atrapalha tudo! Se alguém souber como desativar essa verificação me avise!
O método deverá ficar assim:


JMenuBar montaMenu(){

//Cria a barra
JMenuBar barraMenu = new JMenuBar();

//Cria o menu
JMenu menuSkins = new JMenu("Skins");

for (int skin = 0; skin /*sinal de menor aqui*/ skins.length; skin++)
{
itemSkin[skin] = new JMenuItem(skins[skin].getName());
eventosMenu[skin] = new myListener(skin);
itemSkin[skin].addActionListener(eventosMenu[skin]);
menuSkins.add(itemSkin[skin]);
}

//Adiciona o menu na barra
barraMenu.add(menuSkins);

//Retornamos a barra prontinha
return barraMenu;

}

Escrevendo um Listener

Para acionar os eventos do menu, o autor achou que seria interessante implementar um Listener personalizado. Isto porque o Listener deveria conter o número do LookAndFeel que ele gostaria de mostrar naquele momento. Para escrever um Listener, implemente a classe ActionListener e o método actionPerformed:

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JOptionPane;
import javax.swing.UIManager;

public class myListener implements ActionListener{
private int skin = 0;

public myListener(int newSkin) {
this.skin = newSkin;
}

public void actionPerformed(ActionEvent arg0) {
try{
UIManager.setLookAndFeel(Principal.skins[skin].getClassName());
JOptionPane.showMessageDialog(null, "Seu skin foi alterado para " + Principal.skins[skin].getName() + ".\nCaso tenha janelas internas em execução, reinicie-as para aplicar as alterações.", "Skins", JOptionPane.INFORMATION_MESSAGE);
}catch(Exception e)
{
e.printStackTrace();
}
}
}

Veja que a classe possui um construtor que recebe o LookAndFeel a ser mostrado. Por isso que passamos como parâmetro quando estamos criando os objetos Listener. Dentro do actionPerformed chamamos o método que configura o LookAndFeel recebido e mostra uma mensagem. Coloquei esta mensagem porque estou trabalhando com InternalFrames e eles precisam ser reabertos para que as aplicações ocorram. Lembrando que as duas classes estão no mesmo pacote.
Veja o resultado final:


Agora é só implementar mais alguma coisa pra salvar o LookAndFeel selecionado.
Espero que tenham gostado!

Eclipse - Visual Editor - MySQL

Introdução

Olá! No post de hoje pretendo mostrar como iniciar no desenvolvimento de aplicações gráficas que utilizem banco de dados em Java. Será mostrado como criar um simples banco de dados e fazer a conexão através do programa. Também ensinarei como instalar o Visual Editor que é usado criar a parte gráfica. Então finalmente veremos como inserir dados no banco.
O que me motivou a criar este tutorial é que tenho visto muito material sobre, porém coisas sem pé nem cabeça, códigos que não compilam, trabalho mal feito. Como eu odeio coisas mal feitas, fiz este post bem didático. Vou mostrar desde a instalação e configuração das feramentas até os testes finais. Todos os códigos foram testados pelo autor.

O Ambiente

Primeiramente vamos preparar o ambiente de desenvolvimento. Logo abaixo você encontra as ferramentas necessárias. Recomendo que utilize as ferramentas nas versões citadas.

Eclipse Galileo (3.5)
O Eclipse é uma IDE muito popular no mundo Java, por isto estarei utilizando-a neste exemplo. Nada impede que se utilize outra IDE, algumas coisas mudam mas os códigos são os mesmos.
Como instalar?
Ele não precisa de ser instalado, depois de baixar é só descompactar. No primeiro uso ele vai pedir o caminho do Workspace, que é a pasta padrão para os seus projetos. Escolha uma pasta de sua preferência e marque a caixa Use this as the default... para ele não perguntar novamente. Se futuramente quiser mudar vá em File > Switch Workspace.
Obs.: Versões superiores a esta ainda não são compatíveis com o Visual Editor, que atualmente está na versão 1.4.0 (hoje é 10/8/2010). Não tente instalar essa versão no Eclipse 3.6 ou superior.

Visual Editor 1.4
O Visual Editor é um framework para desenvolver a parte gráfica dos programas. O Eclipse não é como o Visual Basic que você instala e já tem tudo lá prontinho pra você começar a arrastar os botões, labels, textboxs.. No Eclipse você tem que instalar o Visual Editor à parte.
Como instalar?
Existem duas formas de instalar: online e offline. Aqui vou mostrar só online: Vá no Eclipse em Help > Install New Software... > Add... Em Name você coloca Visual Editor. Em Location cole o endereço:
http://download.eclipse.org/tools/ve/updates/1.4/.
Após alguns segundos vai aparecer uma árvore de pacotes com a raiz VE 1.4.0 R200.... Dentro da árvore existem vários pacotes e somente o pacote cujo nome é Visual Editor deverá ser marcado. Se marcar outros poderá causar conflitos. Então clique em Next. Ele vai fazer o download e quando estiver pronto clique em Finish para iniciar a instalação. Depois de alguns minutos você deve ser questionado se confia no certificado do Eclipse.org, pode confiar. Depois ele vai perguntar se deseja reiniciar o Eclipse. Você vai dizer que sim e pronto! Depois de reiniciar, vá em Help > About Eclipse > Installation Details. Na aba Features o Visual Editor deve estar presente. Se tiver dificuldade, veja este vídeo.

MySQL Server
O MySQL é o servidor de banco de dados open source mais popular do mundo (pelo menos de acordo com a definição dos seus desenvolvedores). Faça o download do arquivo: Windows (x86, 32-bit), MSI InstallerEssentials (mysql-essential-5.1.49-win32.msi) ou o 64-bit de acordo com seu sistema. Também faça o download do MySQL Workbench (mysql-workbench-gpl-5.2.26-win32.msi) para ter acesso as ferramentas gráficas SQL Development (antigo MySQL Query Browser) e Database Administration (antigo MySQL Administrator).
Como instalar o MySQL Server?
Next >
Complete > Next >
Install > (Windows Seven pede permissão)
Next > Next > Finish.
Configuração:
Next >
Standart COnfiguration > Next >
Install As Windows Service > Next >
Escolha a senha >
Execute.
Se quiser mudar a configuração posteriormente ou remover a instância execute o MySQL Server Instance Config Wizard que é criado pelo MySQL no Iniciar > Programas > MySQL > MySQL Server 5.1
ATENÇÃO: Quando for escolher a senha tome muito cuidado para não errar ou esquecer porque depois vai dar trabalho remover a instância do MySQL sem saber a senha. Recomendo que coloque a senha root para o usuário root se estiver apenas aprendendo e a segurança não for importante.
Como instalar o Workbench?
Next >
Complete > Next >
Install >
Finish.


Connector/J 5.1.13
MySQL Connector/J é o driver JDBC oficial para o MySQL. Ele permitirá que nosso aplicativo Java se conecte com o MySQL.
JDBC ou Java Database Connectivity é um conjunto de classes e interfaces (API) escritas em Java que fazem o envio de instruções SQL para qualquer banco de dados relacional, neste caso o MySQL.
Como instalar?
Por enquanto você vai apenas descompactar o arquivo. O driver é inserido diretamente nas bibliotecas de cada projeto. Portanto o procedimento será mostrado mais adiante na criação do projeto.


O Projeto

O exemplo que pretendo apresentar aqui é bem simples: Uma agenda de telefones. O banco vai conter nada mais que o nome e telefone da pessoa. Vamos criar uma tabela chamada Pessoa e nela teremos 2 campos, nome e telefone. O propósito não é mostrar aspectos do banco de dados como relacionamentos, consultas, etc. Apenas será mostrado como se conectar ao banco e inserir um registro. Sabendo disto, você pode pesquisar mais sobre o assunto depois e incrementar sua aplicação.


O Banco de Dados

O banco de dados é a base do seu projeto. Se o banco é mal projetado, isso vai refletir negativamente no projeto inteiro, porque quase toda a aplicação vai trabalhar em cima dele. Por este motivo o banco deve ser bem projetado. Deve ser desenvolvido com base em informações sólidas sobre o modelo do negócio que se deseja implementar para evitar problemas futuros. É claro que neste exemplo mostrado aqui não teria muitos problemas, o reparo seria simples. Mas essa advertência é válida para que todos saibam a importância dessa parte do projeto. Então vamos criar o banco.
Execute o Workbench.
Clique no menu File > New Model.
No menu Database clique em Query Database...Uma Janela Connect to Database irá aparecer. Clique em OK. Se a instância do MySQL estiver instalada e executando vai pedir a senha.
Entre com a senha e OK.
Na aba SQL Query cole o seguinte código:

CREATE DATABASE AGENDA;
USE AGENDA;

CREATE TABLE PESSOA(
Nome VARCHAR(100),
Telefone VARCHAR(100),

PRIMARY KEY(Nome)

)

Clique no ícone Execute SQL Script in Connected Server:


Se tudo der certo, na aba Output vai aparecer a mensagem:
0 row(s) affected.
Se não der vai aparecer um erro parecido com este:
Error Code: 1064 You have an error in your SQL syntax; ...
Clique com o botão direito na parte Object Browser e Refresh All. O novo banco deve aparecer.


Pronto. Criamos um simples banco de dados chamado Agenda e dentro dele somente uma tabela chamada Pessoa com dois campos para nome e telefone, sendo o nome a chave primária (campo que identifica cada registro unicamente e não pode ser duplicado).


A Parte Gráfica

Abra o Eclipse e na parte Package Explorer clique com o botão direito e New > Java Project. Em Project Name digite "ProjetoExemplo" e Finish. No menu do Eclipse tem um botão chamado New Java Class, clique nele e depois em Visual Class:


Na janela que aparecer será solicitado o nome da classe em Name, digite Principal. Ainda nesta janela mais embaixo tem uma parte chamada Style. Nesta parte navegue por Swing > Frame. Ao lado marque a caixa public static void main(String[] args). Sua janela deverá ficar igual a esta (clique para ampliar):


Clique em Finish.
No meio da interface do Eclipse teremos uma divisão entre a parte visual e a parte dos códigos. Tudo que é feito em um reflete no outro. Pode-se alternar as partes utilizando as setas como mostra o círculo entre elas:


A seta indicada pelo outro círculo mais acima abre a paleta de objetos:


Antes de começar a colocar os objetos vamos definir o tipo de layout. Clique no meio do frame como botão direito e vá em Set Layout > null. Este layout nos dá mais liberdade para posicionar os itens no frame. Os outros tipos colocam os objetos em partes pré-definidas para que não se desorganizem quando a tela for maximizada. Opcionalmente também pode-se fazer com que os objetos se alinhem à grade, para isto clique novamente no frame com o botão direito e Snap To Grid.
Para colocar os objetos no frame basta clicar no objeto desejado e depois clicar no frame onde quiser colocá-lo. Quando clicar no frame para inserir o objeto, ele vai perguntar qual nome queremos dar a ele. Use nomes com prefico lb para labels, tx para textfields e bt para botões. Depois do prefixo use um substantivo iniciando com letra maiúscula que identifique aquele objeto. Usar estes padrões de nomeação é importante e ajuda bastante na hora de chamar os objetos via código.
Então vamos criar 2 jLabels, 2 jTextFields e um jButtton. Para os jLabels use lbNome e lbTelefone. Para os jTextFields use txNome e txTelefone. E para o botão use btSalvar. Você deverá ter algo parecido com isto:


Mas nossos labels e o botão ainda estão sem um nome. Para dar um rótulo a eles clique com o botão direito em cada um e depois em Set Text. Pronto! Agora sim:


Cada uma destas propriedades que configuramos para os objetos pode ser modificada através da aba Properties:


Basta clicar no objeto que suas propriedades serão mostradas. Cada uma delas também pode ser acessada via código para fazer alterações como mudar o tamanho, cor, rótulo, desativar, esconder, etc.
Dica: Quando levar seu projeto para outro computador ou se tiver que instalar o Eclipse novamente e depois importar o projeto pode ser que as classes visuais não abram com Visual Editor, e apenas mostrem a parte do código. Neste caso clique com o botão direito na classe e Open With > Visual Editor.
Bom, agora a parte visual do nosso projeto está concluída. Mas antes de continuar vamos dar uma breve explicação sobre o que é o MVC e porque devemos utilizá-lo.

MVC

MVC ou Model View Controller é um padrão de desenvolvimento onde seu projeto é dividido em 3 partes: Model, View e Controller.
Primeiro vou falar da parte View que é a mais simples. View é a visão. View é a parte visual do projeto, ou seja, é a parte que acabamos de ver no capítulo anterior. É a interface, as janelas, botões, figuras, etc. Nada de código aqui, só visual.
Ok, agora vamos ver Model. Model vem de modelo. Model é a parte do seu projeto onde se modela os dados. Vou dar um exemplo bem prático: Num cadastro de clientes temos um modelo de cliente. Não é nada mais do que uma classe que possui os atributos desejados para aquele objeto (e métodos para acessá-los e alterá-los). Os atributos são os mesmos que encontramos na tabela cliente do banco de dados. Se não entendeu, tudo bem, fique tranquilo que daqui a pouco quando desenvolver esta parte vai ficar mais claro.
Por último temos o Controller. O Controller é o cara que faz acontecer. Ele valida os dados e faz a ligação entre View e Model. No final das contas ele que é o responsável por fazer as operações no banco de dados, caso tudo esteja bem.
Com isto vimos que o modelo MVC separa as partes do projeto e deixa cada uma a cargo de determinada tarefa. Isso é bom porque tudo fica mais organizado, erros são isolados e tratados, a manutenção é feita com mais facilidade.



Model

Segundo o modelo MVC vamos criar uma classe para representar a entidade Pessoa que está em nosso banco de dados. Vamos criar um modelo que represente uma unidade desta entidade, este tipo de classe é normalmente chamada de Bean ou JavaBean. Vamos ver um pouco de ação. Clique com o botão direito em cima do nosso projeto e New > Package. Dê o nome a este pacote de beans. Clique agora no pacote com o botão direito e New > Class. Dê o nome a esta classe de Pessoa. Implemente a classe desta forma:


public class Pessoa {
// Atributos
private String Nome;
private String Telefone;
}

Veja que temos os mesmos atributos do banco de dados. Esses atributos devem ser encapsulados para maior segurança e por isso precisamos criar os métodos para manipulá-los. Vamos fazer isto automaticamente: Clique com o botão direito dentro da classe onde se deseja criar os métodos e Source > Generate Getters and Setters. Clique em Select All e OK. Pronto, agora teremos algo parecido com isto:

package beans;

public class Pessoa {
// Atributos
private String Nome;
private String Telefone;

// Construtor sem parâmetro
public Pessoa() {
}

// Construtor que já inicializa recebendo nome e telefone
public Pessoa(String nome, String telefone) {
super();
Nome = nome;
Telefone = telefone;
}

// Getters e Setters
public String getNome() {
return Nome;
}

public void setNome(String nome) {
Nome = nome;
}

public String getTelefone() {
return Telefone;
}

public void setTelefone(String telefone) {
Telefone = telefone;
}
}

Veja também que temos dois construtores: um sem parâmetro e outro com. Você pode gerar estes construtores em Source > Generate Constructor using Fields. O construtor com parâmetros permite já inicializar o objeto passando os atributos de uma vez. O outro permite que inicialize o objeto e depois passe os atributos através dos métodos Getters e Setters. Lembre-se que se não criar nenhum construtor, o Java criará um sem parâmetros automaticamente. Mas se criar um com parâmetro, o Java não criará outro. Veja mais sobre construtores aqui.
Com isto temos nosso modelo pronto e podemos passar para o Controller, mas antes vamos ver como se conectar ao banco.


Conexão com o Banco

Clique com o botão direito no projeto e Build Path > Configure Build Path. Clique em ADD External JARs... e selecione o arquivo mysql-connector-java-5.1.13-bin.jar que se encontra dentro da pasta do driver que você baixou. Clique em OK. Agora o driver já está instalado no projeto. Para conectar crie uma classe dentro do pacote default com o nome Conexao e implemente conforme este exemplo:

package Principal;

import java.sql.*;
import javax.swing.JOptionPane;

public class Conexao {
public static Connection getConnection() throws SQLException {
try {
Class.forName("com.mysql.jdbc.Driver");// Registrando o driver
// Retorna a conexão
return DriverManager.getConnection(
"jdbc:mysql://localhost:3306/agenda", "root", "senha");
} catch (ClassNotFoundException e) {
JOptionPane.showMessageDialog(null,
"Não foi possível se conectar ao banco!\nInformações sobre o erro: "
+ e, "Conexao", JOptionPane.ERROR_MESSAGE);
return null;
}
}
}

Na linha onde retorna a conexão você deve mudar a senha. Geralmente as classes de conexão tem outras coisas a mais. Esta aí é bem simples e por enquanto dá pro gasto, mas seria interessante que você fizesse uma pesquisa para saber mais sobre. Vamos deixar essa classe aí e continuar com o projeto.


Controller

Esta parte do projeto é onde "conversamos" com o banco de dados. Geralmente chamamos as classes que fazem este papel de DAO ou Data Access Object, porque são objetos que acessam os dados. DAO é um padrão para persistência de dados que separa regras de negócio das regras de acesso ao banco de dados. No MVC, todas as funcionalidades do bancos de dados devem ser feitas por classes DAO.
Então crie um pacote chamado DAO (você já deve ter percebido que criar pacotes para cada parte do MVC é uma boa prática). Dentro do pacote crie uma classe chamada PessoaDAO, que deverá ter o corpo parecido com isto:


package DAO;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import java.util.List;
import javax.swing.JOptionPane;
import beans.Pessoa;
//Import que precisa ser corrigido
import Principal.Conexao;

public class PessoaDAO {

// Cria uma conexao
private Connection con;

// Inicializa a conexão no construtor
public PessoaDAO() throws SQLException {
con = Conexao.getConnection();
}

public void remove(Pessoa pessoa) {
}

public List/*Pessoa*/ retrieveAll() {
return null;
}

public Pessoa retrieveByID(String nome) {
return null;
}

public void update(Pessoa pessoa) {
}

public void save(Pessoa pessoa) {
// Aqui vamos fazer coisas legais!!!
}
}

A princípio esta classe poderá causar alguns erros. No início criamos a classe de conexão no pacote default, porém agora para importá-la precisamos que ela esteja em algum pacote. Então crie um pacote chamado Principal e arraste as classes Principal e Conexao para este novo pacote. Outra coisa a ser corrigida é na linha 25 onde tem o método retrieveAll veja que o tipo da lista está comentado /*Pessoa*/ mas deveria estar sem comentar e entre os sinais de maior e menor como pede a sintaxe. Tive que deixar assim porque o blog estava achando que era uma tag de html e causando erro no código.
Esta classe tem vários métodos para manipular os registros do banco de dados. Observe que todos eles utilizando o bean Pessoa como parâmetro. Neste exemplo não vou mostrar como implementar todos eles, mas somente o save (no código que vou disponibilizar para download possui o remove também). Os outros métodos, depois você conseguirá fazer seguindo o mesmo exemplo do save e com mais algum conhecimento em linguagem SQL. Vejamos como ficará o nosso método save então:

public void save(Pessoa pessoa) {
// Pega a conexão estabelecida
Connection conn = this.con;
// Cria um PreparedStatement
PreparedStatement pstm = null;

try {
// Monta a string sql
String sql = "Insert into Pessoa(Nome,Telefone) values(?,?);";

/*
* Lembrando que esta string pode ser montada diretamente com os
* valores recebidos de pessoa por exemplo:
* "Insert into Pessoa(Nome,Telefone) values(" + pessoa.getNome() +
* "... mas usamos os ? ? para uma maior segurança.
*/

// Passa a string para o PreparedStatement
pstm = conn.prepareStatement(sql);

// Coloca os verdadeiros valores no lugar dos ?, ?
pstm.setString(1, pessoa.getNome());
pstm.setString(2, pessoa.getTelefone());
// Executa
pstm.execute();
// Retorna uma mensagem
JOptionPane.showMessageDialog(null, "Dados salvos com sucesso!",
"Salvar", JOptionPane.INFORMATION_MESSAGE);
} catch (SQLException e) {
// Retorna uma mensagem informando o erro
JOptionPane.showMessageDialog(null,
"Não foi possível salvar os dados!\nInformações sobre o erro: "
+ e, "Salvar", JOptionPane.ERROR_MESSAGE);
e.printStackTrace();
}
}

Dica: Para achar o método olhe a parte direita na interface do Eclipse chamada Outline e procure por main (serve pra encontrar outros métodos ou variáveis também).
Agora sempre que o programa for iniciado uma conexão será aberta (e na finalização seria interessante fechar esta conexão mas por hoje não vou mostrar como fazer).


Inserindo Dados

A inserção de dados deverá ocorrer sempre que o botão salvar for acionado. Então vamos chamar o código sempre que este evento acontecer. Para isto clique com o botão direito no botão salvar e Events > actionPerformed. Será gerado um código igual a este:

btSalvar.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(java.awt.event.ActionEvent e) {
System.out.println("actionPerformed()"); // TODO Auto-generated Event stub actionPerformed()
}
});

Sempre que o botão for clicado este método será executado. No código gerado ele cria um System.out.println("actionPerformed()"); como padrão. Apague esta linha e coloque o seguinte código no lugar:

//Criamos um bean
Pessoa pessoa = new Pessoa(txNome.getText(), txTelefone.getText());

/* Passou os parâmetros pelo construtor mas
* poderia ter um construtor vazio e passar
* por metodo set.
*/
//Vai criar o DAO e inserir
try {

PessoaDAO pessoaDAO = new PessoaDAO();
pessoaDAO.save(pessoa); //Aqui é o pulo do gato

//Limpa as caixas
txNome.setText("");
txTelefone.setText("");
//Nome pede o focus
txNome.requestFocus();

} catch (SQLException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}

O código poderá apresentar alguns erros devidos aos imports, neste caso verifique se no canto esquedo da linha que causa o erro mostra um pequeno ícone com uma lâmpada e um X. Clique neste ícone e um menu com soluções vai aparecer, então dê dois cliques na primeira solução que será 'Import PessoaDAO' (DAO). Veja:


Feito isto finalmente podemos executar nossa aplicação. Clique com o botão direito no código e Run As > Java Application 1.
Se tudo ocorrer bem o programa irá rodar e se conectar ao banco. Para testar digite dados nos campos e clique em salvar. Se os dados forem salvos uma mensagem será mostrada informando o sucesso da operação:


Mas os campos não limparam depois de salvar. Para fazer isto coloque dentro do seu try logo após chamar o save, o código:

//Limpa as caixas
txNome.setText("");
txTelefone.setText("");
//Nome pede o focus
txNome.requestFocus();

Como ter certeza que os dados foram inseridos no banco? Para saber se os dados foram todos salvos volte ao Workbench, vá em File > New Script Tab. Vamos utilizar uma simples sentença de pesquisa:

SELECT * FROM PESSOA;

Mande executar. Se a inserção funcionou então deveremos ver os dados retornados como na figura:


Se por algum motivo os dados não forem salvos, possivelmente será mostrada uma mensagem com informações relevantes sobre o erro ocorrido. Se por acaso não salvar e mesmo assim nenhuma mensagem de erro não aparecer tente verificar se a sentença SQL está correta. Para fazer isto coloque o comando abaixo antes que o execute seja chamado no DAO:

JOptionPane.showMessageDialog(null, pstm);

Fazendo isto você vai mostrar uma mensagem com a string SQL antes de executar e poderá verificar se tem algo de errado com ela. No exemplo mostrado dificilmente você vai errar porque tem poucos parâmetros mas em programas maiores é sempre bom conferir se a montagem está correta.
Agora tente executar uma nova inserção com o mesmo nome. Uma mensagem de erro será mostrada:


Como o campo nome foi definido como PRIMARY KEY (chave primária) e houve uma tentativa de violar a chave, uma exceção foi lançada.

Conclusão

Sei que é muita informação para um post só mas é isso aí. Tentei passar de uma forma bem simples e espero ter contribuído. Aqui vai o código fonte do projeto pra quem quiser dar uma olhada. Até a próxima!