A first look at EPiServer 7

Having some time between projects means the luxury of playing around with new stuff. The EPiServer 7 Preview arrived this summer, and after I came back from vacation I’ve been looking forward to check it out. Yesterday I set up a new VMware image, and installed the EPiServer 7 Preview. The installation went like a breeze, except for initially forgetting to install MVC4 (MCV4 RC) first.

If you’re going to try it out for yourself, start with these links:
Download  EPiServer 7 Preview – CMS
A First Glimpse of the All New EPiServer 7
Say Hello to EPiServer 7 Preview!
Release Notes – EPiServer 7 Preview – CMS and Relate

After installation (and pinning the tree structure and the file manager / shared blocks), this is what it looks like:

This blog post will of course be my very subjective first impressions – and bear in mind that I’ve only played around with the EPiServer 7 Preview for a very short time.

A few things I’ve noted so far that I really like:

• The Visual Studio integration (more about this later)
• The view change button (the eye icon) – allowing me to immediately see how the site will look for a specific visitor group and/or for a specific device
• The ability to pin/unpin the tree structure and the file manager/shared blocks as needed
• The pulldown top menu (meaning I only see it when I need it)
• Strongly typed pages (more about this later)
• Blocks (more about this later)
• The fact that Web Forms and MVC can live happily side-by-side

A few things I’ve noted so far that I don’t like:

• The functionality for creating and deleting a page was really well hidden (especially how to delete a page – this took me a little time to figure out): two small buttons in the lower left corner
• That the name “New Block”, “New Block1″, etc will show up when you get fresh editors working with EPiServer 7 (unless EPiServer make the following proposed change)… When wanting to add a new global block, this is the screen I’m presented with:
  
  Yes, here I can edit the block name, but my guess is that most editors (like me) will be so eager to select the correct block type that they forget to edit the block name first. Then you get this:
  
  The name for the block is not editable in this screen (unless you click the little edit-icon on the right first), and there is nothing here to remind you that you should edit the name. I really think this screen should allow for editing the block name directly.
• The unnecessary use of popups… When editing a property on a page, you’re presented with both the property content and a popup for editing the same – and they’re working in sync. I’d much rather have seen a directly-on-page editing feature:
  
• The size of the file manager and the shared blocks area. I guess that this will feel too tiny when working on sites with extensive use of files and/or blocks. The size of this area could have been adjustable (by dragging), or there could have been an option to open this area as a separate window.

Visual Studio Integration

I really like the new Visual Studio integration. This has a lot of features. Just take a look at what’s available from the “Add new…” dialogue:

Below, I’ll show a few of the things you get directly from this dialogue.

Creating a new PageType (Web Forms)

Obviously, at least for anyone who has tried PageTypeBuilder (which I guess is almost all EPiServer developers), you’ll need both a model and a rendering template for your new pagetype.

We start with the model, which in EPiServer is simply called a Page Type.

using System;
using System.ComponentModel.DataAnnotations;
using EPiServer.Core;
using EPiServer.DataAbstraction;
using EPiServer.DataAnnotations;
using EPiServer.SpecializedProperties;

namespace EPiServer.Templates.AlloyTech.PageTypes
{
    [ContentType(DisplayName = "DefaultPage1", GUID = "db13d240-8ef3-4e91-b6a2-7783a8ef1a04", Description = "")]
    public class DefaultPage1 : PageData
    {
        /*
                [CultureSpecific]
                [Editable(true)]
                [Display(
                    Name = "Main body",
                    Description = "The main body will be shown in the main content area of the page, using the XHTML-editor you can insert for example text, images and tables.",
                    GroupName = SystemTabNames.Content,
                    Order = 1)]
                public virtual XhtmlString MainBody { get; set; }
         */
    }
}

There are two things I especially like with this: First, that it by default fills in the DisplayName (with the filename I provided) and automatically sets the GUID to a new GUID). This might seem like a little thing, but is something that will make creating new pagetypes so much more quickly done. Second, I like that I get a commented-out example of how to code a property, this makes it easy for developers new to EPiServer 7 to get started.

Next, we need a rendering template, which in EPiServer is called a Page Template.

The front-end code provided from the Visual Studio integration looks like this:

<%@ Page Language="c#" Inherits="EPiServer.Templates.AlloyTech.Pages.PageTemplate1" CodeBehind="PageTemplate1.aspx.cs" %>

<%--     To add markup for this WebForm you can do one of two things:          1. Use a Masterpage by adding the masterpage attribute in the @Page declaration above.         2. Add markup directly in this file. You can start by uncommenting the section below. --%>



        PageTemplate1
</pre>
<form id="Form1">
<div></div>
</form>
<pre>

…and the accompanying code-behind looks like this:

using System;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using EPiServer;
using EPiServer.Core;
using EPiServer.DataAbstraction;
using EPiServer.Framework.DataAnnotations;
using EPiServer.Web;
using EPiServer.Web.WebControls;

namespace EPiServer.Templates.AlloyTech.Pages
{
    [RenderDescriptor(Path = "~/Templates/AlloyTech/Pages/PageTemplate1.aspx")]
    public partial class PageTemplate1 : EPiServer.TemplatePage
    {
    }
}

The first thing that strikes me, is that this is somewhat “backwards” compared to how I’m used to work with PageTypeBuilder. In PageTypeBuilder you specify the rendering template from the model, while here it is the other way around, in EPiServer 7 it seems that the rendering model specifies what model it is intended for. Well, maybe this is better? I’ll need to get used to this before I can decide whether I like it better, but it’s probably done for a reason.

The second thing I notice, is a slight “glitch”…. The comment in the .aspx file says “uncomment the section below” – and there’s no such section to uncomment.

Also, I would have liked to be prompted with the option of with/without MasterPage (and the ability to select the MasterPage, of course) with a dialouge; something along the lines of the dialogue provided for Dynamic Content.

Creating a Block (Web Forms)

The block is a new concept in EPiServer 7, and this is something I’ve been looking forward to, and that I think will be extremely useful in most sites. A block is simply a grouping of properties, which can then be included as a property itself in a page type, or created as a “global” block to be inserted into multiple pages. An obvious usage example that springs to mind is a contact person, containing a name, an image, phone number and email address. In previous sites I’ve created separate page types for this kind of thing, thus letting the contact persons exist in a single location in the page tree, but linkable from many places. Using the new concept of blocks for this scenario is simpler, cleaner, and much easier to understand for the editors.

As with pages, a block consists of a model and an accompanying rendering template.

The Visual Studio Integration gives us this for the model (known as a Block Type):

using System;
using System.ComponentModel.DataAnnotations;
using EPiServer.Core;
using EPiServer.DataAbstraction;
using EPiServer.DataAnnotations;

namespace EPiServer.Templates.AlloyTech.BlockTypes
{
    [ContentType(DisplayName = "DefaultBlock1", GUID = "5816b5d4-9d8e-4fff-a225-aaad8e4943e7", Description = "")]
    public class DefaultBlock1 : BlockData
    {
        /*
                [CultureSpecific]
                [Editable(true)]
                [Display(
                    Name = "Name",
                    Description = "Name field's description",
                    GroupName = SystemTabNames.Content,
                    Order = 1)]
                public virtual String Name { get; set; }
         */
    }
}

…this for the template front-end:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="BlockTemplate1.ascx.cs" Inherits="EPiServer.Templates.AlloyTech.Blocks.BlockTemplate1" %>

…and this for the template code-behind:

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using EPiServer;
using EPiServer.Core;
using EPiServer.Web;
using EPiServer.Web.WebControls;

namespace EPiServer.Templates.AlloyTech.Blocks
{
    public partial class BlockTemplate1 : BlockControlBase
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
    }
}

Again, I like the fact that the model is automatically pre-filled with useful default properties.

Creating Dynamic Content

When selecting Dynamic Content from the “Add new item…” dialogue, I’m presented with this:

The code generated with the various options seem like good starting points, but I’m a bit surprised that there are no options for getting an MVC template with dynamic content. (I guess the “Web Forms must die soon”-guys will be screaming for an MVC template here…)

Web Forms vs MVC

Having been “stuck” with Web Forms development for years now – because of EPiServer’s lack of MVC support – I’ve so far not used MVC in any production code I’ve written. I have of course played a little with MVC, but do not yet have enough experience with this. However, as MVC and Web Forms can happily co-exist in the same EPiServer 7 solution, I’m looking forward to getting up to speed with MVC in future projects.

Conclusion so far

The EPiServer 7 Preview looks really promising. I’ve only had a short glimpse of it so far, but what I’ve found has mostly been positive changes. I will continue to play with this preview for a while, so there may be more blog posts on EPiServer 7 shortly. And I’m really looking forward to working on new projects with the new version of EPiServer. Stay tuned.

About these ads