Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Asp.Net - Spark View Engine

Asp.Net - Spark View Engine

Spark View Engine presentation at Web User Group Zagreb, Croatia

8aba5b0bf34593a56a3a3c733c021ab2?s=128

Tomislav Capan

May 22, 2013
Tweet

More Decks by Tomislav Capan

Other Decks in Programming

Transcript

  1. None
  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.
  3. 20. svibanj 2010. www.webug.com.hr

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

  5. WebForms View Engine (ASP.Net MVC default): <% if(Users != null)

    { %> <ul id="users-list"> <% foreach( var user in Users ) { %> <li class="<%= user.PermissionLevel.Label %>"> <%= user.Username %>: <%= user.FullName %> </li> <% } %> </ul> <% } %> Spark View Engine: <ul s:if="Users != null" id="users-list"> <li s:each="var user in Users" class="${user.PermissionLevel.Label}"> ${user.Username}: ${user.FullName} </li> </ul> 20. svibanj 2010. www.webug.com.hr Zašto Spark View Engine?
  6. Template: <s:viewdata Articles="IList[[MuzikaHr.Models.Article]]"/> <s:var styles="new[] {'left','right'}"/> <p s:each="var article in

    Articles" class="${styles[articleIndex%2]}"> ${article.Title} </p> Rezultat: <p class="left">Vangelis</p> <p class="right">Simple Minds</p> <p class="left">The Stranglers</p> <p class="right">Michael Jackson (1958.–2009.)</p> <p class="left">A Perfect Circle</p> <p class="right">Suede (1989.–2003.)</p> 20. svibanj 2010. www.webug.com.hr Template - primjer
  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
  8. 20. svibanj 2010. www.webug.com.hr ${ Feature Set }

  9. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:s="http://sparkviewengine.com/"> <head> <title>${pageTitle}</title> <!-- cut --> <s:use content="head"/>

    </head> <body> <div id="main"> <div id="header"> <div id="headerLogo"><img src="..." alt=“Muzika.hr" /></div> <s:menu /> </div> <s:use content="view" /> <div id="footer"><s:footer /></div> </div> <s:use content="ads"/> </body> </html> 20. svibanj 2010. www.webug.com.hr Master Layouts – Master Template • Named contentcontent=“...” • Default contentcontent=“view”
  10. <s:content name="head"> <script type="text/javascript“>initSocial();</script> </s:content> <div> <div id="contentTop"> <div id="headingHeader">

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

    topmenu="IList[[Heading]]" /> <ul id="menu"> <li s:each="var heading in topmenu" class="featured?{headingIsLast}"> <a href="${DisplayUtils.GetHeadingUrl(heading)}"> ${heading.Name}</a> </li> </ul> 20. svibanj 2010. www.webug.com.hr Master Layouts – Partial Views
  12. • Lokalne varijable <s:var styles="new[] {'left','right'}"/> <s:var theAnswer="42" type="long"/> •

    Globalne varijable <s:global Title="'My Little Shop of Horrors'"/> • Postavljanje/promjena vrijednosti varijable <s:set Title="string.Format("{0} - {1}", product.Name, Title)"/> 20. svibanj 2010. www.webug.com.hr Variables – Local & Global
  13. • Storage za transfer podataka u View template • base

    view class: Dictionary<string, object> • Moguće: ${(bool)ViewData["someKey"]} • Pametnije: Strongly typed ViewData members <s:viewdata article="MuzikaHr.Models.Article"/> </h1>${article.Title}</h1> </p>(${article.Author.FullName})</p> 20. svibanj 2010. www.webug.com.hr Variables – ViewData Property
  14. <s:test if="evCat != null"> <s:test if="locationType == GeoEntityType.REGION"> ${..data-output-expression..} <s:else

    if="locationType == GeoEntityType.CITY" /> ${..data-output-expression..} </s:test> <s:else /> <s:if condition="locationType == GeoEntityType.REGION"> ${..data-output-expression..} </s:if> <s:else if="locationType == GeoEntityType.CITY" /> ${..data-output-expression..} </s:else> </s:test> 20. svibanj 2010. www.webug.com.hr Conditionals (1) –Spark Elementi
  15. <div id="featuredEvent"> <span class="nav" s:if="featuredEvents.Count > 1"> <a class="button prev"></a>

    <a class="button next"></a> </span> <h4>${Resources.Localization.FeaturedEventTitle}</h4> <ul><li s:each="var ev in featuredEvents"> <p id="evName">${ev.LeadName}</p> <p id="evLocation">${ev.Location.NameWithCity}</p> <p id="evDate">${ev.Date.ToString("d.M.yyyy.")}</p> </li></ul> </div> 20. svibanj 2010. www.webug.com.hr Conditionals (2) – HTML Atributi
  16. • Iterator - Spark 'each' atribut • Loop container (1)

    - Spark 'for' element <s:viewdata Articles="IList[[MuzikaHr.Models.Article]]"/> <s:for each="var article in Articles"> <p>${article.Title}</p> </s:for> • Loop container (2) - Proizvoljan HTML element <s:viewdata Articles="IList[[MuzikaHr.Models.Article]]"/> <p s:each="var article in Articles">${article.Title}</p> 20. svibanj 2010. www.webug.com.hr Loops & Iteration
  17. • loop varijabla + Index, Count, IsFirst, IsLast <s:for each="var

    item in Invoice.Items"> <tr class="${cssClasses[itemIndex%2]}"> <td>Item ${itemIndex + 1} of ${itemCount}</td> <td>${item.Label}</td> <td>${item.Price}</td> </tr> <tr s:if="itemIsLast" class="total"> <td colspan="2">Grand total</td> <td>${grandTotal}</td> </tr> </s:for> 20. svibanj 2010. www.webug.com.hr Iteration – Automatske varijable
  18. • Output (rendering) HTML atributa samo ako je zadovoljen expression

    <s:viewdata calDatesPerWks="IList [[IList[[DateTime]] ]]" /> <table> <tr s:each="var week in calDatesPerWks"> <td s:each="DateTime day in week" class="selected?{day >= selStart && day <= selEnd}"> <a class="offDay?{day.Month != selectedDate.Month}" href="${…href-expression…}">${day.Day}</a> </td> </tr> </table> 20. svibanj 2010. www.webug.com.hr Conditional attribute – ?{expression}
  19. • hvata NullReferenceException i ne ispisuje ništa • Umjesto <table

    id="headings"> <tr s:each="var heading in Headings"> <td>${heading.Name}</td> <td>${heading.Parent != null ? heading.Parent.Name : ""}</td> <!-- ... --> </tr> </table> • Može ići <table id="headings"> <tr s:each="var heading in Headings"> <td>${heading.Name}</td> <td>$!{heading.Parent.Name}</td> <!-- ... --> </tr> </table> 20. svibanj 2010. www.webug.com.hr Null-expresson handling – $!{expression}
  20. • Caching • Precompiled views • VB.Net, IronPython, IronRuby •

    Conditional output once – logging only once – output jquery tag: <script once="jquery" type="text/javascript" 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
  21. 20. svibanj 2010. www.webug.com.hr ${ Općenite značajke }

  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
  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
  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
  25. 20. svibanj 2010. www.webug.com.hr ${ Visual Studio integracija }

  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
  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
  28. 20. svibanj 2010. www.webug.com.hr ${ Spark Project Setup }

  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
  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
  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
  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
  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
  34. DEMO 20. svibanj 2010. www.webug.com.hr EmiEdukacija – Popis prijava •

    Spark app & template • HTML encoding • Spark prefix
  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
  36. 20. svibanj 2010. www.webug.com.hr

  37. 20. svibanj 2010. www.webug.com.hr Tomislav Capan Muzika.hr / Netko d.o.o.

    tomislav.capan@muzika.hr | @tomislavcapan