slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Utbildning för SIBA I Web Foundation PowerPoint Presentation
Download Presentation
Utbildning för SIBA I Web Foundation

Loading in 2 Seconds...

play fullscreen
1 / 35

Utbildning för SIBA I Web Foundation - PowerPoint PPT Presentation


  • 121 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Utbildning för SIBA I Web Foundation' - coyne


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1
Utbildningför SIBA I Web Foundation

Erik Brandin, 16 februari 2010

f rv ntningar
Förväntningar

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

syfte med 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
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)

slide5
Demo

Demo av Web Foundation

presentation av asp net mvc
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
MVC i översikt

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

Vad är MVC

mvc i versikt1
MVC i översikt

Controller

  • Hanterar kommunikationen med användaren

Model

  • Innehåller all data som behövs för att visa sidan

View

  • Användargränssnitt

Grundpelare i MVC

mvc i versikt2
MVC i översikt

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

Varför behövs MVC

asp net mvc
ASP.NET MVC

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

route tabell
Route Tabell

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…

Vilken kod körs då webbläsaren begär en sida?

controllers och actions
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…

Ansvarsområde för Controllers och Actions

kodexempel
Kodexempel

Enkel Controller Action från SectionController

Följande kod svarar på anrop till /Section/List/xxx

model
Model

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 är data som skickas från controllern

slide15
View

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

Vyns ansvar i MVC är endast presentation

typad vs otypad vy
Typad vs Otypad vy

En typad vy ärver från System.Web.Mvc.ViewPage<T>

  • T är en generiskklasssomäråtkomligfrånvyngenompropertyn Model

En otypad vy ärver från System.Web.Mvc.ViewPage

  • PropertynViewData är en dictionary som otypad data
  • ViewDatafinnsävenförtypadevyer

En typad vy har en särkilt utpekad Modellklass

partiella vyer
Partiella vyer

Partiella vyer (ascx)

  • Motsvarar usercontrols 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

Lika med usercontrol

masterpage
MasterPage

Masterpagestö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, Vyer och Partiella vyer

b2b foundation
B2B Foundation

Hittills har vi visat hur ASP.NET MVC fungerar

Vi har gjort anpassningar av detta i MVC

Vad är B2B Foundation

b2b foundation1
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)
  • DependencyInjection via AutoFac-ramverket

Viss javascript funktionalitet med jQuery

Vad är b2B Foundation

anpassningar av asp net mvc
Anpassningar av ASP.NET 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

ENOVA CMS och B2B Foundation har gjort vissa ingrepp i MVC

html helpers
Html helpers

Html-helpers är hjälpfunktioner som genererar html-kod

  • Bör endast användas för att generera enkla html taggar
  • Innehållerendastförpresentationslogik

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 genererar html-kod

html helpers1
Html Helpers

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 används för att anropa partiella vyer

slide25
DemO

Demo av eNOVA CMS

lab 1
Lab #1

Anpassning av en befintlig vy

koppling mellan sidtyp action och vy
Koppling mellan sidtyp, Action och VY

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

Sidtyp

synkronisering av h ndelser och vyer
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 webapplikationen till backoffice vid uppstart

koppling mellan sidtyp action och vy1
Koppling mellan sidtyp, Action och VY

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 attributeteCmsPageTypeDefinitionAttribute

CMS view Data Type

hur anger man en valbar h ndelse action
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 friendlyname (en per språk)
  • ViewDataDefinitionAttribute för koppling till sidtypen
hur man anger en valbar vy
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:

  • ViewDefinitionAttributeför friendlyname
  • AssociatedToCmsViewDataAttribute för koppling till sidtypen

En codebehind krävs för synkronisering av vyn.

Exempel på codebehind:

ot vyerna typas inte p cms vydata
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

IMasterPageViewDatahar en property CmsDataochdetär denna som innehåller data från CMS-sidan

Mer om detta senare.

lab 2
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
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 namedservice
  • Factory som container scoped
  • ViewData som factoryscoped
  • 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 WebFoundationvydata

Beräknad till 1h

lab 3
Lab #3

Utöka funktionaliteten i sidan ”Kontakta oss”.

Cmssidtyp: Wipcore.Webfoundation.Core.ContactUsPage

Cmsvydataklass: Wipcore.WebFoundation.Viewdata.CmsContactUsViewData

WF vydataklass: