Important Concepts

In this article we introduce some central concepts which you as a developer need to have some knowledge about when you start developing with EPiServer CMS.

Contents

›› Introduction
›› EPiServer CMS UI - Modes
›› Master Pages and Content Place Holders
›› Page Type
›› Page Templates
›› EPiServer Properties
›› Web Pages
›› Web Controls
›› User Controls
›› Help for Developers

Introduction

The majority of the pages on a Web site usually share a common design in order to facilitate navigation and provide a uniform user experience. Building a Web site using Microsoft master pages with EPiServer CMS allows you to define the overall design in a single place. By developing a Web site using the master page templates model you are able to establish a consistent look throughout the Web-site and duplicated code can be avoided, which will lead to an efficient Web site with low maintenance. A master page (*.master file(s)) can be the basis for the continued development of the Web site. You can also specify which parts of the design have content that may need to vary in different types of pages on the site – these different types of pages can be customized in detail through the use of a number of page template files (*.aspx files).

To make full use of the flexibility offered by ASP.NET and EPiServer CMS, the template files should make use of smaller, reusable Web user controls (*.ascx files) that can encapsulate individual parts of the user interface (both appearance and behavior). EPiServer have developed quick and easy to use Web controls, adding them to your master page or page template is simple -either through drag-and-drop in the Visual Studio Design mode or adding them with code. 

See below for some more in-depth information regarding master pages and content place holders, page template (web forms) and EPiServer Web controls.

The image below illustrates the relationships between the building blocks of pages designed according to these principles.

EPiServer CMS 5 UI - Modes

In order to begin developing with EPiServer CMS it is advisable that you are knowledge about EPiServer CMS 5 and its different modes. EPiServer CMS Web sites can be displayed in three ways:
Edit Mode
The view that editors work in to build up the Web site’s structure and enter information on the Web site. See the Editor's Manuals for EPiServer CMS 5 R2.
View Mode
The view of the Web site, as seen by the visitors (either anonymous or registered) - allows some editing, via ”simple” editing and quick-edit. See the Editor's Manuals for EPiServer CMS 5 R2.
Admin Mode
The view that administrators and developers work in to configure the Web site and define the tools and page types that editors can work with. See the Administator's Manuals for EPiServer CMS 5 R2.

Master Pages and Content Place Holders

EPiServer CMS supports the Microsoft ASP.NET Master Pages model. A master page is a special type of page (file extension .Master) representing a base for the design and layout used in a web site.  Conceptually master pages are almost identical to the previous EPiServer specific ”Content Framework” model (not supported in EPiServer CMS 5). ”ContentPlaceHolder” Web Controls are special master page Web controls that defines a specific region for content in a master page.  What is contained inside a master page ContentPlaceHolder can then by be replaced with the Web page’s content. ContentPlaceHolders can contain EPiServer Web Controls, NET Web Controls and text, for example. ContentPlaceHolders can contain default content, in the Master Page. The content in the master page can then easily be replaced with content from the Web pages.  This is achieved by adding a ContentPlaceHolderID in the page template, which the Web pages are based upon. Read the Microsoft Developer Network documentation for in-depth information about master pages, ContentPlaceHolders and ContentPlaceHolderIDs.

» How To with Master page and content place holders

Page Type 

EPiServer Page Types and Page Templates define the type of content and the way in which content can be entered into an EPiServer CMS Web Page. All page types are connected to a page template (*.aspx), which contains the coded functionality behind the Web page. Each Web site can consist of numerous page types and each page type can consist of several properties. Page types, properties and dynamic properties data are stored in the configured database.

» How To for Page Types 

Page Template

A page template is a ASP.NET Web Form and is created using .NET. Page templates usually consist of markup, server controls, and static text with programming logic for the page, which includes event handlers and other code. Page templates frequently use a master page - the master page is indicated with the MasterPageFile attribute in the Page directive (placed at the very top of the markup file). Replacing master page content is achieved by adding the relevant associated ContentHolderIds in the page templates. All EPiServer CMS page types need to be set to a page template, one page template can be used for several page types. Page templates contain the functionality and design for the relevant page type. It is simple to add a new EPiServer page template (EPiServer.TemplatePage) to the project. The EPiServer page templates are part of the EPiServer CMS SDK Installation which on installation  are integrated into Visual Studio 2008.

In order to render content the page types properties must be added to the page templates. When a Web page is browsed, the page template (*.aspx) fetches the correct content/information from the configured database.

» How To for Page Templates

EPiServer Properties

EPiServer Properties is a central concept in EPiServer CMS, a property is used to store and present data in a Web page. A property is a part of the Web page which contains data of specific types. The type of property dictates what kind of values/content that can be entered or rendered.

EPiServer CMS properites are added to a page type in Admin mode, and importantly in order for them to be rendered, need to be added to the page template ('.aspx) that is linked to that particular page type. A property can either be stored for a single page or as a dynamic property that can be inherited for one or more pages simultaneously.

EPiServer CMS provides several predefined properties, for example PropertyString, PropertyDate, and PropertyNumber. It is also possible to create your own customized properties.

Customized properties can be implemented in two ways:

• Use an existing property as a base and change its behavior
• Create a custom property from scratch

The first approach is easier and only requires that you change parts of the base property logic. The namespace EPiServer.Web.PropertyControls contains all the default controls for the built-in properties. The abstract base class PropertyDataControl performs much of the underlying work, lessening the burden for developers creating custom controls. There is no need to inherit from any classes in this namespace. The only thing required is for custom controls to inherit from System.Web.UI.Control and implement the EPiServer.Core.IPropertyControl interface. 

EPiServer Dynamic Properties

The values contained by Dynamic properties are inherited dynamically from the page parent. Dynamic Properties are available on pages of any page type.

» Read the How To for Properties 
» Add a Property to a Page Template

Web Pages

Every Web page in EPiServer CMS is rendered (put together and displayed) with the help of an associated page type, the page type is connected to a particular page template.

Web Controls

Web controls are tools on a Web page that serve a distinct purpose. They can range from very simple to very complex and are compiled and executed on the server. They are rendered as HTML to the browser. Post backs allows server-side code to react to user input. System.Web.UI.WebControls is the namespace for .NET Web controls. and EPiServer.Web.WebControls for most EPiServer-specific controls

Many of the EPiServer Web controls are ASP.Net template controls which let you decide how you want data to be displayed when the page is rendered. The templates provide various options and there are certain ways to utilize them. Through the templates you can specify the appearance of the data bound to the Web control.

User Controls

User controls are reusable ”units” of design and functionality. They have have similarities to both Web Forms and Web Controls. Like Web Controls they are usable both from markup file and code-behind. They are easier to create than Web Controls, but offer less design time support  Make your controls flexible by exposing public properties to allow configuration.

They are implemented in separate files:
Presentation/HTML in ”markup” file   filename.ascx
Logic/code in ”code-behind” file   filename.ascx.cs (C#)
Auto-generated ”designer” file  filename.ascx.designer.cs

User controls inherit from system.Web.UI.UserControl for generic .NET User Controls or EPiServer.UserControlBase for smart EPiServer User Controls (gives easy access to commonly used properties and methods, similar to page templates). Compiling is needed only after changing code-behind file.

» Introduction to EPiServer List and Menu Controls

Help for Developers on EPiServerWorld

EPiServerWorld (world.episerver.com) was launched in the beginning of 2008. It is the official EPiServer community Web site for users and developers. A large amount of resources can be found here which will greatly aid you in developing with EPiServer CMS. You will find technical articles published by developers, along with discussion forums, blogs, technical documentation, downloads and other knowledge resources.  Keep in mind to use the search functionality in EPiServerWorld in order to find the information that you require.

In EPiServer World, you can create your own personal profile card, showing other EPiServer users and developers who you are and what you do. Share your views in your own blog or participate in discussions with other users and developers. If you have an interesting EPiServer or Web-related topic which you would like to share then you can also publish an article on EPiServer World. All EPiServer World content is open, but you need to be a registered member to contribute to the site.

You can also watch guides concerning various developer topics - the interactive guides for developers list will be updated regularly.