12: Proiectarea Interfetelor Grafice

Cuprins

1. Infrastructura interfețelor grafice

2. Componentele Swing

3. Etapele realizării unei interfețe grafice

4. Crearea unui container rădăcină

5. Adăugarea unor containere intermediare în containerul rădăcină

6. Adăugarea componentelor grafice elementare

7. Poziționarea elementelor. Gestionari de poziționare

8. Tratarea evenimentelor

• Abstract Window Toolkit (AWT) este primul pachet de clase dedicat proiectării unei interfețe grafice și este bazat pe tratarea evenimentelor generate de interacțiunea utilizatorului cu interfața grafică.
• Modelul AWT accesează componentele grafice ale sistemului de operare gazdă, respectiv crearea unei componente grafice va fi delegată către sistemul de operare, ci nu va fi realizată de către mașina virtuală.
• Deși are o serie de avantaje, precum o viteză bună de executare și o flexibilitate din punct de vedere al sistemului de operare utilizat (interfața se actualizează automat în momentul în care se schimbă versiunea sistemului de operare), are și o serie de dezavantaje, cum ar fi utilizarea unui set redus de componente grafice și lipsa portabilității (unele componente grafice pot avea aspect și funcționalitate diferită de la un sistem de operare la altul), care au condus la dezvoltarea unui API complex și performant denumit Java Foundation Classes.

• Swing: un API dedicat realizării unei interfețe grafice format din numeroase pachete de clase și interfețe performante, atât din punct de vedere funcțional, cât și din punct de vedere estetic;
• Look-and-Feel: un API care permite modificarea aspectului unei interfețe grafice în raport cu un anumit model, cum ar fi cele standard Windows, Mac, Java, Motif sau altele oferite de diverși dezvoltatori, acestea putând fi modificate de către utilizator chiar în momentul executării aplicației;
• Accessibility: un API care conține facilități dedicate persoanelor cu dizabilități, cum ar fi comenzi vocale, cititoare de ecran, dispozitive de recunoaștere a vocii etc.);
• Java2D: un API care conține facilități dedicate pentru crearea de desene complexe, efectuarea unor operații geometrice (rotiri, scalări, translații etc.), prelucrarea imaginilor etc.;
• Internalization: un API care permite dezvoltarea unor aplicații care pot fi configurate în raport cu diferite zone geografice, utilizând limba și particularitățile legate de formatarea datei, a numerelor sau a monedei din zona respectivă.

• Spre deosebire de componentele grafice din AWT, componentele Swing nu depind de sistemul de operare, fiind implementate direct în Java. Interfețele grafice realizate cu modelul Swing sunt mai lente decât cele realizate cu modelul AWT, fiind complet desenate de către mașina virtuală Java, însă oferă o paletă extinsă și performantă de componentele grafice, atât din punct de vedere funcțional, cât și din punct de vedere estetic.

• Pentru a realiza separarea componentei Model de componenta View, pentru fiecare componentă Swing este definită o clasă care gestionează datele și modul în care sunt tratate evenimentele asociate componentei grafice respective.
• În plus, o serie de componente Swing au asociate mai multe modele prin care pot fi gestionate datele, precum modelul ButtonModel (JButton, JRadioButton, JMenu, JMenuItem, JCheckBox) sau modelul Document (JTextArea, JTextField, JEditorPane).
• Practic, fiecare componentă are un model inițial implicit, însă acesta poate fi înlocuit printr-un model definit cu ajutorul unei clase care fie implementează interfața corespunzătoare, fie extinde clasa implicită oferită de API-ul Swing.
• De exemplu, interfața model a clasei JList este ListModel care este implementată de clasele DefaultListModel și AbstractListModel.

1. crearea unui container rădăcină;
2. adăugarea unor containere intermediare în containerul rădăcină;
3. adăugarea unor componente grafice în containerele intermediare;
4. poziționarea/alinierea componentelor în containerele intermediare folosind gestionari de poziționare;
5. specificarea acțiunilor care trebuie efectuate în momentul apariției unui anumit eveniment lansat în urma interacțiunii utilizatorului cu o anumită componentă grafică.

• Crearea componentelor grafice nu conduce implicit și la afișarea lor pe ecran.
• Mai întâi acestea trebuie să fie așezate pe o suprafața de afișare, astfel o interfața grafică Swing are o structură stratificată, compusă dintr-un container de tip rădăcină (root containers) ce încapsulează unul sau mai multe containere intermediare, care la rândul lor încapsulează mai multe componente grafice, precum butoane, liste, tabele etc..
• Astfel, definirea unui container rădăcină este esențială în procesul de proiectare a unei interfețe grafice, deoarece acesta este singura componentă Swing care poate fi afișată pe ecran.

• containerul rădăcină este vizibil numai dacă se apelează metoda setVisibile(true) a clasei JFrame;
• accesarea suprafeței de afișare corespunzătoare containerului intermediar asociat unei ferestre JFrame se realiză prin apelul metodei JPanel getContentPane();
• toate clasele care modelează componente grafice încapsulează peste 100 de metode comune, moștenite din clasa JComponent, care permit adăugarea sau eliminarea unei componente grafice, modificarea aspectului containerului (dimensiuni, culoare, background, font), precum și modul de aliniere al componentelor grafice incluse în acesta. Toate aceste metode au formatul general Tip getProprietate(), respectiv void setProprietate(Tip valoare). Detalii despre aceste metode găsiți în pagina https://docs.oracle.com/javase/7/docs/api/javax/swing/JComponent.html.
• deși o fereastra JFrame nu mai este vizibilă în urma apăsării butonului de închidere, aplicația va continua să ruleze, deoarece implicit este setată proprietatea JFrame.HIDE_ON_CLOSE ca argument al metodei void setDefaultCloseOperation(). Astfel, pentru a închide atât fereastra, cât și aplicația, trebuie setată proprietatea JFrame.EXIT_ON_CLOSE.

1. 1. • Instanțierea unui obiect JPanel se poate realiza printr-unul dintre constructorii:

1. 1. • Adăugarea unei componente grafice se realizează prin apelul metodei add(JComponent ob)

• Este important de subliniat faptul ca nicio componentă grafică Swing nu oferă intrinsec acest suport, deci componente grafice precum tabele sau liste de mari dimensiuni se așază, de regulă, pe o suprafața definită de un panou JScrollPane.
• Pentru derulare(scrolling), containerul JScrollPane pune la dispozitie o bara de derulare JScrollBar, iar zona de afișare este reprezentată de containerul JViewport.

• Fiecare strat are câte o etichetă care poate conține text, pictograma etc., prin intermediul căreia utilizatori pot selecta stratul pe care vor să îl vizualizeze.
• Un nou strat se poate adăuga prin metoda addTab(String title, Icon icon, Component comp), unde primul argument specifică textul etichetei, al doilea argument este opțional și specifică un icon, iar ultimul specifică componenta grafică care va fi afișată în urma selectării stratului.

• definește o etichetă care permite afișarea unor informații care nu pot fi selectate, precum text sau imagine;
• rolul unei etichete este acela de a oferi informații despre alte componente grafice aflate în container;
• textul sau imaginea unei etichete poate fi specificată prin argumentul constructorului sau poate fi specificată prin apelul metodelor void setText (String text), respectiv void setIcon(Icon icon);
• pentru formatarea textului unei etichete se poate utiliza și cod HTML.

1. text simplu pe o singură linie: componenta grafică de tip JTextField permite editarea unui text simplu, afișat pe o singură linie, componenta de tip JPasswordField este utilizată pentru introducerea unei parole (fiecare caracter din text va fi înlocuit printr-un caracter, de exemplu caracterul '*'), iar componentade tip JFormattedTextField permite introducerea unui text care respectă un anumit format, fiind foarte utilă pentru citirea unor date numerice, calendaristice etc. (pentru utilizarea eficientă a textului formatat se pot utiliza clase utilitare dedicate, precum NumberFormatter, DateFormatter, MaskFormatter etc.).
2. text simplu pe mai multe linii (arii de text): componenta grafică de tip JTextArea permite editarea unui text simplu, care poate fi afișat pe mai multe linii. Uzual, o componentă grafică de acest tip trebuie inclusă într-un container JScrollPane, pentru a permite navigarea pe verticală și orizontală dacă textul nu se încadrează în suprafața alocată ariei de text. Atributele textului (font, culoarea și dimensiunea fontului etc.) se pot aplica doar pentru întreg textul cuprins în aria de text, neputând fi specificate doar pentru o anumită porțiune a textului.
3. text stil îmbogățit pe mai multe linii: clasa EditorPane modelează o componentă grafică care permite afișarea și editarea unui text care poate avea multiple stiluri. De asemenea, zona de text poate să includă și imagini sau alte componente grafice. Implicit, următoarele tipuri de texte sunt recunoscute: text/plain, text/html și text/rtf. Clasa JTextPane, care extinde clasa EditorPane, modelează o componentă grafică care permite afișarea și editarea unui text cu facilități multiple, precum utilizarea paragrafelor, a stilurilor multiple etc.

• Pentru obiecte de tipul unor clase derivate din clasa JTextComponent extragerea unui text se realizează prin apelul metodei getText, respectiv editarea sa prin apelul metodei setText, mai puțin pentru editoarele de text formatat, pentru care extragerea informației se realizează prin apelul metoda getValue, respectiv editarea prin apelul metodei setValue;
• În plus, toate obiectele provenite din JTextComponent oferă suport pentru operații complexe, precum undo/redo, tratarea evenimentelor generate de cursor etc. Practic, orice obiect derivat din clasa JTextComponent este format din următoarele module: modelul Document care gestionează starea unei componente grafice de tip text, o reprezentare (view) care este responsabilă cu modalitatea de afișare a textului și un controller (editor kit) care permite scrierea și citirea textului, fiind responsabil cu definirea acțiunilor necesare editării;
• Informații detaliate despre toate componentele grafice care pot fi utilizate pentru editarea unui text se găsesc în pagina https://docs.oracle.com/javase/tutorial/uiswing/components/text.html

• este o componentă care, prin apăsare, lansează un eveniment care trebuie tratat de către programator;
• un buton poate conține un text sau o imagine care pot fi specificate prin argumentul constructorului;
• dacă un buton conține o imagine, atunci, opțional, acestuia i se pot asocia imagini diferite pentru stările sale (normal, selectat, apăsat, cursorul mouse-ului se află deasupra suprafeței butonului și dezactivat), utilizând metodee specifice: https://docs.oracle.com/javase/7/docs/api/javax/swing/AbstractButton.html
• un buton poate fi activ sau inactiv. De exemplu, pentru aplicațiile care conțin formulare bazate pe ferestre de dialog este util să se dezactiveze butonul OK până când utilizatorul completează toate câmpurile obligatorii. Pentru a activa sau dezactiva un buton se utilizează metoda void setEnabled(boolean bState), unde bState este true (pentru activare) sau false (pentru dezactivare). Dacă butonul este dezactivat, va fi redesenat într-o nuanță de gri șters.

• are aceeași funcționalitate precum componenta grafică JButton, dar adăugând suplimentar posibilitatea de a simula un comutator cu două stări. Butoanele de tip JToggleButton au o funcționalitate similară tastei Caps Lock, în timp ce butoanele JButton operează într-o manieră similară tastelor alfanumerice;
• clasa JToggleButton furnizează un mecanism press-and-hold, fiind astfel utile pentru interfețe grafice care necesită operații modale;
• mai multe butoane JToggleButton pot fi grupate, utilizând clasa ButtonGroup, astfel încât, la un moment dat, un singur buton din grup să fie apăsat.

• clasa JCheckBox, care extinde clasa JToggleButton, implementează un control standard de selecție a unei opțiuni;
• un check box are două stări care pot fi setate de către utilizator cu ajutorul mouse-ului sau utilizând metoda void setSelected(Boolean b);
• de obicei, componentele de tip JCheckBox sunt "grupate" folosind un chenar pentru a indica utilizatorului faptul că poate să selecteze oricâte opțiuni dintre cele prezentate, inclusiv niciuna (http://www.java2s.com/Code/Java/Swing-JFC/RadiobuttonComboBox.htm).

• clasa JRadioButton reprezintă un alt un control standard de selecție a unei opțiuni, utilizat, de obicei, doar în cadrul unui grup de butoane (o instanță a clasei ButtonGroup) astfel încât opțiunile respective să se excludă reciproc (utilizatorul va putea selecta, la un moment dat, o singură opțiune).

• permite structurarea clară a unor opțiuni sau informații, cum ar fi, de exemplu, o listă de mesaje, o listă de contacte, lista melodiilor preferate etc.;
• în plus, o opțiune din listă (item) poate să interacționeze cu utilizatorul, astfel încât selectarea sa să conducă la declanșarea unui anumit eveniment;
• o listă nu are implicit bara de defilare verticală, ci ea trebuie așezată într-un container JScrollPane;
• conținutul unei liste se poate defini cu ajutorul unei structuri de date sau cu ajutorul unui model care este o instanță a clasei ListModel;
• dacă unei liste nu i se asociază niciun model, implicit se va utiliza modelul DefaultListModel, care memorează lista sub forma unui vector de obiecte de tip Object.
• suplimentar, există și clasa AbstratcListModel, care permite utilizatorului să aleagă tipul structurii de date pe care o va utiliza pentru elementele listei;
• pentru a extrage opțiunea selectată de către utilizator se apelează metoda getSelectedValue(), iar pentru a selecta o anumită opțiune se folosește metoda setSelectedIndex(int index).

• permite o vizualizare a datelor într-un format tabelar, fără însă ca acestea să fie stocate de componentă;
• deoarece componenta grafică JTable nu are atașată implicit și o bară de defilare, de obicei, un tabel se afișează într-un container de tip JScrollPane;
• conținutul unei tabel se poate stabili cu ajutorul unor structuri de date, atât pentru a defini coloanele, cât și pentru a introduce informațiile de pe linii, sau cu ajutorul unui model care este o instanță de tip TableModel.

• dacă un tabel este definit prin structuri de date, toate celulele tabelului vor fi editabile, valorile din toate celulele vor fi implicit considerate ca fiind de tip String și toate coloanele tabelului vor avea aceeași lățime, altfel, manipularea datelor dintr-un tabel trebuie realizată prin intermediul unui model;
• dacă nu se utilizează un model explicit, atunci este creată automat o instanță a clasei DefaultTableModel;
• pentru a modifica proprietățile implicite ale unui tabel se poate defini o clasă care extinde clasa DefaultTableModel.

• Modul de aranjare a componentelor pe o suprafața de afișare nu este o caracteristică a containerului.
• Fiecare obiect de tip Container are asociat un obiect care are rolul de a așeza componentele grafice pe suprafața sa, respectiv gestionarul său de poziționare.
• Toate clasele care instanțiază obiecte pentru gestionarea poziționării implementează interfața LayoutManager.
• La instanțierea unui container se creează implicit un gestionar de poziționare asociat acestuia.
• De exemplu, pentru o fereastră JFrame gestionarul implicit este de tip BorderLayout, în timp ce pentru un panel este de tip FlowLayout.
• În raport cu estetica interfeței, gestionarii de poziționare atașați implicit unui container pot fi modificați prin apelul metodei setLayout a clasei Container, utilizând o referință spre o instanță a unei clase care implementează interfața LayoutManager.
• Dacă parametrul metodei este null, atunci nu se va utiliza niciun gestionar de poziționare.

• FlowLayout
• BorderLayout
• GridLayout
• CardLayout
• GridBagLayout
• SpringLayout
• GroupLayout

• Acest gestionar poziționează componentele pe suprafața de afișare una după alta pe linii, în limita spațiului disponibil.
• Dacă o componentă nu mai încape pe linia curentă, atunci acesta se afișează pe următoarea linie, de sus în jos.
• Adăugarea componentelor se realizează de la a stânga la dreapta pe linie, iar alinierea obiectelor în cadrul unei linii poate la stânga, la dreapta sau în centru.
• Implicit, componentele sunt centrate pe fiecare linie, iar distanța implicită dintre componente este de 5 pixeli pe verticală și 5 pe orizontală.

• Gestionarul împarte suprafața de afișare în cinci zone, corespunzătoare celor patru puncte cardinale și centrului.
• Dimensiunea unei componente grafice plasată într-una din cele 5 zone este calculată astfel încât acesta să ocupe întreg spațiul de afișare oferit de zona respectivă.
• Pentru a adăuga mai multe componente grafice într-o singură zona este necesar ca în prealabil acestea să fie așezate pe un panou care ulterior va fi afișat în zona respectivă.
• Pentru a specifica în care dintre cele 5 zone se plasează o componentă grafică, metoda add primește ca parametru o constantă specifică zonei respective: NORTH, SOUTH, EAST, WEST sau CENTER.

• Gestionarul GridLayout organizează containerul sub forma unui tabel, astfel încât fiecare componentă grafică să fie plastă în celulele tabelului de la stânga la dreapta, începând cu primul rând.
• Celulele tabelului au dimensiuni egale, iar o componentă grafică poate ocupa doar o singură celulă.
• Numărul de linii și cel de coloane pot fi specificate prin constructor sau se pot stabili prin metodele setRows, respectiv setCols.

• Asemănător gestionarului GridLayout, gestionarul GridBagLayout organizează containerul sub forma unui tabel, însă este mult mai flexibil.
• Practic, numărul de linii și de coloane sunt determinate automat, în funcție de componentele grafice plasate pe suprafața containerului.
• În plus, dimensiunile celulelor pot fi diferite, cu restricția ca pe o linie celulele să aibă aceeași înălțime, iar pe coloane celulele să aibă aceeași lățime.
• De asemenea, o componentă grafică poate să ocupe mai multe celule adiacente.
• Înainte de a adăuga o componentă pe suprafața containerului se specifică un set de constrângeri prin care se stabilește modalitatea de plasare.
• Aceste constrângeri sunt specificate prin intermediul unui obiect de tip GridBagConstraints, care poate fi refolosit pentru mai multe componente care au aceleași constrângeri de afișare.

• Mai sus, noțiunile prezentate au descris modalitatea de a defini, din punct de vedere estetic, o interfața grafică Swing.
• Aceasta este, în esență, separată de partea de implementare a evenimentelor generate în urma interacțiunii cu utilizatorul.
• Un eveniment este produs de o acțiune a utilizatorului asupra unei componente grafice și reprezintă mecanismul prin care utilizatorul poate comunica efectiv cu aplicația.
• Apăsarea unui buton, modificarea textului dintr-un câmp text, selecția unei opțiuni dintr-o listă, închiderea sau redimensionarea unei ferestre, etc. reprezintă evenimente care trebuie să fie tratate printr-un cod Java asociat.
• În acest sens, Swing a fost conceput utilizând o arhitectură bazată pe evenimente (event-driven architecture), care antrenează mai multe concepte, precum interfețe de tip “ascultător”, clase adaptor etc.

• În momentul în care utilizatorul interacționează cu o componentă grafică, se va genera un eveniment modelat printr-un obiect de tip Event, derivat din clasa java.util.EventObject.
• Prin intermediul acestuia, programatorul manipulează evenimentul, putând determina sursa sa.
• De asemenea, obiectul încapsulează informații despre tipul evenimentului, starea sursei înainte și după acțiune.
• Sursa evenimentului se poate determina prin apelul metodei Object getSource(), iar informațiile despre tipul evenimentului se obțin prin apelul metodei public String toString().
• Clasele prin care se modelează un eveniment sunt grupate în pachetele java.awt.event și java.swing.event.

1. ActionEvent – eveniment lansat în urma efectuării unei acțiuni asupra unei componente (de exemplu, apăsarea unui buton sau apăsarea unei taste);
2. MouseEvent – eveniment lansat în urma efectuării unei acțiuni utilizând mouse-ul (de exemplu, efectuarea unui click asupra unei componente);
3. WindowEvent – eveniment lansat în momentul în care o fereastră își schimbă starea (de exemplu, afișarea sau închiderea unei ferestre, redimensionarea sa etc.);
4. ItemEvent – eveniment lansat în urma realizării unei operații de selecție (de exemplu, selectarea/deselectarea unui element dintr-o listă sau selectarea/deselectarea unui check-box);
5. AdjustementEvent – eveniment lansat în urma modificării valorii asociate unei componente care implementează interfața Adjustable (de exemplu, o bară de defilare de tip JScrollBar).

• Pentru a tratata un eveniment generat în urma interacțiunii cu o componentă grafică, programatorul trebuie să asocieze obiectului de tip eveniment un obiect de tip ascultător (listener), în cadrul căruia să implementeze răspunsul aplicației la apariția evenimentului respectiv.
• Un ascultător este o implementare a unei interfețe TipListener din pachetele java.awt.event și java.swing.event.

• O interfață corespunzătoare unui ascultător poate să conțină un număr mare de metode abstracte care trebuie să fie implementate de către clasa care tratează evenimentul respectiv.
• De exemplu, pentru o aplicație se dorește doar tratarea unui eveniment generat de închiderea ferestrei, prin implementarea metodei abstracte windowClosing din interfața WindowListener, însă această interfața conține alte 6 metode abstracte care ar trebui să fie implementate.
• Pentru a evita implementarea inutilă a tuturor metodelor abstracte dintr-o interfață, au fost definite clasele adaptor în care sunt implementate minimal toate metodele abstracte dintr-o interfață.
• Practic, se extinde clasa adaptor corespunzătoare interfeței și se redefinesc doar metodele necesare în aplicația respectivă.
• De exemplu, pentru interfața WindowListener este definită clasa adaptor WindowAdapter.