Asp.Net - Spark View Engine

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.

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

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

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?

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

• Č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

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

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:s="http://sparkviewengine.com/"> <head> <title>${pageTitle}</title>  <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”

<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

• /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

• 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

• 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

<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

<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

• 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

• 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

• 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}

• 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}

• 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

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

• 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

• 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

• @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

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

• 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

• 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

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

• 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

• 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

• 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

• 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

• 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

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

• 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

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

20. svibanj 2010. www.webug.com.hr Tomislav Capan Muzika.hr / Netko d.o.o.
[email protected] | @tomislavcapan

Asp.Net - Spark View Engine

Asp.Net - Spark View Engine

More Decks by Tomislav Capan

Other Decks in Programming

Featured

Transcript