Grafiska användargränssnitt i Java

Transkript

1 Grafiska användargränssnitt i Java En genomgång av de viktigaste begreppen

2 Alternativ 2 Från början fanns AWT, Abstract Window Toolkit Till stor del ersatt av Swing: Mer omfattande, mer flexibelt Passar bra för våra behov Illustrerar begrepp som är vanliga i GUI-programmering Nytt alternativ: JavaFX Helt annan struktur (scenes, stages, nodes)

3 Del 1: Att använda Swing: Fönster, knappar, menyer, Layout (placering) Händelsehantering någon tryckte en knapp" Genomgående exempel: "Ordbehandlare" Del 2: Att rita på skärmen, i en egen komponent

4

5 Att öppna ett fönster 5 Fönster: JFrame public class WordProcessor01 { private JFrame frame; uiswing/components/frame.html Ordbehandlaren behöver komma ihåg sitt fönster public WordProcessor01() { this.frame = new JFrame("Word Processor 1.0"); frame.setsize(640, 300); Sätt fönsterstorleken, frame.setvisible(true); se till att fönstret visas på skärmen public static void main(string[] args) { new WordProcessor01(); Skapa ett objekt, glöm bort det, och avsluta? Konstruktorn för JFrame "registrerar" fönstret det glöms inte bort Så länge det finns ett öppet fönster, avslutas inte Java!

6 Komponenter och behållare 6 En JFrame är: uiswing/components/frame.html En komponent Något grafiskt som visas på skärmen En behållare (container) Något som kan innehålla andra komponenter Fönstertitel Menyrad Kan läggas till vid behov Innehåll: Content pane Hela fönstrets innehåll. utom titelrad / menyrad

7

8 Komponenter Istället för att "rita": Säg till vilka komponenter som ska finnas Menyer, knappar, textfält, statusrad Swing sköter om utseende (med mera) 8 Alla komponenter:

9 Knappar i Java 9 uiswing/components/button.html uiswing/components/buttongroup.html Grunden för Swing-komponenter Gemensam implementation: Knappar Radioknappar: Bara en aktiv åt gången i varje ButtonGroup Har två lägen, av/på Standardknapp Checkbox, av/på

10 Textkomponenter 10 uiswing/components/text.html Editera text med flera stilar: HTML, Abstrakt, gemensam funktionalitet En enda rad text Textarea med flera rader Speciell formattering för datum, valuta, Lösenord syns inte när de skrivs in

11 Ordbehandlare med komponenter 11 public class WordProcessor02 { private JFrame frame; uiswing/components/label.html public WordProcessor02() { this.frame = new JFrame("Word Processor 1.0"); frame.add(new JButton("B")); frame.add(new JButton("I")); frame.add(new JButton("U")); frame.add(new JButton("Left")); frame.add(new JButton("Center")); frame.add(new JButton("Right")); frame.add(new JButton("Print")); frame.add(new JTextPane()); frame.add(new JLabel("Status: OK")); // JLabel visar text, kan inte editeras frame.pack(); frame.setvisible(true); public static void main(string[] args) { new WordProcessor02(); Lägger till flera komponenter till behållaren fönstret Inget syns på skärmen än! NU är det dags att visa fönstret och dess innehåll

12 Hålla reda på komponenter 12 public class WordProcessor02b { private JFrame frame; private JTextPane text = new JTextPane(); private JLabel status = new JLabel("Status: OK"); public WordProcessor02b() { this.frame = new JFrame("Word Processor 1.0"); frame.setlayout(new FlowLayout()); frame.add(new JButton("B")); frame.add(new JButton("I")); frame.add(new JButton("U")); frame.add(new JButton("Left")); frame.add(new JButton("Center")); frame.add(new JButton("Right")); frame.add(text); frame.add(status); frame.pack(); frame.setvisible(true); public static void main(string[] args) { new WordProcessor02b(); uiswing/components/label.html Behåll pekare till det du vill kunna komma åt igen senare (plocka ut texten för att spara den, )

13 Resultat 13 Resultat: Rätt komponenter Fel layout Liten textarea

14

15 Layout 1: Önskemål Hur får vi önskad layout (positioner och storlek)? 15 JButton JButton JButton JButton JTextPane JButton JFrame Content Pane JLabel

16 Layout 2: Absoluta koordinater? 16 Absoluta koordinater? component.setsize(int width, int height); component.setlocation(int x, int y); // Från behållarens övre vänstra hörn Fördelar / nackdelar: (+) Enkelt att förstå ( ) Inget stöd för att ändra fönsterstorlek ( ) Hur hanterar man större text? ( ) Översättningar till andra språk, där ord kan ta mer plats? Tools / Инструменти URL / nettadresse

17 Layout 3: Önskad storlek 17 Preferred Size uiswing/layout/index.html Komponenter kan tala om sin önskade storlek (preferred size) JButton: Storlek på texten i inställd fontstorlek + lite marginaler Ingen text inskriven preferred size är minimal! Varje behållare har en layouthanterare (layout manager) Frågar subkomponenter hur stora de vill vara Applicerar layoutregler (här: "Allt i en rad") Summerar, beräknar behållarens önskade storlek

18 Layout 3: Innehållshierarkin 18 Anropa pack() i ett fönster (frame) Så frågar den sin layouthanterare hur mycket plats den behöver använd den storleken! Fönster Menyrad ContentPane Meny: File Meny: Edit Meny: Help Knapp1 Knapp2 Textfält Statusrad Val1 Val2 Val3

19 Layout 4: Annan storlek än önskad 19 När en komponent får annan storlek än den begärda: Layouthanteraren har regler för hur utrymmet ska användas Extra utrymme på höjden: Ska användas till textarean Extra utrymme på bredden: Menyrad: Extra plats mellan Edit och Help Knapprad: Allt vänsterjusterat Textfält, statusrad: Använder hela utrymmet Just nu:

20 MigLayout 1: Introduktion 20 MigLayout rekommenderas starkt! Nu: De enklaste funktionerna Se Baserad på rutnät

21 MigLayout 2: Rutor Komponenter använder en eller flera rutor 21 B I U Left Cent er Right Print Textarea Statusrad

22 MigLayout 3: Anpassning Kolumnbredder och radbredder anpassas till komponenterna Ange vilka celler som ska använda "överbliven plats" 22 B I U Left Center Right Print Textarea Statusrad

23 MigLayout 4: Hur får cellerna växa? 23 public WordProcessor03() { this.frame = new JFrame("Word Processor 1.0"); frame.setlayout(new MigLayout( "", // Allt, globalt "[][][][][][][grow]", // Varje kolumn (7 st) sista kolumnen får växa "[][grow][]" // Varje rad (3 st) mittersta får växa )); B I U Left Center Right Print Textarea Statusrad

24 MigLayout 5: Ordbehandlaren 24 public WordProcessor04() { this.frame = new JFrame("Word Processor 1.0"); frame.setlayout(new MigLayout("", "[][][][][][][grow]", "[][grow][]")); frame.add(new JButton("B")); frame.add(new JButton("I")); frame.add(new JButton("U"), frame.add(new JButton("Left")); frame.add(new JButton("Center")); frame.add(new JButton("Right"), frame.add(new JButton("Print"), frame.add(text, frame.add(status, "gapright unrelated"); "gapright unrelated"); "wrap"); "span 7, grow, wrap"); "wrap"); Separation Avsluta "gruppen": Mellanrum till höger, lagom för "orelaterad component" Wrap: Radbyte Span, grow: Storlek Span: 7 rutor frame.pack(); frame.setvisible(true); Grow: Låt textrutan växa sig större än nödvändigt

25 Scrollning Textfältet måste kunna scrollas Inte "inbyggt" i JTextPane lägg den i en JScrollPane public WordProcessor04() { frame.add(text, "span 7, grow, wrap"); 25 public WordProcessor05() { frame.add(new JScrollPane(text), "span 7, grow, wrap"); Fönster Knappar JScrollPane Statusrad uiswing/components/scrollpane.html Textfält

26

27 Menyraden Menyer hanteras (lite) annorlunda Läggs inte till direkt i fönstret, utan i dess menyrad 27 Fönstertitel Menyrad Innehåll: Content pane

28 Uppdelning Vi lägger menyhanteringen i en egen metod 28 public WordProcessor06() { this.frame = new JFrame("Word Processor 1.0"); frame.setlayout(new MigLayout("", "[][][][][][][grow]", "[][grow][]")); createmenus(); frame.add(.); frame.pack(); frame.setvisible(true); private void createmenus() { public static void main(string[] args) { new WordProcessor06();

29 Att skapa menyer 29 private void createmenus() { final JMenuBar bar = new JMenuBar(); final JMenu file = new JMenu("File"); file.add(new JMenuItem("Open", 'O')); file.add(new JMenuItem("Save As", 'A')); file.addseparator(); file.add(new JMenuItem("Print")); bar.add(file); final JMenu edit = new JMenu("Edit"); edit.add(new JMenuItem("Cut")); edit.add(new JMenuItem("Copy")); edit.add(new JMenuItem("Paste")); bar.add(edit); // Understruket O // Separator final JMenu help = new JMenu("Help"); help.add(new JMenuItem("About WordProcessor 1.0")); bar.add(box.createhorizontalglue()); bar.add(help); frame.setjmenubar(bar); uiswing/components/menus.html, separator.html Separering Skapar en osynlig komponent, 0 pixel hög, godtyckligt bred

30

31 Händelsehantering: Principer Hur vet vi när någon tryckte på en knapp? TDDD73: Vänta på ett klick Måste veta när det kan hända Måste hantera allt själva koordinater, 31

32 Händelsehantering: Principer (2) I många grafiska gränssnitt: Säg till systemet vad det ska göra när en knapp trycks Fortsätt själv med något annat När knappen trycks hanteras detta asynkront i en annan tråd 32 Som om du har en assistent som hjälper till Du säger: "Om knappen trycks, gör detta" Assistenten håller koll på inmatning Ser att knappen trycktes in, gör vad du bad om

33 Lyssnare 1: Gränssnitt och implementation Hur representerar vi vad assistenten ska göra? Vi ger assistenten ett objekt, en lyssnare När något händer anropar assistenten en metod i lyssnaren 33 Det finns redan många gränssnitt för lyssnare exempel: public interface MouseListener extends EventListener { Vi får själva implementera gränssnitten public class ClickPrinter implements MouseListener { public void mouseclicked(mouseevent e) { System.out.println("Hey! Someone clicked!"); public void mouseclicked(mouseevent e); public void mousepressed(mouseevent e);

34 Lyssnare 2: Registrering Varje komponent har en egen lista på lyssnare // Existerande klass i Swing (något förenklat ) public class Component { private List<MouseListener> mouselisteners; public void addmouselistener(mouselistener ml) { mouselisteners.add(ml); Vi kan lägga till vår egen lyssnare till en komponent // Vår egen klass public class MyGUI { private JFrame frame = ; public MyGUI() { MouseListener ml = new ClickPrinter(); frame.addmouselistener(ml); // Vårt jobb är klart assistenten tar hand om händelserna 34

35 Lyssnare 3: När något händer När någon klickar med musen: Java får "rå" input från operativsystemet I en händelsehanteringstråd i bakgrunden ("assistenten") Skapar ett objekt som beskriver händelsen: MouseEvent, KeyEvent, 35 public class MouseEvent extends InputEvent { int x; // Koordinater int y; int clickcount; // Hur många gånger klickade de? int button; // Med vilken musknapp?

36 Lyssnare 4: När något händer När någon klickar med musen: Java får "rå" input från operativsystemet I en händelsehanteringstråd i bakgrunden ("assistenten") Skapar ett objekt som beskriver händelsen: MouseEvent, KeyEvent, 36 Skickar händelsen till den relevanta komponenten Komponenten informerar (anropare en metod i) varje lyssnare for (MouseListener ml : this.mouselisteners) { ml.mouseclicked(event); Inkluderar vår registrerade ClickPrinter public class ClickPrinter implements MouseListener { public void mouseclicked(mouseevent e) { System.out.println("Hey! Someone clicked!");

37 Lyssnare 5: Nästlad klass Bekvämlighet: Kan lägga en klass inuti en annan, nästlat Färre filer att hålla reda på Lyssnarklassen behöver inte "synas" utåt public class MyGUI { public MyGUI() { MouseListener ml = new ClickPrinter(); frame.addmouselistener(ml); // Vårt jobb är klart assistenten tar hand om händelserna 37 private class ClickPrinter implements MouseListener { public void mouseclicked(mouseevent e) { System.out.println("Hey! Someone clicked!");

38 ActionListener 1: Introduktion Vanlig och enkel lyssnare: ActionListener Anger vad som ska göras när någon vill "utföra en handling" 38 Menyval Knapptryck Dubbelklick i lista package java.awt.event; import java.util.eventlistener; public interface ActionListener extends EventListener { /** Invoked when an action occurs. */ public void actionperformed(actionevent e);

39 ActionListener 2: Exempel 39 public class WordProcessor07 { private JTextPane text = new JTextPane(); public WordProcessor07() { final JButton bold = new JButton("B"); bold.addactionlistener(new BoldListener(text)) frame.add(bold); Skapa knapp Ge den en lyssnare Lägg till den i fönstret Menyer hanteras på samma sätt private class BoldListener implements ActionListener { private final JTextPane text; public BoldListener(final JTextPane text) { this.text = text; Håll reda på textkomponenten public void actionperformed(final ActionEvent e) { text.getstyleddocument().setcharacterattributes(...); Om/när vi anropas: Manipulera textkomponenten

40 ActionListener 3: Förenklat mellansteg 40 public class WordProcessor08 { private JTextPane text = new JTextPane(); public WordProcessor08() { final JButton bold = new JButton("B"); bold.addactionlistener(new BoldListener()) frame.add(bold); private class BoldListener implements ActionListener public void actionperformed(final ActionEvent e) { text.getstyleddocument().setcharacterattributes(...); Inre klasser kan komma åt fält i yttre klasser

41 ActionListener 4: Metodreferens 41 public interface ActionListener extends EventListener { public void actionperformed(actionevent e); 1. ActionListener har en enda metod public class WordProcessor10 { public WordProcessor10() { final JButton bold = new JButton("B"); bold.addactionlistener(this::makebold); frame.add(bold); 3. Ange en referens till den metoden! Kompilatorn ser till att det skapas ett objekt av ActionListener-typ, som anropar makebold() private void makebold(actionevent e) { text.getstyleddocument().setcharacterattributes(...); 2. Implementera en metod med samma parametrar

42 Några viktiga lyssnarklasser 42 ActionListener Knapp tryckt, menyval gjort, AdjustmentListener Slider eller scrollbar flyttad ItemListener Markering i lista MouseListener Musknappar MouseMotionListener Förflyttning av muspekare KeyListener Tangent tryckt / släppt, tecken skrivet Skickas till komponenten som har tangentbordsfokus Komplicerat ofta är key bindings bättre

43 Tangentbordsbindningar KeyStroke: En kombination av tangenter (X, Ctrl-Shift-Z, ) 43 Varje komponents InputMap gör om KeyStrokes till namn på handlingar Namnet på en handling ("flyttaåtvänster") Varje komponents ActionMap mappar namnet till ett handlingsobject Action: Kod att utföra

44 Tangentbordsbindningar: Exempel 44 public class WordProcessor20 { private JFrame frame; public WordProcessor20() { this.frame = new JFrame("Word Processor 1.0"); JComponent pane = frame.getrootpane(); Kan ta getrootpane() eller en annan komponent som ligger i fönstret final InputMap in = pane.getinputmap(jcomponent.when_in_focused_window); in.put(keystroke.getkeystroke("alt F4"), "quit"); final ActionMap act = pane.getactionmap(); act.put("quit", new QuitAction()); private class QuitAction extends AbstractAction public void actionperformed(final ActionEvent e) { System.exit(0); När fokus är i samma fönster som komponenten, och man trycker Alt F4: "quit" När man får "quit": Utför denna handling Här definieras själva handlingen (ungefär som en lyssnare)

45 Tangentbordsbindningar: Länkar Mer information:

46

47 Att stänga ett fönster För att stänga ett fönster: Anropa frame.dispose() 47 För att bestämma vad stäng-knappen gör: Använd myframe.setdefaultcloseoperation(x), där x är WindowConstants.HIDE_ON_CLOSE (default, gömmer bara fönstret) WindowConstants.DO_NOTHING_ON_CLOSE WindowConstants.DISPOSE_ON_CLOSE WindowConstants.EXIT_ON_CLOSE

48 WindowListener För att lägga till en "är du säker?"-fråga: Använd DO_NOTHING_ON_CLOSE Lägg till en WindowListener som gör det verkliga jobbet 48 package java.awt.event; public interface WindowListener extends EventListener { public void windowopened(windowevent e); public void windowclosing(windowevent e); public void windowclosed(windowevent e); public void windowiconified(windowevent e); public void windowdeiconified(windowevent e); public void windowactivated(windowevent e); public void windowdeactivated(windowevent e); Anropas när stängknappen trycks

49 WindowAdapter För bekvämlighet: Utöka istället WindowAdapter Tomma dummy-implementationer av alla metoder 49 package java.awt.event; public class WindowAdapter implements WindowListener { public void windowopened(windowevent e) { public void windowclosing(windowevent e) { public void windowclosed(windowevent e) { public void windowiconified(windowevent e) { public void windowdeiconified(windowevent e) { public void windowactivated(windowevent e) { public void windowdeactivated(windowevent e) {

50 Exempel: Dialogruta 50 public class AskBeforeClosing { private JFrame frame; public AskBeforeClosing() { this.frame = new JFrame("Try to close me"); frame.setdefaultcloseoperation(windowconstants.do_nothing_on_close); frame.addwindowlistener(new CloseButtonHandler()); private class CloseButtonHandler extends WindowAdapter { public void windowclosing(final WindowEvent e) { int answer = JOptionPane.showConfirmDialog (frame, "Do you really want to quit?", "Quit?", JOptionPane.YES_NO_OPTION); if (answer == JOptionPane.YES_OPTION) { System.exit(0); // Avsluta hela Java-processen

51 Mer om dialogrutor Standardiserade dialoger: JOptionPane Enkel fråga: String input = JOptionPane.showInputDialog("Please input a value"); 51 Kan ange ett fönster som äger dialogen Blockerar inmatning till fönstret JOptionPane.showMessageDialog(frame, "Eggs aren't supposed to be green."); Kan ge fler parametrar JOptionPane.showMessageDialog(frame, "Eggs are not supposed to be green.", "Inane warning", JOptionPane.WARNING_MESSAGE); Se