pragmatic orchard 2

45
PRAGMATIC ORCHARD CMS 2 Development discussion for web Alexandre Marreiros, 2011

Upload: alexandre-marreiros

Post on 23-Jan-2015

2.072 views

Category:

Technology


0 download

DESCRIPTION

The second part of Orchard pragmatic. In this module we explore some of development options and steps

TRANSCRIPT

Page 1: Pragmatic orchard 2

PRAGMATIC ORCHARD CMS

2

Development discussion for web

Alexandre Marreiros, 2011

Page 2: Pragmatic orchard 2

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

Alexandre Marreiros, 2011

Page 3: Pragmatic orchard 2

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

Alexandre Marreiros, 2011

Page 4: Pragmatic orchard 2

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

Page 5: Pragmatic orchard 2

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

(*)

Page 6: Pragmatic orchard 2

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

Page 7: Pragmatic orchard 2

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

Page 8: Pragmatic orchard 2

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

Page 9: Pragmatic orchard 2

Orchard Render pipelineAlexandre Marreiros, 2011

Theme

Layout

TemplateDisplay

Shape

Placement

Zone

widget

Layer

Page 10: Pragmatic orchard 2

Content Display ConceptsPlaced: Location-Driven Widgets

Dynamic: Metadata Driven From other parts of the website

Alexandre Marreiros, 2011

Page 11: Pragmatic orchard 2

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

Page 12: Pragmatic orchard 2

Get the Enviroment to develop

Alexandre Marreiros, 2011

Page 13: Pragmatic orchard 2

Demo how to use the Tortoise

Alexandre Marreiros, 2011

Demo

Page 14: Pragmatic orchard 2

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

Page 15: Pragmatic orchard 2

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

Alexandre Marreiros, 2011

Page 16: Pragmatic orchard 2

Development ModulesDesigner Tools

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

Alexandre Marreiros, 2011

Page 17: Pragmatic orchard 2

Demo how to use the Tools

Alexandre Marreiros, 2011

Demo

Page 18: Pragmatic orchard 2

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

Page 19: Pragmatic orchard 2

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

Page 20: Pragmatic orchard 2

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

Page 21: Pragmatic orchard 2

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

Page 22: Pragmatic orchard 2

Demo Taxonomy and MultiLanguage

Alexandre Marreiros, 2011

Demo

Page 23: Pragmatic orchard 2

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

Page 24: Pragmatic orchard 2

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

Page 25: Pragmatic orchard 2

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

Page 26: Pragmatic orchard 2

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

Page 27: Pragmatic orchard 2

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

Page 28: Pragmatic orchard 2

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

Page 29: Pragmatic orchard 2

Thinks about Content

Alexandre Marreiros, 2011

Page 30: Pragmatic orchard 2

Thinks about Content

Alexandre Marreiros, 2011

Page 31: Pragmatic orchard 2

Demo of Content Types power

Alexandre Marreiros, 2011

Demo

Page 32: Pragmatic orchard 2

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

Page 33: Pragmatic orchard 2

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

Page 34: Pragmatic orchard 2

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

Page 35: Pragmatic orchard 2

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

Page 36: Pragmatic orchard 2

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

Page 37: Pragmatic orchard 2

Demo Theme Building

Alexandre Marreiros, 2011

Demo

Page 38: Pragmatic orchard 2

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

Page 39: Pragmatic orchard 2

Demo ContentDisplay aproach

Alexandre Marreiros, 2011

Demo

Page 40: Pragmatic orchard 2

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

Page 41: Pragmatic orchard 2

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

Page 42: Pragmatic orchard 2

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

Page 43: Pragmatic orchard 2

Demo building a module and a contentpart

Alexandre Marreiros, 2011

Demo

Page 45: Pragmatic orchard 2

Contacts

Alexandre Marreiros, 2011

Email: [email protected]: @alexmarreiros

Feel free to ask