Creating a Template File

Once you have your framework established, it's time to begin the physical creation of the template file. The template file is where all of your code and controls will be placed it's the container for the specific site and CMS elements that will make up the physical template. Also, you'll want to create a project structure that helps you organize all the controls and templates you may create for your project. This is not a requirement, but it will make your life easier as you develop your CMS site. In Figure 12-9, you'll see the structure that we're using for our BOTS Consulting project. Your project structure may be different, but we've found that the organization shown works very well.

Figure 12-9. A basic organizational structure for a CMS project

ASPX or ASP?

CMS 2002 can use either an ASPX or an ASP file. This book only presents examples using ASPX and .NET. However, if you're upgrading an existing CMS 2001 site or simply wish to use ASP 3.0, you can.

Now that we have some organization to our project, let's create our first template ASPX page. The first step is to select the template folder we have in our project. Simply right-click that folder, pick Add, and then pick Add New Item from the list. The resulting dialog box will have a choice for Content Management Server (shown in Figure 12-10). After clicking the Content Management Server option in the left column, choose the MCMS Template File object type in the right column (it's the only choice). Be sure to change the name of your template in the Name field in the dialog (otherwise, you'll end up with a really unattractive and not terribly descriptive template name). After you click OK, VS.NET will add the new ASPX file to your templates folder in your project.

Figure 12-10. The Add New Item dialog has a choice for Content Management Server.

You've just created your first template file! Now what? To begin, let's review the TGI that we created earlier. When we talked about TGIs in Chapter 10, we created the generic TGI to support the ASPX page that has yet to be created. Now that you have your ASPX page, we should revisit that TGI and fix the "broken" icon.

The first thing we need to do is to save the new ASPX file and then point the TGI to the ASPX page you've just created. Click the Save icon in the VS.NET toolbar and then open the Template Explorer window (or tab over to it) and find your generic TGI. Once you've located your generic TGI, make sure it's checked out. If the TGI has a red check mark on it, it's checked out. If it's not checked out, just right-click the object and pick Check Out from the context menu. Now, locate the TGI property TemplateFile. If you select this property, you'll see the familiar ellipsis icon appear. This allows you to browse your server to locate the template file. Locate the templates folder you created and then click the template you just created; we called our template "generic" to match the TGI, but you may have used a different name (the choice is up to you). Once you've chosen the template file, simply click OK, and you should end up with a property view similar to Figure 12-11.

Figure 12-11. The TGI property view with the newly selected template file

Once you've completed this process, the icon next to your TGI should be whole. This indicates that your TGI is tied to a physical template file. Once this is done, it's a good idea to save your TGI by right-clicking the TGI and picking Save from the menu.

Adding Components to Your Template File

At this point, you may be thinking to yourself, "Besides the association with the TGI, how is a template file different from a typical ASPX page?" That's a good question. Fundamentally, there isn't any difference. The real departure from a typical ASPX page is the inclusion of certain standard CMS controls (server and user) that make a typical ASPX page a CMS template file and how the ASPX page is processed at runtime.

So what are the components? The first one is a user control that we saw in Chapter 10 when you created your CMS project. It's the default console (also called the edit console). The console is the interface that your content contributors will be interacting with when they're contributing content, approving content, submitting content for approval, looking at the revision history, or accessing other CMS functionality from within a Web browser. In fact, without the console, your template is useless to your content contributors. Although you might be able to make the template available to your content contributors, they'd never be able to save the content they entered, since that function is on the console!

Adding the console to your template file is pretty easy. In your Solution Explorer, locate the "console" folder. It's included by default in all CMS projects (later in the book, we'll talk about how to customize it, so you can ignore the design of the console for the moment). Once you've located it, just left-click the control and drag it to your template file (be sure to be in the Design view). After you've dragged the console to your template, you should see something like Figure 12-12.

Figure 12-12. A blank template file with the edit console

NOTE: VS.NET likes to create new ASPX files with the grid layout enabled. Unfortunately, the console doesn't allow for absolute positioning natively. As a result, you'll want to turn off the grid layout. Just remove the MS_POSITIONING="GridLayout" attribute from the BODY tag in the HTML view. If you don't turn off the grid layout, the console may overlap other elements (such as placeholders) when the template is rendered. Using flow layout can also be set as a default in VS.NET.

Customized Edit Console

There are several customized versions of the standard edit console floating around the Internet. Microsoft's MSDN site contains an article about a floating edit console, and http://www.gotdotnet.com has several downloadable edit consoles.

After you've added the console, you can begin to add placeholder controls. The placeholder controls render as the content entry elements we saw earlier in the chapter. They are also tied to the placeholder definitions you created in your TGI. To add a placeholder control to your template, switch to Design view, open the Toolbox, and look for the Content Management Server section, shown in Figure 12-13.

Figure 12-13. The Content Management Server Toolbox with the three placeholder controls

Notice that there are three server controls. These are the three controls that ship with Content Management Server. Each roughly matches to the major placeholder types we explored briefly when creating the TGI (we talked about six placeholder types all but the image, XML, and attachment types map to the HTMLPlaceholderControl). In this example, drag an HTMLPlaceholderControl to the template. After you've done this, your template should look roughly like Figure 12-14.

Figure 12-14. The generic template with the controls added

The next step is to bind the placeholder control to the placeholder definition in the TGI. Just click the placeholder control in your template. In the Properties view of the control, locate the property PlaceholdertoBind. When you click the property, you'll be given a drop-down list of all available placeholder definitions that are compatible with the placeholder control selected. CMS is smart enough not to present you with an image placeholder definition if you've selected an HTML placeholder control. From the list, select the placeholder definition you added in Chapter 10. Once you've done that, you'll notice that a new design-time element is added to your placeholder control: the placeholder definition name in brackets. This indicates that you have successfully bound the placeholder control to the placeholder definition.

NOTE: If the drop-down list does not show any placeholders, you've either chosen the wrong template file (ASPX) page in your TGI properties, or you haven't committed the changes to the TGI by saving it.

In our example, we've taken the liberty of finishing our generic template. We started by using the basic HTML framework we created earlier. We then created a header control (as we mentioned earlier) as well as a footer and a side navigation control (for in-channel navigation). After creating those controls, we added them to our template, along with our placeholders and console. In Figure 12-15, you can see what the completed template looks like in Design view.

Figure 12-15. The completed generic template in Design view

Templates aren't always pretty in Design view. In fact, we very often have to "preview" them to see what they'll look like. Luckily, CMS provides a preview feature for templates in our solution. To preview what your template would look like if it were a page in your site, switch to the Template Explorer window. Locate your template and right-click the TGI. From the context menu, pick Browse In Presentation Mode. Although this view won't show you a fully rendered page with content, it will allow you to see what a page, based on this template, might look like in your site.

NOTE: When CMS renders a template in this way, any navigation you've built will render fictitious channels and postings. This is a feature of CMS that provides a richer view of your template so that you may see what your navigation might look like as well.