This document provides an overview of key concepts in Orchard CMS, an open source content management system. It discusses how Orchard is built on ASP.NET MVC and Razor, and introduces concepts like modules, themes, widgets, and shapes. It also explains how modules extend Orchard's functionality, and how themes control visual design through alternate shape templates.

1. Alexandre Marreiros, 2011
A Quick Intro

2. Alexandre Marreiros, 2011
Agenda
 Introduction
 Build on
 Concepts Review
 Get and Setup Orchard
 Orchard Concepts
 Theme
 Widget
 Modules
 Advance Theme Concepts

3. Alexandre Marreiros, 2011
Introduction
“Orchard is a Web CMS, which essentially aims at helping
you build web sites from existing pieces. Those pieces
come in a few different sizes and shapes that need to be
well understood if you're going to be productive with them.
This article will go through those pieces and explain their
names and behavior.”
Orchard Team

4. Alexandre Marreiros, 2011
Introduction
What is Orchard CMS ?
 Is a CMS
 User Centric
 Open Source Suported by Outercurve
Foundation
 A framework based on an architecture of
Plugins and Provider’s
Is built on top of .NET

5. Alexandre Marreiros, 2011
Built On
Orchard CMS
Razor Views Database Engine
OR
ASP.NET MVC 3 Sql Server
SQL CE
(*)
.NET 4.5
*sql server > 2000 any version in house and SQL Azure

6. Alexandre Marreiros, 2011
Concepts Review
ASP.NET MVC 3
Built on Top off ASP.NET with the main intent of implement MVC pattern with
Microsoft Web Technologies
Model
View Controller

7. Alexandre Marreiros, 2011
Concepts Review
Razor
Is a general propose template engine used to generate HTML from data. Is
avaiable in ASP.NET MVC 3 Views.
Razor provides a easy to read and wirte sintaxe that allow us to use ritch code
in the midle of Markup code.
@ - Marks the begining of a razor sentence in ASP.MVC 3
Generated
Template Data Output

8. Alexandre Marreiros, 2011
Concepts Review
Razor Glossary
@ - Marks the begining of a razor sentence in ASP.MVC 3
@{ } – Code Block
@i - Implicit code
(@i) – explicit code
<text> </text> - Razor tag that allows to define a plain text part
@HTML – Use html util helper functions
Example of razor to display a partial view
@HTML.Partial( “_partialview “, Model )

9. Alexandre Marreiros, 2011
Demo ASP.NET MVC3 & Razor
Demo

10. Alexandre Marreiros, 2011
Introduction
How I get Orchard?
 With WebMatrix & WebPlataform
 With Codeplex
 Download the release
 Clone source code
First time I run Orchard Setup happens

11. Alexandre Marreiros, 2011
Get Orchard
Demo

12. Alexandre Marreiros, 2011
Orchard Concepts
Buch of
Typed single information and
Information Content Content
Field reusable
Part behaviour
Content
Classes of Data, Type
Abstration of concepts
Instance of content Content
type, Single piece of Item
content

13. Alexandre Marreiros, 2011
Orchard Concepts
Orchard define his own model of security based
on users roles and premissions.
Premission
User Role
Premission
….N

14. Alexandre Marreiros, 2011
Orchard Concepts
Customizable built in Orchard CMS roles
Full control over site and settings
Administrator
Is not allowed to creat content only edit
Editor
Validate user created contents, only
Moderator frontend content for now
Author Writes and plublishes
Write content can be or not allowed to
Contributor publish
Anonymous Unknown user not login in CMS engine
Authenticated Any user with a role in the CMS

15. Alexandre Marreiros, 2011
Orchard Concepts
The user interface of Orchard uses a Themming
aproach.

16. Alexandre Marreiros, 2011
Orchard Concepts
Orchards offers a plug an play cross content
engine that enable us to use widgets and define
zones for that in our theme

17. Alexandre Marreiros, 2011
Orchard Concepts
The most basic building Block of Orchard are
Modules.
Each Module is a MVC Block that extends
Orchard Architecture
Modules Modules Modules Modules Modules
Orchard CMS Core Framework

18. Alexandre Marreiros, 2011
Orchard Concepts
Each Module we install in the Platform give us a
group of functionalities, that can be or not
enabled to this concept as the name of feature.

19. Alexandre Marreiros, 2011
Orchard concepts
Demo

20. Alexandre Marreiros, 2011
Orchard Concepts
In review

21. Alexandre Marreiros, 2011
Theme
Mechanism for specified the look and feel of a
Orchard solution.
In Orchard when you define a Module you
define the way he render, that is the look and
Feel of the module unless the theme say is
differente
The same is true for Parts, Widgets and Fields
(that are also modules).

22. Alexandre Marreiros, 2011
Theme
Theme Possible States
Enabled Active
Install
Disabled Current
* An Active current doesn’t have necessary to be the current

23. Alexandre Marreiros, 2011
Theme
Theme rendering engine
Current Active
Theme Theme
Module
• When a theme does not define the look and feel of a module that comes from
the active team and if no active team from the module itself
• The Active Theme can become the cureent theme if a theme selector elevate is
priority

24. Alexandre Marreiros, 2011
Orchard Theme
Demo

25. Alexandre Marreiros, 2011
Theme
All Orchard Themes live in a Folder that makes
part of Orchard IIS Directory Named:

26. Alexandre Marreiros, 2011
Theme
Let’s take a look at Theme Folder organization

27. Alexandre Marreiros, 2011
Orchard Theme
Demo

28. Alexandre Marreiros, 2011
Widget
Widget
widget

29. Alexandre Marreiros, 2011
Widget
Theme.txt
Layouts.cshtml

30. Alexandre Marreiros, 2011
Widget
Layer’s

31. Alexandre Marreiros, 2011
Modules
Are the basic building blocks of Orchard
Each module is a MVC application that lives in
the Orchard ecosystem

32. Alexandre Marreiros, 2011
Orchard Modules
Demo

33. Alexandre Marreiros, 2011
Modules

34. Alexandre Marreiros, 2011
Modules
Modules are
Costum Extensions
Grouped in a
Modules package.
Features . Features are a logical
grouping of
functionality. (can be
enabled or disable)

35. Alexandre Marreiros, 2011
Modules
And what kind of modules we have?
Modules Modules Modules Modules
Orchard CMS Core Framework
Where Modules Live?

36. Alexandre Marreiros, 2011
Orchard Modules anatomy
Demo

37. Alexandre Marreiros, 2011
Advance Theme Concepts
Shape
Shape
Shape
Shape
Shape
Shape

38. Alexandre Marreiros, 2011
Advance Theme Concepts
Render Engine
Header Widget Shape
Theme Layout …
Render UI
Content Content Shape
The UI of Orchard are a compound UI once that all the UI is
divided in to different small blocks of UI
Shapes are dynamic UI models of data
We can define just as a Shape as simple a Razor template

39. Alexandre Marreiros, 2011
Advance Theme Concepts
You can define alternates to specific UI
elements.
Imagine if i want to override the Shape that
renders the Content but just when the url of the
item is homepage i can create the shape
Content-url-homepage.cshtml

40. Alexandre Marreiros, 2011
Advance Theme Concepts
Rules for alternates
For content parts:
 [ShapeType]__[Id]. (Example template:
PartsCommon.Metadata-42)
 [ShapeType]__[ContentType]. (Example
template: PartsCommon.Metadata-BlogPost)

41. Alexandre Marreiros, 2011
Advance Theme Concepts
Rules for alternates
For widget shapes:
 Widget__[ZoneName]. (Example template:
Widget-SideBar)
 Widget__[ContentType]. (Example template:
Widget-BlogArchive)

42. Alexandre Marreiros, 2011
Advance Theme Concepts
Rules for alternates
For Content shapes:
 Content__[DisplayType]. (Example template: Content.Summary)
 Content__[ContentType]. (Example template: Content-BlogPost)
 Content__[Id]. (Example template: Content-42)
 Content_[DisplayType]__[ContentType]. (Example template:
Content-BlogPost.Summary)
 Content_[DisplayType]__[Id]. (Example template: Content-
42.Summary)

43. Alexandre Marreiros, 2011
Advance Theme Concepts
The placement of shapes can be defined by the
Theme

44. Alexandre Marreiros, 2011
Orchard UI composed “Shapes”
Demo

45. Alexandre Marreiros, 2011
More Thoughts
 We had made a long dive in to Orchard Concepts, now
we are able to understand all the orchard picture and
start working.
 Next session is Development dive in to the plataform.
 For you start playing start working start using Orchard,
collaborate with the community

46. Alexandre Marreiros, 2011
Refrences
 http://www.orchardproject.net/
 http://www.orchardproject.net/docs/
 http://weblogs.asp.net/bleroy/
 http://paper.li/jgaylord/1306335822
 http://weblogs.asp.net/scottgu/archive/2011/05/12/asp-
net-mvc-3-and-the-helper-syntax-within-razor.aspx
 http://Asp.net

47. Alexandre Marreiros, 2011
Email: Amarreiros@gmail.com
Twitter: @alexmarreiros
Feel free to ask