Programiranje grafičnih aplikacij ( Java Swing )

1. Programiranje grafičnih aplikacij(Java Swing)

2. Grafični uporabniški vmesniki • Do sredi 1980 let večina računalnikov tekstovno usmerjenih • Za sisteme UNIX so uvedli X-Windows • Microsoft uvedel svojo verzijo oken (1,2,3,95,98,NT,2000, XP, Vista,7,8 ..) • Programi z GUI so dogodkovno vodeni (event driven): reagirajo na akcije uporabnika • Delo s takimi programi je bolj intuitivno

3. Java in GUI • Tekstovni način komunikacije uporabnika s programom: • Z uporabo System.out za izpis • Z uporabo tipkovnice za vnos. • Spoznali bomo interakcijo s pomočjo grafičnega uporabniškega vmesnika GUI • Java nudi v ta namen dva sistema: • Abstract Window Toolkit: paket java.awt • Swing: paket javax.swing

4. Strukturna razlika • Grafično podprti programi (GUI) se pomembno razlikujejo od tekstovno (console based) usmerjenih • Pri konzolnih programih programer aplikacije določa, kdaj bi prišlo do vnosa podatkov ali izpisa rezultatov. Govorimo o postopkovnem programiranju (procedural programming) • Pri grafično podprtih (GUI) lahko uporabnik izvaja akcije kadarkoli. Nemogoče je predvideti zaporedje akcij: • Pritisk ,a gumb, • Zapiranje okna • Pomiki z miško,... • Taki programi so dogodkovno vodeni (event driven)

5. Niso interaktivni Linearno izvajanje Navadni tekstovni programi program: main() { koda; koda; koda; koda; koda; koda; koda; koda; koda; koda; koda; koda; }

6. Vhodni ukazi uporabnika nelinearno izvajanje nepredvidljiv vrstni red Veliko prostega časa Interaktivni tekstovni programi program: main() { deklaracija podatkov; iniciacijska koda; zanka { preberiukaz; switch(ukaz) { ukaz1: koda; ukaz2: ukaz; … } } }

7. Vhodni ukazi uporabnika Nelinearno izvajanje Nepredvidljiv vrstni red Veliko prostega časa Na dogodke odzivne procedure (callbacks) Tipičen program z GUI GUI program: main() { Deklaracija podatkov; iniciacijska koda; tvorba GUI; registracija odzivnih proc; glavna zanka dogodkov; } Callback1() //gumb1 klik { koda; } Callback2() { koda; } … GUI = Graphical User Interface

8. Razstavimo GUI kalkulatorja v komponente Demo

9. Dva standarda: AWT in Swing • AWT = abstract windows toolkit • AWT = earliest version of Java GUI • Novejši standard: Swing • Razlike v poimenovanju komponent: • Frame (AWT) in JFrame (Swing) • Večina komponent Swing je peresno lahkih • Uporabljali bomo Swing

10. GUI kalkulatorja in komponente Swing

11. Preprost primer • import javax.swing.*; public class Primer1 { public static void main(String[] args) {//Tvori in vzpostavi okno JFrame frame = new JFrame("Ime okna"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //Dodaj besedilo (label) JLabel label = new JLabel("Pozdravljen svet"); frame.getContentPane().add(label); //Prikaz okna. frame.pack(); frame.setVisible(true); }} DEMO

12. Kaj moramo vedeti o grafičnih aplikacijah • Katere komponente imamo na voljo? • Kako jih razporedimo po zaslonu? • Katere dogodke na komponentah obravnavamo? • Kako lahko programe internacionaliziramo (uporaba resursov)

13. AWT komponente vsebovalniki primitivne

14. Swing komponente Vsak “widget” jevsebovalnik

15. API za posamezne komponente GUI API = Application Programming Interface: Kako lahko kaj uporabljamo Java: GUI komponenta = razred, zanjo je značilno: • Lastnosti • Metode • Dogodki JButton Spreminjamo lahko lastnosti, uporabljamo metode, se odzivamo na dogodke

16. Uporaba GUI komponente • Jo tvorimo • instanca objekta: b = new JButton(“Klikni name”); • Jo konfiguriramo z uporabo: • Lastnosti b.text = “Klikni name”; [temu se v javi izogibamo] • Metod: b.setText(“Klikni name”); • Ji dodamo otroke (če je to vsebovalnik) • Jo dodamo v vsebovalnik (parent container) • panel.add(b); • Ji prisluhnemo • Poslušalci dogodkov (Events Listeners) Vrstni red je važen JButton

17. Tvorba komponente in njen položaj JFrame frame = new JFrame("Jaz sem okno"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setBounds(20,30,300,100); frame.setLayout(null); JButton butt=new JButton("Klikni name"); frame.getContentPane().add(butt); butt.setBounds(20, 20, 200,20); frame.setVisible(true); DEMO

18. Kaj lahko delamo s komponentami? Component addMouseListener()addKeyListener()...getBounds()getComponentAt()...void paint(Graphics) AWT Swing Container Button add(Component)remove(Component)setLayoutManager()... JComponent setBorder()setUI()... Canvas Label ... Panel Box Window Swing Components ...

19. Kaj lahko delamo z okni in okvirji? Container Window add(Component)remove(Component)setLayoutManager()... addWindowListener()pack()show()... MenuContainer Frame Dialog JWindow setIconImage()setMenuBar()setTitle()... setModal()setTitle()... AWT Swing JFrame JDialog contentPane contentPane getContentPane()setJMenuBar()... getContentPane()...

20. Anatomija grafične aplikacije (Swing) Grafični uporabniški vmesnik (GUI) Notranja zgradba JFrame JFrame JPanel Vsebovalniki JPanel JButton JButton JLabel JLabel

21. Tvorba od spodaj navzgor • Tvorimo: • Frame • Panel • Komponente • Poslušalce • Dodajamo (Add): (od spodaj navzgor) • poslušalce komponentam • komponente v pano • pano v okvir (frame) Listener JButton JLabel JPanel JFrame

22. Preprost primer (TextField) • Vnos ene vrstice teksta • Uporaba metod getText, setText • Uporaba ActionListener, proženega s tipko Enter Demo

23. Preprost primer (TextField) JLabel label; JTextField textField; //*********************************************************** private static void tvoriGui() { Primer4 app=new Primer4(); JFrame frame = new JFrame("Ime aplikacije"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setBounds(40,40,300,200); frame.setLayout(null); JPanel myPanel = new JPanel(); app.textField = new JTextField("Natipkaj nekaj",20); myPanel.add(app.textField); app.textField.addActionListener(app); app.label = new JLabel("Rezultat"); myPanel.add(app.label); frame.setContentPane(myPanel); frame.setVisible(true); } //****************************************** public void actionPerformed(ActionEvent e) { label.setText(textField.getText()); } Demo

24. Preprost primer 2 import javax.swing.*;public class PrimerGUI { public static void main(String[] args) { JFrame frame = new JFrame("Okno s komponentami"); frame.setSize(350, 200); frame.setVisible(true); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JButton gumbOK = new JButton("OK"); JLabel oznakaName = new JLabel("Vpisi ime: "); JTextField textName = new JTextField("prostor za ime"); JCheckBox izberiBold = new JCheckBox("Poudarjeno"); JRadioButton izberiRdece = new JRadioButton("Rdece"); JComboBox izbiraBarve = new JComboBox(new String[]{"Rdece", "Modro", "Zeleno"}); // Komponente dodamo v okvir frame.getContentPane().add(gumbOK); frame.getContentPane().add(oznakaName); frame.getContentPane().add(textName); frame.getContentPane().add(izberiBold); frame.getContentPane().add(izbiraBarve);// nastavimo lokacijo im velikost komponente oznakaName.setBounds( 10,10,80,30); textName.setBounds(90,10,100,30); izberiBold.setBounds(200,60,100,30); izbiraBarve.setBounds(200,10,120,30); gumbOK.setBounds(250,120,70,30) }} Demo

25. Apleti JApplet • JApplet je kot JFrame • Že vsebuje pano • Do panoja dostopamo z : JApplet.getContentPane( ) import javax.swing.*; class hello extends JApplet { public void init(){ JButton b = new JButton(“Klikni name”); getContentPane().add(b); } } contentPane JButton

26. Metode apleta • Kliče jih brkljalnik: • init( ) - inicializacija • start( ) - obnovi obdelavo (na primer animacijo) • destroy( ) - čiščenje • paint( ) - obnovi sliko (‘expose’ event)

27. Layout Manager Razporejanje lokacije komponent v vsebovalniku FlowLayout GridLayout null programer nastavlja x,y,w,h od leve na desno, od zgoraj navzdol GridBagLayout BorderLayout CardLayout n c Ena naenkrat JButton w e s

28. Flow Layout public class Flow extends Applet { public Flow () { setLayout(new FlowLayout()); add(new JButton("Java")); add(new JButton("C++")); add(new JButton("Perl")); add(new JButton("Ada")); add(new JButton("Smalltalk")); add(new JButton("Eiffel")); } } width=400 height=50 width=100 height=120 Od leve proti desni Od zgoraj navzdol

29. Grid Layout public class Grid extends Applet { public void init () { int row = 0; int col = 0; String att = getParameter("row"); if (att != null) row = Integer.parseInt(att); att = getParameter("col"); if (att != null) col = Integer.parseInt(att); if (row == 0 && col == 0) { row = 3; col = 2; } setLayout(new GridLayout(row, col)); add(new JButton("Java")); add(new JButton("C++")); add(new JButton("Perl")); add(new JButton("Ada")); add(new JButton("Smalltalk")); add(new JButton("Eiffel")); } } 3x2 grid 0x1 grid 1x0 grid

30. Border Layout public class Border extends Applet { public Border () { setLayout(new BorderLayout()); add(new JButton("North"), BorderLayout.NORTH); add(new JButton("South"), BorderLayout.SOUTH); add(new JButton("East"), BorderLayout.EAST); add(new JButton("West"), BorderLayout.WEST); add(new JButton("Center"), BorderLayout.CENTER); } }

31. Program je lahko hkrati aplikacija in aplet Ukazna vrstica Brkljalnik import javax.swing.*; import java.awt.*;public class HelloApplet extends Japplet { public void init(){ // put my mainPanel in the Applet mainPanel p = new mainPanel(); getContentPane().add(p); }public static void main(String[] args){ // create Frame and put my mainPanel in it JFrame f = new JFrame(“Ime okna"); mainPanel p = new mainPanel(); f.setContentPane(p); f.show(); }}// my main GUI is in here:class mainPanel extends JPanel { mainPanel(){ setLayout(new FlowLayout()); JButton b = new JButton(“Klikni name"); add(b); }} JFrame JApplet ali contentPane JPanel JButton HTML Java

32. Poslušalci bodo prejemali dogodke, če jih registriramo na komponento Komponenti posredujemo naslov poslušalca JButton1.addMouseListener(new myMouseListener) Od komponente sprejemajo dogodke Komponenta bo klicala odzivne procedure objekta myMouseListener.mouseClicked(event) Dogodki in poslušalci klik JButton1 1. addMouseListener( ) 2. mouseClicked( ) myMouse-Listener

33. Primer button.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { numClicks++; label.setText(labelPrefix + numClicks); }});

34. Tipi poslušalcev dogodkov

35. Obravnava dogodkov • Event • Način, kako GUI komponente komunicirajo s preostankom aplikacije • Je implementiran kot eden od dogodkovnih razredov (n.pr. ActionEvent) • Event source • Komponente, ki generirajo dogodke • primeri: buttons, check boxes, combo boxes, etc. • Event listener (poslušalec dogodkov) • Objekt, ki prejme in obravnava dogodke • Mora implementirati ustrezen vmesnik poslušalca • Mora z registracijo obvestiti vir dogodkov, da ga ti zanimajo • Lahko posluša različne izvore in različne tipe dogodkov

36. Primer (del kode) // Tvorba gumba JButton button = new JButton(“Potrdi”); // Registracija poslušalca akcij button.addActionListener(new ButtonActionListener()); // Poslušalec akcij class ButtonActionListener implements ActionListener { public void actionPerformed(ActionEvent e) { // Obravnava dogodka e … System.out.println(“Klik na gumb Potrdi”); } }

37. Preprečiti hočemo, da bi okno preveč pomanjšali: uporabimo ComponentEvent in ComponentListener Primer: sprememba velikosti komponente public class WinJava extends JFrame { public WinJava(String name) { super(name); // ….setResizable(true); addComponentListener(Util.createComponentListener(400, 300)); } public static void main(String[] args) { WinJava frame = new WinJava("Primer okna"); frame.setVisible(true); // … } }

38. Nadaljevanje primera public class Util { public static ComponentListener createComponentListener(int width, int height) { return new MyComponentListener(width, height); }} private static class MyComponentListener extends ComponentAdapter { private int width, height; public MyComponentListener(int w, int h) { width = w; height = h; } public void componentResized(ComponentEvent e) { Component c = e.getComponent(); if (c.getWidth() < width || c.getHeight() < height) { c.setSize(Math.max(width, c.getWidth()), Math.max(height, c.getHeight())); } } } // MyComponentListener } Java

39. Dogodki in poslušalci Event Listener Adapter ActionEvent ActionListener ComponentEvent ComponentListener ComponentAdapter FocusEvent FocusListener FocusAdapter KeyEvent KeyListener KeyAdapter MouseEvent MouseListener MouseAdapter MouseMotionListenerMouseMotionAdapter WindowEvent WindowListener WindowAdapter ItemEvent ItemListener TextEvent TextListener …

40. Metode dogodkov Component EventListener listenerList addMouseListener(listener)removeMouseListener(listener)processMouseEvent(mouseEvent)... MouseListener MouseMotionListener mouseClicked(mouseEvent)mousePressed(mouseEvent)mouseReleased(mouseEvent)mouseEntered(mouseEvent)mouseExited(mouseEvent) KeyListener ActionListener mouseEvent( MOUSE_PRESSED, 123, 456) MouseEvent getX()getY()getClickCount()

41. Še drugi dogodki AWTEvent EventObject getID() getSource() ComponentEvent ActionEvent Drugi AWT dogodki many notification event types getComponent() InputEvent FocusEvent WindowEvent getModifiers()getWhen() ContainerEvent PaintEvent MouseEvent KeyEvent getX()getY()getClickCount()

42. Vhodni ukazi uporabnika Nelinearno izvajanje Nepredvidljiv vrstni red Veliko prostega časa Na dogodke odzivne procedure (callbacks) Tipičen program z GUI GUI program: main() { Deklaracija podatkov; iniciacijska koda; tvorba GUI; registracija odzivnih proc; glavna zanka dogodkov; } Callback1() //gumb1 klik { koda; } Callback2() { koda; } … GUI = Graphical User Interface

43. Dogodkovno voden koncept programiranja • Pišemo le kodo, ki pomeni odziv na dogodke • Takim funkcijam pravimo "odzivne funkcije" (callbacks) včasih pa “message handlers” • V javi imamo za to poslušalce (listeners) • ActionListener opazuje dogodke v zvezi z miško • WindowListener opazuje dogodke v zvezi z okni

44. Zanka dogodkov avtomatično v ločeni niti Program v Java Swing Javanski program: Class{ main() { deklaracija podatkov; iniciacijska koda; tvorba objektov GUI; registracija poslušalcev; } listener1() { narediTo; } listener2() { narediOno } …

45. Poslušalci dedujejo od osnovnih javanskih razredov poslušalcev ActionListener, KeyListener, MouseListener, MouseMotionListener, WindowListener, … Abstract base classes: xxxxListener Stubbed base classes: xxxxAdapter MouseListener: mouseClicked(), mouseEntered(), mouseExited(), mousePressed(), mouseReleased() API poslušalcev

46. button1 = new JButton(“Klikni name”); myListener = new myListenClass; button1.addMouseListener(myListener); // extending a class (“subclassing”): class myListenClass extendsMouseAdapter { public void mouseClicked(MouseEvent e){ // button clicked, do stuff here } } // OR “implementing an interface”: class myListenClass implements MouseListener { public void mouseClicked(MouseEvent e){ // button clicked, do stuff here } … } Koda osnoven abstraktni razred(metode, brez kode)

47. mouseClicked(MouseEvent e) MouseEvent: getX( ), getY( ), getClickCount( ), getSource( ), … Za vsak tip poslušalca: Component.addxxxxListener( ) xxxxListener abstract base class xxxxAdapter stubbed base class xxxxEvent Dogodkovni objekti

48. Poglejmo še enkrat kalkulator (Kalkulator s poljem gumbov) HTML Java Java