Webfoundation Pierre Setteskog / Terje Erwing Bjelkholm 2011-05-05.

En presentation över ämnet: "Webfoundation Pierre Setteskog / Terje Erwing Bjelkholm 2011-05-05."— Presentationens avskrift:

1 Webfoundation Pierre Setteskog / Terje Erwing Bjelkholm

2 Webfoundation Agenda Om Webfoundation Autofac MVC Routing TODO CMS WF
WF/eNOVA Base Objects TODO HTML Helpers TODO Settings (Runtime/Startup) Archive Model Binding TODO? B2B Order Flow SubUsers/Access rights Klient stöd Debug/Enhetstest Quiz

3 Webfoundation Om Webfoundation
Webfoundation är en gemensam webplattform för Wipcores kunder vilket medför följande fördelar: Webfoundation är redan prestandatestad. Webfoundation är redan testad med enhetstest. Olika kunder kan ta del av ny funktionalitet. Innehåller CMS Bygger på MVC-standard. Webfoundation har en grundarkitektur som kundprojekten bygger på vilket ger en enhetlig och bra arkitektur. Bygger på Autofac DI vilket ger flexibilitet att byta ut vilken klass som helst i WebFoundation till en kundspecifik variant. Innehåller en exempel-site (Sandbox) som i princip använder WebFoundation rakt av och bara definierar gränssnittet. Finns att testa på (login, registrera länk?) Webfoundation innehåller vissa webrelaterade BackOffice-formulär som man idag får konfigurera in i efterhand. Är idag inriktad på B2B men kommer att uppdateras till att stödja B2C med t.ex. färdiga betalväxlar.

4 Webfoundation Autofac
Autofac förenklar en löst kopplad arkitektur och därmed enhetstester där man vill mocka klasser. (Mocka: att byta ut alla klasser som den klass du vill testa beror av mot hårdkodade test klasser som alltid returnerar samma värden oavsett databas mm.) MVC uppmuntrar till att använda DI-ramverk, där Autofac har en färdig integration.

5 Webfoundation Autofac
DI-filosofin går ut på att man centralt beskriver vilka klasser som skall användas och när. Som ett recept på en bil: t.e.x. ge mig en Porche men byt ut hjulen mot dubbdäck och sätt in Bergarns motor istället.

6 Webfoundation Autofac
var builder = new ContainerBuilder(); builder.RegisterType<Car>().As<ICar>().FactoryScoped();; builder.RegisterType<Engine>().As<IEngine>().FactoryScoped();; builder.RegisterType<Wheel>().As<IWheel>().FactoryScoped(); var container = builder.Build() Public class Car: ICar { IEngine m_engine; IWheel m_wheel Public Car(IEngine engine,IWheel wheel) m_engine=engine; m_wheel=wheel; }

7 Webfoundation Autofac
Autofac kan injekta i konstruktorn och i properties. Fördelen med att med kod beskriva hur klasserna skall vara beroende jämfört med t.ex. XML-filer är att man får typsäkerhet och kan även definiera om en specifik metod (delegat) skall köras för att skapa din klass eller efter att din klass har skapats. All registering bör ske innan man anropar build men senare Autofac klarar detta också. Man kan skriva över en befintlig registrering om man vill, t.e.x. builder.RegisterType<MySuperV8Engine>().As<IEngine>().FactoryScoped(); Containern bör man inte skicka runt i sin applikation för då skapar man ett beroende till Autofac. Containern är som ett variabel-scope. Disposas containern dör alla objekt som har resolvats i den. När man registrerar klasser skall man alltid sätta scopet på dem. FactoryScoped, HttpRequestScoped, SingletonScoped

8 Webfoundation Autofac
Man bör använda moduler för att klumpa ihop flera registreringar och för att få samma grundkonfiguration i sitt enhetstest. builder.RegisterModule(new DefaultModule()); public class DefaultModule : Module { /// <summary> /// Loads the specified builder. /// </summary> /// <param name="builder">The builder.</param> protected override void Load(ContainerBuilder builder) builder.Register<FilterViewDataFactory>().As<IFilterViewDataFactory>();

9 Webfoundation Autofac
Man behöver inte skapa interface för att jobba med Autofac. Man kan registrera abstrakta klasser och klasser också: T.e.x. builder.RegisterType<Engine>().As< builder.RegisterType<Engine>().FactoryScoped();; Webfoundation har följande klass för att skapa upp x st objekt: AutofacHelper.Resolve<IFoundationSessionFactory>(); Och IContainerProvider var viewData = m_containerProvider.RequestContainer.Resolve<IMyPageViewData>(); Och IWebFoundationResolver resolver.ResolveMandatory<ISystemTextService>();    I web foundation registrerar man i: public class TestApplication : FoundationHttpApplication { protected override void RegisterServices(ContainerBuilder containerBuilder) Webfoundation controllers kan man överlagra med: containerBuilder.Register<MySelfRegisterController>().Named("controller.selfregister").FactoryScoped();

10 Webfoundation MVC Fördelar med MVC: Skiktad lösning. Enhetstestbar
Lättviktiga sidor. Enklare att styra utseendet. SEO-optimerat Ajax enablade formulär, länkar fungerar utan javascript Jquery

11 Webfoundation MVC M=Model V=View C=Control
Webfoundation CMS har ett route entry med wildcard där page ID och produkt ID skickas med. Detta för att få bättre prestanda.

12 Webfoundation CMS ny sida För att skapa en ny sida i Enova CMS:
Skapa en ny enova klass som ärver av WebFoundationPage . T.e.x.: public class JobPage : WebFoundationPage Skapa modellen för sidan ärv av t.ex. CmsInformationPage: [CmsPageTypeDefinition(typeof(JobPage))]      public class CmsJobPageViewData : CmsInformationPageViewData      {                   public override FoundationCmsViewData Populate(EnovaCmsPage page)          {             return base.Populate(page);         }      } Registerar sidan med Autofac: CmsViewDataFactory.Register(typeof(JobPage), typeof(CmsJobPageViewData));

13 Webfoundation CMS ny sida
Skapa Modellen för hela sidan. public class JobViewData : FullPageViewData { public JobViewData Populate(JobPage page) {return this; } Skapa en Factory klass som skapar upp JobViewData (FoundationController anropar populate på CmsJobViewData) public class JobViewDataFactory private readonly IContainerProvider m_containerProvider; public InformationPageViewDataFactory(IContainerProvider containerProvider) m_containerProvider = containerProvider; public virtual JobViewData Create() var viewData = m_containerProvider.RequestContainer.Resolve<JobViewData>(); return viewData;

14 Webfoundation CMS ny sida
Skapa en ny controller:  public class JobController : FoundationController      {          public SectionController(IWebFoundationResolver resolver);          [ActionDefinition("Produktlistning", "Listar produkter som är länkade från denna sida.", "sv-SE")]          [ViewDataDefinition(typeof(CmsJobViewData))]          [ActionDefinition("Product list", "Lists products linked from this page.", "en-GB")]          public virtual ActionResult List();            } Skapa en ny sida med code behind: [ViewDefinition("Visar jobbsida", "Visar en jobbsida.", "sv-SE")]      [ViewDefinition("Show job page", "Shows an job page.", "en-GB")]      [AssociatedToCmsViewData(typeof(CmsJobPageViewData))]      public class Job : ViewPage<JobViewData>     {     }

15 Webfoundation CMS ny sida Ställ in den nya sidtypen i backoffice:

16 Store Front WebFoundation Arkitektur MVC View Controller Factory
Service Repository eNova ViewData eNova Objects Model View Controler Databas

17 Webfoundation WebFoundation
Man bör följa lagerlogiken för att hålla ordning i projektet, underlätta cachning och återanvändbarhet. De grå rutorna visar i vilka skikt man bör använda ViewData, respektive eNova-objekt. Repository lagret kan man kringå om önskas.

18 Webfoundation WebFoundation
View, Enkel HTML för hela eller delar av sidan. Mindre inslag av C# kodsnuttar för vylogik.Skall ej innehålla affärslogik eller eNova-anrop. JavaScript och CSS lägges seperat. Enstaka JS-anrop kan förekomma för att initiera sidan. Controller, Kontrollerar flödet i applikationen; vilken sida som skall visas. Är limmet mellan vy och modell. Tar emot anrop och anropar modellen för att skriva och läsa. Oftast lättviktig utan affärslogik. Factory, Skapar vydata. Läser ut, transformerar, förenklar och plattar ut eNova-modellen för vyn. Oftast används en vymodell bara för en sida eller siddel så att man bara läser ut eNova-data för just den sidan. En bra factory-klass tar bort onödig komplexitet i vyn. Har en metod Create för att skapa vydata. ViewData, POJO, en enkel databärare utan metoder som används i vyn. En vydata kan cachas, serializeras. Innehåller färdig beräknad data för aktuell vy som pris, lagerstatus, valuta mm.

19 Webfoundation WebFoundation
Service, Innehåller affärslogik, bör ej vara beroende av webben. Oftast bara affärslogik som berör webben. Repository, Innehåller typad sökning och uppslag av eNova-objekt. Viss hjälp för att navigera mellan eNova-objekt. Nackdelen att använda repository för att navigera mellan objekt är att man inte enkelt ser kopplingen på objektet som en metod eller property, vilket gör att det inte har använts fullt ut. eNova-API:et är DAL och innehåller grundaffärslogik. Här lägger man enklast affärslogik som skall vara åtkomlig i hela systemet och som är prestandakänslig för remoting. Nackdelen är att Autofac inte kan användas här och att man måste ta ner hela systemet för att uppdatera en eNova-klass. eNova-klassen skall alltid innehålla hjälpmetoder för att enkelt kunna navigera runt i objekthierarkin.

20 Webfoundation Model/ViewData Produkt sida MenuItemNode Product
MenuItems Children Product FullPage MasterPage TopMenu Menu MenuItemNode LeftMenu Menu Display Cms CmsProductListing Archive Images AccessorieProducts SimilarProducts PackageProducts VariantsProducts Breadcrumb ProductListItem … Cart SmallCartItem AttributeType AttributeTypes OwnerAttributeTypes AttributeGroup Customer AttributeValue

21 Webfoundation Model/ViewData Produktsida fortsättning ProductListItem
DefaultVariant SelectedVariant ProductListItem ProductListItem BreadcrumbItem ClientListItem AttributeType AttributeGroup AttributeValue

22 Webfoundation Model/ViewData Produktlistnings sida Section FullPage …
Display ProductList ProductListItem Products … Filter FilterListItem FilterFormItem Value

23 SelfRegisterCustomer
Webfoundation Model/ViewData Registrerings sida Spara som SelfRegisterCustomer FullPage Customer DeliveryAddress InvoiceAddress Address User

24 Webfoundation Model/ViewData Kassa sida CheckoutPage FullPage
OrderFlow ShippingAddress InvoiceAddress CartItemList ShippingAddresses Address ShippingType PaymentType CartItem

25 webfoundation orderflöde OrderStep AddressOrderStep View

26 ConfirmationOrderStep
Webfoundation ORDERFLÖDE OrderStep AddressOrderStep OrderFinalizer ShippingOrderStep PaymentOrderStep ConfirmationOrderStep ...

27 webfoundation Settings Startup Settings Runtime Settings
Läses in vid uppstart Har högst prioritet Runtime Settings Slår igenom när filen uppdateras Kräver inte omstart av webben <settings> <simpleSettings> <setting key="ConcatenateCss" value="true" type="bool" /> </simpleSettings> <simpleSettings site="EN"> <setting key="ConcatenateCss" value="false" type="bool" /> </settings>

28 webfoundation settings Validering <validationSettings site="SE">
<model type="Wipcore.WebFoundation.Web.Sandbox.Models.SandboxContactUsViewData"> <property name="Subject"> <regex pattern="^[Aa].*” errorMessageIdentifier="SandboxContactUsViewData_Subject_BeginsWithA"/> <stringlength maximumlength="30” errorMessageIdentifier="SandboxContactUsViewData_Subject_StringLength"/> </property> </model> </validationSettings>

29 webfoundation Settings Orderflöde <orderFlow>
<orderStep type="Wipcore.WebFoundation.Configuration.AddressOrderStep" ProgressIndex="2" defaultAssembly="Wipcore.WebFoundation" view="_address"/> <orderStep type="Wipcore.WebFoundation.Configuration.ShippingOrderStep" ProgressIndex="3" defaultAssembly="Wipcore.WebFoundation" view="_shipping"/> <orderStep type="Wipcore.WebFoundation.Configuration.PaymentOrderStep" ProgressIndex="4" defaultAssembly="Wipcore.WebFoundation" view="_payment"/> <orderFinalizer type="Wipcore.WebFoundation.Configuration.CosMonkiOrderFinalizer" defaultAssembly="Wipcore.WebFoundation" /> </orderFlow>

30 webfoundation Klient stöd
Webfoundation har stöd för att konkatenera och komprimera Js och css filer med: Html.IncludeCss Html.IncludeJs Vilket man sen styr från runtime_settings.xml Webfoundation har en bild arkivs funktion för produkt bilder. Där man laddar upp orginal bilden genom backoffice produkt sidasom sedan skallas om till olika storlekar. Storlekarna specifierar man genom en speciell dialog i backoffice. För att visa en produkt bild har man en html helper med bl.a. Följande metod: Html.ProductImageUrl(”product number",”size name")

31 webfoundation Klient stöd
Webfoundation har bl.a.följande jquery plugin: AjaxLink gör att man kan använda ajax utan att skriva en rad javascript. Har stöd för browser historik,ladda status, seo, unobtrusive javascript. AsYouTypeSearch vilket stödjer inte bara enova söken utan vilken ajax källa som hellst. Hint fyller fält med en hint text. MiniCart vilken stödjer att köp knappar uppdaterar minicarten med ajax. VariantFilter variant väljare på produkt sidor. Jobbar mot en lokal json. RememberForm spara värdena av ett formulär i cookie, bookmark url Webfoundation har stöd för klient baserad produkt: filtrering, sortering, pagening, layout som typ prisjakt. Man kan kund anpassa utseende och funktionalitet och konfigurera det genom runtimesettings. Javascriptet jobbar mot en lokal json för snabba svar. Pluginen som används är bl.a. PageJson, FilterJson,Pager,SortJson

32 webfoundation Klient stöd
Alla webfoundation Jquery plugin använder sig av Jquery ui widget factory och microsofts sätt att skriva objekt orienterad javascript.Exempel: Type.registerNamespace("Controls"); /// <summary> /// V1.2 Adds hint text to input fields /// Depends: /// jquery-1.4.js /// </summary> Controls.Hint = function () { } Controls.Hint.prototype = { _init: function () { this.element.parents("form").bind("submit", $.createEventDelegate(this, this.clear)); }, //call this manually if form is submited with ajax without calling submit event! clear: function () { if (this.element.val() == this.options.hintText) { this.element.val(""); defaults: { hintText: null Controls.Hint.registerClass('Controls.Hint', null, Sys.IDisposable); $.registerAsWidget(Controls.Hint);

33 Webfoundation Debug tips
Ha en egen web.config där UseSynchronizer är avstängd då man inte har skapat nya cms sidor. Lägg till i web.config   <appSettings file="WipcoreTest.config">

34 Webfoundation Debug tips Ha en lokal business server genom att:
Kopiera foldern för BS servern Kör Installutil /name="wipcore BS server xx" " C:\BS\WipcoreEnovaService.exe" Exportera och importera register inställningar, ändra markerade register nycklar.

35 Webfoundation Debug tips För att debugga in i webfoundation.dll’erna.
Ställ in sökvägen till webfoundation källkoden genom att välja properties på solutionet.

36 Webfoundation Debug tips
Deploy script är att rekommendera om man är flera utvecklare i samma projekt och har stor test miljö, för att undvika onödigt långa avbrott. Update script är att rekommendera om man vill förenkla för framtida enova releaser eller tar emot många hotfixar. (Färdiga exempel script finns)

37 Webfoundation Enhetstest
MVC lämpar sig väldigt väl för enhetstest då allt är skicktat och mockbart. Enhetstest är extra viktigt i en iterativ projekt metodik som scrum t.e.x. Enova är besvärligt att mocka (kanske möjligt med Enhets tests kan köras med nulldatabas eller i remote läge om man använder WebFoundationUnitTest klassen

38 Webfoundation Enhetstest

39 Webfoundation Enhetstest

40 Webfoundation Enhetstest
En service klass uppgift är att: A. Bygga modeller till controllern. B. Ta hand om alla webb relaterade funktioner som url’er cookies etc. C. Tillhandahålla all affärslogik. Vitsen med Autofac är: A. Att inga klasser behöver veta något om varandra. B. Alla klasser får ta del av varandras innehåll. C. Alla klasser blir löst kopplade till varandra. Vilken av följande funktioner har webfoundation inte stöd för: A. Skalning av produkt bilder. B. Komprimering av js filer. C. Integration

41 Webfoundation (sandbox) BusinessServer EnovaRelease
BackOffice 0. UpdateEnovaRelease.cmd Webfoundation (sandbox) BusinessServer EnovaRelease Integration Search 1. UpdateProjectFromSandbox.cmd Web Enova + Webfoundation Customer Solution Enova + Webfoundation+Customer Test Demo BackOffice Dependencies BusinessServer 3. DeployDemo.cmd Integration BackOffice BackOffice Search BusinessServer BusinessServer Web Integration Integration My.Backofffice Search Search 2. DeployTest.cmd My.EnovaCore Web Web Project references My.Integration My.Web