Click here to Skip to main content
15,886,740 members
Articles / Web Development / ASP.NET

DHTML timer control

Rate me:
Please Sign up or sign in to vote.
4.64/5 (17 votes)
13 Oct 20056 min read 97.8K   2.5K   50  
How to implement a reusable DHTML timer.
  • timer_control.zip
    • AssemblyInfo.cs
    • bin
      • Release
        • Cronometro.dll
    • Cronometro.cs
    • Cronometro.csproj
    • Cronometro.csproj.user
    • cronometro.ico
    • Cronometro.sln
    • CronometroDesigner.cs
    • DesignTimeImageHandler.cs
    • EstiloCronometro.cs
    • EstiloCronometroConverter.cs
    • EstiloCronometroEditor.cs
    • EstiloCronometroEditorControl.cs
    • EstiloCronometroEditorControl.resx
    • images
      • blue0.GIF
      • blue1.gif
      • blue2.gif
      • blue3.gif
      • blue4.gif
      • blue5.gif
      • blue6.gif
      • blue7.gif
      • blue8.gif
      • blue9.gif
      • bluey0.gif
      • bluey1.gif
      • bluey2.gif
      • bluey3.gif
      • bluey4.gif
      • bluey5.gif
      • bluey6.gif
      • bluey7.gif
      • bluey8.gif
      • bluey9.gif
      • BRUSH.GIF
      • brush0.gif
      • brush1.gif
      • brush2.gif
      • brush3.gif
      • brush4.gif
      • brush5.gif
      • brush6.gif
      • brush7.gif
      • brush8.gif
      • brush9.gif
      • chevy0.GIF
      • chevy1.gif
      • chevy2.gif
      • chevy3.gif
      • chevy4.GIF
      • chevy5.gif
      • chevy6.GIF
      • chevy7.GIF
      • chevy8.gif
      • chevy9.gif
      • chin0.GIF
      • chin1.gif
      • chin2.gif
      • chin3.gif
      • chin4.gif
      • chin5.gif
      • chin6.gif
      • chin7.gif
      • chin8.gif
      • chin9.gif
      • chinred0.gif
      • chinred1.gif
      • chinred2.gif
      • chinred3.gif
      • chinred4.gif
      • chinred5.gif
      • chinred6.gif
      • chinred7.gif
      • chinred8.gif
      • chinred9.gif
      • cntdwn0.gif
      • cntdwn1.gif
      • cntdwn2.gif
      • cntdwn3.gif
      • cntdwn4.gif
      • cntdwn5.gif
      • cntdwn6.gif
      • cntdwn7.gif
      • cntdwn8.gif
      • cntdwn9.gif
      • comp0.gif
      • comp1.gif
      • comp2.gif
      • comp3.gif
      • comp4.gif
      • comp5.gif
      • comp6.gif
      • comp7.gif
      • comp8.gif
      • comp9.gif
      • crt0.gif
      • crt1.gif
      • crt2.gif
      • crt3.gif
      • crt4.gif
      • crt5.gif
      • crt6.gif
      • crt7.gif
      • crt8.gif
      • crt9.gif
      • emb0.gif
      • emb1.gif
      • emb2.gif
      • emb3.gif
      • emb4.gif
      • emb5.gif
      • emb6.gif
      • emb7.gif
      • emb8.gif
      • emb9.gif
      • fancyb0.gif
      • fancyb1.gif
      • fancyb2.gif
      • fancyb3.gif
      • fancyb4.gif
      • fancyb5.gif
      • fancyb6.gif
      • fancyb7.gif
      • fancyb8.gif
      • fancyb9.gif
      • glow0.gif
      • glow1.gif
      • glow2.gif
      • glow3.gif
      • glow4.gif
      • glow5.gif
      • glow6.gif
      • glow7.gif
      • glow8.gif
      • glow9.gif
      • grvy0.GIF
      • grvy1.gif
      • grvy2.gif
      • grvy3.gif
      • grvy4.gif
      • grvy5.gif
      • grvy6.gif
      • grvy7.gif
      • grvy8.gif
      • grvy9.gif
      • marine0.gif
      • marine1.gif
      • marine2.gif
      • marine3.gif
      • marine4.gif
      • marine5.gif
      • marine6.gif
      • marine7.gif
      • marine8.gif
      • marine9.gif
      • odo0.gif
      • odo1.gif
      • odo2.gif
      • odo3.gif
      • odo4.gif
      • odo5.gif
      • odo6.gif
      • odo7.gif
      • odo8.gif
      • odo9.gif
      • white0.GIF
      • white1.gif
      • white2.gif
      • white3.GIF
      • white4.gif
      • white5.GIF
      • white6.GIF
      • white7.GIF
      • white8.GIF
      • white9.GIF
    • scripts
  • timertest.zip
    • AssemblyInfo.cs
    • cronometro.dll
    • TimerTest.dll
    • Global.asax
    • Global.asax.cs
    • Global.asax.resx
    • blue0.GIF
    • blue1.gif
    • blue2.gif
    • blue3.gif
    • blue4.gif
    • blue5.gif
    • blue6.gif
    • blue7.gif
    • blue8.gif
    • blue9.gif
    • bluey0.gif
    • bluey1.gif
    • bluey2.gif
    • bluey3.gif
    • bluey4.gif
    • bluey5.gif
    • bluey6.gif
    • bluey7.gif
    • bluey8.gif
    • bluey9.gif
    • BRUSH.GIF
    • brush0.gif
    • brush1.gif
    • brush2.gif
    • brush3.gif
    • brush4.gif
    • brush5.gif
    • brush6.gif
    • brush7.gif
    • brush8.gif
    • brush9.gif
    • chevy0.GIF
    • chevy1.gif
    • chevy2.gif
    • chevy3.gif
    • chevy4.GIF
    • chevy5.gif
    • chevy6.GIF
    • chevy7.GIF
    • chevy8.gif
    • chevy9.gif
    • chin0.GIF
    • chin1.gif
    • chin2.gif
    • chin3.gif
    • chin4.gif
    • chin5.gif
    • chin6.gif
    • chin7.gif
    • chin8.gif
    • chin9.gif
    • chinred0.gif
    • chinred1.gif
    • chinred2.gif
    • chinred3.gif
    • chinred4.gif
    • chinred5.gif
    • chinred6.gif
    • chinred7.gif
    • chinred8.gif
    • chinred9.gif
    • cntdwn0.gif
    • cntdwn1.gif
    • cntdwn2.gif
    • cntdwn3.gif
    • cntdwn4.gif
    • cntdwn5.gif
    • cntdwn6.gif
    • cntdwn7.gif
    • cntdwn8.gif
    • cntdwn9.gif
    • comp0.gif
    • comp1.gif
    • comp2.gif
    • comp3.gif
    • comp4.gif
    • comp5.gif
    • comp6.gif
    • comp7.gif
    • comp8.gif
    • comp9.gif
    • crt0.gif
    • crt1.gif
    • crt2.gif
    • crt3.gif
    • crt4.gif
    • crt5.gif
    • crt6.gif
    • crt7.gif
    • crt8.gif
    • crt9.gif
    • emb0.gif
    • emb1.gif
    • emb2.gif
    • emb3.gif
    • emb4.gif
    • emb5.gif
    • emb6.gif
    • emb7.gif
    • emb8.gif
    • emb9.gif
    • fancyb0.gif
    • fancyb1.gif
    • fancyb2.gif
    • fancyb3.gif
    • fancyb4.gif
    • fancyb5.gif
    • fancyb6.gif
    • fancyb7.gif
    • fancyb8.gif
    • fancyb9.gif
    • glow0.gif
    • glow1.gif
    • glow2.gif
    • glow3.gif
    • glow4.gif
    • glow5.gif
    • glow6.gif
    • glow7.gif
    • glow8.gif
    • glow9.gif
    • grvy0.GIF
    • grvy1.gif
    • grvy2.gif
    • grvy3.gif
    • grvy4.gif
    • grvy5.gif
    • grvy6.gif
    • grvy7.gif
    • grvy8.gif
    • grvy9.gif
    • marine0.gif
    • marine1.gif
    • marine2.gif
    • marine3.gif
    • marine4.gif
    • marine5.gif
    • marine6.gif
    • marine7.gif
    • marine8.gif
    • marine9.gif
    • odo0.gif
    • odo1.gif
    • odo2.gif
    • odo3.gif
    • odo4.gif
    • odo5.gif
    • odo6.gif
    • odo7.gif
    • odo8.gif
    • odo9.gif
    • white0.GIF
    • white1.gif
    • white2.gif
    • white3.GIF
    • white4.gif
    • white5.GIF
    • white6.GIF
    • white7.GIF
    • white8.GIF
    • white9.GIF
    • crono.js
    • Test.aspx
    • Test.aspx.cs
    • Test.aspx.resx
    • TimerTest.csproj
    • TimerTest.csproj.webinfo
    • Web.config
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
//	DHTML Timer Custom Control (c) 2005 Manuel Abadia 
//
//	You are allowed to use this component in non commercial projects as long as you don't remove this copyright
//	message from the source code of your project.
//
//	For commercial projects, contact me: dotnetmanu@yahoo.com
///////////////////////////////////////////////////////////////////////////////////////////////////////////////

using System;
using System.ComponentModel;
using System.ComponentModel.Design;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Flanders.Componentes
{
	/// <summary>Control que representa un cron�metro que se muestra en el navegador del cliente mediante Javascript</summary>
	/// <remarks>Creado por Manu el 14/02/2005</remarks>
	[Designer(typeof(CronometroDesigner), typeof(IDesigner))]
	[DefaultEvent("TimeOut"), DefaultProperty("Duracion")]
	[System.Drawing.ToolboxBitmap(typeof(Cronometro), "cronometro.ico")]
	public class Cronometro : WebControl, INamingContainer, IPostBackEventHandler
	{
		#region Campos

		private static readonly object EventTimeOut = new object();

		private Image _imgHora1;
		private Image _imgHora0;
		private Image _imgMin1;
		private Image _imgMin0;
		private Image _imgSeg1;
		private Image _imgSeg0;
		private DateTime _initialLoadTime;

		#endregion

		#region Propiedades

		/// <summary>Devuelve el instante inicial de tiempo del servidor en el que se inici� el cron�metro</summary>
		[Browsable(false)]
		public DateTime InitialTime {
			get { 
				object o = ViewState["InitialTime"];
				if (o == null){
					ViewState["InitialTime"] = DateTime.Now;
					o = ViewState["InitialTime"];
				}
				
				return (DateTime)o;
			}
			set { ViewState["InitialTime"] = value; }
		}

		/// <summary>Devuelve el instante en el que el servidor inicia el cron�metro en este roundtrip</summary>
		[Browsable(false)]
		protected DateTime InitialLoadTime {
			get { 
				if (_initialLoadTime == DateTime.MinValue){
					_initialLoadTime = DateTime.Now;
				}

				return _initialLoadTime;
			}
		}

		/// <summary>Ruta desde donde cargar el script</summary>
		[Category("Behavior"), Description("Ruta desde donde cargar el script"), DefaultValue("")]
		public string ScriptPath {
			get {
				string s = (string)ViewState["ScriptPath"];
				if (s != null){
					return s;
				}
				
				return String.Empty;
			}
			set { ViewState["ScriptPath"] = value; }
		}

		/// <summary>Ruta desde donde cargar las im�genes</summary>
		[Category("Behavior"), Description("Ruta desde donde cargar las im�genes"), DefaultValue("")]
		public string ImagesPath {
			get { 
				string s = (string)ViewState["ImagesPath"];
				if (s != null){
					return s;
				}
				
				return String.Empty;
			}
			set { ViewState["ImagesPath"] = value; }
		}

		/// <summary>Estilo del cron�metro</summary>
		[Editor(typeof(EstiloCronometroEditor), typeof(System.Drawing.Design.UITypeEditor))]
		[Bindable(true), Category("Appearance"), Description("Estilo del cron�metro"), DefaultValue(typeof(EstiloCronometro), "fancyb")]
		public EstiloCronometro Estilo {
			get {
				object o = ViewState["Estilo"];
				if (o != null){
					return (EstiloCronometro)o;
				}
				
				return EstiloCronometro.Fancy;
			}
			set { ViewState["Estilo"] = value; }
		}

		/// <summary>Indica la duraci�n del cron�metro</summary>
		[Bindable(true), Category("Behavior"), Description("Indica la duraci�n del cron�metro"), DefaultValue(typeof(TimeSpan), "00:15:00")]
		public TimeSpan Duracion {
			get { 
				object o = ViewState["Duracion"];
				if (o != null){
					return (TimeSpan)o;
				}
				return new TimeSpan(0, 15, 0);
			}
			set { ViewState["Duracion"] = value; }
		}

		/// <summary>Indica si el contador es ascendente o descendente</summary>
		[Category("Behavior"), Description("Indica si el contador es ascendente o descendente"), DefaultValue(true)]
		public bool Ascendente {
			get { 
				object o = ViewState["Ascendente"];
				if (o != null){
					return (bool)o;
				}
				return true;
			}
			set { ViewState["Ascendente"] = value; }
		}

		/// <summary>Indica si despu�s de que termine el contador se produce un evento de postback</summary>
		[Category("Behavior"), Description("Indica si despu�s de que termine el contador se produce un evento de postback"), DefaultValue(true)]
		public bool CausaPostBack {
			get { 
				object o = ViewState["PostBack"];
				if (o != null){
					return (bool)o;
				}
				return true;
			}
			set { ViewState["PostBack"] = value; }
		}

		/// <summary>Mensaje a mostrar al terminarse el contador</summary>
		[Category("Behavior"), Description("Mensaje a mostrar al terminarse el contador"), DefaultValue("Se ha agotado el tiempo.")]
		public string Mensaje{
			get {
				string s = (string)ViewState["Mensaje"];
				if (s != null){
					return s;
				}
				
				return "Se ha agotado el tiempo.";
			}
			set { ViewState["Mensaje"] = value; }
		}

		/// <summary>Clase CSS que se usa para mostrar el mensaje</summary>
		[Category("Appearance"), Description("Clase CSS que se usa para mostrar el mensaje"), DefaultValue("")]
		public string MsgCssClass {
			get {
				string s = (string)ViewState["MsgCssClass"];
				if (s != null){
					return s;
				}
				
				return String.Empty;
			}
			set { ViewState["MsgCssClass"] = value; }
		}

		/// <summary>Se asegura de que est�n creados los controles hijos antes de acceder a la colecci�n de controles</summary>
		public override ControlCollection Controls {
			get {
				EnsureChildControls();
				return base.Controls;
			}
		}

		#endregion

		#region Eventos

		[Category("Action"), Description("Evento producido al expirar el contador")]
        public event EventHandler TimeOut {
            add { Events.AddHandler(EventTimeOut, value); }
            remove { Events.RemoveHandler(EventTimeOut, value); }
        }

		#endregion

		#region Constructor

		/// <summary>Constructor</summary>
		public Cronometro()
		{
			_initialLoadTime = DateTime.MinValue;
		}

		#endregion

		#region Creaci�n de los controles hijo

		/// <summary>Crea los subcontroles que forman el control</summary>
		protected override void CreateChildControls()
		 {
			// limpia la colecci�n de controles
			Controls.Clear();

			// crea los controles hijo
			_imgHora1 = new Image();
			_imgHora0 = new Image();
			_imgMin1 = new Image();
			_imgMin0 = new Image();
			_imgSeg1 = new Image();
			_imgSeg0 = new Image();

			// asigna un identificador a los controles hijo
			_imgHora1.ID = "hora1";
			_imgHora0.ID = "hora0";
			_imgMin1.ID = "min1";
			_imgMin0.ID = "min0";
			_imgSeg1.ID = "seg1";
			_imgSeg0.ID = "seg0";

			// a�ade los controles hijo a la colecci�n de controles
			Controls.Add(_imgHora1);
			Controls.Add(_imgHora0);
			Controls.Add(_imgMin1);
			Controls.Add(_imgMin0);
			Controls.Add(_imgSeg1);
			Controls.Add(_imgSeg0);
		}

		#endregion

		#region Creaci�n y registro del javascript del control

		/// <summary>M�todo llamado antes de renderizar los controles y que se usa para registrar el javascript necesario</summary>
		/// <param name="e"></param>
		protected override void OnPreRender(EventArgs e)
		{
			// si est� activo, genera el javascript necesario
			if (Enabled){
				// si no est� registrado el script
				if (!Page.IsStartupScriptRegistered("crono_tick")){
					// registra la funci�n de inicio y la que actualiza el cron�metro
					Page.RegisterClientScriptBlock("crono_tick", "<script language='javascript' src='" + base.ResolveUrl(ScriptPath) + "crono.js'></script>");
				}

				// si debe generar postback, registra la funci�n que genera el postback
				if (CausaPostBack){
					Page.RegisterClientScriptBlock(ClientID + ".postback", 

	@"<script language='javascript'>
		function " + ClientID + @"_postBack(){
			" + Page.GetPostBackEventReference(this) + @";
		}
	</script>"
					);
				}

				// registra el script de incio
				Page.RegisterStartupScript(ClientID + ".init", 

	@"<script language='javascript'>
		var obj" + ClientID + @" = new Cronometro(
			'" + ClientID + @"',
			'" + Estilo.Nombre + @"',
			" + HaExpirado().ToString().ToLower() + @",
			" + Ascendente.ToString().ToLower() + @",
			" + CausaPostBack.ToString().ToLower() + @",
			'" + ResolveUrl(ImagesPath) + @"',
			'" + Duracion.ToString() + @"',
			" + InitialLoadTime.ToString("yyyy, ") + (InitialLoadTime.Month - 1).ToString("0") + InitialLoadTime.ToString(", d, H, m, s") + @"
		);
	</script>"

				);
			}
		}
	
		#endregion

		#region Dibujo del control

		/// <summary>Dibuja el control y los subcontroles en una tabla</summary>
		/// <param name="writer">Escritor HTML a usar</param>
		protected override void Render(HtmlTextWriter writer)
		{
			// si est� activo, renderiza el control
			if (Enabled){
				// escribe los atributos del control
				AddAttributesToRender(writer);

				// escribe la tabla con los controles hijo
				writer.AddAttribute(HtmlTextWriterAttribute.Cellspacing, "0");
				writer.AddAttribute(HtmlTextWriterAttribute.Cellpadding, "0");
				writer.AddAttribute(HtmlTextWriterAttribute.Border, "0");
				writer.RenderBeginTag(HtmlTextWriterTag.Table);
					writer.RenderBeginTag(HtmlTextWriterTag.Tr);
						writer.RenderBeginTag(HtmlTextWriterTag.Td);
							_imgHora1.RenderControl(writer);                  
						writer.RenderEndTag();  // Td
						writer.RenderBeginTag(HtmlTextWriterTag.Td);
							_imgHora0.RenderControl(writer);
						writer.RenderEndTag();  // Td
						writer.AddAttribute(HtmlTextWriterAttribute.Valign, "center");
						writer.RenderBeginTag(HtmlTextWriterTag.Td);
							writer.Write(":");
						writer.RenderEndTag();  // Td
						writer.RenderBeginTag(HtmlTextWriterTag.Td);
							_imgMin1.RenderControl(writer);      
						writer.RenderEndTag();  // Td
						writer.RenderBeginTag(HtmlTextWriterTag.Td);          
							_imgMin0.RenderControl(writer);
						writer.RenderEndTag();  // Td
						writer.AddAttribute(HtmlTextWriterAttribute.Valign, "center");
						writer.RenderBeginTag(HtmlTextWriterTag.Td);
							writer.Write(":");
						writer.RenderEndTag();  // Td
						writer.RenderBeginTag(HtmlTextWriterTag.Td);
							_imgSeg1.RenderControl(writer);
						writer.RenderEndTag();  // Td
						writer.RenderBeginTag(HtmlTextWriterTag.Td);
							_imgSeg0.RenderControl(writer); 
						writer.RenderEndTag();  // Td
					writer.RenderEndTag();  // Tr
				writer.RenderEndTag();  // Table

				writer.AddAttribute(HtmlTextWriterAttribute.Border, "0");
				writer.RenderBeginTag(HtmlTextWriterTag.Table);
					writer.AddAttribute(HtmlTextWriterAttribute.Id, ClientID + "_text");
					writer.AddAttribute(HtmlTextWriterAttribute.Style, "display:''");
					writer.AddAttribute(HtmlTextWriterAttribute.Class, MsgCssClass);
					writer.RenderBeginTag(HtmlTextWriterTag.Tr);
						writer.RenderBeginTag(HtmlTextWriterTag.Td);
							writer.Write(Mensaje);
						writer.RenderEndTag();  // Td
					writer.RenderEndTag();  // Tr
				writer.RenderEndTag();  // Table

				writer.AddAttribute(HtmlTextWriterAttribute.Type, "hidden"); 
				writer.AddAttribute(HtmlTextWriterAttribute.Value, InitialTime.ToString("yyyyMMdd/HHmmss"));
				writer.AddAttribute(HtmlTextWriterAttribute.Id, ClientID + "_initialTime"); 
				writer.RenderBeginTag(HtmlTextWriterTag.Input);
				writer.RenderEndTag();	// Input
			}
		}

		#endregion

		#region M�todos de la interfaz IPostBackEventHandler

		public void RaisePostBackEvent(string eventArgument)
		{
			OnTimeOut(EventArgs.Empty);
		}

		#endregion

		#region M�todos de ayuda

		/// <summary>m�todo que produce un evento</summary>
		/// <param name="e">par�metro del evento</param>
		protected virtual void OnTimeOut(EventArgs e)
		{
			// obtiene el evento y llama a los delegados
			EventHandler timeOutHandler = (EventHandler)Events[EventTimeOut];
			if (timeOutHandler != null){
				timeOutHandler(this, e);
			}
		}

		/// <summary>indica si ha expirado el contador</summary>
		/// <returns>true si ya ha expirado el contador</returns>
		protected bool HaExpirado()
		{
			return DateTime.Now >= (InitialTime + Duracion);
		}

		#endregion
	}
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
Spain Spain
Manuel Abadia had his MS Degree in Computer Science (Univ. Murcia, Spain)

He is a Freelance Software Architect/Engineer and Trainer.

He sells his own components in his webpage (http://www.manuelabadia.com).

He was the Software Architect for the MoviTAP project that won the first prize in the Microsoft and Vodafone mobile web Services contest.

He has done some external work in companies like Namco America Inc. and Gaelco SA.

He has contributed to the MAME project (http://www.mamedev.com) for some years (and continues to do so eventually).

Comments and Discussions