PrimordialCodehttp://www.primordialcode.com

WebMatrix + OrchardFirst Impact…

Ing. Giorgetti AlessandroSoftware ArtisanSID s.r.l.

PrimordialCodehttp://www.primordialcode.com

About me…

Laurato 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 di

applicazioni web, include tutto quello di cui si ha bisogno per iniziare a svilupparte il tuo sito web.

• Non è un ostituto di Visual Studio.

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

• Si integra con IISExpress per semplicare l’hosting di siti durante lo sviluppo.

PrimordialCodehttp://www.primordialcode.com

WebMatrix• Creare un sito web: si possono creare siti

completamente vuoti od utilizzare i template o le web application gestite da WebMatrix come punto di partenza.

• I siti web sono ‘hostati’ appoggiandosi 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: essenzialmente

mira ad aiutare la ‘costruzione’ di un sito web partendo da elementi già esistenti.

• Segue un approccio estremamente modulare e flessibile.

• Costruito su ASP.NET MVC 3.

• Layer di peristenza basato su Nhibernate + Fluent Mappings.

• Puo’ utilizzare diversi tipi di database (non sono 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 - demo

Setup Orchard con WebMatrix

Setup

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 parti che offrono diverse funzionalità; queste ultime possono poi essere combinate per ottenere operazioni anche complesse.

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 fields’ sono pezzi 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. È possibile associare diversi content field ad uno stesso tipo di contenuto.

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…

Content Types

PrimordialCodehttp://www.primordialcode.com

Orchard - modules and features

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

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

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

• Per accedere alla gestione dei moduli: Dashboard Modules (qui è possibile installare, abilitare, disabilitare, configurare moduli e funzionalità).

PrimordialCodehttp://www.primordialcode.com

Orchard - demo

How it works…

Mdls & Ftrs

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 è un package che definisce il

‘look & feel’ per un sito web.• Consiste in una combinazione di style

sheets, immagini, file di layout, templates 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 el sito.

• Un Layout definisce 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 diverse 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 possono essere customizzate inserendo elementi e widgets.

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

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

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

PrimordialCodehttp://www.primordialcode.com

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

loro specifica configurazione) che è 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 - layerUna regola di layer è una espressione che puo’ 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 - template• Ogni contenuto deve essere rappresentato

graficamente all’utente.

• Occorre un metodo per convertire i dati e le informazioni che descrivono il contenuto in elementi HTML che possono essere renderizzati dal browser.

• Un template è 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 divenire renderizzato attraverso un template

ogni oggetto viene convertito in una ‘Shape’.

• Una ‘shape’ è 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 deve

ottenere informazioni circa il posizionamento di ogni oggetto.

Due meccanismi fondamentali:

• Queste informazioni derivano dai template

• File Placement.info – file XML che descrivono, mediante un 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 possono avere 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!