webmatrix + orchard first impact…

PrimordialCodehttp://www.primordialcode.com

WebMatrix + OrchardFirst Impact…

Eng. Giorgetti AlessandroSoftware ArtisanSID s.r.l.


Two words about me

Graduated EngineerOwner/co-founder of SID s.r.l.Blog: http://www.primordialcode.comEmail: [email protected]: @A_Giorgetti

Giorgetti Alessandro

http://www.primordialcode.com/

mailto:[email protected]


WebMatrix



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.


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.


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


WebMatrix - setup


WebMatrix - site view• It allows you to easily configure some IISExpress parameters (otherwise

you’ll have to do it manually editing the configuration files)


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.


WebMatrix - database view• It allows you to connect to a datasource and manage it: edit tables and

manage data.


WebMatrix - report view• Analyze your website and find potential problems.


WebMatrix - demo

How it works…

Setup


Orchard



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.


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.


Orchard - demo

Setup Orchard using WebMatrix

Setup


Orchard - first runIt will ask you some info:• Website name• Administrator account• Type of storage• Template to use


Orchard - first runHere is what you get after the setup completes:


Orchard - first runAnd this is the dashboard:


Orchard - demo

How it works…

First Run Demo


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:


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:


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


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…


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.


Orchard - demo

How it works…

Content Types


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)


Orchard - demo

How it works…

Mdls & Ftrs


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.


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


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


Orchard - layout (example)


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.


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


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


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


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.


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.


Orchard - demo

Layers & Widget


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


Orchard – advanced topics



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.


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


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


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.


Questions ?


Thanks for attending!

webmatrix + orchard first impact…

Documents

workssetup primordialcodehttp

web sites

web cms

website pages

web gallerychoose orchard

microsoft webmatrix

setup orchard

builtin web templates