DHTML定时器控制

分享于 

9分钟阅读

Web开发

  繁體

Sample Image - cronometro.png

介绍

由于微软发布了. NET 框架,许多组件供应商已经出现了,它的中有些人提供了非常昂贵的控制。 然而有时候客户要求你在任何地方都不能买到这样的东西,这样你就可以自己做了。

这篇文章就是这样的。 一位顾客想为他的门户提供在线测试的可能性。 然而,他希望能够在做测试时精确了解剩余时间,而且不需要重新编译即可以更改外观。 当然,当时间到期时,他希望测试立即完成。 所以现在是时候使用DHTML支持定制控件了。

Background

为了完全了解代码,你应该熟悉设计时框架。面向对象的JavaScript和 DHTML。

因为我没有时间改变源代码,你会看到它在西班牙语中。 如果你不理解的话,我很抱歉。 这是一种很好的语言,所以你应该开始学习它。

使用代码

使用代码中的计时器非常简单:

  • Cronometro 控件添加到工具箱。
  • Cronometro 控件添加到 WebForm。
  • 设置控件( 为了正确工作,你应该使用 ScriptPathImagesPath 属性设置脚本和图像文件夹)的属性。
  • 如果希望控件在设计时显示图像,请将以下HTTP处理程序添加到 Web.Config:
    <addverb="GET,POST"path="cronometro/*.ashx"type="Flanders.Componentes.DesignTimeImageHandler, Cronometro"/>
  • 如果你想在计时器过期时执行一些操作,请处理 TimeOut 事件。

下面是控件的属性及其执行的操作:

  • Duracion: 计时器过期时的TimeSpan
  • ScriptPath: 包含 crono.js ( JavaScript逻辑)的文件夹的路径。
  • ImagesPath: 包含样式图像的文件夹的路径。
  • Estilo: 要使用的样式有 16个预定义的样式。 你可以使用自己的样式,如果你将自定义图像添加到 ImagesPath 文件夹。
  • CausaPostBack: 如果它是 true,当计时器生成 TimeOut 事件时,控件将导致 postback。
  • Ascendente: 如果它是 true,计时器将从 0到指定的TimeSpan,否则从指定的TimeSpan 到 0.
  • Mensaje: 计时器到期时显示的消息。
  • MsgCssClass: 用于消息的CSS类。
  • InitialTime: 当计时器开始( 如果未设置,则将在指定时间范围内设置第一次) 时。

例如演示项目源代码是:

// timer1: downwards, 1:00, causes postbackCronometro1.Duracion = new TimeSpan(0, 1, 0);
Cronometro1.Ascendente = false;this.Cronometro1.TimeOut += 
 new System.EventHandler(this.Cronometro1_TimeOut);// timer2: downwards, 1:10Cronometro2.Duracion = new TimeSpan(0, 1, 10);
Cronometro2.Ascendente = false;
Cronometro2.CausaPostBack = false;// timer3: downwards, 1:20Cronometro3.Duracion = new TimeSpan(0, 1, 20);
Cronometro3.Ascendente = false;
Cronometro3.CausaPostBack = false;// timer4: upwards, 1:30, causes postbackCronometro4.Duracion = new TimeSpan(0, 1, 30);
Cronometro4.Ascendente = true;this.Cronometro4.TimeOut += 
 new System.EventHandler(this.Cronometro4_TimeOut);

控件使用一个JavaScript文件并且包含一些预定义样式,所以一定要在部署中包含它们。

页面中可用计时器的数量没有限制。 控件已经在 IE 6.0,Firefox 1.0和 Opera 8.0中进行了测试。

Points of Interest

必须将值从服务器端传递到客户端,反之亦然。

在服务器端,我有所有属性,但是需要使它们可以用于客户端,因为在客户端上更新了计时器。 IMHO这样做的最好方法是创建一个JavaScript类,使用必要的字段和方法完成任务。 控件使用 RegisterClientScriptBlock 阶段中的注册 crono.js ( 所有JavaScript代码都是)。 此外,对于每个计时器,它都创建一个具有以下字段的对象:

  • id: 控件的ClientID
  • style: 要使用的样式。
  • expired: 如果这里计时器已过期,则为 true。
  • upwards: 如果 true,计时器向上,否则它向下。
  • 如果 causePostBack 是 true,则当计时器过期时,控件会导致 postback,从而生成 TimeOut 事件。
  • imgPath: 包含样式图像的文件夹的路径。
  • TimeSpan: 计时器过期的时间。
  • serverInitTime: 当计时器开始( 如果未设置,则将首次设置在指定模式阶段) 时。
  • clientInitTime: 创建对象时浏览器的客户端时间。
  • serverInitLoadTime: 页面在这里往返过程中处于prerender阶段的时间。

而不是直接将 InitialTime 属性传递给隐藏输入字段,以便使用控件将窗体数据发送到它的他页。

客户端的方法包括:

  • Tick: 每秒调用以更新计时器。
  • ShowRow: 显示/隐藏在计时器过期时显示消息的行的方法。
  • DisplayTime: 从 Tick 调用以更新计时器的数字。
  • GetInitialServerTime: helper 方法,当计时器启动( 在服务器时间) 时获得。
  • GetTimeSpan: helper 方法将包含 TimeSpan 值的字符串转换为JavaScript中的Date

只有 Tick() 方法有一点复杂,因为它有主定时器逻辑。

客户端不需要向服务器端传递任何值,因为服务器可以发现计时器是否已经过期。 但是,如果 CausaPostBack 属性设置为 true,则客户端必须生成服务器端事件。 为了达到这一目的,控件将在计时器过期时从 Tick() 注册一个函数,使用 Page.GetPostBackEventReference() 生成 postback。

自定义控件有六个作为子( 每个数字对应一个数字,以 hh:mm:ss 格式显示计时器)的图像,它们在 CreateChildControls 中创建并添加。 控件实现 INamingContainer 以向它的子控件以及 IPostBackEventHandler 提供唯一的名称,以便能够生成服务器端事件。

控件具有自定义呈现以绘制具有两行的table。 在第一行显示数字时,第二行用于在计时器过期时显示消息。

控件具有自定义 UITypeEditor,以便在本文顶部的图片中选择样式。

为了提高设计时体验,我希望控件显示反映选定样式的图像,但是使用 ASP.NET 1.1强制实现自定义处理程序来从程序集(。在 ASP.NET 2.0中,由于 WebResourceAttribute的存在,这得到了改进) 获取图像。 自定义处理程序在类 DesignTimeImageHandler 中实现。 用于选择控件样式的窗体具有一些 PictureBox 控件,框架自动将关联的位图存储为图像资源。 我不再把图像添加为不同的嵌入资源,而是从 UITypeEditor 中重用图像。

应该将控件所需的JavaScript复制到文件夹中,并且应该使用 ImagesPath 属性设置路径。 可以使用自定义处理程序在设计时获取 JavaScript,但不必设置路径,因为可以更改代码。

历史记录

  • 2005/10/13 - 初始版本。

控制  时间  Timer  DHT  Dhtml  
相关文章