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 <% [Code]; %>
– Ser vid första anblick ut som klassisk ASP
– <%= Uttryck %> är kortform för <% Response.Write(Uttryck); %>
– 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>
– 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: