7/16/2019 Interfața grafică2

http://slidepdf.com/reader/full/interfaa-grafica2 1/16

Interfa a graficăț (în engleză: Graphical User Interface sau GUI, pronun at în douăț

silabe: /'gu.i/, v. AFI) este numit sistemul de afi aj grafic-vizual pe un ecran, situat func ionalș ț

între utilizator i dispozitive electronice cum ar fiș computere, dispozitive personale de tip hand-held (playere MP3, playere media portabile, dispozitive de jucat), aparate electrocasnice i uneleș

echipamente de birou. Pentru a prezenta toate informa ile i ac iunile disponibile, un GUI oferăț ș ț

 pictograme i indicatori vizuali, în contrast cu interfe ele bazate pe text, care oferă doar nume deș țcomenzi (care trebuie tastate) sau naviga ia text.ț

Termenul GUI este legat istoric de ecranele bidimensionale cu rezolu ie mare, capabilă să afi ezeț ș  informa ii de toate genurile, în tradi ia cercetărilor în domeniul ț ț informaticii de la Xerox PaloAlto Research Centre (Centrul de Cercetare Palo Alto al companiei Xerox), prescurtat "PARC".Înainte de asta termenul GUI a fost aplicabil unor tipuri de interfe e de înaltă rezolu ie diferite,ț ț

specifice unui domeniu anume, cum ar fi jocurile video, sau care nu sunt limitate la ecranele plate, ci se pot juca i pe ecrane volumetrice (ș afi oare3Dș ).

Laborator 9.

 

1. Pachetele AWT si Swing

Aplicatiile realizate pana acum au avut interfata in mod text. Astfel, ecranulera privit ca o matrice de caractere.

Pentru simplificarea utilizarii aplicatiilor complexe se prefera crearea unei

interfete in mod grafic. In acest caz ecranul este considerat o matrice depuncte (pixeli) de diverse culori (de obicei fiecare pixel are asociate trei

componente de culoare R-red, G-green, B-blue). O astfel de interfata poartadenumirea de "GUI" – Graphical User Interface.

O interfata GUI esteformata din ferestre (portiuni dreptungiulare pe ecran).

Ferestrele unei aplicatii contin "widgets" (elemente grafice de control) carepermit interactiunea cu utilizatorul.

Interactiunea cu utilizatorul se realizeaza prin mouse si tastatura.

O interfata grafica se creaza de obicei cu sprijinul sitemului de operare(printr-o componenta numita server grafic).

Limbajul Java pune la dispozitia programatorului doua biblioteci pentru

realizarea unei interfete grafice: java.awt si javax.swing.

Un program demonstrativ pentru pachetul java.swing se gaseste la adresa:

7/16/2019 Interfața grafică2

http://slidepdf.com/reader/full/interfaa-grafica2 2/16

http://java.sun.com/products/plugin/1.2/demos/SwingSet/SwingSetApplet.html

Pachetele awt si swing contin clase pentru gestionarea completa a unei

interfete.

In figura sunt expuse clasele corespondente cu cele din awt :

 

In plus fata de pachetul standard awt, pachetul swing adauga noi clase care

permit imbunatatirea interfetei realizate. In figura urmatoare suntprezentate clasele noi introduse de catre swing:

7/16/2019 Interfața grafică2

http://slidepdf.com/reader/full/interfaa-grafica2 3/16

 

2. Ferestre

Oricarei aplicatii grafice ii corespunde o fereastra principala (de tip FRAME) siuna sau mai multe ferestre aditionale.

In swing exista trei clase pentru gestionarea ferestrelor: Jframe, JWindow si

JDialog.

Clasa JFrame permite crearea unei ferestre de aplicatie. Fereastra are o barade titlu, o margine, butoane de minimizare, maximizare si inchidere

(butoane "system").

Clasa JWindow permite crearea unei ferestre fara bara de titlu, meniu,

butoane sistem etc.

Clasa JDialog permite crearea de ferestre de dialog. Ferestrele de dialog suntdependente de ferestrele parinte de tip Frame. O fereastra de dialog poate fi

7/16/2019 Interfața grafică2

http://slidepdf.com/reader/full/interfaa-grafica2 4/16

modala (blocheaza aplicatia pana la inchiderea dialogului) sau nemodala (nublocheaza).

Pentru a crea ferestre de afisare a unor mesaje se poate utiliza direct o

functie statica, fara a mai crea explicit un obiect tip dialog:

 JOptionPane.showMessageDialog(frame, “Mesajul meu.");

Pentru ferestre de dialog standard exista clase specializate: JFileChooser si

JColorChooser. Acestea pot fi utilizate pentru a selecta un fisier sau a alege oculoare.

Crearea unei ferestre principale:

 public static void main(String args[]) { JFrame win = new JFrame(“Titlul ferestrei");

win.setSize(200, 200);win.show();

 }

Pentru a accesa continutul unei ferestre se va folosi functia

getContentPanel():

Container c = win.getContentPane();

Pentru a obtine inchiderea automata a aplicatiei atunci cand se apasa

butonul de Close, se va utiliza metoda:

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

Pentru a organiza elementele intr-o fereastra se vor utiliza panouri. Swing

pune la dispozitie doua tipuri de panouri: JPanel (panou simplu) siJScrollPane (panou cu derulare).

Activitate:

Compilati si rulati programul urmator (fisierul WinAplic.java).

import javax.swing.*;import java.awt.*;

class WinAplic {

public static void main(String args[]) {

7/16/2019 Interfața grafică2

http://slidepdf.com/reader/full/interfaa-grafica2 5/16

JFrame win = new JFrame("Aplicatia mea");

win.getContentPane().add( new JLabel("Utilizare swing!"));

win.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);win.pack();win.show();

}}

3. Elemente de control (widgets)

3.1 Butoane

Butoanele sunt elemente de control care, prin apasare, pot genera o actiune.

Despre cum se asociaza o actiune cu un buton se va vorbi in subcapitolulintitulat "gestionarea evenimentelor".

Butoanele deriva din clasa JButton. In costructor primesc textul afisat pe

buton. Prin procedura setMnemonic se pot asocia taste de apelare rapida(shortcut).

Pentru a adauga un cuvant de comanda asociat butonului (cuvant ce va fi

testat pentru efectuarea actiunii asociate) se foloseste metodaaddActionCommand().

 JButton buton = new JButton("I'm a Swing button!");

buton.setMnemonic('i');buton.addActionCommand("butonulSwing");

 JPanel panouButon = new JPanel(); panouButon.add(buton);

3.2 CheckBox 

Butoanele de marcaj sunt elemente de control care retin o anumita stare. In

plus fata de butoanele simple, pentru ele se pot apela metodele

setSelected(boolen marcat) pentru a stabili marcajul prin program,

respectiv getSelected() pentru a afla starea marcajului.

7/16/2019 Interfața grafică2

http://slidepdf.com/reader/full/interfaa-grafica2 6/16

cb1 = new JCheckBox(“Optiune1");cb1.setMnemonic(KeyEvent.VK_1);

cb1.setSelected(true); JPanel checkPanel = new JPanel();

checkPanel.setLayout(new GridLayout(0, 1));

checkPanel.add(cb1);

3.3 RadioButton

Butoanele radio sunt elemente de control care retin o anumita stare, la fel cu

cele de marcaj. Deosebirea principala consta in faptul ca toate butoaneleradio incluse in acelasi grup logic sunt mutual exclusive. Pentru gestionarea

grupurilor de butoane radio se va folosi clasa ButtonGroup, respectivmetoda add() care adauga un buton la grup.

Si pentru butoanele radio se pot apela metodele setSelected(boolen

marcat) pentru a stabili marcajul prin program, respectiv getSelected()pentru a afla starea marcajului.

 // Create the radio buttons.

JRadioButton birdButton = new JRadioButton(“Pasare”);birdButton.setMnemonic(KeyEvent.VK_B);

birdButton.setActionCommand(“Pasare”);

birdButton.setSelected(true);JRadioButton catButton = new JRadioButton(“Pisica”);

catButton.setMnemonic(KeyEvent.VK_C);

catButton.setActionCommand(“Pisica”);…

 // Group the radio buttons.ButtonGroup group = new ButtonGroup();

group.add(birdButton);group.add(catButton);

… // Put the radio buttons in a column in a panel

JPanel radioPanel = new JPanel();

radioPanel.setLayout(new GridLayout(0, 1));radioPanel.add(birdButton);

radioPanel.add(catButton);

Activitate:

Compilati si rulati programul urmator (fisierul Widgets.java).

import javax.swing.*;

7/16/2019 Interfața grafică2

http://slidepdf.com/reader/full/interfaa-grafica2 7/16

import java.awt.*;import java.awt.event.*;

class Butoane extends JPanel {

public Butoane() {JButton b1 = new JButton("ButonA");b1.setMnemonic(KeyEvent.VK_A);JButton b2 = new JButton("ButonB");b2.setMnemonic(KeyEvent.VK_B);this.setLayout(new GridLayout(1,0));add(b1);add(b2);

}}

class CheckBoxuri extends JPanel {

public CheckBoxuri() {JCheckBox cb1 = new JCheckBox("Optiune1");cb1.setMnemonic(KeyEvent.VK_1);cb1.setSelected(true);JCheckBox cb2 = new JCheckBox("Optiune2");cb2.setMnemonic(KeyEvent.VK_2);cb2.setSelected(true);JCheckBox cb3 = new JCheckBox("Optiune3");

cb3.setMnemonic(KeyEvent.VK_3);cb3.setSelected(true);this.setLayout(new GridLayout(0,1));add(cb1);add(cb2);add(cb3);

}}

class ButoaneRadio extends JPanel {

public ButoaneRadio() {// Creare radio butoaneJRadioButton butonAlb = new JRadioButton("Alb");butonAlb.setMnemonic(KeyEvent.VK_L);butonAlb.setActionCommand("Alb");butonAlb.setSelected(true);JRadioButton butonRosu = new JRadioButton("Rosu");butonRosu.setMnemonic(KeyEvent.VK_R);

7/16/2019 Interfața grafică2

http://slidepdf.com/reader/full/interfaa-grafica2 8/16

butonRosu.setActionCommand("Rosu");JRadioButton butonVerde = new JRadioButton("Verde");butonVerde.setMnemonic(KeyEvent.VK_V);butonVerde.setActionCommand("Verde");

// Gruparea butoanelor ButtonGroup group = new ButtonGroup();group.add(butonAlb);group.add(butonRosu);group.add(butonVerde);// Adaugarea butoanelor this.setLayout(new GridLayout(0,1));add(butonAlb);add(butonRosu);add(butonVerde);

}

}

 public class Widgets extends JFrame {

public static void main(String args[]) {Widgets app = new Widgets();

Butoane panouButoane = new Butoane();CheckBoxuri panouCheckBoxuri = new CheckBoxuri();ButoaneRadio panouButoaneRadio = new ButoaneRadio();

JPanel panou = new JPanel();panou.setLayout(new GridLayout(0,1));panou.add(panouButoane);panou.add(panouCheckBoxuri);panou.add(panouButoaneRadio);panou.setBorder(

BorderFactory.createEmptyBorder(20, 20, 20, 20));app.getContentPane().add(panou);app.pack();app.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);app.show();

}}

3.4 ListBox

7/16/2019 Interfața grafică2

http://slidepdf.com/reader/full/interfaa-grafica2 9/16

ListBox-urile afiseaza liste de optiuni. Ele se compun dintr-un element carese ocupa de vizualizare (derivat din clasa JList), respectiv dintr-un element

care se ocupa cu gestionarea continutului (derivat din ListModel).

Interfata ListModel pune la dispozitie o metoda addElement() care permite

adaugarea unei noi optiuni in lista.

Constructorul clasei JList primeste un obiect de tip ListModel pe care il va

afisa pe ecran. Pentru a avea la dispozitie bare de derulare asociate listei,aceasta va trebui inclusa intr-un element de tip JScrollPane (un panou

derulant).

Aditional listelor simple se pot defini si liste cu derulare (de tip ComboBox).

Acestea afiseaza in mod obisnuit o singura optiune din lista iar pentru a

accesa restul optinulor lista trebuie derulata de la un buton special. Listelederulante nu trebuie adaugate intr-un JScrollPane.

ListModel listModel = new DefaultListModel();

listModel.addElement(“Linie1");…

 JList list = new JList(listModel);list.setSelectionMode(ListSelectionModel.SINGLE_SELECTION);

list.setSelectedIndex(0);

 JScrollPane listScrollPane = new JScrollPane(list);--------

String[] culori = { "Alb", "Negru", "Rosu", "Verde", "Albastru" };

 JComboBox listaCulori = new JComboBox(culori);listaCulori.setSelectedIndex(1); // selecteaza elementul 2 (Negru)

listaCulori.setEditable(true);

Activitate:

Compilati si rulati programul urmator (fisierul Liste.java).

import javax.swing.*;import java.awt.*;import java.awt.event.*;

class ListBox extends JScrollPane {public ListBox() {

DefaultListModel listModel = new DefaultListModel();listModel.addElement("Linie1");listModel.addElement("Linie2");listModel.addElement("Linie3");

7/16/2019 Interfața grafică2

http://slidepdf.com/reader/full/interfaa-grafica2 10/16

JList list = new JList(listModel);list.setVisibleRowCount(3);list.setSelectionMode(ListSelectionModel.SINGLE_SELECTION);list.setSelectedIndex(0);

setViewportView(list);}

}

class ComboBox extends JPanel {public ComboBox() {

String[] culori = { "Alb", "Negru", "Rosu", "Verde", "Albastru" };JComboBox listaCulori = new JComboBox(culori);listaCulori.setSelectedIndex(1); // selecteaza elementul 2 (Negru)listaCulori.setEditable(true);

add(listaCulori);}

}

 public class Liste extends JFrame {

public static void main(String args[]) {Liste app = new Liste();

ListBox panouLista = new ListBox();ComboBox panouCombo = new ComboBox();

JPanel panou = new JPanel();panou.setLayout(new GridLayout(0,1));panou.add(panouLista);panou.add(panouCombo);panou.setBorder(BorderFactory.createEmptyBorder(20, 20, 20, 20));app.getContentPane().add(panou);app.pack();app.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);app.show();

}}

3.4 Elemente pentru editare text

7/16/2019 Interfața grafică2

http://slidepdf.com/reader/full/interfaa-grafica2 11/16

Pentru a putea afisa, respectiv edita o linie de text se pot utiliza elemente detip JTextField. Acestea permit afisarea si editarea unei linii de text, avand

metode precum setText() si getText().

Pentru a edita mai multe linii de text se poate folosi clasa JTextPane.

4. Gestionarea evenimentelor (listenere)

Aplicatiile GUI sunt aplicatii orientate pe evenimente. In gestionarea

evenimentelor intervin obiecte de tip Listener si Event.

Pentru a trata evenimentele ce apar intr-o aplicatie trebuie:

1.Implementata o clasa derivata dintr-o clasa Listener:

 public class MyClass implements XXXListener { 

public void eveniment(XXXEvent e) { ...//tratarea evenimentului... } } 

2. Inregistrata o instanta a clasei precedente pe post de listner

pentru o componenta derivata din JComponent:

oComponenta.addActionListener(instanceOfMyClass);

Exemple de tipuri de listnere sunt prezentate in figura alaturata:

 

7/16/2019 Interfața grafică2

http://slidepdf.com/reader/full/interfaa-grafica2 12/16

Pentru a trata evenimentul de apasare pe un buton se va utiliza clasaActionListener.

 /** Listens to the button. */ 

class ListenerPtButon implements ActionListener { 

private int numClicks = 0;public void actionPerformed(ActionEvent e) { 

numClicks++;

((JButton)e.getSource()).setText(“Apasat: “ + numClicks);

 } }

 JButton butonulMeu = new JButton(“Apasa: 0”);butonulMeu. addActionListener(new ListenerPtButon()); 

Activitate:

Compilati si rulati programul urmator (fisierul ButtonListener.java).

import javax.swing.*;import javax.swing.border.*;import java.awt.*;import java.awt.event.*;

class ListenerPtButoane implements ActionListener {private int numClicks = 0;

private int indiceCuloare = 0;final private Color culori[] = {Color.LIGHT_GRAY, Color.RED,Color.ORANGE, Color.PINK };

public void actionPerformed(ActionEvent e) {JButton butonApasat = (JButton)e.getSource();if(butonApasat.getActionCommand().equals("contor")) {

numClicks++;butonApasat.setText("Apasat: " + numClicks);

}

if(butonApasat.getActionCommand().equals("culoare")) {indiceCuloare++;if(indiceCuloare == culori.length)

indiceCuloare = 0;butonApasat.setBackground(culori[indiceCuloare]);

}if(butonApasat.getActionCommand().equals("exit")) {

System.exit(0);

7/16/2019 Interfața grafică2

http://slidepdf.com/reader/full/interfaa-grafica2 13/16

}}

}

 public class ButtonListener extends JFrame {

public static void main(String args[]) {ButtonListener app = new ButtonListener();

JButton butonulNumara = new JButton("Apasa: 0");butonulNumara.setActionCommand("contor");butonulNumara.setAlignmentX(Component.CENTER_ALIGNMENT);JButton butonulCulori = new JButton("Schimba culoarea");butonulCulori.setActionCommand("culoare");butonulCulori.setAlignmentX(Component.CENTER_ALIGNMENT);

JButton butonulExit = new JButton("Exit");butonulExit.setActionCommand("exit");butonulExit.setAlignmentX(Component.CENTER_ALIGNMENT);

butonulNumara.addActionListener(new ListenerPtButoane()); butonulCulori.addActionListener(new ListenerPtButoane()); butonulExit.addActionListener(new ListenerPtButoane());

JPanel panou = new JPanel();panou.setLayout(new BoxLayout(panou, BoxLayout.Y_AXIS));panou.add(butonulNumara);

panou.add(Box.createRigidArea(new Dimension(0, 10)));panou.add(butonulCulori);panou.add(Box.createRigidArea(new Dimension(0, 10)));panou.add(butonulExit); panou.setBorder(

BorderFactory.createEmptyBorder(20, 20, 20, 20));app.getContentPane().add(panou);app.pack();app.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);app.show();

}

}

Pentru a raspunde marcarii butoanelor de marcaj sau de tip radio se va

apela la clasele ItemListener si ActionListener:

 /** Listens to the check boxes. */

class CheckBoxListener implements ItemListener {

7/16/2019 Interfața grafică2

http://slidepdf.com/reader/full/interfaa-grafica2 14/16

public void itemStateChanged(ItemEvent e) {int index = 0;

Object source = e.getItemSelectable();

if (source == cb1) {

// s-a actionat asupra primului buton} else if (source == cb2) {

// s-a actionat asupra celui de al doilea buton

} else …

if (e.getStateChange() == ItemEvent.DESELECTED)// butoul (oarecare) s-a deselectat

}}

 /** Listens to the radio buttons. */

class RadioListener implements ActionListener {public void actionPerformed(ActionEvent e) {

System.out.println(“Selectat:”+e.getActionCommand());}

}

Activitate:

Compilati si rulati programul urmator (fisierul Liste1.java).

import javax.swing.*;

import javax.swing.event.*;import java.awt.*;import java.awt.event.*;

class ListBox1 extends JScrollPane {private JList list;

public JList getList() {return list;

}

public ListBox1() {DefaultListModel listModel = new DefaultListModel();listModel.addElement("Linie1");listModel.addElement("Linie2");listModel.addElement("Linie3");list = new JList(listModel);list.setVisibleRowCount(3);list.setSelectionMode(ListSelectionModel.SINGLE_SELECTION);

7/16/2019 Interfața grafică2

http://slidepdf.com/reader/full/interfaa-grafica2 15/16

list.setSelectedIndex(0);setViewportView(list);

}}

class SelectieLista implements ListSelectionListener {private JTextArea consola;ListModel listModel;

public SelectieLista(JTextArea output, ListModel model) {super();consola = output;listModel = model;

}

public void valueChanged(ListSelectionEvent e) { boolean isAdjusting = e.getValueIsAdjusting();ListSelectionModel lsm = (ListSelectionModel)e.getSource();if(!isAdjusting) {

int primIndex = e.getFirstIndex();int ultimIndex = e.getLastIndex();for (int i = primIndex; i<=ultimIndex; i++)

if(lsm.isSelectedIndex(i))consola.append("\nSelectat: "+listModel.getElementAt(i));

}

}}

 public class Liste1 extends JFrame {

public static void main(String args[]) {Liste1 app = new Liste1();

ListBox1 panouLista = new ListBox1();JTextArea consola = new JTextArea();ListSelectionModel listSelectionModel = panouLista.getList().getSelectionModel();

listSelectionModel.addListSelectionListener(new SelectieLista(consola, panouLista.getList().getModel()));

JPanel panou = new JPanel();panou.setLayout(new GridLayout(0,1));panou.add(panouLista);panou.add(new JScrollPane(consola));panou.setBorder(

7/16/2019 Interfața grafică2

http://slidepdf.com/reader/full/interfaa-grafica2 16/16

BorderFactory.createEmptyBorder(20, 20, 20, 20));app.getContentPane().add(panou);app.pack();app.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

app.show();consola.append("Ready...");

}}

5. Teme

Tema1. Rulati exemplele prezentate si studiati in Java API metodele puse la

dispozitie de clasele: JFrame, JPanel, JScrollPane, JTextField, JButton,JCheckBox, JRadioButton, JList, JComboBox, JTextPane.

Tema2. Creati o fereastra care afiseaza intr-o lista nume de animale

domestice si apoi, la selectie le scrie numele selectate intr-o consola de tipJTextPane.

Tema3 (optionala). Creati o fereastra care are un text afisat intr-un JLabel si

trei butoane ("Text1", "Text2', "Text3"). La apasarea unuia dintre cele treibutoane se va schimba corespunzator textul afisat de JLabel si de asemenea

culoarea acetuia.