PRAGMATIC ORCHARD CMS

2

Development discussion for web

Alexandre Marreiros, 2011

Agenda Introduction Review UI Pipeline Content Display Placement Get The Enviroment to develop Development modules Taxonomy MultiLanguage

Alexandre Marreiros, 2011

Agenda Navigation Thinks about Content Theme Build ContentDisplay Development Aproach Galleries Building a Module Integrate MVC Module ContentPart Build Widget

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

Alexandre Marreiros, 2011

Review

OR

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

Alexandre Marreiros, 2011

Orchard CMS

Razor Views

ASP.NET MVC 3

.NET 4.5

Database Engine

SQL CESql Server

(*)

ReviewAlexandre 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

ReviewTheme 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

Alexandre Marreiros, 2011

Current Theme

ActiveTheme

Module

ReviewRender 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

Alexandre Marreiros, 2011

Layout UI

Header

Content

…

Widget Shape

Content Shape

ThemeRender

Orchard Render pipelineAlexandre Marreiros, 2011

Theme

Layout

TemplateDisplay

Shape

Placement

Zone

widget

Layer

Content Display ConceptsPlaced: Location-Driven Widgets

Dynamic: Metadata Driven From other parts of the website

Alexandre Marreiros, 2011

Get the Enviroment to developOrchard 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

Alexandre Marreiros, 2011

Get the Enviroment to develop

Alexandre Marreiros, 2011

Demo how to use the Tortoise

Alexandre Marreiros, 2011

Demo

Development ModulesOrchard 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

Alexandre Marreiros, 2011

Development ModulesCode GenerationIs a command line tool that enable us to generate the modules template to make easy the development

Alexandre Marreiros, 2011

Development ModulesDesigner Tools

This modules come with different features, for validate in runtime the different Shapes involved in Content presentation.

Alexandre Marreiros, 2011

Demo how to use the Tools

Alexandre Marreiros, 2011

Demo

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.

TaxonomyAlexandre Marreiros, 2011

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

Taxonomy

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

Alexandre Marreiros, 2011

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

MultiLanguage

Alexandre Marreiros, 2011

Demo Taxonomy and MultiLanguage

Alexandre Marreiros, 2011

Demo

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.

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

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

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

Alexandre Marreiros, 2011

New Type

Containable Route

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)

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

Alexandre Marreiros, 2011

Thinks about Content

Alexandre Marreiros, 2011

Thinks about Content

Alexandre Marreiros, 2011

Demo of Content Types power

Alexandre Marreiros, 2011

Demo

The steps to build a Orchard Theme

Step1: generate the theme packageGo 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

Theme BuildAlexandre Marreiros, 2011

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.

Theme Build

Alexandre Marreiros, 2011

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")

Theme Build

Alexandre Marreiros, 2011

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)

Theme BuildAlexandre Marreiros, 2011

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

Theme Build

Alexandre Marreiros, 2011

Demo Theme Building

Alexandre Marreiros, 2011

Demo

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

Alexandre Marreiros, 2011

Demo ContentDisplay aproach

Alexandre Marreiros, 2011

Demo

Galleries Theres a bunch of Module Galleries in the communitie. When we talk about gallerie there are to different famelies

Alexandre Marreiros, 2011

Galleries

Content item Gallery

A field or part that is a gallery

Pretty GalleryFliker Gallery

Image GalleryDocument Gallery

Building a Module

The first thing before create a Orchard Module is to understand some of his pieces

Alexandre Marreiros, 2011

The class that represents the part or the data.

Prepare Shapes for render handle Posts from admin

Class that execute code for specific events

Discription of operations to use when module install or migrates

Model

Drivers

Handler

Migration

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

Building a Module

Alexandre Marreiros, 2011

Demo building a module and a contentpart

Alexandre Marreiros, 2011

Demo

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

Alexandre Marreiros, 2011

Contacts

Alexandre Marreiros, 2011

Email: Amarreiros@gmail.comTwitter: @alexmarreiros

Feel free to ask