Modelldrevet utvikling av brukergrensesnitt og tjenester med Genova

Transkript

1 Utvikling med Genova Modelldrevet utvikling av brukergrensesnitt og tjenester med Genova

2 Agenda Hvem er jeg? Utviklingsmodell for Genova Kort demonstrasjon av generert system Gjennomgang av Genovas byggeklosser Rose og Genova Objektseleksjoner i Genova Dialogdesign i Genova Ressursdatabasen på overflaten Produksjon av en ny dialog fra modell til prototype 2

3 Hvem er jeg? Knut Sagli, sjefskonsulent i Esito Esito utvikler verktøy og leverer spisskompetanse i prosjekter 3

4 Esito sto Esito skal gi kundene lavere kostnader og bedre kvalitet i utvikling og vedlikehold av sine applikasjoner Støtte modelldrevet utvikling (MDU) Lage de beste kodegeneratorer 4 4

5 Genova tilbyr [Fullt hotell] Ønske om reservasjon Finn hotell «Class» Reservasjon Ansatt (from Aktører) «Class» hotell::hotell -hotell «Attribute» «Attribute» - 0..* - id: int Velg romkategori fradato: Date 1 - id: int - logo: String - tildato: Date - navn: String - sted: String [Fullt i romkategori] -reservasjoner 0..* 0..* -romkategori -kunde 1 «Class» kunde::kunde «Attribute» - epost: String Genova «Class» hotell::romkategori 1 «Attribute» - antallsoveplasser: int - id: int - romkvalitet: ERomkvalitet - sengtype: ESengtype t k d b tt i t Finn romkategori Vis alle hoteller i kjede Vis romov ersikt for hotell dialog:: FinnRomkategori dialog:: VisHotell dialog:: VisRomoversikt Client Service Data access Contro oller View Hooks Actions Hooks Services Persiste ence ping ORMap se Databa Generated code Written code Domain model 5

6 Genova fra oven Genova Genova Genova UI Designer Service Designer Domain Designer UI mal Modellutsnitt Domenemodell UI-modell Databasemodell Database Servicelogikk Domeneklasser Objekt-Relasjons- Mapping 6

7 Genova og metode Use case modell Scenarier Navigasjonsmodell Domenemodell Styleguide Dialogmodell Dialogmal Brukergrensesnitt prototype 7

8 Vi lager et lite system UML-modell Navigasjonsmodell Genova Workspace Synkronisering Setup Ressurser Objektseleksjon Dialogmodell Generering og kjørende kode 8

9 Detaljert use case - selvbetjent Reserv er rom for periode (fromreservasjon) 0.. * dialog: : Reserv errom Reserver rom ut fra profil 0..* (from Reservasjon) 0..* 0..* 0.. * 0..* Webkunde 0..* Oversikt over mine opphold/reserv asj oner dialog: : VisKundeprofil (from Aktører) (from Reservasjon) 0..* Oppdater profil (from Reservasjon) dialog: : VisKunde 9

10 Domenemodell - Hotell Hotellkj ede {root,leaf} - id: int - navn: String + Hotellkjede() -kj ede 1 -hoteller 1..* Hotell {root,leaf} - id: int - logo: String - navn: String - sted: String + Hotell() -hotell 1 HotellAs -hotell -rom * Rom - etasje: int - harbalkong: boolean - himmelretning: EHimmelretning - id: int - romnr: int + opptattpadato(date*) : Boolean + Rom() -rom 0..* -kategori 1 {root,leaf} -romkatkobl 1..* HotellRomkategori {root,leaf} - fradato: Date - tildato: Date «Group» - HRKGroup + HotellRomkategori() -romkatkobl RomkategoriAs -romkategori 0..* 1 Romkategori - antallsoveplasser: int - id: int - romkvalitet: ERomkvalitet - sengtype: ESengtype - storkunderabatt: int - utgangspris: int «Group» - RomKatMain + Romkategori() {root,leaf} 10

11 Domenemodell - Opphold Faktura {root,leaf} - fakturanr: int - fakturatekst: String + Regning() -faktura opphold 1..* Opphold {root,leaf} - lopenr: int «Group» - OppholdGroup + getfradato() : Date + gethotellnavn() : String + gethotellsted() : String + gettildato() : Date + Opphold() -opphold 1 -fakturaer 0..* -opphold 0..* -opphold opphold 0..* KundeOpphold -overnattingssted 1 -kunde 1 -kunde 1 kunde::kunde {root,leaf} - epost: String - kundenr: int - navn: String - telefonnr: String + Kunde() + lagtransaksjoner : void() hotell::hotell {root,leaf} - id: int - logo: String - navn: String - sted: String -hotell 1 -kunde 1 -reservasjoner Reservasjon -reservasjon {root,leaf} 0..* - fradato: Date id: int 0..* - tildato: Date -reservasjoner + Reservasjon() 0..* -overnattinger 0..* Ov ernatting {root,leaf} - dato: Date - id: int - overnattingspris: int + Overnatting() -overnattinger 0..* -rom 1 + Hotell() -hotell 1 -rom 1..* hotell::rom {root,leaf} - etasje: int - harbalkong: boolean - himmelretning: EHimmelretning - id: int - romnr: int + opptattpadato(date*) : Boolean + Rom() -rom 0..* -kategori 1 -romkategori 1 hotell::romkategori {root,leaf} - antallsoveplasser: int - id: int - romkvalitet: ERomkvalitet - sengtype: ESengtype - storkunderabatt: int - utgangspris: int «Group» - RomKatMain + Romkategori() 11

12 Domenemodell - Transaksjoner kunde::kunde {root,leaf} - epost: String - kundenr: int - navn: String - telefonnr: String KundeOpphold -kunde 1 + Kunde() + lagtransaksjoner : void() -kunde 1 0..* -transaksjoner 0..* Opphold - lopenr: int «Group» - OppholdGroup + getfradato() : Date + gethotellnavn() : String + gethotellsted() : String + gettildato() : Date + Opphold() -opphold 1 -overnattinger 0..* {root,leaf} Ov ernatting {root,leaf} - dato: Date - id: int - overnattingspris: int -opphold 0..* -opphold opphold 0..* -overnattingssted 1 hotell::hotell {root,leaf} -reservasjon -reservasjoner 0..* reservasjoner 0..* -hotell 1 - id: int - logo: String - navn: String - sted: String Reservasjon {root,leaf} - fradato: Date - id: int - tildato: Date + Reservasjon() gui::oppholdreservasjont {root,leaf} - fradato: Date - hotell: String + OPPHOLD: String = "Opphold" {readonly} + RESERVASJON: String = "Reservasjon" {readonly} - sted: String - tildato: Date - typetransaksjon: String + OppholdReservasjonT(Opphold*) + OppholdReservasjonT(Reservasjon*) + Overnatting() + Hotell() 12

13 Domenemodell - Kunde Kunde - epost: String - kundenr: int - navn: String - telefonnr: String + Kunde() + lagtransaksjoner : void() -kunde 1 {root,leaf} -kunde 1 -kunde 0..* -reservasjonsmaler 0..* -personinfo 0..1 Person {root,leaf} - bostedsadresse: String - id: int - postnr: int + Person() -firmainfo 0..1 MalReservasjon {root,leaf} Firma - besoksadresse: String - besokspostnr: int - fakturapostnr: int - fakturaadresse: String - orgnr: int - postadresse: String - postpostnr: int + Firma() {root,leaf} - id: int - romkategoritekst: String 0..* -hotell 1 hotell::hotell {root,leaf} - id: int - logo: String - navn: String - sted: String + Hotell() 0..* -romkategori 1 hotell::romkategori {root,leaf} - antallsoveplasser: int - id: int - romkvalitet: ERomkvalitet - sengtype: ESengtype - storkunderabatt: int - utgangspris: int «Group» - RomKatMain + Romkategori() 13

14 Navigasjonsmodell Webhotell «Contains» WebhotellApp «Contains» VisKunde «Contains» «Contains» VisKundeprofil ReserverRom 14

15 Genova - Synkronisering 15

16 Genova Fra objektseleksjon j til dialogmodell uide tylegu St Objektseleksjon Dialogmodell 16

17 Genova Objektseleksjon j & Dialog 17

18 Genova Preview 18

19 Koden som er håndskrevet 19

20 Genova Generering av skjema 20

21 Generering av kildekode Klientmaler Klientfil.java Klientfil.java Klientfil.java Klientgenerat Servicefil.java Servicefil.java Servicefil.java Servicemaler Servicegenerat Dataaccessmaler Generator Domene.java Domene.java Domene.java Mappingfil.hbm.xml Mappingfil.hbm.xml Mappingfil.hbm.xml Dataaccessgenerat Domenemaler Domenegenerat 21

22 Kjørende applikasjon asjo 22

23 Detaljert t gjennomgang ga g Rose og Genova Objektseleksjoner i Genova Dialogdesign i Genova Ressursdatabasen Kort om kodegenerering 23

24 Rose og Genova 24

25 Domenemodellen e ode e Domenemodellen lages i Rose og hentes så inn i Genova via NB! Det er ikke mulig å endre domenemodellen i Genova. Endringer må gjøres i Rose og deretter synkroniseres 25 inn.

26 Domenemodellen Gi roller fornuftige navn. Unngå navn som har, del_av, inneholder, består_av o.l. Navnet på klassen med liten forbokstav er ofte det beste navnet Det skal genereres en database fra domenemodellen. Løs opp i mange-til-mange relasjoner. Begrens navigasjonen der det er mulig for å unngå unødvendige relasjoner. 26

27 Navigasjonsmodellen Navigasjonsmodellen er en modell av applikasjonen med dialoger og forholdet mellom dialoger. Navigasjonsmodellen lages i et UML- verktøy (Rose) som en klassemodell med bruk av Genova-spesifikke stereotyper. 27

28 Navigasjonsmodellen s ode e Navigasjonsmodellen lages i Rose og hentes så inn i Genova via NB! Det er ikke mulig å endre navigasjonsmodellen i Genova. Endringer gjøres i Rose og synkroniseres 28 inn.

29 Genovas tillegg til Rose Med Genova følger et tillegg til Rose som inneholder noen stereotyper og mulighet til å legge inn ekstra informasjon i modellen. Genova-spesifikk informasjon legges inn i arkivkortene Genova UI og Genova DB i spesifikasjonsdialogen til attributtene i Rose. 29

30 Genova UI-dialogen i Rose - UserInterface Denne teksten blir brukt som standard ledetekst t i Genova. For å sikre konsistens mellom forskjellige dialoger bør derfor ledetekster endres i Rose og ikke i Genova direkte. 30

31 Genova UI-dialogen i Rose - UserInterface Display rule syntaks: X(n) = En sekvens på n alfanumeriske tegn. 31

32 Genova DB-dialogen i Rose - DataBase Når man skal lage en database, må man angi databaseorienterte verdier som Primary Key, Unique, Not Null osv. For assosiasjoner kan man angi fremmednøkler. 32

33 Objektseleksjoner (OS) i Genova 33

34 Lage en objektseleksjon (OS) En objektseleksjon er et utsnitt av klassemodellen. Den kan inneholde flere røtter. Den første roten skal imidlertid være den primære roten. På bakgrunn av objektseleksjonen kan vi generere kode som gir oss et sett av tjenester (bl.a. CRUD tjenester). Ved synkronisering mot Rose lages det automatisk tomme OS er for hver dialog angitt i navigasjonsmodellen. Ny objektseleksjon fra kontekstsensitiv meny 34

35 Lage en objektseleksjon e sjo (OS) Man må velge målmiljø for en objektseleksjon. Kontekstsensitiv meny gir deg muligheten for å utvide utsnittet av klassemodellen som objektseleksjonen representerer. Ekskluder uønskede attributter fra objektseleksjonen 35

36 Lage en objektseleksjon e sjo (OS) Dobbeltklikk på rollen gir deg egenskapsdialogen til rollen. (Også tilgjengelig via kontekstsensitiv meny) Gir mulighet for å endre navn. Inneholder også nyttig informasjon om rollen Generelt i Genova så gir både kontekstsensitiv meny og dobbeltklikk komponentens egenskapsdialog. 36

37 Lag en god objektseleksjon e sjo Hovedrot Her legges det primære modellutsnittet dialogen skal jobbe på. Den øverste noden er hovedklassen for hele dialogen Barn Rl Relevante klasser med navigerbar relasjon til roten kan og bør hektes på roten. Inputroller Ved behov for 2 noder for en klasse. (Eksempel kommer) Relaterte roller bør angis som subtrær også her. (Stjernen = én til mange relasjon) 37

38 Dialogdesign i Genova 38

39 Lage en dialog En dialogmodell er bygget på en objektseleksjon En dialogmodell er et tre bestående av dialogkomponenter Ved synkronisering mot Rose lages det automatisk tomme dialoger for hver dialog angitt i navigasjonsmodellen 39

40 Lage en dialog Første gang en dialog åpnes må følgende velges Informasjonsinnhold Skal være objektseleksjonen j med navn lik dialognavn_os. Regler for generering Målmiljø for kodegenerering g Vindustype 3 typer: Application window, (Kan endres es i ettertid td om ønskelig) Document window, DialogBox 40

41 Lage en dialog Java kode

42 Setting og endring av ledetekster 1. Genova UI.Title i Rose 2. Tekstfelt.Title 3. Tekstfelt.Label.Title Høyeste prioritet å foretrekke 42

43 Flytting av elementer og angring g Ta tak i elementet og trekk det dit du ønsker. Det røde punktet angir hvor det havner. Få elementet t i riktig blokk. Dessverre ingen angring. g Lagre hver gang g du er sikker/fornøyd så langt og lukk dialogen (uten å lagre) når du beveger deg bort fra ønsket resultat. 43

44 Dialogkomponenter aog o - Generelt e e Merk: General arkivkortet varierer mhp. komponent, men for de fleste gjelder følgende Navn på dialogelementer, navnestruktur kan settes i Style guide Hver enkeltkomponent er tilordnet en template og style. Container-elementer er i tillegg tilordnet en layout via: Arv (fra komponenten over) eller Manuell spesifikasjon Unngå bruk av disse, bortsett fra ved skjulte blokker 44

45 Dialogkomponenter aog o - Generelt e e Egenskaper ved de fleste dialogkomponentene Settes fortrinnsvis via overstyring av layout. I enkelttilfeller er det nødvendig dig å sette dette på enkeltkomponenter. (For eksempel listblokkelementer) Hvor mange kolonner komponenten skal strekke seg over. 45

46 Dialogkomponenter aog o - Datafelt t Komponent med knytning mot objektseleksjonen j Har en av flere mulige representasjoner: Textfield Check Button Radio Group Combo Box (List, Scale, Stepper) Representasjonsavhengige gg egenskaper 46

47 Spesiell symbolikk i dialogdesigner H X Dialogkomponenten er skjult ved åpning. Det er mulig å endre på dette i kjøretid Dialogkomponenten er knyttet til en annen komponent via et gyldig uttrykk/expression Ingen kopling mot objektseleksjon 47

48 Editering i treet Fra objektpaletten kan en opprette alle typer komponenter. Begrensninger på nøsting av komponenter, dvs. kun containerelementer kan inneholde andre elementer Editeringen av treet kan gjøres via drag and drop Nye komponenter fra objektpaletten skapes ved klikking. Den nye komponenten vil plasseres nederst i den blokken som er markert. 48

49 Tilordning av attributt og ledetekst Viser alle attributter i objektseleksjonen som enda ikke er brukt i dialogen

50 Listblokk Sortering og skjuling av kolonner Sortere på kolonnen. (No Sort, Ascending eller Descending) Skal kolonnen være synlig Skal kolonnen inneholde kun unike verdier 50 Skal bruker få lov til å sortere listen med hensyn på denne kolonnen. (Klikk på overskrift)

51 Tabulatorrekkefølge ato e i en dialog Lurt å gjøre: Venstre mot høyre, ovenfra og ned. Der objekter er åpenbart ordnet kolonnevis, skal rekkefølgen også følge disse kolonnene. Bruk drag and drop for å endre tabulatorrekkefølgen Kun markerte komponenter inngår i tabulatorsekvensen. 51

52 Event-definisjoner tde e Hvilken hendelse Metodenavn og metodeinnhold: Bruk actiontarget() Med hvilket objekt Hva skal skje Og hvor skal funksjonaliteten programmeres/genereres 52

53 Eksempel på hendelsesdefinisjoner Her genereres to action-metoder actionfindkunde actionsavekunde Metoden savekunde kaller først actionsavekunde, så actionfindkunde Rekkefølgen er signifikant Alle tidligere action-metoder er garantert ferdig eksekvert før neste påbegynnes Metoden findkunde kaller kun actionfindkunde 53

54 Limet mellom klient ogtje tjenere Noen OS relaterte actions: Find FindAll Insert Update Save Delete Clear GUI relaterte actions: Open Close Show Hide Enable Disable InsertRow RemoveRow ClearObject 54

55 Ressursdatabasen Layouts 55

56 Ressursdatabasen i korte trekk Style guide: Når en dialog åpnes for første gang genereres det automatisk en dialogmodell. Datafeltene i denne dialogen baseres på den valgte objektseleksjonen. Den visuelle representasjonen av disse dataene baseres på den valgte style guiden. Template: Navngitt kombinasjon av Style og Layout per komponenttype. Style: Navngitt kombinasjon av for- og bakgrunnsfarge, font, rammetype og størrelse. Layout: Navngitt kombinasjon av parametere for utlegg (posisjonering) av komponenter Colors, Fonts og Images angir henholdsvis farge, font og bilder. NB! Ikke noe vi skal endre. Vi skal kun bruke ressursene. 56

57 Layout generelt e e En layout gjelder kun for direkte barn av en container. (Den arves ikke nedover i treet. Ønsker man en arvet layout endring må man overstyre hvilken template som brukes.) Layouten satt i Kode2FeltBlokk gjelder kun for de markerte komponentene En blokk i en annen blokk regnes som enkeltkomponent, på lik linje med f.eks. tekstfelt, med hensyn på ledetekstplassering, utstrekning, justering, osv 57

58 Layoutressurser se Navnet på layoutene er bygget opp slik: DirectionNAlignFlex[No]Border [...] = valgfritt Border = Konstant Direction, N, Align, Flex = variable Vi skal nå se på den visuelle betydningen av disse konstantene og variablene. 58

59 Layoutressurser se DirectionNAlignFlex[No]Border Direction Line/Column prefiks som betyr linje eller kolonnevis utlegg Label og felt er en enhet Foretrekker Line Line Column 59

60 Layoutressurser se DirectionNAlignFlex[No]Border N = Antall kolonner i layouten. (De fleste layouter i ressursdatabasen har utlegg av komponenter linjevis.) n=3 n=3 60

61 Layoutressurser se DirectionNAlignFlex[No]Border Align angir justering av felter og ledetekster. Align = Left Centered Justified angir horisontal justering av ledetekster og felter per rad Left Justified Centered 1 kolonne for ledetekster, t 1 for felt, begge venstrejustert Ledetekster trukket ut mot venstre, felt ut mot høyre Ledetekster høyrejustert mot midtkolonne, felter venstrejustert fra midten 61

62 Layoutressurser se DirectionNAlignFlex[No]Border Align = None Above None angir horisontal justering av ledetekster og felter per rad Above angir justering av ledetekst i forhold til felt. None Above Ledetekst over felt, sentrert langs en felles akse. Ledetekst t kan i tillegg ha: Ledetekst umiddelbart etterfulgt av felt, ingen kolonner Verdi Top/Left Center Buttom/Right 62 Justering av ledetekst Venstre Midten Høyre

63 Layoutressurser se DirectionNAlignFlex[No]Border Align = Top Centered Bottom angir vertikal justering (der noen elementer er høyere enn andre). Top Centered Bottom angir justering av ledetekst i forhold til felt. Top Centered Bottom 63

64 Layoutressurser se DirectionNAlignFlex[No]Border Align = Left De aller fleste layoutene i ressursdatabasen er Left, Top, Top layouter. 64

65 Layoutressurser se DirectionNAlignFlex[No]Border Flex er består av tre elementer, de to første angir fleksibilitet, den siste hvor evt. ledig plass havner. Flex = Fixed Streched Spread angir horisontal fleksibilitet Fixed Bredeste element Bredeste element Kolonnene gjøres så brede som sitt største element, plass ut over summen av kolonnene blir til overs Bredeste element 65

66 Layoutressurser se DirectionNAlignFlex[No]Border Flex = Fixed Streched Spread angir horisontal fleksibilitet Streched Bredeste element Bredeste element Kolonnene strekkes og kan bli bredere enn bredeste element, slik at all tilgjengelig plass fylles Bredeste element 66

67 Layoutressurser se DirectionNAlignFlex[No]Border Flex = Fixed Streched Spread angir horisontal fleksibilitet Spread Bredeste element Bredeste element Tar opp all plass, men her legges luften mellom kolonnene Bredeste element 67

68 Layoutressurser se DirectionNAlignFlexHFlexV[No]Border Flex V= Fixed Streched Spread angir vertikal fleksibilitet. Den visuelle effekten er den samme som for horisontal fleksibilitet, bortsett fra at elementene strekkes/spres i den horisontale retningen. De fleste layoutene i ressursdatabasen er Fixed på vertikal fleksibilitet 68

69 Layoutressurser se DirectionNAlignFlexAnchor[No]Border Anchor = se matrise angir ankerpunkt. Dette er bare aktuelt dersom minst en av de foregående er Fixed, og forteller da hvordan feltene skal plasseres i forhold til luften rundt. Top Middle Buttom Left Middle Right TL TM TR ML MM MR BL BM BR 69

70 Layoutressurser se DirectionNAlignFlex[No]Border Border hvis layouten har en ramme (marg) NoBorder hvis layouten ikke har ramme Border (Med ramme) NoBorder (Uten ramme) 70

71 Kort om kodegenerering g 71

72 Generering av kildekode Klientmaler Klientfil.java Klientfil.java Klientfil.java Klientgenerat Servicefil.java Servicefil.java Servicefil.java Servicemaler Servicegenerat Dataaccessmaler Generator Domene.java Domene.java Domene.java Mappingfil.hbm.xml Mappingfil.hbm.xml Mappingfil.hbm.xml Dataaccessgenerat Domenemaler Domenegenerat 72

73 Swing: Generert dialogkode Skriv hooks 73

74 ICEfaces : Generated e view code «interface» ApplicationView «interface» DialogView «interface» ViewModel * FacesApplicationBean JSF managed property ListRow AbstractDialogView FacesDialogBean FacesDialogView <DialogName>Const <DialogName>DefaultBean <ListblockName>ListRow <DialogName>DefaultView <DialogName>Bean <DialogName>View 74

75 ICEfaces : Generated controller code ApplicationController * DialogController «interface» OSRole * <ObjectSelectionName>Const <DialogName>DefaultController <RoleName>Role <DialogName>Controller 75

76 Generert servicekode Skriv hooks 76

77 Applikasjonsarkitektur - Java Generert av Genova Genova rammeverk 3. part rammeverk Egen kode Domain model View Controller Logic/Actions/ Actions Hooks Hooks ServiceProxy ServiceProxy Spring Service interface Dom main model Service e Service e Service e Hooks Persistence WS/EJB/Pojo / Hibernate OR mapping 77 Database

78 Legg til ny dialog i UML-verktøyet Webhotell «Contains» VisKunde2 «Contains» WebhotellApp «Contains» VisKunde «Contains» «Contains» ReserverRom VisKundeprofil 78

79 Synkroniser og lag objektseleksjon j 79

80 Generer dialogmodell 80

81 Tilpass dialogmodell og ggenerer kode 81