utbildning för siba i web foundation
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
UTBILDNING FÖR SIBA I WEB FOUNDATIONErik Brandin, 16 februari 2010
Vilka förväntningar har ni på dagen?
FÖRVÄNTNINGAR
En första inblick i Web Foundation
Förstå vad Web Foundation är
Veta hur Web Foundation kan anpassas
Övningar
SYFTE MED DAGEN
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
Demo av Web Foundation
DEMO
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
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 ÖVERSIKTVAD ÄR 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 ÖVERSIKTGRUNDPELARE I 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
MVC I ÖVERSIKTVARFÖR BEHÖVS MVC
Nu går vi in på detaljer i Microsoft ASP.NET MVC
ASP.NET MVC
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 TABELLVILKEN KOD KÖRS DÅ WEBBLÄSAREN BEGÄR EN SIDA?
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 ACTIONSANSVARSOMRÅDE FÖR CONTROLLERS OCH ACTIONS
KODEXEMPELENKEL CONTROLLER ACTION FRÅN SECTIONCONTROLLER
Följande kod svarar på anrop till /Section/List/xxx
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
MODELMODEL ÄR DATA SOM SKICKAS FRÅN CONTROLLERN
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
VIEWVYNS ANSVAR I MVC ÄR ENDAST PRESENTATION
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
TYPAD VS OTYPAD VYEN TYPAD VY HAR EN SÄRKILT UTPEKAD MODELLKLASS
EXEMPEL PÅ EN ENKEL VY I ENOVA CMS
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 VYERLIKA MED USER CONTROL
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.
MASTERPAGEMASTERPAGE, VYER OCH PARTIELLA VYER
Hittills har vi visat hur ASP.NET MVC fungerar
Vi har gjort anpassningar av detta i MVC
B2B FOUNDATIONVAD Ä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
B2B FOUNDATIONVAD ÄR B2B FOUNDATION
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 MVCENOVA CMS OCH B2B FOUNDATION HAR GJORT VISSA INGREPP I MVC
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
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 HELPERSHTML HELPERS ANVÄNDS FÖR ATT ANROPA PARTIELLA VYER
Demo av eNOVA CMS
DEMO
Anpassning av en befintlig vy
LAB #1
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 VYSIDTYP
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
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 VYCMS VIEW DATA TYPE
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)
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
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
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
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
Utöka funktionaliteten i sidan ”Kontakta oss”.
Cms sidtyp: Wipcore.Webfoundation.Core.ContactUsPage Cms vydataklass:
Wipcore.WebFoundation.Viewdata.CmsContactUsViewData WF vydataklass:
LAB #3