Meniul
AcasăConexiune

Interfețe grafice și instrumente pentru dezvoltarea lor. Sisteme de ecrane grafice. Constrângere. Această clasă este o extensie suplimentară a clasei de bază. Instanțele sale au capacități suplimentare pentru a controla dimensiunea și locația lor

Adnotare: Studiem widget-urile - elementele vizuale care alcătuiesc interfața grafică cu utilizatorul, aspectul acestora, politica de dimensiune, conexiunile semnal-slot, elementele interfeței grafice și utilizarea lor.

13.1 Widgeturi

Widgeturile sunt elementele vizuale care alcătuiesc interfața grafică cu utilizatorul.

Exemple de widget-uri:

  • Buton (clasa QPushButton);
  • Etichetă (clasa QLabel);
  • Câmp de intrare (clasa QLineEdit);
  • Câmp contor numeric (clasa QSpinBox);
  • Bara de defilare (clasa QScrollBar).

Qt are aproximativ 50 de clase gata făcute de elemente grafice disponibile pentru utilizare. Clasa părinte pentru toate widget-urile este clasa QWidget. Toate proprietățile principale ale elementelor vizuale sunt moștenite de la acesta, pe care le vom analiza cu atenție. Să începem să explorăm modalități de a dezvolta programe cu o interfață grafică cu un exemplu.

Să creăm un fișier proiect gol. Să lansăm expertul de proiect și să selectăm elementul din secțiunea Proiecte Alt Proiect. Apoi, selectați tipul de proiect Proiect Qt gol. Să adăugăm conținutul fișierului de proiect:

Șablon = aplicație #Qt module pe care le vom folosi QT += widget-uri #Adăugați modulul widget-uri pentru a lucra cu widget-uri (necesar pentru Qt5). TARGET = widget#Numele fișierului executabil SOURCES += \ main.cpp

Acum să creăm un program simplu cu o fereastră în care vom afișa inscripția. Să setăm dimensiunea ferestrei și textul titlului acesteia și, de asemenea, să setăm fontul pentru inscripție. Pentru a face acest lucru, creați un fișier main.cpp cu următorul conținut:

#include #include int main (int lArgc, char * lArgv ) ( //Creează un obiect QApplication care inițializează și configurează programul fereastră, //controlează execuția acestuia folosind bucla de evenimente QApplication lApplication (lArgc, lArgv); QLabel lLabel; //Creează un QLabel widget - eticheta lLabel.setText ("Eu sunt widget!"); //Setați textul pentru eticheta lLabel.setGeometry (200, 200, 300, 150); //Setați dimensiunile - poziție (x, y), lățime și înălțimea. Setați textul de aliniere lLabel.setAlignment (Qt::AlignHCenter | Qt::AlignVCenter); //Clasa QFont este folosită pentru a seta parametrii fontului. //Selectați familia de fonturi Arial Black și dimensiunea 12. QFont lBlackFont (" Arial Black", 12); lLabel. setFont (lBlackFont); //Setați fontul pentru eticheta lLabel.show (); //Apelați metoda show() pentru a afișa eticheta pe ecran. return lApplication.exec () ; //Rulează programul pentru a executa exec() execută //o procesare a evenimentelor în buclă. Programul așteaptă acțiunile utilizatorului și le procesează.)

După cum putem observa, elementele care alcătuiesc interfețele în Qt au propria lor poziție și dimensiune – așa-numita „geometrie” – și astfel ocupă o zonă dreptunghiulară corespunzătoare pe ecran (vezi Fig. 13.1). De asemenea, fiecare element are setări care îi determină comportamentul și aspectul.


Orez. 13.1.

Pentru a crea o structură, widget-urile sunt organizate într-o ierarhie conform principiului „parte - întreg”. Fiecare widget poate conține alte widget-uri. Acest element vizual devine „părinte” (widget părinte) al elementelor pe care le conține. Rețineți că astfel de relații nu trebuie confundate cu moștenirea în C++ - relații între clase dintr-un program. Relațiile dintre widget-uri sunt relații între obiecte. Astfel de relații dau naștere la mai multe consecințe:

  • elementul părinte va fi responsabil pentru ștergerea elementului copil: dacă widgetul părinte este șters, acesta va șterge automat toate elementele copil;
  • widget-ul părinte plasează widget-uri copil în interiorul său, părți ale widget-urilor copil care se extind dincolo de părinte vor fi invizibile;
  • o parte din starea widget-ului părinte este transmisă copiilor săi - acest lucru se aplică unor proprietăți (vizibilitate, activitate) și stiluri care sunt aplicate elementului vizual.

Widgeturile care nu au un părinte (widgeturi de nivel superior) apar ca ferestre separate în program. Să ne uităm la un exemplu. Să numim noul proiect ParentExample. Fișierul de proiect va conține setările obișnuite pentru un proiect GUI:

ȘABLON = aplicație ȚINTĂ = ParentExample QT += widget-uri

Pentru widget-ul pe care îl vom folosi ca fereastră principală, vom crea o nouă clasă. Pentru asta in categoria Fișiere și clase Să selectăm secțiunea C++ și să selectăm Clasa C++ (vezi Fig. 13.2).

Următorul pas este să creați mai multe elemente pe fereastră. Pentru a face acest lucru, deschideți fișierul parentwidget.cpp și modificați codul constructorului clasei. Pentru a afișa elemente, trebuie doar să le creați în constructorul de clasă și să setați ParentWidget ca părinte pentru ele. Codul parentwidget.cpp arată astfel:

#include " parentwidget.h " #include #include #include ParentWidget::ParentWidget (QWidget * părinte) : QWidget (părinte) ( //Creează o etichetă care indică widget-ul părinte - aceasta, adică o instanță a clasei ParentWidget. QLabel * lLabel=nou QLabel (aceasta); //Posiție relativ la colțul din stânga sus al widget-ului părinte. lLabel ->setGeometry (50, 0, 100, 30); lLabel ->setText ("TextLabel "); //Text pe etichetă. //Creați un buton, setați „părinte”, geometrie și text QPushButton * lPushButton = QPushButton nou (acesta); lPushButton->setGeometry (50, 50, 100, 30); lPushButton->setText (" PushButton "); //Creează un câmp de intrare, setează „părinte”, geometrie și text QLineEdit * lLineEdit = QLineEdit nou (acesta); lLineEdit ->setGeometry (50, 100, 100, 30); lLineEdit ->setText ("LineEdit "); lLineEdit ->selectAll (); // Selectați textul din câmpul de introducere (doar de exemplu) // Schimbați în cele din urmă dimensiunea widget-ului părinte setGeometry (x (), y (), 300, 150); // și setați textul titlului ferestrei setWindowTitle (" parent widgetExample " );)

Deoarece elementul părinte este ParentWidget , eticheta (QLabel), butonul (QPushButton) și câmpul de text (QLineEdit) se află în el. Poziția widget-urilor copilului este setată în raport cu colțul din stânga sus al tatălui. Puteți verifica cu ușurință acest lucru schimbând dimensiunea și poziția ferestrei programului nostru. Observați cum am creat elementele UI pe heap folosind noul operator. Acest lucru asigură că elementele nu sunt eliminate după finalizarea constructorului ParentWidget.

Crearea unei interfețe grafice cu utilizatorul, care implică aranjarea elementelor grafice și alegerea structurii generale și a fluxului de aplicații, forțează programatorul să devină un fel de artist. Nu există reguli standard care să ajute la crearea prezentărilor, aranjarea elementelor și organizarea structurii. O interfață grafică de succes este considerată o operă de artă. Deoarece crearea de interfețe este mai degrabă o artă decât o știință, nu există reguli stricte de urmat în acest domeniu. Prea mulți parametri sunt determinați de natura aplicației, utilizatori și context.

Cu toate acestea, există o serie de îndrumări practice pe care dezvoltatorii ar trebui să le urmeze pentru a ușura proiectarea interfeței.

¦ Trebuie evitate structurile complexe (cum ar fi un arbore) pentru a lega diferite meniuri. Cel mai bine este să nu includeți mai mult de șase meniuri într-o linie de meniu, fiecare dintre ele nu va conține mai mult de șase opțiuni.

¦ Obiectele trebuie să aibă un sens consistent. De exemplu, pentru a activa toate pictogramele, faceți dublu clic pe mouse. Unele interfețe moderne nu îndeplinesc această recomandare și conțin pictograme care intră în vigoare numai după ce utilizatorul remorcă

obiectează la ele. Barele de defilare ar trebui să fie utilizate numai pentru defilare și, dacă sunt folosite pictograme de bibliotecă prefabricate, ar trebui să le verificați cu atenție pentru a vă asigura că, de exemplu, pictograma imprimantei este întotdeauna utilizată pentru imprimare.

¦ Când activați toate pictogramele, așa cum sa menționat mai sus, ar trebui să faceți dublu clic pe mouse. Iar pentru a obține un rezultat similar pentru pictogramele obiectelor care sunt activate printr-un singur clic de mouse, este recomandat să programați și un dublu clic. Multe opțiuni, cum ar fi cele găsite în meniul Panoului de control, arată ca pictograme, dar sunt obiecte care pot fi activate cu un singur clic al mouse-ului. Ar trebui să anticipați cum se pot comporta utilizatorii atunci când lucrează cu astfel de obiecte (adică să vă așteptați să facă dublu clic pe ele) și să îi ajutați să obțină rezultatul dorit.

¦ Meniurile de interfață ar trebui să reflecte starea curentă a sistemului. Unul dintre principiile de bază care ghidează majoritatea designerilor de interfețe grafice cu utilizatorul este să se asigure că toate caracteristicile interfeței sunt accesibile indiferent de acțiunile utilizatorului. Regula de jos se potrivește bine cu aplicațiile simple, dar este mai puțin utilă pentru cele mai complexe.

¦ Elementele comune diferitelor meniuri trebuie plasate într-un singur loc. Dar, de exemplu, butoanele OK și Anulare ar trebui să fie întotdeauna poziționate la fel unul față de celălalt și să ocupe același loc în diferite casete de dialog.

¦ Nu ar trebui să depuneți eforturi pentru consecvența elementelor de meniu dacă aceasta nu corespunde cu opinia utilizatorilor. De exemplu, utilizatorii cred că tragerea unui fișier dintr-un folder în altul de pe același dispozitiv face ca fișierul să fie mutat în al doilea folder.

De asemenea, ei cred că tragerea unui fișier pe alt dispozitiv creează o copie a originalului acolo. De aici rezultă că implementarea funcției de remorcare va fi inconsecventă, adică. diferite în cazuri diferite. Totuși, aceasta este dorința utilizatorilor care trebuie luată în considerare. Efortul pentru consecvență este doar o recomandare, nu o regulă strictă.

Cerințele ergonomice pentru interfețele grafice cu utilizatorul s-au dovedit a fi în mod clar insuficiente odată cu dezvoltarea „multimedia” - sisteme interactive care oferă lucru cu imagini statice și video în mișcare, grafică animată de computer și text, vorbire și sunet de înaltă calitate. Cercetarea și dezvoltarea ergonomică a acestor sisteme prezintă o provocare provocatoare și interesantă din punct de vedere profesional.

Majoritatea managerilor de proiect de dezvoltare de aplicații, notează B. Tognazzini, așteaptă până la sfârșitul proiectului pentru a începe lucrul la interfață. Acest lucru amintește de construirea unei case, când un arhitect este invitat după construirea cadrului clădirii. Toți dezvoltatorii au abordări diferite pentru organizarea procesului de creare a interfeței. Cu toate acestea, există puncte generale pe care toți dezvoltatorii ar trebui să le respecte:

1) înțelegeți scopul produsului software în fiecare detaliu printr-o comunicare strânsă cu utilizatorii, petrecând adesea zile întregi de lucru cu aceștia pentru a înțelege mai bine stilul lor de lucru și obiceiurile individuale;

2) crearea unei interfețe nu este opera unei singure persoane, ci a reprezentanților a trei domenii: un specialist care află opiniile utilizatorilor despre principalele elemente ale interfeței și le descrie; dezvoltator de interfețe și creator de grafică;

3) un angajat cu experiență ar trebui desemnat ca expert în interfață și legătura între grupul de lucru și utilizatori;

4) testarea, crearea unui aspect și testarea din nou, deoarece chiar dacă scopul produsului software este pe deplin înțeles, este imposibil să se asigure toate nevoile utilizatorului.

Interfețele ar trebui să fie create de oameni, crede D. Norman, care nu iau parte la dezvoltarea aplicației, deoarece dezvoltatorii știu prea multe despre principiile programului, iar acest lucru interferează doar cu crearea interfeței. Avantajele unei interfețe grafice de utilizator sunt în general recunoscute, și poate
Prin urmare, el nu a devenit obiectul unei analize serioase. Regula tradițională a unui dezvoltator de programe, conform căreia ușurința de învățare împiedică adesea utilizatorul să utilizeze pe deplin toate capacitățile programului, se aplică și interfeței grafice. Un exemplu este dezvoltarea unui proiect pentru o companie americană de asigurări, în care au folosit o aplicație de asigurare pentru Macintosh, dotată cu o interfață excelentă, foarte ușor de învățat. Cu toate acestea, după doi ani de funcționare, utilizatorii finali deveniseră atât de pricepuți în diferitele caracteristici ale aplicației, încât interfața grafică cu utilizatorul nu face decât să le încetinească. Alegerea interfeței grafice ar trebui să fie determinată de natura sarcinii utilizatorului.

Contribuție de Saleem Gul și Tomas Pavek

Acest tutorial acoperă crearea unei interfețe grafice simple de utilizator și adăugarea de funcționalități simple pe partea de server. În special, ne vom uita la codul care definește comportamentul butoanelor și câmpurilor dintr-un formular Swing.

Ne vom uita la aspectul și structura GUI, apoi vom adăuga câteva butoane și câmpuri de text. Câmpurile de text sunt concepute pentru a primi informațiile introduse de utilizator și pentru a afișa rezultatul programului. Butonul va iniția operarea funcțiilor încorporate în partea client a programului. Aplicația creată este un calculator simplu, dar complet funcțional.

Pentru un ghid mai detaliat despre caracteristicile de dezvoltare GUI Designer, inclusiv demonstrații video ale diferitelor caracteristici de dezvoltare, consultați .

Durata estimată: 20 minute

Exercițiul 1: Crearea unui proiect

Primul pas este să creați un proiect IDE pentru aplicația pe care o dezvoltați. Să denumim proiectul NumberAddition.

  1. Alegeți Fișier > Proiect nou. De asemenea, puteți face clic pe pictograma Proiect nou din bara de instrumente IDE.
  2. În zona Categorii, selectați nodul Java. În zona „Proiecte”, selectați „Aplicație Java”. Faceți clic pe „Următorul”.
  3. Introduceți NumberAddition în câmpul Nume proiect și specificați o cale, cum ar fi directorul dvs. de acasă, ca locație a proiectului.
  4. Bifați caseta de selectare „Utilizați un folder separat pentru a stoca biblioteci” și specificați locația dosarului cu biblioteci (opțional). Pentru mai multe informații, consultați Partajarea unei biblioteci cu alții într-un document Dezvoltarea de aplicații cu NetBeans IDE.
  5. Eliminați caseta de selectare „Creare Main Class” dacă este bifată.
  6. Faceți clic pe butonul „Terminat”.

Exercițiul 2: Crearea front-end-ului

Pentru a continua procesul de creare a interfeței, trebuie să creați un container Java în care vor fi plasate celelalte elemente GUI necesare. În această activitate, un container va fi creat folosind un element JFrame. Containerul va fi plasat într-un nou pachet, care va apărea în nodul „Pachete sursă”.

Crearea unui container JFrame

  1. În fereastra Proiecte, faceți clic dreapta pe nodul NumberAddition și selectați New > Other.
  2. În caseta de dialog Creare fișier, selectați categoria Swing GUI Forms și tipul de fișier JFrame Form. Faceți clic pe „Următorul”.
  3. Introduceți NumberAdditionUI ca nume de clasă.
  4. Selectați pachetul my.numberaddition.
  5. Faceți clic pe butonul „Terminat”.

IDE-ul creează formularul NumberAdditionUI și clasa NumberAdditionUI în aplicația NumberAddition și deschide formularul NumberAdditionUI în GUI Builder. Pachetul my.NumberAddition înlocuiește pachetul implicit.

Adăugarea de elemente: crearea unui front end

Apoi, folosind fereastra „Paletă”, interfața externă a aplicației este umplută cu JPanel. După aceasta, sunt adăugate trei elemente JLabel (etichete text), trei elemente JTextField (câmpuri de text) și trei elemente JButton (butoane). Dacă nu ați mai lucrat cu designerul GUI, consultați Proiectarea unei GUI Swing în IDE-ul NetBeans pentru informații despre plasarea componentelor.

După glisarea și plasarea elementelor de mai sus, elementul JFrame ar trebui să arate ca imaginea de mai jos.

Dacă nu există nicio fereastră Paletă în colțul din dreapta sus al IDE-ului, alegeți Fereastra > Paletă.

  1. Pentru a începe, selectați un panou din categoria Swing Containers din paletă și trageți-l pe JFrame.
  2. JPanel-ul va fi evidențiat. Accesați fereastra Proprietăți și faceți clic pe butonul cu elipse (...) de lângă câmpul Border pentru a selecta un stil de chenar.
  3. În caseta de dialog Border, selectați TitledBorder din listă și introduceți Number Addition în câmpul Titlu. Faceți clic pe „OK” pentru a salva modificările și a închide caseta de dialog.
  4. Ecranul ar trebui să afișeze acum un element „JFrame” gol cu ​​titlul „Adăugarea numărului”, așa cum se arată în imagine. Conform imaginii, adăugați trei JLabels, trei JTextFields și trei JButtons.

Redenumirea elementelor

Acest pas va redenumi elementele care au fost adăugate la elementul JFrame.

  1. Faceți dublu clic pe jLabel1 și schimbați ntrcn (proprietatea „text”) la Primul număr.
  2. Faceți dublu clic pe jLabel2 și schimbați textul în al doilea număr.
  3. Faceți dublu clic pe jLabel3 și schimbați textul în Rezultat.
  4. Eliminați textul implicit din jTextField1. Textul afișat poate fi convertit în text editabil. Pentru a face acest lucru, faceți clic dreapta pe câmpul de text și selectați „Editați text” din meniul pop-up. Acest lucru poate necesita să restaurați jTextField1 la dimensiunea inițială. Repetați acest pas pentru câmpurile jTextField2 și jTextField3.
  5. Schimbați textul afișat al jButton1 în Clear. (Pentru a schimba textul unui buton, faceți clic dreapta pe buton și selectați Editați text. Alternativ, puteți face clic pe buton, întrerupeți și faceți clic din nou.)
  6. Schimbați textul afișat al jButton2 în Add .
  7. Schimbați textul afișat al jButton3 la Ieșire.

Acum, GUI-ul finit ar trebui să arate ca imaginea de mai jos:

Exercițiul 3: Adăugarea de funcționalități

Acest exercițiu va adăuga funcționalitatea necesară la butoanele Adăugare, Ștergere și Ieșire. Câmpurile jTextField1 și jTextField2 vor fi folosite pentru introducerea utilizatorului, iar jTextField3 va fi folosit pentru a afișa rezultatul programului. Programul creat este un simplu calculator. Asadar, haideti sa începem!

Adăugarea de funcționalități la butonul Ieșire

Pentru ca butoanele să devină funcționale, fiecăruia dintre ele trebuie să i se aloce un handler de evenimente, care va fi responsabil cu răspunsul la evenimente. În cazul nostru, trebuie să identificăm evenimentul de clic pe butonul - fie făcând clic pe mouse, fie folosind tastatura. Prin urmare, interfața „ActionListener” va fi utilizată pentru a gestiona evenimentele „ActionEvent”.

  1. Faceți clic dreapta pe butonul „Ieșire”. Din meniul pop-up, selectați Evenimente > Acțiune > acțiune efectuată. Vă rugăm să rețineți că meniul conține multe alte evenimente la care programul poate răspunde! Când selectați evenimentul actionPerformed, IDE-ul va adăuga automat un ActionListener la butonul Exit și va crea o metodă de gestionare pentru a gestiona metoda de ascultare actionPerformed.
  2. IDE-ul deschide automat fereastra Cod sursă, arătându-vă unde să inserați acțiunea pe care doriți să o efectueze butonul când faceți clic pe el (cu mouse-ul sau tastatura). Fereastra „Cod sursă” ar trebui să conțină următoarele rânduri: private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) ( //TODO adăugați codul dvs. de manipulare aici: )
  3. Acum să adăugăm codul pentru acțiunea pe care trebuie să o efectueze butonul „Ieșire”. Înlocuiți linia TODO cu System.exit(0); . Codul final pentru butonul „Ieșire” ar trebui să arate astfel: private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) ( System.exit(0); )

Adăugarea de funcționalități la butonul „Șterge”.

  1. Faceți clic dreapta pe butonul „Șterge” (jButton1). Din meniul care apare, selectați „Evenimente > Acțiune > acțiune efectuată”.
  2. Făcând clic pe butonul „Șterge”, ar trebui ca tot textul să fie eliminat din toate câmpurile de text „jTextField”. Pentru a face acest lucru, adăugați un cod similar cu cel de mai sus. Codul sursă terminat ar trebui să arate astfel: private void jButton1ActionPerformed(java.awt.event.ActionEvent evt)( jTextField1.setText(""); jTextField2.setText(""); jTextField3.setText(""); )

Acest cod elimină textul din toate cele trei JTextFields, lăsându-le goale.

Adăugarea de funcționalități la butonul „Adăugați”.

Butonul „Adăugați” ar trebui să facă trei lucruri.

  1. Mai întâi preia intrarea utilizatorului în câmpurile jTextField1 și jTextField2 și le convertește dintr-un tip „String” într-un tip „Float”.
  2. Apoi va efectua adăugarea celor două numere.
  3. În cele din urmă, va converti suma într-un șir și o va plasa în jTextField3 .
Sa incepem!
  1. Faceți clic pe fila Design din partea de sus a spațiului de lucru pentru a reveni la ecranul Form Design.
  2. Faceți clic dreapta pe butonul „Adăugați” (jButton2). Din meniul pop-up, selectați Evenimente > Acțiune > acțiune efectuată.
  3. Adăugați cod pentru acțiunile pe care trebuie să le efectueze butonul „Adăugați”. Codul sursă terminat ar trebui să arate astfel: private void jButton2ActionPerformed(java.awt.event.ActionEvent evt)( // Mai întâi definim variabilele float. float num1, num2, result; // Trebuie să analizăm textul la un tip float .num1 = Float.parseFloat(jTextField1.getText()); num2 = Float.parseFloat(jTextField2.getText()); // Acum putem efectua adunarea. rezultat = num1+num2; // Acum vom trece valoarea de rezultat la jTextField3. // În același timp, vom // schimba valoarea rezultatului dintr-un float într-un șir. jTextField3.setText(String.valueOf(result)); )

Acum programul este complet gata și puteți începe să îl asamblați și să îl executați.

Exercițiul 4: Executarea programului

Pentru a rula programul în IDE, urmați acești pași:

  1. Selectați Run > Run Main Project (alternativ, apăsați F6).

    Notă. Dacă deschideți o fereastră care indică faptul că Project NumberAddition nu are o clasă principală specificată, ar trebui să selectați my.NumberAddition.NumberAdditionUI ca clasă principală în aceeași fereastră și să faceți clic pe OK.

Pentru a rula programul în afara IDE, urmați acești pași:

După câteva secunde, aplicația se va lansa.

Notă. Dacă dublu clic pe un fișier JAR nu lansează aplicația, consultați asociațiile de fișiere JAR de pe sistemul dvs. de operare pentru mai multe informații.

De asemenea, puteți rula aplicația din linia de comandă.

Pentru a rula aplicația din linia de comandă, urmați acești pași:

  1. Deschideți o linie de comandă sau o fereastră de terminal.
  2. La promptul de comandă, schimbați directorul curent în directorul NumberAddition/dist.
  3. La promptul de comandă, introduceți următoarea instrucțiune: java -jar NumberAddition.jar

    Notă. Asigurați-vă că my.NumberAddition.NumberAdditionUI este setat ca clasă principală înainte de a rula aplicația. Pentru a verifica acest lucru, faceți clic dreapta pe nodul de proiect NumberAddition din panoul Proiecte, alegeți Proprietăți din meniul pop-up și selectați categoria Run din caseta de dialog Proprietăți proiect. Câmpul Clasă principală ar trebui să arate my.numberaddition.NumberAdditionUI .

Motor de procesare a evenimentelor

Acest tutorial a analizat răspunsul la un simplu eveniment de clic pe buton. Există multe evenimente la care o aplicație poate răspunde. În IDE, puteți vizualiza lista de evenimente disponibile care pot fi procesate de elementele GUI după cum urmează:

  1. Reveniți la fișierul NumberAdditionUI.java din editor. Faceți clic pe fila „Design” pentru a vedea structura GUI în GUI Builder.
  2. Faceți clic dreapta pe orice element GUI și selectați „Evenimente” din meniul care apare. Acum puteți explora pur și simplu conținutul meniului fără a selecta niciun element.
  3. Alternativ, puteți selecta „Proprietăți” din meniul „Fereastră”. În fereastra Proprietăți, faceți clic pe fila Evenimente. Fila „Evenimente” vă permite să vizualizați și să modificați gestionanții de evenimente asociați cu elementul GUI activ în prezent.
  4. Aplicația poate răspunde și la apăsările de taste, clicurile simple, duble sau triple, mișcările cursorului mouse-ului, redimensionarea ferestrei și mișcările de focalizare de intrare. Meniul „Evenimente” vă permite să creați automat handlere de evenimente pentru toate aceste evenimente. Cel mai comun dintre acestea este evenimentul „Acțiune”. (Pentru mai multe informații, vedeți cum să gestionați evenimentele în Tutorialul Sun Java Events.)

Cum sunt procesate evenimentele? Ori de câte ori selectați un eveniment din meniul de evenimente, IDE-ul creează automat ceea ce se numește un ascultător de evenimente și îl asociază cu componenta de dezvoltator. Pentru a afla mai multe despre procesarea evenimentelor, urmați acești pași:

  1. Reveniți la fișierul NumberAdditionUI.java din editor. Faceți clic pe fila „Sursă” pentru a vedea codul sursă GUI.
  2. Derulați în jos pentru a vedea metodele implementate jButton1ActionPerformed() , jButton2ActionPerformed() și jButton3ActionPerformed(). Aceste metode sunt numite handlere de evenimente.
  3. Acum mergeți la metoda initComponents(). Dacă această metodă lipsește, găsiți linia Cod generat și faceți clic pe semnul + de lângă linia respectivă pentru a afișa metoda ascunsă initComponents().
  4. Observați blocul albastru care înconjoară metoda initComponents(). Acest cod a fost generat automat de IDE și nu poate fi modificat de utilizator.
  5. Acum uitați-vă la metoda initComponents() în sine. Printre altele, conține cod care inițializează elementele GUI și le plasează pe formular. Acest cod este generat și actualizat automat pe măsură ce plasați și modificați elementele în modul de proiectare.
  6. În metoda initComponents(), găsiți următorul fragment: jButton3.setText("Exit"); jButton3.addActionListener(new java.awt.event.ActionListener() ( public void actionPerformed(java.awt.event.ActionEvent evt) ( jButton3ActionPerformed(evt); ) ));

    În acest moment, un obiect de ascultare a evenimentelor „ActionListener” este adăugat elementului GUI, în acest caz jButton3 . Interfața „ActionListener” are o metodă „actionPerformed” pe obiectul „ActionEvent”, care este implementată prin simpla apelare a handler-ului de evenimente jButton3ActionPerformed. Acest buton răspunde acum la evenimentele de acțiune. De fiecare dată când se face clic pe butonul, un „ActionEvent” este generat și transmis metodei „actionPerformed” a interfeței de ascultare a evenimentelor, care execută codul furnizat de dezvoltator pentru evenimentul respectiv în handlerul de evenimente.

  7. Card de învățare pentru aplicații GUI Java

09 iulie 2003

Odată cu apariția diverselor instrumente vizuale de dezvoltare a aplicațiilor, scrierea interfețelor grafice pentru programe s-a transformat în ceva asemănător unui joc pentru copii. L-am împuns cu mouse-ul și a apărut un formular; l-am băgat a doua oară și a apărut un buton. Mi se pare că mulți oameni acum nu se gândesc la un alt mod de programare într-un mediu grafic. Desigur, nu puteți argumenta împotriva progresului; atunci când scrieți proiecte mari, toate aceste facilități sunt foarte utile. Dar nu despre asta este vorba în această conversație. Uneori se ajunge la punctul de absurd: o aplicație primitivă este scrisă folosind MFC, VCL etc. Astfel de programe devorează memoria precum termitele și, cu corpurile lor grase, ocupă spațiu suplimentar pe disc. De regulă, analogii MFC/VCL „cântăresc” de zece până la douăzeci de ori mai mult decât programele scrise pe un API pur. Și Visual Basic (Dumnezeu să mă ierte pentru această frază) cu msvbvmXX.dll? Și sunt consumate mult mai multe resurse de sistem (de câteva ori). Utilizatorii săraci, refuzându-și berea, economisesc bani pentru a cumpăra hardware nou. Nu este păcat de cei săraci? Nu numai programatorii beau bere? Există un alt aspect pozitiv al codării API: programatorul devine mai aproape de sistemul de operare. În consecință, el înțelege și controlează mai bine. Și este simplu - este o activitate foarte interesantă. Repet, toate cele de mai sus se aplică în mod specific programelor mici și simple; în proiectele mari, totul este complet diferit.

Sper ca te-am convins. Merge.

Ne vom uita la crearea unei interfețe de fereastră simplă cu funcționalitate minimă. Aceasta va fi o fereastră simplă cu două câmpuri de introducere și două butoane. Când faceți clic pe butonul „Copiere”, textul din primul câmp de introducere va fi copiat în al doilea. Când faceți clic pe butonul „Închidere”, programul își va finaliza activitatea. În viitor, poate servi ca șablon pentru scrierea altor aplicații mai complexe. Vom comunica în C/C++, deși nu vom jigni nici Delphi. Principiul general este același, doar sintaxa este diferită. Pentru a lucra cu mesajele de sistem și cu funcțiile API, trebuie să includeți fișiere de antet în proiect; în C/C++ acesta este windows.h, în Delphi acestea sunt ferestrele și modulele de mesaje.

Orice program din sistemul de operare Windows constă din trei părți principale: funcția principală, bucla de mesaje și funcția fereastră, care procesează toate mesajele trimise către fereastră.

Programul nostru începe să se execute cu funcția WinMain(). Aceasta este funcția principală. Funcția WinMain() îndeplinește de obicei următoarele sarcini:

  • Definește clasa ferestrei. A nu se confunda cu o clasă OOP.
  • Înregistrează această clasă în sistem.
  • Creează fereastra principală a aplicației și alte controale.
  • Afișează o fereastră pe ecran.
  • Pornește bucla de procesare a mesajelor.
  • Este declarat astfel: int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow) Să ne uităm la parametrii:
    • hInstance este un handle pentru instanța curentă a aplicației.
    • hPrevInstance este un handle pentru instanța anterioară a aplicației, dacă aceasta rulează.
    • lpCmdLine - pointer către o linie care conține parametrii trecuți programului la pornire.
    • nCmdShow - o constantă care determină modul în care este afișată fereastra. (Vezi constantele SW_).

În Delphi nu vom vedea o astfel de imagine; în acest mediu de dezvoltare, funcția principală este ascunsă programatorului de către compilator. Deși, desigur, este prezent în codul final. Pentru a înregistra o clasă de ferestre, trebuie să completați câmpurile structurii de tip WNDCLASS (în Delphi TWNDCLASS). În acest scop, am declarat variabila wcl. wcl.hInstance = hInstance; Un handle pentru instanța curentă a aplicației, variabila hInstance este inițializată de funcția WinMain(). In Delphi este initializat implicit. wcl.lpszClassName = szWinName; Numele clasei. Am creat și inițializat variabila șir szWinName în avans. wcl.lpfnWndProc = WindowFunc; Un indicator către o funcție de fereastră. wcl.style = 0; O constantă care specifică stilul ferestrei. Steagulele CS_ sunt folosite pentru asta, tocmai le-am șters la zero. Puteți specifica o combinație de steaguri folosind operația „sau” pe biți. wcl.hIcon = LoadIcon(NULL, IDI_ASTERISK); Un mâner pentru pictograma aplicației, returnat de funcția LoadIcon(). Am încărcat o pictogramă standard. A se vedea IDI_ constante. wcl.hCursor = LoadCursor(NULL,IDC_ARROW); Un handle pentru cursorul aplicației, așa cum este returnat de LoadCursor(). Am încărcat săgeata standard. Vedeți constantele IDC_. wcl.lpszMenuName = NULL; Indicator către un șir care specifică numele resursei de meniu pentru această clasă de ferestre. Fără meniu, fără semn. wcl.cbClsExtra = 0; Câmp rezervat. Să resetăm. wcl.cbWndExtra = 0; Câmp rezervat. Să resetăm. wcl.hbrBackground = (HBRUSH)COLOR_WINDOW; Culoarea ferestrei. Constanta COLOR_WINDOW este turnată la tipul HBRUSH (în Delphi nu este nevoie de proiectare). De asemenea, folosind funcția GetStockObject(), puteți seta culoarea pensulei ferestrei sau imaginea de fundal. Acum, nu ezitați să înregistrați clasa ferestre.

RegisterClass(&wcl); Un pointer către structura wcl este transmis ca parametru funcției RegisterClass.

Următoarea linie ne creăm fereastra.

hMainWnd = CreateWindow(szWinName, „O fereastră simplă pe API”., WS_OVERLAPPEDWINDOW ^ WS_THICKFRAME ^ S_MAXIMIZEBOX, CW_USEDEFAULT, CW_USEDEFAULT, 300, 170, HWND_DESKTOP, NULL, hInstance, NULL);
  • Primul parametru este numele clasei ferestrei.
  • Al doilea parametru este Titlul ferestrei.
  • Al treilea parametru este stilul ferestrei. Din standardul WS_OVERLAPPEDWINDOW, folosind operația xor, am eliminat capacitatea de a scala fereastra și am dezactivat butonul de maximizare.
  • Al patrulea și al cincilea sunt poziția ferestrei din colțul din stânga, sus al ecranului. Am CW_USEDEFAULT, cu această valoare sistemul selectează automat poziția ferestrei.
  • Al șaselea și al șaptelea parametri sunt lățimea și, respectiv, înălțimea ferestrei.
  • Al optulea parametru este fereastra proprietarului. În fereastra principală, proprietarul este desktopul (0). Controalele au o fereastră principală.
  • Al nouălea este un indicator către mânerul de meniu. Fără meniu, fără semn.
  • Al zecelea parametru este un handle pentru instanța curentă a aplicației.
  • Al unsprezecelea - Folosit la crearea aplicațiilor cu o interfață MDI. Nu avem nevoie.
Funcția returnează un handle la fereastra creată, care este stocată în variabila hMainWnd.
Un mâner de fereastră este un număr unic în sistem care identifică o fereastră sau un control.

În continuare vom crea controalele necesare. Toate comenzile sunt aceleași ferestre, au doar un nume de clasă diferit. Nu este necesară înregistrarea claselor de control, acestea sunt deja predefinite în sistem. Buton - clasa de buton. Câmp de introducere - editarea clasei. Legendă - clasă ststic. Există multe clase care corespund controalelor standard. Creăm controale folosind funcția familiară CreateWindow() și funcția necunoscută CreateWindowEx(). CreateWindowEx() vă permite să creați o fereastră cu un stil avansat. Îl folosim pentru a crea câmpuri de intrare. Această funcție a adăugat primul parametru, care setează acest stil cel mai avansat, parametrii rămași sunt la fel ca CreateWindow(). Comenzile sunt ferestre copil, proprietarul lor este fereastra principală.

La crearea controalelor, în parametrii funcției trebuie să specificați descriptorul ferestrei principale, precum și stilul ferestrei WS_CHILD. Aspectul și funcționalitatea controalelor pot fi manipulate folosind steagurile: WS_, ES_, BS_, SS_, combinându-le cu operația „sau” pe biți. La crearea controalelor, inițializam variabilele corespunzătoare cu descriptorii lor, care sunt returnați de funcțiile CreateWindow() și CreateWindowEx(). Vom avea nevoie de acești descriptori pentru a lucra în continuare cu controale. Afișăm fereastra pe care am creat-o pe ecran și o redesenăm.

Funcția GetMessage selectează următorul mesaj din coada de mesaje a aplicației și îl trimite în fereastră.
  • Primul parametru este o structură de tip MSG (în Delphi de tip TMSG)
  • Al doilea parametru este un mâner pentru fereastra căreia este destinat mesajul. Dacă NULL sau 0, atunci toate ferestrele aplicației.
  • Al treilea și al patrulea - vă permit să setați intervalul de mesaje primite. Dacă 0, atunci toate mesajele sunt adresate ferestrei.
GetMessage - returnează FALSE când apare un mesaj WM_QUIT, caz în care se iese din buclă și se iese aplicația. TranslateMessage - traduce codurile de taste virtuale în mesaje de la tastatură. DispatchMessage - trimite un mesaj către funcția fereastră pentru procesare.

Funcția fereastră asigură funcționalitatea programului prin procesarea mesajelor de sistem. Funcția fereastră este o funcție CALLBACK, adică. apelat de sistemul de operare ca răspuns la un mesaj nou primit. Funcția fereastră este declarată astfel:

LRESULT CALLBACK WindowFunc(HWND hMainWnd, UINT iMsg, WPARAM wParam, LPARAM lParam)

  • HMainWnd - handle la fereastra principală.
  • iMsg - numărul mesajului. Vezi constantele WM_.
  • lParam și wParam sunt parametri de mesaj.

Când apare un mesaj, putem compara parametrul iMsg cu una dintre constantele WM_ și putem programa programul să reacționeze în consecință.

De exemplu: Când butonul stâng al mouse-ului este apăsat în timp ce indicatorul mouse-ului se află deasupra zonei client a ferestrei, evenimentul WM_LBUTTONDOWN este lansat. Se apelează funcția fereastră, valoarea constantei WM_LBUTTONDOWN este introdusă în parametrul iMsg, putem verifica starea și programa reacția programului de care avem nevoie.

În interiorul funcției ferestre se află un operator de selecție care realizează sarcina descrisă mai sus. Operatorul de selecție trebuie să aibă un handler implicit, care este implementat de funcția DefWindowProc(hMainWnd, iMsg, wParam, lParam);

Dacă acest lucru nu se face, programul nostru va muri fără să revină. Multe mesaje sunt procesate de sistemul însuși, cum ar fi: redimensionarea unei ferestre, minimizarea/maximizarea unei ferestre, apelarea meniului de sistem etc. Pentru asta este DefWindowProc().

Când lucrați cu comenzile ferestrei, un mesaj WM_COMMAND este trimis proprietarului ferestrei, cu lParam care conține mânerul pentru control, iar octetul înalt al parametrului wParam este identificatorul evenimentului ridicat pe control. De exemplu: când faceți clic pe un buton - BN_CLICKED. Vezi constantele BN_, WM_. Putem închide programul folosind funcția PostQuitMessage(0). Această funcție trimite un mesaj WM_QUIT către fereastră.

Câteva cuvinte despre cum să scrieți astfel de programe în Delphi. Creați un nou proiect, lansați Project Manager, ștergeți Unit1 împreună cu formularul. Apăsați Ctrl + F12 și deschideți fișierul proiect. Îndepărtăm modulul de formulare din utilizări, adăugăm acolo ferestre și mesaje. Ștergem totul între început și sfârșit. Piesa de prelucrat este gata. Puteți codifica. Este imposibil să scrieți programe folosind un API pur fără ajutor, care ar trebui să fie întotdeauna la îndemână. Dacă ai fi însuși Gates, nu ți-ai aminti totul. Vă recomand:

  • în primul rând - MSDN;
  • Sistem de ajutor Delphi (fișier MSTOOLS.HLP);
  • Există ajutor rusesc pentru Win32 API pe site-ul http://www.soobcha.ru/rushelp.
Asta e tot.
Noroc.

Bobachenko Maxim Descarca: CreateWnd.zip(2,6K)
arhiva conține fișierele windows.cpp și windows.dpr

Standard GUI.

Una dintre cele mai importante schimbări din industria calculatoarelor este apariția interfeței grafice. Deci, este nevoie de a adopta standarde GUI care definesc cum ar trebui să arate aplicațiile Windows? Macintosh, etc. Există chiar și programe de certificare prin care furnizorii își adaptează aplicațiile pentru a câștiga insigna Windows. Acest lucru se face din mai multe motive.

Unul dintre avantajele Windows sau Mac este aspectul lor standard. Când ai învățat să lucrezi într-una dintre ele, consideră că ai stăpânit restul. Majoritatea aplicațiilor Windows folosesc aceleași convenții, așa că știți cum să deschideți, să salvați, să tipăriți, să închideți și să copiați un fișier în oricare dintre ele. Interfața standard este foarte ușor de utilizat. Trebuie să încercați să faceți aplicațiile dvs. similare cu alte aplicații Windows cu care utilizatorii au învățat deja să lucreze. Există șapte principii generale pentru proiectarea GUI. Dacă le înveți și le urmezi, designul aplicației tale va fi bine.

Șapte principii ale designului GUI.

Cele șapte principii generale ale designului GUI sunt preluate din Microsoft Windows Interface Guide. Ele formează un model din care vă puteți crea propriile standarde. Acest design oferă dezvoltatorilor și utilizatorilor două beneficii semnificative. În primul rând, aplicațiile arată profesional. În al doilea rând, sunt funcționale, în concordanță cu alte aplicații și ușor de învățat de către utilizatori.

Desigur, pentru ca o aplicație să aibă succes, trebuie să fie bine scrisă și utilă - acestea sunt principalele cerințe. Principiile despre care vorbim pur și simplu dau de gândit dezvoltatorului.

1. Permiteți utilizatorului să controleze aplicația.

2. Urmați paradigma obiect/acțiune.

3. Fii consecvent.

4. Faceți utilizarea aplicațiilor simplă și evidentă.

5. Străduiește-te pentru armonie.

6. Oferiți feedback utilizatorilor.

7. Fii indulgent

Principiul unu: Oferiți utilizatorului controlul asupra aplicației.

Utilizatorul trebuie să controleze aplicația, adică să aibă acces la fiecare modul de aplicație din orice alt modul. Anterior, pentru un astfel de acces era folosit un meniu ierarhic.


Să presupunem că utilizatorul dorește să adauge un nou client. În exemplu, utilizatorul trebuie să meargă la modulul CONTURI RECCIEVAble și apoi să adauge un nou client de acolo. De unde știe el ce să facă? Probabil din experiența mea cu această aplicație. Și în lumea GUI, utilizatorul selectează pur și simplu comanda Nou din meniu, apoi Client, așa cum se arată în Fig. În acest sistem modern, puteți adăuga un nou client, furnizor sau articol de inventar prin meniul Fișier. Acest lucru vă permite să modificați o înregistrare a unui client în timp ce sunteți pe ecranul comerciantului și invers. Utilizatorul nu mai trebuie să navigheze în meniuri ierarhice complexe și confuze.

Principiul doi: urmați paradigma obiect/acțiune.

Paradigma obiect/acțiune afirmă că o anumită operație poate fi efectuată asupra tuturor obiectelor din sistem. Cel mai simplu și mai evident exemplu este ecranul de suport al bazei de date clienți (Fig.). Ecranul conține un set de butoane și fiecare din partea de jos vă permite să efectuați o anumită acțiune asupra informațiilor despre clientul selectat. Îl puteți șterge, edita, imprima etc. Acțiunile care pot fi efectuate asupra unui anumit client trebuie să fie disponibile sau indisponibile la momentele adecvate. De exemplu, atunci când înregistrarea unui client este în modul de editare, butoanele Ștergere și Nou ar trebui să fie dezactivate.

Principiul trei: fii consecvent.

Consecvența este unul dintre cele mai importante principii ale designului GUI. GUI – permit utilizatorilor să exploreze mai multe aplicații decât programe mai vechi. Și toate acestea datorită principiului consecvenței. Când un utilizator întâlnește o nouă aplicație, este deja familiarizat cu comenzile de bază: deschiderea, imprimarea și salvarea fișierelor. Aplicațiile dezvoltate pe aceste platforme sunt de obicei în concordanță între ele.

Deci, atunci când creați aplicații noi, fiți consecvenți. Dacă ați folosit comanda Nou pentru a adăuga o intrare nouă, utilizați-o peste tot. Acest cuvânt nu trebuie înlocuit cu alții - de exemplu, cu cuvântul Add 9add). Datorită consecvenței tale, utilizatorii vor ști că oriunde întâlnesc comanda Nouă, aceasta poate fi folosită pentru a adăuga o nouă intrare.

Principiul patru: faceți utilizarea aplicației simplă și evidentă.

Un alt mod de a exprima această idee este: nu folosi jargon. Există un ecran cu două butoane. Unul dintre ele spune „Ambalați baza de date”, iar celălalt spune „Eliminați înregistrările marcate pentru ștergere”. A doua intrare va fi probabil mai înțeleasă de utilizator.

Când dezvoltați aplicații, există adesea tentația de a folosi argoul programatorului în interfață. Încercați să evitați acest lucru dacă este posibil.

Principiul cinci: Străduiește-te pentru armonie

Chiar și în alb-negru, acest ecran are un dezavantaj estetic semnificativ: un fundal alb cu obiecte contrastante pe el. În fig. Același ecran arată bine echilibrat din punct de vedere al culorilor.

Există milioane de combinații de culori pe care le puteți transfera în Windows. Înseamnă asta că toate trebuie folosite? Desigur nu. Ar trebui să alegeți culori simple, calme și să evitați amestecarea lor haotică, ceea ce din anumite motive le place unor programatori.

Principiul șase. Oferiți feedback utilizatorului.

Imaginați-vă că aplicația dvs. are un proces care durează mult timp pentru a se executa. În acest timp, puteți afișa un mesaj pe ecran cu următorul conținut: „Programul rulează, vă rugăm să așteptați.” Soluție convenabilă; dar de unde știe utilizatorul că nu este înghețat? Prin urmare, este foarte probabil să dea aplicației un „salut cu trei degete” (Ctrl+Alt+Del), deși totul va fi bine cu programul.

Este mai bine să arătați utilizatorului ce parte a procesului este finalizată. Apoi nu va întrerupe inutil programul, va putea evalua cât de mult a progresat munca și va face alte lucruri până la finalizarea procesului. Astfel, productivitatea utilizatorului va crește cu aproximativ 25 la sută. Acest rezultat poate fi obținut prin simpla afișare a contorului pe ecran. De obicei, sunt afișate mesaje precum „10 din 100 de înregistrări procesate” sau „40% complet”. Și mai bine este să arăți atât numărul de înregistrări procesate, cât și procentul acestora.”

Principiul șapte: Fii iertător

Fiecare dintre noi a șters uneori o postare apăsând din greșeală butonul greșit. Prin urmare, oferiți utilizatorului posibilitatea de a se răzgândi sau de a anula acțiunile tocmai întreprinse. Dacă un proces durează mult timp, modifică multe date sau solicită utilizatorului să facă o copie de rezervă a datelor înainte de a efectua o acțiune, ar trebui să emiti un avertisment. Am văzut aplicații care necesită confirmare de două ori și apoi cer o parolă. Programele dumneavoastră au nevoie de acest nivel de protecție? Pot fi. Sarcina dezvoltatorului este de a ajuta utilizatorul dacă a făcut o greșeală în orice etapă a lucrării.

Importanța convențiilor standard GUI.

După cum puteți vedea, principiile designului GUI sunt foarte simple și ar trebui folosite la crearea ecranelor. Cu toate acestea, înainte de a proiecta ecranul, trebuie să stabiliți cum va arăta. Alegeți dimensiunile, fonturile, culorile, stilurile de mesaje etc. Rezolvând aceste probleme în avans, vă veți accelera semnificativ munca. Când vine vorba de fontul sau stilul mesajelor mai târziu, te uiți doar la standard.