Webfoundation

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

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

3. Webfoundation Webfoundationär en gemensamwebplattformförWipcoreskundervilketmedförföljandefördelar: • Webfoundationärredanprestandatestad. • Webfoundationärredantestad med enhetstest. • Olikakunderkanta del avnyfunktionalitet. • Innehåller CMS • Byggerpå MVC-standard. • Webfoundationhar en grundarkitektursomkundprojektenbyggerpåvilketger en enhetligoch bra arkitektur. • ByggerpåAutofac DI vilketgerflexibilitetattbytautvilkenklasssomhelst i WebFoundation till en kundspecifik variant. • Innehåller en exempel-site (Sandbox) som i principanvänderWebFoundationraktavochbaradefinierargränssnittet. Finns atttestapåhttp://webfoundation.wipcore.se/ (login, registrera länk?) • Webfoundationinnehållervissawebrelaterade BackOffice-formulärsom man idagfårkonfigurera in i efterhand. • Äridaginriktadpå B2B men kommerattuppdateras till attstödja B2C med t.ex. färdigabetalväxlar. Om Webfoundation

4. Webfoundation Autofacförenklar en löstkoppladarkitekturochdärmedenhetstesterdär man villmockaklasser. (Mocka: attbytautallaklassersom den klass du villtestaberorav mot hårdkodade test klassersomalltidreturnerarsammavärdenoavsettdatabas mm.) MVC uppmuntrar till attanvända DI-ramverk, därAutofachar en färdig integration.http://bradwilson.typepad.com/blog/2010/07/service-location-pt1-introduction.html Autofac

5. Webfoundation 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. Autofac

6. Webfoundation 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 { IEnginem_engine; IWheelm_wheel Public Car(IEngineengine,IWheel wheel) { m_engine=engine; m_wheel=wheel; } } Autofac

7. Webfoundation Autofackan 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(); Containernbör man inteskicka runt i sin applikationfördåskapar man ettberoende till Autofac. Containernärsomettvariabel-scope. Disposascontainerndörallaobjektsomharresolvats i den. När man registrerarklasserskall man alltidsättascopetpådem.FactoryScoped, HttpRequestScoped, SingletonScoped Autofac

8. Webfoundation 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 classDefaultModule : Module { /// <summary> /// Loads the specifiedbuilder. /// </summary> /// <param name="builder">The builder.</param> protected override void Load(ContainerBuilder builder) { builder.Register<FilterViewDataFactory>().As<IFilterViewDataFactory>(); Autofac

9. Webfoundation 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 IContainerProvidervar viewData = m_containerProvider.RequestContainer.Resolve<IMyPageViewData>(); Och IWebFoundationResolverresolver.ResolveMandatory<ISystemTextService>();    I web foundation registrerar man i:public class TestApplication : FoundationHttpApplication { protected override void RegisterServices(ContainerBuildercontainerBuilder) { Webfoundation controllers kan man överlagra med:containerBuilder.Register<MySelfRegisterController>().Named("controller.selfregister").FactoryScoped(); http://code.google.com/p/autofac/ Autofac

10. Webfoundation Fördelar med MVC: Skiktadlösning. Enhetstestbar Lättviktigasidor. Enklareattstyrautseendet. SEO-optimerat Ajax enabladeformulär, länkarfungerarutanjavascript Jquery MVC

11. Webfoundation M=Model V=View C=Control Webfoundation CMS harett route entry med wildcard där page ID ochprodukt ID skickas med. Dettaförattfåbättreprestanda. MVC

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

13. Webfoundation CMS nysida Skapa Modellen för hela sidan.public classJobViewData : FullPageViewData { public JobViewDataPopulate(JobPage page) {return this; } } Skapa en Factory klass som skapar upp JobViewData (FoundationController anropar populate på CmsJobViewData)public classJobViewDataFactory { private readonlyIContainerProviderm_containerProvider; public InformationPageViewDataFactory(IContainerProvidercontainerProvider) { m_containerProvider = containerProvider; } public virtualJobViewDataCreate() { var viewData = m_containerProvider.RequestContainer.Resolve<JobViewData>(); returnviewData; } }

14. Webfoundation CMS nysida Skapa en ny controller:  public classJobController : FoundationController{         public SectionController(IWebFoundationResolverresolver);         [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 virtualActionResult List();           } Skapa en ny sida med codebehind:[ViewDefinition("Visar jobbsida", "Visar en jobbsida.", "sv-SE")]     [ViewDefinition("Show job page", "Shows an job page.", "en-GB")]     [AssociatedToCmsViewData(typeof(CmsJobPageViewData))]     public classJob : ViewPage<JobViewData>     {     }

15. Webfoundation CMS nysida Ställ in den nya sidtypen i backoffice:

16. Store Front WebFoundationArkitektur MVC View Controller Factory Service Repository eNova ViewData eNova Objects Model View Controler Databas

17. Webfoundation Man börföljalagerlogikenföratthållaordning i projektet, underlättacachningochåteranvändbarhet. De grårutornavisar i vilkaskikt man böranvändaViewData, respektiveeNova-objekt. Repository lagretkan man kringåomönskas. WebFoundation

18. Webfoundation View,Enkel HTML förhelaellerdelaravsidan. Mindreinslagav C# kodsnuttarförvylogik.SkallejinnehållaaffärslogikellereNova-anrop. JavaScript och CSS läggesseperat.Enstaka JS-anropkanförekommaförattinitierasidan. Controller, Kontrollerarflödet i applikationen; vilkensidasomskall visas. Ärlimmetmellanvyochmodell. Tar emotanropochanroparmodellenförattskrivaochläsa. Oftastlättviktigutanaffärslogik. Factory, Skaparvydata. Läserut, transformerar, förenklarochplattaruteNova-modellenförvyn. Oftastanvänds en vymodellbaraför en sidaellersiddelsåatt man baraläseruteNova-data för just den sidan. En bra factory-klass tar bortonödigkomplexitet i vyn. Har en metod Create förattskapavydata. ViewData, POJO, en enkeldatabärareutanmetodersomanvänds i vyn. En vydatakancachas, serializeras. Innehållerfärdigberäknad data föraktuellvysompris, lagerstatus, valuta mm. WebFoundation

19. Webfoundation Service, Innehålleraffärslogik, börejvaraberoendeavwebben. Oftastbaraaffärslogiksomberörwebben. Repository, InnehållertypadsökningochuppslagaveNova-objekt. VisshjälpförattnavigeramellaneNova-objekt. Nackdelenattanvända repository förattnavigeramellanobjektäratt man inteenkelt ser kopplingenpåobjektetsom en metodeller property, vilketgörattdetinteharanväntsfulltut. eNova-API:etär DAL ochinnehållergrundaffärslogik. Härlägger man enklastaffärslogiksomskallvaraåtkomlig i helasystemetochsomärprestandakänsligförremoting. NackdelenärattAutofacintekananvändashärochatt man måste ta nerhelasystemetförattuppdatera en eNova-klass. eNova-klassenskallalltidinnehållahjälpmetoderförattenkeltkunnanavigera runt i objekthierarkin. WebFoundation

20. Webfoundation Model/ViewDataProduktsida MenuItemNode MenuItems Children Product FullPage MasterPage TopMenu Menu MenuItemNode LeftMenu Menu Display Cms CmsProductListing Archive Images AccessorieProductsSimilarProductsPackageProductsVariantsProducts Breadcrumb ProductListItem … Cart SmallCartItem AttributeType AttributeTypesOwnerAttributeTypes AttributeGroup Customer AttributeValue

21. Webfoundation Model/ViewDataProduktsidafortsättning DefaultVariantSelectedVariant ProductListItem ProductListItem BreadcrumbItem ClientListItem AttributeType AttributeGroup AttributeValue

22. Webfoundation Model/ViewDataProduktlistningssida Section FullPage … Display ProductList ProductListItem Products … Filter FilterListItem FilterFormItem Value

23. Webfoundation Model/ViewDataRegistreringssida Spara som SelfRegisterCustomer FullPage Customer DeliveryAddress InvoiceAddress Address User

24. Webfoundation Model/ViewDataKassasida CheckoutPage FullPage OrderFlow ShippingAddress InvoiceAddress CartItemList ShippingAddresses Address ShippingType PaymentType CartItem

25. webfoundation orderflöde OrderStep AddressOrderStep View

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

27. webfoundation Startup 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 <settings> <simpleSettings> <setting key="ConcatenateCss" value="true" type="bool" /> </simpleSettings> <simpleSettings site="EN"> <setting key="ConcatenateCss" value="false" type="bool" /> </simpleSettings> </settings>

28. webfoundation 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> settings

29. webfoundation 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> Settings

30. webfoundation Webfoundation har stöd för att konkatenera och komprimera Js och css filer med:Html.IncludeCssHtml.IncludeJsVilket 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(”productnumber",”sizename") Klient stöd

31. webfoundation Webfoundation har bl.a.följandejquery plugin:AjaxLink gör att man kan använda ajax utan att skriva en rad javascript. Har stöd för browserhistorik,ladda status, seo, unobtrusivejavascript. 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. VariantFiltervariant väljare på produkt sidor. Jobbar mot en lokal json. RememberFormspara värdena av ett formulär i cookie, bookmarkurl 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 Klient stöd

32. webfoundation Alla webfoundationJquery plugin använder sig av Jqueryuiwidgetfactory 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 manuallyif form is submited with ajaxwithoutcallingsubmit 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); Klient stöd

33. Webfoundation Ha en egenweb.configdärUseSynchronizer är avstängd då man inte har skapat nya cms sidor. Lägg till i web.config   <appSettingsfile="WipcoreTest.config"> Debug tips

34. Webfoundation 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. Debug tips

35. Webfoundation 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. Debug tips

36. Webfoundation 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) Debug tips

37. Webfoundation 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 scrumt.e.x. Enova är besvärligt att mocka (kanske möjligt med http://research.microsoft.com/en-us/projects/moles/). Enhets tests kan köras med nulldatabas eller i remote läge om man använder WebFoundationUnitTest klassen Enhetstest

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. BackOffice 0. UpdateEnovaRelease.cmd Webfoundation (sandbox) EnovaRelease BusinessServer Integration Search 1. UpdateProjectFromSandbox.cmd Web Enova+ Webfoundation Enova+ Webfoundation+Customer Customer Solution 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