PrimordialCodehttp://www.primordialcode.com

WebMatrix + OrchardFirst Impact…

Ing. Giorgetti AlessandroSoftware ArtisanSID s.r.l.

PrimordialCodehttp://www.primordialcode.com

About me…

Laurea in Ingegneria ElettronicaCofondatore di SID s.r.l.

Blog: http://www.primordialcode.com

Email: alessandro.giorgetti@live.com, guardian@nablasoft.com

Twitter: @A_Giorgetti

Giorgetti Alessandro

PrimordialCodehttp://www.primordialcode.com

WebMatrix

PrimordialCodehttp://www.primordialcode.com

WebMatrix• WebMatrix: tool gratuito per lo

sviluppo ed il deploy di applicazioni web.

• Non è un sostituto di Visual Studio.

• Gestisce diversi tipi di web applications e web application frameworks (like WordPress, Umbraco, Orchard…).

PrimordialCodehttp://www.primordialcode.com

WebMatrix• Creazione di un sito web: si possono creare siti

completamente vuoti od utilizzare i template di inuumerevoli web application frameworks.

• I siti web sono ‘in hosting’ su IIS o IISExpress: ambiente ideale per lo sviluppo.

• Personalizzazione: WebMatrix supporta differenti tipi di editor per gestire diversi aspetti del sito web (pagine, css, etc…).

• Pubblicazione: utilizzando un wizard integrato è possibile pubblicare automaticamente il proprio sito web verso il provider di destinazione.

PrimordialCodehttp://www.primordialcode.com

WebMatrix - setupIl modo più semplice per istallare WebMatrix:

• Download ed Istallazione: Microsoft Web Platform Installer

• Cerca Microsoft WebMatrix tra i prodotti disponibili ed aggiungilo alla lista di istallazione

• Tutte le dipendenze saranno automaticamente scaricate ed istallate se necessario.

PrimordialCodehttp://www.primordialcode.com

WebMatrix - setup

PrimordialCodehttp://www.primordialcode.com

WebMatrix - site view• Consente di configurare con semplicità diversi parameteri del sito relativi all’hosting su IIS o

IISExpress (in alternativa si possono gestire ‘a mano’ i file di configurazione).

PrimordialCodehttp://www.primordialcode.com

WebMatrix - file view• Consente di creare ed editare file relativi al sito web: dal codice agli

stili CSS.

PrimordialCodehttp://www.primordialcode.com

WebMatrix - database view• Consente la connessione e la gestione di diversi tipi di datasource: è possibile editare tabelle e gestire i dati in

esse contenuti.• Non è un sostituto per Sql Management Studio, Toad ed analoghi.

PrimordialCodehttp://www.primordialcode.com

WebMatrix - report view• Consente di analizzare il sito web e scovare potenziali problemi.

PrimordialCodehttp://www.primordialcode.com

WebMatrix - demo

How it works…

WebMatrix in action

PrimordialCodehttp://www.primordialcode.com

Orchard

PrimordialCodehttp://www.primordialcode.com

Orchard• Orchard è un CMS web based: consente la

‘costruzione’ di un sito web partendo da elementi già esistenti.

• Segue un approccio estremamente modulare e flessibile.

• Basato su ASP.NET MVC 3.

• Layer di peristenza: Nhibernate + Fluent Mappings.

• Può utilizzare diversi tipi di database (non solo SqlServer).

PrimordialCodehttp://www.primordialcode.com

Orchard - setupDiverse opzioni di installazione e configurazione: dal

download e compilazione del source code all’uso di pacchetti di istallazione precompilato o del Windows Platform Installer (my favourite).

In ogni caso, abbiamo iniziato con WebMatrix procediamo sullo stesso percorso:

• Aprire la dashboard di WebMatrix.• Selezionare ‘Sito da raccolta web’.• Scegliere Orchard dalla lista che viene presentata.

PrimordialCodehttp://www.primordialcode.com

Orchard - first runUna volta istallato, alla

prima esecuzione ci verranno richieste alcune informazioni per configurare il sito:

• Nome del sito.• Account di

amministrazione.• Tipo di storage.• Template da cui costruire

il sito.

PrimordialCodehttp://www.primordialcode.com

Orchard - first runEcco cosa si ottiene quando la procedura di setup iniziale è completa:

PrimordialCodehttp://www.primordialcode.com

Orchard - first runQuesto è uno screenshot della dashboard:

PrimordialCodehttp://www.primordialcode.com

Orchard - demo

Istallazione e configurazione del sito

Up and Running in 5 minutesFirst Run Demo

PrimordialCodehttp://www.primordialcode.com

Orchard – concetti di baseOrchard è una soluzione estremamente

modulare.

Ogni modulo/package può essere suddiviso in differenti componenti che offrono diverse funzionalità.

Per capire ‘come funziona’ dobbiamo familiarizzare con alcuni termini e definizioni utilizzate dal team di sviluppo:

PrimordialCodehttp://www.primordialcode.com

Orchard – concetti di baseContentTutto ruota attorno ai contenuti; un ‘contenuto’ è

qualcosa che ha delle informazioni associate (una pagina, un post del blog, un commento…abbiamo diversi tipi di contenuti).

Un contenuto non è di per sé una entità atomica; può essere composto da diversi tipi di informazioni (parti).

Una singola ‘content part’ viene utilizzata per fornire un comportamento coerente che può essere riutilizzato in diversi contesti.

PrimordialCodehttp://www.primordialcode.com

Orchard - content parts• Admin Menu – consente agli elementi di apparire nei

menu di amministrazione (dashboard).• Body – fornsce il contenuto, l’informazione.• Comments – supporto per la gestione dei commenti• Common – fornisce attributi e supporto a funzioni di

base (come indicare un proprietario e/o vari timestamp).

• Containable – consente all’oggetto di essere contenuto in una lista.

• Container – fornisce supporto per contenere oggetti di diversa tipologia.

• Custom properties – aggiunge tre campi stringa custom agli oggetti.

PrimordialCodehttp://www.primordialcode.com

Orchard - content parts• Identity• Menu – consento al contenuto di apparire nei

menu• Publish Later – fornisce supporto alla

gestione della pubblicazione differita nel tempo• Route Part – supporto per consentire

l’accesso alla risorsa• Tags Part – associa dei tag al contenuto

(consente una sorta di categorizzazione dei contenuti, i contenuti ‘taggati’ sono accessibili come risorse: ~/tags/tag-name)

• More parts can be added…

PrimordialCodehttp://www.primordialcode.com

Orchard - content fieldsI ‘Content field’ sono porzioni di informazione che

possono essere aggiunti ai ‘Content Item’.

Hanno un nome ed un tipo ed una volta associati divengono specifici per un dato content type.

Ad esempio: un contenuto di tipo ‘Evento’ puo’ avere associato un body (informazione che descrive l’evento), un field ‘Locazione’ (testo,map) ed un field ‘Data’ (datetime).

È possibile definire dei field custom per rappresentare i propri tipi di informazioni.

PrimordialCodehttp://www.primordialcode.com

Orchard - demo

Creare diversi tipi di contenuti…

Creare Contenuti

PrimordialCodehttp://www.primordialcode.com

Orchard - modules and features

• Tutte le funzionalità esposte da Orchard sono implementate come moduli (module).

• Un modulo è un set di estensioni fisicamente raggruppate in una cartella del sito web (all’interno della cartella ‘Modules’).

• Un modulo può contenere una o più funzionalità (feature), un modulo è quindi un raggruppamento logico di funzionalità che possono essre abilitate o disabilitate individualmente.

• Per accedere alla gestione dei moduli: Dashboard Modules.

PrimordialCodehttp://www.primordialcode.com

Orchard - demo

How it works…

Modules & Features

PrimordialCodehttp://www.primordialcode.com

Orchard – themes & composition• Orchard predilige una chiara separazione tra la gestione

del contenuto (informazione) e la visualizzazione del contenuto stesso.

• Ogni funzionalità, parte o contenuto hanno la propria rappresentazione grafica.

• Orchard è caratterizzato dall’avere un motore di composizione che è in grado di accorpare le singole entità eterogenee in una unica organizzazione coerente.

• Il meccanismo di composizione di Orchard è abbastanza complesso da padroneggiare, questo è dovuto essenzialmente all’elevato livello di flessibilità e customizzazione che deve garantire.

PrimordialCodehttp://www.primordialcode.com

Orchard - theme• Un Tema (theme) è un package che definisce

il ‘look & feel’ per un sito web.

• Consiste in una combinazione di style sheet, immagini, file di layout, template per controlli e, nei temi più avanzati, custom code.

• È possibile creare temi che ereditino da altri temi predefiniti (in questo modo è possibile effettuare piccole modifiche ad un tema base senza alterarne le funzionalità).

PrimordialCodehttp://www.primordialcode.com

Orchard - layout• Un ‘Layout’ in una tema è un particolare file che

definisce l’organizzazione della pagina web.

• Un Layout identifica un set di zone in cui posizionare contenuti e widgets.

• Al momento è possibile avere un solo Layout di base per il sito.

• È possibile customizzare come le pagine di diverse sezioni vengono renderizzate usando combinazioni di diversi layers (maggiori informazioni tra breve).

PrimordialCodehttp://www.primordialcode.com

Orchard - layout (example)

PrimordialCodehttp://www.primordialcode.com

Orchard - zones & widgets• Le ‘Zone’ sono specifiche sezioni del layout che

si prestano all’inserimento di contenuti e widgets.

• Le zone prive di elementi o contenuto non vengono renderizzate.

• Un ‘Widget’ è un frammento di UI che può essere aggiunto alla pagina del sito.

• Esempi di widgets: tag cloud, mappe, archivi, liste di post, etc… sono implementati come funzionalità esposte dai moduli.

PrimordialCodehttp://www.primordialcode.com

Orchar - layer• Un ‘Layer’ è un gruppo di widget (con la loro

specifica configurazione) attivato da una ben definita regola di visualizzazione.

• È possibile definire diversi tipi di regole di visualizzazione.

• Quando più di un layer è attivo contemporaneamente sulla stessa pagina, tutti gli widget di quei layer sono visualizzati contemporaneamente.

• Per customizzare e/o definire layers:Dashboard Widgets.

PrimordialCodehttp://www.primordialcode.com

Orchard – layer rulesUna regola di layer è una espressione che può essere vera o falsa.Rules syntax:

Syntax Description

url("<url path>") True if the current URL matches the specified path. If you add an asterisk (*) to the end of the path, all pages found in subfolders under that path will evaluate to true (for example,url("~/home*")).

authenticated True if the user is logged in.

not Logical NOT.

and Logical AND.

or Logical OR.

You can build complex expressions:

(not authenticated and url("~/about")) or authenticated

PrimordialCodehttp://www.primordialcode.com

Orchard - templateAbbiamo visto l’organizzazione della pagina

(theme, layout, zone, widget, layer); occupiamoci ora della visualizzazione effettiva del contenuto:

• Occorre un ‘qualcosa’ che consenta la conversione dei dati e delle informazioni in elementi HTML che verranno renderizzati dal browser.

• Un template è essenzialmente un file HTML con dei placeholders e dei markers per indicare la posizione dei dati all’interno del frammento:(<h2>@Model.Title</h2>).

PrimordialCodehttp://www.primordialcode.com

Orchard - shape• Prima di venire renderizzato attraverso un template

ogni oggetto viene convertito in una ‘Shape’.

• Una shape è letteralmente un oggetto che contiene tutte le informazioni necessarie alla sua visualizzazione.

• A livello logico una pagina non è altro che un albero di queste strutture che fornisce una rappresentazione astratta della pagina stessa (come avviene in WPF/Silverlight con i visual ed i logical tree di una form xaml).

• Questo approccio consente la trasformazione di ogni oggetto prima della effettiva visualizzazione.

PrimordialCodehttp://www.primordialcode.com

Orchard - placementDurante il rendering di una pagina Orchard elabora

informazioni circa il posizionamento di ogni oggetto.

Due meccanismi fondamentali:

• Informazioni derivanti dai template.

• File Placement.info – file XML che descrive, mediante un opportuno set di regole, come combinare le shapes, in che ordine ed in quali zone inserirle.

PrimordialCodehttp://www.primordialcode.com

Orchard - demo

Layers & Widget

PrimordialCodehttp://www.primordialcode.com

Orchard - security• Supporto per gestione Utenti e Ruoli.• Set predefinito di Ruoli a cui è possibile assegnare gli

utenti.• È possibile creare nuovi ruoli.• Ogni ruolo ha il proprio set di permessi assegnato.• I permessi sono garantiti ai ruoli, ma non

esplicitamente negati: se un utente appartiene ad un gruppo che garantisce un determinato permesso allora l’utente ha quel permesso.

• Alcuni permessi sono ‘garantiti effettivamente’ (sono implicati da altri pemessi, es: site owner garantisce implicitamente tutto il resto).

• Ogni feature può esporre il proprio set di permessi.• Gestione Utenti e Ruoli: Dashboard Users.

PrimordialCodehttp://www.primordialcode.com

Orchard – advanced topics

PrimordialCodehttp://www.primordialcode.com

Orchard - searching & indexing

• Funzionalità fornita attraverso un set di moduli:– Indexing – fornisce servizi di indicizzazione.– Lucene – implementazione specifica servizio idx.– Search – fornisce la possibilità di eseguire query.

• Nuove opzioni vengono aggiunte alla sezione di configurazione della Dashboard (per selezionare quali tipi di contenuti indicizzare e come schedulare le operazioni di indicizzazione).

• Viene fornito un nuovo widget (SearchForm) per offrire agli utilizzatori del sito una interfaccia mediante la quale eseguire ricerche.

PrimordialCodehttp://www.primordialcode.com

Orchard – custom content types

È possibile creare tipi di contenuto custom per rappresentare specifici scenari (come ad esempio un ‘Evento’ o uno ‘Sponsor’).

I tipi custom possono essere costituiti da:

• Parts – blocchi predefiniti di proprietà che definisco comportamenti ben precisi ed uniformi.

• Fields – singole porzioni di informazioni che definiscono dati specifici al tipo che stiamo costruendo (supporto per differenti tipi di campo, altri ne possono essere creati emdiante moduli e features).

• I tipi custom hanno diversi comportamenti in relazione alle differenti Parts che vengono usati per comporli.

PrimordialCodehttp://www.primordialcode.com

Orchard – content lists

È possibile organizzare i contenuti in liste:

• Editare un tipo esistente o crearne uno custom aggiungendo le seguenti Parts:– Common – fornisce supporto per un set base di proprietà

(proprietario, date di creazione e modifica, ecc…)– Containable – indica che questo tipo può essere

associato ad una lista ed abilita la dashboard alla gestione della relazione tra contenuti e liste.

• Di seguito si deve creare una List (lista) che conterrà oggetti del tipo appena definito:Dashboard New List.

PrimordialCodehttp://www.primordialcode.com

Orchard – content lists

Per visualizzare una lista:

• Collegare il contenuto di tipo ‘List’ ad una voce di menu e visualizzarlo come pagina intera.

• Usare un “Container Widget” per inserire il contenuto all’interno di una zona del layout.

PrimordialCodehttp://www.primordialcode.com

Orchard - demo

Custom types

PrimordialCodehttp://www.primordialcode.com

Thanks for attending!