Introducción
Continuando con la serie de artículos
sencillos pero espero útiles sobre controles de servidor personalizados hoy
hablaremos sobre la capacidad de mostrar ToolTips con grandes capacidades
de formato ya que se utilizara Html, esto es debido a que actualmente la
propiedad ToolTip nos muestra en un cuadrito amarillo el dato que
especifiquemos, por ejemplo:
Y en determinado momento el usuario puede dejar pasar
desapercibido el mensaje, lo que haremos en este artículo es extender la
funcionalidad del control System.Web.UI.WebControl.HyperLink para mostrar un
mensaje ToolTip basados en Html
rico en su contenido y con el fin de llamar la atención del usuario
cuando pasa el ratón sobre el control.
Pero antes de continuar, si aun no has visto los
artículos anteriores, aquí esta la lista:
La
Solución
Para fines prácticos y de seguimiento
utilizaremos la solución y proyectos creados en los artículos de esta serie
mencionados anteriormente así que si no cuentas con ello empieza por ahí y
cuando termines deberás contar con la siguiente
estructura:
Selecciona el proyecto ControlesWeb
creamos una clase de
nombre:
HyperLinkHtmlToolTip y escribimos las siguientes
secciones de código:
NOTA: Debido a lo extenso del código que manejaremos para este
artículo se procedió a especificar un breve comentario y una región en donde
staremos clasificando en regiones el código.
En
la región "Miembros privados" escribimos las variables privadas de la clases
que sostendrán la información especificada por el
usuario.
Imports System.ComponentModel
Imports
System.Web.UI.WebControls
Public
Class HyperLinkHtmlToolTip
Inherits HyperLink
#Region "Miembros privados"
' sostiene el nombre de la clase Css por default es
nada
Private mstrCssHtmlToolTipStyle As String = String.Empty
' sostiene el texto html que deseamos mostrar en el
HtmlToolTip
Private mstrToolTipTextoHtml As String = String.Empty
' sostiene el estilo predeterminado del
HtmlToolTip
Private mstrToolTipStyle As String = "display: none; position: absolute;
font-size: 10px; color: black;font-family: Verdana, Arial, Helvetica,
sans-serif; background-color: beige;"
' sostiene el valor en segundos de la
HtmlToolTip
Private mintSegundo As Integer = 4
#End Region
Las
propiedades públicas que manejaremos cuentan con el identificador
<Bindable(True)> de la clase System.ComponentModel, este identificador nos sirve
para especificar que esta propiedad podra ser vinculada desde cualquier origen
de datos, asi que podemos contruir en nuestra base de
datos el codigo Html y regresarlo a esta propiedad para que
lo despligue, continuemos con la siguiente sección de
código.
#Region "Propiedades publicas"
'por medio de esta propiedad se especifican los segundos
de duracion del HtmlToolTip
<Description("Duración
en segundos del HtmlToolTip mostrado")> _
Property ToolTipHtmlDuration() As Integer
Get
Return mintSegundo
End
Get
Set(ByVal value As
Integer)
mintSegundo = value
End
Set
End
Property
' por medio de esta propiedad especificamos el nombre de
la clase Css que define el estilo de presentacion
<Bindable(True), Description("Identificador Cascade Style
Sheet")> _
Property ToolTipHtmlCss() As String
Get
Return
mstrCssHtmlToolTipStyle
End
Get
Set(ByVal Value As
String)
mstrCssHtmlToolTipStyle = Value
End
Set
End
Property
' por medio de esta propiedad podemos declarar
directamente el estilo del HtmlToolTip
<Bindable(True), Description("Propiedad Style de HTML para
definir declarativamente la presentación")> _
Property ToolTipHtmlStyle() As String
Get
Return
mstrToolTipStyle
End
Get
Set(ByVal value As
String)
mstrToolTipStyle = value
End
Set
End
Property
En la siguiente propiedad es donde asignamos el codigo HTML que vamos
a utilizar para presentar información en el HtmlToolTip. Vemos como guardar en
el ViewState el dato de esta propiedad para poder soportar postbacks de otros
controles.
' esta propiedad es el texto Html de nuestro HtmlToolTip
System.Web.UI.Design.HtmlControlDesigner
<Bindable(True), Description("HTML que se mostrará en el
HtmlToolTip")> _
Property ToolTipHtmlText() As String
Get
Dim str As String
If EnableViewState = True Then
str = CType(ViewState("ToolTipHtmlText"), String)
End
If
Return str
End
Get
Set(ByVal value As
String)
If EnableViewState = True Then
ViewState("ToolTipHtmlText") = value
End
If
mstrToolTipTextoHtml = value
End
Set
End
Property
#End Region
En la
siguiente sección de código se muestra la función donde ocurre la magia de
poner y quitar el mensaje HtmlToolTip cuando el usuario pasa o quita el ratón
sobre el control.
#Region "Funciones privadas"
' Funciones encargada de mostrar, mantener y desaparecer
el HtmlToolTip
Private Function
ScriptFunctions() As String
Dim strScript As New
System.Text.StringBuilder
Dim strSegundos As String
strSegundos = CStr(CInt(mintSegundo) * 1000)
With strScript
.Append("<script type='text/jscript' language='jscript'>
")
.Append(" var timeout = null; ")
.Append(" var tipOffTimeout = null; ")
.Append(" function TopicTipOn(anchor, id) { ")
.Append(" var
targetY = document.body.scrollTop + window.event.clientY + 18;
")
.Append(" var targetX =
document.body.scrollLeft + window.event.clientX + 12; ")
.Append("
TopicTip.style.left = targetX; ")
.Append("
TopicTip.style.top = targetY; ")
.Append(" var
tip =
document.getElementById(id); ")
.Append("
TopicTip.innerHTML = tip.innerHTML; ")
.Append("
TopicTip.style.display = 'block'; ")
.Append("
if (tipOffTimeout != null) ")
.Append("
window.clearTimeout(tipOffTimeout); ")
.Append("
tipOffTimeout = window.setTimeout('TopicTipOff()', " & strSegundos
& ", 'JScript'); }")
.Append(" ")
.Append(" function TopicTipOff() { ")
.Append(" if (tipOffTimeout != null) ")
.Append("
window.clearTimeout(tipOffTimeout);")
.Append("
tipOffTimeout = null;
")
.Append("
TopicTip.style.display = 'none'; }</script>")
End
With
Return
strScript.ToString
End
Function
#End Region
Bien y para finalizar el código a continuación se presenta
el codigo encargado de registrar el javascript y el de
extender la funcionalidad del control Hyperlink para asociar
que funciones javascript se ejecutan en determinado evento.
#Region "Overrides"
' verificamos si no existe el script ya registrado en
caso que no exista
' registramos las funciones javascript que
requerimos
Protected Overrides Sub
OnPreRender(ByVal e As EventArgs)
If Not MyBase.Page.IsClientScriptBlockRegistered("ToolTipScript")
Then
Page.RegisterClientScriptBlock("ToolTipScript",
ScriptFunctions)
End
If
' verificamos si no existe el script
TopicTip el cual es el encargado de
' actuar a nivel javascript con nuestro
HtmlToolTip, en caso de que
' la propiedad ToolTipCss cuente con
informacion asume que cuenta conarchivo
' Css y dentro de el el estilo visual del
HtmlToolTip, en caso contrario
' utilizamos el estilo
predeterminado
If Not MyBase.Page.IsClientScriptBlockRegistered("TopicTip")
Then
If mstrCssHtmlToolTipStyle.Trim.Length
> 0 Then
Page.RegisterClientScriptBlock("TopicTip", "<div id='TopicTip'
class='" & _
mstrCssHtmlToolTipStyle
& "'></div>")
Else
Page.RegisterClientScriptBlock("TopicTip", "<div id='TopicTip'
style='" & _
mstrToolTipStyle & "'></div>")
End
If
End
If
End
Sub
' extendemos el control HyperLink para especificar que
eventos
mandan
llamar las
' funciones javascript apropiadas, ademas especificamos
el texto HtmlToolTip que
' vamos a mostrar
Protected Overrides Sub
Render(ByVal writer As System.Web.UI.HtmlTextWriter)
Dim strHtml As String
strHtml = "<div id='" & MyBase.UniqueID & "' style='DISPLAY: none'>"
& ToolTipHtmlText & "</div>"
Attributes("onmouseover") = "TopicTipOn(this, '" & MyBase.UniqueID & "');"
Attributes("onmouseout") = "TopicTipOff();"
writer.Write(strHtml)
MyBase.Render(writer)
End
Sub
#End Region
End
Class
Por cierto el sub procedimiento Render envía el contenido del
control a un objeto de tipo HtmlTextWriter el cual escribe
una serie secuencial de caracteres HTML y texto en una página de formulario
Web. La clase HtmlTextWriter provee de
capacidades de formato que los controles de servidor ASP.NET utilizan cuando
se renderiza contenido HTML en el
cliente.
