Tutorial - Criando um protótipo de software com o NetBeans

Question

O intuito do t&oacute;pico &eacute; apenas orientar em como fazer um prot&oacute;tipo de software. Apenas darei algumas dicas de como come&ccedil;ar um prot&oacute;tipo e n&atilde;o como fazer completamente, atrav&eacute;s das dicas b&aacute;sicas, voc&ecirc; que n&atilde;o tem nenhuma experi&ecirc;ncia com o NetBeans, com certeza ir&aacute; conseguir fazer algo legal.
Eu fiz de um jeito simples, por&eacute;m tem outras maneiras de fazer, que &agrave;s vezes pode ser mais simples ainda.

[COLOR=#0000b3][/COLOR]
[SIZE=5][COLOR=#0000b3]1. Download Java SE JDK[/COLOR][/SIZE]

Para come&ccedil;ar, voc&ecirc; deve baixar o Java SE JDK: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html?ssSourceSiteId=otnpt

Para fazer o download, siga esses passos:

[SIZE=5][COLOR=#0000b3]:veja: 1.1.[/COLOR][/SIZE] Aceite os termos

[ATTACH=full]71767[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 1.2.[/COLOR][/SIZE] Baixe a vers&atilde;o de acordo com o seu sistema operacional/arquitetura

[ATTACH=full]71769[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 1.3. [/COLOR][/SIZE]Execute o arquivo baixado (estou usando Windows) para come&ccedil;ar a instala&ccedil;&atilde;o. Clique em Next.

[ATTACH=full]71771[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 1.4.[/COLOR][/SIZE]  Clique em Next

[ATTACH=full]71773[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 1.5.[/COLOR][/SIZE] Caso deseja alterar a pasta de destino de instala&ccedil;&atilde;o, clique em Alterar, depois em Next.

[ATTACH=full]71775[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 1.6.[/COLOR][/SIZE] Instala&ccedil;&atilde;o conclu&iacute;da, clique em Close.

[ATTACH=full]71777[/ATTACH]

Primeira parte conclu&iacute;da, agora &eacute; necess&aacute;rio instalar o NetBeans.

[SIZE=5][COLOR=#0000b3]2.[/COLOR] [COLOR=#0000b3]Download NetBeans 8.2[/COLOR][/SIZE]

Acesse o site e baixe o NetBeans: https://netbeans.org/downloads/

[ATTACH=full]71779[/ATTACH]

1&ordm; - Selecione o idioma desejado;
2&ordm; - Selecione o seu sistema operacional/arquitetura;
3&ordm; - Escolha qual vers&atilde;o deseja instalar e clique em Download. Eu prefiro tudo.

[SIZE=5][COLOR=#0000b3]:veja: 2.1. [/COLOR][/SIZE]Execute o instalador do NetBeans

[ATTACH=full]71781[/ATTACH]

Voc&ecirc; pode personalizar os pacotes e runtimes que ser&atilde;o instalados. Logo ap&oacute;s, clique em Pr&oacute;ximo
[SIZE=5][COLOR=#0000b3]
:veja: 2.2.[/COLOR][/SIZE] Aceite os termos de licen&ccedil;a e clique em Pr&oacute;ximo

[ATTACH=full]71783[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 2.3.[/COLOR][/SIZE] Na primeira op&ccedil;&atilde;o voc&ecirc; pode selecionar aonde ser&aacute; instalado a IDE e na segunda op&ccedil;&atilde;o caso n&atilde;o detectar automaticamente, selecione  o arquivo do JDK e clique em Pr&oacute;ximo.

[ATTACH=full]71787[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 2.4.[/COLOR][/SIZE] Nessa tela &eacute; o mesmo crit&eacute;rio acima. Logo ap&oacute;s, clique em Pr&oacute;ximo.

[ATTACH=full]71791[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 2.5.[/COLOR][/SIZE] Se desejar ative a op&ccedil;&atilde;o para verificar atualiza&ccedil;&otilde;es e clique em Instalar.

[ATTACH=full]71793[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 2.6. [/COLOR][/SIZE]Aguarde a instala&ccedil;&atilde;o...

[ATTACH=full]71795[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 2.7.[/COLOR][/SIZE] Escolha se deseja ativar ou n&atilde;o a op&ccedil;&atilde;o para contribuir com projetos e depois clique em Finalizar

[ATTACH=full]71797[/ATTACH]

[SIZE=5][COLOR=#0000b3]
:veja: 2.8. [/COLOR][/SIZE]NetBeans Instalado!

[ATTACH=full]71799[/ATTACH]

Answer

[SIZE=5][COLOR=#0000b3]3.[/COLOR] [COLOR=#0000b3]Criando um projeto/prot&oacute;tipo[/COLOR][/SIZE]

Clique em Arquivo > Novo Projeto

[ATTACH=full]71887[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 3.1. [/COLOR][/SIZE]Em Categorias selecione Java e em Projetos selecione Aplica&ccedil;&atilde;o Java. Clique em Pr&oacute;ximo

[ATTACH=full]71889[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 3.2.[/COLOR][/SIZE] D&ecirc; um nome ao seu projeto, desative a op&ccedil;&atilde;o Criar classe principal e clique em Finalizar

[ATTACH=full]71891[/ATTACH]

[SIZE=5][COLOR=#0000b3] :veja: 3.4.[/COLOR][/SIZE] Ser&aacute; criado seu projeto, voc&ecirc; pode ver ele ao lado esquerdo. Clique no + em Pacotes de C&oacute;digo-fonte

[ATTACH=full]71895[/ATTACH]
[SIZE=5][COLOR=#0000b3]
:veja: 3.5.[/COLOR][/SIZE] Clique com bot&atilde;o direito do mouse sobre Pacote default > Novo > Form JFrame...

[ATTACH=full]71893[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 3.6. [/COLOR][/SIZE]D&ecirc; um nome a sua classe/Frame e clique em Finalizar

[ATTACH=full]71897[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 3.7. [/COLOR][/SIZE]Projeto criado!

[ATTACH=full]71899[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 4.[/COLOR] Paleta e Propriedades[/SIZE]

Paleta:

[ATTACH=full]71901[/ATTACH]

A paleta tem diversas op&ccedil;&otilde;es, aonde voc&ecirc; pode personalizar o seu prot&oacute;tipo, adicionando menus, tabelas, campos etc.

Propriedades:

[ATTACH=full]71905[/ATTACH]

Com as propriedades, voc&ecirc; pode personalizar os atributos das paletas.

[SIZE=5][COLOR=#0000b3]5.[/COLOR] [COLOR=#0000b3]Criando uma barra de menu[/COLOR][/SIZE]

[SIZE=5][COLOR=#0000b3]:veja: 5.1.[/COLOR][/SIZE] Expanda a op&ccedil;&atilde;o Menus Swing e arraste a op&ccedil;&atilde;o Barra de Menu para o seu Frame.

[ATTACH=full]71903[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 5.2.[/COLOR][/SIZE] Barra de Menu feita!

[ATTACH=full]71907[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 5.3.[/COLOR][/SIZE] Para personalizar o nome dos menus, clique com bot&atilde;o direito do mouse sobre o menu > Editar Texto

[ATTACH=full]71909[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 5.4. [/COLOR][/SIZE]Para adicionar novos menus, clique com bot&atilde;o direito do mouse sobre a barra criada e clique em Adicionar Menu

[ATTACH=full]71911[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 5.5.[/COLOR][/SIZE] Para ver como est&aacute; ficando seu projeto, clique em Visualizar Design

[ATTACH=full]71913[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 5.6.[/COLOR][/SIZE] Para adicionar um sub-menu, clique com bot&atilde;o direito sobre o menu que voc&ecirc; deseja criar um sub > Adicionar da paleta > Item de Menu

[ATTACH=full]71917[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 5.7.[/COLOR][/SIZE] Selecione o sub-menu criado (ir&aacute; ficar uma marca laranja selecionada) > Clique com bot&atilde;o direito do mouse sobre o sub-menu > Editar Texto

[ATTACH=full]71919[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 5.8. [/COLOR][/SIZE]Para personalizar ainda mais o menu, da para colocar &iacute;cones. Para isso, clique sobre o menu ou sub-menu que deseja inserir o &iacute;cone (utilizei como exemplo o sub-menu). Caso escolher o sub-menu, clique sobre o quadrado, ele ir&aacute; fazer uma marca laranja ao lado.

[ATTACH=full]71921[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 5.9.[/COLOR][/SIZE] Clique com bot&atilde;o direito do mouse sobre essa marca laranja > Propriedades

[ATTACH=full]71923[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 5.10.[/COLOR][/SIZE] Procure por Icon e clique nos tr&ecirc;s pontos

[ATTACH=full]71925[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 5.11.[/COLOR][/SIZE] Agora, voc&ecirc; pode escolher como deseja selecionar a imagem. Quando escolher, ir&aacute; mostrar a imagem abaixo como pr&eacute;-visualiza&ccedil;&atilde;o. Clique em OK.

[ATTACH=full]71927[/ATTACH]

Answer

[SIZE=5][COLOR=#0000b3]6. Abrindo uma nova tela/frame ao clicar no menu/bot&atilde;o[/COLOR][/SIZE]

Abra o projeto criado > clique com bot&atilde;o direito do mouse sobre Pacote default > Novo > Form JFrame...

[ATTACH=full]71929[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 6.1.[/COLOR][/SIZE] D&ecirc; um nome e clique em Finalizar.

[ATTACH=full]71931[/ATTACH]

Agora, voc&ecirc; pode personalizar ela do jeito que deseja, adicionando bot&otilde;es, campo de texto, tabela etc. (abaixo eu mostro como fazer um simples formul&aacute;rio).

:veja: [SIZE=5][COLOR=#0000b3]6.2.[/COLOR][/SIZE] Eu vou utilizar o sub-menu Cadastrar, do menu Clientes, para que possa abrir uma nova tela, com um formul&aacute;rio de cadastro de clientes.

[ATTACH=full]71933[/ATTACH]

:veja:[SIZE=5][COLOR=#0000b3] 6.3.[/COLOR][/SIZE] Selecione o texto do seu sub-menu(ele tem que ficar com uma marca laranja) > Clique com bot&atilde;o direito do mouse sobre esse texto > Eventos > Action > ActionPerformed

[ATTACH=full]71935[/ATTACH]

:veja: [SIZE=5][COLOR=#0000b3]6.4.[/COLOR][/SIZE] Insira o seguinte c&oacute;digo: new [COLOR=#ff0000]NOMEDOFRAME[/COLOR]().setVisible(true);

[COLOR=#ff0000][ATTACH=full]71937[/ATTACH]

NOMEDOFRAME[/COLOR] = tem que ser exatamente o mesmo nome que voc&ecirc; deu ao frame criado.

Pronto. Agora basta salvar, executar o projeto e testar.

[SIZE=5][COLOR=#0000b3]7. Criando um simples formul&aacute;rio[/COLOR][/SIZE]

:veja: [SIZE=5][COLOR=#0000b3]7.1.[/COLOR][/SIZE] Com o novo frame criado, puxe a label para sua tela.

[ATTACH=full]71939[/ATTACH]

Para economizar tempo, basta dar um CTRL + C no label criado e CTRL + V para duplicar quantas vezes necess&aacute;rio.

[SIZE=5][COLOR=#0000b3]:veja: 7.2.[/COLOR][/SIZE] O NetBeans ajuda voc&ecirc; a alinhar as labels, mostrando quantas linhas de espa&ccedil;amento tem entre uma label e outra, se est&aacute; alinhada etc. Voc&ecirc; pode utilizar esse recurso, para deixar sua tela mais bonita e organizada.

[ATTACH=full]71941[/ATTACH]

[SIZE=5][COLOR=#0000b3]:veja: 7.3.[/COLOR][/SIZE] Para evitar ficar alterando uma label de cada vez, voc&ecirc; pode selecionar todas de uma s&oacute; vez, basta selecionar tudo com o pr&oacute;prio mouse, ir&aacute; fazer essa marca laranja, isso quer dizer que est&atilde;o selecionados. Agora, voc&ecirc; pode alterar todas as labels de uma s&oacute; vez, mudando por exemplo a fonte.

[ATTACH=full]71943[/ATTACH]

:veja: [SIZE=5][COLOR=#0000b3]7.4.[/COLOR][/SIZE] Para mudar a fonte por exemplo, [COLOR=#000000]procure[/COLOR] por Font nas Propriedades (fica do lado direito inferior do NetBeans) > clique nos tr&ecirc;s pontos

[ATTACH=full]71945[/ATTACH]

:veja: [SIZE=5][COLOR=#0000b3]7.5.[/COLOR][/SIZE] Agora voc&ecirc; pode personalizar a fonte da sua maneira. Logo ap&oacute;s, clique em OK.

[ATTACH=full]71947[/ATTACH]

:veja: [SIZE=5][COLOR=#0000b3]7.6.[/COLOR][/SIZE] Dando continuidade, vamos adicionar campos de texto. Para isso, puxe a op&ccedil;&atilde;o Campo de Texto que se encontra na paleta Controles Swing

[ATTACH=full]71949[/ATTACH]

:veja: [SIZE=5][COLOR=#0000b3]7.7. [/COLOR][/SIZE]Puxe os campos de textos necess&aacute;rio, clique com bot&atilde;o direito do mouse sobre esse campo > Editar Texto

[ATTACH=full]71951[/ATTACH]

:veja: [SIZE=5][COLOR=#0000b3]7.8.[/COLOR][/SIZE] O texto ser&aacute; apagado e o campo ficar&aacute; pequeno, basta selecionar o campo e aumentar o tamanho.

[ATTACH=full]71953[/ATTACH]

:veja: [SIZE=5][COLOR=#0000b3]7.9.[/COLOR][/SIZE] Vamos colocar alguns bot&otilde;es agora. Para isso, puxe a op&ccedil;&atilde;o Bot&atilde;o que se encontra na paleta Controles Swing

[ATTACH=full]71955[/ATTACH]

:veja: [SIZE=5][COLOR=#0000b3]7.10.[/COLOR][/SIZE] Clique com bot&atilde;o direito do mouse sobre esse bot&atilde;o > Editar Texto.

[ATTACH=full]71957[/ATTACH]

:veja: [SIZE=5][COLOR=#0000b3]7.11.[/COLOR][/SIZE] Agora &eacute; a mesma coisa que as labels, o NetBeans ajuda voc&ecirc; a alinhar os bot&otilde;es.

[ATTACH=full]71959[/ATTACH]

Answer

[SIZE=5][COLOR=#0000b3]8. Utilizando/editando tabelas[/COLOR][/SIZE]

A tabela ir&aacute; fazer parte do formul&aacute;rio, por&eacute;m estou dividindo essa parte.

:veja: [SIZE=5][COLOR=#0000b3]8.1.[/COLOR][/SIZE] Para adicionar uma tabela, puxe a op&ccedil;&atilde;o Tabela na paleta Controles Swing

[ATTACH=full]71961[/ATTACH]

:veja: [SIZE=5][COLOR=#0000b3]8.2.[/COLOR][/SIZE] Clique com bot&atilde;o direito do mouse sobre a tabela > Conte&uacute;do da tabela

[ATTACH=full]71963[/ATTACH]

:veja: [SIZE=5][COLOR=#0000b3]8.3. [/COLOR][/SIZE]Em colunas, voc&ecirc; pode editar o t&iacute;tulo dos campos da tabela, inserir novas colunas, excluir etc.

[ATTACH=full]71965[/ATTACH]

:veja: [SIZE=5][COLOR=#0000b3]8.4.[/COLOR][/SIZE] Nas linhas, voc&ecirc; pode aumentar a quantidade clicando em contagem. Personalize da sua maneira as Colunas e Linhas e clique em Fechar

[ATTACH=full]71967[/ATTACH]

:veja:[SIZE=5][COLOR=#0000b3] 8.5. [/COLOR][/SIZE]Voc&ecirc; pode aumentar o tamanho da sua tabela, arrastando esses pontos.

[ATTACH=full]71969[/ATTACH]

:veja: [SIZE=5][COLOR=#0000b3]8.6.[/COLOR][/SIZE] Voc&ecirc; tamb&eacute;m, pode aumentar o tamanho das colunas, basta definir uma largura m&aacute;xima e m&iacute;nima.

[ATTACH=full]71971[/ATTACH]

Formul&aacute;rio e tabela conclu&iacute;da!

[ATTACH=full]71973[/ATTACH]

[SIZE=5][COLOR=#0000b3]9. Fechar apenas uma tela/frame em vez do projeto todo[/COLOR][/SIZE]

Temos um pequeno problema, quando abrimos o projeto principal e clicamos para abrir uma nova tela/frame clicando no menu/bot&atilde;o, essa tela/frame abre normalmente, por&eacute;m, quando clicamos para fechar, acaba fechando o projeto todo. Vamos alterar isso.

:veja: [SIZE=5][COLOR=#0000b3]9.1.[/COLOR][/SIZE] Selecione todo o frame > Clique com bot&atilde;o direito do mouse > Propriedades

[ATTACH=full]71975[/ATTACH]

:veja: [SIZE=5][COLOR=#0000b3]9.2. [/COLOR][/SIZE]Selecione a aba Propriedades. Em defaultCloseOperation, estar&aacute; EXIT_ON_CLOSE, escolha a op&ccedil;&atilde;o Dispose. Pronto!

[ATTACH=full]71977[/ATTACH]

[SIZE=5][COLOR=#0000b3]
10. Centralizar os frames no centro da tela[/COLOR][/SIZE]

Quando criamos um frame e abrimos, ele &eacute; aberto automaticamente no canto esquerdo superior da tela e n&atilde;o ao centro. Para centralizar &eacute; simples.

:veja: [SIZE=5][COLOR=#0000b3]10.1.[/COLOR][/SIZE] Selecione todo o frame > Clique com bot&atilde;o direito do mouse > Propriedades

[ATTACH=full]71975[/ATTACH]

:veja: [SIZE=5][COLOR=#0000b3]10.2.[/COLOR][/SIZE] Selecione a aba C&oacute;digo e ativa a op&ccedil;&atilde;o Gerar Centralizado.

[ATTACH=full]71979[/ATTACH]

Em Tamanho do designer, voc&ecirc; pode alterar o tamanho da tela tamb&eacute;m.

[SIZE=5][COLOR=#0000b3]11. Bloquear altera&ccedil;&atilde;o do tamanho da tela e maximizar[/COLOR][/SIZE]

Agora teremos outro problema. Voc&ecirc; pode alterar o tamanho da tela quando quiser, clicando sobre as pontas do software (quadros em vermelhos na imagem abaixo) ou maximizar, o que acaba estragando o prot&oacute;tipo.

:veja: [SIZE=5][COLOR=#0000b3]11.1.[/COLOR][/SIZE] Selecione todo o frame > Clique com bot&atilde;o direito do mouse > Propriedades

[ATTACH=full]71975[/ATTACH]

:veja: 11.2. V&aacute; na aba Propriedades > procure pela op&ccedil;&atilde;o Resizable e desative. Clique em Fechar.

[ATTACH=full]71981[/ATTACH]

[SIZE=5][COLOR=#0000b3]12. Adicionando &iacute;cone nos bot&otilde;es[/COLOR][/SIZE]

Para adicionar &iacute;cone nos bot&otilde;es &eacute; o mesmo procedimento dos menus.

:veja: [SIZE=5][COLOR=#0000b3]12.1.[/COLOR][/SIZE] Clique com bot&atilde;o direito do mouse sobre o bot&atilde;o > Propriedades

[ATTACH=full]71975[/ATTACH]

:veja: [SIZE=5][COLOR=#0000b3]12.2.[/COLOR][/SIZE] Escolha uma imagem. Ela ir&aacute; aparecer abaixo como pr&eacute;-visualiza&ccedil;&atilde;o. Clique em OK.

[ATTACH=full]71983[/ATTACH]

:veja: [SIZE=5][COLOR=#0000b3]12.3.[/COLOR][/SIZE] &Iacute;cone inserido!

[ATTACH=full]71985[/ATTACH]

Ferramentas

Mover Tópico