F7: Användargränssnitt, interaktivitet och grafik. Carl Nettelblad

Transkript

1 F7: Användargränssnitt, interaktivitet och grafik Carl Nettelblad

2 I dag OU3 Händelsestyrd programmering Användargränssnitt Grafik OU4, OU5

3 Iterera i ett träd Träd passar väldigt bra för rekursion Vi kan vilja gå igenom ett träd iterativt Kanske för att det är del av en större rekursion samecontents ett exempel

4 Stack Rekursion bygger på en stack Anropsstacken Variabelvärden och var i metoden vi står lagras automatiskt i Java Push metodanrop Pop metod returnerar Kasta undantag kan leda till flera pop i följd Anropsstacken visas i felutskriften Men aldrig börja titta mitt i stacken

5 Göra rekursiv algoritm iterativ Skriv egen kod för stacken Styr när vi gör push och pop Kan behöva lagra både parametrar och tillstånd I vårt fall Node och int 0 vänster delträd, 1 höger delträd Antag att vi har en klass TraversalStack med metoder push, pop, getnode, getstate, isempty

6 Tankegång Vi väljer att gå igenom trädet in-order Upplägg: Se om det finns ett Node-objekt på stacken Läs av nod och lägestal Poppa Om status är 0 Lägg tillbaka samma nod med status 1 Lägg in vänster delträd med status 0 Om status är 1 Utför operationen för nyckeln Lägg in höger delträd med status 0

7 Pseudokod void traverse(node start) { Stack s = new Stack(); s.push(start, 0); while (!s.isempty()) { Node now = s.getnode(); int state = s.getstate(); s.pop(); if (now == null) continue;

8 Pseudokod switch (state) { case 0: // First visit to node s.push(node, 1); s.push(node.getleft(), 0); case 1: // Second visit to node System.out.println(node.getKey()); s.push(node.getright(), 0); default: throw new RuntimeException("Invalid state."); } } }

9 Kommentar Nullkontroll när vi läser från stacken Lite ineffektivt Annars hade vi behövt kontrollera null på tre ställen För noden själv i början För vänster delträd i state 0 För höger delträd i state 1 Objektet som ska besökas sist läggs på stacken först Störst nytta med en sådan här lösning om arbetet i state 1 vore mer komplext

10 Sen då? Hur skriver vi om den här till preorder? Postorder? Kan vi stryka state lätt i något fall? Bara Node-objekt på stacken Kan vilja skriva om som metod som ger nästa Node

11 Pseudokod Node getnodeinorder(stack s) { while (!s.isempty()) { Node now = s.getnode(); int state = s.getstate(); s.pop(); if (now == null) continue;

12 switch (state) { case 0: // First visit to node s.push(node, 1); s.push(node.getleft(), 0); case 1: // Second visit to node s.push(node.getright(), 0); return node; default: throw new RuntimeException( ); } } return null; } Pseudokod

13 Händelsestyrd programmering Hur fungerar den numeriska kalkylatorn? En slinga som läser kommandon Anropar metoder för att hantera kommandon Varje kommando hanteras fort Utför arbete, kommer tillbaka till huvudslingan Motsats Ett program som ställer upprepade frågor till användaren i samma metod Ett menysystem där varje meny är en egen metod som ber användaren välja alternativ

14 Händelsestyrda program Många datorprogram är händelsestyrda på det här viset Definition: Händelsestyrd programmering är ett paradigm där programmets flöde bestäms av händelser som användarhandlingar (musklick, knapptryck), sensorutmatning eller meddelanden från andra program/trådar. Händelsestyrd programmering är det dominerande paradigmet i program med grafiska användargränssnitt och andra tillämpningar. (Omskrivet och översatt från )

15 Struktur Vänta på händelse (Börja) hantera händelse Bör gå fort, annars kan senare händelser inte hanteras Komponenten som väntar på händelser generell Färdig i det bibliotek man använder Eller egen men sällan i behov att ändras Händelseslinga/ event loop Kan startas genom ett metodanrop eller indirekt i en konstruktor

16 Grafiska användargränssnitt Jämfört med kalkylatorn är mängder av händelser möjliga i ett grafiskt program, som: Ändra storlek på fönster Flytta på fönster Animera gränssnittet för att visa vad som är markerat och De riktiga funktionerna hos programmet

17 Vårt första program import javax.swing.*; import java.awt.*; import java.awt.event.*; public class WindowApp1 extends JFrame { public WindowApp1() { super("an event driven program"); setresizable(false); getcontentpane().setpreferredsize(new Dimension(400, 400)); setdefaultcloseoperation(jframe.dispose_on_close); pack(); setvisible(true); } } public static void main(string[] args) { WindowApp1 app = new WindowApp1(); }

18 Vad gör koden? Vi ärver från JFrame Representerar ett fönster Konstruktorn gör anpassningar Fönstrets titel Storlek och att den inte får ändras Vad som händer när fönstret stängs Men ingen metod för det Vi tar inte själva hand om den händelsen Att fönstret ska visas Obs! Glöm inte denna!

19 Händelsedrivet Vår main gör ingenting Skapar bara ett objekt Programmet gör inte heller någonting Mäta processoranvändning Men vi har ingen kod för att hantera händelser Lägg till en knapp!

20 Fyra steg Markera att vi kan lyssna på händelser Lägg till knappen Säg att vi vill lyssna på knappens händelser Implementera knappmetoden

21 Lyssna på händelser public class WindowApp2 extends JFrame implements ActionListener { public WindowApp2() { ActionListener är ett interface som ingår Javaramverket för grafiska gränssnitt (awt/swing) En enda metod actionperformed Anropas för alla händelser vi väljer att lyssna på

22 Lägg till knappen och registrera lyssnare setdefaultcloseoperation(jframe.dispose_on_close); JPanel panel = new JPanel(); getcontentpane().add(panel); JButton button = new JButton("Whatever you do, do not push this button!"); panel.add(button); button.addactionlistener(this); pack(); Knappen ligger i en panel Det räcker inte med att skapa knappen Knappen vet inte att den ska ligga i panelen i fönstret Eller vart den ska skicka sina händelser

23 Implementera metoden public void actionperformed(actionevent e) { JOptionPane.showMessageDialog(null, "I told you not to push the button...", "Event captured", JOptionPane.INFORMATION_MESSAGE); } Det här är vår lyssningsmetod. Enkelt i det här fallet, bara en möjlig händelse (som vi vet om). Alltid klokt att kontrollera att det är rätt sorts händelse om flera är möjliga. Jämför functionhelper i OU2, olämpligt att ha ett sistafall på en kedja med if-else som antar att tillståndet är giltigt.

24 Lyssnare/händelsehanterare Lyssnaren är ett objekt som informeras om vissa händelser efter att ha registrerat sig. Ett vanligt designmönster Frikoppling mellan källan till händelsen och mottagaren. ActionListener med metoden actionperformed bara ett exempel på mönstret.

25 Lyssnare och källor Samma källa kan ha flera lyssnare Samma lyssnare kan ha flera källor När metoden anropas måste det framgå Varifrån händelsen kommer Vilken händelse det är Annan information

26 Hitta källan public void actionperformed(actionevent e) { if (e.getsource() == obj1) { // Åtgärd för objekt 1 } else if (e.getsource() == obj2) { // Åtgärd för objekt 2 } else { // throw new RuntimeException här??? } }

27 Timers Hur gör vi om något ska hända hela tiden Ett sätt while-loop Kanske med anrop Thread.sleep Pausar i ett antal ms Stör händelseflödet Händelseinriktat sätt Be om att få timerhändelser!

28 Exempel på timer timer = new Timer(5000, this); timer.start(); Skickar händelser till objektet Spara Timer-objektet i en instansvariabel

29 Om grafiska gränssnitt Fällor Förvirrande layout Lång tid i händelsehanterare Kom ihåg, programmet svarar inte medan händelsen hanteras Användargränssnittskod som även sköter logiken Model view controller Försöka skilja på klasser som beskriver världen, klasser som beskriver användargränssnittet och klasser som utför åtgärder

30 Layout i Swing Man vill inte tala om exakta koordinater för varje del i gränssnittet I stället användas layoutklasser, två exempel: FlowLayout visa komponenterna i den ordning de läggs till GridLayout visa komponenterna i ett fast rutnät

31 Layout GridLayout FlowLayout

32 Välja layout På befintligt objekt (som hela contentpane): Container contentpane = getcontentpane(); contentpane.setlayout(new FlowLayout()); På en ny panel JPanel panel = new JPanel(new GridLayout(2, 2));

33 Grafik på datorer Vad finns på skärmen? Skärmen minns inte Bilden ritas om många gånger per sekund Ett minne i datorn lagrar skärmbilden Som en stor array Men vad händer om man vill ändra något?

34 Kvadraten och cirkeln Vi vill att cirkeln ska röra sig över kvadraten

35 Hur? Tänk två metoder drawcircle(x,y) drawsquare(x,y) Vi vill flytta på cirkeln Många drawcircle?

36 Kvadraten och cirkeln Vi ritar en massa cirklar Men de gamla cirklarna vi ritade finns kvar För att få cirkeln att röra sig måste vi städa upp Rita vitt Rita ut kvadraten igen

37 Alternativet Representera grafik som objekt Objektens jobb att rita upp sig Jämför paddorna i Programmeringsteknik I

38 Två paradigm Omedelbart läge (immediate mode) Kommandon om vad som skall ritas, när det skall ritas Behöver svara på händelse när något behöver ritas upp på nytt Delegerat läge (retained mode) Berätta hur världen ser ut Paddor, paneler i Swing, objekt i en spelvärld Någon annan ser till att det hålls uppritat

39 Koordinatsystem för grafik Matematik Datorgrafik X Y Y X (Ofta) Kanske ett arv från koordinater för text, rad och kolumn Övre vänstra hörnet (0,0)

40 Koordinatsystem för grafik De mest naturliga koordinaterna för datorn är pixlar Heltal Ganska trubbigt, avrundningsfel En del system har olika typer av stöd för subpixelrendering /anti-alias

41 Grafik i kod Det finns olika ramverk för grafik OpenGL, Direct3D, GDI, Canvas, Vi fortsätter använda Java Swing Vi utökar JPanel i en egen klass Ersätter metoden paintcomponent Den ritar upp innehållet när det behövs Om vi gör någon ändring får vi be den rita upp igen manuellt (metod repaint)

42 Exempelklass public class GraphicsExample extends JPanel { public GraphicsExample() { super(); super.setpreferredsize( new Dimension(400, 400)); super.setbackground(color.white); public void paintcomponent(graphics g) { super.paintcomponent(g); //void setcolor(color color) g.setcolor(color.red);

43 Exempelklass //void fillrect( // int x, int y, // int width, int height) g.fillrect(100, 100, 200, 200); g.setcolor(color.black); //void filloval( // int x, int y, // int width, int height) g.filloval(100, 100, 200, 200); //void drawline( // int x1, int y1, int x2, int y2) g.drawline(0, 0, 100, 100); } }

44 Resultat

45 Immediate mode i Swing Uppritning sker mot ett Graphics-objekt Ofta som var på uppritningshändelse Finns också Graphics2D-objekt Titta i koden för paddorna från färska omgångar av Programmeringsteknik I Kommandonas ordning spelar stor roll Sist ritat är det som syns Färginställning med setcolor gäller tills man byter Kan vara svårt att felsöka i debugger Ett halvt uppritat fönster ser inte alltid ut som man tänker sig

46 Sammanfattning, klass för klass JFrame fönster, som ofta också kan implementera ActionListener, lägger till fler delar i fönstret i konstruktorn JPanel allmän yta, ersätt metoden PaintComponent i subklass om man vill rita grafik JLabel statisk etikett (text) JTextField textfält för inmatning JButton klickbar knapp GridLayout strukturera komponenter i rutnät FlowLayout strukturera komponenter i följd Timer källa för timerhändelser

47 OU4 Studsande bollar Skapa först ett fönster och en egen JPanel (med arv). Testa att rita en enda boll. Skapa en egen bollklass som kan flytta på sig, kollidera med kanter, rita upp sig själv. Skapa flera bollar och låt dem vandra med en timer. Lägg till kollisionshantering. Skapa ett separat användargränssnitt för att styra programmet.

48 OU5 Vi gjorde en numerisk kalkylator Tolkade (parsade) och utvärderade uttrycken genom samma rekursiva anrop Returnerade double, uppdaterade variabeldefinitioner i assignment Nu ska vi i stället tolka uttrycken Tolkade uttryck kan sedan utvärderas senare Ger möjlighet till symbolhantering Används i uppgiften för derivering och kvotering (aktivt skjuta upp utvärdering)

49 Exempel Input : 2*(-3-1+6)/ Result: 8.5 Input : log(exp(ans)) Result: 8.5 Input : "(exp(2*x) + x) = y Result: exp(2.0*x)+x Input : y Result: exp(2.0*x)+x Input : ans Result: exp(2.0*x)+x Input : "y Result: y

50 Kvotering I exemplet ovan blev värdet för variabeln y ett uttryck, inte ett tal Markeras med citationstecken " Allt som inte kvoteras utvärderas direkt

51 Derivering Deriveringsoperator med ' Vänsterled som ska deriveras, med avseende på variabeln i högerled Felhantering: Vad händer om högerledet inte är en variabel? Ändrar inte på regeln icke-kvoterade uttryck utvärderas direkt så Input : exp(x*x+1)'x Result: 0.0 Input : "exp(x*x +1)'x Result: 2.0*x*exp(x*x+1.0)

52 Evalueringsoperatorn Om " används för att kvotera, skjuta upp utvärdering Så har vi &, evalueringsoperatorn, för att framtvinga evaluering Input : "(x*x+a*x) = y Result: x*x+a*x Input : 2 = a Result: 2.0 Input : 3 = x Result: 3.0 Input : y Result: x*x+a*x Input : &y Result: 15.0

53 Syntaxdiagram Väldigt snarlika den numeriska kalkylatorn Derivering införd i factor Unär operator (kvotering/evaluering förutom unärt minus) i primary

54 Trädrepresentation I stället för att returnera double ska våra parsingmetoder returnera instanser av Sexpr (symbolic expressions) Sexpr är en abstrakt basklass

55 Trädrepresentation Varje del av ett uttryck måste representeras som en Sexpr eller ett träd av flera Sexpr Exempel: blir två konstanter som är vänster och höger delträd till en additionsoperationer Parenteser har inga egna klasser, de styr bara trädstrukturen

56 Klasshierarki Tre huvudtyper av Sexpr Atom löv i trädet, konstanter och tal Unary har ett underträd, unära operatorer och funktioner Binary vänster och höger delträd för vanliga binära operatorer (+ - * / = ')

57 Utgångspunkt Utgå från kodskelett för uppgiften Alla dotterklasser finns nämnda i PDF-filen för uppgiften Utnyttja arv Många av lövklasserna blir rätt korta när basklasserna är rätt gjorda och hjälpklassen Symbolic Varje klass har en metod eval för evaluering och en metod diff för derivering Symbolic gör jobbet

58 Exempel: sinus I Sin: public Sexpr eval(map<string,sexpr> map){ return Symbolic.sin(operand.eval(map)); } public Sexpr diff(sexpr x){ return Symbolic.mul(operand.diff(x), new Cos(operand)); } I Symbolic: public static Sexpr sin(sexpr arg){ if (arg.isconstant()) return new Constant(Math.sin(arg.getValue())); else return new Sin(arg); } Mönster: Räkna ut direkt OM det är en konstant, skapa annars bara symbolisk representation.

59 Förenkling och parenteser Evaluering av x + x om x har ett värde bör bli ett tal, inte ett uttryck Evaluering av "(x * x)'x bör bli 2.0*x Nödvändigt att förenkla uttryck Ett träd för (a + b) * c får inte komma att representeras som a + b * c Nödvändigt att sätta in parenteser på rätt ställen Hellre för många än för få

60 Tänk på Undvik duplicering av kod Följ kodstandard Läslighet, dokumentation Parsern ska alltid bara parsa Hantera syntaxfel, skapa trädet Evaluering ska vara generell Anropa basklassernas metoder, inte instanceof, inte typomvandlingar Titta gärna igen på exemplen här och i uppgiften på kvotering, evaluering och derivering Lätt att missa vad de faktiskt ska innebära