pragmatic orchard

PRAGMATIC ORCHARD CMS

A Quick Intro

Alexandre Marreiros, 2011

Agenda Introduction Build on Concepts Review Get and Setup Orchard Orchard Concepts Theme Widget Modules Advance Theme Concepts


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


IntroductionWhat 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


Built On

OR

*sql server > 2000 any version in house and SQL Azure


Orchard CMS

Razor Views

ASP.NET MVC 3

.NET 4.5

Database Engine

SQL CESql Server

(*)

Concepts ReviewAlexandre Marreiros, 2011

Controller

Model

View

ASP.NET MVC 3Built on Top off ASP.NET with the main intent of implement MVC pattern with Microsoft Web Technologies


GeneratedOutput

Template Data

RazorIs 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


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 )

Demo ASP.NET MVC3 & Razor


Demo

IntroductionHow I get Orchard?

With WebMatrix & WebPlataform With Codeplex

Download the releaseClone source code

First time I run Orchard Setup happens


Get Orchard


Demo

Orchard ConceptsAlexandre Marreiros, 2011

Content Item

Content Field

Content Part

Content Type

Typed single Information

Buch of information and reusable behaviour

Classes of Data, Abstration of concepts

Instance of content type, Single piece of content

Orchard ConceptsOrchard define his own model of security based on users roles and premissions.


User Role

Premission

Premission

….N

Orchard ConceptsCustomizable built in Orchard CMS roles


Administrator

Editor

Moderator

Author

Contributor

Anonymous

Authenticated

Full control over site and settings

Is not allowed to creat content only edit

Validate user created contents, only frontend content for now

Writes and plublishes

Write content can be or not allowed to publish

Unknown user not login in CMS engine

Any user with a role in the CMS

Orchard ConceptsThe user interface of Orchard uses a Themming aproach.


Orchard ConceptsOrchards offers a plug an play cross content engine that enable us to use widgets and define zones for that in our theme


The most basic building Block of Orchard are Modules.

Each Module is a MVC Block that extends Orchard Architecture

Orchard ConceptsAlexandre Marreiros, 2011

Orchard CMS Core Framework

Modules ModulesModulesModulesModules

Orchard ConceptsEach 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.


Orchard concepts


Demo

Orchard ConceptsIn review


ThemeMechanism 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).


ThemeTheme Possible States

* An Active current doesn’t have necessary to be the current


Install

Enabled

Disabled Current

Active

ThemeTheme rendering engine

• 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


Current Theme

ActiveTheme

Module

Orchard Theme


Demo

ThemeAll Orchard Themes live in a Folder that makes part of Orchard IIS Directory Named:


ThemeLet’s take a look at Theme Folder organization


Orchard Theme


Demo

WidgetAlexandre Marreiros, 2011

Widget

widget


Theme.txt

Layouts.cshtml


Layer’s

ModulesAre the basic building blocks of Orchard

Each module is a MVC application that lives in the Orchard ecosystem


Orchard Modules


Demo

ModulesAlexandre Marreiros, 2011

ModulesAlexandre Marreiros, 2011

Modules

Features

Modules are Costum Extensions

Grouped in a package.

. Features are a logical grouping of

functionality. (can be enabled or disable)

ModulesAnd what kind of modules we have?

Where Modules Live?


Orchard CMS Core Framework

Modules ModulesModulesModules

Orchard Modules anatomy


Demo

Advance Theme Concepts


Shape

Shape

Shape

Shape

Shape

Shape

Advance Theme ConceptsRender Engine

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


Layout UI

Header

Content

…

Widget Shape

Content Shape

ThemeRender

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


Rules for alternates

For content parts:

[ShapeType]__[Id]. (Example template: Parts\Common.Metadata-42)

[ShapeType]__[ContentType]. (Example template: Parts\Common.Metadata-BlogPost)




For widget shapes:

Widget__[ZoneName]. (Example template: Widget-SideBar)

Widget__[ContentType]. (Example template: Widget-BlogArchive)




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)



The placement of shapes can be defined by the Theme



Orchard UI composed “Shapes”


Demo

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


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


http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

http://www.orchardproject.net/docs/

http://www.orchardproject.net/docs/

http://weblogs.asp.net/bleroy/

http://weblogs.asp.net/bleroy/

http://paper.li/jgaylord/1306335822

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/

Contacts


Email: [email protected]: @alexmarreiros

Feel free to ask

mailto:[email protected]

pragmatic orchard

Technology