HOW TO: Dynamically Create Data-Bound Templates Using Visual Basic .NET (310898)

SUMMARY

This article describes how to use Microsoft Visual Basic .NET code to dynamically create templates. This article uses an ObjectList control and code to dynamically create the following templates:

HeaderTemplate
ItemTemplate
SeparatorTemplate
AlternatingItem
FooterTemplate

back to the top

Create the Mobile Web Form

To create the Mobile Web Form, follow these steps:

Start Microsoft Visual Studio .NET.
Create a Mobile Web Application. To do so, follow these steps:
1. Start Microsoft Visual Studio .NET.
2. On the File menu, point to New, and then click Project.
3. Click Visual C# Projects under Project Types, and then click Mobile Web Application under Templates.
Open MobileWebForm1.aspx. From the Mobile Web Forms toolbox, drag an ObjectList control to MobileWebForm1.aspx.
Right-click the form, and then click View Code. This opens the code-behind file for the form.
Add the following line to the top of the code-behind file, above the Class declaration.

Imports System.Drawing

back to the top

Add the Page_Load Event

Templates are created in a DeviceSpecific object, which contains DeviceSpecificChoice objects. A DeviceSpecificChoice object contains a Filter property that is set to the name of a device filter. Device filters are defined in the Web.config file. They provide the functionality that is necessary to send device-specific content to a device.

In this DeviceSpecificChoice object, you can create a Template object. The template object is of the Template type.

After you create all the objects, you must add each object to its parent object to bind the ObjectList control to an array of strings.

Add the following code to the Page_Load event. The following code creates a Template object.

Sub Page_Load(sender As Object, e As System.EventArgs)

  'Create a DeviceSpecific object.
  Dim devSpec As DeviceSpecific = New DeviceSpecific()

  'Create some choices.
  Dim devChoice As DeviceSpecificChoice
	
  'Create a DeviceSpecificChoice with a filter for isHTML32.
  devChoice = New DeviceSpecificChoice()
  devChoice.Filter = "isHTML32"

  'Create several new templates.
  Dim template As ITemplate 
  'Create the templates, and then add them to the DeviceSpecificChoices.
  template = New CustomTemplate("HeaderTemplate")
	
  'Add the HeaderTemplate to DeviceSpecificChoice.
  'NOTE: The template name is case sensitive.
  devChoice.Templates.Add("HeaderTemplate", template)
	
  'Add the ItemTemplate to DeviceSpecificChoice.
  template = new CustomTemplate("ItemTemplate")
  devChoice.Templates.Add("ItemTemplate", template)

  'Add the SeparatorTemplate to DeviceSpecificChoice.
  template = new CustomTemplate("SeparatorTemplate")
  devChoice.Templates.Add("SeparatorTemplate", template)

  'Add the AlternatingItemTemplate to DeviceSpecificChoice.
  template = new CustomTemplate("AlternatingItemTemplate")
  devChoice.Templates.Add("AlternatingItemTemplate", template)

  'Add the FooterTemplate to DeviceSpecificChoice.
  template = new CustomTemplate("FooterTemplate")
  devChoice.Templates.Add("FooterTemplate", template)

  'Add the DeviceSpecificChoice to the DeviceSpecific.
  devSpec.Choices.Add(devChoice)

  'Add the DeviceSpecific to the list.
  ObjectList1.DeviceSpecific = devSpec

  'Give the ObjectList control a DataSource property.
  Dim stringArray() As String = {"John","Sue","Wendy"}
  ObjectList1.DataSource = stringArray
  ObjectList1.DataBind()
End Sub

back to the top

Create the CustomTemplate Class

The following code creates the CustomTemplate class that contains an implementation of ITemplate. When you create a new instance of the CustomTemplate class, the New method is called. The New method takes one argument, and the name of that argument is the same as the name of the template that you create.

Add the following CustomTemplate class code to the code-behind file. This code should be outside the class for the Web Form.

Public Class CustomTemplate 
  Implements ITemplate
	
  Private _strWhichTemplate As String 
	
  Public Sub New(strTemplate As String)
    _strWhichTemplate = strTemplate
  End Sub
End Class

back to the top

Create an Instance of the Templates

After you call all the ITemplate types in the Page_Load event, the InstantiateIn method is called automatically. The InstantiateIn method contains a CASE statement to evaluate which type of ITemplate must be created.

Controls can be dynamically created in each CASE statement. When those controls must be data-bound, you can create an event handler to call a DataBind method. Add the following code in the CustomTemplate class.

  Public Sub InstantiateIn(container As Control) Implements ITemplate.InstantiateIn	
	
    Select Case _strWhichTemplate.ToLower()
	
      Case "headertemplate"
		
        Dim lb As System.Web.UI.MobileControls.Label = new System.Web.UI.MobileControls.Label()
        lb.Text = "Header Template"
        lb.ForeColor = Color.Green
        container.Controls.Add(lb)
				
      Case "itemtemplate"
		
        Dim tb As System.Web.UI.MobileControls.TextBox = new System.Web.UI.MobileControls.TextBox()
        'Create an event handler.
        AddHandler tb.DataBinding, AddressOf Me.TextBoxDataBinding
        container.Controls.Add(tb)
				
      Case "separatortemplate"
				
        Dim lb As System.Web.UI.MobileControls.Label  = new System.Web.UI.MobileControls.Label()	
        lb.Text = "SeparatorTemplate"
        container.Controls.Add(lb)
				
      Case "alternatingitemtemplate"
				
        Dim lb As System.Web.UI.MobileControls.Label = new System.Web.UI.MobileControls.Label()
        'Create an event handler.
        AddHandler lb.DataBinding, AddressOf Me.LabelDataBinding
        lb.ForeColor = Color.Brown
        container.Controls.Add(lb)								
      Case "footertemplate"
				
        Dim lb As System.Web.UI.MobileControls.Label = new System.Web.UI.MobileControls.Label()
        lb.Text = "Footer Template"
        lb.ForeColor = Color.Blue
        container.Controls.Add(lb)
		
    End Select
  End Sub

back to the top

Bind Data to a TextBox Control

This code binds to the TextBox control that is created in the InstantiateIn method.

To do this, you create a TextBox control and obtain a reference to the TextBox that is created in the InstantiateIn method. Subsequently, an INamingContainer object is created that sets a reference to the container object of the TextBox control. This reference is cast as an ObjectListItem object. Next, a variable named "item" references the object. The "item" variable is then used to access the DataItem property of the ObjectListItem. The DataItem property returns the data object of the list item that is being bound. An object that is named dataObject stores the DataItem value. The dataObject object is then assigned as the Text property of the TextBox control. Add the following code in the CustomTemplate class.

	
  Public Sub TextBoxDataBinding(sender As Object, e As EventArgs)
    'Get the control that is being data bound.
    Dim tb As System.Web.UI.MobileControls.TextBox = CType(sender, Object)
			
    'Get the NamingContainer of the control.			
    Dim iContainer As INamingContainer = CType(tb.NamingContainer, Control)

    'Cast the container to an ObjectListItem.
    Dim item As ObjectListItem = CType(iContainer, ObjectListItem)

    'Use the ObjectList.DataItem property to get the data.		
    Dim dataObject As Object = CType(item.DataItem, Object)
		
    'Place the value into the TextBox.				
    tb.Text = dataObject
  End Sub

back to the top

Bind Data to a Label Control

This code binds to a Label control that is created in the InstantiateIn method.

To do this, you create a Label control, and then you obtain a reference to Label that is created in the InstantiateIn method. Subsequently, an INamingContainer object is created that sets a reference to the container object of the Label control. This reference is then cast as an ObjectListItem object and is referenced in a variable that is named item. The item variable is then used to access the DataItem property of the ObjectListItem. The DataItem property returns the data object of the list item that is being bound. The DataItem is then stored in an object that is named dataObject. The dataObject object is then assigned as the Text property of the Label control.

Add the following code in the CustomTemplate class.

		
  Public Sub LabelDataBinding(sender As Object, e As EventArgs)

    Dim lb As System.Web.UI.MobileControls.Label = CType(sender, Object)
			
    'Get the NamingContainer of the control.			
    Dim iContainer As INamingContainer = CType(lb.NamingContainer, Control)

    'Cast the container to an ObjectListItem.
    Dim item As ObjectListItem = CType(iContainer, ObjectListItem)

    'Use the ObjectList.DataItem property to get the data.
    Dim dataObject As Object = CType(item.DataItem, Object)	
		
    lb.Text = dataObject
  End Sub

back to the top

Bind Data to Other Data Types

You can use the data-binding code that is used for the TextBox and the Label controls in this sample when you bind to a DataSet object and to custom data types.

The sample in this article binds to a string array. However, when you bind to other types of data, you must cast objects correctly. The following code illustrates how to bind to a DataSet object to the TextBox control.

  Public Sub TextBoxDataBinding(sender As Object, e As EventArgs)
    'Get the control that is being data bound.
    Dim tb As System.Web.UI.MobileControls.TextBox = CType(sender, Object)
			
    'Get the NamingContainer of the control.			
    Dim iContainer As INamingContainer = CType(tb.NamingContainer, Control)

    'Cast the container to an ObjectListItem.
    Dim item As ObjectListItem = CType(iContainer, ObjectListItem)

    'Use the ObjectList.DataItem property to get the data.		
    Dim dataObject As Object = CType(item.DataItem, Object)
		
    'Cast the dataObject to a DataRowView.
    Dim rowView As DataRowView = CType(dataObject, DataRowView)
		
    'Place the value into the Label.
    tb.Text = CType(rowView(1), String)
  End Sub

NOTE: When you use custom data objects, you must cast DataItem as the custom data object:

    'Use the ObjectList.DataItem property to get the data.		
    Dim dataObject As Object = CType(item.DataItem, myCustomDataObject)

back to the top

Create a Device Filter

The code sample in the Add the Page_Load Event section of this article uses a device filter that is named isHTML32. You must define this filter for the code sample to work. To do this, create a Web.config file for the application, and then add the following code:

		
<?xml version="1.0" encoding="utf-8" ?>
  <configuration>
    <system.web>  
      <deviceFilters>
        <filter name="isHTML32" compare="PreferredRenderingType" argument="html32" />
      </deviceFilters>
    </system.web>
  </configuration>

HOW TO: Dynamically Create Data-Bound Templates Using Visual Basic .NET (310898)

IN THIS TASK

SUMMARY

Create the Mobile Web Form

Add the Page_Load Event

Create the CustomTemplate Class

Create an Instance of the Templates

Bind Data to a TextBox Control

Bind Data to a Label Control

Bind Data to Other Data Types

Create a Device Filter