1. No category

Konseptuell modell,
skjermdesign
og konstruksjon
Vedlegg til øving D3
1. Gjennomgående eksempel
2. Beskrivelse av konseptuell modell
3. Skjermdesign, kobling mot konseptuell modell og
oppførsel
4. Dokumentasjon av konstruksjon
1. Gjennomgående eksempel
• For å illustrere notasjonene som skal benyttes i øvingen
har vi laget et veldig enkelt gjennomgående eksempel:
Programmet Gruppeliste.
– Du skal lage et program for å håndtere en gruppe (liste) av
personer. Dette kan for eksempel være en venneliste.
– For hver person i listen skal det vises navn, e-mail og fødselsdato.
– Det skal være mulig å legge til nye personer og endre persondata.
• Lysbildene med ramme angir hva som skal leveres i
rapporten i øving D3.
2. Konseptuell modell (generelt)
• Den konseptuelle modellen beskriver de
begrepene brukeren skal behøve å forholde seg
til.
• Disse beskrives tekstlig og v.h.a. UMLdiagrammer, der begrepene enten blir til klasser,
datafelt i klassene, eller navn på relasjoner
mellom klasser.
• Klassene kan forholde seg til hverandre v.h.a arv
(”er”-relasjoner) eller aggregering ( ”har”/”består
av”-relasjoner).
2. Konseptuell modell (innlevering)
• I Gruppeliste er begrepene:
Gruppe, Person, Navn, e-mail og
Fødselsdato.
• Sammenhengen mellom disse
begrepene er:
– en person har et navn, en e-mail og en
fødselsdato.
– En gruppe kan bestå av et vilkårlig
antall personer.
• UML-diagrammet til høyre viser dette.
(Alle figurer er på engelsk)
Grou p
0..1
persons
0..n
Perso n
name
email
dateOfBirth
3. Skjermdesign (generelt)
• Hensikt å beskrive
– den overordnede strukturen til brukergrensesnittet,
uten konstruksjonsdetaljer
– sammenheng mellom brukergrensesnittet og
den konseptuelle modellen
• Abstrakt, unngår detaljer
– hierarkisk struktur, men ikke komponentstruktur
– hva slags data vises hvor, men ikke modell-klasser
– omtrentlig layout, men ingen LayoutManager-logikk
• Et godt utgangspunkt for konstruksjon
3. Skjermlayout (innlevering)
Skissen til venstre viser skjermlayout:
– panel som viser liste av Personobjekter
• støtter seleksjon av Person-objekt
Group group (view)
Person[ ] persons =
group.persons (view)
- Person seleksjon
Viser frem liste av
Person-objekter, hvorav
en kan velges. Valgt
Person skal vises i
hvert sitt panel til høyre.
Person person = seleksjon
(view, edit)
= person.name (edit)
= person.email (edit)
= person.dateOfBirth (edit)
= seleksjon
(view)
som over, men kun view
nyPerson(group) (edit)
– panel som støtter visning og
editering av det Person-objektet
som er selektert i
Person-liste-panelet
• editering av name-attributtet
• editering av email-attributtet
• editering av dateOfBirth-attributtet
– panel som støtter visning av det
samme selekterte Person-objektet
som over
– nyPerson-aksjon som operererer
på Group-objektet i vinduet over
Notasjon for skjermlayout (1)
• Boks for komponent
• Deklarasjon av dataene som
komponenten håndterer
– (logisk) datatype, klassenavn,
evt. array-klammer
– variabelnavn
– initiell verdi, uttrykk som kan
referere til andre variabler
– Funksjon – view og/eller edit
• Type, navn og tekstlig
beskrivelse kan utelates
Person person = seleksjon
(view, edit)
= person.name (edit)
= person.email (edit)
= person.dateOfBirth (edit)
Notasjon for skjermlayout (2)
• Boks for komponent
• Deklarasjon av dataene som
komponenten håndterer
– (logisk) datatype, klassenavn,
evt. array-klammer
– variabelnavn
– initiell verdi, uttrykk som kan
referere til andre variabler
• Funksjon – view og/eller edit
• Lokale variabler
• Tekstlig beskrivelse
Person[ ]
persons =
group.persons
(view)
- Person seleksjon
Viser frem liste av
Person-objekter, hvorav
en kan velges. Valgt
Person skal vises i
hvert sitt panel til høyre.
Notasjon for skjermlayout (3)
• View eller Edit
– Bruk View dersom dataene i dette feltet kun skal
vises fram.
– Bruk Edit dersom brukeren skal kunne endre
innholdet.
3. Kobling konseptuell modell (innlevering)
Konseptuell
modell
Skjermlayout
Group group (view)
Grou p
0..1
persons
0..n
Perso n
name
email
dateOfBirth
Person[ ] persons =
group.persons (view)
- Person seleksjon
Viser frem liste av
Person-objekter, hvorav
en kan velges. Valgt
Person skal vises i
hvert sitt panel til høyre.
nyPerson(group) (edit)
Person person = seleksjon
(view, edit)
= person.name (edit)
= person.email (edit)
= person.dateOfBirth (edit)
= seleksjon
(view)
som over, men kun view
3. Koblinger mellom data (innlevering)
Group group (view)
Person[ ] persons =
group.persons (view)
- Person seleksjon
Viser frem liste av
Person-objekter, hvorav
en kan velges. Valgt
Person skal vises i
hvert sitt panel til høyre.
nyPerson(group) (edit)
Person person = seleksjon
(view, edit)
= person.name (edit)
= person.email (edit)
= person.dateOfBirth (edit)
= seleksjon
(view)
som over, men kun view
3. Konkret skjermdesign (innlevering)
Group group (view)
Person[ ] persons =
group.persons (view)
- Person seleksjon
Viser frem liste av
Person-objekter, hvorav
en kan velges. Valgt
Person skal vises i
hvert sitt panel til høyre.
Person person = seleksjon
(view, edit)
= person.name (edit)
= person.email (edit)
= person.dateOfBirth (edit)
= seleksjon
(view)
som over, men kun view
nyPerson(group) (edit)
Konkret realisering i SWING
Skjermlayout
3. Virkemåte (innlevering)
• Brukeren velger en
person i listen, og kan
deretter se persondata
og endre navn, e-mail
og fødselsdato.
• Brukeren trykker ”Ny
person” og får opp en
tom person. Data for
navn, e-mail og
fødselsdato kan legges
inn/endres.
4. Konstruksjonsbeskrivelse
• Hensikt
– å vise hvilke klasser og objekter som inngår i løsningen
– hvordan disse støtter implementasjonen av
den abstrakte GUI-modellen
• hvilke klasser implementerer vinduer og panes
• hvordan representeres ”variablene” i GUI-modellen
• Diagrammer
– utdyping av GUI-modellen med konstruksjonsklasser
– tradisjonelle klassediagrammer med relevante klasser
– interaksjonsdigrammer for sentrale sekvenser
4. MVC i layout (innlevering)
• Introduserer klasser som implementerer Model-,
View- og Controller-rollene
– kombinasjoner
av roller (M,V,C)
– klasser og impl.
grensesnitt
VC: GroupPanel, ListSelectionListener; M: Group
VC: JList;
M: PersonListModel
VC: PersonPanel;
M: Person
VC: JTextField
VC: JFormattedTextField
• Utelater komp.spesifikke støtteklasser
VC: JFormattedTextField
V: PersonPanel
M: Person
VC: JButton;
M: NewPersonAction
Datatyper og GUI-elementer
• Boolean
– avkryssningsboks, krever tydelig ledetekst
– radioknapper/nedtrekksliste/liste med symmetriske
valg (ja/nei, av/på, ...)
• Heltall
– tekstfelt, krever validering
– radioknapper, relevant valg + ”Andre...”-knapp
– combobox, tekstfelt med validering + relevante valg
– tall med opp/ned-knapper
– slider, relevant verdiområde og granularitet
Datatyper og GUI-elementer...
• Desimaltall
– tekstfelt, krever validering
– slider, relevant verdiområde og granularitet
• Dato
– tekstfelt med validering (merk datoformat)
– uavhengig innfylling av år, måned og dag som tall
– nedtrekksdialog for kalender
• Tekst
– tekstfelt, evt. validering og komplettering
– combobox, tekstfelt + relevante valg
– merk at tekstvariabler ofte brukes til å begrensede sett
Datatyper og GUI-elementer...
• Egne objekter
– bruk av navn (er egen ID) som nøkkel
– liste av ”relevante” objekter, f.eks. alle av en
klasse, naboer et nettverk, parent-kjede, etc.
– combobox med komplettering gir stor fleksibilitet
• Strukturer
– aggregeringshierarki, tre-komponent
– 1-n – relasjon, lister side om side
– klassifiseringshierarki, felles visning med ulike
ikoner
4. Konstruksjon
• Hvordan beskrive
– ferdige komponenter
– hvilke komponenter som GUI’et består av
– hierarkisk sammensetning
– hvordan disse samspiller
• Klassehierarki for ferdig komponenter
• Objektdiagram for instanser og relasjoner
• Interaksjonsdiagram (sequence,
collaboration) for samspill
4. Konstruksjon
• Klasser
– arving
– impl.
Ab stractListModel
NewPerso
nAction
PersonList
Model
Ab stractAction
• Properties
Group
0..n
listeners
model ListModel
0..1
JList
0..n
GroupListen
er
personList
cellRenderer
action
persons
JButton
PersonLine
GroupPanel
ListCellRender
er
• Relasjoner
– navn
– kardinalitet
group
value
pp1
JPanel
pp2
0..n
1
<<Interface>>
PropertyChangeListener
– felt som kan lese og
skrives fritt vha. getog set-metoder
– utelat metodene selv
PersonPanel
0..n
model
1
Person
name
email
dateOfBirth
1
emailTextField
nameTextField
JTextField
dateOfBirthTextField
pcs
1
Pro pertyC hangeSupport
JFormatted
TextField
formatter
AbstractFor
matter
RegexpFor
matter
EmailFor
matter
JList
4. Konstruksjon
• Komponenthierarki
• Arving av
Swing-klasser
• Relasjonsnavn
personList
JButton
GroupPanel
pp1
JPanel
pp2
PersonPanel
emailTextField
nameTextField
JTextField
JFormatted
TextField
dateOfBirthTextField
Konstruksjon
NewPerso
nAction
Ab stractListModel
PersonList
Model
group
0..n
listen ers
model ListModel
Ab stractAction
Group
JList
persons
0..n
GroupListen
er
personList
action
0..n
value
PersonLine
JButton
ListCellRender
er
• • • • 0..1
Abstrakte klasser og grensesnitt
Relasjoner mellom Swing-klasser og egne
Flyktige relasjoner
Modell-klasser vs. GUI-klasser
1
Person
4. Sentrale sekvenser
panel :
GroupPanel
action :
NewPersonAction
group : Group
listModel :
PersonListModel
jList :
List DataList ener
getGroup
addPerson
groupChanged
intervalAdded
4. Sentrale sekvenser
panel :
GroupPanel
1: getGroup
jButton :
JButton
action
action :
NewPersonAction
jList :
List DataListener
4: intervalAdded model
listModel :
PersonListModel
2: addPerson
group
group :
Group
3: groupChanged
4. Sentrale sekvenser
personList :
JList
groupPanel :
ListSelectionList ener
pp1 :
PersonP anel
addListS electionListener(List Select ionLis tener)
valueChanged(List SelectionEvent )
getS electedValue
setModel
setModel
pp2 :
PersonPanel
4. Sentrale sekvenser
5: setModel
groupPanel :
ListSelectionListener
pp2 :
PersonPanel
2: valueChanged(ListSelectionEvent)
4: setModel
personList
: JLis t
1: addListSelectionListener(ListSelectionListener)
3: getSelectedValue
pp1 :
PersonPanel