Asp.Net - Spark View Engine

Spark View Engine presentation at Web User Group Zagreb, Croatia

Transcript

1. View Slide

2. Spark View Engine:
   HTML friendly view engine za ASP.Net [MVC]
   Tomislav Capan
   20. svibanj 2010. www.webug.com.hr
   Muzika.hr / Netko d.o.o.
   

   View Slide

3. 20. svibanj 2010. www.webug.com.hr
   

   View Slide

4. 20. svibanj 2010. www.webug.com.hr
   ${ ZAŠTO Spark View Engine }
   

   View Slide

5. WebForms View Engine (ASP.Net MVC default):
   
   
   
   
   :
   
   
   
   
   Spark View Engine:
   
   
   ${user.Username}: ${user.FullName}
   
   
   20. svibanj 2010. www.webug.com.hr
   Zašto Spark View Engine?
   

   View Slide

6. Template:
   
   
   
   ${article.Title}
   
   Rezultat:
   Vangelis
   Simple Minds
   The Stranglers
   Michael Jackson (1958.–2009.)
   A Perfect Circle
   Suede (1989.–2003.)
   20. svibanj 2010. www.webug.com.hr
   Template - primjer
   

   View Slide

7. • Čist, pregledan, elegantan
   • Nema više  „Magic” $-sign
   • HTML-encoding output – Automatski! (opcija)
   • HTML dominira, kôd nenametljivo uklopljen
   20. svibanj 2010. www.webug.com.hr
   Killer features
   

   View Slide

8. 20. svibanj 2010. www.webug.com.hr
   ${ Feature Set }
   

   View Slide

9. 
   
   
   
   
   
   
   
   
   
   

   View Slide

10. 
    <br/><div id="headingHeader"><br/><h1>${article.Heading.Name}</h1><br/></div><br/><div id="articleDisplay"><br/><h1>${article.Title}</h1><br/><s:test if="associatedAlbumDisplay"><br/><s:albumInfoBox /><br/></s:test><br/><div>${article.Body}</div><br/></div><br/></div><br/></div><br/>20. svibanj 2010. www.webug.com.hr<br/>Master Layouts – Content Template<br/>Master  Content<br/>• <s:use content=“head”/>  <s:content name=“head”><br/>• <s:use content="view”/>  default view content<br/>Partial view<br/>

    View Slide

11. • /Views/someTemplate.spark
    
    
    
    • /Views/Shared/_menu.spark
    
    
    class="featured?{headingIsLast}">
    
    ${heading.Name}
    
    
    20. svibanj 2010. www.webug.com.hr
    Master Layouts – Partial Views
    

    View Slide

12. • Lokalne varijable
    
    
    • Globalne varijable
    
    • Postavljanje/promjena vrijednosti varijable
    product.Name, Title)"/>
    20. svibanj 2010. www.webug.com.hr
    Variables – Local & Global
    

    View Slide

13. • Storage za transfer podataka u View template
    • base view class: Dictionary
    • Moguće: ${(bool)ViewData["someKey"]}
    • Pametnije: Strongly typed ViewData members
    
    ${article.Title}
    (${article.Author.FullName})
    20. svibanj 2010. www.webug.com.hr
    Variables – ViewData Property
    

    View Slide

14. 
    
    ${..data-output-expression..}
    
    ${..data-output-expression..}
    
    
    
    ${..data-output-expression..}
    
    
    ${..data-output-expression..}
    
    
    20. svibanj 2010. www.webug.com.hr
    Conditionals (1) –Spark Elementi
    

    View Slide

15. 
    
    
    
    
    ${Resources.Localization.FeaturedEventTitle}
    
    ${ev.LeadName}
    ${ev.Location.NameWithCity}
    ${ev.Date.ToString("d.M.yyyy.")}
    
    
    20. svibanj 2010. www.webug.com.hr
    Conditionals (2) – HTML Atributi
    

    View Slide

16. • Iterator - Spark 'each' atribut
    • Loop container (1) - Spark 'for' element
    
    
    ${article.Title}
    
    • Loop container (2) - Proizvoljan HTML element
    
    ${article.Title}
    20. svibanj 2010. www.webug.com.hr
    Loops & Iteration
    

    View Slide

17. • loop varijabla + Index, Count, IsFirst, IsLast
    
    
    Item ${itemIndex + 1} of ${itemCount}
    ${item.Label}
    ${item.Price}
    
    
    Grand total
    ${grandTotal}
    
    
    20. svibanj 2010. www.webug.com.hr
    Iteration – Automatske varijable
    

    View Slide

18. • Output (rendering) HTML atributa samo ako je
    zadovoljen expression
    
    
    
    class="selected?{day >= selStart && day <= selEnd}">
    href="${…href-expression…}">${day.Day}
    
    
    
    20. svibanj 2010. www.webug.com.hr
    Conditional attribute – ?{expression}
    

    View Slide

19. • hvata NullReferenceException i ne ispisuje ništa
    • Umjesto
    
    
    ${heading.Name}
    ${heading.Parent != null ? heading.Parent.Name : ""}
    
    
    
    • Može ići
    
    
    ${heading.Name}
    $!{heading.Parent.Name}
    
    
    
    20. svibanj 2010. www.webug.com.hr
    Null-expresson handling – $!{expression}
    

    View Slide

20. • Caching
    • Precompiled views
    • VB.Net, IronPython, IronRuby
    • Conditional output once
    – logging only once
    – output jquery tag:
    src="~/content/js/jquery-1.2.6.js"/>
    • MVC Helpers – instances of HtmlHelper,
    UrlHelper, and AjaxHelper available as
    Html, Url, and Ajax properties respectively
    20. svibanj 2010. www.webug.com.hr
    Ima toga još, istražite dokumentaciju
    

    View Slide

21. 20. svibanj 2010. www.webug.com.hr
    ${ Općenite značajke }
    

    View Slide

22. • ASP.Net MVC View Engine
    • Nije ovisan o ASP.Net MVC-u
    • “Seamless integration of your HTML and
    code”
    20. svibanj 2010. www.webug.com.hr
    Značajke
    

    View Slide

23. • Manual HTML-Encoding output
    – shorthand H() function
    • Automatic HTML-Encoding output!!!
    – escape auto-encoding: !{expression}
    • Master-Content (multi-level) + partial views
    – Multipass view rendering
    • Globalne i lokalne varijable
    • Macro helper-funkcije
    20. svibanj 2010. www.webug.com.hr
    Značajke
    

    View Slide

24. • @Run-time: View = klasa
    – JIT kompilacija
    – Kompajlirani view = performanse
    • Svi viewi nasljeđuju zajedničku base klasu
    – Sadrži ViewData dictionary
    – Može sadržavati utility/helper metode
    • Opcija: static kompajliranje (@Build-time)
    – Navodno nije još 100% pouzdano (vidi docs)
    20. svibanj 2010. www.webug.com.hr
    Značajke
    

    View Slide

25. 20. svibanj 2010. www.webug.com.hr
    ${ Visual Studio integracija }
    

    View Slide

26. • http://www.dimecasts.net/Content/WatchEpisode/115
    • Intellisense support (unutar Spark 1.0.zip)
    – SparkVsIntegration-1.0.xxxxx.0-release.msi
    • Registrirati .spark ekstenziju u VS
    1. U Solution exploreru desni klik na .spark file
    2. Open with…
    3. Source Code (Text Editor)
    4. Set as Default
    20. svibanj 2010. www.webug.com.hr
    Visual Studio Integracija
    

    View Slide

27. • Ograničenja
    – samo VS 2008 (za sad)
    – ReSharper Intellisense ne podržava Spark
    • prebaciti Intellisense Type na VS (vidi Dimecast)
    – project type: Web Application
    – Intellisense ne radi za Resources (.resx)
    20. svibanj 2010. www.webug.com.hr
    Visual Studio Integracija
    

    View Slide

28. 20. svibanj 2010. www.webug.com.hr
    ${ Spark Project Setup }
    

    View Slide

29. • Kreirati projekt
    • Referencirati Spark View Engine
    • ASP.Net MVC
    – Spark.dll
    – Spark.Web.Mvc.dll
    • ASP.Net Classic
    – Spark.dll
    20. svibanj 2010. www.webug.com.hr
    Spark u projektu: Step-by-step
    

    View Slide

30. • Konfiguracija: Web.config
    • Inicijalizacija view enginea:
    – Global.asax.cs  Application_Start()
    • http://sparkviewengine.com/documentation/configuring
    • http://sparkviewengine.com/usage/project-from-scratch
    • Spark download  Samples (AspNetMvc & DirectUsage)
    • http://blog.rjovic.com/post/Spark-View-Engine-e28093-
    jednostavnost-na-djelu.aspx (MVC sample)
    20. svibanj 2010. www.webug.com.hr
    Spark u projektu: Step-by-step
    

    View Slide

31. • Web.config
    – configSections –> spark section
    – [Settings: autoencoding, tag prefix, namespaces, …]
    • Global.asax.cs
    – Inicijalizacija Spark View Engine-a
    • View path  MVC konvencija: /Views/…
    20. svibanj 2010. www.webug.com.hr
    Spark + ASP.Net MVC
    

    View Slide

32. • Web.config
    – configSections –> spark section
    – Referenca na pageBaseType klasu
    – [Settings: autoencoding, tag prefix, namespaces, …]
    – [Deklarativna konfiguracija patha do view templatea]
    • Global.asax.cs
    – Programska konfiguracija patha do view templatea
    – Inicijalizacija Spark View Engine-a
    20. svibanj 2010. www.webug.com.hr
    Spark + ASP.Net classic
    

    View Slide

33. • Preuzeti iz projekta
    \Spark-1.x\Samples\DirectUsage\MediumTrustHosting
    • BaseView.cs
    – Svi .spark viewi će naslijediti ovu klasu (web.config)
    – Implementira ViewData dictionary
    • BaseHandler.cs
    – Svi .ashx.cs handleri će naslijediti ovu klasu
    – Implementira CreateView(string[] templates)
    – Implementira ProcessRequest(HttpContext context)
    – Sprema kao property referencu na HttpContext
    – Process() hook za konkretne .ashx page-controllere
    20. svibanj 2010. www.webug.com.hr
    Spark + ASP.Net classic
    

    View Slide

34. DEMO
    20. svibanj 2010. www.webug.com.hr
    EmiEdukacija – Popis prijava
    • Spark app & template
    • HTML encoding
    • Spark prefix
    

    View Slide

35. • Open-source
    • Autor: Louis DeJardin
    • http://sparkviewengine.com/
    • http://sparkviewengine.codeplex.com/
    • http://www.dimecasts.net/
    – #80, #113, #115 (intellisense), #121…
    • http://groups.google.com/group/spark-dev/
    20. svibanj 2010. www.webug.com.hr
    Info
    

    View Slide

36. 20. svibanj 2010. www.webug.com.hr
    

    View Slide

37. 20. svibanj 2010. www.webug.com.hr
    Tomislav Capan
    Muzika.hr / Netko d.o.o.
    tomislav.capan@muzika.hr | @tomislavcapan
    

    View Slide