Grafisk Brukergrensesnitt

Like dokumenter
INF1010 Grafisk brukergrensesni3 med Swing og awt del 1 INF1010

Grafiske brukergrensesnitt med Swing og AWT

6108 Programmering i Java. Leksjon 8. GUI: Grafisk brukergrensesnitt. Del 2: Roy M. Istad 2015

import javax.swing.*; import java.awt.*;

INF1010 Grafisk brukergrensesni3 (GUI) med Swing/awt. del 1

Gjennomgang av eksamen H99

Vi lærte sist å lage vinduer. Om å lage et vindu. GUI (Graphical User Interface)-programmering. Inf GUI - del 2

LO191D/LC191D Videregående programmering

INF1010. Grafisk brukergrensesni. med Swing og awt del 2

AVDELING FOR INGENIØRUTDANNING EKSAMENSOPPGAVE

Kapittel 15: Grafiske brukergrensesnitt. Del II

INF Våren Li' repe$sjon om Tråder og GUI. Stein Gjessing, Ins$tu' for informa$kk, Universitetet i Oslo. Ins$tu' for informa$kk

INF1010 våren 2006 Uke 19: 9. mai 2006 Et større eksempel: Solitaire (kabal)

EKSAMEN. TILLATTE HJELPEMIDLER: Alle trykte og skrevne. INNFØRING MED PENN, evt. trykkblyant som gir gjennomslag

HØGSKOLEN I SØR-TRØNDELAG Avdeling for informatikk og e-læring AITeL

UNIVERSITETET I OSLO

INF1010 MVC i tekstbaserte programmer

Tittel Objektorientert systemutvikling 1. Eksamenstid, fra-til Ant. oppgaver 6

AVDELING FOR INGENIØRUTDANNING EKSAMENSOPPGAVE

. Ved sensur vl1 ahe bokstaverte deloppgaver (a, b, c,...) telle like mye.

GUI 3 JavaFX. Mer interaksjon Hvordan gi input :l programmet. INF1010 Stein Michael Storleer

Eksamensoppgave Vår 2012 Ordinær eksamen Bokmål. Videregående programmering. Eksamensdato: Studium/klasse: 2. klasse

INF 1010, vår 2005 Løsningsforslag uke 10

UNIVERSITETET I OSLO

GUI («Graphical User Interface») del 2

Repitisjonskurs. Arv, Subklasser og Grensesnitt

GUI («Graphical User Interface») del 2

Eks 1: Binærtre Binærtretraversering Eks 2: Binærtre og stakk

Mål med kurset. Java i INF Dagens tema. GUI med Swing. Dokumentasjon

Om Grafiske Bruker-Grensesnitt (GUI) Hvordan gjør vi det, to typer av vinduer? GUI (Graphical User Interface)-programmering

Løsningsforslag Test 2

Oppsummering. Kort gjennomgang av klasser etc ved å løse halvparten av eksamen Klasser. Datastrukturer. Interface Subklasser Klasseparametre

Gjøre noe i hele treet = kalle på samme metode i alle objekten. Java datastruktur Klassestruktur

Kalkulator-leksjonen (nesten ferdig)

Hvordan gjør vi det, to typer av vinduer? Om Grafiske Bruker-Grensesnitt (GUI) GUI (Graphical User Interface)-programmering

1. NetBeans IDE: Lage en enkel mobilapplikasjon

Sudokubrettet Et sudokubrett består av n n ruter. Vi bruker følgende begreper i oppgaven:

Sudokubrettet Et sudokubrett består av n n ruter. Vi bruker følgende begreper i oppgaven:

NB!!! Veldig korte svar er gitt her. Disse burde det vært skrevet mer på ved en eksamen..

OPPGAVE 5b og 8b Java Kode

Introduksjon til objektorientert. programmering. Hva skjedde ~1967? Lokale (og globale) helter. Grunnkurs i objektorientert.

2 Om statiske variable/konstanter og statiske metoder.

ANTDAGER = 358; I Ifra nyttår 08 til 08 1ed julaften

UNIVERSITETET I OSLO

HØGSKOLEN I SØR-TRØNDELAG

AVDELING FOR INGENIØRUTDANNING EKSAMENSOPPGAVE. Antall sider (Inkl forsiden): 8. Alle trykte og håndskrevne

Hva er verdien til variabelen j etter at følgende kode er utført? int i, j; i = 5; j = 10; while ( i < j ) { i = i + 2; j = j - 1; }

EKSAMEN I FAG TDT MMI Lørdag 11. august 2012 Tid: kl

Konstruktører. Bruk av konstruktører når vi opererer med "enkle" klasser er ganske ukomplisert. Når vi skriver. skjer følgende:

Antall sider (inkl. forsiden): 7. Alle trykte og håndskrevne

LC191D/LO191D Videregående programmering mai 2010

1 t:n'v'\ekode LO325E. Alle ~vne og trykte. GOd'"j(jent kalkulator

INF1010 Arv. Marit Nybakken 2. februar 2004

Eksamen i INF160, høsten (OBS! svarforslag) 6 timer skriftlig, alle hjelpemidler Faglærer: Ketil Danielsen

Forklaring til programmet AbstraktKontoTest.java med tilhørende filer Konto.java, KredittKonto.java, SpareKonto.java

INF1010 Binære søketrær ++

Argumenter fra kommandolinjen

INF1010. Grensesnittet Comparable<T>

INF våren 2017

Dagens forelesning. Java 13. Rollefordeling (variant 1) Rollefordeling (variant 2) Design av større programmer : fordeling av roller.

Array&ArrayList Lagring Liste Klasseparametre Arrayliste Testing Lenkelister

INF1010. grensesni-et Comparable<T> grensesni-et Iterable<T> rekursjon

INF1010, 22. mai Prøveeksamen (Eksamen 12. juni 2012) Stein Gjessing Inst. for Informatikk Universitetet i Oslo

UNIVERSITETET I OSLO

Forelesning inf Java 4

HØGSKOLEN I SØR-TRØNDELAG

Les gjennom hele oppgavesettet før du begynner å besvare deloppgavene.

EKSAMEN 6108/6108N PROGRAMMERING I JAVA Alt trykt og skriftlig materiale.

i=0 Repetisjon: arrayer Forelesning inf Java 4 Repetisjon: nesting av løkker Repetisjon: nesting av løkker 0*0 0*2 0*3 0*1 0*4

UNIVERSITETET I OSLO

Løsningsforslag Videregående programmering, eksamen desember 2010

Rekursjon som programmeringsteknikk

Transkript:

Grafisk Brukergrensesnitt Repetisjonskurs

Hva må kunnes? JFrame JPanel JComponents Layouts Listeners

jframe Representerer et vindu JComponents legges på vinduet Har en tittel og størrelse Komponenter struktureres med BorderLayout Elementer puttes på panelet med metoden

jframe import javax.swing.jframe; JFrame frame = new JFrame("Min JFrame tittel"); // Avslutt når vi fjerner vinduet (Frame n) frame.setdefaultcloseoperation(jframe.exit_on_close); // Lager en knapp JButton knapp = new JButton( En knapp ); // Putter knappen på framen frame.getcontentpane().add(knapp, BorderLayout.CENTER); // Setter vinduet i midten av skjermen frame.setlocationrelativeto(null); // Setter størrelsen til å romme alle elementer frame.pack(); // Viser vinduet på skjermen frame.setvisible(true);

JPANEL Brukes til å nøste sammenhengende grafiske komponenter Kan ha borders og layouts Elementer puttes på panelet med metoden add(jcomponent) Komponenter struktureres automatisk vannrett (FlowLayout)

JPANEL import javax.swing.*; JPanel p = new JPanel(); // Lager et tekstfelt JLabel minlabel = new JLabel( Min tekst label ); // Lager en knapp JButton minknapp = new JButton( Min knapp ); // Putter tekstfeltet of knappen på panelet p.add(minlabel); p.add(minknapp); // Sett border p.setborder(borderfactory.createlineborder(color.black); // Endre layout p.setlayout(new BorderLayout()); // Putt panelet på frame n frame.add(p);

Oppgave Vi skal lage et simpelt vindu med et tekstfelt (JLabel) og en knapp (JButton) Lag en klasse med en main metode som oppretter en JFrame, et JPanel, de to komponentene våre, og putter disse komponentene på panelet. Panelet skal puttes på framen, og framen skal vises til slutt.

jcomponents Grafiske elementer JButton, JTable, JLabel, JTextField etc Fine metoder: gettext(), settext( en tekst ) Puttes på et JPanel, eller en JFrame Lyttes på med listeners

Layouts Bestemmer hvordan komponenter (subklasser av JComponent) skal legges ut Settes på et JPanel med metoden setlayout(layout) BorderLayout, BoxLayout, FlowLayout, GridLayout etc JFrame bruker BorderLayout, JPanel bruker FlowLayout

Layouts JPanel p = new JPanel(); Diverse layout eksempler // 2 * 2 matrise layout GridLayout matriselayout = new GridLayout(2,2); p.setlayout(matriselayout); p.add(new JButton( 1 )); p.add(new JButton( 2 )); p.add(new JButton( 3 )); //... // Evig mange rader, 4 kolonner layout GridLayout kollayout = new GridLayout(0,4); p.setlayout(kollayout); p.add(new JButton( 1 )); p.add(new JButton( 2 )); p.add(new JButton( 3 )); //... // Komponenter legges ut vannrett FlowLayout vannrett = new FlowLayout(); p.setlayout(vannrett); p.add(new JButton( 1 )); p.add(new JButton( 2 )); p.add(new JButton( 3 )); //...

Layouts Kombinere JPanels og layouts JPanel høyere = new JPanel(); JPanel venstre = new JPanel(); JPanel toplayout = new JPanel(); // toplayout.setlayout(new FlowLayout()); venstre.setlayout( new BoxLayout(venstre, BoxLayout.PAGE_AXIS) ); høyere.setlayout( new BoxLayout(høyere, BoxLayout.LINE_AXIS) ); toplayout.add(venstre); toplayout.add(høyere); venstre.add(new JLabel( linje 1 )); venstre.add(new JLabel( linje 2 )); venstre.add(new JLabel( linje 3 )); venstre.add(new JLabel( linje 4 )); høyere.add(new JButton( knapp 1 )); høyere.add(new JButton( knapp 2 )); høyere.add(new JButton( knapp 3 )); høyere.add(new JButton( knapp 4 )); // Må alltid putte panelet på frame n til slutt frame.add(toplayout);

Oppgave Vi skal lage en simpel kalkulator (kun det visulle, ingen listeners enda) Lag en klasse (KalkulatorView) med en main metode. I main: Opprett et vindu med 3 paneler: Panel 1 skal ha et tekstfelt, og en reset knapp ved siden av. Hint: BoxLayout.LINE_AXIS, eller FlowLayout. Tekstfeltet skal vise tallet 0. Panel 2 skal være 3*3 matrise av knappene 1-9 Hint: GridLayout. Panel 3 skal være knappene -, +, *, / plassert nedover. Hint: BoxLayout.PAGE_AXIS Putt de 3 panelene på en JFrame. Panel 1 skal ligge øverst, panel 2 og 3 skal ligge under panel 1. Hint: JFrame bruker BorderLayout. Denne kan man bruke med: BorderLayout.PAGE_START, BorderLayout.CENTER, og

Listeners Brukes til å reagere på events En komponent registreres til å lytte på en hendelse: minknapp.addactionlistener( new MinLytteKlasse() ); En bestemt metode blir kalt når hendelsen inntreffer Events: Trykke på knapp, trykke return i en JTextField, velge et meny element

Listeners //... JButton minknapp = new JButton( Trykk på meg ); minknapp.addactionlistener( new MinLytteKlasse() ); //... Class MinLytteKlasse implements ActionListener { public void actionperformed(actionevent e) { JButton knappen = (JButton) e.getsource(); System.out.println( Jeg var trykket på! + knappen.gettext() ); } }

Oppgave Vi skal lage lyttere til kalkulator programmet vårt og utføre en matematisk operasjon på en-siffrede tall Lag en klasse CalculatorController som implementerer ActionListener grensesnittet Opprett en instanse av denne klassen fra main og sett pekeren til å lytte på klikk på samtlige knapper.

Oppgave (forts) Vi skal implementere actionperformed metoden i controller klassen Metoden må vi vite hvilken knapp som ble trykket på. Opprett if-else setninger for hver mulige verdi for resultatet av e.getsource().gettext() Hvis tastetrykket er en tall-knapp må vi ta vare på tallet. Opprett to intvariable i controller klassen som tar vare på disse. Dersom det ikke er et tall er det en operasjon, ta vare på operasjonen som en String. Dersom det er reset-knappen skal vi sette de tre variablene til 0/null. I dette tilfellet setter vi også tekst-input feltet til å vise tallet 0 ( hint: settext() ). Etter if-else kodesnutten: dersom begge tallene er forskjellig fra 0 kan vi utføre operasjonen. Opprett en egen metode som utfører regne-operasjonen på de to tallene og setter svaret i tekst-input feltet.

utvide gui klasser Ofte ønsker man å utvide java s egne GUI klasser for å kunne ha bedre kontroll over disse class MinKnapp extends JButton, class MittPanel extendsjpanel I tillegg ønsker man å neste disse klassene inni hverandre for å kunne enkelt dele variabler. class MittPanel extendsjpanel { class MittPanel2 extendsjpanel { } }

DEMO: Utvide kalkulatoren til å heller extende Swing klasser og nøste disse, til fordel for renere kode.