Cum să utilizați meniul în Netbeans pentru a proiecta o interfață Swing GUI

Ai vrea să înveți cum să folosești meniurile în NetBeans pentru a proiecta o interfață grafică Swing? Poți adăuga meniuri formularelor tale Java, cum ar fi Fișier, Editare, Vizualizare și așa mai departe. Fiecare meniu are elemente de meniu, iar acestea pot avea, la rândul lor, submeniuri. Aici, îți vom arăta cum să configurezi meniurile în NetBeans. Rămâi cu noi.

Setări de meniu în Netbeans

Pentru a începe, vă arătăm cum să configurați meniul în Netbeans. Să vedem cum:

S-ar putea să vă intereseze și să citiți despre: Eroare detectată în baza de date Windows Update

• pas 1: Revine la vizualizarea Design. În paleta NetBeans, găsiți elementul din bara de meniu:

• pas 2: trageți unul în partea de sus a formularului. Când eliberați butonul mouse-ului, veți avea o bară implicită de meniu File and Edit:

Cu toate acestea, nu există elemente de meniu adăugate implicit. Pentru a-l adăuga pe al tău, trebuie să faci următoarele:

• pas 3- Faceți clic pe elementul de meniu Arhivăpentru a-l selecta. Cu elementul de meniu Fișier selectat, faceți clic dreapta. Va apărea un nou meniu. Selecta Adăugați din paletă > Element de meniu:

• pas 4: Un element de meniu va fi adăugat la meniul Fișier:

Ceea ce veți face este să adăugați elemente de meniu pentru a deschide și a salva un fișier.

• pas 5: Faceți dublu clic pe textul implicit jMenuItem1. Acesta va fi apoi evidențiat, astfel încât să puteți scrie pe el:

• pas 6: Scrie Deschide, apoi apăsați tasta ENTER pe tastatură:

• pas 7: Adăugați un alt element de meniu pe parcurs. De data asta, scrie Salva ca element de meniu:

NOTĂ : După cum puteți vedea mai sus, puteți adăuga comenzi rapide la elementele de meniu.

• pas 8: Faceți clic pe elementul de meniu deschis, apoi pe scurtătura pentru acesta:

NOTĂ : Cu comanda rapidă selectată, vizualizați fereastra de proprietăți:

• pas 9: Căutați elementul regulator și faceți clic pe butonul mic din dreapta rândului. Apare o casetă de dialog:

Puteți seta tastele rapide pe care le doriți pentru un element de meniu din această casetă de dialog. O comandă rapidă deschisă este de obicei CTRL + O. Tastați un O în casetă și va apărea Shift + O.

• pas 10: Debifați elementul Schimba și marca Ctrl în su loc:

• pas 11: Faceți clic accepta iar comanda rapidă va fi adăugată la elementul de meniu Java:

integrare

Pentru a vedea dacă toate acestea funcționează, faceți clic din nou pe elementul de meniu Deschidere pentru a-l evidenția.

• pas 1: Acum faceți clic dreapta. În meniul care apare, selectați Evenimente > Acțiune > Acțiune întreprinsă. Aceasta va crea un stub pentru elementul de meniu. Introduceți următoarele pentru cod:

javax.swing.JOptionPane.showMessageDialog(FormObjects.this, „Open”);

Aceasta este doar o casetă de mesaje.

• pas 2: Rulați programul și testați-l. Clic File> Openși ar trebui să vedeți că apare caseta de mesaj.
• pas 3: Faceți clic accepta pentru a scăpa de ea. Acum încercați comanda rapidă.
• pas 4: Țineți apăsată tasta Ctrl pe tastatura ta. Țineți-l apăsat și apăsați litera O. Din nou, ar trebui să apară meniul.

Opriți programul și reveniți la stub. Comentează caseta de mesaj. Ceea ce veți face este să scrieți cod pentru a afișa o casetă de dialog. Un utilizator poate selecta apoi un fișier de deschis. O vom face în partea următoare.

Proiectarea unei GUI Swing cu meniul din Netbeans

Această secțiune oferă un ghid prin procesul de creare a interfeței grafice cu utilizatorul (GUI) pentru o aplicație numită ContactEditor folosind NetBeans IDE GUI Builder.

În acest proces, veți proiecta o interfață grafică cu utilizatorul care vă va permite să vizualizați și să editați informațiile de contact ale persoanelor incluse într-o bază de date a angajaților. Veți învăța, de asemenea, cum să:

• Utilizați interfața GUI builder
• Creați un container GUI, adăugați
• Redimensionați și aliniați componentele
• Reglați ancorarea componentelor
• Setați comportamentul de redimensionare automată a componentelor
• Editați proprietățile componente

Toate acestea le poți face prin meniul din Netbeans

Începeți cu designul de meniu în Netbeans

GUI Builder al IDE vă permite să creați GUI-uri cu aspect profesional, bazate pe meniu în Netbeans, fără cunoștințe aprofundate despre administratorii de design. Vă puteți proiecta formularele pur și simplu plasând componentele oriunde doriți.

Crearea unui proiect prin meniul din Netbeans

Deoarece toată dezvoltarea Java în IDE are loc în cadrul proiectelor, trebuie mai întâi să creăm un nou proiect ContactEditor în care să stocăm codul sursă și alte fișiere ale proiectului.

Un proiect IDE este un grup de fișiere sursă Java plus metadate asociate, inclusiv fișiere de proprietăți specifice proiectului, un script de compilare Ant care controlează setările de compilare și rulare și un fișier projectxml care mapează țintele Ant la comenzile IDE .

În timp ce aplicațiile Java constau adesea din mai multe proiecte IDE, în scopul acestui tutorial, vom crea o aplicație simplă care este stocată în întregime într-un singur proiect prin meniul din Netbeans.

Pentru a crea un nou proiect de aplicație ContactEditor:

• pas 1: Alege Fișier > Proiect nou. Alternativ, puteți face clic pe pictogramă Proiect nou în bara de instrumente IDE.
• pas 2: Pe panou Categorii, selectați nodul Java și în panoul Proiecte, Alegeți aplicația Java. Clic următor.
• pas 3: Introduce Contact Editor în câmpul Nume proiect și specificați locația proiectului.
• pas 4: Lăsați caseta de selectare nebifată Utilizați folderul dedicat pentru a stoca biblioteci.
• pas 5: Asigurați-vă că caseta de selectare Setați ca proiect principal este selectat și dezactivează câmpul Creați clasa principală.
• pas 6: Faceți clic Termina.

IDE-ul creează folderul ContactEditor pe sistemul dvs. în locația desemnată. Acest folder conține toate fișierele asociate proiectului, inclusiv scriptul Ant, foldere pentru stocarea fișierelor sursă și de testare și un folder pentru metadatele specifice proiectului. Pentru a vizualiza structura proiectului, utilizați fereastra Fișiere a IDE-ului.

Creați un container JFrame prin meniul din Netbeans

După crearea noii aplicații, este posibil să fi observat că folderul Pachete sursă din fereastra Proiecte conține un nod gol numit <pachet implicit>.

Pentru a continua construirea interfeței noastre, trebuie să creăm un container Java în care vom plasa celelalte componente GUI necesare.

În acest pas vom crea un container folosind componenta JFrame și vom plasa containerul într-un pachet nou.

Pentru a adăuga un container JFrame prin meniu în Netbeans, trebuie să faceți următoarele:

• pas 1: La fereastră Proiecte, faceți clic dreapta pe Contact Editor nod și alegeți Nou > Formular JFrame. Alternativ, puteți găsi un formular JFrame alegere Nou > Altele > Swing GUI Forms > JFrame Form.
• pas 2: Introduce ContactEditorUIca numele clasei.
• pas 3: Introduce al meu . contacteditorca pachetul.
• pas 4: Faceți clic Termina.

IDE-ul creează formularul ContactEditorUI și clasa ContactEditorUI în cadrul aplicației ContactEditorUI.java și deschide formularul ContactEditorUI în GUI Builder . Rețineți că pachetul my.contacteditor înlocuiește pachetul implicit.

Familiarizați-vă cu GUI Builder și cu meniul din Netbeans

Acum că am configurat un nou proiect prin meniul din Netbeans pentru aplicația noastră, să ne luăm un minut pentru a ne familiariza cu interfața GUI Builder.

Când am adăugat containerul JFrame , IDE-ul a deschis formularul ContactEditorUI nou creat într-o filă Editor cu o bară de instrumente care conține mai multe butoane, așa cum se arată în ilustrația de mai sus.

Formularul ContactEditor s-a deschis în vizualizarea Design a GUI Builder , iar trei ferestre suplimentare au apărut automat de-a lungul marginilor IDE, permițându-vă să navigați, să organizați și să editați formularele GUI pe măsură ce le creați.

Diferitele ferestre GUI Builder din meniul din Netbeans includ:

Să ne uităm la diferitele ferestre GUI Builder din meniul din Netbeans includ:

Zona de proiectare:

Fereastra principală GUI Builder pentru crearea și editarea formularelor GUI Java. Butonul Source din bara de instrumente vă permite să vizualizați codul sursă al unei clase, butonul Layout vă permite să vizualizați o vizualizare grafică a componentelor GUI, iar butonul History vă permite să accesați istoricul local al modificărilor aduse fișierului.

Butoanele suplimentare de pe bara de instrumente oferă acces facil la comenzi comune, cum ar fi alegerea între modurile de selecție și conectare , alinierea componentelor , configurarea comportamentului de redimensionare automată a componentelor și previzualizarea formularelor.

Browser

Oferă o reprezentare a tuturor componentelor, atât vizuale, cât și non-vizuale, în aplicația dvs. ca o ierarhie arborescentă. Browserul oferă, de asemenea, informații vizuale despre ce componentă arborescentă este editată în prezent în GUI Builder și vă permite să organizați componentele în panourile disponibile.

Paletă.

O listă personalizabilă de componente disponibile care conține file pentru componentele JFC/Swing, AWT și JavaBeans, precum și manageri de layout. În plus, puteți crea, șterge și rearanja categoriile afișate în paletă folosind personalizarea.

Fereastra de proprietăți

Afișează proprietățile componentei selectate curent în GUI Builder, fereastra Navigator, fereastra Proiecte sau fereastra Fișiere.

Dacă faceți clic pe butonul Sursă , IDE afișează codul sursă Java al aplicației în Editor , cu secțiuni de cod generate automat de GUI Builder indicate de zone gri (care devin albastre când sunt selectate), numite Blocuri protejate.

Blocurile protejate sunt zone protejate care nu pot fi editate în vizualizarea Sursă . Puteți edita codul care apare în zonele albe ale Editorului doar atunci când vă aflați în vizualizarea Sursă.

Dacă trebuie să faceți modificări la codul dintr-un bloc protejat, dacă faceți clic pe butonul Design, editorul IDE revine la GUI Builder, unde puteți face ajustările necesare formularului. Când salvați modificările, IDE actualizează codul sursă al fișierului.

Pentru dezvoltatorii avansați, este disponibil Palette Manager , care vă permite să adăugați componente personalizate din fișiere JAR, biblioteci sau alte proiecte în paletă. Pentru a adăuga componente personalizate prin intermediul Palette Manager , selectați Instrumente > Paletă > Componente Swing/AWT.

Primele lucruri pe primul loc în meniul în Netbeans

Acum că v-ați familiarizat cu interfața GUI builder, este timpul să începeți dezvoltarea interfeței cu utilizatorul pentru aplicația noastră ContactEditor.

În această secțiune, vom analiza cum să folosim paleta IDE-ului pentru a adăuga diferitele componente GUI de care avem nevoie în formularul nostru.

Datorită paradigmei de layout gratuit a IDE, nu va mai trebui să luptați cu administratorii de layout pentru a controla dimensiunea și poziția componentelor în containerele lor.

Tot ce trebuie să faceți este să glisați și să plasați componentele de care aveți nevoie în formularul dvs. GUI, așa cum se arată în ilustrațiile de mai jos.

Adăugarea de componente: elemente de bază

Deși GUI Builder al IDE-ului simplifică procesul de creare a GUI-urilor Java, este adesea util să schițați modul în care doriți să arate interfața înainte de a începe să o proiectați.

Acum să ne uităm la ilustrații și să observăm comportamentul de „glisare și fixare” al IDE-ului atunci când realizam acest lucru.

Pentru a adăuga un JPanel din meniul din Netbeans:

1. În fereastra Paletă, selectați componenta Panel din categoria Swing Containers făcând clic și eliberând butonul mouse-ului.
2. Mută ​​cursorul în colțul din stânga sus al formularului în GUI Builder. Când componenta este poziționată lângă marginile de sus și din stânga ale containerului, apar linii directoare de aliniere orizontală și verticală indicând marginile preferate. Faceți clic pe formular pentru a plasa JPanel-ul în această locație.

Componenta JPanel apare în formularul ContactEditorUI evidențiat cu portocaliu, indicând faptul că este selectată. După eliberarea butonului mouse-ului, apar mici indicatori care arată relațiile de ancorare ale componentei, iar un nod JPanel corespunzător este afișat în fereastra Navigator, așa cum se arată în ilustrația următoare.

În continuare, trebuie să redimensionăm JPanelul pentru a face loc componentelor pe care le vom plasa în interiorul acestuia puțin mai târziu, dar să luăm un minut pentru a sublinia mai întâi o altă caracteristică de afișare a GUI Builder.

Pentru a face acest lucru, trebuie să deselectăm JPanel-ul pe care tocmai l-am adăugat. Deoarece nu am adăugat încă un chenar de titlu, panoul dispare.

Cu toate acestea, observați că atunci când treceți cu mouse-ul peste JPanel, marginile acestuia se schimbă în gri deschis, astfel încât poziția sa poate fi văzută clar. Trebuie doar să faceți clic oriunde în interiorul componentei pentru a o reselege și a face să reapară mânerele de redimensionare și indicatorii de ancorare.

Pentru a modifica dimensiunea JPanelului în meniul din Netbeans:

• pas 1: Selectați JPanelul pe care tocmai l-ați adăugat. Driverele mici de dimensiuni pătrate reapar în jurul perimetrului componentei.
• pas 2: faceți clic și mențineți apăsat mânerul de redimensionare de pe marginea dreaptă a JPanelului și trageți până când linia de aliniere întreruptă apare lângă marginea formularului.
• pas 3: Eliberați mânerul de redimensionare pentru a redimensiona componenta.

Componenta JPanel se întinde între marginile din stânga și din dreapta ale containerului, conform offsetului recomandat, așa cum se arată în ilustrația următoare.

Repetând procesul

Acum că am adăugat un panou pentru a păstra informațiile despre numele UI, trebuie să repetăm ​​procesul pentru a adăuga altul direct sub primul pentru informațiile de e-mail.

Referindu-vă la ilustrațiile următoare, repetați cele două sarcini anterioare, acordând atenție poziționării sugerate de GUI Builder.

Observați că spațierea verticală sugerată între cele două JPanel-uri este mult mai îngustă decât spațierea marginii. După ce ați adăugat al doilea JPanel, redimensionați-l pentru a umple spațiul vertical rămas din formular.

Deoarece dorim să distingem vizual funcțiile din secțiunile de sus și de jos ale interfeței grafice noastre, trebuie să adăugăm un chenar și un titlu fiecărui JPanel.

Vom realiza mai întâi acest lucru folosind fereastra Proprietăți și apoi vom încerca folosind meniul pop-up.

Pentru a adăuga margini de titlu la JPanels în meniul din Netbeans:

• pas 1: Selectați JPanelul de sus în GUI Builder.
• pas 2: La fereastră Proprietăţi, faceți clic pe butonul puncte de suspensie (...) de lângă Proprietate de frontieră.
• pas 3: În redactor Borduri JPanel care apare, selectați nodul IntitulatBorder în panou Borduri disponibile.
• pas 4: În panoul Proprietăți de mai jos, introduceți numele pentru proprietatea Titlu.
• pas 5: Faceți clic pe punctele de suspensie (…) de lângă proprietatea Font, selectați Negrita pentru stil font și introduceți 12 pentru dimensiune. Clic accepta pentru a ieși din casetele de dialog.
• pas 6: Selectați JPanelul de jos și repetați pașii de la 2 la 5, dar de data aceasta faceți clic dreapta pe JPanel și accesați fereastra Proprietăți folosind meniul pop-up. Introdu e-mail pentru proprietate Titlu.

Chenarele cu titlu sunt adăugate ambelor componente JPanel.

Adăugați componente individuale în formular

Acum trebuie să începem să adăugăm componentele care vor prezenta informațiile de contact reale în lista noastră de contacte. În această sarcină vom adăuga patru JTextFields care vor afișa informațiile de contact și JLabels care le vor descrie.

În timp ce realizați acest lucru, uitați-vă la liniile directoare orizontale și verticale afișate de GUI Builder, care sugerează distanța dintre componente preferată, așa cum este definită de aspectul și senzația sistemului dvs. de operare.

Acest lucru asigură că GUI-ul dvs. este redat automat respectând aspectul sistemului de operare țintă în timpul execuției.

Pentru a adăuga o JLabel la formular din meniul din Netbeans:

• pas 1: În fereastra Paletă, selectați componenta Label din categoria Swing Controls.
• pas 2: Mutați cursorul peste numele JPanel pe care l-am adăugat mai devreme. Când apar liniile directoare care indică faptul că JLabel este poziționat în colțul din stânga sus al JPanelului cu o marjă mică pe marginile de sus și din stânga, faceți clic pentru a plasa eticheta.

JLabel este adăugat la formular, iar un nod corespunzător care reprezintă componenta este adăugat în fereastra Inspector.

Înainte de a continua, trebuie să edităm textul afișat al JLabel-ului pe care tocmai l-am adăugat. Deși puteți edita oricând textul de afișare al componentelor, cel mai simplu mod este să faceți acest lucru pe măsură ce le adăugați.

Pentru a edita textul afișat al unui JLabel:

• pas 1: Faceți dublu clic pe JLabel pentru a selecta textul afișat.
• pas 2: Scrie Prenume: și apăsați Enter.

Noul nume JLabel este afișat și lățimea componentei este ajustată ca rezultat al editării. Acum vom adăuga un JTextField, astfel încât să putem arunca o privire la caracteristica de aliniere a liniei de bază a GUI Builder.

Pentru a adăuga un JTextField la formular:

• pas 1: În fereastra Paletă, selectați componenta Text Field din categoria Swing Controls.
• pas 2: Mută ​​cursorul imediat la dreapta numelui:JLabel pe care tocmai l-am adăugat. Când apare ghidajul orizontal care indică faptul că linia de bază a JTextField este aliniată cu cea a JLabel și spațiul dintre cele două componente este sugerat cu un ghid vertical, faceți clic pentru a plasa JTextField.

JTextField se fixează în poziție pe formular aliniat cu linia de bază JLabel, așa cum se arată în ilustrația următoare. Observați că JLabel s-a deplasat ușor în jos pentru a se alinia cu linia de bază a celui mai înalt câmp de text. Ca de obicei, în fereastra Navigator este adăugat un nod reprezentând componenta.

Înainte de a continua, trebuie să adăugăm un JLabel suplimentar și un JTextField imediat în dreapta celor pe care tocmai le-am adăugat, așa cum se arată în ilustrația următoare. De data aceasta introduceți Nume: ca text de afișare JLabel și lăsați textul substituent JTextFields așa cum este pentru moment.

Pentru a redimensiona un JTextField din meniul din Netbeans:

• pas 1: Selectați JTextField pe care tocmai l-am adăugat în dreapta numelui:
• pas 2: Trageți mânerul de redimensionare de la marginea dreaptă a câmpului JTextField la marginea dreaptă a JPanel-ului atașat.
• pas 3: Când apar liniile directoare de aliniere verticală, sugerând marginea dintre câmpul de text și marginea dreaptă a JPanelului, eliberați butonul mouse-ului pentru a redimensiona JTextField.

Marginea din dreapta a JTextField se aliniază cu marginea de margine recomandată de JPanel, așa cum se arată în ilustrația următoare.

Adăugați mai multe componente pentru a forma din meniu în Netbeans

Acum vom adăuga JLabel-urile Title: și Nickname: care descriu două JTextField-uri pe care le vom adăuga imediat. Vom trage și plasa componentele în timp ce ținem apăsată tasta Shift pentru a le adăuga rapid în formular.

Pe măsură ce realizați acest lucru, observați din nou că GUI Builder afișează linii directoare orizontale și verticale care sugerează distanțarea preferată a componentelor.

Pentru a adăuga mai multe JLabels la formular:

• pas 1: La fereastră paletă, selectați componenta etichetă din categorie Controale de oscilație făcând clic și eliberând butonul mouse-ului.
• pas 2: Mută ​​cursorul peste formularul de mai jos Prenume:JLabel pe care l-am adăugat mai devreme. Când liniile directoare apar că marginea stângă a noului JLabel este aliniată cu marginea stângă a vechiului JLabel și există o mică marjă între ele, apăsați shift și faceți clic pentru a plasa prima JLabel.
• pas 3: În timp ce apăsați în continuare tasta Tasta Shift, plasează un alt JLabel imediat în dreapta primei. Asigurați-vă că eliberați tasta Shift înainte de a plasa a doua JLabel. Dacă uitați să eliberați tasta Shift înainte de a plasa ultima JLabel, apăsați pur și simplu tasta Evadare.

JLabels sunt adăugate la formular prin crearea unui al doilea rând, așa cum se arată în ilustrația următoare. Nodurile care reprezintă fiecare componentă sunt adăugate în fereastra browserului.

Înainte de a continua, trebuie să edităm numele JLabels, astfel încât să putem vedea efectul aliniamentelor pe care le vom seta mai târziu.

Pentru a edita textul de afișare a JLabels din meniul din Netbeans:

• pas 1: Faceți dublu clic pe prima JLabel pentru a selecta textul afișat.
• pas 2: Scrie Titlu: și apăsați Enter.
• pas 3: Repetați pașii 1 și 2, introducând nickname: pentru proprietatea al doilea nume a JLabel.

Noile nume JLabel sunt afișate pe formular și derulează ca urmare a lățimii lor editate, așa cum se arată în ilustrația următoare.

Inserați componente din meniu în Netbeans

Este adesea necesar să adăugați o componentă între componentele care sunt deja plasate pe un formular. Ori de câte ori adăugați o componentă între două componente existente, GUI Builder le modifică automat pentru a face loc noii componente.

Pentru a demonstra acest lucru, vom insera un JTextField între JLabel-urile adăugate mai devreme, așa cum se arată în următoarele două ilustrații.

Pentru a insera un JTextField între două JLabels:

• pas 1: La fereastră paletă, selectați componenta Câmp text din categorie Controale de oscilație.
• pas 2: Mutați cursorul peste Titlu:y nickname: JLabels în al doilea rând, astfel încât JTextField să se suprapună pe ambele și să fie aliniat cu liniile lor de bază. Dacă întâmpinați probleme la plasarea noului câmp de text, îl puteți fixa pe linia de ghidare din stânga a Poreclă JLabel așa cum se arată în prima imagine de mai jos.
• pas 3: Faceți clic pentru a plasa JTextField între Titlu:y nickname:

JTextField se fixează în poziție între cele două JLabels. JLabel-ul din dreapta este deplasat la dreapta JTextField pentru a se potrivi defilării orizontale sugerate.

Încă trebuie să adăugăm un JTextField suplimentar la formular care va afișa porecla fiecărui contact în partea dreaptă a formularului.

Pentru a adăuga un JTextField din meniul din Netbeans:

• pas 1: La fereastră paletă, selectați componenta Câmp text din categoria Swing.
• pas 2: Mută ​​cursorul la dreapta Poreclăetichetați și faceți clic pentru a plasa câmpul de text.

JTextField se fixează în poziție lângă JLabel din stânga sa.

Pentru a redimensiona un JTextField din meniul din Netbeans:

• pas 1: Trageți mânerele de redimensionare nickname:din câmpul JTextField al etichetei pe care ați adăugat-o în sarcina anterioară în dreapta JPanel-ului atașat.
• pas 2: Când apar liniile directoare de aliniere verticală sugerând marginea dintre câmpul de text și marginile JPanel, eliberați butonul mouse-ului pentru a redimensiona câmpul JText.

Marginea din dreapta a JTextField este aliniată cu marginea recomandată de JPanel, iar GUI Builder deduce comportamentul adecvat de redimensionare.

• pas 3: Apăsați Ctrl-S pentru a salva fișierul.

Meniul din Netbeans merge mai departe

Alinierea este unul dintre cele mai fundamentale aspecte ale creării de interfețe grafice cu aspect profesional. În secțiunea anterioară, am obținut o privire asupra caracteristicilor de aliniere ale IDE prin adăugarea componentelor JLabel și JTextField la formularul nostru ContactEditorUI.

În continuare, vom arunca o privire mai profundă asupra caracteristicilor de aliniere ale GUI Builder pe măsură ce lucrăm cu celelalte componente de care avem nevoie pentru aplicația noastră.

Alinierea componentelor

Ori de câte ori adăugați o componentă într-un formular, GUI Builder le aliniază în mod eficient, așa cum demonstrează ghidurile de aliniere care apar. Cu toate acestea, uneori este și necesar să se specifice relații diferite între grupuri de componente.

Anterior, am adăugat patru JLabels de care avem nevoie pentru GUI ContactEditor, dar nu le-am aliniat. Acum vom alinia cele două coloane de JLabels astfel încât marginile din dreapta să se alinieze.

Pentru a alinia componentele din meniul din Netbeans:

• pas 1: Apăsați și mențineți apăsată tasta Ctrl și faceți clic pentru a selecta Prenume: y Titlu: JEtichete în partea stângă a formularului.
• pas 2: Faceți clic pe buton Pentru a alinia în dreapta pe bara de instrumente. Alternativ, puteți face clic dreapta pe oricare dintre ele și puteți alege Aliniați > Dreapta în coloana din meniul pop-up.
• pas 3: Repetați acest lucru și pentru Nume : Da nickname:

Pozițiile JLabels se modifică astfel încât marginile din dreapta ale textului lor afișat să fie aliniate. Relațiile de ancorare sunt actualizate, indicând faptul că componentele au fost grupate.

Înainte de a termina cu JTextFields pe care le-am adăugat mai devreme, trebuie să ne asigurăm că cele două JTextFields pe care le-am introdus între JLabels sunt setate să redimensioneze corect.

Spre deosebire de cele două JTextFields pe care le întindem la marginea dreaptă a formularului nostru, comportamentul redimensionabil al componentelor inserate nu este setat automat.

Pentru a seta un comportament redimensionabil pentru componente:

• pas 1: Țineți apăsată tasta Mod de control: și faceți clic pe cele două componente JTextField introduse pentru a le selecta în GUI Builder.
• pas 2: Cu ambele JTextFields selectate, faceți clic dreapta pe oricare dintre ele și alegeți Redimensionare automată > Orizontală din meniul pop-up.

JTextFields sunt configurate să redimensioneze orizontal în timpul rulării. Orientările de aliniere și indicatorii de ancorare sunt actualizate, oferind feedback vizual al relațiilor dintre componente.

Pentru a configura componente de aceeași dimensiune:

• pas 1: Țineți apăsată tasta Mod de control: și faceți clic pe cele patru JTextFields din formular pentru a le selecta.
• pas 2: Cu JTextFields selectat, faceți clic dreapta pe oricare dintre ele și alegeți stabili el mismo dimensiune > Aceeași lățime din meniul pop-up.

JTextFields sunt toate setate la aceeași lățime și indicatorii sunt adăugați la marginea superioară a fiecăruia, oferind feedback vizual al relațiilor dintre componente.

Acum trebuie să adăugăm un alt JLabel care va scrie JComboBox care va permite utilizatorilor să selecteze formatul informațiilor pe care le va afișa aplicația noastră ContactEditor.

Pentru a alinia un JLabel la un grup de componente din meniul din Netbeans:

• pas 1: La fereastră paletă, selectați componenta etichetă din categorie
• pas 2: Mutați cursorul mai jos Prenume y Titlu JLabels din partea stângă a JPanelului. Când apare ghidul care indică faptul că marginea dreaptă a noului JLabel este aliniată cu marginile din dreapta ale grupului de componente de mai sus (cele două JLabel), faceți clic pentru a plasa componenta.

JLabel se fixează într-o poziție aliniată la dreapta cu coloana JLabels în partea de sus, așa cum se arată în ilustrația următoare. GUI Builder actualizează liniile de stare de aliniere care indică distanța și relațiile de ancorare ale componentei.

Ca și în exemplele anterioare, faceți dublu clic pe JLabel pentru a selecta textul său afișat și apoi Introduceți formatul de afișare: numele afișat. Observați că atunci când JLabel se fixează în poziție, celelalte componente se schimbă pentru a găzdui textul de afișare mai lung.

Alinierea liniei de bază din meniul din Netbeans

Ori de câte ori adăugați sau mutați componente care includ text (JLabels, JTextFields etc.), IDE-ul sugerează aliniamente care se bazează pe liniile de bază ale textului din componente. Când am inserat JTextField mai devreme, de exemplu, linia de bază a fost aliniată automat cu JLabels adiacente.

Acum vom adăuga caseta combinată care va permite utilizatorilor să selecteze formatul informațiilor pe care le va afișa aplicația noastră ContactEditor.

Pe măsură ce adăugăm JComboBox, îi vom alinia linia de bază cu cea a textului JLabel. Priviți din nou liniile directoare de aliniere a liniei de bază care par să ne ajute cu poziționarea.

Pentru a alinia liniile de bază ale componentelor din meniul din Netbeans:

• pas 1: La fereastră paletă, selectați componenta masă categorie combinată Controale de oscilație.
• pas 2: Mută ​​cursorul imediat la dreapta JLabel-ului pe care tocmai l-am adăugat. Când apare ghidajul orizontal care indică faptul că linia de bază a JComboBox este aliniată cu linia de bază a textului din JLabel și spațiul dintre cele două componente este sugerat cu o linie de ghidare verticală, faceți clic pentru a plasa caseta combinată.

Componenta se fixează într-o poziție aliniată cu linia de bază a textului din JLabel din stânga sa, așa cum se arată în ilustrația următoare. GUI Builder afișează linii de stare care indică distanța dintre componente și relațiile de ancorare.

Pentru a redimensiona JComboBox din meniul din Netbeans:

• pas 1: Selectați ComboBox din GUI Builder.
• pas 2: Trageți mânerul de redimensionare de pe marginea dreaptă a JComboBox la dreapta până când apar liniile directoare de aliniere care sugerează decalajul preferat între marginile JComboBox și JPanel.

După cum se arată în ilustrația următoare, marginea din dreapta a JComboBox se aliniază cu marginea recomandată de JPanel, iar lățimea componentei este setată automat pentru a se redimensiona cu formularul.

• pas 3: Presa Ctrl-S pentru a salva fișierul.

Editarea modelelor de componente depășește scopul acestui tutorial, așa că deocamdată vom lăsa lista de elemente substituenți JComboBox așa cum este.

Aici puteți citi despre: Cum se creează o bază de date de inventar în Access

Revizuirea a ceea ce am învățat

Am avut un început bun construind interfața grafică ContactEditor , dar haideți să recapitulăm ce am învățat pe măsură ce adăugăm câteva dintre componentele de care are nevoie interfața noastră.

Până acum, ne-am concentrat pe adăugarea de componente la interfața grafică ContactEditor folosind instrucțiunile de aliniere ale IDE-ului pentru a ne ajuta cu poziționarea.

Cu toate acestea, este important să înțelegeți că o altă parte integrantă a plasării componentelor este ancorarea. Deși nu am vorbit încă despre asta, ați profitat deja de această funcție fără să vă dați seama.

După cum s-a menționat mai sus, ori de câte ori adăugați o componentă la un formular, IDE-ul sugerează poziționarea preferată a aspectului și simțului țintă cu linii directoare.

Odată amplasate, noile componente sunt, de asemenea, ancorate la cea mai apropiată margine a containerului sau componentă pentru a se asigura că relațiile dintre componente sunt menținute în timpul execuției. În această secțiune, ne vom concentra pe realizarea lucrurilor într-un mod mai agil, subliniind în același timp munca pe care o face constructorul GUI în culise.