Software e arquivos necessários para o tutorial

Para este tutorial, você precisa ter instalados no computador os seguintes softwares:

• NetBeans IDE 6.0 (download).
• Java Standard Development Kit (JDK) versão 5.0 ou 6.0 (download)
• O servidor de banco de dados Java DB (o Java DB é incluído no JDK 6)
• O script SQL que se encontra em http://usersguide.netbeans.org/files/documents/40/1423/car.sql.
• O projeto CarPreview, que se encontra em http://usersguide.netbeans.org/files/documents/40/1433/CarPreview.zip

Configurando o banco de dados

Antes de começar a criar uma aplicação CRUD (criar, ler, atualizar, excluir) de área de trabalho no IDE, você já deve ter o IDE conectado ao banco de dados que a sua aplicação usará. Ter essa configuração configurada antecipadamente permite que você tire vantagem dos recursos do IDE que automatizam a vinculação do banco de dados à sua aplicação.

Neste tutorial, fornecemos instruções para o uso de um banco de dados Java DB, já que existe uma interface conveniente para iniciar e parar o servidor de banco de dados Java DB a partir do IDE. Entretanto, você também pode usar um servidor de banco de dados diferente sem muita dificuldade.

Primeiro, verifique se você possui o Java DB registrado no IDE. O Java DB é registrado automaticamente no IDE em inúmeros casos, tal como quando você possui o servidor da aplicação Sun Java System registrado no IDE ou quando você está executando no JDK 6.

Para determinar se o Java DB está registrado no IDE:

• Abra o menu Ferramentas e abra o item de submenu Banco de dados Java DB.

  Se o item de menu Configurações for o único item que não está esmaecido, você precisará registrar o Java DB no IDE.

Para registrar manualmente o Java DB no IDE:

1. Escolha Ferramentas > Banco de dados Java DB > Configurações.
2. No campo Instalação do Java DB, indique o caminho para o servidor de banco de dados.
3. Na propriedade Localização do banco de dados, indique a pasta em que você deseja armazenar os bancos de dados.
4. Clique em OK.

Iniciando o servidor e criando um banco de dados

Quando o Java DB estiver registrado no IDE, você pode facilmente iniciar e parar o servidor de banco de dados, assim como criar um novo banco de dados.

Para iniciar o servidor de banco de dados:

• Escolha Ferramentas > Banco de dados Java DB > Iniciar servidor.

  Caso você ainda não tenha uma localização definida para o banco de dados, a caixa de diálogo Definir localização do banco de dados aparece. Indique uma localização para o servidor de banco de dados armazenar os bancos de dados. Você pode criar uma nova pasta lá, se quiser.

  Quando o servidor é iniciado, a aba Processo do banco de dados Java DB se abre na janela Saída e exibe uma mensagem semelhante à seguinte:

  Apache Derby Network Server - 10.2.2.0 - (485682) started and ready
              to accept connections on port 1527 at 2007-09-05 10:26:25.424 GMT

Para criar o banco de dados:

1. Escolha Ferramentas > Banco de dados Java DB > Criar banco de dados. A caixa de diálogo Criar Java DB se abre.
2. No campo de texto Nome do banco de dados, digite car_database. Defina também o Nome de usuário e a Senha como nbuser.
3. Clique em OK.

Conectando ao banco de dados

Até aqui, iniciamos com êxito o servidor de banco de dados e criamos um banco de dados. Entretanto, ainda precisamos conectar ao novo banco de dados antes de começar a trabalhar com ele no IDE. Para conectar ao banco de dados car_database:

1. Alterne para a janela Serviços (Ctrl+5) e expanda o nó Bancos de dados para ver seu novo banco de dados.
2. Clique com o botão direito do mouse no nó da conexão do banco de dados (jdbc:derby://localhost:1527/car_database[nbuser on NBUSER]) e escolha Conectar.

   O ícone do nó da conexão agora deve aparecer por inteiro (), o que significa que a conexão foi bem sucedida.

   
3. Expanda o nó da conexão, clique com o botão direito do mouse em seu subnó Tabelas, e escolha Executar comando.
4. Copie o conteúdo do arquivo car.sql e cole-o na aba Comando SQL 1 do Editor de código-fonte.

   Esse é o script SQL que preenche o banco de dados com dados sobre os carros.

5. Clique no botão Executar SQL () na barra de ferramentas do Editor de código-fonte para executar script.

Criando a aplicação

1. Escolha Projeto > Novo projeto.
2. No primeiro painel do assistente, expanda a categoria Java e selecione o modelo Aplicação de área de trabalho Java. Clique em Próximo.

   O modelo Aplicação de área de trabalho Java oferece muitos dos fundamentos de uma aplicação visual, incluindo itens e comandos de menu básicos.

3. Na página Nome e localização do assistente, faça o seguinte:
   1. No campo Nome do projeto, digite CarsApp. O valor deste campo define o nome de exibição do projeto na janela Projetos.
   2. Opcionalmente, edite o campo Localização do projeto para alterar a localização dos metadados do seu projeto.
   3. No campo Escolher shell da aplicação, selecione Aplicação de banco de dados.
   4. Clique em Próximo.
4. Na página Tabela mestre do assistente, selecione a conexão do banco de dados CAR. A listagem do banco de dados devem se parecer com algo semelhante ao seguinte: jdbc:derby://localhost:1527/car_database[nbuser on NBUSER]
5. Preencha a senha (nbuser) do banco de dados e selecione a caixa de verificação Lembrar senha durante esta sessão.

   Depois que a conexão ao banco de dados for estabelecida, o campo Tabela de banco de dados deve exibir CAR e a lista Colunas a serem incluídas deve incluir os nomes de 10 colunas do banco de dados CAR. Por enquanto, usaremos somente cinco delas na aplicação.

6. Selecione o nome das cinco colunas inferiores (começando com SUN_ROOF e terminando com MODERNNESS) e clique no botão < para movê-las para a coluna esquerda. Clique em Próximo.
7. No painel Opções de detalhe, clique em Terminar.

   Em seguida, o assistente gera uma interface de usuário básica com uma tabela e uma conexão de banco de dados. Deve-se levar alguns segundos enquanto o IDE gera o projeto e o código.

Executando a aplicação gerada

Nesse momento, você possui uma aplicação básica em execução com uma interface do usuário gráfica (GUI) que possui os seguintes recursos:

• Habilidade de visualizar e modificar valores em cinco colunas do banco de dados CAR.
• Itens de menu básicos.
• Persistência de seu estado de janela entre sessões. Quando você fecha a aplicação, a posição e o tamanho da janela são lembrados. Sendo assim, quando você reabre a aplicação, a janela abre na mesma posição que estava quando foi fechada.
• Uma caixa de diálogo Sobre, que você pode personalizar facilmente.
• Arquivos .properties contendo os rótulos na interface do usuário. Usar arquivos .properties é uma boa forma de manter a lógica do seu código separada do texto que aparece na interface do usuário da sua aplicação. Tal separação é útil por tornar mais fácil localizar seu programa, entre outros motivos.

Para ver alguns dos recursos que já foram construídos na aplicação, siga estas etapas:

1. Clique com o botão direito do mouse no nó do projeto e escolha Executar.

   Após alguns segundos, a aplicação se inicia e uma janela chamada Exemplo de aplicação de banco de dados aparece. Esta janela contém uma tabela e alguns controles que permitem que você edite o banco de dados CARS.

2. Selecione o primeiro registro na tabela (para Acura).
3. Selecione o campo de texto Preço e substitua o valor existente por 46999. Em seguida, pressione Enter.

   O valor deve aparecer atualizado na tabela. (Entretanto, o valor não será refletido no banco de dados até que você clique em Salvar).

   Semelhantemente, você pode atualizar quaisquer outros valores na tabela.

4. Clique em Novo para criar um novo registro. Em seguida, preencha os valores de cada um dos campos (Marca, Modelo, Preço, Estilo, Cor). Por exemplo, você pode preencher Trabant, Classic, 1000, wagon e azul. Clique em Salvar para salvar a entrada no banco de dados.
5. Clique na barra de título Exemplo de aplicação de banco de dados e arraste a aplicação para um lugar diferente em sua tela.
6. Clique na borda esquerda da janela Exemplo de aplicação de banco de dados e arraste para a esquerda para aumentar o tamanho da janela.
7. Na barra de menu Exemplo de aplicação de banco de dados, escolha Arquivo > Sair.
8. No IDE, clique com o botão direito do mouse no nó do projeto e escolha Executar projeto.

   A janela Exemplo de aplicação de banco de dados se abrirá com o mesmo tamanho e posição que tinha quando você fechou a aplicação.

Revisando as partes geradas da aplicação

A conexão entre a tabela mestre (um componente JTable) e o banco de dados é manipulada com uma combinação dos seguintes mecanismos, todos gerados pelo IDE:

• A classe de entidade Car.java, que é usada para ler e gravar dados na tabela do banco de dados CAR. As classes de entidade são um tipo especial de classe que permite a você interagir com bancos de dados através do código Java. As classes de entidade usam anotações Java para mapear campos de classe para colunas do banco de dados. .
• O arquivo META-INF/persistence.xml, que define uma conexão entre o banco de dados e a classe da entidade. Esse arquivo também é conhecido como a unidade de persistência.
• Usando vinculação de beans para conectar as propriedades da classe de entidade com as propriedades do componente JTable. A vinculação de beans é uma nova tecnologia baseada em JSR 295 e que provavelmente será incluída em uma futura versão do Java SE.
• Os objetos entityManager, query e list, que são definidos na classe CarsAppFrame e que são listados na janela Inspetor.
  • O objeto do gerenciador de entidades é usado para recuperar e confirmar dados no escopo definido da unidade de persistência.
  • O objeto de consulta define como a coleção de dados particular é recuperada do gerenciador de entidades. (Você pode alterar a forma em que o objeto de consulta funciona, selecionando o objeto de consulta na janela Inspetor e alterando a propriedade query na folha de propriedades. A propriedade query usa a linguagem de consulta JPA.
  • O objeto da lista é uma coleção observável que mantém os dados da consulta. Uma coleção observável é um tipo especial de coleção em que você pode colocar um ouvinte para descobrir quando as alterações na coleção foram feitas.

Usando a janela Inspetor e a folha de propriedades, você pode seguir estas etapas para ver como a JTable é vinculada aos dados:

1. Na janela Inspetor, selecione o nó mainPanel[JPanel] > masterScrollPane [ScrollPane] > masterTable [JTable]. Em seguida, clique na aba Vinculação na janela Propriedades.
2. Examine a propriedade dos elementos para configurar se ela está vinculada a uma lista.
3. Clique no botão de reticências [...] para abrir o personalizador Vincular masterTable.elements, onde você pode personalizar ainda mais a vinculação entre a tabela e o banco de dados. Por exemplo, você pode ver que o personalizador permite que você especifique quais colunas da tabela são vinculadas.

Além da categoria Vinculação na folha de propriedades, você também pode usar o menu Vincular no menu de contexto.

Adicionando mais controles

Agora iremos adicionar controles ao formulário para alguns dos atributos que excluímos inicialmente. Em vez de usar uma tabela, adicionaremos componentes JSlider (para os atributos tamanho do pneu e modernidade) e componentes JCheckbox (para o teto solar e o spoiler).

Siga estas etapas para adicionar os componentes adicionais:

1. Adicione o primeiro controle deslizante, clicando no botão Controle deslizante na janela Paleta e, em seguida, clicando no formulário logo acima do botão Novo. Antes de clicar no formulário para inserir o controle deslizante, verifique se não estão sendo mostradas linhas guias abauladas horizontais. Essas linhas indicam que o controle deslizante será inserido na mesma linha que os campos ou botões. Veja a figura abaixo para ver onde você deve soltar o controle deslizante no formulário.

   Observação: se você soltar um componente em um lugar que não deseja e, portanto, causar algumas alterações de layout indesejadas, use o comando Desfazer para reverter as alterações. Escolha Editar > Desfazer ou pressione Ctrl-Z.

2. Se necessário, estenda o controle deslizante para a esquerda para alinhá-lo com o lado esquerdo dos componentes do campo de texto.
3. Estenda o controle deslizante para a direita para aumentar toda a largura do formulário.
4. Adicione um rótulo à esquerda do controle deslizante e defina seu texto como Tamanho do pneu. (Clique no rótulo para torná-lo editável).
5. Adicione outro controle deslizante abaixo do primeiro controle deslizante, e ajuste sua largura e alinhamento onde necessário.
6. Adicione outro rótulo abaixo do rótulo Tamanho do pneu e defina seu texto como Modernidade.
7. Adicione duas caixas de verificação abaixo dos controles deslizantes. Defina seu texto como Spoiler e Teto solar. (Torne o texto de exibição editável, clicando uma vez na caixa de verificação, pausando e clicando novamente na caixa de verificação. Você também pode clicar com o botão direito do mouse na caixa de verificação e escolha Editar texto).

O formulário deve se parecer com a captura de tela mostrada abaixo.

"

Vinculando controles a valores na tabela

Agora usaremos recursos de vinculação de beans para vincular os valores mostrados em células da tabela ao estado dos controles que adicionamos. Isso permitirá que você altere os valores das células na tabela por meio de controles deslizantes e caixas de verificação.

Para vincular os controles deslizantes aos seus elementos de tabela correspondentes:

1. No formulário, clique com o botão direito do mouse no controle deslizante Tamanho do pneu e escolha Vincular > valor.
2. Na lista suspensa Origem da vinculação da caixa de diálogo Vinculação, selecione masterTable.
3. Na lista suspensa Expressão de vinculação, selecione o nó selectedElement > tiresize.
"
4. No formulário, clique com o botão direito do mouse no controle deslizante Modernidade e escolha Vincular > valor.
5. Na lista suspensa Origem da vinculação da caixa de diálogo Vinculação, selecione masterTable.
6. Na lista suspensa Expressão de vinculação, selecione selectedElement > modernness.

Para vincular as caixas de verificação aos seus elementos de tabela correspondentes:

1. No formulário, clique com o botão direito do mouse na caixa de verificação Spoiler e escolha Vincular > selecionado.
2. Na lista suspensa Origem da vinculação da caixa de diálogo Vinculação, selecione masterTable.
3. Na lista suspensa Expressão de vinculação, selecione selectedElement > spoiler.
4. Clique em OK para sair da caixa de diálogo Vincular.
5. No formulário, clique com o botão direito do mouse na caixa de verificação Teto solar e escolha Vincular > selecionado.
6. Na lista suspensa Origem da vinculação da caixa de diálogo Vinculação, selecione masterTable.
7. Na lista suspensa Expressão de vinculação, selecione selectedRow > sunRoof.
8. Clique em OK.

Agora você deve ser capaz de alterar as entradas do banco de dados usando o controle deslizante e as caixas de verificação.

Para verificar se os controles deslizantes e as caixas de verificação funcionam:

1. Abra a janela Serviços.
2. Verifique se o IDE tem uma conexão ao banco de dados, clicando com o botão direito do mouse em Bancos de dados > jdbc:derby;//localhost:1527/car_database e escolhendo Conectar.
3. Clique com o botão direito do mouse no nó Bancos de dados > jdbc:derby;//localhost:1527/car_database > Tabelas > e escolha Visualizar dados.
4. Examine os valores SUN_ROOF, SPOILER, TIRE_SIZE e MODERNNESS do primeiro registro.
5. Escolha Executar > Executar projeto principal para executar a aplicação.

   A aplicação em execução deve ser semelhante à captura de tela mostrada abaixo.

   "
6. Na aplicação em execução, selecione o primeiro registro.
7. Mova os controles deslizantes e altere as seleções da caixa de verificação.
8. Clique em Salvar para salvar as alterações no banco de dados.
9. Na janela Serviços, use novamente o comando Visualizar dados.

   Os valores no banco de dados devem refletir as alterações que você fez.

Configurando um componente personalizado

Para uma demonstração ainda mais gráfica da vinculação de beans em ação, vamos adicionar um componente personalizado que pintará uma visualização do carro selecionado. Vincularemos as propriedades deste componente aos elementos de tabela correspondente. Em seguida, quando você executa novamente a aplicação, a visualização do carro será modificada quando você alterar a linha selecionada e os valores dos vários campos.

Para tornar o componente CarPreview disponível para o projeto CarsApp:

1. Caso ainda não o tenha feito, baixe o arquivo CarPreview.zip.
2. Usando uma ferramenta zip padrão, extraia os arquivos do zip.
3. Escolha Arquivo > Abrir projeto e navegue para o conteúdo extraído do arquivo zip e selecione o projeto CarPreview.
4. Clique em Abrir projeto.

   O projeto se abre no IDE.

5. Clique com o botão direito do mouse no nó CarPreview e escolha Construir.

   Isso compila os arquivos no projeto para que você possa usar a classe CarPreview como um bean que pode ser arrastado e solto diretamente no formulário.

Esse componente foi escrito como um componente JavaBeans, sendo assim, você poderia adicioná-lo à Paleta, o que seria conveniente para adicionar o componente a várias aplicações. Mas por enquanto, iremos simplesmente arrastar o componente diretamente para a sua aplicação a partir da janela Projetos.

Para adicionar o componente CarPreview à aplicação:

1. Na janela Projetos, expanda os nós Car Preview > Source Packages > carpreview >.
2. Arraste a classe CarPreview.java para o formulário. Para inseri-la corretamente logo baixo dos menus, coloque-a sobre a tabela alinhada à esquerda com outros controles e ajuste à parte inferior da barra de menu, como mostrado na imagem abaixo.
3. Redimensione horizontalmente o componente de visualização sobre o formulário inteiro.
4. Da mesma forma que você vinculou os controles deslizantes e as caixas de verificação aos elementos no componente masterTable, vincule toda as propriedades de vinculação do componente CarPreview aos atributos selectedElement correspondentes da masterTable. Use o menu popup Vincular ou a aba Vinculação na folha de propriedades.
5. Execute novamente a aplicação CarApp.

   Na aplicação em execução, você pode ver o componente CarPreview se alterar enquanto você seleciona linhas diferentes na tabela, altera valores na tabela, move os controles deslizantes, marca e desmarca as caixas de verificação.

A imagem abaixo mostra a aplicação em execução final.

Próximas etapas

Este tutorial ofereceu uma introdução ao suporte a Framework de aplicação Swing e Vinculação de beans no IDE.

Para uma introdução mais geral ao uso do Construtor de GUIs do IDE, consulte Construção de GUIs no NetBeans IDE.

Para obter mais informações sobre como usar a vinculação de beans no IDE, consulte Beans de vinculação e dados em uma aplicação de área de trabalho.

Veja também

• Página do projeto Vinculação de beans em java.net
• Página do projeto Framework de aplicação Swing em java.net
• Perguntas freqüentes do Editor de GUIs
• Web log de Patrick Keegan em desenvolvimento Swing no NetBeans IDE
• Tutorial Java EE: introdução à API de persistência Java