Placeholder Types
| In CMS, there are three intrinsic placeholder controls and six definitions. Each placeholder control has a corresponding placeholder definition. The HTML and attachment placeholder controls can also be bound to the OfficeHtmlPlaceholderDefinition and OfficeAttachmentPlaceholderDefinition, respectively. The last placeholder definition type, the XMLPlaceholderDefinition, does not have a corresponding control. The most common use for this placeholder definition is in the development of custom placeholders. For more information on developing custom placeholders, refer to Chapter 29. Each placeholder has its own "specialty" when it comes to content. Depending on the solution, one or more of these placeholders may be added to your templates. In the following sections, we'll discuss each of the three intrinsic controls and their corresponding definitions. Because of the overlap between each of the placeholder controls, we're only going to cover the differences between placeholders. For example, we'll cover a lot of background on the HTML placeholder but won't repeat the same information for the other placeholder controls unless there are significant differences. HTML PlaceholderIf any placeholder could be called the "bread and butter" placeholder, it would be the HTML placeholder. The HTML placeholder is probably the most commonly used placeholder in CMS, since it will generally accept any kind of content from HTML content (as the name suggests) to attachments (files uploaded to CMS) to images with no trouble at all. General UsageHTML placeholders can be used in a number of situations. Most commonly, they're used as a "big bucket" for content. In other words, since HTML placeholders can accept any kind of content, they're often used to allow content contributors to contribute a fairly wide variety of content. When template designers don't know the actual structure of the contributed content or feel that the structure is too complex to handle programmatically, they'll often provide one HTML placeholder configured to accept any content. Although this is one approach, we don't recommend it, but it does work in some cases. In Figure 13-1, we show two HTML placeholders in the BOTS Consulting site. These two placeholders happen to be located on the press release template. If you look at the upper right corner of a placeholder, you should notice different icons. These icons provide a pictorial guide to the type of content that may be added to the placeholder. Each icon represents a specific setting for the placeholder. These settings determine what types of content can be contributed to the placeholder and how that content can be manipulated. For example, the first placeholder, the Press Release Body Copy placeholder, is configured to accept plain text, HTML styles, and hyperlinks. The second placeholder, Disclaimer Text, is configured to accept plain text, text markup, and hyperlinks. Although all placeholders have a version of these icons, the HTML placeholders have the most varied combination of potential icons. Figure 13-1. HTML placeholders in the BOTS press release template
Depending on how the placeholder is configured, HTML placeholders will generally accept any content or formatting. Refer to Figure 13-1 again. Look near the top of the screen shot. Notice the two new toolbars. These toolbars are similar to any Office toolbar you may have seen in the past. These toolbars, for the HTML placeholder, provide the basic formatting options available to the content contributor. If you look closely at Figure 13-1, you'll notice that most of the buttons are grayed out. Based on the settings in the placeholder definition and the placeholder control, CMS will automatically eliminate functionality that is disabled. Now, if we move our cursor to the second placeholder, for the disclaimer text, notice how the toolbar changes in Figure 13-2. Notice that the drop-down list that showed Normal is grayed out now, and the B, I, and U buttons (for bold, italics, and underline) are enabled. Should a contributor add content that has invalid (disallowed) formatting applied (i.e., copying and pasting content), the formatting will be stripped out during the save operation (although it will initially appear as if the formatting were accepted). Figure 13-2. The IE toolbars connected to the HTML placeholder
Now, let's take a look at another HTML placeholder that is set up to accept more formatting and content. In Figure 13-3, you'll see the Case Study Detail template. This template has two placeholders, both HTML. Looking at the Case Study Body Copy placeholder, you'll notice that the icons in the upper right corner indicate the additional types of content that can be contributed to this placeholder. The two paperclip icons (yes, they're paperclips) indicate that you can contribute attachments. In other words, a content contributor can upload one or more files to this placeholder. Each file or "attachment" will be displayed as a link. In addition, this placeholder allows images to be contributed in a similar fashion; the placeholder will accept one or more images. Unlike the attachment, when an image is contributed, it will automatically appear inside the placeholder. In Figure 13-4, you can see the same posting with an image and an attachment contributed. Figure 13-3. A BOTS Consulting case study with the placeholder exposed
Figure 13-4. An image and an attachment contributed to the HTML placeholder
Now that you have a sense of what an HTML placeholder looks like in a template, let's take a closer look at how you set up this particular type of placeholder. SetupAll placeholders in a template are really two objects: a placeholder definition in the template gallery item (TGI) and a placeholder server control. The setup of a placeholder is a combination of two of these objects (and is generically referred to as simply "a placeholder"). It doesn't matter which element you start with, since you need both for the placeholder to function properly. In our case, we'll review the placeholder control first and then review the placeholder definition. All placeholder controls are located in the Toolbox in VS.NET. There are only three intrinsic placeholder server controls: HTML, Attachment, and Image. The HTML placeholder control is used with the HTMLPlaceholderDefinition and the OfficeHTMLPlaceholderDefintion. In Figure 13-5, you'll see a shot of the Toolbox in VS.NET listing the three controls we just mentioned. Keep in mind that the controls are only visible in the Toolbox if you're in Design view when reviewing a template file. Figure 13-5. The intrinsic placeholder controls in the VS.NET Toolbox
If we want to add a placeholder to a template, we simply drag and drop that placeholder to the Web form. In doing so, a new object appears on our form. In our example, we created a new template file called "sample" to allow us to play with the placeholders. Once you've added your placeholder control to your template file, you can click it to see the object properties. Figure 13-6 shows the various properties that can be set at the object level, and the following list explains each setting.
Figure 13-6. The properties of an HTML placeholder in VS.NET
Now that we know the various object-level settings that we can apply to a placeholder, let's examine the placeholder definition for an HTML placeholder. To begin, switch to the Template Explorer in VS.NET. In our template gallery, we've created a corresponding TGI to match our new sample template. We used the same name for our TGI (sample). Once you've created the new TGI, find the property PlaceholderDefinitions. Click the ellipsis next to that property, and you should see the Placeholder Definition Collection Editor, shown in Figure 13-7. Figure 13-7. The Placeholder Definition Collection Editor
If you've been reading this book from the beginning, you'll likely recognize this interface from Chapter 12. If you haven't been reading from the beginning, then it's new to you. In any event, this interface is the tool that you'll use to create the various placeholder definitions for each of your placeholder objects. You'll end up adding one placeholder definition to the collection for each placeholder control on your template. Let's create a placeholder definition for the HTML placeholder we added earlier. To do so, simply click the Add button. Even though there are six placeholder definition types, CMS will create an HTML placeholder definition by default. If you want to create a different type, you can click the down arrow at the right of the Add button. Once you've created your new definition, you should see something like Figure 13-8. Figure 13-8. A new placeholder definition in the Placeholder Definition Collection Editor
Once you have your new placeholder definition, you can begin to set the various properties for the definition. The settings for the HTML placeholder definition are explained in the following list.
Design ConsiderationsHTML placeholders can provide a tremendous amount of flexibility. However, there are several design considerations you should take into account when developing your template.
NOTE: If the properties of the placeholder are changed on an existing template and made more restrictive, the original content will continue to be displayed until that page is edited. Once the page is edited, the old content will be displayed for authoring, but on save, the now invalid formatting will be stripped out. Single Attachment PlaceholderThe single attachment placeholder (attachment placeholder) is used to allow content contributors to upload files to a posting. In truth, the attachments may not always be uploaded directly from the contributor's machine to a posting; essentially, the attachment placeholder allows content contributors to display a link to a file within the context of their posting. The actual file could be stored in a resource gallery, or it could have been uploaded from a local source directly to the posting. Either way, the attachment will reside in the CMS repository once it has been contributed (preventing broken links). In Figure 13-9, an attachment placeholder is shown on the attachment template for BOTS Consulting. Figure 13-9. An attachment placeholder on the attachment template in BOTS Consulting
General UsageThe attachment (or single attachment) placeholder is useful in a number of situations. At a very basic level, it's useful for allowing content contributors to upload files to CMS. Unlike the HTML placeholder, however, the attachment placeholder only allows one file per placeholder. However, this is only part of the story. It's also possible to use the attachment placeholder to integrate Flash (Macromedia) into your design. A user can contribute the Flash movie to the placeholder, and then the template will extract the resulting link to integrate with an object tag in the HTML SetupAs you saw in Figure 13-9, the attachment placeholder looks quite different from the HTML placeholder. As with the HTML placeholder, a paperclip indicates an attachment, except that in the case of the attachment placeholder, the paperclip is a button in the upper left. This button also allows you to choose the attachment the placeholder will hold. You'll also notice that there are other buttons located in the upper left. The button immediately to the right of the paperclip allows content contributors to set the display name of the attachment, and the last button (the X) allows content contributors to clear the value in the placeholder. Let's switch to VS.NET and explore the attachment placeholder object. We're using the same sample template we used when talking about the HTML placeholder. In this template, we've now added an attachment placeholder. In Figure 13-10, you can see the template with both the HTML and attachment placeholders added to the Web form. Notice that there isn't any visible difference, except that the label on the control is SingleAttachmentPlaceholder. Figure 13-10. An attachment placeholder on the sample template
The single attachment placeholder shares most of the same properties as the HTML placeholder properties. In fact, the attachment placeholder has fewer properties, since there's much less flexibility to determine display characteristics. Most notably, there aren't any height and width properties; attachment placeholders are always the same size. However, even though we have a placeholder definition for our HTML placeholder, if you use the drop-down list for the PlaceholderToBind property, you'll notice that the HTML placeholder definition isn't listed. Again, this property will only list compatible types. In the case of the attachment placeholder, the only compatible definition types are AttachmentPlaceholderDefinition and OfficeAttachmentPlaceholderDefinition. Once we've created the new placeholder definition, let's look at each of the properties. The following list provides a brief explanation of each.
Design ConsiderationsThe attachment placeholder is a pretty simple animal. However, there are some design considerations that you should be aware of when developing templates with this placeholder type.
Single Image PlaceholderThe image placeholder allows content contributors contribute images to a posting. As with the attachment placeholder, this object is used when you want to have a single object in a container, as opposed to having multiple images or attachments in an HTML placeholder. In Figure 13-11 you can see what a single image placeholder looks like in the BOTS Consulting site. In this case, the image placeholder is used as a call-out image on the General template. Figure 13-11. A single image placeholder in the BOTS Consulting site
General UsageOverall, single image placeholders are useful when you need to allow a content contributor to provide a single image for an element of a page. This sounds a little obvious, but like the attachment placeholder, this is really the "single" alternative to allowing multiple attachments or images in an HTML placeholder. This is not to suggest that if you have a single image placeholder on a template, you only need one image. In fact, you can effectively have more than one image placeholder on a template. It's very likely that you will prefer this design, since it provides a lot more control over the visual design of your end page. The single image interface is similar to that of the attachment placeholder. Notice that at the upper left of the placeholder, there are three buttons. The first button indicates that this is an image placeholder (although the "place picture here" default image probably gave it away as well). It also allows you to browse to the image that you want to add to the placeholder, in the same way that the attachment placeholder did. The next two buttons provide the ability to change the ALT attribute for the resulting image tag and to clear the placeholder contents. Let's switch to VS.NET and explore the properties of this placeholder object. SetupIn Figure 13-12, you can see what the image placeholder object looks like in VS.NET. Figure 13-12. The single image placeholder in the sample template
Again, there isn't any visual difference beyond the label that CMS provides on the object. However, there are some differences with regard to the properties. The image placeholder allows you to size the display height and width. Unlike with the HTML placeholder, these settings don't affect authoring, but they do affect the live site view. In essence, the properties DisplayHeight and DisplayWidth control the scaling of the image; physically, these properties are represented as the height and width attributes of the resulting image tag. Now, let's look at the single image placeholder definition. Open the Placeholder Definition Collection Editor and create a new image placeholder definition. Remember to use the down arrow next to the Add button to add a definition other than an HTML definition. In Figure 13-13 we've provided a screen shot of the Placeholder Definition Collection Editor. Figure 13-13. The Placeholder Definition Collection Editor with the new image placeholder definition
In the definition there are several properties of note. The following list provides a brief description of each.
Design ConsiderationsAs with the single attachment placeholder, the single image placeholder is a pretty straightforward control. However, here are some design considerations for when you develop your template.
|
EAN: 2147483647
Pages: 298