729G75 Programmering och algoritmiskt tänkande. Grafiska gränssnitt och händelsedriven programmering

Relevanta dokument
729G06 Programmering och logik. Grafiska gränssnitt och eventdriven programmering

729G06 Programmering och logik. Grafiska gränssnitt och eventdriven programmering del 2

729G75 Programmering och algoritmiskt tänkande. Grafiska gränssnitt och händelsedriven programmering

Programmering grundkurs

Starta ett fönster... Hur håller tkinter reda på musklick? Olika sätt att organisera fönsterinnehåll. Och för att placera våra widgets

Skolan för Datavetenskap och kommunikation PROGRAMMERINGSTEKNIK FÖRELÄSNING 15

Idag: Centrerad utskrift. Granskning. DD1311 Programmeringsteknik med PBL. Granskning Felhantering GUI. Föreläsning 15.

Skolan för Datavetenskap och kommunikation. Programmeringsteknik. Föreläsning 16

Mer till P-uppgiften: Dokumentation. Nyheter. Algoritm för sökning. Mer hjälp. DD1311 Programmeringsteknik med PBL

Windows Forms Winstrand Development

Grafiska användargränssnitt i Java

Grafiska användargränssnitt i Java

Objektorienterad programmering Föreläsning 15. Grafiska användargränssnitt (GUI Graphical User Interface)

v. 42 Python HT17 En introduktion Oscar Bergqvist

v. 43 Python HT17 En introduktion Oscar Bergqvist

Grafiska användargränssnitt i Java

Grafik i DrRacket AV TOMMY KARLSSON

Kort om klasser och objekt En introduktion till GUI-programmering i Java

electiaprotect GSM SEQURITY SYSTEM Vesta EZ Home Application SMART SECURITY SYSTEMS! SVENSKA ios Android

Mer grafik. Jan Erik Moström

Styrteknik 7.5 hp distans: E-1000 och E-Designer

Michael Q. Jones & Matt B. Pedersen University of Nevada Las Vegas

Programmering och algoritmiskt tänkande. Tema 3, föreläsning 1 Jody Foo

Programmering I Tobias Wrigstad fredag, 2009 augusti 28

Kodexempel från Programmering 2 Tobias Wrigstad, Ph.D.

3.5 Visuell programmering

Python. Python är, som Scheme, ett interpreterat språk men det finns kompilatorer för Python.

Python. Python är, som Scheme, ett interpreterat språk men det finns kompilatorer för Python.

Support Manual HoistLocatel Electronic Locks

Laboration 1 Introduktion till Visual Basic 6.0

Lab5 för prgmedcl04 Grafik

Sammanfattning. Listor. List-manipulering. Matris. /home/lindahlm/activity-phd/teaching/11dd1310/exercise3/exercise3.py September 13, 20111

Översättning av galleriet. Hjälp till den som vill...

AssiML. Användarbeskrivning

Grundläggande datalogi - Övning 1

Introduktion till programmering SMD180. Föreläsning 2: Variabler, uttryck och satser

Objektorienterad Programkonstruktion. Föreläsning 3 9 nov 2015

Objektorienterad Programkonstruktion. Föreläsning 3 7 nov 2016

729G04 Programmering och diskret matematik. Python 3: Loopar

Alias 1.0 Rollbaserad inloggning

Föreläsning 8. Designmönster

729G75: Programmering och algoritmiskt tänkande. Tema 1, föreläsning 1 Jody Foo

Schenker Privpak AB Telefon VAT Nr. SE Schenker ABs ansvarsbestämmelser, identiska med Box 905 Faxnr Säte: Borås

Innehåll Introduktion... 3 InteractiveScene.config... 3 Scener <scenes>... 3 Typsnitt <fonts>... 3 Övergångar <transitions>...

Övningar i SQL. SQLAccess.doc Ove Lundgren

Python. Vi har ofta behov av att behandla datastrukturer på ett enhetligt sätt så att vi kan göra samma sak i flera olika program.

NYHETER I AUTOCAD 2005

Objektorienterad programmering med Java Swing: Händelser, lyssnare och applets

Installation av F13 Bråvalla

Labb LABB 1. Databassagan och en rundtur i databasers märkliga värld. Plushögskolan Frågeutveckling inom MSSQL - SU14

BILAGA 5 Fi2Utrymmen Bilaga till CAD-kravspecifikation med förvaltningsinformation Version 1.0

Information technology Open Document Format for Office Applications (OpenDocument) v1.0 (ISO/IEC 26300:2006, IDT) SWEDISH STANDARDS INSTITUTE


FactoryCast HMI. Premium & Quantum PLC. MySQL Server och FactoryCast HMI databastjänst

Komma igång med Adobe Presenter ver.7

1. FORMULÄR. A. Skapa formulär

Lösenordsportalen Hosted by UNIT4 For instructions in English, see further down in this document

729G75: Programmering och algoritmiskt tänkande. Tema 1. Föreläsning 1 Jody Foo

Beijer Electronics AB 2000, MA00336A,

Objektorienterad programmering Föreläsning 6. Mer om klasser och typer Namnrymder Inkapsling Synlighet Statiska variabler Statiska metoder

729G04 Programmering och diskret matematik. Python 2: Villkorssatser, sanningsvärden och logiska operatorer


Föreläsnings 11 - GUI, Händelsestyrda program, MVC

Styrteknik : Funktioner och funktionsblock

729G04 Programmering och diskret matematik. Föreläsning 7

27. GUI Programming. Java. Summer 2008 Instructor: Dr. Masoud Yaghini

Isolda Purchase - EDI

Introduktion till programmering D0009E. Föreläsning 1: Programmets väg

Laboration: Whitebox- och blackboxtesting

Föreläsning 3 1ME403 Design av grafiska gränssni7, 7,5hp. Gränssni)sdesign II. Rune Körnefors. Medieteknik Rune Körnefors rune.kornefors@lnu.

Paneler - VCPXX.2. Programmeringsmanual för VCP-paneler. Revision 2

Windows Server containers och Hyper-V containers

16 Programmering TI -86 F1 F2 F3 F4 F5 M1 M2 M3 M4 M5

Simulering med ModelSim En kort introduktion

Föreläsning 2 Programmeringsteknik och C DD1316. Mikael Djurfeldt

Hos vad? och bör därför vara instanseller klassvariabel i vilken klass?

Anvä ndärguide Nyä Expeditionsresor

Målet för D1 är att studenterna ska kunna följande: Använda några av de vanligaste PROC:arna. Sammanställa och presentera data i tabeller och grafiskt

Introduktion till objektorientering. Vad är objektorientering egentligen? Hur relaterar det till datatyper? Hur relaterar det till verkligheten?

Använda några av de vanligaste PROC:arna. Sammanställa och presentera data i tabeller och grafiskt

Introduktion till objektorientering. Vad är objektorientering egentligen? Hur relaterar det till datatyper? Hur relaterar det till verkligheten?

#minlandsbygd. Landsbygden lever på Instagram. Kul bild! I keep chickens too. They re brilliant.

Labb i Datorsystemteknik och programvaruteknik Programmering av kalkylator i Visual Basic

Funktioner. Linda Mannila

Design och konstruktion av grafiska gränssnitt

Vad kännetecknar en god klass. Vad kännetecknar en god klass. F12 Nested & Inner Classes

Questionnaire for visa applicants Appendix A


Malmö högskola 2007/2008 Teknik och samhälle

EnKlass. Instans 3 av EnKlass. Instans 2 av EnKlass

I STONE. I Variabler, datatyper, typkonvertering. I Logiska och matematiska uttryck. I Metoder-returvärde och parametrar. I Villkorssatser if/else

Introduktion till Jasmine 1.2 ODQL

Writing with context. Att skriva med sammanhang

Innehåll. Vad är MATLAB? Grunderna i MATLAB. Informationsteknologi. Informationsteknologi.

Styrteknik: Binära tal, talsystem och koder D3:1

Del 2 ARBETA MED DATORN

Introduktion till Python

TDDC30 Programmering i Java, Datastrukturer och Algoritmer Lektion 5. Laboration 4 Lådplanering Exempel på grafik, ett avancerat program Frågor

Menyer, formulär och dialogrutor

Transkript:

729G75 Programmering och algoritmiskt tänkande Grafiska gränssnitt och händelsedriven programmering

Översikt Repetition: Klass, objekt, instans Fördjupning: variabler som referenser Vad är ett GUI? Olika former av programflöde GUI-programmering i Python med Tkinter Funktionsobjekt/Metodobjekt Introuppgift 2 och temauppgift 2

Klasser, objekt/instanser Namngivning klasser har versal initial bokstav och använder CamelCase Vanligt att använda namn på klassen med liten bokstav för variabelnamn, t.ex. turtle = Turtle(). För listor/dictionaries, använd plural: turtles, turtles_dict, turtles_list Anrop till namnet på klassen skapar en instans av klassen. T.ex. datarow = DataRow(1, 2, 3, 4, 5, 6) skapar ett DataRow-objekt.

En variabel refererar till ett objekt Variabler används som namn eller etiketter. De innehåller egentligen ingenting. Namnet "Jody" är inte människan Jody. Jody används för att referera till människan Jody. a = [1, 2, 3] b = a b[0] = "bil" print(a[0])

GUI = Graphical User Interface Grafiskt gränssnitt Gränssnitt - något som ligger mellan två andra saker. I vårt fall: det mellan användaren och programmet Andra alternativ: textbaserat gränssnitt, fysiskt gränssnitt

Widgets (window gadgets) Label Text input field Label Text input field Drop Down Radio Button 1 Radio Button 2 Radio Button 3 Selected Checkbox Unselected Checkbox Selected Checkbox Unselected Checkbox Button 1 Button 2

"Bakom" kulisserna Widgets, instanser av olika typer av GUI-element. Olika typer av fönster: dialogrutor, öppna dokument etc Behållare (Containers) som kan innehålla widgets: Frame, Panel, Canvas Funktionalitet för att ordna layout av widgets etc Koppling mellan widgets och funktioner/metoder.

Program- och interaktionsflöde för textbaserade gränssnitt

Exempel: Textbaserat gränssnitt > ls fetkod.py saga2.txt saga.txt > avsluta Ogiltigt kommando. > redigera fil Ogiltigt kommando.

Exempel: Textbaserat gränssnitt Enter name: Amanda Enter title: Giant Slayer Enter sex (m/f): f Choose appearance 1. unwashed 2. sparkling 3. retro > 1 Do you have a magic bag (y/n)? y Are you happy (y/n)? n Do you have a secret (y/n)? n Generate story (y=yes, n=no, start over)? n

Programflöde: Textbaserat gränssnitt Linjär/hierarkisk interaktion Visa alternativ för användaren Ta emot kommando från användaren. Ta eventuellt emot ytterligare information från användaren. Interaktion mha tangentbord Typisk interaktion Kör kommando Välj ett alternativ Svara på en fråga

Program- och interaktionsflöd för grafiska gränssnitt

Exempel: GUI

Exempel: GUI Name Title Sex Amanda the Giant Slayer Female Male This is the story of Amanda, the Giant Slayer. Ever since the day she was born, Amanda had a unwashed look. Amanda had a magic bag. Sadly, there is not much else to say about her. Appearance unwashed Other has magic bag is happy has secret Reset Quit

Programflöde: GUI Icke-linjär interaktion Reaktivt gränssnitt - tät återkoppling Interaktion via mus och tangentbord Interaktion med en begränsad och standardiserad uppsättning widgets (oftast)

Syfte med att skapa grafiska gränssnitt i Python med tkinter Introduktion till GUI-programmering Widgets i tkinter få saker att hända när man interagerar med widgets bestämma layout för widgets i ett GUI

Om tkinter Olika widgetklasser finns: faktiska gränssnittskomponenter är instanser av klasserna Olika inställningar kan ges när man skapar en widget. Widgets kan placeras i ett GUI på tre sätt - det finns tre "geometry managers" (i andra språk också kallade för "layout managers").

Widgets http://pythonwiki.tiddlyspot.com/#%5b%5bvisual%20guide%20to%20tkinter%20widgets%5d%5d

Objektorienterat GUI

Struktur på en GUI-applikation med Tkinter Importera tkinter import tkinter as tk Ett rot-fönster root = tk.tk() Widgets läggs in i root-fönstret button = tk.button(root, text="press me!") Widgets layoutas button.pack() Huvudloopen startas root.mainloop()

En knapp i ett fönster # coding: utf-8 # importera Tkinter-modulen import tkinter as tk # skapa ett Tk-fönster root = tk.tk() button = tk.button(root, text="press Me!") button.pack() # starta GUI-loopen root.mainloop()

Var finns min widget? En widget ligger alltid i en "container" (behållare). Vissa widgets är containers, t.ex. fönster och Frames.

Widgets i Tkinter Widget Button Canvas Checkbutton Entry Frame Label Listbox Menu Menubutton Message Radiobutton Scale Scrollbar Text Toplevel Description A simple button, used to execute a command or other operation. Structured graphics. This widget can be used to draw graphs and plots, create graphics editors, and to implement custom widgets. Represents a variable that can have two distinct values. Clicking the button toggles between the values. A text entry field. A container widget. The frame can have a border and a background, and is used to group other widgets when creating an application or dialog layout. Displays a text or an image. Displays a list of alternatives. The listbox can be configured to get radiobutton or checklist behavior. A menu pane. Used to implement pulldown and popup menus. A menubutton. Used to implement pulldown menus. Display a text. Similar to the label widget, but can automatically wrap text to a given width or aspect ratio. Represents one value of a variable that can have one of many values. Clicking the button sets the variable to that value, and clears all other radiobuttons associated with the same variable. Allows you to set a numerical value by dragging a "slider". Standard scrollbars for use with canvas, entry, listbox, and text widgets. Formatted text display. Allows you to display and edit text with various styles and attributes. Also supports embedded images and windows. A container widget displayed as a separate, top-level window.

Exempel på widgetanvändning

Ett fönster # importera Tkinter-modulen from tkinter import * # skapa ett Tk-fönster window = Tk() # starta GUI-loopen mainloop() Ett fönster i Tkinter är ett objekt av typen Tk. För att utritning av fönster etc ska göras, måste man starta GUI:ts huvudloop: mainloop()

Flera fönster from tkinter import * # Skapa det första fönstret root = Tk() # Skapa det andra fönstret top = Toplevel() # Starta Tk-loopen root.mainloop() För att skapa fler än ett fönster används klassen Toplevel fönster utöver det första.

Skapa widgets # utan att spara referens Widget(parent, attribute1=v1, attribute2=v2,...) # med referensen sparad w = Widget(parent, attribute1=v1, attribute2=v2,...) När man skapar en widget, skapar en instans av en widgetklass, måste man ange dess förälder. Föräldern (parent) är ett fönster eller en widget som kan agera "container".

Button En knapp. Knappar kan ha text på Knappar kan tryckas på Knappar kan vara avstängda (disabled) https://infohost.nmt.edu/tcc/help/pubs/tkinter/web/button.html

button.py # coding: utf-8 """Demonstration av klassen Button.""" # importera Tkinter-modulen import tkinter as tk # skapa ett Tk-fönster root = tk.tk() button = tk.button(root, text="press Me!") button.pack() # starta GUI-loopen root.mainloop()

Få något att hända när man trycker på knappen Koppla beteende till en widget genom att koppla ett funktionsobjekt/metodobjekt till det. Ett funktionsobjekt/metodobjekt är "namnet" på en funktion/metod. Vi kan koppla ihop ett funktionsobjekt som ett kommando som körs när vi aktiverar en widget. Vi kan binda ihop en viss händelse relaterat till widgeten med ett funktionsobjekt.

Ange widget-kommando Man kan koppla ett kommando till vissa widgets, t.ex. knappar: button = tk.button(root, text="ok", command=do_this) där do_this är ett funktionsobjekt.

Funktions/Metodobjekt Klasser kan instansieras och producera objekt I Python kan man även behandla funktions-"namn" som objekt. En funktion: def hejsan(): print("hejsan") Ett funktionanrop: hejsan() Funktionsobjektet: hejsan

Exempel på funktionsobjekt def print_hello(): print("hello World!") bacon = print_hello bacon()

Exempel på knapp med kommando # coding: utf-8 """Demonstration av tkinter.entry.""" # importera tkinter-modulen import tkinter as tk def callback(): """Denna funktion skriver ut något när den blir anropad.""" print("something happened!") # skapa ett Tk-fönster root = tk.tk() button = tk.button(root, text="press Me!", command=callback) button.pack() # starta GUI-loopen root.mainloop()

Händelser Förutom att vissa widgets kan ha kommandon kopplade till sig, kan olika former av interaktion med GUI:t producera händelser (en. events). Dessa händelser kan kopplas till funktionsobjekt. En händelse beskrivs med hjälp av en sträng, t.ex. "<Button-1>" som betyder att musknapp 1 har tryckts ner. Man binder en händelse till ett funktionsobjekt med bind()-metoden: widget.bind("<button-1>", function_object)

Händelser forts. def key_handler(event): print("a key was pressed") Funktionsobjektet man binder till ett event ska ta in en instans av klassen Event som parameter Från ett event-objekt kan man läsa av diverse information. För mer information, läs referensmaterialet.

Exempel på händelser Nedan följer några exempel på händelser man kan binda: <Enter> när musen förs in i över en widget <Leave> när musen lämnar en widget <KeyPress> när en tangent trycks ner <KeyRelease> när en tangent åker upp igen <Button-1> när musknapp 1 trycks <Button-2> när musknapp 2 trycks

Exempel på knapp med funktionsobjekt bundet till händelse # importera tkinter-modulen import tkinter as tk def callback(): """Denna funktion skriver ut "Something happened!" när den blir anropad.""" print("something happened!") def over_me(event): """Denna funktion skriver ut "You are over me!" när den blir anropad.""" print("you are over me!") def left_me(event): """Denna funktion skriver ut "You left me!" när den blir anropad.""" print("you left me!") # skapa ett Tk-fönster root = tk.tk() button = tk.button(root, text="press Me!", command=callback) button.bind("<enter>", over_me) button.bind("<leave>", left_me) button.pack() # starta GUI-loopen root.mainloop()

Label En Label-instans används som etiketter i ett GUI. T.ex. för att berätta vad som ska skrivas i ett textfält. Man kan välja om texten i Labeln ska var centrerad eller höger- eller vänsterjusterad. Standard är vänsterjusterad.

Entry Ett Entry är ett textfält som har en rad. Vi läser från ett Entry genom att anropa på dess metod get() Vi ändrar texten som står i ett entry genom att använda metoderna insert() och delete(). insert() behöver ett start-index och en sträng, t.ex. entry1.insert(0, "hej") delete() behöver ett start-index. Läs mer i referenslitteraturen.

Frame En behållare (eng container) för andra widgets. Ett användningsområde för Frames är att gruppera widgets. T.ex. kan flera widgets läggas in i en Frame. Sen lägger man till den frame:n till ett fönster.

Layout Det finns sätt att bestämma hur widgets ska organiseras i en container. Följande metoder kan användas för att placera ut pack grid place Vi ska koncentrera oss på grid.

Grid Vi lägger ut våra widgets i en matris/tabell/rutnät. Matrisen har rader och kolumner av celler. En widget placeras på en viss rad, i en viss kolumn. En widget kan uppta en eller fler rader eller kolumner.

Exempel på label, textfält och knapp 0 1 0 The best game character ever 1 Name Bob 2 Game Bob's Great Adventure 3 Ok

Grid forts En widget kan sträcka sig över fler än en rad/kolumn. Vi kan fästa en widget i t.ex. ett hörn eller vid en kant där den stannar om en cell skulle vara större än den widget som finns inuti den. Läs mer om Grid i referensmaterialet.

Exempel på label, textfält och knapp 0 1 0 The best game character ever 1 Name Bob 2 Game Bob's Great Adventure 3 Ok

Layout med grid() # coding: utf-8 """Layout med grid.""" import tkinter as tk # Framen läggs automatisk in i en tk.tk() frame = tk.frame() # placera frame i fönstret med hjälp av pack() frame.pack() # titel-label title_label = tk.label(frame, text="the best game character ever", background="red") title_label.grid(row=0, column=0, columnspan=2, sticky=tk.e+tk.w+tk.n+tk.s) # namn-label name_label = tk.label(frame, text="name") name_label.grid(row=1, column=0, sticky=tk.nw) # name-textfält name_entry = tk.entry(frame) name_entry.grid(row=1, column=1, sticky=tk.nw) # game-label game_label = tk.label(frame, text="game") game_label.grid(row=2, column=0, sticky=tk.nw) # name-textfält game_entry = tk.entry(frame) game_entry.grid(row=2, column=1, sticky=tk.nw) # knapp button = tk.button(frame, text="ok") button.grid(row=3, column=1, sticky=tk.se) frame.mainloop()

Radiobutton En grupp av knappar där endast en kan vara aktiv. Knappar grupperas ihop genom att de tilldelas samma Tk-variabel att lagra sitt värde i. Ett funktionsobjekt kan anges som ett kommando till varje radioknapp.

Tk-variabler Tk-variabler är objekt av som Tkinter använder för att lagra värden. T.ex. finns StringVar som tar hand om strängar IntVar som tar hand om int:ar Exempel: s = tk.stringvar() s.set("hej") print s.get() Referens: https://infohost.nmt.edu/tcc/help/pubs/tkinter/web/ control-variables.html

Exempel på radio-knappar # coding: utf-8 """Demonstration av klassen Radiobutton.""" import tkinter as tk root = tk.tk() def radio(): """Skriv ut värdet hos radio-knappen.""" print(radio_value.get()) # Tk-variabel att lagra radioknapp-gruppens värde i radio_value = tk.stringvar() radio_value.set("inget valt") # knapp 1 radio_button1 = tk.radiobutton(root, text="hejsan", variable=radio_value, value="hejsan", command=radio) radio_button1.pack() # knapp 2 radio_button2 = tk.radiobutton(root, text="hoppsan", variable=radio_value, value="hoppsan", command=radio) radio_button2.pack() # knapp 3 radio_button3 = tk.radiobutton(root, text="svejsan", variable=radio_value, value="svejsan", command=radio) radio_button3.pack() root.mainloop()

Checkbutton En knapp som antingen är på eller av. Värdet avläses från en Tkinter-variabel (IntVar) som man kopplar till knappen.

Tk-variabler forts En Tk-variabel kan ropa på ett funktionsobjekt när förändring sker, antingen när någon läser från den, eller när någon skriver till den. Exempel: def hello(name, index, mode): print v.get() v = tk.stringvar("eggs") v.trace('w', hello) v.set("bacon")