lage brukergrensesnitt n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Å lage brukergrensesnitt PowerPoint Presentation
Download Presentation
Å lage brukergrensesnitt

Loading in 2 Seconds...

play fullscreen
1 / 24

Å lage brukergrensesnitt - PowerPoint PPT Presentation


  • 129 Views
  • Uploaded on

Å lage brukergrensesnitt. Menyer side 2-3 Knapperader side 4 Vinduer i Java side 5-6 Vinduslyttere side 7-8 Dialogvinduer, introduksjon side 9-13 En standard OK-Avbryt-dialog side 14 Dataoverføring mellom foreldre- og dialogvindu side 15-16

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Å lage brukergrensesnitt' - fitzgerald-benjamin


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
lage brukergrensesnitt

Å lage brukergrensesnitt

Menyer side 2-3

Knapperader side 4Vinduer i Java side 5-6

Vinduslyttere side 7-8

Dialogvinduer, introduksjon side 9-13

En standard OK-Avbryt-dialog side 14

Dataoverføring mellom foreldre- og dialogvindu side 15-16

GUI-komponenten tabell (JTable) side 17

Oppussingseksemplet, GUI side 18

GridBagLayout som layout-håndterer side 19-21

Kan vi styre størrelsen på komponentene? side 22Oppussingseksemplet, GUI - kode side 23

Å lage egne datamodellklasser side 24

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.

menyer generelt
Menyer generelt

MenuLookDemo er hentet fra Sun sine sider via

JMenu(How to use Menus) i online API-dokumentasjonen.

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.

menyer i denne boka
Menyer i denne boka

class VinduMedMeny extends JFrame {

private Container guiBeholder;

public VinduMedMeny() {

setTitle("Menytest");

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

guiBeholder = getContentPane();

MenyLytter lytteren = new MenyLytter();

JMenu menyen = new JMenu("Farge");

JMenuItem menypost = new JMenuItem("Gul");

menyen.add(menypost);

menypost.addActionListener(lytteren);

// tilsvarende for rød og blå

JMenuBar menylinje = new JMenuBar();

menylinje.add(menyen);

setJMenuBar(menylinje);

}

private class MenyLytter implements ActionListener {

public void actionPerformed(ActionEvent hendelse) {

String kommando = hendelse.getActionCommand();

if (kommando.equals("Gul")) guiBeholder.setBackground(Color.yellow);

else if (kommando.equals("Rød")) guiBeholder.setBackground(Color.red);

else guiBeholder.setBackground(Color.blue);

}

}

}

menylinje

(JMenuBar)

menypost

(JMenuItem)

meny (JMenu)

Et menyvalg genererer en ActionEvent.

Gjør oppgave 1 side 477

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.

knapperader
Knapperader

knapperad, verktøylinje

(JToolBar)

knapp

(JButton)

class VinduMedKnapperad extends JFrame {

private Container guiBeholder;

private JButton gulKnapp;

private JButton rødKnapp;

private JButton blåKnapp;

public VinduMedKnapperad(){

setTitle("Knapperad-test");

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

guiBeholder = getContentPane();

KnappeLytter lytteren = new KnappeLytter();

JToolBar knapperad = new JToolBar();

Icon ikon = new ImageIcon("gul.gif");

gulKnapp = new JButton(ikon);

gulKnapp.addActionListener(lytteren);

knapperad.add(gulKnapp);

// tilsvarende for rød og blå

guiBeholder.add(knapperad, BorderLayout.NORTH);

}

private class KnappeLytter implements ActionListener {

public void actionPerformed(ActionEvent hendelse) {

JButton knapp = (JButton) hendelse.getSource();

if (knapp == gulKnapp) guiBeholder.setBackground(Color.yellow);

else if (knapp == rødKnapp) guiBeholder.setBackground(Color.red);

else guiBeholder.setBackground(Color.blue);

}

}

}

Knapperaden på ”vanlig” plass

knapperaden er dratt vekk fra sin vanlige plass,slik at den har blitt et eget vindu

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.

vinduer i java
Vinduer i Java

Primærvindu (klassen JFrame) med

knapper for minimering, maksimering og lukking

og tittellinje

Sekundærvindu

(dialog, klassen JDialog),

lukkes dersom

foreldrevinduet

lukkes

Interne vinduer (klassen JInternalFrame)

med knapper for minimering, maksimering og lukking.

Ingen deler av et internt vindu kan vises utenfor

det primærvinduet det tilhører.

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.

klassetreet med vindusklassene
Klassetreet med vindusklassene

Object

Component

Container

Window

JComponent

JWindow

Frame

Dialog

JInternalFrame

JFrame

JDialog

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.

vinduslyttere
Vinduslyttere
  • Hittil
    • setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  • Av og til trenger vi selv å kontrollere lukkingen, for eksempel dersom filer skal lukkes:
    • setDefaultCloseOperation(WindowConstants.DO_NOTHING_ON_CLOSE);
  • Interface java.awt.event.WindowListener:

void windowActivated(WindowEvent hendelse);

void windowClosed(WindowEvent hendelse);

void windowClosing(WindowEvent hendelse);

void windowDeactivated(WindowEvent hendelse);

void windowDeiconified(WindowEvent hendelse);

void windowIconified(WindowEvent hendelse);

void windowOpened(WindowEvent hendelse);

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.

klassen windowadapter
Klassen WindowAdapter
  • Et vinduslytterobjekt må tilhøre en klasse som implementerer interfacet WindowListener
  • Vanligvis er de fleste metodene tomme
  • Det er derfor laget en adapter-klasse (gjelder alle awt-lytter-interface med mer enn en metode):

package java.awt.event;

public abstract class WindowAdapter implements WindowListener {

public void windowOpened(WindowEvent hendelse) {}

public void windowClosing(WindowEvent hendelse) {}

// ... og så videre, bare tomme metoder

}

  • Eksempel på bruk

private class Vinduslytter extends WindowAdapter {

public void windowClosing(WindowEvent hendelse) {

... sett inn kode her ...

dispose();

System.exit(0); // hvis programmet skal avsluttes

}

}

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.

dialogvinduer eksempel
Dialogvinduer, eksempel

foreldrevindu med

to barnevinduer

Nytt navn skrives inn

og sendes tilbake til

hovedvinduet.

Navnet endres, og resultatet

sendes tilbake til hovedvinduet

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.

dialogvinduer
Dialogvinduer
  • Et dialogvindu er et sekundærvindu, det vil si at det alltid bør være knyttet til et foreldrevindu.
  • Et modalt dialogvindu hindrer brukeren tilgang til andre vinduer så lenge dialogvinduet er åpent.
  • Ikke-modale vinduer er mer praktiske for brukeren, men krever mer av programmereren i og med at flere vinduer må holdes oppdatert på en gang.

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.

det enkleste dialogvinduet
Det enkleste dialogvinduet

1

2

visDialog()

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.

meldingsutvekslingen i det aller enkleste dialogvinduet
Meldingsutvekslingen i det aller enkleste dialogvinduet

System.

out

foreldre-

vindu

knapp

knappelytter

dialog-

boks

okKnapp

knappelytter

”klient”

setVisible()

trykk

actionPerformed()

visDialog()

setVisible(true)

trykk

actionPerformed()

setVisible(false)

println(”OK trykket…”)

ikke retur før meldingen

setVisible(false) sendes

til dialogboksen

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.

hvordan gj r vi det kort fortalt
Hvordan gjør vi det, kort fortalt

Vis programliste 15.3 side 540-541

  • Et dialogvindu er en subklasse til JDialog. Den må ha en konstruktør som kaller superklassen sin konstruktør med argumentet modal = true. (Standardkonstruktøren til JDialog lager en ikke-modal dialog.)
  • La hvert enkelt dialogvindu ha en metode med navn visDialog() e.l. Inne i denne metoden finner vi kallet setVisible(true). For modale dialogvinduer vil denne metoden ikke returnere før setVisible(false) er kalt.
  • All aktivitet i dialogen må avsluttes med kallet setVisible(false).
  • Lag foreldrevinduet med dialogene som objektvariabler.

Gjør oppgave 1 side 552

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.

en standard ok avbryt dialog
En standard OK-Avbryt-dialog
  • OK betyr at endringene som er lagt inn i dialogvinduet skal gjelde.
  • Avbryt betyr at endringene ikke skal gjelde.
  • Vi lager en klasse som beskriver et dialogvindu med disse knappene og lar våre øvrige dialogvinduer være subklasser til denne.
  • Klassen heter MinDialog og ligger i pakken mittBibliotek.
  • Øvrig funksjonalitet:
    • Klassen inneholder metoden okData(). En subklasse kan lage sin egen utgave av denne metoden for kontroll av inndata. Dersom brukeren trykker OK vil ikke dette aksepteres dersom okData() returnerer false.
    • Dersom brukeren prøver å lukke vinduet ved å trykke i øverste høyre hjørne, vil spørsmålet ”Skal eventuelle registrerte data lagres?” komme. Hvis brukeren svarer ja, vil dataene lagres dersom okData() returnerer true.
    • OK-knappen er definert som standardknapp.
    • Escape-tasten er knyttet til Avbryt-knappen.

Vis programliste 15.4 side 544-546

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.

overf ring av data mellom foreldrevindu og dialogvindu
Overføring av data mellom foreldrevindu og dialogvindu

Hansen, Ole

Hansen, Ole Petter

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.

tester persondialog
Tester PersonDialog

Foreldrevindu extends JFrame

PersonDialog extends MinDialog

JOptionPane,

kommer dersom brukeren

lukker navnedialogen

ved å trykke i

øverste høyre hjørne

Vis programliste 15.5 side 548-551

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.

gui komponenten tabell klassen jtable
GUI-komponenten tabell (klassen JTable)
  • En tabell har kolonner og linjer. Kolonnene har navn.
  • Brukeren kan velge linjer i tabellen ved å klikke på dem.
  • Kan sette opp om det skal være mulig å velge kun én linje av gangen, ett intervall av linjer, eller flere intervall.
  • Valget håndteres omtrent på samme måte som for lister.
  • Standard er at brukeren velger linjer, ikke celler.
  • Brukeren kan endre dataene direkte i cellene.

Vis programliste 15.6

side 552-553.

Gjør oppgaven side 554

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.

oppussingseksemplet siste utgave klassene fra kapittel 10 med gui
Oppussingseksemplet, siste utgave- klassene fra kapittel 10 med GUI

JTable

JList

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.

gridbaglayout som layout h ndterer
GridBagLayout som layout-håndterer
  • GridBagLayout er den mest generelle layout-håndtereren av alle, og ofte den eneste praktisk brukbare.
  • Den egner seg ikke for prøv- og feil-metoden.
  • Den krever nøyaktig og detaljert planlegging.
  • Den har mange parametere, en feil kan gi uante konsekvenser.
  • Lag først en skisse av vinduet:
    • Del det opp i ruter ved hjelp av loddrette og vannrette streker.
    • Ikke mer enn en komponent i hver rute.
    • En komponent kan gjerne dekke flere ruter.
  • På grunnlag av skissen setter vi opp kravene til hver enkelt komponent.

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.

eksempel

knappe-raden

tabellen til venstre

listen til høyre

ledeteksten nederst

tekstboksen

gridx

0

0

3

1

2

gridy

0

1

1

2

2

gridwidth

4

3

1

1

1

gridheight

1

1

1

1

1

fill

NONE

BOTH

BOTH

NONE

HORIZONTAL

anchor

WEST

CENTER

CENTER

EAST

WEST

0

1

2

3

Eksempel

0

1

2

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.

eksempel forts
Eksempel, forts.

setLayout(new GridBagLayout()); // denne må vi ikke glemme!

GridBagConstraints krav = new GridBagConstraints();

krav.insets = new Insets(5, 5, 5, 5); // luft rundt en komponent, fast for alle

krav.weightx = 0.5; // fast for alle komponentene

krav.weighty = 0.5;

/* Knapperaden */

krav.gridx = 0;

krav.gridy = 0;

krav.gridwidth = 4;

krav.gridheight = 1;

krav.fill = GridBagConstraints.NONE;

krav.anchor = GridBagConstraints.WEST;

guiBeholder.add(knapperad, krav);

// ..osv. for alle komponentene

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.

kan vi styre st rrelsen p komponentene
Kan vi styre størrelsen på komponentene?
  • Hva med metoden setSize() i klassen Component?
    • Den arves av alle GUI-komponentene.
    • Vi har brukt den til å sette størrelsen på vinduer.
    • For andre komponenter virker den bare dersom vi ikke bruker noen layout-håndterer i det hele tatt. Komponentene legges da ut i henhold til oppgitte pikselverdier.
  • Hva med metodene setMaximumSize(), setMinimumSize() og setPreferredSize() i klassen JComponent?
    • Metodene arves av alle Swing-komponenter.
    • BorderLayout og GridLayout bryr seg ikke om noen av disse.
    • FlowLayout og GridBagLayout tar hensyn til en komponents ”preferred size”.
    • BoxLayout tar hensyn til alle ønskene. (Vurdert til å være nesten like vanskelig å bruke som GridBagLayout.)
    • Argumentet til alle disse metodene er et objekt av klassen Dimension. Konstruktør: Dimension(int bredde, int høyde).
    • Eksempel: liste.setPreferredSize(new Dimension(500, 300))

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.

gui til oppussingsprosjektet
GUI til oppussingsprosjektet
  • Filen Oppussingkap15GUI.java:
    • primærvinduet
  • Filen Oppussingkap15.java:
    • main(), kobler sammen objekter av klassene Oppussingkap15GUI og Oppussingsprosjekt
  • Filen Dialoger.java:
    • et dialogvindu for hvert av “hovedobjektene” i det problemet vi skal løse: FlateDialog, MalingDialog, TapetDialog og BeleggDialog.
  • Filen Datamodeller.java
    • datamodeller for listen og tabellen
    • inneholder koblingen til oppussingsprosjekt-objektet
  • Filen Konstanter.java:
    • et interface med konstanter
      • navn på tabellkolonner og lengder på tekstfelt, m.m.
  • Filene KnappeInfo.java og Hjelpemeny.java
    • enum-typer for knapperad og hjelpemeny

Vis programliste 15.7, 15.8 og 15.9 fra side 559 og utover.

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.

lage egne datamodellklasser
Å lage egne datamodellklasser
  • Trenger å forholde oss til den underliggende datamodellen når datainnholdet i GUI-komponentene liste (JList) og tabell (JTable) skal oppdateres
  • DefaultListModel og DefaultTableModel kan brukes
  • Kan også lage våre egne
  • Datamodell for JList
    • Subklasse til AbstractListModel
    • Må implementere Object getElementAt(int indeks) og int getSize()
    • Må varsle datamodellen når dataene er forandret:
      • protected metode fireIntervalAdded() (flere metoder, se online API-dok.)
      • kaller den fra en egenlaget offentlig metode
  • Datamodell for JTable
    • Subklasse til AbstractTableModel
    • Må implementere int getColumnCount(), int getRowCount() og Object getValueAt(int rad, int kolonne)
    • Må varsle datamodellen når dataene er forandret: fireTableDataChanged() (flere metoder, se online API-dok.)
  • Kan selvfølgelig lage egne utgave av arvede metoder, dersom ønskelig

Vis programliste 15.10 side 570-572. Gjør oppgaven side 573.

Kun til bruk i tilknytning til læreboka ”Programmering i Java” skrevet av Else Lervik og Vegard B. Havdal, 3.utgave, Stiftelsen TISIP og Gyldendal Akademisk 2004.