Language preference: C#VB

Phase 4 / Pattern Templates overview

Web page development frequently uses patterns, such as the HTML for a table row with two columns, where the first column contains a field name and the other is the field’s data. In fact, the previous topic used this pattern with each DataField in the BLDFormView:

<tr class="DetailsViewDataFieldRow" >
  <td class="DetailsViewLabelContainer">
    <des:BLDLabel id="Label1" runat="server" AssociatedControlID="BLDDataField1" />
  </td>
  <td class="DetailsViewDataContainer">
    <des:BLDDataField id="BLDDataField1" runat="server" DataField="column name" />
  </td>
</tr>

You can save these patterns into User Control files called Pattern Templates. They usually contain a BLDDataField control and sometimes a BLDLabel control. These controls will not have their DataField property assigned yet. Instead, the Pattern Template file works with your DataBound control to retrieve the DataField name. for the contents around your Field Templates.

Here is a Pattern Template file that implements the above pattern. It only needs to omit the DataField property on BLDDataField and specify the correct ancestor class.

<%@ Control Language="C#" Inherits="PeterBlum.DES.BLD.DataFieldsPatternTemplate" Usage="Data" %>
<tr class="DetailsViewDataFieldRow" >
  <td class="DetailsViewLabelContainer">
    <des:BLDLabel id="Label1" runat="server" AssociatedControlID="BLDDataField1" />
  </td>
  <td class="DetailsViewDataContainer">
    <des:BLDDataField id="BLDDataField1" runat="server" />
  </td>
</tr>

The above shows how a Pattern Template handles a single DataField. They can be much more sophisticated. The "Parts Pattern Template" hosts numerous patterns, not just for the BLDDataField "Parts", but also for the header, footer, row separator, and HTML container around everything.

In the BLD Database Explorer, we've been using this type of Pattern Template. The DetailsView.ascx Pattern Template mimics the appearance of a DetailsView control and is used by default with the BLDFormView control. The GridView.ascx Pattern Template mimics the appearance of the GridView control and is used by default with the BLDListView control. Unlike the GridView and DetailsView, the layout is fully editable as its layout is in a User Control file.

Pattern Templates can handle non-data oriented cases. For example, the Filter user interface uses them.

Use the Source Code Browser to explore all Pattern Templates described here, plus a few more.

One Field TableRow.ascx - Use when showing a DataField and its label. It is the actual implementation of the Pattern Template we mocked up above.
Two Fields Stacked.ascx - Shows one or two DataFields, each with its own label.
ButtonsForList.ascx - Handles the buttons used in a list style interface. Its primary contents are the BLDDataButtons control with surrounding HTML to describe table cell.

In the next topic, you will learn how to assign the DataField to the BLDDataField contained in the Pattern Template.

Open the Source Code Browser (C# only)

Source Code Browser

<%@ Control Language="C#" Inherits="PeterBlum.DES.BLD.DataFieldsPatternTemplate" Usage="Data" %>
<script runat="server">
/* ---- USAGE -------------------------------------------------------------
For use with BLDPatternForDataField control to show a single column of a record.
The page should enclose this Pattern Template in a <table> node.
This PatternTemplate has the format:
<tr>
  <td>[BLDLabel]</td>
  <td>[BLDFilterField]</td>
</tr>
Example:
<table>
    <des:BLDPatternForDataField ID="DataColumn1" runat="server" 
      PatternTemplateName="One Field TableRow" DataField="columnname1" />
    <des:BLDPatternForDataField ID="DataColumn2" runat="server" 
      PatternTemplateName="One Field TableRow" DataField="columnname2" />
    <des:BLDPatternForDataField ID="DataColumn3" runat="server" 
      PatternTemplateName="One Field TableRow" DataField="columnname3" />
</table>
 
 ---- NAMED STYLES ------------------------------------------------------
 Use the BLDPatternForDataField.NamedStyles property to declare any of these style names.
 
   LabelContainer - Style for the first column, containing the label.
   LabelControl - Style for the BLDLabel control in the first column.
   DataContainer - Style for the second column, containing the BLDDataField.
   FieldTemplateDataControls - Field Templates defined their own Named Styles.
      This is the default for the data entry control. It may differ based
      on your Field Template definitions.
   Row - Style for the TR tag.
 
 For example:
    <des:BLDPatternForDataField ID="BLDPattern1" runat="server" 
       PatternTemplateName="One Field TableRow" DataField="columnname1" >
      <NamedStyles>
         <des:NamedStyle Name="LabelContainer" CssClass="MyClass" />
         <des:NamedStyle Name="DataContainer" Style="width:100px;" />
      </NamedStyles>
    </des:BLDPatternForDataField>
 
--- XML FORMAT OF NAMED STYLES ---------------------------------------- 
Design mode uses this XML format.
 <NamedStylesDoc>
    <NamedStyle Name="LabelContainer">Style for the first column, containing the label.</NamedStyle>
    <NamedStyle Name="LabelControl">Style for the BLDLabel control in the first column.</NamedStyle>
    <NamedStyle Name="DataContainer">Style for the second column, containing the BLDDataField.</NamedStyle>
    <NamedStyle Name="FieldTemplateDataControls">Field Templates defined their own Named Styles.
      This is the default for the data entry control. It may differ based
      on your Field Template definitions.</NamedStyle>
    <NamedStyle Name="Row">Style for the TR tag.</NamedStyle>
 </NamedStylesDoc>
// --- DEFAULT STYLE SHEET CLASSES ----------------------------------
 Assign the default style sheet class names for the parts of this PatternTemplate here.
 Declare these classes in the style sheet file ~/DynamicData/Content/PatternTemplateNamedStyles.css.
 Each item here is associated with a Named style above.
 */
   protected const string cCssLabelContainer = "OneField_LabelContainer";
   protected const string cCssLabelControl = "OneField_LabelControl";
   protected const string cCssDataContainer = "OneField_DataContainer";
   protected const string cCssRow = "OneField_Row";
/*-------------------------------------------------------------------------*/
</script>

<des:HtmlTag runat="server" Tag="Tr" CssClass="<%# cCssRow%>" NamedStyle="Row" >
   <des:HtmlTag runat="server" Tag="Td" 
      CssClass="<%# cCssLabelContainer%>" NamedStyle="LabelContainer" Style="vertical-align:top;" >
      <des:BLDLabel ID="BLDLabel1" runat="server" 
        AssociatedControlID="BLDDataField1"  CssClass="<%# cCssLabelControl%>" />
      <des:NamedStylesExtender ID="BLDLabel1Extender" runat="server" 
         ControlIDToExtend="BLDLabel1" NamedStyle="LabelControl" />
   </des:HtmlTag>
   
   <des:HtmlTag runat="server" Tag="Td"
      CssClass="<%# cCssDataContainer%>" NamedStyle="DataContainer" Style="vertical-align:top;" >
      <des:BLDDataField ID="BLDDataField1" runat="server" 
        PatternRequiresDataField="true" />
         <%-- NOTE: Field Templates support Named Styles for their child controls --%>
   </des:HtmlTag>
</des:HtmlTag>

Guided Tour Menu

Phase Menu Next Topic

Next Phase