I've never touched EPiServer Composer until last week, and now that I'm used to develop my EPiServer sites using PageTypeBuilder, there was quit a painful transition. Clicky clicky, enter some info, click some more, check if it works, can't drag it in, click some more and so on. And then you must do the same sequence for your test and production environment. To much configuration and no way of synchronizing these settings between the different environments make this prone to errors/human mistakes. I've added a quick little library to solve this and it based on Joel Abrahamsson's PageTypeBuilder framework.
Getting the library
You can find the source code at github or download the binary here. Just add a reference to the ComposerBuilder.dll along with your PageTypeBuilder and EPiServer Composer dlls.
NB The currently project is still in a early stage. You might want to try this in a demo project to ensure nothing bad happens
Creating composer pages
The process of creating episerver composer page is very similar as creating episerver page types using PageTypeBuilder. Instead of creating a typed pagetype that inherits from TypedPageData, you create a ExtensionsPageData object like this.
[ExtensionPageType("1AB03438-55BE-4269-80CD-0C07A0159175",
Name = "Composer Wide Page",
Description = "A wide composer page",
Filename = "~/Composer/Pages/PageWide.aspx")]
public class PageWidePageData : ExtensionPageData
{
[ComposerArea]
public virtual string MainArea { get; set; }
}
Notice the ComposeArea properties. Since Composer by default runs http get request to the pages to discover areas on the page, this method can not be used when using pagetypebuilder since the site is not started yet.
The extension page it self inherits from the ExtensionPage type with the pagetype as a generic type argument like this
public partial class PageWide : ExtensionPage<PageTypes.PageWidePageData>
{
}
In the markup of PageWide.aspx you place you Extension Areas controls where you want the functions to the be placed.
<%@ Page Language="C#" AutoEventWireup="false"
MasterPageFile="~/Templates/Masterpages/Site.master"
CodeBehind="PageWide.aspx.cs" Title="Untitled Page"
Inherits="Demo.Composer.Pages.PageWide" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<div style="min-height:100px;">
<Extension:ExtensionContentArea runat="server"
ID="MainArea" Description="MainArea"/>
</div>
</asp:Content>
The extension page should now be show up as a composer pagetype when creating a new page.
Creating composer functions
Creating the composer functions is a just another pagetype, the process of creating them is done in a similar maner. First you need to create the function type like this
[FunctionType("16126D47-0ABE-4EEB-809D-9795A03A64BA",
Name = "Test", Description = "My Test Function",
Filename = "~/Composer/Functions/TestFunction.ascx",
AvailableOnPages = AvailableOn.Specific,
AvailableOnPageTypes = new [] { typeof(PageTypes.PageWidePageData) },
AvailableOnContent = AvailableOn.All)]
public class TestFunctionData : FunctionData
{
[ComposerProperty(EditCaption = "Text")]
public virtual string Text { get; set; }
}
This class creates a new function pagetype named "Test" and points to corresponding function usercontrol. The functions rules are defined using the AvaiableOnXXX properties. This examples makes this function only available on the page wide pagetype + all content functions that contains composer areas. The function properties is defined using the CompserPropertyAttribute. This attribute creates a corresponding episerver property for the function. In this case an xhtml text.
NB The current release copies the default function security to every function by default.
The next is to create the function itself; the TestFunction.ascx. The codebehind should be modified to inherit from ContentFunction class passing inn the function type.
public partial class TestFunction : ContentFunction<FunctionTypes.TestFunctionData>
{
}
Now simply print out the xhtml using the typed property like this:
<%= CurrentPage.Text %>
To complete the example we can now see the "test" function in the composer toolbox.
