1 / 48

Programiranje grafičnih aplikacij ( Java Swing )

Programiranje grafičnih aplikacij ( Java Swing ). 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 ..)

ludlow
Download Presentation

Programiranje grafičnih aplikacij ( Java Swing )

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related