Level: 100
 

Simple information site in Sitecore – part 4: The main layout

This is the forth part of the article series in 11 parts, describing how to build a simple information site in Sitecore.


In this article I’ll go through the basic parts of the site, focusing on the basic layout. This part of the tutorial will be based on the architecture described in the last part of the series and will be simple and basic, so that everyone should be able to follow the guide and the component architecture is explained.

Written by: Jens Mikkelsen
Tue, Mar 30 2010

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.

 

Main layout concept

 

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”.


 

Page types files folder

 

 

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

 

 

Page types layout folder

 

 

 

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.

 

 

Main Layout folder

 

 

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.

 

Create visual studio project

 

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:

 

Project created

 

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.

 

Add main layout file

 

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"


 

Post build event

 

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:

Normal page template

 

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.

 

Normal page 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).

 

Edit layout normal page

 

You will now be able to assign the MainLayout:

 

Assign Main layout

 

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:

Normal layout test

 

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:

 

Main layout test

 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:

 

Design component project

 

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:

 

Smart 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.

 

Please rate this article


17 rates / 4,29 avg.

  • About the author:

    Jens Mikkelsen

    Jens Mikkelsen is a partner at Inmento Solutions a Sitecore consulting firm. He works as a Sitecore specialist and consulting helping clients architect and build quality Sitecore solutions using the newest modules and tools. 

    Further he has been deeply envolved in various complex solutions and has built up a strong knowledge of Sitecore architecture and best practices. He has especially focused on and is specialized in debugging and analyzing Sitecore solutions.

     

    Jens is very interested in the technical mechanisms in the new marketing products such as Sitecore DMS and Sitecore ECM.

    My Sitecore Freelance CV

23 responses to "Simple information site in Sitecore – part 4: The main layout"

Great stuff Jens, thanks. I know doing articles like this isn't the most fun, especially when you have tons of other things on your plate, but if you can get the 2nd part of this article out by early next week, I will buy you a drink at DreamCore if you are going. If you are not going, I will PayPal Donate you so you can grab a drink on me. Thanks ~James
Posted: Friday, April 09, 2010 5:38 PM
Hi James,

I am thrilled you like the work. For your information I am almost done writing the next article, so it should be out no later than tuesday.

Unfortunately I won't be going to Dreamcore USA, but Dreamcore Europe. So unless you are going to there as well, I guess we'll have to catch a drink at another occasion. :)

Cheers
Jens
Posted: Monday, April 12, 2010 12:07 AM
Hi James,

The article is now ready... And almost on time. 40 minutes past midnight. :)

Cheers
Jens
Posted: Wednesday, April 14, 2010 12:42 AM
Nonsense, it is still Tuesday in Chicago :). Thanks again Jens, I will read it right now.

~james
Posted: Wednesday, April 14, 2010 3:29 AM
Hi Jens
Thx for the example.
I am puzzled by the markup in the MainLayout.aspx

How did you get the tag prefix sc:placeholder ?
I imagine the sc is for sitecore, but how do I get intellisense in VS to recognice it?

Kind regards,
Posted: Friday, April 23, 2010 8:37 PM
Why the post build event to copy the created dll? Isn't it sufficient to add a reference in the main web application to the component solution? As far as I can tell that works fine.
Posted: Thursday, May 27, 2010 2:15 PM
component solution = component web application project
Posted: Thursday, May 27, 2010 2:16 PM
Hi Dirk,

Thanks for your comment! This will work if you have a main component web application project, but in this example, there is no main project.

Further if you consider the reusable idea of a component, it is easier to just copy the solution over with out having to reference the dll.

Cheers
Jens
Posted: Thursday, May 27, 2010 3:00 PM
Hi Jens,
First, thank you very much for this tutorial(s).

Just wanted to mentioned that the only way for layouttest.aspx page to pick up css was to use following construct:



Otherwise it sitecore/asp.net couldn't resolve path properly. I'm curious how you haven't run into same problem?

Thanks
Luka
Posted: Thursday, December 16, 2010 8:22 PM
Just realized that previous post didn't pickup html and I will try here to clarify missing html.
I was using ~/ I believe root relative reference.
Luka
Posted: Thursday, December 16, 2010 8:24 PM
Hi Luka

It is not necessary to use the tilde to refer to the root of the website. It should be enough to start the href with a slash as in Jens's example.

Jimmi
Posted: Thursday, December 16, 2010 9:39 PM
Hi Jimmi,
I tried it as with Jen's example and it didn't work.
I'm using 6.4 version, maybe there was some change?
Once I refereed to css stylesheet using tilde, page picked up the style and I got it rendered as in example.

Go figure...
Posted: Friday, December 17, 2010 1:23 AM
Thanks again for this nice article.

Posted: Wednesday, February 02, 2011 7:54 PM
Just started sitecore yesterday. found your tutorials today and I must say, i found them very helpful. I have read all articles up to this one (a lot of the things are pretty new but your explanation is excellent. I just completed this section of the tutorial and noticed something. To copy the dll didnt work for me, i had to change it to this: copy "$(TargetDir)$(TargetName).*" "$(SolutionDir)\bin" (i had to remove website because it was already included in the "SolutionDir"). posting this just in case another new comer to SiteCore is reading. Continue the good work
Posted: Thursday, July 07, 2011 12:45 AM
Tom
Hey Garfield,

I had to make the same change as you in the Post Build event. I have just started learning Sitecore.

Tom
Posted: Monday, July 11, 2011 9:07 PM
Hey Tom,

Am glad someone else had to do that i was worried i missed a step or two lol.

But yea i just started too...unfortunately i want to learn how to do rendering using layouts and sublayouts (C#) not xslt but i cant find much help on that. That actually shows me from the begging, i see a lot with snippets i have no idea where they go. If you should come across anything i mite find useful please share
Posted: Monday, July 11, 2011 9:59 PM
Hi Guys,

The build event is relative to where you have placed your VS solution. In this example I have placed it in the folder above the webroot, hence the event.

I know that this example uses XSLT, but you should be able to apply the same mechanisms to sublayout and the .net api. There is a couple of articles on the item api here on learnsitecore, which you should checkout. Then you can use that to do the same as in this example.

I hope that helps a little.

Cheers
Jens Mikkelsen
Posted: Tuesday, July 12, 2011 8:36 AM
How do you add background image CSS to your menu

Thanks
Posted: Tuesday, October 18, 2011 5:41 PM
i want to create a webpage in my website, which will show imagelink of 6 different blogs and by clicking on theses links that blog would open fully on my website.
can anyone help me out in this situation?
Posted: Thursday, January 31, 2013 2:00 PM
Hi
I ll try this but its not working...........can u post any document related to this
Posted: Monday, March 10, 2014 1:43 PM
Hi, thanks very much for the work. I am so far finding it very clear, detailed and super helpful!
Posted: Friday, July 04, 2014 11:08 AM
Nice!
Posted: Monday, November 10, 2014 12:16 PM
Hi Jens/Anyone,

how i can download the sitecore application, what is the process? when am trying to download its giving me not authorised to download message.

Can anyone please help me , its really great help to me.

Thanks,
Ranjith.
Posted: Monday, December 15, 2014 1:34 PM

Leave a reply


Notify me of follow-up comments via email.
 
 
#nbsp;