Un medio alternativo de configurar la presentación visual


A pesar de haber finalizado el desarrollo del ejemplo en la entrega anterior de este artículo, y tras conseguir la funcionalidad pretendida, en esta última parte queremos explorar un medio adicional que nos permita establecer la configuración de las propiedades visuales de los LinkButton que conforman los elementos del control DropDownExtender.


En su estado actual, para conseguir que los elementos de la lista proporcionen el grado de interactividad visual necesaria con el usuario, emitimos desde el código servidor de la página -evento Load- un bloque de código javascript hacia el cliente, que asociamos con los eventos onmouseover y onmouseout de las etiquetas <a>, las cuales son el resultado en HTML generado por ASP.NET hacia el navegador para los controles LinkButton.


 


//….

System.Text.StringBuilder sbScript = new System.Text.StringBuilder();


sbScript.Append(«function LinkButton_onmouseover(oLnkBtn) n»);

sbScript.Append(«{ n»);

sbScript.Append(«oLnkBtn.style.backgroundColor = ‘LightSkyBlue’; n»);

sbScript.Append(«oLnkBtn.style.border = ‘1px solid DarkBlue’; n»);

sbScript.Append(«oLnkBtn.style.padding = ‘3px 18px 3px 32px’; n»);

sbScript.Append(«} n»);

sbScript.Append(«function LinkButton_onmouseout(oLnkBtn) n»);

sbScript.Append(«{ n»);

sbScript.Append(«oLnkBtn.style.backgroundColor = ‘LightGreen’; n»);

sbScript.Append(«oLnkBtn.style.borderStyle = ‘none’; n»);

sbScript.Append(«oLnkBtn.style.padding = ‘4px 19px 4px 33px’; n»);

sbScript.Append(«} n»);


this.ClientScript.RegisterClientScriptBlock(this.GetType(),

  «CodigoJS», sbScript.ToString(), true);


//….

oLinkButton.Attributes.Add(«onmouseover», «LinkButton_onmouseover(this)»);

oLinkButton.Attributes.Add(«onmouseout», «LinkButton_onmouseout(this)»);

Además de lo anterior, para que los elementos de la lista -al ser esta desplegada- se muestren con un aspecto inicial adecuado, en la propiedad-colección Style de los LinkButton asignaremos un conjunto de valores necesario para este control.


 


// configurar aspecto visual base del elemento de lista

oLinkButton.Style[HtmlTextWriterStyle.TextDecoration] = «none»;

oLinkButton.Style[HtmlTextWriterStyle.Display] = «block»;

oLinkButton.Style[HtmlTextWriterStyle.Cursor] = «default»;

oLinkButton.Style[HtmlTextWriterStyle.BackgroundColor] = «LightGreen»;

oLinkButton.Style[HtmlTextWriterStyle.Color] = «DarkBlue»;

oLinkButton.Style[HtmlTextWriterStyle.Padding] = «4px 19px 4px 33px»;

Observando los fragmentos de código anteriores vemos que algunas propiedades de estilo, como por ejemplo BackgroundColor, son asignadas dos veces: una primera para establecer la apariencia inicial del elemento de la lista y otra para el evento cliente onmouseout. Esta situación nos lleva a investigar una vía por la cual podamos optimizar y centralizar esta configuración en un único punto de nuestro código. Como resultado de nuestras pesquisas conseguiremos un doble objetivo: mejorar el código del ejemplo actual y obtener una variante para abordar este problema en futuros desarrollos, que nos permita disponer de soluciones alternativas. Antes de proseguir, vamos a eliminar del código de la aplicación estos fragmentos de código anteriormente mencionados, para dejar la configuración visual de los LinkButton en su estado inicial.


Podemos mejorar el código de nuestro ejemplo en este aspecto utilizando un bloque de estilos para las etiquetas <a>  como el mostrado a continuación.


 


<head runat=»server»>

    <title>Cargar datos en DropDownExtender</title>


    <style type=’text/css’>

        a

        {

            color : DarkBlue;

            background-color: LightGreen;

            border-style : none;

            display : block;

            text-decoration : none;

            cursor : default;

            padding : 4px 19px 4px 33px;

        }

        a:hover

        {

            background-color: LightSkyBlue;

            border : 1px solid DarkBlue;

            padding : 3px 18px 3px 32px;

        }

    </style>

</head>

Con esta sencilla modificación, los elementos del DropDownExtender se mostrarían al usuario con las características visuales que ya habíamos implementado anteriormente, pero utilizando una menor cantidad de código.


Peeeeero ¡¡cuidadín!! =8-O, que como efecto colateral, cualquier otro control basado en la etiqueta <a> que tengamos en nuestra página también utilizará este estilo, con las consecuencias no deseadas que de esto se deriva; como vemos en la siguiente imagen, donde el enlace «Mantenimiento de clientes» se muestra igual que los elementos de la lista desplegable.


 



Para evitar este problema asignaremos un nombre a los estilos definidos, estableciendo el mismo nombre en la propiedad CssClass de los controles LinkButton creados para la lista del DropDownExtender, como vemos a continuación.


 


<head runat=»server»>

    <title>Cargar datos en DropDownExtender</title>


    <style type=’text/css’>

        a.ElementoLista

        {

            color : DarkBlue;

            background-color: LightGreen;

            border-style : none;

            display : block;

            text-decoration : none;

            cursor : default;

            padding : 4px 19px 4px 33px;

        }

        a.ElementoLista:hover

        {

            background-color: LightSkyBlue;

            border : 1px solid DarkBlue;

            padding : 3px 18px 3px 32px;

        }

    </style>

</head>

 


protected void Page_Load(object sender, EventArgs e)

{

    //….

    oLinkButton.CssClass = «ElementoLista»;

    //….

}

De modo análogo a como hacíamos con los eventos del lado cliente del control LinkButton, en lugar de situar el código de los estilos en el HTML de la página, podemos emitirlo desde el lado servidor empleando igualmente el método Page.ClientScriptRegisterClientScriptBlock. Dado que no se trata de código javascript, debemos pasar el valor false como último parámetro del método, para que omita la generación de la etiqueta <script>.


 


protected void Page_Load(object sender, EventArgs e)

{

    // emitir código cliente para crear los estilos

    // que relacionaremos con los elementos de la lista desplegable

    System.Text.StringBuilder sb = new System.Text.StringBuilder();


    sb.Append(«<style type=’text/css’> n»);

    sb.Append(«a.ElementoLista n»);

    sb.Append(«{ n»);

    sb.Append(«color : DarkBlue; n»);

    sb.Append(«background-color: LightGreen; n»);

    sb.Append(«border-style : none; n»);

    sb.Append(«display : block; n»);

    sb.Append(«text-decoration : none; n»);

    sb.Append(«cursor : default; n»);

    sb.Append(«padding : 4px 19px 4px 33px; n»);

    sb.Append(«} n»);

    sb.Append(«a.ElementoLista:hover n»);

    sb.Append(«{ n»);

    sb.Append(«background-color: LightSkyBlue; n»);

    sb.Append(«border : 1px solid DarkBlue; n»);

    sb.Append(«padding : 3px 18px 3px 32px; n»);

    sb.Append(«} n»);

    sb.Append(«</style> n»);


    this.ClientScript.RegisterClientScriptBlock(this.GetType(),

        «CodigoEstilos», sb.ToString(), false);


    //….

    for (int nIndice = 0; nIndice < dvDimProductSubcategory.Count; nIndice++)

    {

        //….

        oLinkButton.CssClass = «ElementoLista»;

        //….

    }

    //….

}

Y esto sería todo, el estilo vuelve a ser aplicado únicamente en los elementos de la lista.


 



El código fuente de esta entrega puede obtenerse en el siguiente enlace.


Un saludo.