Konseptuell modell, skjermdesign og konstruksjon

Transkript

1 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

2 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, 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.

3 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).

4 2. Konseptuell modell (innlevering) I Gruppeliste er begrepene: Gruppe, Person, Navn, og Fødselsdato. Sammenhengen mellom disse begrepene er: en person har et navn, en 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) Group 0..1 persons 0..n Perso n name dateofbirth

5 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

6 3. Skjermlayout (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. (edit) = person.dateofbirth (edit) = seleksjon (view) som over, men kun view Skissen til venstre viser skjermlayout: panel som viser liste av Personobjekter støtter seleksjon av Person-objekt panel som støtter visning og editering av det Person-objektet som er selektert i Person-liste-panelet editering av name-attributtet editering av -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

7 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. (edit) = person.dateofbirth (edit)

8 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.

9 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.

10 3. Kobling konseptuell modell (innlevering) Konseptuell modell Group 0..1 persons 0..n Perso n name dateofbirth Skjermlayout 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. (edit) = person.dateofbirth (edit) = seleksjon (view) som over, men kun view

11 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. (edit) = person.dateofbirth (edit) = seleksjon (view) som over, men kun view

12 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. (edit) = person.dateofbirth (edit) Konkret realisering i SWING nyperson(group) (edit) = seleksjon (view) som over, men kun view Skjermlayout

13 3. Virkemåte (innlevering) Brukeren velger en person i listen, og kan deretter se persondata og endre navn, og fødselsdato. Brukeren trykker Ny person og får opp en tom person. Data for navn, og fødselsdato kan legges inn/endres.

14 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

15 4. MVC i layout (innlevering) Introduserer klasser som implementerer Model-, View- og Controller-rollene kombinasjoner av roller (M,V,C) klasser og impl. grensesnitt Utelater komp.- spesifikke støtteklasser VC: GroupPanel, ListSelectionListener; M: Group VC: JList; M: PersonListModel VC: JButton; M: NewPersonAction VC: PersonPanel; M: Person VC: JTextField VC: JFormattedTextField VC: JFormattedTextField V: PersonPanel M: Person

16 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

17 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

18 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

19 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

20 4. Konstruksjon AbstractListModel NewPerso naction PersonList Model group Group Klasser arving impl. Relasjoner navn kardinalitet Properties felt som kan lese og skrives fritt vha. getog set-metoder utelat metodene selv AbstractAction action JButton JPanel <<Interface>> PropertyChangeListener nametextfield JTextField JList personlist GroupPanel pp1 pp2 PersonPanel textfield JFormatted TextField formatter AbstractFor matter model ListModel cellrenderer ListCellRender er dateofbirthtextfield RegexpFor matter PersonLine listeners GroupListen er value 0..n model 1 0..n 0..n 1 1 PropertyChangeSupport For matter Person name dateofbirth persons 0..n pcs

21 JList 4. Konstruksjon personlist Komponenthierarki Arving av Swing-klasser Relasjonsnavn JButton JPanel GroupPanel pp2 pp1 PersonPanel nametextfield textfield dateofbirthtextfield JTextField JFormatted TextField

22 Konstruksjon Ab stractlistmodel NewPerso naction PersonList Model group Group model ListModel 0..n listen ers 0..1 Ab stractaction JList 0..n persons action personlist GroupListen er value 0..n JButton PersonLine 1 Person ListCellRender er Abstrakte klasser og grensesnitt Relasjoner mellom Swing-klasser og egne Flyktige relasjoner Modell-klasser vs. GUI-klasser

23 4. Sentrale sekvenser panel : GroupPanel getgroup action : NewPersonAction group : Group listmodel : PersonListModel jlist : List DataList ener addperson groupchanged intervaladded

24 4. Sentrale sekvenser panel : GroupPanel jlist : List DataListener 1: getgroup 4: intervaladded model jbutton : JButton action action : NewPersonAction listmodel : PersonListModel 2: addperson group 3: groupchanged group : Group

25 4. Sentrale sekvenser personlist : JList grouppanel : ListSelectionList ener pp1 : PersonP anel pp2 : PersonPanel addlists electionlistener(list Select ionlis tener) valuechanged(list SelectionEvent) gets electedvalue setmodel setmodel

26 4. Sentrale sekvenser 2: valuechanged(listselectionevent) grouppanel : ListSelectionListener 5: setmodel 4: setmodel pp2 : PersonPanel personlist : JList 1: addlistselectionlistener(listselectionlistener) 3: getselectedvalue pp1 : PersonPanel