DEFINING MARKUP

It's time to do some coding! Theory is great, but practice makes perfect.

Listing 4-2 and subsequent code listings in this section all build on one another to the final, complete solution at the end of the section. For the time being, you'll write your code using the Umbraco in-browser code editor.

Creating Markup Using the Umbraco UI

A few approaches exist for working with the master page files. As a programmer you might prefer working on the files in Visual Studio, especially if you're interested in leveraging tools such as IntelliSense and Source Control integration. You can also do it all via the Umbraco UI code editor. If you are brand new to the CMS, I recommend starting in the Umbraco editor to take advantage of the provided toolbar, as shown in Figure 4-4, which helps you insert code snippets and functions that you would otherwise not know about. This allows you as a user to insert <asp:ContentPlaceHolder> tags and label them, reference those placeholders in your child template, and let Umbraco show you the IDs of those placeholders to avoid typos and other mistakes.

FIGURE 4-4

image

So, in the Master, follow these steps:

  1. Click the Insert content area placeholder icon, as shown in Figure 4-5.

    FIGURE 4-5

    image

  2. Name the container and click the Insert button, as shown in Figure 4-6.

    FIGURE 4-6

    image

  3. Repeat steps 1 and 2 for all the required content placeholders that you want to define. In this example, you add three additional placeholders before moving on to the next step: targeting the placeholders with content from child template(s).

Creating the Master Base Template

Starting at the top, you'll add some ContentPlaceHolder controls to the Master base template.

image To work with your code outside of the Umbraco backoffice UI, please refer to Appendix B, which goes through a detailed setup of an Umbraco development environment in Visual Studio 2010.

LISTING 4-2: Master.master

image 
<%@ Master Language=“C#” MasterPageFile=“~/umbraco/masterpages/default.master”
AutoEventWireup=“true” %>

<asp:Content ContentPlaceHolderID=“ContentPlaceHolderDefault” runat=“server”>
<!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>Umbraco User's Guide</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>

    <!-- ContentPlaceHolder: Head -->
    <asp:ContentPlaceHolder ID=“HeadContentCtr” runat=“server” />
</head>
<body>
    <div id=“header”>
        <img src=“~/images/log_uug.png” alt=“Umbraco User's Guide” />

        <!-- ContentPlaceHolder: Header -->
        <asp:ContentPlaceHolder ID=“HeaderContentCtr” runat=“server” />
    </div>
    <div id=“body”>
        <!-- ContentPlaceHolder: Body -->
        <asp:ContentPlaceHolder ID=“BodyContentCtr” runat=“server” />
    </div>
    <div id=“footer”>
        <!-- print the year dynamically -->

        &copy; <%= DateTime.Now.Year %>

        <!-- ContentPlaceHolder: Footer -->
        <asp:ContentPlaceHolder ID=“FooterContentCtr” runat=“server” />
    </div>
</body>
</html>
</asp:Content>

Notice the following about this code:

  • You're using the aforementioned Umbraco Master page default.master as the master page.
  • Both the <asp:Content /> and the <asp:ContentPlaceHolder /> controls are introduced here to populate the placeholder defined in default.master as well as to define regions that you'll populate from the child templates later on.

image Depending on the configuration settings of your Umbraco installation you may notice syntax highlighting and line numbers displayed as in standard editors. You can turn this option on or off depending on your preferences. You can find this setting in <install root>/config/umbracoSettings.config.

Creating the Textpage Template

The “master” template is now done and contains the underlying markup and layout code that is needed to produce the website design. However, at this point, you're still not showing any content. Even if you applied this template to a document type and ran the page, you would see nothing. The reason for this is that so far all you have done is create the general structure of the website. What are missing are the Umbraco content tags and macros that will ultimately render the content from the CMS.

Now take it one step further and create the Textpage template. This template will be a nested master page within the Master (see the section “Nesting and Inheritance with ASP.NET Master Pages” later in this chapter for further clarification) that you just created. Furthermore, the content specified in this master page will fill the ContentPlaceHolders that were defined in the Master.master and TextPage.master. Creating the Textpage involves the following steps:

  1. Once again, while logged into the Umbraco backoffice, navigate to the Settings section.
  2. Expand the Templates node and right-click on the Master template to create a new child template called Textpage.

    After the right-hand pane reloads, you will see that you now have the Master template set to “Master” and the template itself is rather empty, with the exception of the following:

    <%@ Master Language=“C#” MasterPageFile=“~/masterpages/Master.master”
    AutoEventWireup=“true” %>
  3. To build on this template and make it usable, that is, display something, you must populate the ContentPlaceHolders and reference content from your Umbraco document types. Now it's time to add some <asp:Content> tags that you can later fill with dynamic content from the CMS (see Listing 4-3).

LISTING 4-3: Textpage.master

image 
<%@ Master Language=“C#” MasterPageFile=“~/masterpages/Master.master”
AutoEventWireup=“true” %>

<%-- Populate the header container --%>
<asp:Content ID=“HeaderContent” ContentPlaceHolderID=“HeaderContentCtr”
runat=“server”>
    <h1>Umbraco User's Guide - The Friendly CMS</h1>
</asp:Content>

<%-- Populate the body container --%>
<asp:Content ID=“BodyContent” ContentPlaceHolderID=“BodyContentCtr”
runat=“server”>
    <h2>The Page Title</h2>

    <p>Some page content here.</p>
</asp:Content>

image Any and all ContentPlaceHolders are optional. As Listing 4-3 shows, the text page templates only utilize the HeaderContent and BodyContent ContentPlaceHolders. You can set default content for these placeholders by adding to them in the template. For example, the footer of the website may contain a copyright notice. If this is standard on 90 percent of your pages, just add that to the tag. Then, on pages where this changes, simply set the value where needed.

<asp:ContentPlaceHolder ID=“FooterContentCtr” runat=“server”>
    &copy; <%= DateTime.Now.Year %>
</asp:ContentPlaceHolder>

Populating the Placeholder for the Textpage.Master File

Follow these steps to populate the content placeholders from the Textpage.Master file that you just defined in the Master:

  1. Navigate to the Textpage.Master file, located in the Templates node.
  2. Click the Insert content area icon, as shown in Figure 4-7.

    FIGURE 4-7

    image

  3. In the Insert content area dialog, choose the content placeholder that you want to add content to in the current child template, as shown in Figure 4-8.

    FIGURE 4-8

    image

Even though a content placeholder exists in a parent master page, it's not mandatory to populate it from all child templates. A perfect scenario where you may have completely optional placeholders is the HeadContentCtr that you specified earlier in this chapter. You can use it to inject things such as page- or template-specific JavaScript or CSS file references or anything else that may belong in the head tag, but not on a global level.

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

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