WebMatrix + Orchard First Impact…

1. WebMatrix + OrchardFirst Impact… Eng. Giorgetti Alessandro Software Artisan SID s.r.l.

2. Two words about me Giorgetti Alessandro Graduated Engineer Owner/co-founder of SID s.r.l. Blog: http://www.primordialcode.com Email: guardian@nablasoft.com Twitter: @A_Giorgetti

3. WebMatrix Eng. Giorgetti Alessandro Software Artisan SID s.r.l.

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

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

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

7. WebMatrix - setup

8. WebMatrix - site view • It allows you to easily configure some IISExpress parameters (otherwise you’ll have to do it manually editing the configuration files)

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

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

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

12. WebMatrix - demo Setup How it works…

13. Orchard Eng. Giorgetti Alessandro Software Artisan SID s.r.l.

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

15. Orchard - setup You 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.

16. Orchard - demo Setup Setup Orchard using WebMatrix

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

18. Orchard - first run Here is what you get after the setup completes:

19. Orchard - first run And this is the dashboard:

20. Orchard - demo First Run Demo How it works…

21. Orchard - concepts Orchard 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:

22. Orchard - concepts Content Everything 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:

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

24. 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…

25. Orchard - content fields Content 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.

26. Orchard - demo Content Types How it works…

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

28. Orchard - demo Mdls & Ftrs How it works…

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

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

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

32. Orchard - layout (example)

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

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

35. Orchard - layer The Layer Rule value is an expression that can be either true or false. Rules syntax: You can build complex expressions: (not authenticated and url("~/about")) or authenticated

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

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

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

39. Orchard - demo Layers & Widget

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

41. Orchard – advanced topics Eng. Giorgetti Alessandro Software Artisan SID s.r.l.

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

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

44. Orchard – content lists You 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

45. Orchard – content lists To 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.

46. Questions ?

47. Thanks for attending!