Introducing Page Type Builder

Views: 26840
Number of votes: 21
Average rating:

Page Type Builder is an open source project that offers page type inheritance, strongly typed property access and a more object oriented way of working with pages in EPiServer CMS.

One of the most sought after features by developers in EPiServer CMS is inheritance between page types. That is, if page type B inherits from page type A and we add a new property to page type A the same property will also be added to page type B. Another feature that I've heard a lot of developers say they wish the CMS had is strongly typed access to properties. Instead of accessing property values with something like CurrentPage["MainBody"] we would often much rather be able to write CurrentPage.MainBody. In early June, heavily inspired by blog posts by Daniel Rodin, Fredrik Tjärnberg and Mikael Nordberg, I begun working on the Page Type Builder project which aims to deliver just that.

Since the first release, which was purely experimental, I've continued to work on the project and I have received a lot of great feedback, contributions and ideas from the community. Especially from Daniel Rodin and Cristian Libardo. A total of seven releases have been made public and the latest one was good and complete enough to be dubbed version 1.0.

The project is hosted at CodePlex and the binaries as well as the source code is available for download from the projects site there.

Installation

Installing Page Type Builder for use in a project is easily done in three steps:

1.       Download the binaries from the projects site and unzip the downloaded zip file to a directory on your computer.

2.       Make all of the unzipped assemblies (PageTypeBuilder.dll, Castle.Core.dll and Castle.DynamicProxy2.dll) available to an EPiServer CMS project by adding them to its bin folder or to the Global Assembly Cache.

3.       Add a reference to PageTypeBuilder.dll to your project.

No further configuration is needed so with that done you are ready to take it for a spin by creating a first page type.

Hello World

The Hello World of Page Type Builder is creating a new page type, taking a look at it in admin mode and then creating a new page based on that page type and display the value of one of its properties.

To create a new page type you start by adding a new class to your project. You let the class inherit from TypedPageData and you add a PageType attribute to it.

using PageTypeBuilder;
namespace MyProject.PageTypes
{     
    [PageType]
    public class MyPageType : TypedPageData
    {
    }
}

That's all you have to do to create a new page type, but a page type without a single property is hardly useful, at least not when we want to be able to display a Hello World message, so let's add a property to it.

Page type properties are created with code properties with a PageTypeProperty attribute. Let's create a property called MainBody of type XHTML string.

using PageTypeBuilder;

namespace EPiServer.PageTypes
{
    [PageType]
    public class MyPageType : TypedPageData
    {
        [PageTypeProperty]
        public virtual string MainBody { get; set; }
    }
}

We also need a page that can display pages of our page type so we add a new ASPX page to the project. In the code behind file we make it inherit from TemplatePage<MyPageType>.

using System;
using MyProject.PageTypes;
using PageTypeBuilder.UI;
namespace MyProject.Templates
{
    public partial class HelloWorld : TemplatePage<MyPageType>
    {
        protected void Page_Load(object sender, EventArgs e) { }
    }
}

Finally, in the markup file we display the value of the MainBody property.

<body>
    <form id="form1" runat="server">
    <div>
        <%= CurrentPage.MainBody %>
    </div>
    </form>
</body>

Notice how Intellisense kicks in and help us locate the property.

Intellisense

Before we are done there's one last thing that we'll have to do and that is to associate the page type with our newly created ASPX-file (otherwise it will default to "~/default.aspx"). We do this by modifying the PageType attribute.

[PageType(Filename = "~/Templates/HelloWorld.aspx")]

With that done compile the project and open up the sites admin interface and click the Page Type tab and you'll find your newly created page type there.

Page Type Tab

Head on over to edit mode and create a new page with your page type. Add some beautifully styled message in the WYSIWYG editor and hit the Save and Publish button and behold your Hello World page which you just created without using any "magic strings" or having to enter admin mode!

View Hello World!

Beyond Hello World

By now I hope you've learnt a bit about the Page Type Builder project and gained a basic understanding of how to work with it. There are however quite a lot more you can do with it. You can actually define every aspect of a page type that you would normally do in admin mode in code. And considering that each page type can be a class and each page an instance of a class that you define its possible to work in a much more object oriented way than before with pages in EPiServer CMS. You can for instance use interfaces to define common behaviors that each page type can implement in its own way, such as an interface called IRssFeedProvider, or let all your page types inherit from an abstract base class that stipulates that all its subtypes must implement a MetaDescription property. These topics are however beyond the scope of this article. You'll find a list of blog entries about the project at the projects site and a lengthier tutorial here . Ted Nyberg has also posted a great introduction to the project on his blog.

The projects site and my blog is also the place to turn to if you have any questions or other types of feedback, which I of course hope you do!

Comments

Hi,

I am getting this error when I created a Page Type as suggested in this blog.

Method not found: 'Boolean EPiServer.DataAbstraction.PageType.op_Equality(EPiServer.DataAbstraction.PageType, EPiServer.DataAbstraction.PageType)'.

To add: I am using EPi CMS 7 and Page Type Builder 2.0

Same error here.