This document provides an agenda and overview for a discussion on web development in Orchard CMS. It begins with an introduction and review of Orchard concepts like content types, parts and themes. It then covers topics like setting up the development environment, using taxonomy and multi-language features, and considering content and navigation models. The document demonstrates content display approaches and provides steps for building themes, modules, and custom content parts. Code examples and demos are referenced to illustrate key concepts.

1. Alexandre Marreiros, 2011
Development discussion for web

2. Alexandre Marreiros, 2011
Agenda
 Introduction
 Review
 UI Pipeline
 Content Display Placement
 Get The Enviroment to develop
 Development modules
 Taxonomy
 MultiLanguage

3. Alexandre Marreiros, 2011
Agenda
 Navigation
 Thinks about Content
 Theme Build
 ContentDisplay Development Aproach
 Galleries
 Building a Module
 Integrate MVC Module
 ContentPart Build
 Widget

4. Alexandre Marreiros, 2011
Introduction
In this module we will learn and explore the development in
Orchard CMS.
Is requirement for this module the understanding of Orchard
concepts

5. Alexandre Marreiros, 2011
Review
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
Review
Buch of
Typed single information and
Information Content Content
Field reusable
Part behaviour
Content
Classes of Type
Data, Abstration of
concepts
Instance of content Content
type, Single piece of Item
content

7. Alexandre Marreiros, 2011
Review
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

8. Alexandre Marreiros, 2011
Review
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

9. Alexandre Marreiros, 2011
Orchard Render pipeline
Theme
Layer
Layout
Template
widget Display
Zone Shape
Placement

10. Alexandre Marreiros, 2011
Content Display Concepts
Placed:
 Location-Driven
 Widgets
Dynamic:
 Metadata Driven
 From other parts of the website

11. Alexandre Marreiros, 2011
Get the Enviroment to develop
Orchard is Hosted in a Mercurial client if you want a full
version of Orchard you should get one.
So first lets install TortoiseHG
Once installed let’s get the orchard Code full version from
codeplex cloning the source

12. Alexandre Marreiros, 2011
Get the Enviroment to develop

13. Alexandre Marreiros, 2011
Demo how to use the Tortoise
Demo

14. Alexandre Marreiros, 2011
Development Modules
Orchard Gallery have to Modules that were
made to be used as development helper tools:
 Code Generation
 Designer Tools
First step before start developing is install them

15. Alexandre Marreiros, 2011
Development Modules
Code Generation
Is a command line tool that enable us to generate
the modules template to make easy the
development

16. Alexandre Marreiros, 2011
Development Modules
Designer Tools
This modules come with different features, for
validate in runtime the different Shapes involved in
Content presentation.

17. Alexandre Marreiros, 2011
Demo how to use the Tools
Demo

18. Alexandre Marreiros, 2011
Taxonomy
To enable Taxonomy go to the gallery and get the module
named:
Taxonomies
Once instaled you will get a new entrance in the menu
dashboard named Taxonomie. Here you can create your
taxonomy store and manage the vocabulary.

19. Alexandre Marreiros, 2011
Taxonomy
To use taxonomy in a ContentType you need to add a
Taxonomy Field
Then you need to configure the field
When a user creates a content type in edit mode he will be
able to associate with a Taxonomy

20. Alexandre Marreiros, 2011
MultiLanguage
If we want Orchard to be capable of working with multi
language we should first off all say that ContentItems can
be in different Cultures. That is made in Orchard
Settings>general
We have to install from the gallery the Module Culture
Picker. Now we can now create contents in different
languages

21. Alexandre Marreiros, 2011
MultiLanguage
To have the capacity to create populated zone
for a specific cultures we shoul install the
Module:
Culture Layer
This module will enable you to have a different
layer foreach culture

22. Alexandre Marreiros, 2011
Demo Taxonomy and MultiLanguage
Demo

23. Alexandre Marreiros, 2011
Navigation
Orchard Content Items are viewed as plain
contents side by side.
The default menu for Orchard is a plain Menu.
Theres another modules in the gallery that allows
multi level menus: AdvancedMenu
This enable you to create menus that have
associated contents.

24. Alexandre Marreiros, 2011
Navigation
If you need some kind of context or tree view of
navigation Is sujested you create your own menu
Module.
In the Gallery you have also a menu that is based
off the navigation choosen by you like:
BetterMenus

25. Alexandre Marreiros, 2011
Thinks about Content
One of the first things to think when modeling a Orchard website
is the types of content we will display in the site.
When to define specific Content Types:
 If I had Content that can be viewed as a class of content
 If some type of content has a special kind of layout (imagine a
Event Page != Page becouse info and presentation)
 I have the need to relate content based on his class not his
taxonomy or tag but semantic type class
 Types with very specific kinds of data

26. Alexandre Marreiros, 2011
Thinks about Content
Like said previous ContentParts are a way to specify that
Classes of types:
 Have some specific parts of relational data
 And implement based on his existence some behaviour
When modeling new content types is important to decide
what are the behaviours we intend that or ContentTypes
Instance will implement
New Type
Containable Route

27. Alexandre Marreiros, 2011
Thinks about Content
To change the Look and Feel of the content the most simple
ways are:
 Create a partial view that are render in layout based on
the ContentType (when layout is very different)
 Create an alternate for the Content shape based on the
Content Type (when is all a matter of how content
renders and what renders)

28. Alexandre Marreiros, 2011
Thinks about Content
One important lesson to remember some of the main native
Orchard Content Parts
 Common: enables item to be consider as a public item to
be rendered
 Route: enables Item to have a slug, based an be
contained by navigation
 Containable: enables a item to be part of a container
 Container: enables an item to contain other items

29. Alexandre Marreiros, 2011
Thinks about Content

30. Alexandre Marreiros, 2011
Thinks about Content

31. Alexandre Marreiros, 2011
Demo of Content Types power
Demo

32. Alexandre Marreiros, 2011
Theme Build
The steps to build a Orchard Theme
Step1: generate the theme package
Go to orchard commandline and call codegen
*when generating the theme choose include in the soultion.
Step 2: add the CSS files and script files to the
right Folder of the Theme

33. Alexandre Marreiros, 2011
Theme Build
You can create the base definition for the
HTML render document:
Document.cshtml
To define the layout of the site we should
implement the Layout.cshtml
In this file we include the styles images and
templates fort each content and zones are
called.

34. Alexandre Marreiros, 2011
Theme Build
If we want to define a bunch of totally different
layouts we can call partial views for each
content based on a condition.
@Html.Partial("_Inner")

35. Alexandre Marreiros, 2011
Theme Build
On thing to consider is the zones avaiable and
when they render
@{
var displayFooter = (Model.Footer != null);
}
@if(displayFooter){
<div id="footerList"> @Display(Model.Footer) </div>
}
You have also to declare in the manifest the different zones
to consider (using the theme manifesto Theme.txt)

36. Alexandre Marreiros, 2011
Theme Build
Final step is to use Shapes and placement to
choose the way we want contents to be render
and where.
A good aproach for that is using Shapetrace

37. Alexandre Marreiros, 2011
Demo Theme Building
Demo

38. Alexandre Marreiros, 2011
ContentDisplay Dev Aproach
There are different ways to look to development in
Orchard. One approach is prepare the Theme to
answer the stimulus off the content on the render
time to change the display how give final user
some functionality.
Front End Ritch Text edition

39. Alexandre Marreiros, 2011
Demo ContentDisplay aproach
Demo

40. Alexandre Marreiros, 2011
Galleries
Theres a bunch of Module Galleries in the
communitie. When we talk about gallerie there are
to different famelies
Galleries
Content item A field or part
Gallery that is a gallery
Pretty Gallery Image Gallery
Fliker Gallery Document Gallery

41. Alexandre Marreiros, 2011
Building a Module
The first thing before create a Orchard Module is
to understand some of his pieces
Model The class that represents the part or the data.
Drivers Prepare Shapes for render handle Posts from admin
Handler Class that execute code for specific events
Discription of operations to use when module install
Migration
or migrates

42. Alexandre Marreiros, 2011
Building a Module
With this in mind building a module is not
different from building a module to na MVC app.
But demmands the knowldge of this new
concepts.
Now hands on job let’s build modules, and a
content part

43. Alexandre Marreiros, 2011
Demo building a module and a contentpart
Demo

44. Alexandre Marreiros, 2011
References
 http://www.orchardproject.net/
 http://www.deepcode.co.uk/2011/05/real-world-orchard-
cms-part-3-creating.html
 http://channel9.msdn.com/Events/TechEd/NorthAmerica/
2011/DEV355
 http://weblogs.asp.net/scottgu/archive/2011/05/12/asp-
net-mvc-3-and-the-helper-syntax-within-razor.aspx
 http://Asp.net

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