Your SlideShare is downloading. ×
DNM19 Sessione2 Orchard Temi e Layout (Ita)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

DNM19 Sessione2 Orchard Temi e Layout (Ita)

2,356

Published on

Community Tour 2010 - CMS Edition …

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,356
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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.
  • Transcript

    • 1. Orchard – Temi e Layoutconcettidi base
      Ing. Giorgetti Alessandro
      Software Artisan
      SID s.r.l.
    • 2. About me…
      Giorgetti Alessandro
      Laurea in Ingegneria Elettronica
      Cofondatore di SID s.r.l.
      Blog: http://www.primordialcode.com
      Email: alessandro.giorgetti@live.com, guardian@nablasoft.com
      Twitter: @A_Giorgetti
    • 3. Orchard theme – how to…
      Il modo più semplice per creare un nuovo tema in Orchard: utilizzare ‘Orchard command line’ + ‘Codegen’.
      Creare un tema vuoto.
      Creare un tema basato su un altro tema.
      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.
      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’.
      Tutti i temi ‘vivono’ all’interno della cartella ‘Themes’.
    • 4. Orchard theme – how to…
      Per creare un nuovo tema vuoto:
      Per creare un tema basato su un altro tema:
      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:
      codegen theme MyTheme
      codegen theme MyTheme /BasedOn:TheThemeMachine
      /CreateProject:true
      /IncludeInSolution:true
    • 5. Orchard – struttura di un tema
      Ecco come si presenta la struttura del tema di default e di un tema ‘figlio’ creato basandosi sul precedente:
    • 6. Orchard – struttura di un tema
      Manifest
      File di testo denominato ‘Theme.txt’ da posizionarsi nella radice del tema.
      Fornisce informazioni descrittive sul tema.
      Fornisce informazioni su:
      Tema base.
      Nome delle zone in cui inserire widgets.
      Name: The Theme Machine
      Author: jowall, mibach, loudej, heskew
      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.
      Version: 1.1.30
      Tags: Awesome
      Website: http://orchardproject.net
      Zones: Header, Navigation, Featured, BeforeMain, AsideFirst, Messages, BeforeContent, Content, AfterContent, AsideSecond, AfterMain, TripelFirst, TripelSecond, TripelThird, FooterQuadFirst, FooterQuadSecond, FooterQuadThird, FooterQuadFourth, Footer
      Name: DotNetMarcheTheme
      Author: The Orchard Team
      Website: http://www.orchardproject.net
      Description: Description for the theme
      Version: 1.0
      BaseTheme: TheThemeMachine
      # todo: provide tags
      # Tags: Classic, Serif
    • 7. Orchard – struttura di un tema
      Immagini di Preview
      Theme.png e ThemeZonePreview.png utilizzate nella gallery e nella dashboard per fornire una preview del tema.
      Risorse statiche
      Fogli di stile, custom javascript code, immagini e tutto quanto concerne contenuto non dinamico vanno inseriti nelle apposite sezioni.
      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.
    • 8. Orchard – struttura di un tema
      Document
      Definisce la struttura di base di una pagina HTML.
      Contiene gli elementi <html>, <head>, <body>.
      Definisce il ‘doctype’ assumendo le specifiche di HTML5 come default.
      Segue la sintassi del view engine scelto (Razor per default).
      Posizionato nel tema ‘SafeMode’ nella cartella ‘Views’.
    • 9. Orchard – struttura di un tema
      Layout
      Definisce l’attuale struttura del contenuto della pagina (effettivo contenuto del tag <body>).
      Segue la sintassi del view engine scelto (Razor per default).
      Definisce le zone in cui iniettare widgets.
      La denominazione delle zone deve corrispondere a quanto dichiarato sul file Manifest.
    • 10. Orchard – shape
      Shape
      È 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.
      È possibile pensare ad una shape come alla coppia delle informazioni (contenuti) da rappresnetare e del template da utilizzare per la visualizzazione (metadati).
      Esiste un set di regole ben definito che consente di associare uno o più template ad una shape.
    • 11. Orchard – shape template
      Template
      Concettualmente simile ad una partial view in asp.net, diversi tipi:
      Item template
      Cartella ‘ViewsItems’. Definiscono come un particolare tipo di contenuto può essere visualizzato.
      Il nome del template indica come mapparlo sul contenuto: “Content-{content type name}.cshtml”“Content-{content type name}.{display type}.cshtml”.
      Part Template
      Cartella ‘viewsparts’. Definisce l’aspetto di una singola Part (un set di attributi per un oggetto che definiscono un comportamento comune).
      Ex: “ViewsPartsComments.cshtml” definisce l’override del rendering HTML dei commenti associati ad un oggetto
    • 12. Orchard – shape template
      Field template
      Cartella ‘ViewsFields’. Definisce l’aspetto generale dei singoli elementi di pagina(es: campi di testo “ViewsFieldsCommon.Text.cshtml”).
      Alternates
      Introdotto in Orchard 1.1.
      È 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.
    • 13. Orchard – shape template
      Widgets
      Cartella ‘Views’. È possibile eseguire l’override della visualizzazione di un qualsiasi widget utilizzando un file denominato: “widget-{widget type}.cshtml.
      Placement file
      Introdotto con Orchard 1.1.
      File ‘placement.info’ posizionato nella radice del sito.
      Consente di modificare dove le shape sono posizionate relativamente all’interno della pagina.
      Regole di composizione avanzate.
    • 14. Orchard – template naming
      Esistono complesse regole di composizione per determinare quale template viene utilizziato durante la fase di renderizzazione delle shape:
      Vengono analizzati i metadati della shape (proprietà shape.metadata).
      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.
      Regole per il posizionamento dei template file:
      Content item  cartella views/items
      Parts  cartella views/parts
      Fields  cartella views/fields
      EditorTemplate shapes  cartella views/EditorTemplate/(template name)
      Tutto il resto  cartella views/
      Regole per la conversione Shape Name  File Name:
      Punto (.) e backslash () vengono cambiati in underscore (_)
      Hypen (-) viene convertito in un doppio underscore (__)
      Regole addizionali che riguardano i prefissi da utilizzare in base al tipo di contenuto (content items, parts, widgets o altro).
    • 15. Orchard – template naming
    • 16. Orchard – template naming
    • 17. Orchard - Designer Helper Tools
      La struttura è obiettivamente complessa.
      Visualizzare l’albero delle shapes nella nostra testa non è semplice.
      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.
      Shape Tracing è disponibile nel modulo ‘Designer Tools’.
      Può essere abilitato/disabilitato all’occorrenza.
    • 18. Orchard - demo
      How it works…
      Designer Tools
    • 19. Orchard – Razor View Engine
      Ricapitoliamo alcuni concetti sui template:
      Simili ad una Partial View.
      Contengono HTML, stili CSS, Javascript o codice.
      Il ‘View Engine’ è responsabile del parsing del template e del rendering effettivo dell’HTML che verrà poi spedito al browser.
      Possono contenere server side code (C# o VB) per accedere e renderizzare o dati delle shape (View Engine Razor).
      File con estensione .cshtml o .vbhtml
    • 20. Orchard – Razor syntax
      Commenti
      Client markup comments
      Sono presenti anche nell’HTML che viene renderizzato per il client: visibili analizzando il sorgente delle pagine lato client.
      Server markup comments
      Vengono eliminati dal markup finale: l’utente non è in grado di vedere questo tipo di commenti (rendono la pagina più leggera)
      <!– your comments goes here -->
      @* single line comment *@
      @*
      multiline
      comment
      *@
    • 21. Orchard – Razor syntax
      Code Block
      Carattere ‘@’ seguito dalle parentesi ‘{‘ e ‘}’:
      Inline Code
      Carattere ‘@’ seguito dal riferimento all’oggetto:
      Single Expression
      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:
      @{ …
      var homeUrl = Href("~/");
      … }
      <h1 id="branding“><a href="@homeUrl">
      @WorkContext.CurrentSite.SiteName</a></h1>
      …class="group">
      @if (Model.AsideFirst != null) {
      <aside id="aside-first" class="aside-first group">
      @Zone(Model.AsideFirst)
      </aside> } <div…
    • 22. Orchard – accedere alle proprietà
      Accesso semplificato agli oggetti del dominio (shape): è possibile accedere direttamente alle content part senza dover utilizzare casting.
      Prima: var contentItem = (ContentItem)Model.ContentItem; var picture = (ImageField)contentItem.As<ProfilePart>().Fields.First(f => f.Name == "Picture");@picture.Width
      Dopo: @Model.ContentItem.ProfilePart.Picture.Width
    • 23. Orchard - demo
      Razor
    • 24. Orchard – advanced topicPlacement
    • 25. Orchard - placement
      I contenuti (Content) sono composti da sottoelementi (Parts).
      Ogni elemento ha la propria rappresentazione grafica (template).
      I contenuti sono dinamici, possono variare nel tempo (è possibile aggiungere field o parts, anche questi con i loro template).
      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)
    • 26. Orchard - placement
      Orchard, durante la generazione del layout, separa le operazioni di:
      Rendering – eseguito dai template
      Placement – eseguito ricorrendo ai file placement.info
      Ogni modulo o tema può definire il posizionamento dei propri elementi utilizzando un placement.info file posizionato nella propria root folder .
      Placement.info agisce a livello di Content-item (è possibile riordinare solo gli elementi all’interno della specifica sezione in cui si trovano).
    • 27. Orchard – placement.info
      Sintassi XML specifica:
      <placement> - elemento contenitore esterno
      <place> - definisce il posizionamento di uno o più oggetti in base agli attributi specifici:“name” – il nome di una specifica shape (designer tool)
      “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’.
      Sempre sulla porzione “value”è possibile specificare eventuali alternates da utilizzare per la visualizzazione se forniti assieme al tema.
    • 28. Orchard – placement.info
      <Match> - consente di definire lo scope di un determinato set di <place> utilizzando degli attributi:
      DisplayType. Scopes the contained Place tags to a specific display type (such as Detailor Summary).
      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).
      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.
    • 29. Orchard – placement.info
      <Placement>
      <!-- available display shapes -->
      <!-- widget and edit shapes just get default placement -->
      <!-- edit "shapes" -->
      <Place Parts_Blogs_Blog_Fields="Content:2"/>
      <Place Parts_Blogs_BlogArchives_Edit="Content:5"/>
      <Place Parts_Blogs_RecentBlogPosts_Edit="Content:5"/>
      <!-- widgets -->
      <Place Parts_Blogs_BlogArchives="Content"/>
      <Place Parts_Blogs_RecentBlogPosts="Content"/>
      <!-- default positioning -->
      <Match ContentType="Blog">
      <Match DisplayType="Detail">
      ….
    • 30. Orchard - demo
      Placement
    • 31. Thanks for attending!

    ×