DotNetCampania
Il primo portale campano dedicato allo sviluppo software con tecnologie Microsoft

Creazione di un sito web con Orchard - Seconda Parte

Creazione di un sito web con Orchard - Seconda Parte

Creazione di un sito web con Orchard - Seconda Parte

Customizzazione del tema

Asp.Net MVC e Razor

Orchard basa il suo presentation layer sul Asp.Net MVC3, utilizzando di default Razor come view engine e C# come linguaggio di programmazione. Per poter personalizzare una tema è necessario quindi avere una minima conoscenza di questi elementi,  in particolare della realizzazione delle view con questa tecnologia. A differenza di Asp.Net WebForms, in Asp.Net MVC una view è un elemento completamente passivo, non ha code-behind ed ha la sola responsabilità di visualizzare la UI per l'utente. Sarà infatti il Controller a preoccuparsi di rispondere alle richieste dell'utente, chiedendo al Model di aggiornare il proprio stato in risposta della richiesta, ed è proprio in base alla risposta del model che il controller selezionerà la view successiva da visualizzare.

Una view di Asp.Net MVC che utilizza Razor e C# è un file con estensione .cshtml (c sharp + html) in cui il codice C# è immerso nel markup html attraverso l'utilizzo del simbolo @, a differenza del view engine aspx che invece utilizza i simboli <% %>. Ad esempio possiamo condizionare il rendering di un pezzo di markup html in questo semplice modo:

@if(condizione){
<p>Questo paragrafo sarà stampato solo se la condizione è 
vera</p>
}

Oppure renderizzare un numero arbitrario di volte un pezzo di markup html con un classico ciclo for:

<ul>
@foreach(var elemento in lista) 
{
<li><a href="@elemento.Link">@elemento.Descrizione</a></li>
}
</ul>

Come potete vedere, una delle caratteristiche di Razor è quella di essere molto poco intrusivo, permettendo con una semplice @ di inserire la dinamicità necessaria alla generazione delle nostre view.

La view Layout di Orchard

Tornando al nostro sito creato in Web Matrix, possiamo analizzare i file del nostro progetto cliccando sul voce del menu laterale Files. Per visualizzare i file del nostro tema invece espandiamo la radice Comap Impiantistica e l'elemento Themes, in cui troveremo il nostro tema comapimpiantistica:

Espandendo l'elemento comapimpiantistica possiamo osservare la struttura delle cartelle di un tema:

La cartella Content conterrà le nostre immagini, mentre Scripts e Styles rispettivamente i file javascript e i css. In Views invece metteremo i nostri file .cshtml, mentre lasceremo vuota la cartella Zones. Come avremo modo di esaminare più avanti il file Placement.info ci permetterà di indicare informazioni sul posizionamento dei vari elementi del nostro tema, mentre Theme.png e Theme.txt rappresentano rispettivamente l'immagine di anteprima del tema e il manifest con le informazioni sul tema che stiamo realizzando.

Per aggiungere una nuova view al nostro tema ci basta fare tasto destro sulla cartella Views e scegliere New File dal menu a tendina  che compare. A questo punto possiamo selezionare, dalla finestra che ci viene mostrata da Web Matrix, la categoria Common, il formato CSHTML, indicare il nome che vogliamo dare alla view, nel nostro caso Layout, e cliccare sul pulsante Ok.

Il file Layout.cshtml permette di definire il layout del nostro tema, un po' come viene fatto con le master page quando viene utilizzato aspx come view engine. E' proprio in questo file che andiamo a incollare l'html della home page del template grafico scelto dal cliente

Copiamo quindi le immagini del template nella cartella Content, il css nella cartella Styles e l'html della home page nel contenuto del Layout.cshtml:

Chiaramente è necessario modificare i percorsi delle immagini utilizzati nel css andando a sostituire le stringhe "../images/" in "../Content/images", sfruttando il tool di sostituzione testo di Web Matrix.

Eliminiamo l'elemento radice html, head e i tag di apertura e chiusura di body, sostituendoli con un blocco di codice che permette di includere le shape di base di Orchard e il nostro foglio di stile. Per le immagini non linkate dal css, ma direttamente dal nostro html, dobbiamo specificare come generare il path in modo che sia indipendente dal path della pagina che utilizzerà il layout cshtml e il percorso fisico del tema. Per fare questo utiliziamo alcuni helper forniti da Asp.Net MVC per la generazine dinamica del markup html, in particolare l'url helper Content e l'html helper fornito da Orchard per recuperare il path del tema corrente, ThemePath.

Lanciando il sito si cominciano a vedere già i primi risultati:

Non ci resta che delimitare le sezioni del layout, che in Orchard sono dette Zone,  che saranno renderizzate dinamicamente dalle view che utilizzano il nostro layout.cshtml. Cominciamo dal menu principale, identificando la sezione di markup che visualizza le voci di menu:

Tagliamo questo markup e sostituiamolo con l'istruzione necessario al rendering della Zone standard di Orchard per il menu principale, denominata Navigation:

Andiamo adesso ad aggiungere un'altra View al nostro tema, che chiameremo Menu e in cui andremo ad incollare proprio il pezzo di markup tagliato precedentemente: questo ci permetterà di rendere in un secondo momento dinamico il menu in modo che risponda agli elementi creati nella dashboard.

La domanda  che dobbiamo farci a questo punto è: dobbiamo conoscere a memoria il nome delle zone che vogliamo personalizzare, il nome delle proprietà che esprimono dinamicamente i contenuti modificati nella dashboard e tutte le altre informazioni definite dal team di Orchard? Ricordando che sostanzialmente possiamo modificare qualsiasi aspetto di Orchard, anche perchè ne abbiamo i sorgenti, potremmo in prima analisi pensare di andare a modificare un po' di cose ma in realtà esiste un modulo che ci permette di visualizzare direttamente sul sito le informazioni di cui abbiamo bisogno.

I Designer Tools

Il modulo in questione di chiama Designer Tools e può essere installato dalla gallery raggiungibile dalla voce Modules della dashboard.

Dopo aver attivato il modulo il nostro sito presenterà nella parte in basso un barra speciale che permette di aprire i designer tools per l'utilizzo:

Con i designer tools aperti il sito non risponderà più ai click del mouse, questo perchè saranno interpretati come selezione di una sezione di interesse, oppurtanamente evidenziata, le cui informazioni saranno visualizzate nei tools:

Cliccando sulle informazioni del Model per questo template possiamo esaminare le informazioni fornite alla view che ci interessa, in questo caso il Model di menu, che contiene una collezione di Item da cui possiamo recuperare il testo del menu dalla proprietà Text e l'Href a cui si riferisce.

Possiamo quindi modificare la view Menu in modo che cicli sull'insieme degli item utilizzando queste proprietà per generare le voci di menu:

Per vedere l'effetto ottenuto aggiungiamo la pagina Chi Siamo, creando una nuova Page dalla dashboard, inserendo del testo descrittivo e indicando di inserire una voce nel menu principale, chiamata Chi Siamo, che punti al link della pagina:

Come avevamo notato però la pagina principale e le altre pagine, tra cui anche la nostra Chi Siamo, hanno nel template un'impaginazione diversa, abbiamo quindi bisogno di strutturare diversamente il layout per i due casi. Nel caso della home page ci basta modificare il nome del file layout in layout-url-homepage, in questo modo Orchard utilizzerà questa view come layout solo per la homepage:

AsideFirst, Content, AsideSecond e AfterMain sono alcune delle zone del template standard di Orchard. TheThemeMachine, come mostra lo schema proprio di questo template:

 Duplichiamo a questo punto la view, la rinominiamo in Layout.cshtml e utilizziamo l'html della pagina Chi Siamo per definire le zone AsideFirst, Content e Footer:

Ottenendo così il risultato voluto per le pagine diverse dalla Home Page:

Nel prossimo articolo ultimeremo il nostro tema aggiungendo gli elementi mancanti ad una corrispondenza perfetta al template scelto dal cliente.

Recent Comments

By: Michele Aponte Posted on 7 apr 2012 20:51

Ciao Fabio,

includi jQuery ( Script.Require("jQuery"); ) e usa

@using(Script.Foot()) {

   <script type ="text/javascript">

       $(document).ready(function () {

           ElementMaxHeight();

       });

   </script>

}

non ho provato ma dovrebbe andare. Fammi sapere.

By: fabioso Posted on 11 apr 2012 17:09

Perfetto ora la funzione javascript ElementMaxHeight() viene eseguita.

Per verifica ho messo anche degli alert all'interno della funzione.

Però continua a impaginare male come prima.

ho provato a fare delle varianti al tuo suggerimento del tipo:

       var body = $(document).getElementsByTagName("body")[0];

       body.addEventListener("load", new ElementMaxHeight, false);

oppure

     $(document).onload(function () {

          ElementMaxHeight();

      });

oppure

     $(window).onload(function () {

          ElementMaxHeight();

      });

sia su Script.Foot()  che Script.Head())

però ho ottenuto sempre lo stesso risultato,

la funzione viene eseguita ma impagina male

Ho verificato che i 2 fogli stile vengono caricati

Non so più cosa pensare...

Il template l'ho preso qui:

www.graficasitiweb.com/template-prova.html

By: fabioso Posted on 11 apr 2012 17:36

Allora sono riuscito a capire il motivo perchè impagina male (ma non ho trovato la soluzione):

non è dovuto alla funzione ElementMaxHeight() che fra l'altro grazie al tuo suggerimento ora viene eseguita

ma non mi ero accorto che nel template originale utilizzato nel tag body oltre alla funzione è presente anche la propietà ID legata  al foglio di stile:

<body id="index" onload="new ElementMaxHeight();">

(ho verificato che aprendo con il browser il template originale senza la proprietà id impagina male)

Quindi ora la domanda è:

come faccio a includere la proprietà Id del body di layout.cshtml ?

By: Michele Aponte Posted on 11 apr 2012 21:35

Sinceramente io cambierei il layout, ma se non vuoi a questo punto ti conviene ti conviene fare l'override di document.cshtml: docs.orchardproject.net/.../Anatomy-of-a-theme

By: Michele Aponte Posted on 11 apr 2012 21:35

Sinceramente io cambierei il layout, ma se non vuoi a questo punto ti conviene fare l'override di document.cshtml: docs.orchardproject.net/.../Anatomy-of-a-theme

Associazione Culturale DotNetCampania - C.F.: 95127870632

Powered by Community Server (Commercial Edition), by Telligent Systems