Pragmatic orchard 2


Published on

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

Published in: Technology
1 Comment
  • thanks a lot ;)
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Pragmatic orchard 2

  1. 1. Alexandre Marreiros, 2011Development discussion for web
  2. 2. Alexandre Marreiros, 2011Agenda Introduction Review UI Pipeline Content Display Placement Get The Enviroment to develop Development modules Taxonomy MultiLanguage
  3. 3. Alexandre Marreiros, 2011Agenda Navigation Thinks about Content Theme Build ContentDisplay Development Aproach Galleries Building a Module Integrate MVC Module ContentPart Build Widget
  4. 4. Alexandre Marreiros, 2011IntroductionIn this module we will learn and explore the development inOrchard CMS.Is requirement for this module the understanding of Orchardconcepts
  5. 5. Alexandre Marreiros, 2011Review 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. 6. Alexandre Marreiros, 2011Review Buch ofTyped single information andInformation 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. 7. Alexandre Marreiros, 2011ReviewTheme 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. 8. Alexandre Marreiros, 2011ReviewRender Engine Header Widget Shape Theme Layout … Render UI Content Content ShapeThe UI of Orchard are a compound UI once that all the UI isdivided in to different small blocks of UIShapes are dynamic UI models of dataWe can define just as a Shape as simple a Razor template
  9. 9. Alexandre Marreiros, 2011Orchard Render pipeline Theme Layer Layout Template widget Display Zone Shape Placement
  10. 10. Alexandre Marreiros, 2011Content Display ConceptsPlaced: Location-Driven WidgetsDynamic: Metadata Driven From other parts of the website
  11. 11. Alexandre Marreiros, 2011Get the Enviroment to developOrchard is Hosted in a Mercurial client if you want a fullversion of Orchard you should get one.So first lets install TortoiseHGOnce installed let’s get the orchard Code full version fromcodeplex cloning the source
  12. 12. Alexandre Marreiros, 2011Get the Enviroment to develop
  13. 13. Alexandre Marreiros, 2011 Demo how to use the TortoiseDemo
  14. 14. Alexandre Marreiros, 2011Development ModulesOrchard Gallery have to Modules that weremade to be used as development helper tools: Code Generation Designer ToolsFirst step before start developing is install them
  15. 15. Alexandre Marreiros, 2011Development ModulesCode GenerationIs a command line tool that enable us to generatethe modules template to make easy thedevelopment
  16. 16. Alexandre Marreiros, 2011Development ModulesDesigner ToolsThis modules come with different features, forvalidate in runtime the different Shapes involved inContent presentation.
  17. 17. Alexandre Marreiros, 2011 Demo how to use the ToolsDemo
  18. 18. Alexandre Marreiros, 2011TaxonomyTo enable Taxonomy go to the gallery and get the modulenamed: TaxonomiesOnce instaled you will get a new entrance in the menudashboard named Taxonomie. Here you can create yourtaxonomy store and manage the vocabulary.
  19. 19. Alexandre Marreiros, 2011TaxonomyTo use taxonomy in a ContentType you need to add aTaxonomy Field Then you need to configure the fieldWhen a user creates a content type in edit mode he will beable to associate with a Taxonomy
  20. 20. Alexandre Marreiros, 2011MultiLanguage If we want Orchard to be capable of working with multilanguage we should first off all say that ContentItems canbe in different Cultures. That is made in OrchardSettings>generalWe have to install from the gallery the Module CulturePicker. Now we can now create contents in differentlanguages
  21. 21. Alexandre Marreiros, 2011MultiLanguageTo have the capacity to create populated zonefor a specific cultures we shoul install theModule: Culture LayerThis module will enable you to have a differentlayer foreach culture
  22. 22. Alexandre Marreiros, 2011 Demo Taxonomy and MultiLanguageDemo
  23. 23. Alexandre Marreiros, 2011Navigation Orchard Content Items are viewed as plaincontents side by side.The default menu for Orchard is a plain Menu.Theres another modules in the gallery that allowsmulti level menus: AdvancedMenuThis enable you to create menus that haveassociated contents.
  24. 24. Alexandre Marreiros, 2011NavigationIf you need some kind of context or tree view ofnavigation Is sujested you create your own menuModule.In the Gallery you have also a menu that is basedoff the navigation choosen by you like:BetterMenus
  25. 25. Alexandre Marreiros, 2011Thinks about ContentOne of the first things to think when modeling a Orchard websiteis 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. 26. Alexandre Marreiros, 2011Thinks about ContentLike said previous ContentParts are a way to specify thatClasses of types: Have some specific parts of relational data And implement based on his existence some behaviourWhen modeling new content types is important to decidewhat are the behaviours we intend that or ContentTypesInstance will implement New Type Containable Route
  27. 27. Alexandre Marreiros, 2011Thinks about ContentTo change the Look and Feel of the content the most simpleways 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. 28. Alexandre Marreiros, 2011Thinks about ContentOne important lesson to remember some of the main nativeOrchard 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. 29. Alexandre Marreiros, 2011Thinks about Content
  30. 30. Alexandre Marreiros, 2011Thinks about Content
  31. 31. Alexandre Marreiros, 2011 Demo of Content Types powerDemo
  32. 32. Alexandre Marreiros, 2011Theme BuildThe steps to build a Orchard ThemeStep1: 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 theright Folder of the Theme
  33. 33. Alexandre Marreiros, 2011Theme Build You can create the base definition for the HTML render document: Document.cshtmlTo define the layout of the site we shouldimplement the Layout.cshtmlIn this file we include the styles images andtemplates fort each content and zones arecalled.
  34. 34. Alexandre Marreiros, 2011Theme BuildIf we want to define a bunch of totally differentlayouts we can call partial views for eachcontent based on a condition. @Html.Partial("_Inner")
  35. 35. Alexandre Marreiros, 2011Theme BuildOn thing to consider is the zones avaiable andwhen 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 zonesto consider (using the theme manifesto Theme.txt)
  36. 36. Alexandre Marreiros, 2011Theme BuildFinal step is to use Shapes and placement tochoose the way we want contents to be renderand where.A good aproach for that is using Shapetrace
  37. 37. Alexandre Marreiros, 2011 Demo Theme BuildingDemo
  38. 38. Alexandre Marreiros, 2011ContentDisplay Dev Aproach There are different ways to look to development inOrchard. One approach is prepare the Theme toanswer the stimulus off the content on the rendertime to change the display how give final usersome functionality. Front End Ritch Text edition
  39. 39. Alexandre Marreiros, 2011 Demo ContentDisplay aproachDemo
  40. 40. Alexandre Marreiros, 2011Galleries Theres a bunch of Module Galleries in thecommunitie. When we talk about gallerie there areto different famelies Galleries Content item A field or part Gallery that is a gallery Pretty Gallery Image Gallery Fliker Gallery Document Gallery
  41. 41. Alexandre Marreiros, 2011Building a Module The first thing before create a Orchard Module isto 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. 42. Alexandre Marreiros, 2011Building a ModuleWith this in mind building a module is notdifferent from building a module to na MVC app.But demmands the knowldge of this newconcepts.Now hands on job let’s build modules, and acontent part
  43. 43. Alexandre Marreiros, 2011 Demo building a module and a contentpartDemo
  44. 44. Alexandre Marreiros, 2011References cms-part-3-creating.html 2011/DEV355 net-mvc-3-and-the-helper-syntax-within-razor.aspx
  45. 45. Alexandre Marreiros, 2011Email: Amarreiros@gmail.comTwitter: @alexmarreirosFeel free to ask