ZenLayout Class

ZenLayout is an ASP.NET WebControl which opens up a whole new way of specifying and building Rainbows pages and sites. It is the principal element used to construct a Design Layout for a Rainbow web site. It accepts up to five templates, only one of which (CenterColTemplate) is effectively required. Since the other four (HeaderTemplate, LeftColTemplate, RightColTemplate and FooterTemplate) are optional, this gives tremendous flexibility in page layout. A page can consist of just a CenterColTemplate, plus optionally any combination of the other templates. For example:

<zen:ZenLayout>
    <LeftColTemplate>...</LeftColTemplate>
    <CenterColTemplate>...</CenterColTemplate>
</zen:ZenLayout>

would produce a page with just two columns, with no header and no footer.
To produce a 'classic Rainbow' page with header, three columns and footer, you would use:

<zen:ZenLayout>
    <HeaderTemplate>...</HeaderTemplate>
    <LeftColTemplate>...</LeftColTemplate>
    <CenterColTemplate>...</CenterColTemplate>
    <RightColTemplate>...</RightColTemplate>
    <FooterTemplate>...</FooterTemplate>
</zen:ZenLayout>

Each template can contain any number of Zen, Rainbow, ASP.NET or third-party WebControls or even 'fixed' HTML elements and text. There are currently four new WebControls provided with Zen:

ZenContent	The ZenContent control is used to fill it's containing Template area with Rainbow Modules. The 'Content' attribute tells Zen which PaneName to look for. For example, if the 'Content' attribute is set to 'RightPane' then the parent template will receive any modules that are marked 'RightPane' in the Rainbow configuration for the current tab. It stands to reason that this ZenContent control should be enclosed within the RightColTemplate. This would be so for current 'normal' Rainbow behaviour. Nevertheless, the pane names used by Zen are not hard-coded. Zen reads through the current tab configuration and simply creates a list of PaneName values that it finds (with a count for each). Currently it is only ever going to find LeftPane, ContentPane and RightPane since those are the only values that Rainbow can currently assign. But Zen will keep up with Rainbow's development automatically: as soon as there is a way to assign other values to PaneName (e.g. 'Header', 'Footer' or even 'LowerRightAdvertisingPanel') then Zen will 'detect' the new value and allow you to fill a template area with those modules by specifying: Content="LowerRightAdvertisingPanel". Until that is possible, the only valid values for the 'Content' attribute are: LeftPane, ContentPane or RightPane.
ZenHeaderTitle	The ZenHeaderTitle control replaces both HeaderTitle and HeaderImage controls. It creates a specific HTML structure: <h1 id="portaltitle" class="portaltitle">Rainbow Portal<span></span></h1> This HTML is intended to be 'worked on' by a specific CSS technique called 'Levin Image Replacement'. You'll notice that there is no reference to the HeaderImage in the HTML output: the image is specified in the current Theme's CSS and effectively 'overlays' the text, thus hiding it. See details of this elsewhere in the Zen documentation.
ZenHeaderMenu	The ZenHeaderMenu control inherits from the regular Rainbow.HeaderMenu and overrides its Render to produce a Zen-specific HTML output: <div class="..."> <ul class="zen-hdrmenu-btns"> <li><a href='...'>...</a></li> <li><a href='...'>...</a></li> </ul> </div> <div class="..."> <ul class="zen-hdrmenu-labels"> <li>...</li> </ul> </div> Notice that link items and plain-text items are separated so they can be treated individually by the CSS. The CSS Class for each <div> can be set using the ButtonsCssClass and LabelsCssClass attributes of ZenHeaderMenu. Through inheritance, the normal range of Rainbow attributes can also be set (e.g. ShowLogon, ShowSaveDesktop, etc.).
ZenNavigation	The ZenNavigation control implements the Rainbow INavigation interface to produce horizontal or vertical menus. The actual output is a nested <ul> (unordered list). Through the magic of CSS, this can be displayed as a drop-down or pull-out menu. This feature is still a little experimental and may change in the near future: I'm experimenting with CSS techniques and may need to add more 'class' attributes within the output structure.

The output of the ZenLayout control is a complex hierarchy of <div> elements, within which will be contained any other controls specified in the Layout. The <div> hierarchy has a number of specific features:

Rather obviously it doesn't contain any <table> structures: the final appearance of the page is entirely determined by the CSS applied to it.
The 'source order' of the template areas in the output HTML is: Header, CenterColumn, LeftColumn, RightColumn, Footer. This has obvious benefits for Search Engine Optimization (SEO), since a spider will read the main content (assumed to be in the center column) before it encounters the left column content. It also greatly improves the 'accessibility' of the page by presenting the page contents in an order which is more logical to ScreenReaders and browsers without CSS capability or with such capability disabled. Much of the apparent complexity of the structure is specifically to enable this 'trick'.
The HTML elements used to create the page are 'semantically meaningful' (e.g. <h1> for the PortaTitle, <ul> for navigation lists, etc) or 'semantically neutral' when their sole purpose is layout (e.g. <div>). This is essential for true Section 508 or Accessibility Guidelines compliance.
The various CSS classes which are assigned within the hierarchy are always prefixed with 'zen-' in order to ease the process of designing a site with CSS alone. Each 'area' of the layout is 'marked' with a specific CSS class name which makes it easy to control the appearance of elements within that area. For example, if you want the default paragraph text color in the left column to be 'red' then you'd add the CSS rule:
```
.zen-col-left p { color: red }
```

By combining these four controls with the ZenLayout control you have a flexible, extensible means for specifying the structure of a Rainbow page. The page's appearance is entirely controlled through the application of CSS rules. The page is compact, fast, Search Engine friendly and highly accessible. The only challenge is to learn a new programming language (CSS) in order to make full use of it!

For a list of all members of this type, see ZenLayout Members.

System.Object
   Control
      WebControl
         ZenLayout

[Visual Basic]
<(ChildControlType:=System.Web.UI.Control, ChildrenAsProperties:=True), _
 (Themeable:=True), _
 (Persist:=False, UsesCustomPersistence:=False), _
 (Bindable:=True, Direction:=BindingDirection.OneWay), _
 (FilterString:="System.Web.UI", FilterType:=ToolboxItemFilterType.Require), _
 (DesignerBaseTypeName:="System.ComponentModel.Design.IDesigner", DesignerTypeName:="System.Web.UI.Design.ControlDesigner, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"), _
 (Category:="Code"), _
 (ToolboxItemType:=System.Web.UI.Design.WebControlToolboxItem, ToolboxItemTypeName:="System.Web.UI.Design.WebControlToolboxItem, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"), _
 (SerializerTypeName:="Microsoft.VisualStudio.Web.WebForms.ControlCodeDomSerializer, Microsoft.VisualStudio.Web, Version=8.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a", SerializerBaseTypeName:="System.ComponentModel.Design.Serialization.CodeDomSerializer, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"), _
 (Name:="ID")>
Public Class ZenLayout
    Inherits WebControl
    Implements 
[C#]
[(ChildControlType=System.Web.UI.Control, ChildrenAsProperties=True)]
[(Themeable=True)]
[(Persist=False, UsesCustomPersistence=False)]
[(Bindable=True, Direction=BindingDirection.OneWay)]
[(FilterString="System.Web.UI", FilterType=ToolboxItemFilterType.Require)]
[(DesignerBaseTypeName="System.ComponentModel.Design.IDesigner", DesignerTypeName="System.Web.UI.Design.ControlDesigner, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a")]
[(Category="Code")]
[(ToolboxItemType=System.Web.UI.Design.WebControlToolboxItem, ToolboxItemTypeName="System.Web.UI.Design.WebControlToolboxItem, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a")]
[(SerializerTypeName="Microsoft.VisualStudio.Web.WebForms.ControlCodeDomSerializer, Microsoft.VisualStudio.Web, Version=8.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a", SerializerBaseTypeName="System.ComponentModel.Design.Serialization.CodeDomSerializer, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a")]
[(Name="ID")]
public class ZenLayout : WebControl, 
[C++]
[(ChildControlType=System.Web.UI.Control, ChildrenAsProperties=True)]
[(Themeable=True)]
[(Persist=False, UsesCustomPersistence=False)]
[(Bindable=True, Direction=BindingDirection.OneWay)]
[(FilterString="System.Web.UI", FilterType=ToolboxItemFilterType.Require)]
[(DesignerBaseTypeName="System.ComponentModel.Design.IDesigner", DesignerTypeName="System.Web.UI.Design.ControlDesigner, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a")]
[(Category="Code")]
[(ToolboxItemType=System.Web.UI.Design.WebControlToolboxItem, ToolboxItemTypeName="System.Web.UI.Design.WebControlToolboxItem, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a")]
[(SerializerTypeName="Microsoft.VisualStudio.Web.WebForms.ControlCodeDomSerializer, Microsoft.VisualStudio.Web, Version=8.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a", SerializerBaseTypeName="System.ComponentModel.Design.Serialization.CodeDomSerializer, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a")]
[(Name="ID")]
public __gc class ZenLayout : public WebControl, 
[JScript]
public    (ChildControlType=System.Web.UI.Control, ChildrenAsProperties=True)
   (Themeable=True)
   (Persist=False, UsesCustomPersistence=False)
   (Bindable=True, Direction=BindingDirection.OneWay)
   (FilterString="System.Web.UI", FilterType=ToolboxItemFilterType.Require)
   (DesignerBaseTypeName="System.ComponentModel.Design.IDesigner", DesignerTypeName="System.Web.UI.Design.ControlDesigner, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a")
   (Category="Code")
   (ToolboxItemType=System.Web.UI.Design.WebControlToolboxItem, ToolboxItemTypeName="System.Web.UI.Design.WebControlToolboxItem, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a")
   (SerializerTypeName="Microsoft.VisualStudio.Web.WebForms.ControlCodeDomSerializer, Microsoft.VisualStudio.Web, Version=8.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a", SerializerBaseTypeName="System.ComponentModel.Design.Serialization.CodeDomSerializer, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a")
   (Name="ID")
class ZenLayout extends WebControl,

Thread Safety

Public static (Shared in Visual Basic) members of this type are safe for multithreaded operations. Instance members are not guaranteed to be thread-safe.

Remarks

But wait! There's more!
A Zenlayout control may also contain, within any one of its templates, another ZenLayout control. Each ZenLayout has an identifier assigned to it, so each one is individually addressable in the Theme CSS. For example, combine the two examples given earlier:

<zen:ZenLayout CssID="myMainLayout">
    <HeaderTemplate>...</HeaderTemplate>
    <LeftColTemplate>...</LeftColTemplate>
    <CenterColTemplate>
        <zen:ZenLayout CssID="mySubLayout">
            <LeftColTemplate>...</LeftColTemplate>
            <CenterColTemplate>...</CenterColTemplate>
        </zen:ZenLayout>
    </CenterColTemplate>
    <RightColTemplate>...</RightColTemplate>
    <FooterTemplate>...</FooterTemplate>
</zen:ZenLayout>

would give you a Header, FOUR columns and a footer plus the means to control it all with CSS. Embed one 'classic' Rainbow layout in the center column of another, like this:

<zen:ZenLayout>
    <HeaderTemplate>...</HeaderTemplate>
    <LeftColTemplate>...</LeftColTemplate>
    <CenterColTemplate>
        <zen:ZenLayout>
            <HeaderTemplate>...</HeaderTemplate>
            <LeftColTemplate>...</LeftColTemplate>
            <CenterColTemplate>...</CenterColTemplate>
            <RightColTemplate>...</RightColTemplate>
            <FooterTemplate>...</FooterTemplate>
            </zen:ZenLayout>
    </CenterColTemplate>
    <RightColTemplate>...</RightColTemplate>
    <FooterTemplate>...</FooterTemplate>
</zen:ZenLayout>

and you've got a page with Header, LeftColumn, RightColumn and Footer as normal, but now the CenterColumn contains a header and footer of it's own plus one, two or three 'sub columns'(according to what modules are inserted).
Of course, Rainbow's admin can't support this yet, but you could poke around in the database and achieve this today. Makes you think, doesn't it?

Requirements

Namespace: Rainbow.Framework.Web.UI.WebControls

Assembly: Rainbow.Framework (in Rainbow.Framework.dll)

ZenLayout Class

Thread Safety

Remarks

Requirements

See Also