SparkViewEngine Kick Off

Già nel post precedente avevo annunciato una serie di contenuti riguardanti SparkViewEngine. Per approfondire l’utilizzo di questo engine ho cominciato il porting della skin del mio blog: devo dire che, man mano che lo utilizzo, rimango colpito dalla sua produttività e potenza, a partire dalle cose più semplici fino ad arrivare a funzioni un po’ più avanzate che permettono di creare delle vere e proprie funzioni e/o ottimizzazioni.

Per chi non abbia voglia di aspettare e voglia vedere un utilizzo un po’ più “spinto” di Spark, consiglio di dare un’occhiata al codice di Dexter e, nello specifico, alla cartella Themes/Fusion, dove si trova il porting della mia skin che è abbastanza ricca di html.

Come preannuncia il titolo, questo post ha lo scopo di mostrare come utilizzare da subito per una semplicissima applicazione SparkViewEngine, quindi configurarlo e capirne un po’ la logica.

Una volta scaricato il codice da qui, basta referenziare le due Assembly che ne permettono l’utilizzo in ASP.NET MVC, Spark.dll e Spark.Web.Mvc.Dll e registrare il nuovo ViewEngine allo startup dell’applicativo; quindi nel global.asax.cs basta inserire il seguente codice:

protected void Application_Start(object sender, EventArgs e)
{
    RegisterRoutes(RouteTable.Routes);
    SparkEngineStarter.RegisterViewEngine();
}

A questo punto l’applicazione è abile ed arruolata a sfruttare tutte le potenzialità di Spark, ma prima di scrivere un po’ di codice nella view è importante sapere che:

  • La struttura delle folder contenente le View è esattamente la stessa che si avrebbe senza spark.
  • Tutti I files delle view, partial view, master, etc devono avere estensione .spark;
  • All’interno della cartella shared normalmente va creato un file “_global.spark” contenente tutti i vari using ed eventuali macro necessari alla costruzione della vista;
  • La master page di default (anch’essa presente nella cartella shared) si chiama “Application.spark”;

A questo punto dovrebbe esser ben chiaro il fatto che abbiamo una cartella Views/Shared ed al suo interno abbiamo la nostra master page “Application.spark”; salvo forzature esplicite, tutte le viste erediteranno da questa master, e, se lo si vuole, resta comunque possibile specificare una master differente, ma lo vedremo più avanti.

Il codice seguente mostra una master page realizzata con spark:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title><use content="title">${Model.Title}</use></title>
        <meta name="description" content="${Model.Description}" /> 
        <meta name="keywords" content="${Model.KeyWords}" /> 
        <meta name="author" content="${Model.Author}" />
        <link rel="SHORTCUT ICON" href="~/images/favicon.ico" type="image/x-icon" />
        <link type="text/css" rel="stylesheet" href="~/Styles/Site.css" />
        <script src="~/Scripts/jquery.watermark.js" type="text/javascript" language="javascript"></script>
        <script src="~/Scripts/jquery.fancybox-1.3.1.pack.js" type="text/javascript" language="javascript"></script>
    </head>
    <body>
        <use content="MainContent"></use>
        qualcosa ......
    </body>
</html>

Come potete vedere non è presente nessun codeblock a inizio pagina e le risorse tipo css, img, etc. posso essere specificate con il prefisso tilde ~/  , che verrà sostituito dall’engine di spark con la root del sito o con quello che ci è più congeniale.

Per ora ci basta creare la nostra master page e specificare i placeholder tramite il tag Use, che andremo a riutilizzare nel vista in questo modo:

<content name="MainContent">
    Benvenuto Spark!
</content>

Anche qui, come potete vedere, tutti i codeblock sono spariti a vantaggio della leggibilià e del numero ridotto di righe presenti all’inteno della view (fidatevi, questo non è nulla Smile).


Comments