TemplateRotator Control

Description

	The TemplateRotator control allows you to create multiple templates that are periodically rotated. The control allows you to specify the frequency of the rotation, whether it is rotates randomly or sequentially, and the dimensions of a div that the templates will be contained in. All code used to rotate through the templates is written in JavaScript.

Example

HS Senior Picture
Class of 1999

<NJS:TemplateRotator ID="tprExample" runat="server" Interval="2000" RandomOrder="False" RotatorHeight="400" RotatorWidth="400" StyleValue="text-align:center;float:left;">
  <NJS:RotatorTemplate ID="rtpCaption" runat="server" StyleValue="background-image:url(/images/rainbow.gif);background-repeat:repeat;">
    <LayoutTemplate>
      <img alt="HS Senior Picture" src="/images/Nate_Photo.gif" style="border-width:0px;width:135px;height:200px;"/><br/>
      <span style="font-size:12px;font-weight:bold;">HS Senior Picture<br/>Class of 1999</span>
    </LayoutTemplate>
  </NJS:RotatorTemplate>
  <NJS:RotatorTemplate ID="rtpRotatedText" runat="server" StyleValue="background-color:Silver;">
    <LayoutTemplate>
      <table cellpadding="0" cellspacing="0" style="border-width:0px;">
        <tr>
          <td style="border-width:0px;"><NJS:RotatedTextImage runat="server" Rotation="45" Strikeout="True" Text="TemplateRotator" FontColor="Red" BackgroundStyle="TextOnly" Background="Green"/></td>
          <td style="border-width:0px;"></td>
          <td style="border-width:0px;"><NJS:RotatedTextImage runat="server" Rotation="-45" Strikeout="True" Text="TemplateRotator" FontColor="Red" BackgroundStyle="TextOnly" Background="Green"/></td>
        </tr>
        <tr><td style="border-width:0px;"></td><td style="border-width:0px;"><img src="/images/frog.gif" style="width:48px;height:48px;"/></td><td style="border-width:0px;"></td></tr>
        <tr>
          <td style="border-width:0px;"><NJS:RotatedTextImage runat="server" Rotation="-45" Strikeout="True" Text="TemplateRotator"/></td>
          <td style="border-width:0px;"></td>
          <td style="border-width:0px;"><NJS:RotatedTextImage runat="server" Rotation="45" Strikeout="True" Text="TemplateRotator"/></td>
        </tr>
      </table>
    </LayoutTemplate>
  </NJS:RotatorTemplate>
  <NJS:RotatorTemplate ID="rtpFrogsIcons" runat="server">
    <LayoutTemplate>
      <img src="/images/frog.gif" style="margin:0px;padding:0px;border-width:0px;width:48px;height:48px;"/><br/>
      <img src="/images/explanationicon.gif" style="margin:0px 0px 0px 48px;padding:0px;border-width:0px;width:53px;height:51px;"/><br/>
      <img src="/images/rotatefrog.gif" style="margin:0px 0px 0px 101px;padding:0px;border-width:0px;width:48px;height:48px;"/><br/>
      <img src="/images/quoteicon.gif" style="margin:0px 0px 0px 149px;padding:0px;border-width:0px;width:48px;height:48px;"/>
    </LayoutTemplate>
  </NJS:RotatorTemplate>
</NJS:TemplateRotator>

Properties & Methods

TemplateRotatorThe TemplateRotator control allows you to create multiple templates that are periodically rotated

RotatorWidth - The width, in pixels, of the div that will wrap each template (default="500")
RotatorHeight - The height, in pixels, of the div that will wrap each template (default="300")
Items - The List of RotatorTemplates that will be rotated
RandomOrder - A Boolean value specifying whether the RotatorTemplates should be displayed sequentially or in random order (default="False")
Interval - The amount of time, in milliseconds, between rotations (default="1750")
StyleValue - A String of CSS styles that will be applied to the divs for all templates

Source Code

TemplateRotator.vb:

Namespace NathanSokalski
	<ParseChildren(True, "Items")> Public Class TemplateRotator : Inherits System.Web.UI.Control : Implements INamingContainer
		Private divids As New Collections.Generic.List(Of String)
		Private _rotatorwidth As Integer = 500
		Private _rotatorheight As Integer = 300
		Private _items As New Collections.Generic.List(Of RotatorTemplate)
		Private _randomorder As Boolean = False
		Private _interval As Long = 1750
		Private _stylevalue As String

		<DefaultValue(500), Description("The width of the div that will wrap each template")> Public Property RotatorWidth() As Integer
			Get
				Return Me._rotatorwidth
			End Get
			Set(ByVal value As Integer)
				Me._rotatorwidth = value
			End Set
		End Property
		<DefaultValue(300), Description("The height of the div that will wrap each template")> Public Property RotatorHeight() As Integer
			Get
				Return Me._rotatorheight
			End Get
			Set(ByVal value As Integer)
				Me._rotatorheight = value
			End Set
		End Property
		<Browsable(False), Description("The List of RotatorTemplates that will be rotated")> _
		Public ReadOnly Property Items() As Collections.Generic.List(Of RotatorTemplate)
			Get
				Return Me._items
			End Get
		End Property
		<DefaultValue(False), _
		Description("A Boolean value specifying whether the RotatorTemplates should be displayed sequentially or in random order")> _
		Public Property RandomOrder() As Boolean
			Get
				Return Me._randomorder
			End Get
			Set(ByVal value As Boolean)
				Me._randomorder = value
			End Set
		End Property
		<DefaultValue(1750), Description("The amount of time, in milliseconds, between rotations")> Public Property Interval() As Long
			Get
				Return Me._interval
			End Get
			Set(ByVal value As Long)
				Me._interval = value
			End Set
		End Property
		<Description("A String of CSS styles that will be applied to the divs for all templates")> Public Property StyleValue() As String
			Get
				Return Me._stylevalue
			End Get
			Set(ByVal value As String)
				Me._stylevalue = value
			End Set
		End Property

		Protected Overrides Sub CreateChildControls()
			Dim div As HtmlGenericControl
			For Each rt As RotatorTemplate In Me._items
				div = New HtmlGenericControl("div")
				div.ID = String.Concat("divRotatorTemplate", Me._items.IndexOf(rt))
				div.Attributes("class") = "TemplateRotator"
				If Me._items.IndexOf(rt) = 0 Then div.Style.Value = "display:block;"
				If Not String.IsNullOrEmpty(Me._stylevalue) Then div.Style.Value &= Me._stylevalue
				If Not String.IsNullOrEmpty(rt.StyleValue) Then div.Style.Value &= rt.StyleValue
				rt.LayoutTemplate.InstantiateIn(div)
				Me.Controls.Add(div)
				Me.divids.Add(div.ClientID)
			Next
		End Sub

		Private Sub Ctrl_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
			Me.EnsureChildControls()
			Me.Page.Header.StyleSheet.CreateStyleRule(New NathanSokalski.CustomStyle(String.Format("width:{0}px;height:{1}px;margin:0px;padding:0px;border-width:0px;overflow:hidden;display:none;", Me._rotatorwidth, Me._rotatorheight)), Nothing, "div.TemplateRotator")
			If Not Me.Page.ClientScript.IsClientScriptBlockRegistered("TemplateRotator") Then Me.Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "TemplateRotator", "function TemplateRotator(ctrlid){document.getElementById(ctrlid.divlist[ctrlid.currindex]).style.display='none';ctrlid.currindex=(ctrlid.randomorder?Math.floor(Math.random()*ctrlid.divlist.length):++ctrlid.currindex%ctrlid.divlist.length);document.getElementById(ctrlid.divlist[ctrlid.currindex]).style.display='block';}", True)

			Dim datascript As New System.Text.StringBuilder()
			datascript.AppendFormat("var {0}_data={{", Me.ClientID())
			datascript.Append("currindex:0,")
			datascript.AppendFormat("randomorder:{0},", Me._randomorder.ToString().ToLower())
			datascript.Append("divlist:[")
			For Each divid As String In divids
				datascript.AppendFormat("""{0}"",", divid)
			Next
			datascript.AppendLine("]};").Replace(",]", "]")
			datascript.AppendFormat("window.setInterval(""TemplateRotator({0}_data)"",{1});", Me.ClientID(), Me._interval.ToString().TrimStart("-"c)).AppendLine()
			Me.Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), Me.ClientID(), datascript.ToString(), True)
		End Sub
	End Class

	Public Class RotatorTemplate : Inherits System.Web.UI.WebControls.CompositeControl
		Private _layouttemplate As ITemplate
		Private _stylevalue As String

		<TemplateContainer(GetType(RotatorTemplate)), _
		PersistenceMode(PersistenceMode.InnerProperty), _
		Description("The ITemplate that that will be used in the TemplateRotator control")> _
		Public Property LayoutTemplate() As ITemplate
			Get
				Return Me._layouttemplate
			End Get
			Set(ByVal value As ITemplate)
				Me._layouttemplate = value
			End Set
		End Property
		<Description("A String of CSS styles that will be applied to the div for this template")> Public Property StyleValue() As String
			Get
				Return Me._stylevalue
			End Get
			Set(ByVal value As String)
				Me._stylevalue = value
			End Set
		End Property
	End Class
End Namespace