PrimordialCodehttp://www.primordialcode.com
WebMatrix + OrchardFirst Impact…
Eng. Giorgetti AlessandroSoftware ArtisanSID s.r.l.
PrimordialCodehttp://www.primordialcode.com
Two words about me
Graduated EngineerOwner/co-founder of SID s.r.l.Blog: http://www.primordialcode.comEmail: [email protected]: @A_Giorgetti
Giorgetti Alessandro
PrimordialCodehttp://www.primordialcode.com
WebMatrix
Eng. Giorgetti AlessandroSoftware ArtisanSID s.r.l.
PrimordialCodehttp://www.primordialcode.com
WebMatrix• WebMatrix is a free web development tool
that includes everything you need to start developing your website.
• It is NOT a replacement for Visual Studio.• It supports managing of web applications
and application frameworks (like WrodPress, Umbraco, Orchard…).
• Integrated with IISExpress to manage your development websites configuration.
• It has some built-in web templates or just start writing code yourself.
PrimordialCodehttp://www.primordialcode.com
WebMatrix• Create a website: starting from scratch or
using one of the available web applications/templates to create your starting point.
• Websites are ‘self-hosted’ using IISExpress or IIS: ideal for developement.
• Customize your website: it has support for different editors that makes easy to edit different aspect of the website (pages, css…)
• Publish the website: using an integrated wizard you can publish the website to your dedicated hosting provider.
PrimordialCodehttp://www.primordialcode.com
WebMatrix - setup• Download and install: Microsoft Web
Platform Installer• Look for: Microsoft WebMatrix and add it
to the installation list• All the dependecies will be automatically
installed if not already present on your PC
PrimordialCodehttp://www.primordialcode.com
WebMatrix - setup
PrimordialCodehttp://www.primordialcode.com
WebMatrix - site view• It allows you to easily configure some IISExpress parameters (otherwise
you’ll have to do it manually editing the configuration files)
PrimordialCodehttp://www.primordialcode.com
WebMatrix - file view• It allows you to create and edit files related to the website, from code
files to css styles with an integrated editor.
PrimordialCodehttp://www.primordialcode.com
WebMatrix - database view• It allows you to connect to a datasource and manage it: edit tables and
manage data.
PrimordialCodehttp://www.primordialcode.com
WebMatrix - report view• Analyze your website and find potential problems.
PrimordialCodehttp://www.primordialcode.com
WebMatrix - demo
How it works…
Setup
PrimordialCodehttp://www.primordialcode.com
Orchard
Eng. Giorgetti AlessandroSoftware ArtisanSID s.r.l.
PrimordialCodehttp://www.primordialcode.com
Orchard• Orchard is a Web CMS, which essentially aims
at helping you build web sites from existing pieces.
• Highly modular approach.• It’s built upon ASP.NET MVC 3.• Native persistence layer based on NHibernate.• Can use different types of databases.
PrimordialCodehttp://www.primordialcode.com
Orchard - setupYou have different options to setup orchard,
from downloading and compiling the source code to using precompiled zip packages or the WPI.
However we started with WebMatrix, so we keep going down that side:
• Open the WebMatrix dashboard• Select ‘Site from web Gallery’• Choose Orchard from the application list.
PrimordialCodehttp://www.primordialcode.com
Orchard - demo
Setup Orchard using WebMatrix
Setup
PrimordialCodehttp://www.primordialcode.com
Orchard - first runIt will ask you some info:• Website name• Administrator account• Type of storage• Template to use
PrimordialCodehttp://www.primordialcode.com
Orchard - first runHere is what you get after the setup completes:
PrimordialCodehttp://www.primordialcode.com
Orchard - first runAnd this is the dashboard:
PrimordialCodehttp://www.primordialcode.com
Orchard - demo
How it works…
First Run Demo
PrimordialCodehttp://www.primordialcode.com
Orchard - conceptsOrchard is a highly modularized solution.Each module/package can be broke up in
different pieces that offer small features that can be combined to obtain complex operations.
To undestand how things work we need to familiarize with some terms and definitions the Orchard team uses:
PrimordialCodehttp://www.primordialcode.com
Orchard - conceptsContentEverything is focused around content;
content is everything that has any information in it (a page, a blog post, a comment…we can have different kinds of content).
A content is not an atomic entity, it is made of different parts, a single content part is used to provide a coherent behavior that can be reused by different contents:
PrimordialCodehttp://www.primordialcode.com
Orchard - content parts• Admin Menu – management related functions• Body – provide the content/information• Comments – states if comments are available• Common – provide common attributes (like
the owner and date timestamps)• Containable – allows the item to be
contained inside a list• Container – provide support for containing
items• Custom properties
PrimordialCodehttp://www.primordialcode.com
Orchard - content parts• Identity• Menu – allows the item to appear on the
menu• Publish Later – information related to the
pubblication• Route Part – used to locate the resource• Tags Part – associates tags to the resource
(allows for some sort of categorization, tagged contents are accessible as a resource: ~/tags/tag-name)
• More parts can be added…
PrimordialCodehttp://www.primordialcode.com
Orchard - content fieldsContent fields are pieces of information that can
be added to a content item.Content fields have a name and a type and are
specific to a content type; there can be several of each field type on any given content type.
For example, a Product content type can have a numeric field representing its price, and another numeric field representing its weight.
You can also define custom content types.
PrimordialCodehttp://www.primordialcode.com
Orchard - demo
How it works…
Content Types
PrimordialCodehttp://www.primordialcode.com
Orchard - modules and features
• All the functionalities exposed by Orchard are implemented as Modules.
• A module is a set of extensions for Orchard that are grouped in a sub-folder of the Modules directory that can be found inside the Orchard web site.
• A module can contain one or more Features: a logical grouping of functionality that can be enabled or disabled individually.
• To access the module management section:Dashboard -> Modules (here you can install/enable/disable/configure modules and features)
PrimordialCodehttp://www.primordialcode.com
Orchard - demo
How it works…
Mdls & Ftrs
PrimordialCodehttp://www.primordialcode.com
Orchard – themes & composition• Orchard enforces a clean separation
between the content management and the visual rendering of the content.
• Each featuare, part or content has its own graphic representation.
• Orchard has a mechanism that is able to compose these eterogenous entities in a single consistent whole.
• UI composition in Orchard is quite complex to understand at first, this is mainly due the high level of flexibility and customization.
PrimordialCodehttp://www.primordialcode.com
Orchard - theme• A theme is a packaged look and feel for an
Orchard site. • It can consist of any combination of style
sheets, images, layouts, templates and even custom code.
• It is possible to create a theme that inherits from another (it’s easy to make small modifications on an existing theme).
PrimordialCodehttp://www.primordialcode.com
Orchard - layout• A layout is a file in a theme that defines the
general organization of the pages of the site that use it.
• A layout typically defines a set of zones where contents or widgets can be inserted.
• You can have only one basic layout per site.• You can customize how the pages render
using combinations of different layers (more in the next slides).
PrimordialCodehttp://www.primordialcode.com
Orchard - layout (example)
PrimordialCodehttp://www.primordialcode.com
Orchard - zones & widgets• Zones are specific parts of a layout that
can be customized by inserting elements or widgets.
• Zones can be collapsible, which means that they disappear if they contain no active element or widget.
• A Widget is a small fragment of UI that can be added to some or all pages of the site.
• Examples of widgets are tag clouds, maps, archives, etc… they can be implemented as features in modules.
PrimordialCodehttp://www.primordialcode.com
Orchar - layer• A layer is a group of widgets (with their
specific configuration) that is activated by a specific rule.
• You can define different kinds of rules.• When more than one layer is active on any
given page (because it matches more than one rule), all the widgets from all those layers get displayed at the same time.
• To define more layers: Dashboard -> Widgets
PrimordialCodehttp://www.primordialcode.com
Orchard - layerThe Layer Rule value is an expression that can be either true or false.Rules syntax:
Syntax Description
url("<url path>") True if the current URL matches the specified path. If you add an asterisk (*) to the end of the path, all pages found in subfolders under that path will evaluate to true (for example,url("~/home*")).
authenticated True if the user is logged in.
not Logical NOT.
and Logical AND.
or Logical OR.
You can build complex expressions:
(not authenticated and url("~/about")) or authenticated
PrimordialCodehttp://www.primordialcode.com
Orchard - template• Each content need to be represented
graphically to the user.• We need a way to convert the data of the
content to HTML to be rendered by the browsers.
• Basically a template is an HTML file with placeholders for data and code to be executed(<h2>@Model.Title</h2>).
PrimordialCodehttp://www.primordialcode.com
Orchard - shape• Before being rendered using the templates
each object is transformed into a ‘Shape’.• A Shape is an object that contains all the
informations required to display it.• Everything in a page is mapped to a tree
of shapes that is an abstract representation of the page itself (like the WPF/Silverlight/WP7 visual and logical tree representation of xaml forms).
• This approach allows for trasformations of each object before the actual rendering.
PrimordialCodehttp://www.primordialcode.com
Orchard - placement• When rendering a page Orchard needs to
know where to put each piece and in what order to do so.
• Placement.info files are XML files that describe rules that can be used to determine what shapes go into what zones and in what order.
PrimordialCodehttp://www.primordialcode.com
Orchard - demo
Layers & Widget
PrimordialCodehttp://www.primordialcode.com
Orchard - security• It supports Users and Roles management.• It comes with a predefined sets of roles you can assign
to users.• You can create new roles.• Each role has its own permission set.• Permissions are granted to roles but are not explicitly
denied (if a user belongs to any role that has a given permission, he has that permission)
• Some permissions are “effectively granted” (it means that they are implied by other permissions, ex: site owner…)
• Each feature can expose it’s own set of permissions.• Users & permission management: Dashboard -> Users
PrimordialCodehttp://www.primordialcode.com
Orchard – advanced topics
Eng. Giorgetti AlessandroSoftware ArtisanSID s.r.l.
PrimordialCodehttp://www.primordialcode.com
Orchard - searching & indexing
• Features provided through modules: Indexing – provide the indexing featureLucene – specific indexing implementationSearch – provide the ability to query
• New options are added to the configuration settings of the dashboard (to select which part of the content to index and to schedule the indexer task)
• A new widget is provided (SearchForm) to offer the users a UI with which perform queries and search.
PrimordialCodehttp://www.primordialcode.com
Orchard – custom content types
• You can create your custom types to represent specific contents in your site (such as an ‘Event’ or a ‘Sponsor’ for exmaple).
• Custom types can be made of:Parts – predefined block of properties that defines specific behaviorsFields – custom piece of information specific to your type (you have different kinds of fields and more can be created).
• Custom types can have different behaviors related to the Parts you use to build them up (so you can render them as lists, single pages, index them, display them on the menu, etc…)
PrimordialCodehttp://www.primordialcode.com
Orchard – content listsYou can organize content items in lists.• Edit an existing type or create a custom one and
add the following Parts:Common – gives the object a basic set of properties (owner, creation date, container, version, etc…)Containable – states that this type can be attached to a list and enables dashboard to manage the relationship between the items and lists.
• Next you need to create a List that will contain your types:Dashboard New List
PrimordialCodehttp://www.primordialcode.com
Orchard – content listsTo display a list:• Attach the list to a menu item and
display it as a full page• Use a “Container Widget” and anchor
it to a zone of your layout.
PrimordialCodehttp://www.primordialcode.com
Questions ?
PrimordialCodehttp://www.primordialcode.com
Thanks for attending!