Criando um GUI Swing no NetBeans IDE
Este tutorial o orienta durante o processo de criação da interface gráfica do usuário (GUI para um aplicati!o c"amado ContactEditor usando o NetBeans IDE GUI Builder# No processo$ !oc% fará o la&out de uma GUI front' end ue permite !isuali)ar e editar as informaç*es de contato dos indi!+duos inclu+dos em um ,anco de dados dos funcionários# Neste tutorial$ !oc% aprenderá como- usar o Interface Builder GUI$ criar um Container GUI$ adicionar$ redimensionar e alin"ar componentes$ a.ustar componentes de ancoragem$ definir o comportamento de dimensionamento automático$ editar as propriedades do componente# Este tutorial le!a cerca de /0 minutos para ser conclu+do#
Conte1do •
o o •
•
o o o •
o o o o •
o o •
o o o •
•
•
•
Introdução Criando um pro.eto Criando um Container 23rame 3amiliari)ando'se com o Construtor de GUI Conceitos'c"a!e Desen"o li!re 4osicionamento automático dos componentes (Encai5e 3eed,ac6 !isual 3irst 7"ings 3irst 8dicionando componentes- 7"e Basics 8dicionando componentes indi!iduais ao formulário 8dicionando !ários componentes ao formulário Componentes inserindo 9o!ing 3orward 8lin"amento de componentes 8lin"amento de ,ase :e!isão ue foi aprendido 8dicionando$ alin"ando e 8ncoragem Dimensionamento de componentes Ental"e 3a)endo os a.ustes finais Inspecionando Seu GUI Implantando aplicati!os GUI ;e.a tam,
Software ou recurso NetBeans IDE
Versão necessária !ersão =#> ou ?#0
2a!a De!elopment @it (2D@ !ersão =
Introdução
Construtor de GUIs do IDE torna poss+!el a construção de GUIs de apar%ncia profissional sem um con"ecimento profundo dos gerenciadores de la&out# ;oc% pode criar formulários$ simplesmente colocando componentes onde uiser# 4ara o,ter descriç*es de feed,ac6 !isual do Construtor de GUIs$ !oc% pode usar o GUI Builder Aegenda de comentários ;isual # ;isual #
Criando um pro.eto
Como todo o desen!ol!imento 2a!a no IDE ocorre dentro de pro.etos$ precisamos primeiro criar um pro.eto no!o no ual ContactEditor para arma)enar fontes e outros arui!os do pro.eto# Um pro.eto do IDE < um grupo de arui!os'fonte 2a!a e metadados associados$ incluindo pro.eto espec+fico arui!os de propriedades$ um script de construção 8nt ue controla a construir e e5ecutar as configuraç*es$ e um arui!o project.xml ue mapeia destinos 8nt para comandos do IDE# Enuanto as aplicaç*es 2a!a consistem muitas !e)es em !ários pro.etos IDE$ para os fins deste tutorial$ !amos construir uma aplicação simples$ inteiramente arma)enada em um 1nico pro.eto#
4ara criar um no!o pro.eto de aplicação ContactEditor: # Escol"a 8rui!o No!o pro.eto# 8lternati!amente$ !oc% pode clicar no +cone No!o pro.eto na ,arra de ferramentas IDE# # No painel Categorias$ selecione o n 2a!a e no painel 4ro.etos$ escol"a 8plicação 2a!a# Cliue em 8!ançar# /# Digite ContactEditor no campo Nome do pro.eto e especifiue o local do pro.eto# F# Dei5e o Usar pasta dedicada para arma)enar ,i,liotecas c"ec6,o5 desmarcada# # Garantir ue a cai5a de seleção Definir como pro.eto principal está marcada e limpe o campo Criar classe principal# =# Cliue em Concluir# H IDE cria a pasta ContactEditor em seu sistema no local designado# Esta pasta cont
vazio. 4ara prosseguir com a construção da nossa interface$ precisamos criar um cont%iner 2a!a no ual colocaremos os outros componentes GUI necessário# Nesta etapa !amos criar um cont%iner usando o componente JFrame e coloue o recipiente em um no!o pacote#
4ara adicionar um cont%iner JFrame: # Na .anela 4ro.etos$ cliue com o n ContactEditor e selecione No!o 3ormulário 23rame# 8lternati!amente$ !oc% pode encontrar um formulário 23rame escol"endo No!o Hutro 3ormulários GUI Swing 3ormulário 23rame# # Digite ContactEditorUI como o nome da classe# /# Digite my.contacteditor como o pacote# F# Cliue em Concluir# H IDE cria o formulário ContactEditorUI ea classe ContactEditorUI dentro do aplicati!o ContactEditorUI.java e a,re o formulário ContactEditorUI no Construtor de GUI# H,ser!e ue o pacote my.contacteditor su,stitui o pacote padrão#
3amiliari)ando'se com o Construtor de GUI 8gora ue criamos um no!o pro.eto para a nossa aplicação$ !amos dar um minuto para nos familiari)ar com a interface do Construtor de GUIs# Nota: 4ara e5plorar a interface do Construtor de GUI com uma demonstração interati!a$ !e.a o E5plorando GUI Builder (swf# screencast#
•
•
•
•
uando adicionamos o cont%iner 23rame$ o IDE a,riu o rec
o cdigo e5i,ido nas áreas ,rancas do Editor na e5i,ição 3onte# Se !oc% precisar fa)er alteraç*es no cdigo dentro de um ,loco protegido$ clicar no ,otão Design retorna o Editor do IDE para o Construtor de GUI onde !oc% pode fa)er os a.ustes necessários para o formulário# uando !oc% sal!ar suas alteraç*es$ o IDE atuali)a as fontes do arui!o# Nota: 4ara os desen!ol!edores a!ançados$ o 4alette 9anager está dispon+!el ue l"e permite adicionar componentes personali)ados de 28:s$ ,i,liotecas ou outros pro.etos para a paleta# 4ara adicionar componentes personali)ados atra!
Conceitos'c"a!e GUI Builder do IDE resol!e o pro,lema central da criação de GUIs 2a!a otimi)ando o flu5o de criação de interfaces gráficas$ li,erando os desen!ol!edores das comple5idades dos gerenciadores de la&out Swing# Ele fa) isso atra!
Desen"o li!re
No Construtor de GUIs do IDE$ !oc% pode construir seus formulários$ simplesmente colocando os componentes onde uiser$ como se esti!esse usando posicionamento a,soluto# H Construtor de GUIs desco,re uais atri,utos de la&out são o,rigatrios e gera o cdigo para !oc% automaticamente# ;oc% não precisa se preocupar com inserç*es$ Jncoras$ preenc"imentos e assim por diante#
4osicionamento automático dos componentes (Encai5e
Como !oc% adicionar componentes a um formulário$ o Construtor de GUI fornece feed,ac6 !isual ue au5ilia no posicionamento dos componentes com ,ase na apar%ncia do seu sistema operacional e sentir# H Construtor de GUI fornece dicas 1teis em lin"a e outros comentários !isuais so,re onde os componentes de!em ser colocados em sua forma$ encai5ando automaticamente os componentes na posição em função de orientaç*es# Ele fa) essas sugest*es com ,ase nas posiç*es dos componentes ue .á foram colocados na forma$ permitindo o preenc"imento de permanecer fle5+!el de tal forma ue apar%ncia diferente do destino se.a processada corretamente em tempo de e5ecução#
3eed,ac6 !isual
H Construtor de GUI tam,
3irst 7"ings 3irst 8gora ue !oc% .á familiari)ado com a interface do Construtor de GUIs$ < "ora de começar a desen!ol!er a interface do usuário de nossa aplicação ContactEditor# Nesta seção$ !amos dar uma ol"ada na utili)ação da 4aleta do IDE para adicionar os !ários componentes GUI ue precisamos para nosso formulário# Graças ao paradigma do IDE Desen"o Ai!re$ !oc% não tem mais ue lutar com gerenciadores de la&out para controlar o taman"o ea posição dos componentes nos cont%ineres# 7udo ue !oc% precisa fa)er < arrastar e soltar os componentes necessários ao seu formulário GUI$ como mostrado nas ilustraç*es ue se seguem# Nota: Consulte a componentes 8dicionando indi!iduais e m1ltiplos (swf# screencast para uma demonstração interati!a na seção a,ai5o#
8dicionando componentes- 7"e Basics
8pesar de GUI do IDE Builder simplifica o processo de criação de GUIs 2a!a$ < freuentemente 1til para es,oçar a maneira ue !oc% uiser ue o seu interface para ol"ar antes de começar a colocá'lo para fora# 9uitos
!oc% pode simplesmente dar uma ol"ada como nosso formulário preenc"ido de!e se parecer indo para a pr<' !isuali)ar o seu GUIseção# Desde .á adicionamos um 23rame como recipiente nosso formulário de n+!el superior$ o pr5imo passo < adicionar um par de 24anels ue nos permitirá unir os componentes de nossa interface de usuário usando ,ordas com t+tulos# Consulte as ilustraç*es a,ai5o e o,ser!e o IDE Mdrag and dropM comportamento uando fa)er isso#
4ara adicionar um 24anel# Na .anela 4aleta$ selecione o componente 4ainel na categoria Swing Containers$ clicando e soltando o ,otão do mouse# # 9o!er o cursor para o canto superior esuerdo do formulário no Construtor de GUI# uando o componente está locali)ado perto de margens superior e esuerda do recipiente$ as diretri)es de alin"amento "ori)ontal e !ertical aparecem indicando as margens preferidas# Cliue no formulário para colocar o 24anel neste local# H componente JPanel aparece na forma ContactEditorUI com realce na cor laran.a$ significando ue ela está selecionada$ como mostrado na ilustração a seguir# 8ps soltar o ,otão do mouse$ peuenos indicadores parecem mostrar as relaç*es de ancoragem dos componentes e um n 24anel correspondente será e5i,ido na .anela Inspetor#
Em seguida$ precisamos redimensionar o 24anel para dar espaço para os componentes !amos colocar dentro dele um pouco mais tarde$ mas !amos dar um minuto para apontar outro de !isuali)ação do Construtor de GUIs primeiras caracter+sticas# 4ara fa)er isso$ precisamos desmarcar a 24anel ue aca,amos de adicionar# 4orue ns não adicionamos uma ,orda com t+tulo$ o painel desaparecerá# H,ser!e$ entretanto$ ue uando !oc% passa o cursor so,re o 24anel$ as margens mudarão para cin)a claro para ue a sua posição pode ser !isto claramente# ;oc% s precisa clicar em ualuer lugar dentro do componente para selecioná'la no!amente e fa)er com ue as alças de redimensionamento e os indicadores de ancoragem para reaparecer#
4ara redimensionar o 24anel# Selecione o 24anel ue !oc% aca,ou de adicionar# 8 redimensionar peuenas alças uadradas reaparecer em torno do per+metro do componente# # Cliue e segure a alça de redimensionamento na margem direita do 24anel e arraste at< ue a diretri) de alin"amento pontil"ada aparece perto da ,orda do formulário#
/# Solte a alça de redimensionamento para redimensionar o componente# H componente JPanel < estendido para ficar entre as margens esuerda e direita do container$ em conformidade com o deslocamento recomendado$ como mostrado na ilustração a seguir#
8gora ue ns adicionamos um painel para conter informaç*es Nome da nossa IU$ < preciso repetir o processo para adicionar outra diretamente a,ai5o da primeira para a informação e'mail# :eferindo'se as ilustraç*es a seguir$ repita as duas tarefas anteriores$ prestando atenção ao posicionamento sugerido pelo Construtor de GUIs# H,ser!e ue o espaçamento !ertical sugerido entre os dois 24anels < muito mais estreito do ue nas ,ordas# Depois de ter adicionado o segundo 24anel$ redimensioná'la de tal forma ue preenc"e o espaço restante do formulário !ertical#
4orue ueremos distinguir !isualmente as funç*es nas seç*es superior e inferior da nossa GUI$ precisamos adicionar uma ,orda e t+tulo a cada 24anel#4rimeiro !amos fa)er isso usando a .anela 4ropriedades e depois ns !amos e5perimentá'lo usando o menu pop'up#
4ara adicionar ,ordas de t+tulo aos 24anels# Selecione o 24anel superior no Construtor de GUI# # Na .anela 4ropriedades$ cliue no ,otão retic%ncias (### pr5imo O propriedade de 3ronteira# /# No editor de Border 24anel ue aparece$ selecione o n 7itledBorder no painel Bordas dispon+!eis# F# No painel de propriedades a,ai5o$ digitar o nome para a propriedade 7itle# # Cliue nas retic%ncias (### ao lado da propriedade 3onte$ selecione Negrito para o estilo de fonte e insira para o taman"o# Cliue em H@ para sair do diálogo# =# Selecione o 24anel inferior e repita os passos a $ mas desta !e) cliue com o 24anel e acessar a .anela 4ropriedades usando o menu pop'up# Seu e-mail para a propriedade 7itle# Bordas com t+tulos serão adicionadas a am,os componentes 8dicionando componentes indi!iduais ao formulário
JPanel.
8gora$ precisamos começar a adicionar os componentes ue apresentará as informaç*es de contato reais na nossa lista de contatos# Nesta tarefa$ !amos adicionar uatro 27e5t3ields ue irá e5i,ir as informaç*es de contato e os 2Aa,els ue irá descre!%'los# Enuanto fa) isso$ o,ser!e as diretri)es "ori)ontal e !ertical ue o Construtor de GUIs e5i,e$ sugerindo o espaçamento preferido dos componentes conforme definido pelo ol"ar do seu sistema operacional e sentir# Isso garante ue a GUI se.a processada automaticamente respeitando a apar%ncia do sistema operacional de destino e sentir'se em tempo de e5ecução#
4ara adicionar um 2Aa,el ao formulário# Na .anela 4aleta$ selecione o componente :tulo na categoria Controles Swing# # 9o!er o cursor so,re o 24anel Name adicionado anteriormente# uando as diretri)es aparecem indicando ue o 2Aa,el está posicionado no canto superior esuerdo do 24anel com uma peuena margem nas ,ordas superior e esuerda$ cliue para colocar o rtulo#
H 2Aa,el < adicionado ao formulário e um n correspondente$ representando o componente < adicionado O .anela Inspetor# 8ntes de prosseguir$ precisamos editar o te5to de e5i,ição do 2Aa,el ue aca,amos de adicionar# Em,ora !oc% pode editar o te5to de e5i,ição do componente em ualuer ponto$ a maneira mais fácil < fa)er isso como !oc% adicioná'los#
4ara editar o te5to de e5i,ição de um 2Aa,el# Cliue duas !e)es no 2Aa,el para selecionar a e5i,ição de te5to# # Nome Primeiro tipo: e pressione Enter# H no!o nome do 2Aa,el < e5i,ido e largura do componente será a.ustada como resultado da edição# 8gora !amos adicionar um 27e5t3ield para ue possamos o,ter um !islum,re do alin"amento do Construtor de GUIs ,ase recurso#
4ara adicionar um 27e5t3ield ao formulário# Na .anela 4aleta$ selecione o componente Campo de te5to na categoria Controles Swing# # 9o!er o cursor imediatamente O direita do primeiro nome: 2Aa,el ue aca,amos de adicionar# uando a orientação "ori)ontal indicando ue a lin"a de ,ase 27e5t3ield está alin"ada com a do 2Aa,el eo espaçamento entre os dois componentes < sugerido com uma orientação !ertical$ cliue para posicionar o 27e5t3ield# H 27e5t3ield se encai5ará na forma alin"ada com os !alores ,asais do 2Aa,el$ como mostrado na ilustração a seguir# H,ser!e ue o 2Aa,el mudou ligeiramente para ,ai5o a fim de alin"ar com a lin"a de ,ase no campo de te5to mais alto# Como de costume$ um n ue representa o componente < adicionado O .anela Inspetor#
8ntes de prosseguir$ < preciso adicionar mais um 2Aa,el e 27e5t3ield imediatamente O direita dos ue aca,amos de adicionar$ como mostrado na ilustração a seguir# Desta !e)$ insira Sobrenome: como te5to de e5i,ição do 2Aa,el e dei5ar o 27e5t3ields Mte5to do espaço reser!ado$ como < para agora#
4ara redimensionar um 27e5t3ield# Selecione o 27e5t3ield ue aca,amos de adicionar O direita do Sobrenome: 2Aa,el#
# 8rraste a alça de redimensionamento do 27e5t3ield direita em direção O margem direita do 24anel de fec"amento# /# uando as diretri)es de alin"amento !ertical aparecerem sugerindo a margem entre o campo de te5to e margem direita do 24anel$ solte o ,otão do mouse para redimensionar o 27e5t3ield# 8 margem direita do 27e5t3ield se encai5ará em alin"amento com margem do 24anel ,orda recomendado$ como mostrado na ilustração a seguir#
8dicionando !ários componentes ao formulário 8gora !amos adicionar o Título: e Apelido: 2Aa,els ue descre!em dois 27e5t3ields ue estamos indo para adicionar em um minuto# ;amos arrastar e soltar os componentes enuanto pressiona a tecla S"ift$ para adicioná'los rapidamente para a forma# Enuanto fa)emos isso$ o,ser!e no!amente ue o Construtor de GUI e5i,e diretri)es "ori)ontais e !erticais sugerindo o espaçamento preferido do componente#
4ara adicionar !ários 2Aa,els ao formulário# Na .anela 4aleta$ selecione o componente :tulo na categoria Controles Swing$ clicando e soltando o ,otão do mouse# # 9o!er o cursor so,re o formulário diretamente a,ai5o do 2Aa,el Nome: adicionado anteriormente# uando as diretri)es aparecem indicando ue a ,orda esuerda do 2Aa,el no!o está alin"ada com a do 2Aa,el acima e "ou!er uma peuena margem entre eles$ s"ift'cliue para posicionar o primeiro 2Aa,el# /# 8inda pressionando a tecla S"ift$ cliue para colocar outro 2Aa,el imediatamente O direita do primeiro# Certifiue'se de soltar a tecla S"ift antes de posicionar o segundo 2Aa,el# Se !oc% esuecer de soltar a tecla S"ift antes de posicionar o 1ltimo 2Aa,el$ ,asta pressionar a tecla Escape# H 2Aa,els são adicionados ao formulário criando uma segunda lin"a$ como mostrado na ilustração a seguir# Ns representando cada componente são adicionados O .anela Inspetor#
8ntes de prosseguirmos$ precisamos editar o nome do 2Aa,els Mde modo ue ns !amos ser capa)es de !er o efeito dos alin"amentos ue definiremos posteriormente#
4ara editar o te5to de e5i,ição de 2Aa,els-
# Cliue duas !e)es no primeiro 2Aa,el para selecionar a e5i,ição de te5to# # Título: e pressione Enter# /# :epita as etapas e $ inserindo Apelido: para a propriedade do 2Aa,el do segundo nome# H 2Aa,els Pno!os nomes são e5i,idos na forma e são deslocados como resultado de suas larguras editadas$ como mostra a ilustração a seguir#
Componentes inserindo Nota: Consulte a inserção de componentes (swf# screencast para uma demonstração interati!a na seção a,ai5o# 9uitas !e)es < necessário adicionar um componente entre os componentes ue .á estão colocadas em um formulário# Sempre ue !oc% adicionar um componente entre dois componentes e5istentes$ o Construtor de GUI automaticamente muda'los para a,rir espaço para o no!o componente# 4ara demonstrar isso$ !amos inserir um 27e5t3ield entre os 2Aa,els adicionados anteriormente$ como mostrado nas seguintes ilustraç*es#
4ara inserir um 27e5t3ield entre dois 2Aa,els# Na .anela 4aleta$ selecione o componente Campo de te5to na categoria Controles Swing# # 9o!er o cursor so,re o Título: e Apelido: 2Aa,els na segunda lin"a de tal forma ue as so,reposiç*es 27e5t3ield am,os e está alin"ada com suas lin"as de ,ase# Se !oc% ti!er dificuldade em posicionar o no!o campo de te5to$ !oc% pode encai5á'lo com a diretri) esuerda do 2Aa,el Apelido, como mostra a primeira imagem a,ai5o# /# Cliue para colocar o 27e5t3ield entre o
Título: e Apelido: 2Aa,els#
H 27e5t3ield se encai5ará entre os dois 2Aa,els# 8s mudanças mais O direita 2Aa,el para a direita do 27e5t3ield para acomodar o deslocamento "ori)ontal sugerido#
Ns ainda precisamos adicionar um 27e5t3ield adicionais para a forma ue irá e5i,ir o apelido do contato no lado direito do formulário#
4ara adicionar um 27e5t3ield# Na .anela 4aleta$ selecione o componente Campo de te5to na categoria Swing# # 9o!er o cursor para a direita do rótulo 8pelido e cliue para colocar o campo de te5to# H 27e5t3ield se encai5ará ao lado do 2Aa,el O sua esuerda# 4ara redimensionar um 27e5t3ield# 8rraste as alças de redimensionamento da Nickname: 27e5t3ield etiueta ue !oc% adicionou na tarefa anterior O direita do 24anel de fec"amento# # uando as diretri)es de alin"amento !ertical aparecerem sugerindo a margem entre o campo de te5to e do 24anel$ solte o ,otão do mouse para redimensionar o 27e5t3ield# 8 margem direita do 27e5t3ield se encai5ará em alin"amento com margem do 24anel ,orda e recomendado o Construtor de GUI infere o comportamento de redimensionamento correto# topo
9o!ing 3orward H alin"amento < um dos aspectos mais fundamentais da criação de aspecto profissional GUIs# Na seção anterior$ ti!emos um !islum,re das caracter+sticas do IDE de alin"amento ao adicionar o 2Aa,el e componentes 27e5t3ield ao nosso formulário ContactEditorUI# Em seguida$ !amos dar uma !isão mais profunda os recursos do Construtor de GUIs alin"amento O medida ue tra,al"amos com os outros componentes ue precisamos para nossa aplicação#
8lin"amento de componentes
Nota: Consulte o alin"amento e ancoragem componentes (swf# screencast para uma demonstração interati!a nas seç*es a,ai5o# 7oda !e) ue !oc% adicionar um componente a um formulário$ o Construtor de GUI efeti!amente alin"a'los$ como e!idenciado pelas diretri)es de alin"amento ue aparecem# s !e)es < necessário$ no entanto$ para especificar as relaç*es entre diferentes grupos de componentes tam,
4ara alin"ar componentes# 9anten"a pressionada a tecla Ctrl e cliue para selecionar o Nome: e Título: 2Aa,els no lado esuerdo do formulário# # Cliue no ,otão 8lin"ar O Direita na coluna ( Na ,arra de ferramentas# 8lternati!amente$ !oc% pode ,otão direito do mouse em um deles e escol"a 8lin"ar direita na coluna no menu pop'up# /# :epita este procedimento para o Sobrenome: e Apelido: 2Aa,els
tam,
4ara definir o comportamento de redimensionamento de componentes# Control'cliue os dois componentes 27e5t3ield inseridos para selecioná'los no Construtor de GUI# # Com am,os os 27e5t3ields selecionado$ ,otão direito do mouse ualuer um deles e escol"a :edimensionamento automático Qori)ontal no menu pop'up# H 27e5t3ields são definidas para redimensionar "ori)ontalmente em tempo de e5ecução# 8s diretri)es de alin"amento e os indicadores de ancoragem serão atuali)ados$ fornecendo feed,ac6 !isual dos relacionamentos dos componentes# 4ara configurar os componentes para ser do mesmo taman"o# Control'cliue em todos os uatro 27e5t3ields no formulário para selecioná'los# # Com o 27e5t3ields selecionado$ ,otão direito do mouse em ualuer um deles e escol"a Definir 7aman"o 9esmo a partir do menu pop'up# H 27e5t3ields está tudo pronto para a mesma largura e os indicadores são adicionados O ,orda superior de cada um$ fornecendo feed,ac6 !isual dos relacionamentos dos componentes# 8gora precisamos adicionar outro 2Aa,el descre!endo o 2Com,oBo5 ue permitirá aos usuários selecionar o formato das informaç*es a nossa aplicação ContactEditor será e5i,ida#
4ara alin"ar um 2Aa,el para um grupo de componentes# Na .anela 4aleta$ selecione o componente :tulo na categoria Swing# # 9o!er o cursor a,ai5o do Nome e 2Aa,els Título no lado esuerdo do 24anel# uando a orientação < e5i,ida indicando ue a margem direita do 2Aa,el no!o está alin"ada com as margens direita do grupo de componentes acima (os dois 2Aa,els$ cliue para posicionar o componente# H 2Aa,el se encai5ará em uma posição alin"ada O direita com a coluna de 2Aa,els acima$ como mostra a ilustração a seguir# H Construtor de GUI atuali)a as lin"as de alin"amento de status indicando o espaçamento dos componentes e as relaç*es de ancoragem#
Como nos e5emplos anteriores$ cliue duas !e)es no 2Aa,el para selecionar a e5i,ição de te5to e digite Display: para o nome de e5i,ição#H,ser!e ue uando o 2Aa,el se encai5a na posição$ os outros componentes mudam para acomodar o te5to de e5i,ição maior#
Format
8lin"amento de ,ase
Sempre ue !oc% adicionar ou mo!er componentes ue incluem te5to (2Aa,els$ 27e5t3ields$ e assim por diante$ o IDE sugere alin"amentos ue são ,aseados em lin"as de ,ase do te5to nos componentes# uando inserimos o 27e5t3ield anteriormente$ por e5emplo$ sua lin"a de ,ase foi automaticamente alin"ada aos 2Aa,els ad.acentes# 8gora !amos adicionar a cai5a de com,inação ue permitirá aos usuários selecionar o formato da informação ue a nossa aplicação ContactEditor mostrar# medida ue adicionar o 2Com,oBo5$ !amos alin"ar a sua lin"a de ,ase para ue do te5to do 2Aa,el# H,ser!e mais uma !e) as diretri)es de ,ase de alin"amento ue aparecem para nos a.udar com o posicionamento#
4ara alin"ar as lin"as de ,ase de componentes# Na .anela 4aleta$ selecione o componente Cai5a de com,inação na categoria Controles Swing# # 9o!er o cursor imediatamente O direita do 2Aa,el ue aca,amos de adicionar# uando a orientação "ori)ontal indicando ue a lin"a de ,ase 2Com,oBo5 está alin"ada com a lin"a de ,ase do te5to no 2Aa,el eo espaçamento entre os dois componentes < sugerido com uma orientação !ertical$ cliue para posicionar a cai5a de com,inação# H componente se encai5ará em uma posição alin"ada com a lin"a de ,ase do te5to no 2Aa,el O sua esuerda$ como mostra a ilustração a seguir# H Construtor de GUI e5i,e lin"as de status indicando o espaçamento dos componentes e as relaç*es de ancoragem#
4ara redimensionar o 2Com,oBo5# Selecione o Com,oBo5 no Construtor de GUI# # 8rraste a alça de redimensionamento na margem direita do 2Com,oBo5 para a direita at< ue as diretri)es de alin"amento se.am e5i,idas sugerindo o deslocamento preferido entre o 2Com,oBo5 e do 24anel# Como mostrado na ilustração a seguir$ a margem direita do 2Com,oBo5 se encai5ará em alin"amento com margem do 24anel ,orda recomendado e largura do componente < automaticamente definida para redimensionar com o formulário#
Edição de modelos de componentes está al
:e!isão ue foi aprendido Ns te!e um ,om in+cio de construção da nossa GUI ContactEditor$ mas !amos dar um minuto para recapitular o ue aprendemos enuanto ns acrescentar mais alguns dos componentes da nossa interface reuer# 8t< agora ns nos concentramos na adição de componentes para a nossa GUI ContactEditor usando as diretri)es de alin"amento do IDE para nos a.udar com o posicionamento# R importante entender$ no entanto$ ue outra parte integrante do posicionamento de componentes < ancoragem# Em,ora ns não discutimos isso ainda$ !oc% .á apro!eitou este recurso sem perce,er# Como mencionado anteriormente$ sempre ue !oc% adicionar um componente a um formulário$ o IDE sugere o ol"ar al!o e posicionamento preferido sentir com as orientaç*es# Uma !e) colocado$ no!os componentes tam,
8dicionando$ alin"ando e 8ncoragem
H Construtor de GUI permite ue !oc% colocar para fora seus formulários de forma rápida e facilmente otimi)ando gestos flu5o de tra,al"o t+pico# Sempre ue !oc% adicionar um componente a um formulário$ o Construtor de GUI automaticamente se encai5a'los na posição preferida e define as relaç*es de encadeamento necessárias para ue !oc% possa se concentrar no design dos formulários ao in!
4ara adicionar$ alin"ar e editar o te5to de e5i,ição de um 2Aa,el# Na .anela 4aleta$ selecione o componente :tulo na categoria Controles Swing# # 9o!er o cursor so,re o formulário imediatamente a,ai5o do t+tulo do 24anel inferior e'mail# uando as diretri)es aparecem indicando ue está posicionado no canto superior esuerdo do 24anel com uma peuena margem nas ,ordas superior e esuerda$ cliue para colocar o 2Aa,el# /# Cliue duas !e)es no 2Aa,el para selecionar a e5i,ição de te5to# Então Endereço de E-mail do tipo: e pressione Enter# H 2Aa,el se encai5ará na posição preferida no formulário$ ancorado nas margens superior e esuerda do 24anel de fec"amento# 7al como antes$ um n correspondente$ representando o componente < adicionado O .anela Inspetor# 4ara adicionar um 27e5t3ield# Na .anela 4aleta$ selecione o componente Campo de te5to na categoria Controles Swing# # 9o!er o cursor imediatamente O direita do rtulo endereço de email ue aca,amos de adicionar# uando as diretri)es aparecem indicando ue a lin"a de ,ase 27e5t3ield está alin"ada com a lin"a de ,ase
do te5to no 2Aa,el ea margem entre os dois componentes < sugerido com uma orientação !ertical$ cliue para posicionar o campo de te5to# H 27e5t3ield se encai5ará no lado direito do endereço de e-mail: 2Aa,el e está acorrentado ao 2Aa,el# H n correspondente tam,
4ara adicionar e redimensionar um 2Aist# Na .anela 4aleta$ selecione o componente Aista da categoria Controles Swing# # 9o!er o cursor imediatamente a,ai5o do 2Aa,el Endereço de Email adicionado anteriormente# uando as diretri)es e5i,ida indicando ue a 2Aist de margens superior e esuerda estão alin"ados com as margens preferenciais ao longo da margem esuerda do 24anel e do 2Aa,el acima$ cliue para posicionar o 2Aist# /# 8rraste a alça de redimensionamento do 2Aist direção O direita do 24anel at< ue as diretri)es de alin"amento se.am e5i,idas indicando ue < a mesma largura ue o 27e5t3ield acima# H 2Aist se encai5ará na posição designada pelas diretri)es de alin"amento e seu n correspondente < e5i,ido na .anela Inspetor#H,ser!e tam,
Dimensionamento de componentes
Nota: Consulte o redimensionamento e componentes indentação (swf# screencast para uma demonstração interati!a nas seç*es a,ai5o# R sempre ,en
4ara adicionar$ alin"ar e editar o te5to de e5i,ição de !ários ,ot*es# Na .anela 4aleta$ selecione o componente Botão da categoria Controles Swing# # 9o!a o 2Button acima da margem direita do 27e5t3ield Endereço de Email no 24anel inferior# uando as diretri)es aparecem indicando ue lin"a de ,ase do 2Button ea margem direita estão alin"ados com a do 27e5t3ield$ s"ift'cliue para colocar o primeiro ,otão ao longo da margem direita do 23rame# 8 largura do 27e5t3ield diminui para acomodar o 2Button uando !oc% soltar o ,otão do mouse# /# 9o!er o cursor so,re o canto superior direito do 2Aist no 24anel inferior# uando as diretri)es aparecem indicando ue as margens superior e direita do 2Button estão alin"adas com a do 2Aist$ s"ift'cliue
para colocar o segundo ,otão ao longo da margem direita do 23rame# F# 8dicione dois outros 2Buttons a,ai5o dos dois .á adicionados para criar uma coluna# Certifiue'se a posição do 2Buttons de tal forma ue o espaçamento sugerido < respeitado e consistente# Se !oc% esuecer de soltar a tecla S"ift antes de posicionar o 1ltimo 2Button$ ,asta pressionar a tecla Escape# # Definir o te5to de e5i,ição de cada 2Button# (;oc% pode editar o te5to de um ,otão direito do mouse no ,otão e escol"endo Editar te5to# Hu !oc% pode clicar no ,otão$ pausar e clicar no!amente# Digite Add para o ,otão superior$ Edit para o segundo$ Removepara o terceiro$ e As Default para o uarto# Hs componentes 2Button se encai5am nas posiç*es designadas pelas diretri)es de alin"amento# 8 largura dos ,ot*es muda para acomodar os no!os nomes#
8gora ue os ,ot*es estão posicionados onde os ueremos$ ns !amos definir os uatro ,ot*es para ter o mesmo taman"o e consist%ncia !isual$ ,em como para esclarecer ue elas estão relacionadas funcionalmente#
4ara definir os componentes para o mesmo taman"o# Selecione todos os uatro 2Buttons pressionando a tecla Control enuanto fa) a seleção# # Botão direito do mouse um deles e escol"a 9esmo taman"o 9esma largura a partir do menu pop'up# H 2Buttons estão definidos para o mesmo taman"o ue o ,otão com o nome mais longo# Ental"e
9uitas !e)es < necessário componentes de cluster m1ltiplos com outro componente$ ue < claro ue pertencem a um grupo de funç*es relacionadas# Um caso t+pico$ por e5emplo$ < colocar !árias cai5as de !erificação relacionadas a,ai5o de um rtulo comum# H Construtor de GUI permite o recuo facilmente fornecer orientaç*es especiais sugerindo o deslocamento preferido para ol"ar seu sistema operacional e sentir# Nesta seção$ !amos adicionar alguns 2:adioButtons a,ai5o de um 2Aa,el ue permitirá ue os usuários personali)em a maneira como o aplicati!o e5i,e dados# Consulte as ilustraç*es a,ai5o enuanto fa) isso ou cliue no lin6 ;isuali)ar demonstração seguindo o procedimento para e5i,ir uma demonstração interati!a#
4ara recuar 2:adioButtons a,ai5o de um 2Aa,el# 8dicionar um 2Aa,el Formato de Correio nomeado para o formulário a,ai5o do 2Aist# Certifiue'se o rtulo está alin"ado O esuerda com o 2Aist acima# # Na .anela 4aleta$ selecione o componente Botão de opção na categoria Swing# /# 9o!er o cursor a,ai5o do 2Aa,el ue aca,ou de adicionar# uando as diretri)es aparecem indicando ue a ,orda esuerda do 2:adioButton está alin"ada com a do 2Aa,el$ mo!a o 2:adioButton ligeiramente para a direita at< diretri)es recuo secundárias aparecerem# S"ift'cliue para colocar o primeiro ,otão de opção# F# 9o!er o cursor para a direita do primeiro 2:adioButton# S"ift'cliue para colocar o 2:adioButtons segundo e terceiro$ tendo o cuidado de respeitar o espaçamento sugerido do componente# Certifiue'se de soltar a tecla S"ift antes de posicionar o 1ltimo 2:adioButton# # Definir o te5to de e5i,ição para cada 2:adioButton# (;oc% pode editar o te5to de um ,otão direito do mouse no ,otão e escol"endo Editar te5to# Hu !oc% pode clicar no ,otão$ pausar e clicar no!amente# Digite HTML para o ,otão de rádio O esuerda$ Plain Textpara o segundo$ e Custom para o terceiro# 7r%s 2:adioButtons são adicionados ao formulário e recuado a,ai5o do 2Aa,el Formato de Correio.
8gora precisamos adicionar os tr%s 2:adioButtons a um ButtonGroup para permitir ue o comportamento de alternJncia esperado em ue apenas um ,otão de opção pode ser selecionada por !e)# Este$ por sua !e)$ garantir ue as informaç*es de contato do aplicati!o de contato será e5i,ido no formato de correio da nossa escol"a#
4ara adicionar 2:adioButtons a um ButtonGroup# Na .anela 4aleta$ selecione o componente Grupo de ,ot*es na categoria Controles Swing# # Cliue em ualuer lugar na área de design do Construtor de GUI para adicionar o componente ButtonGroup ao formulário# H,ser!e ue o ButtonGroup não aparece no prprio formulário$ no entanto$ < !is+!el na área do Inspetor outros componentes# /# Selecione todas as tr%s 2:adioButtons no formulário# F# Na .anela 4ropriedades$ escol"a ,uttonGroup na cai5a de com,inação propriedade ,uttonGroup# 7r%s 2:adioButtons são adicionados ao grupo de ,ot*es# topo
3a)endo os a.ustes finais Conseguimos es,oçar nossa GUI do aplicati!o ContactEditor$ mas ainda "á algumas coisas a serem feitas# Nesta seção$ !amos dar uma ol"ada em algumas das tarefas de la&out t+picas ue o Construtor de GUIs simplifica#
8ca,amento Up
8gora precisamos adicionar os ,ot*es ue permitem ue os usuários para confirmar a informação de ue entrar para um contato indi!idual e adicioná'lo O lista de contatos ou cancelar$ dei5ando o ,anco de dados inalterados# Nesta etapa$ !amos adicionar os dois ,ot*es necessários e depois editá'los para ue eles apareçam no mesmo taman"o em nosso formulário$ em,ora seus te5tos de e5i,ição ten"am taman"os diferentes#
4ara adicionar e editar o te5to de e5i,ição de ,ot*es# Se o 24anel inferior se estende at< a ,orda inferior do formulário 23rame$ arraste a ,orda inferior do 23rame para ,ai5o# Isto dá'l"e espaço entre a ,orda do 23rame e da ,orda do 24anel para o seu ,ot*es H@ e Cancelar# # Na .anela 4aleta$ selecione o componente Botão da categoria Controles Swing# /# 9o!er o cursor so,re o formulário a,ai5o do 24anel e'mail# uando as diretri)es aparecem indicando ue a ,orda direita do 2Button está alin"ado com o canto inferior direito do 23rame$ cliue para colocar o ,otão# F# 8dicionar outro 2Button O esuerda do primeiro$ certificando'se de colocá' lo usando o espaçamento sugerido ao longo da ,orda inferior do 23rame# # Definir o te5to de e5i,ição de cada 2Button# OK para entrar o ,otão esuerdo e Cancelar para a direita# H,ser!e ue a largura dos ,ot*es muda para acomodar os no!os nomes# =# Defina os dois 2Buttons para ter o mesmo taman"o$ selecionando am,os$ ,otão direito do mouse ualuer um$ e escol"endo 9esmo taman"o 9esma largura a partir do menu pop'up# Hs componentes JButton aparecem na forma e seus ns correspondentes são e5i,idos na .anela Inspetor# H cdigo dos componentes JButton tam,
Inspecionando Seu GUI 8gora ue !oc% criou com %5ito a GUI ContactEditor$ !oc% pode e5perimentar a interface para !er os resultados# ;oc% pode !isuali)ar sua forma como !oc% tra,al"a$ clicando no ,otão 4re!iew 3orm ( Na ,arra de ferramentas do Construtor de GUIs# H formulário < a,erto em sua prpria .anela$ permitindo ue !oc% teste antes da construção e e5ecução#
topo
Implantando aplicati!os GUI 4ara ue as interfaces criadas com o Construtor de GUI para tra,al"ar fora do IDE$ o aplicati!o de!e ser compilado nas classes do gerenciador de la&out GroupAa&out e tam,
Distri,uindo e e5ecutando aplicaç*es de GUI
4ara preparar a aplicação GUI para distri,uição fora do IDEip pasta dist do pro.eto em um arui!o I4# (8 pasta !oc% tam,
dist tam,
pode conter uma pasta lib, ue
4ara e5ecutar o aplicati!o$ cliue com o nome do pro.eto e selecione E5ecutar no menu de conte5to# Na cai5a de diálogo E5ecutar pro.eto selecione o nome da classe principal (my.contacteditor.ContactEditorUI se falar so,re o pro.eto ue !oc% aca,ou de criar e cliue em H@# Seu aplicati!o < instalado e funcionando# 4ara e5ecutar um aplicati!o GUI a partir da lin"a de comando# Na!egue at< a pasta dist do pro.eto#
# Digite o seguintejava-jar . jar
Nota: Se !oc% encontrar o seguinte erroExceção em java.lang.NoClassDefFoundError thread "main": org / JDesktop / layout / GroupLayout $ Grupo
8ssegurar ue as refer%ncias do arui!o manifest#mf a !ersão atualmente instalada do Balanço Bi,lioteca e5tens*es de la&out# 4ara mais informaç*es so,re a ,i,lioteca de e5tensão la&out$ !isitar o pro.eto de la&out Swing E5tensions # topo Envie-nos seus comentários
;e.a tam,
;oc% aca,ou de completar o tutorial Criando um ,alanço do GUI# 4ara o,ter informaç*es so,re como adicionar funcionalidade ao GUIs ue !oc% crie$ !e.aIntrodução O construção de GUIs
•
9anipulação de imagens em um aplicati!o GUI
•
Construção de um aplicati!o 2a!a Des6top Data,ase
•
Criar um personali)ado 2a!a 8pplication Des6top Data,ase
•
GUI Builder 38
•
2a!a e 2a!a3T GUI 7ril"a de aprendi)ado topo
