Zahvaljujući nedavnom komentaru kojeg je ostavio jedan vjerni posjetitelj ovog bloga :) vezanog za Spark View Engine te činjenici da ću za koji dan sudjelovati na “sastanku (čitaj : druženje)” WEBUG user grupe gdje će glavna tema biti taj isti view engine odlučio sam malo pogledati dublje o čemu se tu radi te svoje pozitivne doživljaje podijeliti s vama. Pa krenimo!
Kada stvarate takozvani “pogled” tj. vaš prikaz podataka (View) u ASP.NET MVC-u s vremenom dobijete dojam da vaš HTML kod postaje sve teži i teži za “čitati”. Također, ono što je meni osobno počelo smetati kako su pogledi postajali sve veći je velika prisutnost <% i %> (“Bracket tax”). Upravo tu nastupa Spark kojemu je glavni moto “Html friendly. Less is more”. Ali da ne ostane sve na riječima, slijedi kratki demo kako se konfigurira Spark i ono najvažnije kako izgleda.
Korak 1. - ‘instalacija’
Za početak odite na službene stranice i skinite najnoviju verziju (aktualna verzija u trenutku stvaranja ovog posta je 1.1). U instalacijskoj mapi osim potrebnih .dll-ova se nalaze i korisni primjeri koji vam mogu poslužiti kao odličan start.
Zatim kreirajte novi ASP.NET MVC projekt u kojem ćemo postaviti i registrirati Spark kao view engine. Za početak dodajte sljedeće reference (Reference –> add reference – > browse) :
- Spark.dll
- Spark.Web.Mvc.dll
Nakon toga je potrebno registrirati Spark u global.asax i web.config datotekama.
1: protected void Application_Start()
2: {
3: AreaRegistration.RegisterAllAreas();
4: RegisterRoutes(RouteTable.Routes);
5:
6: ViewEngines.Engines.Add(new SparkViewFactory());
7: }
Unutar <configSection> tagova dodajte :
1: <section name="spark" type="Spark.Configuration.SparkSectionHandler, Spark"/>
Te odmah poslije </configSection> taga :
1: <spark>
2: <compilation debug="true"/>
3: <pages>
4: <namespaces>
5: <add namespace="System"/>
6: <add namespace="System.Collections.Generic"/>
7: <add namespace="System.Linq"/>
8: <add namespace="System.Web.Mvc"/>
9: </namespaces>
10: </pages>
11: </spark>
Korak 2. – Spark u akciji
S time smo završili početni dio vezan za konfiguriranje i postavljanje Spark-a unutar naše web aplikacije. Ono što je odlično je da defaultni ASP.NET [MVC] engine radi bez problema side-by-side sa Sparkom, tako da bez problema možete imati .aspx view-zajedno sa .spark datotekama. E da, postavlja se pitanje kako napraviti spark view? Prilično jednostavno! Svoj pogled dodajete kao i prije s “Add View” i kao što znate dobiti ćete u mapi Views datoteku naziv.aspx. E sada je potrebno preimenovati datoteku u naziv.spark i to je to :) Spremni smo za pisanje Spark pogleda. U nastavku slijedi primjer Spark koda koji je zadužen za ispis svih “Task” objekata (radi se jednostavnoj TODO aplikaciji). Sami prosudite što je ljepše ….
Index.spark
1: <table>
2: <tr each="var task in Model" class="alt?{taskIndex % 2 == 0}">
3: <td> ${task.ID} </td>
4: <td> ${task.Text} </td>
5: </tr>
6: <tr>
7: <td>Total: ${Model.Total} </td>
8: </tr>
9: </table>
Kao što vidite nema više “žutih” <% %> tagova. Spark u tu svrhu koristi dollar sign ($). Ali naravno to je samo dio onog što može Spark. U nastavku pogledajte par Spark code snippetsa koji će vas oboriti s nogu…
1: <viewdata Posts="IList[[MyApp.Models.Post]"/>
2:
3: <for each="var post in Posts">
4: <p>${post.Title}</p>
5: </for>
1: <use namespace='SampleApp.Models'/>
2: <viewdata user='UserInfo'/>
3:
4: <p if='!user.IsLoggedIn()'>Here's a login form</p>
5: <p elseif='user.HasRole(RoleType.Administrator)'>Hello - you're an admin</p>
6: <p elseif='user.HasRole(RoleType.Registered)'>Hello - you're a registered user</p>
7: <else>
8: <p>I have no idea what type of person you are</p>
9: </else>
To bi bilo ukratko o samom Spark View Engine-u. Naravno post je napisan s namjerom da vam samo predstavim po meni ovu super stvar, bez nekakvih predubokih analiza. Za tu svrhu predložio bih vam Sparkove službene stranice te pripadajuću dokumentaciju koju ćete naći u instalacijskoj mapi. Ukoliko imate bilo kakva pitanja, prijedloge i primjebe slobodno iskoristite Comment dio bloga…..