Pragmatic orchard 2
-
Upload
alexandre-marreiros -
Category
Technology
-
view
2.070 -
download
0
description
Transcript of Pragmatic orchard 2
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