Phase 3 / Working without Page Templates

Page Templates may make setup easy, but they impose limitations, such as using a single layout for all DataFields, using URL Routing, and requiring that the page is centered around the features of the DataBound control. Typically web forms need data oriented features to be mixed with other parts, such as menus, search and login fields, and advertising.

You can use BLD to add data oriented functionality into any page. In fact, you have already learned many aspects to do this: add your DataSource, DataBound control, and BLDPageManager. What remains is to provide content to the DataBound control. There are many ways to do this. All end up using Field Templates but how they are added varies.

As a sneak peak, take a look at these two DataBound controls. These define the user interface seen in our Interactive UI Demo. The <ItemsInPattern> and <ItemTemplate> nodes replace Automatic Scaffolding. The BLDListView offloads formatting to Pattern Templates, but specifies each DataField and the desired rules to apply to Field Templates. The BLDFormView explictly defines the HTML and BLD controls needed to have complete control over the layout within the <ItemTemplate> node.

<des:BLDListView ID="BLDListView1" runat="server" DataSourceID="DataSource1" DataKeyNames="ProductID"
   AutoGenerateButtons="First" SelectingRowsUI="HiliteAndButton"
   onitemcommand="BLDListView1_ItemCommand" 
   OnselectedIndexChanged="BLDListView_SelectedIndexChanged" 
   ondatabound="BLDListView1_DataBound">
   <ItemsInPattern>
      <des:DataFieldInPattern DataField="ProductName" />
      <des:DataFieldInPattern DataField="UnitPrice" HeaderText="Price" />
      <des:DataFieldInPattern DataField="Supplier.HomePage" HeaderText="Vendors" >
         <TemplateProperties>
            <des:UrlReadOnlyFieldTemplateProperties UrlText="{DATAFIELD:Supplier.CompanyName}" />
         </TemplateProperties>
      </des:DataFieldInPattern>
   </ItemsInPattern>
</des:BLDListView>
<des:BLDFormView id="BLDFormView1" runat="server" DataSourceID="DataSource2"
   ContainerNamedPart="Div" ShowHeaderRow="true" HeaderRules="TemplateOnly" >
   <ItemTemplate>
      <div style="float:left;padding: 10px;line-height:1.5em;">
         <des:BLDDataField id="ProductName" runat="Server" DataField="ProductName">
            <NamedStyles>
               <des:NamedStyle Name="FieldTemplateDataControls" Style="font-size:larger; font-weight:bold;" />
            </NamedStyles>
         </des:BLDDataField>
         <br/>by 
         <des:BLDDataField id="SupplierHomePage" runat="server" DataField="Supplier.HomePage">
            <TemplateProperties>
               <des:UrlReadOnlyFieldTemplateProperties UrlText="{DATAFIELD:Supplier.CompanyName}" />
            </TemplateProperties>
            <Behaviors>
               <des:HintFieldTemplateBehavior Hint="Located in {DATAFIELD:CompanyLocation}"
                  ApplyHintInReadOnlyMode="True" SharedHintFormatterName="AliceBlue-Small"
                  ButtonLocation="AfterDataControl" UseOnlyButton="true" 
                  ButtonImageURL="~/Images/Info.gif" ButtonImageAlign="Bottom" />
            </Behaviors>
         </des:BLDDataField>
         <br/>
         <des:BLDDataField id="UnitPrice" runat="server" DataField="UnitPrice">
         </des:BLDDataField>
      </div>
      <div style="float:right;padding: 10px;">
         <des:BLDDataField id="CategoryPicture" runat="server" DataField="Category.Picture">
            <TemplateProperties>
               <des:DbImageFieldTemplateProperties ImageWidth="100" />
            </TemplateProperties>
            <Behaviors>
               <des:HintFieldTemplateBehavior Hint="Category: {DATAFIELD:Category}"
                  ApplyHintInReadOnlyMode="True" SharedHintFormatterName="AliceBlue-Small" />
            </Behaviors>
         </des:BLDDataField>
      </div>
   </ItemTemplate>
   <HeaderTemplate>
      <div id="FormHeader" runat="server" class="BLDFT_TitleBar" >
         <div style="float:left;padding-top:7px;padding-left:10px; font-style:italic;">Available from NorthWind Traders</div>
         <div style="float:right;padding-top:5px;padding-right:10px;">
            <asp:Image ID="CloseBox" runat="server" ImageUrl="~/DES/Appearance/Shared/CloseCmdBlue.gif" ImageAlign="Top"
               ToolTip="close" AlternateText="[Close]" >
         </div>
      </div>
   </HeaderTemplate>
   <NamedStyles>
      <des:NamedStyle Name="Container" CssClass="ProductDetailsView" Style="display:none;" />
   </NamedStyles>
</des:BLDFormView>

You have completed Phase 3. In the Phase 4, you'll learn how to use Field Templates to customize the presentation of individual DataFields.