Articles in this series

Part 1: The requirements 
Part 2: Installing Sitecore and setting up a Visual Studio solution
Part 3: Architecture
Part 4: The basic layouts

Part 5: Identity and documents
Part 6: Navigation
Part 7: The homepage - content oriented spots
Part 8: The homepage - presentation oriented spots
Part 9: News
Part 10: Search
Part 11: Deploying the solution
 

Concepts of layouts

Whenever you start a new Sitecore site, you will have to define a layout, which will set the basic structure of your pages. A layout is a typical .NET.aspx-file and represents the main presentation on a page. You can only have one layout for each page, but this layout can have several sublayouts (.ascx) and renderings (.xslt). So in short your layout should define the boundaries or skeleton of your page.

In theory you could define all your presentations directly in the layout, but then you wouldn't take advantage of Sitecores rendering engine, which will give you more dynamic pages and reuse of controls. For more information please see the Presentation Component Cookbook .

As you can read in the cookbook Sitecore makes use of placeholders, where you're able to dynamically inject presentations at runtime and add different controls and presentations. Therefore your layouts shouldn’t hold much more then placeholders.

This image show the concept of your layout. It doesn’t hold much more then placeholders. Depending on the page type the layout is used with different subcontrols, which will be added dynamically. In that way you define self contained and reusable controls, which can be used on multiple pages.

Having that in mind we can create our main layout. In some sites you will have a layout with a single placeholder wherein you can have a different set of regions, but as this is a simple site, I am going to go ahead and define, that there should always be a header region, content region and footer region in the layout. (Much like in the above image).

Creating the Page Types component and the layout

As mentioned in the previously we want to use a component based architecture. This means that the main layout should be part of a component. The Page Type component is responsible for pulling together all other presentations and it holds all templates, which represents a page frontend-wise. Therefore the main layout fits perfectly into this component, as it is the main placeholder for all presentations.

This means we have to create folders and a visual studio project for the Page Type component, which ensures that all functionality is grouped together and that the component is independently deployable. So in the file structure create a folder called “Components” (the folder in which all components are placed) and under that create a folder called “PageTypes”.

We also need to create a similar folder structure under the layout node in Sitecore:

Now we can go ahead and create the Layout by clicking the Layout button in the Ribbon (as highlighted above). Name it MainLayout and place it in the /Components/PageTypes folder both in Sitecore and in the file structure.

Creating the project

The Sitecore Grid Designer is not something I have ever used, so let’s create a Visual Studio project and include the layout there and then use the Visual Studio editor to create the markup. We use the solution we’ve created earlier. Here you need to right click the solution, chose “add” and “New project…”.  In this case we would like to use an ASP.NET Web Application template. Name the project PageTypes.

Now you can click ok and a project is created. Visual Studio automatically creates some files and folders you don’t need – a web.config file, a defaults.aspx file and a App_Data folder. So go ahead and delete them from within Visual Studio. Your project is now clean, but unfortunately Visual Studio has created a new folder for the project inside the /Components/PageTypes folder. We want to move the project and it is done by removing the project from the VS solution, then move all the files from the created project into the /Components/PageTypes folder and then include the project again (by clicking “add existing project...”). By doing that you should end up with something like this:

Earlier we added the MainLayout item to Sitecore, but as we didn’t use the Sitecore Developer Center to do it an actual file wasn’t created. This is absolutely fine, as we'd like to create the file from Visual Studio, because it automatically adds a codebehind file. So go into your VS project and click “Add…” > “New Item…”. Now you can choose “Webform”, which is a .aspx file. Name it MainLayout.aspx.

Now the file should be created and you can alter it. At first we just want to test if everything worked, so enter a dummy text in the body-tag so that you can see some content. You should then end up with something like this:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      I am the main layout
    </div>
    </form>
</body>
</html>

Even though we can now build the project, it won’t work, as the compiled .dll file is placed in the folder /components/PageTypes/bin. Therefore we need to create a post build event, which copies the .dll to the /bin folder. This can be done by right clicking the project, selecting “Properties” and then select the tab “Build Events”. Here you need to copy in the following line in “Post-build event command line” field:

copy "$(TargetDir)$(TargetName).*" "$(SolutionDir)Website\bin"

This should copy the PageType.dll to the /bin folder.

To test the layout we need to create a sample template, which we add the layout to. This might as well be a normal content page – let’s call it NormalPage, so go to the template node in Sitecore. Here you should create a /Components/PageTypes folder and create a template called NormalPage:

Now that we have created the template, we need to assign the Layout. To do this we need to create standard values for the template. You do this by selecting the template, click the builder tab (if it is not already selected), click the options tab in and then Standard Values.

There will now be created an item under the NormalPage template called __Standard values. This item holds all the standard values for the template. Standard Values substituted the concept of masters in Sitecore 6 and works as a standard or default value for all items based on the template. Read more about the goodbye to masters here.

When the standard values item is created go to the “presentation” tab and click “details”. Then select “Edit” for the default device (you can read more about devices in the Presentation Component Reference).

You will now be able to assign the MainLayout:

When you have done so, save the item by clicking the save button in the Content editor.

We have now defined the template, so to test it we need to create an item based on the template and visit that item on the frontend. As this is just a test, don’t worry about the content structure; just go to the home node and create it under there. When standing on the home node, right click and then select “Insert from template”. Now choose the recently created template and name it LayoutTest:

When it is inserted, you need to save the item and then perform an incremental publish. You can now hit the frontend by entering the URL http://localhost/layouttest.aspx and you should see something like this:

 Well done! :)

Creating the markup

Now we can create the markup for the layout. As described we wanted to create a main layout with three placeholders: A header, a footer and a content field. So I am going to define three areas with a placeholder each in my MainLayout:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <link rel="Stylesheet" href="/components/design/css/default.css" />
</head>
<body>
    <form id="form1" runat="server">
      <div class="Page">
        <div class="HeaderRegion">[Header]
          <sc:placeholder runat="server" id="HeaderRegionPlaceholder" key="HeaderRegion" />
        </div>
        <div class="ContentRegion">[Content]
          <sc:placeholder runat="server" id="ContentRegionPlaceholder" key="ContentRegion" />
        </div>   
        <div class="FooterRegion">[Footer]
          <sc:placeholder runat="server" id="FooterRegionPlaceholder" key="FooterRegion" />
        </div>
      </div>
    </form>
</body>
</html>

When this in place I can inject other controls into the placeholders, which we will get back to in the next part.

You might have noticed that there is a reference to a stylesheet. This is because I have gone ahead and created the design component. There isn’t much work involved in this. Just create a Visual Studio project called Design in the same way you created the PageTypes project and create a folder called CSS and a stylesheet called default.css. You should then end up with something like this:

The reason for creating the Design component so early, is that I like to give my regions some basic styles, so I can see them on the frontend. I have styled the layout like this:

.Page
{
  width: 1000px;
}

.HeaderRegion
{
  height: 150px;
  width: 100%;
  background-color: Red;
}

.ContentRegion
{
  width: 100%;
  background-color: Blue;
}

.FooterRegion
{
  height: 150px;
  width: 100%;
  background-color: Green;
}

Which gives us the following nice-looking design:

As this article has been quite long, I am going to extend the series, so that the Identity and document components will be covered in a separate part – so look forward to the next article; it will be published soon.

Recap

We have now created two components: The PageTypes and Design component. These doesn't hold much right now, but there will be additions later on. The components are pretty basic for presenting something on the frontend and we should now be able to add other components rather easy, so look forward to the next article, which will have a bit more code and templates.

You can download the source code we have developed so fare here.