DNM19 Sessione2 Orchard Temi e Layout (Ita)

2,680 views

Published on

Community Tour 2010 - CMS Edition
DotNetMarche
Slides relative alla seconda sessione su Orchard: principi di base sulla customizzazione di temi e layout.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,680
On SlideShare
0
From Embeds
0
Number of Embeds
820
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Avviare il sito con il tema DNM precaricato.-passare al tema standard (TheThemeMachine)-Abilita i designer tool e far vedere lo Shape Tracing sulla sezione attuale.Siamo in grado di mostrare nel dettaglio:Model.Shape Templates.Far vedere come si naviga all’interno delle strutture e come dalle informazioni riportate nello Shape Tracing si risale ai file ed alla loro posizione.(ha problemi con IE8 ..usare chrome)
  • Aprire WebMatrix e far vedere alcuni template:Document.cshtml (dentro SafeMode)Layout.cshtml(dal tema di default usando anche il designer tool identifichiamo le sezioni che vogliamo cambiare)Far vedere come generare un tema (magari da 0 con la sintassi del codegen)codegen theme MyTheme /BasedOn:TheThemeMachine /CreateProject:true /IncludeInSolution:trueCustomizzare un tema.-Copiare i file che si desiderano modificare e di cui fare l’override(far vedere come cambia il branding per inserire ad esempio una immagine)-Aggiungere file che si desidera innserire.(inseriamo un widget wrapper)
  • Far vedere un po’ di placement file.Come demo mostrare la modifica al placement file del tema DNM per spostare la posizione dei metadati da sotto al titolo in fondo al post.
  • DNM19 Sessione2 Orchard Temi e Layout (Ita)

    1. 1. Orchard – Temi e Layoutconcettidi base<br />Ing. Giorgetti Alessandro<br />Software Artisan<br />SID s.r.l.<br />
    2. 2. About me…<br />Giorgetti Alessandro<br />Laurea in Ingegneria Elettronica<br />Cofondatore di SID s.r.l.<br />Blog: http://www.primordialcode.com<br />Email: alessandro.giorgetti@live.com, guardian@nablasoft.com<br />Twitter: @A_Giorgetti<br />
    3. 3. Orchard theme – how to…<br />Il modo più semplice per creare un nuovo tema in Orchard: utilizzare ‘Orchard command line’ + ‘Codegen’.<br />Creare un tema vuoto.<br />Creare un tema basato su un altro tema.<br />La seconda opzione è particolarmente utile poiché consente di eseguire personalizzazioni solo su determinati aspetti del tema selezionato come base: si devono copiare e modificare solo quei file che si intendono cambiare.<br />Quando si applica un tema, l’engine di Orchard, seguendo le proprie regole di matching, cercherà prima i file specifici nella cartella del tema, in mancanza di essi proverà con quelli del tema base ed infine verifichirà il contenuto del tema di sistema ‘SafeMode’. Il risultato è un merging di tutte queste ‘strutture’.<br />Tutti i temi ‘vivono’ all’interno della cartella ‘Themes’.<br />
    4. 4. Orchard theme – how to…<br />Per creare un nuovo tema vuoto:<br />Per creare un tema basato su un altro tema:<br />Se si ha in mente di utilizzare Visual Studio per editare il tema o aggiungere file di codice, vanno considerati anche questi due switch della linea di comando:<br />codegen theme MyTheme<br />codegen theme MyTheme /BasedOn:TheThemeMachine<br />/CreateProject:true<br />/IncludeInSolution:true<br />
    5. 5. Orchard – struttura di un tema<br />Ecco come si presenta la struttura del tema di default e di un tema ‘figlio’ creato basandosi sul precedente:<br />
    6. 6. Orchard – struttura di un tema<br />Manifest<br />File di testo denominato ‘Theme.txt’ da posizionarsi nella radice del tema.<br />Fornisce informazioni descrittive sul tema.<br />Fornisce informazioni su:<br />Tema base.<br />Nome delle zone in cui inserire widgets.<br />Name: The Theme Machine<br />Author: jowall, mibach, loudej, heskew<br />Description: Orchard Theme Machine is a flexible multi-zone theme that provides a solid foundation to build your site. It features 20 collapsible widget zones and is flexible enough to cover a wide range of layouts.<br />Version: 1.1.30<br />Tags: Awesome<br />Website: http://orchardproject.net<br />Zones: Header, Navigation, Featured, BeforeMain, AsideFirst, Messages, BeforeContent, Content, AfterContent, AsideSecond, AfterMain, TripelFirst, TripelSecond, TripelThird, FooterQuadFirst, FooterQuadSecond, FooterQuadThird, FooterQuadFourth, Footer<br />Name: DotNetMarcheTheme<br />Author: The Orchard Team<br />Website: http://www.orchardproject.net<br />Description: Description for the theme<br />Version: 1.0<br />BaseTheme: TheThemeMachine<br /># todo: provide tags<br /># Tags: Classic, Serif<br />
    7. 7. Orchard – struttura di un tema<br />Immagini di Preview<br />Theme.png e ThemeZonePreview.png utilizzate nella gallery e nella dashboard per fornire una preview del tema.<br />Risorse statiche<br />Fogli di stile, custom javascript code, immagini e tutto quanto concerne contenuto non dinamico vanno inseriti nelle apposite sezioni.<br />All’interno di queste cartelle è presente un file web.config utile alla configurazione di IIS per consentirgli di servive questo tipo di risorse, è importante non eliminare questo file.<br />
    8. 8. Orchard – struttura di un tema<br />Document<br />Definisce la struttura di base di una pagina HTML.<br />Contiene gli elementi <html>, <head>, <body>.<br />Definisce il ‘doctype’ assumendo le specifiche di HTML5 come default.<br />Segue la sintassi del view engine scelto (Razor per default).<br />Posizionato nel tema ‘SafeMode’ nella cartella ‘Views’.<br />
    9. 9. Orchard – struttura di un tema<br />Layout<br />Definisce l’attuale struttura del contenuto della pagina (effettivo contenuto del tag <body>).<br />Segue la sintassi del view engine scelto (Razor per default).<br />Definisce le zone in cui iniettare widgets.<br />La denominazione delle zone deve corrispondere a quanto dichiarato sul file Manifest.<br />
    10. 10. Orchard – shape<br />Shape<br />È un dynamic object costruito e valorizzato a runtime che descrive una porzione di contenuto e porta con se tutte le informazioni necessarie alla sua visualizzazione.<br />È possibile pensare ad una shape come alla coppia delle informazioni (contenuti) da rappresnetare e del template da utilizzare per la visualizzazione (metadati).<br />Esiste un set di regole ben definito che consente di associare uno o più template ad una shape.<br />
    11. 11. Orchard – shape template<br />Template<br />Concettualmente simile ad una partial view in asp.net, diversi tipi:<br />Item template<br />Cartella ‘ViewsItems’. Definiscono come un particolare tipo di contenuto può essere visualizzato.<br />Il nome del template indica come mapparlo sul contenuto: “Content-{content type name}.cshtml”“Content-{content type name}.{display type}.cshtml”.<br />Part Template<br />Cartella ‘viewsparts’. Definisce l’aspetto di una singola Part (un set di attributi per un oggetto che definiscono un comportamento comune).<br />Ex: “ViewsPartsComments.cshtml” definisce l’override del rendering HTML dei commenti associati ad un oggetto<br />
    12. 12. Orchard – shape template<br />Field template<br />Cartella ‘ViewsFields’. Definisce l’aspetto generale dei singoli elementi di pagina(es: campi di testo “ViewsFieldsCommon.Text.cshtml”). <br />Alternates<br />Introdotto in Orchard 1.1.<br />È possibile definire delle rappresentazioni alternative per uno stesso elemento del tema da utilizzare in diversi contesti. Esistono diversi modi per indicare quale visualizzazione alternativa utilizzare.<br />
    13. 13. Orchard – shape template<br />Widgets<br />Cartella ‘Views’. È possibile eseguire l’override della visualizzazione di un qualsiasi widget utilizzando un file denominato: “widget-{widget type}.cshtml.<br />Placement file<br />Introdotto con Orchard 1.1.<br />File ‘placement.info’ posizionato nella radice del sito.<br />Consente di modificare dove le shape sono posizionate relativamente all’interno della pagina.<br />Regole di composizione avanzate.<br />
    14. 14. Orchard – template naming<br />Esistono complesse regole di composizione per determinare quale template viene utilizziato durante la fase di renderizzazione delle shape:<br />Vengono analizzati i metadati della shape (proprietà shape.metadata).<br />Lo ‘shape type name’ effettua il binding della shape allo specifico template che sarà utilizzato per il rendering secondo una specifica convenzione basata sul nome.<br />Regole per il posizionamento dei template file:<br />Content item  cartella views/items<br />Parts  cartella views/parts<br />Fields  cartella views/fields<br />EditorTemplate shapes  cartella views/EditorTemplate/(template name)<br />Tutto il resto  cartella views/<br />Regole per la conversione Shape Name  File Name:<br />Punto (.) e backslash () vengono cambiati in underscore (_)<br />Hypen (-) viene convertito in un doppio underscore (__)<br />Regole addizionali che riguardano i prefissi da utilizzare in base al tipo di contenuto (content items, parts, widgets o altro).<br />
    15. 15. Orchard – template naming<br />
    16. 16. Orchard – template naming<br />
    17. 17. Orchard - Designer Helper Tools<br />La struttura è obiettivamente complessa.<br />Visualizzare l’albero delle shapes nella nostra testa non è semplice.<br />Il Team di Orchard pensa a noi  e ci offre un tool – Shape Tracing - che ci consente di navigare all’interno della struttura del sito e di avere informazioni sulle shape, i model ed i template coinvolti nel rendering.<br />Shape Tracing è disponibile nel modulo ‘Designer Tools’.<br />Può essere abilitato/disabilitato all’occorrenza.<br />
    18. 18. Orchard - demo<br />How it works…<br />Designer Tools<br />
    19. 19. Orchard – Razor View Engine<br />Ricapitoliamo alcuni concetti sui template:<br />Simili ad una Partial View.<br />Contengono HTML, stili CSS, Javascript o codice.<br />Il ‘View Engine’ è responsabile del parsing del template e del rendering effettivo dell’HTML che verrà poi spedito al browser.<br />Possono contenere server side code (C# o VB) per accedere e renderizzare o dati delle shape (View Engine Razor).<br />File con estensione .cshtml o .vbhtml<br />
    20. 20. Orchard – Razor syntax<br />Commenti<br />Client markup comments<br />Sono presenti anche nell’HTML che viene renderizzato per il client: visibili analizzando il sorgente delle pagine lato client.<br />Server markup comments<br />Vengono eliminati dal markup finale: l’utente non è in grado di vedere questo tipo di commenti (rendono la pagina più leggera)<br /><!– your comments goes here --><br />@* single line comment *@<br />@*<br /> multiline<br /> comment<br />*@<br />
    21. 21. Orchard – Razor syntax<br />Code Block<br />Carattere ‘@’ seguito dalle parentesi ‘{‘ e ‘}’:<br />Inline Code<br />Carattere ‘@’ seguito dal riferimento all’oggetto:<br />Single Expression<br />Se il blocco di codice consiste di una singola espressione (come ad esempio un ‘for’, ‘if-then’, ‘while’, etc…), il carattere ‘@’ può precedere direttamente la keyword senza bisogno di specificare le parentesi:<br />@{ …<br /> var homeUrl = Href("~/");<br />… }<br /><h1 id="branding“><a href="@homeUrl"><br />@WorkContext.CurrentSite.SiteName</a></h1><br />…class="group"><br /> @if (Model.AsideFirst != null) {<br /> <aside id="aside-first" class="aside-first group"><br /> @Zone(Model.AsideFirst)<br /> </aside> } <div…<br />
    22. 22. Orchard – accedere alle proprietà<br />Accesso semplificato agli oggetti del dominio (shape): è possibile accedere direttamente alle content part senza dover utilizzare casting.<br />Prima: var contentItem = (ContentItem)Model.ContentItem; var picture = (ImageField)contentItem.As<ProfilePart>().Fields.First(f => f.Name == "Picture");@picture.Width<br />Dopo: @Model.ContentItem.ProfilePart.Picture.Width<br />
    23. 23. Orchard - demo<br />Razor<br />
    24. 24. Orchard – advanced topicPlacement<br />
    25. 25. Orchard - placement<br />I contenuti (Content) sono composti da sottoelementi (Parts).<br />Ogni elemento ha la propria rappresentazione grafica (template).<br />I contenuti sono dinamici, possono variare nel tempo (è possibile aggiungere field o parts, anche questi con i loro template).<br />La rappresentazione grafica deve variare di conseguenza:- intervenire direttamente sui template per ‘incorporare’ il rendering dei nuovi elementi.- sfruttare i placement.info file (new in Orchard 1.1)<br />
    26. 26. Orchard - placement<br />Orchard, durante la generazione del layout, separa le operazioni di:<br />Rendering – eseguito dai template<br />Placement – eseguito ricorrendo ai file placement.info <br />Ogni modulo o tema può definire il posizionamento dei propri elementi utilizzando un placement.info file posizionato nella propria root folder .<br />Placement.info agisce a livello di Content-item (è possibile riordinare solo gli elementi all’interno della specifica sezione in cui si trovano).<br />
    27. 27. Orchard – placement.info<br />Sintassi XML specifica:<br /><placement> - elemento contenitore esterno<br /><place> - definisce il posizionamento di uno o più oggetti in base agli attributi specifici:“name” – il nome di una specifica shape (designer tool)<br />“value” – definisce il posizionamento, composta da nome di una zona (header, content, meta, footer), il carattare “:” se guito da una posizione numerica o dai qualificatori ‘before’ o ‘after’.<br />Sempre sulla porzione “value”è possibile specificare eventuali alternates da utilizzare per la visualizzazione se forniti assieme al tema.<br />
    28. 28. Orchard – placement.info<br /><Match> - consente di definire lo scope di un determinato set di <place> utilizzando degli attributi:<br />DisplayType. Scopes the contained Place tags to a specific display type (such as Detailor Summary).<br />ContentType. Scopes the contained Place tags to a specific content type (such asBlogPost or Page) or stereotype (such as Widget; this feature is new to Orchard 1.1).<br />Path. Scopes the contained Place tags to a specific path or to a path and its children. For example, Path="/About" enables changes that only affect the About page (assuming you have one), and Path="/MyBlog/*" affects everything that is under the path MyBlog, such as Myblog or MyBlog/FirstPost. The Path attribute is new to Orchard 1.1.<br />
    29. 29. Orchard – placement.info<br /><Placement><br /> <!-- available display shapes --><br /> <!-- widget and edit shapes just get default placement --><br /> <!-- edit "shapes" --><br /> <Place Parts_Blogs_Blog_Fields="Content:2"/><br /> <Place Parts_Blogs_BlogArchives_Edit="Content:5"/><br /> <Place Parts_Blogs_RecentBlogPosts_Edit="Content:5"/><br /> <!-- widgets --><br /> <Place Parts_Blogs_BlogArchives="Content"/><br /> <Place Parts_Blogs_RecentBlogPosts="Content"/><br /> <!-- default positioning --><br /> <Match ContentType="Blog"><br /> <Match DisplayType="Detail"><br />….<br />
    30. 30. Orchard - demo<br />Placement<br />
    31. 31. Thanks for attending!<br />

    ×