BUILDING WEBSITE STRUCTURE USING TEMPLATES

Templates are the vehicle in which Umbraco delivers content from pre-defined document types (see Chapter 3) to the end user. The templates render not only the content that you save in Umbraco, but also the design elements and markup that you provide for the browser to display. The three major concerns when it comes to templates are

  • Effective separation: One of the most common goals among developers is to develop applications that are easy to maintain and deploy. An important consideration in achieving this goal is the separation of business logic from presentation (the design and output). You accomplish this goal in Umbraco by leveraging .NET master pages and the features they present. This includes nesting and inheritance, covered later in this chapter.
  • Flexible presentation: You should design any web application or website with maximum flexibility in mind. Users demand changes constantly, so the more flexible your layouts are, the easier you can overhaul or make your designs “fresh” while keeping disruptions of the underlying infrastructure to a minimum.
  • Reusability: Finally, as a developer you are constantly striving to be more efficient in how you work. Creating templates that are reusable for multiple scenarios is key.

With these points in mind, let's start looking at how this all applies to Umbraco.

How Templates Build Layout and Structure

When defining the structure of your website, it is important to keep in mind how that structure will map to your templates. This is especially important when it comes to making your master pages as reusable as possible and avoiding code duplication.

Umbraco ships with a base template in the rendering engine. You can find it in the ~/umbraco/masterpages directory in your installation. The following code snippet shows the contents of this file as it is shipped with your Umbraco installation.

<%@ Master Language=“C#” AutoEventWireup=“true” CodeBehind=“default.master.cs”
inherits=“umbraco.presentation.masterpages._default” %>
<asp:ContentPlaceHolder ID=“ContentPlaceHolderDefault” runat=“server”>
</asp:ContentPlaceHolder>

image To avoid the disadvantages of using absolute file and resource paths in controls and master pages, you can implement the paths using the web application root operator (~). .NET uses this operator to resolve the root of the application as it is configured in IIS and the application Web.config.

The default Umbraco master page has but one content placeholder, which is designated to render everything that your templates contain. A ContentPlaceHolder control defines a region for content in a master page, which will render all text, markup, and server controls from a related Content control found in a content page. The Content element is assigned to a ContentPlaceHolder using its ContentPlaceHolderID property. To populate a ContentPlaceHolder of a master page, simply create a Content element and point the ContentPlaceHolderID to the ID of the associated ContentPlaceHolder of the parent master page.

You can now start to think about how to structure and design your templates specific to this installation. The first rule is to always have one “base” template that contains the standard markup and tags of any HTML page. Listing 4-1 shows an example.

LISTING 4-1: SampleBase.htm

image 
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
      “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
    <title>Site and Page Title</title>

    <!-- styles -->
    <link rel=“stylesheet” type=“text/css” href=“~/css/styles.css”
       media=“screen” />

    <!-- scripts -->
    <script language=“JavaScript” type=“text⁄ javascript” src=“~/scripts/bll.js”>
    </script>
</head>
<body>
    <!-- markup, controls, and content of site -->
</body>
</html>

A couple of important considerations before proceeding are that in order to render .NET user controls, covered in Chapter 12, the ContentPlaceHolders that will render the controls must be surrounded by a <form id=“form1” runat=“server”></form> tag. If this tag is not present, .NET user controls will not be rendered at runtime. Also, consider the following content areas as standard for your templates.

  • Head: For manipulating and overriding stylesheet and script files (as well as other custom code).
  • Header: Houses site name, logo, search, and navigation elements.
  • Body: Houses the meat of the rendered page, such as content images and so on.
  • Footer: Houses standard footer information such as copyright, site owner, and so on.

The templates created in Umbraco could match the structure of the document types (refer to Chapter 3). However, in most cases you will find that the structure is not a one-to-one relationship and that some document types don't require templates (like repeatable content items such as news or events). In most cases, you will want to create your templates independent of the document type creation process. However, this is not always the case, as discussed in Chapter 3.

Figure 4-1 illustrates what the most common master page structure will look like. Here you can see how all the child templates of Master.master inherit the markup defined in the topmost template. The standard HTML tags and structure from Listing 4-1 would be added to Master.master and then be available to the lowest child template automatically.

FIGURE 4-1

image

Creating Templates With Umbraco

To create the template structure as described in the previous section, you must log in to the Umbraco user interface (UI) and use the interface to create the templates and associated hierarchies. As a developer, you have the option to work on the templates in a development environment, such as Visual Studio 2010 or Notepad++, after the templates have been generated by Umbraco. This includes creating the database records and associated template IDs, which are referenced later when you save content for use with a particular template.

After logging in, navigate to the Settings section and find Templates in the left-hand tree. To create a new template, follow these simple steps:

  1. Right-click Templates and select the Create menu item, as shown in Figure 4-2.

    FIGURE 4-2

    image

  2. In the Create dialog, type the name of your template (without the .master extension)—in this case Master.
  3. Click Create.

The page now reloads and the code editor displays with the bare-bones Master.master templates loaded, as shown in Figure 4-3. The template properties you see are

  • Name: This is the name of the template as it is saved in the database and on the file system.
  • Alias: The name used to reference the template when working with the Umbraco API.
  • Master Template: Allows you to choose the master template from which to inherit.

FIGURE 4-3

image

As you can tell from Figure 4-1, you have no reason to specify a master template because the one you're creating now is the root master page from which all or at least most other templates will inherit.

For subsequent templates, the process is much the same, the difference being that instead of right-clicking Templates, you might right-click the template that you want to create a child template in. However, before you do that, you must create the ContentPlaceHolder controls so that your inherited template knows which ContentPlaceHolderIDs to target.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset