UTBILDNING FÖR SIBA I WEB FOUNDATION Erik Brandin, 16 februari 2010.

En presentation över ämnet: "UTBILDNING FÖR SIBA I WEB FOUNDATION Erik Brandin, 16 februari 2010."— Presentationens avskrift:

1 UTBILDNING FÖR SIBA I WEB FOUNDATION Erik Brandin, 16 februari 2010

2  Vilka förväntningar har ni på dagen? FÖRVÄNTNINGAR

3  En första inblick i Web Foundation  Förstå vad Web Foundation är  Veta hur Web Foundation kan anpassas  Övningar SYFTE MED DAGEN

4  Demo av Web Foundation – (15min)  Presentation av MVC – (60min)  Demo av eNOVA CMS (och tillägg gjorda i Web Foundation) (15min)  Lab #1 - Anpassning av vy (30 min)  Koppling mellan sidtyper – controller/action och vyer i CMS/WF (15min)  Lab #2 – Skapa ny vy (60 min)  Arkitektur Web Foundation (60 min)  Lab #3 – Utökning av befintlig funktion i Web foundation (60min) –Utökning av vydata (modellen) –Ny interaktionslogik –Ny affärslogik  Wrap up (15 min) AGENDA

5  Demo av Web Foundation DEMO

6  Kommande timmen kommer vi att stifta bekantskap med Microsoft MVC  Förståelse för ASP.NET MVC krävs för att få ut maximalt av Web Foundation  Web Foundation inför en hel del förändringar i standardbeteendet i ASP.NET MVC PRESENTATION AV ASP.NET MVC

7  MVC är ett arkitekturellt designmönster  Beskrevs första gången 1979  Finns i många implementationer –Ruby on Rails, Spring och Struts, Monorail med flera –http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controllerhttp://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller  Microsoft ASP.NET MVC är en av dessa implementationer –Första releasen 2009!  Microsoft MVC är ett lager ovanpå ASP.NET –ASP.NET kan användas i en MVC applikation MVC I ÖVERSIKT VAD ÄR MVC

8  Controller –Hanterar kommunikationen med användaren  Model –Innehåller all data som behövs för att visa sidan  View –Användargränssnitt MVC I ÖVERSIKT GRUNDPELARE I MVC

9  Separerar logik från design  Testbart  ASP.NET MVC är utbyggbart och utbytbart  Enkelt att påföra ny design –”Saknar” ASP.NETs beroende mellan HTML och affärslogik MVC I ÖVERSIKT VARFÖR BEHÖVS MVC

10  Nu går vi in på detaljer i Microsoft ASP.NET MVC ASP.NET MVC

11  Det finns en default route i MVC –{controller}/{action}/{id}  Exempel ”http://www.ajprodukter.se/Product/Show/Screwdriver  Metoden som kommer att anropas är: ProductController.Show(string id)  Vyn som visas: /Views/Product/Show.aspx  I eNOVA CMS är detta inte hela sanningen… ROUTE TABELL VILKEN KOD KÖRS DÅ WEBBLÄSAREN BEGÄR EN SIDA?

12  Controllers är den del av MVC som ansvarar för att… –…ta emot request från klienten (webbläsaren) –…validerar requestet –…hämtar data och ser till att vidarebefordra till rätt vy  Controller ärver från basklassen System.Web.Mvc.Controller –Har ett namn som slutar på Controller  Actions är de metoder på controllern som kan ta emot ett anrop från klienten  Action-metoden är alla publika metoder i en controller som returnerar ett ActionResult  Återigen är detta inte hela sanningen i eNOVA CMS… CONTROLLERS OCH ACTIONS ANSVARSOMRÅDE FÖR CONTROLLERS OCH ACTIONS

13 KODEXEMPEL ENKEL CONTROLLER ACTION FRÅN SECTIONCONTROLLER  Följande kod svarar på anrop till /Section/List/xxx

14  Data som skickas från controllern kan vara en databärande klass –Detta ger typade dataobjekt i vyerna vilket ger intellisense-stöd i VS –Enklare för vy-utvecklare –Skapat många databärande klasser med repetitiv kod  Men även Microsoft MVC har en generisk ViewData –I praktiken en dictionary med otypad data (string-object) –Enkel att skapa ny data –Försvårar för vyutvecklare då man inte får hjälp av Visual Studio  Typad och otypad data kan blandas  Vi har valt att så långt som möjligt endast använda typade modellobjekt MODEL MODEL ÄR DATA SOM SKICKAS FRÅN CONTROLLERN

15  Vyn bär ansvaret att skapa användargränssnittet  Vyer är MVC en klass som ärver från System.Web.Mvc.ViewPage  Controllern skicka all data som krävs för presentationen till vyn  Kodblock läggs in i vyn med –Ser vid första anblick ut som klassisk ASP – är kortform för –Notera användningen av semikolon  Kod i vyn ska vara enkel presentationslogik –Ingen affärslogik bör ligga i vyn –Javascript är (ibland) presentationslogik och kan bli komplex  Ingen begränsning på html som kan genereras VIEW VYNS ANSVAR I MVC ÄR ENDAST PRESENTATION

16  En typad vy ärver från System.Web.Mvc.ViewPage –T är en generisk klass som är åtkomlig från vyn genom propertyn Model  En otypad vy ärver från System.Web.Mvc.ViewPage –Propertyn ViewData är en dictionary som otypad data –ViewData finns även för typade vyer TYPAD VS OTYPAD VY EN TYPAD VY HAR EN SÄRKILT UTPEKAD MODELLKLASS

17 EXEMPEL PÅ EN ENKEL VY I ENOVA CMS

18  Partiella vyer (ascx) –Motsvarar user controls i ASP.NET –Kan vara starkt typade precis som vyer  En partiell renderas oftast från en ”vanlig vy” –Då den anropas från en annan vy skickas ofta en delmängd av modellobjektet med, exempelvis en produkt i en produktlista  Kan även ”anropas” från en controller –Görs oftast vid AJAX-anrop där resulterande html är en delmängd av presentationen PARTIELLA VYER LIKA MED USER CONTROL

19  Masterpage stödjs av ASP.NET MVC  Samma modellobjekt som skickas till vyn skickas till master page –Alla våra ViewData implementerar interfacet IMasterPageViewData –IMasterPageViewData innehåller data för meny, breadcrumb, varukorg etc. MASTERPAGE MASTERPAGE, VYER OCH PARTIELLA VYER

20  Hittills har vi visat hur ASP.NET MVC fungerar  Vi har gjort anpassningar av detta i MVC B2B FOUNDATION VAD ÄR B2B FOUNDATION

21  B2B Foundation baseras på ASP.NET MVC  Innehåller basfunktionalitet som de flesta B2B applikationer behöver  Är komponentiserat och utbytbart i de flesta avseenden delar –Controller, vydata, affärslogik (service-lager) –Dependency Injection via AutoFac-ramverket  Viss javascript funktionalitet med jQuery B2B FOUNDATION VAD ÄR B2B FOUNDATION

22  Controller kan bytas ut dynamiskt –Att byta ut en controller sker i kod eller konfiguration och sker normalt endast vid installation –Denna anpassning sker i B2B Foundation  Affärslogik kan kundanpassas –Utöka eller byta ut basfunktionalitet  Vydata (=Model) kan kundanpassas  Controller/Action/Vyer väljs i backoffice –Controller/Action väljs under ”Händelse” –Vyer väljs under ”Vy” –Varje CMS-sida eller produktsida kan konfigureras till att använda någon av de vyer projektet har implementerat –Denna anpassning sker i Enova CMS  Routes byggs upp per sida för bättre sökmotoroptimering ANPASSNINGAR AV ASP.NET MVC ENOVA CMS OCH B2B FOUNDATION HAR GJORT VISSA INGREPP I MVC

23  Html-helpers är hjälpfunktioner som genererar html-kod –Bör endast användas för att generera enkla html taggar –Innehåller endast för presentationslogik  En mängd html helpers finns inbyggt –Html.BeginForm –Html.Image –Html.Input –Html.Hidden –Html.ListBox –Html.ActionLink  Kan skapa egna html helpers efter behov, exempelvis –Html.SystemText –Html.BuildUrl (i praktiken samma som Html.ActionLink men där data för att generera länken hämtas från eNOVA) –Html.ProductImage HTML HELPERS HTML HELPERS GENERERAR HTML-KOD

24  Html.RenderPartial –Används för att bryta ut repetitiv html-kod –Anropar en partiell vy  Html.RenderAction –Anropar en specifik action på en controller och infogar resultatet i html dokumentet –Smidigt sätt att skapa nytt innehåll direkt i vyn –Egentligen inte MVC, utan MVP –Något sämre prestanda än RenderPartial eftersom en controller factory måste anropas HTML HELPERS HTML HELPERS ANVÄNDS FÖR ATT ANROPA PARTIELLA VYER

25  Demo av eNOVA CMS DEMO

26  Anpassning av en befintlig vy LAB #1

27  En sidtyp i eNOVA CMS är en klass som ärver EnovaCmsPage  Denna ska inte ha några språkberoende attribute –Språkberoende ligger på sajt-nivå istället  Inbyggd versionshantering i revisionsdatabasen  I övrigt precis som vilken eNOVA-klass som helst KOPPLING MELLAN SIDTYP, ACTION OCH VY SIDTYP

28  Vilka valbara händelser och vyer anges i webbkoden  Men valen dyker upp i backoffice  Ingen webbkod ligger i core-filerna (med eNOVA-klasser)  Händelser och vyer synkroniseras över från web applikationen till backoffice vid uppstart SYNKRONISERING AV HÄNDELSER OCH VYER

29  eNOVA-klasser exponeras inte direkt i vyn –Vi behöver en vydataklass för detta (=modell)  En arvsstruktur i eNOVA-klasser bör (=skall) matchas av samma arvsstruktur i vydatatyp  Det är en 1-1 koppling mellan sidtyp och vydatatyp  Vydataklassen är en databärande klass som markeras med attributete CmsPageTypeDefinitionAttribute KOPPLING MELLAN SIDTYP, ACTION OCH VY CMS VIEW DATA TYPE

30  Vydatatypen används för att ange vilken controller/action och vy som kan väljas i backoffice  En vydatatyp bör ha actions i endast en controller  En valbar action markeras med två attribut: –ActionDefinitionAttribute för att ge ett friendly name (en per språk) –ViewDataDefinitionAttribute för koppling till sidtypen HUR ANGER MAN EN VALBAR HÄNDELSE (ACTION)

31  En sidtyp kan ha valfritt antal vyer –Valet av vy är frikopplat från val av action… –…men mappen för vyn tas från controllern  En valbar vy markeras med attributen: –ViewDefinitionAttribute för friendly name –AssociatedToCmsViewDataAttribute för koppling till sidtypen  En code behind krävs för synkronisering av vyn.  Exempel på code behind: HUR MAN ANGER EN VALBAR VY

32  Vyerna i Web Foundation är typade  Dock är de inte typade på cms-vydatatypen  Händelsen bestämmer vilken vydatatyp som skickas till vyn  Alla vydatatyper i Web Foundation implementerar IMasterPageViewData  IMasterPageViewData har en property CmsData och det är denna som innehåller data från CMS-sidan  Mer om detta senare. OT: VYERNA TYPAS INTE PÅ CMS VYDATA

33  Skapa en ny vy i Sandbox-projektet  Starta web applikationen för att synkronisera över vyn till backoffice  Lägg in vyn på en befintlig sida  Anpassa vyn LAB #2

34  Ta utgångspunkt i lagerskissen.  Beskriv de olika lagren och dess ansvarsområden  Beskriv autofac  Gå tillbaka och ge exempel på hur vart och ett av lagren kan anpassas. Visa med kodexempel –controller via named service –Factory som container scoped –ViewData som factory scoped –ViewData som expression –Service som container scoped –Beroenden till service och factory i konstruktor –Beroenden till ViewData i IContainerProvider –Ge exempel på utökad funktion – StaticLeftMenuMasterPageViewDataFactory.  Skillnaden mellan CMS-vydata och WebFoundation vydata  Beräknad till 1h ARKITEKTUR I WEB FOUNDATION

35  Utöka funktionaliteten i sidan ”Kontakta oss”.  Cms sidtyp: Wipcore.Webfoundation.Core.ContactUsPage  Cms vydataklass: Wipcore.WebFoundation.Viewdata.CmsContactUsViewData  WF vydataklass: LAB #3