CUSTOM RENDERING OF ZONES in VS .NET

Generate Data Matrix in VS .NET CUSTOM RENDERING OF ZONES

The tools described in this section enable us to customize zone output to a greater degree than you can using styles. To view this higher degree of customization, take a look at figure 5.3, which shows the CatalogZone from SharePoint. The SharePoint gallery is similar to the ASP.NET CatalogZone, in that it lists each gallery (Catalog) in the top half of the zone and allows a user to select a gallery. When a gallery is selected, the web parts contained within the gallery are displayed in the lower half of the zone. The SharePoint Gallery contains some unique features that cannot be achieved purely through the use of styles, such as

Figure 5.3 The CatalogZone in SharePoint provides elements for paging and filtering which cannot be achieved by simply specifying styles.

Web Parts appear in a pageable list. A Filter allows web parts to be filtered. There is even spacing between the name of each gallery and the number of parts contained. In order to achieve these types of effects within our own zones, we must resort to customizing the rendering process of the zone rather than simply applying styles. Throughout the next section we ll learn which methods must be overridden to custom render zones, and we ll see some code samples for doing so. 5.3.1 The structure of zones Before the discussion on styles I mentioned that, in addition to providing common styles for zones, the WebZone class also provides methods to control the rendering of specific areas within a zone; because of this all zones share the layout shown in figure 5.2. As we can see in figure 5.4, all zones actually have a header, footer, and a body section. The header generally displays the title, the body contains the parts exposed by the zone, and the footer contains additional controls. Looking at figure 5.5, we can see how this layout is applied to a CatalogZone control. The CatalogZone shown in figure 5.5 is a good example of how zones use their header and footer space to render titles, verbs, and optionally any other helper controls that may be useful to serving the needs of the zone. In the case of the CatalogZone, we see that the title of the zone and a Close verb are rendered in the header, while the footer contains a selector control which lists the zones con- Figure 5.4 Each zone has three major tained on the page and two verbs: one for sections which are enforced by renderadding web parts to the selected zone and one ing methods contained within the base WebZone class. to close the catalog zone.

Figure 5.5 The CatalogZone uses its footer section to provide controls that allow the user to choose where to add web parts on the page.

Rendering the header, body, and footer The WebZone base class provides the following methods that can be overridden to control the rendering of zones:

By overriding any or all of these methods we can provide complete customization over the appearance of zones by directly emitting our own custom HTML as the rendered output. To fully understand this, consider what happens when we do not customize these methods and therefore get the base implementation of them. In the base implementation of the RenderContents method, an outer table is created and then the RenderHeader, RenderBody, and RenderFooter methods are called to display those sections of the zone within the table. This gives us the structure shown in figure 5.4. When customizing zones by using custom rendering, we first choose which section of the zone we are customizing and then override the relevant method. For example, let s say we wanted our zones to exist within HTML DIV elements rather than HTML tables. By overriding the default behavior of the RenderContents method, a different HTML tag could be used to contain the zone such as a DIV. Likewise, if we have some special requirements for displaying custom user interface elements to the user from within our zone, we can override any of the rendering methods to insert our logic. For example, to create a totally custom footer section within a zone we simply create a class that inherits from the zone type that we want to customize, and then override the RenderFooter method this way:

public class ListCatalogZone : CatalogZone { protected override void RenderFooter(HtmlTextWriter writer) { // Custom footer rendering code goes here... } }

By overriding the RenderFooter method in this manner we are free to use the HtmlTextWriter to add any rendering code we please or even to not render anything, and therefore remove the footer rendering from the CatalogZone altogether. Although taking ownership of the render process for sections of the zones makes it possible to provide a totally unique interface for our zones, taking ownership can also be an onerous task. For example, if we overrode the RenderBody method for the CatalogZone, we would be undertaking the responsibility of rendering the following: