Web Foundation presentation

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

FÖRVÄNTNINGAR

 Vilka förväntningar har ni på dagen?

SYFTE MED DAGEN

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

AGENDA 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)

DEMO

 Demo av Web Foundation

PRESENTATION AV ASP.NET MVC  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

MVC I ÖVERSIKT VAD ÄR MVC  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%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 GRUNDPELARE I MVC

 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 VARFÖR BEHÖVS MVC

 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

ASP.NET MVC

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

ROUTE TABELL VILKEN KOD KÖRS DÅ WEBBLÄSAREN BEGÄR EN SIDA?  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…

CONTROLLERS OCH ACTIONS ANSVARSOMRÅDE FÖR CONTROLLERS OCH ACTIONS  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…

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

MODEL MODEL ÄR DATA SOM SKICKAS FRÅN CONTROLLERN  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

VIEW VYNS ANSVAR I MVC ÄR ENDAST PRESENTATION  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

TYPAD VS OTYPAD VY EN TYPAD VY HAR EN SÄRKILT UTPEKAD MODELLKLASS  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

EXEMPEL PÅ EN ENKEL VY I ENOVA CMS

PARTIELLA VYER LIKA MED USER CONTROL  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

MASTERPAGE MASTERPAGE, VYER OCH PARTIELLA VYER

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

B2B FOUNDATION VAD ÄR B2B FOUNDATION

 Hittills har vi visat hur ASP.NET MVC fungerar

 Vi har gjort anpassningar av detta i MVC

B2B FOUNDATION VAD ÄR B2B FOUNDATION

 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

ANPASSNINGAR AV ASP.NET MVC ENOVA CMS OCH B2B FOUNDATION HAR GJORT VISSA INGREPP I MVC 

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

HTML HELPERS HTML HELPERS GENERERAR HTML-KOD  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 ANVÄNDS FÖR ATT ANROPA PARTIELLA VYER  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

DEMO

Demo av eNOVA CMS

LAB #1  Anpassning av en befintlig vy

KOPPLING MELLAN SIDTYP, ACTION OCH VY SIDTYP  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

SYNKRONISERING AV HÄNDELSER OCH VYER  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

KOPPLING MELLAN SIDTYP, ACTION OCH VY CMS VIEW DATA TYPE  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

HUR ANGER MAN EN VALBAR HÄNDELSE (ACTION)

 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 MAN ANGER EN VALBAR VY  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:

OT: VYERNA TYPAS INTE PÅ CMS VYDATA  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.

LAB #2  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

ARKITEKTUR I WEB FOUNDATION    

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

LAB #3  Utöka funktionaliteten i sidan ”Kontakta oss”.   

Cms sidtyp: Wipcore.Webfoundation.Core.ContactUsPage Cms vydataklass: Wipcore.WebFoundation.Viewdata.CmsContactUsViewData WF vydataklass: