Usando CSS Controls Adapter en ASP.NET 2.0, mejora y optimiza tu presentacion

Para entender que es un control adapter y descargarlo, podemos visitar el blog de ScottGu's: CSS Control Adapter Toolkit Update. Pero un pequeño resumen es: Con un control adapter, puedes modificar la manera como se muestra tus controles de servidor ASP.NET en el navegador, por ejemplo podemos hacer que un control Menu se "renderice", se muestre, con etiquetas ul, li, y no con etiquetas table, td, tr.

En este ejemplo vamos a mostrar, que pasaría si yo tengo un Web Site, y quiero incorporar CSS Control Adapters a mi web.

  1. Primero verifiquemos la presentación actual de nuestro sitio Web, como se puede apreciar el control menú sin un control adapter: 
  2. Ahora vamos a crear un nuevo Web Site tomando como plantilla el Tutorial on CSS Friendly ASP.NET 2.0:
  3. Ahora vamos a ir copiando los archivos que necesitamos en nuestra sitio Web, primero copiaremos las clases: MenuAdapter.cs y WebControlAdapterExtender.cs:

    La clase MenuAdapter es la que generará el nuevo render del HTML generado por el control Menu.
  4. Ahora copiaremos los archivos CSS básicos, los cuales son usados en la clase MenuAdapter:
  5. Ahora agregaremos el MenuAdapter de a nuestro sitio web, usando un archivo *.browser:
  6. Ahora tenemos que copiar el archivo CSS que dará el estilo al control menú (CssSelectorClass), en el tutorial encontramos dos, yo copiaré el archivo MenuExample.css a mitema(este ya lo tenía en mi webSite):
  7. Además tengo que copiar otros archivos de imagen que usan los estilos del archivo MenuExample.css:
  8. Ahora copio un Skin para el control menú del tutorial, a mi miSkin.skin, el cual tambien usa estilos del archivo MenuExample.css:
  9. Ahora asigno el estilo de mi control menú y asigno los atributos respectivos, SkinID y CssSelectorClass, el estilo PrettyMenu, ha sido definido en MenuExample.css:
  10. Ahora ejecuto mi página Contacto.aspx, pero antes le agrego el Theme a la página Contactos.aspx, en la directiva @page:

    StylesheetTheme="miTema"

    ="miTema"

  11. Si ya lo ejecutaron se podrán dar cuenta que falto algo , para verlo correctamente, tenemos que agregar lo siguiente a nuestra master page, site.master:
  12. Ahora si ejecutemos y veamos los resultados:

Los resultados saltan a la Vista. Espero que esto les sirva como ejemplo base, para empezar a usar los control adapters del CSS Friendly ASP.NET 2.0 . Los controles disponibles son: Menu, TreeView, GridView, DetailsView, FormsView, DataList, Login, ChangePassword , CreateUser, PasswordRecovery, y LoginStatus.

Aquí se ha presentado el funcionamiento y lo ocurre detrás de todo esto, de manera sencilla, con ideas básicas que permitan entender lo que hacemos, si queremos saber más de la arquitectura podemos visitar: ASP.NET 2.0 Control Adapter Architecture.

Ustedes escogen si necesitan usar los adaptores, si ya cuentan con estilos propios, pueden no necesitan usarlo, o también puede integrar todos sus CSS al Control Adapter. Todo dependerá de su escenario .

Adjunto el Web Site, que use. Es necesario instalar, CSS Friendly ASP.NET 2.0 Control Adapters (Beta 2.0).

P.D.: Si alguién tiene un estilo por ahí, y lo integra al CSS Friendly, me pasa la voz :D.

Saludos,

Post cruzado desde starrillo blog

9 comentarios sobre “Usando CSS Controls Adapter en ASP.NET 2.0, mejora y optimiza tu presentacion”

  1. Si se me permite quiero acotar algo sobre el tema, me parece que va un poco mas alla de lo que se puede ver a simple vista, yo veo mucho mas potencial que eso, dado que creando un adapter recibimos los datos del control y desde ese momento, los datos «son nuestros» pudiendo de esta manera incluir mucha funcionalidad, espero que sigamos en contacto para poder llegar al fondo de la cuestion. mi mail es jmator@hotmail.com lo dejo asi seguimos con esto

  2. Excelente tutorial Sergio, no te imaginas la gran ayuda que me haz dado. Sabes yo estaba (aún lo estoy) muy desesperado porque aplicando todos los estandares, CSS, position relative, etc. Por más que tratara mis aplicaciones al correr en Firefox y Opera se deformaban horriblemente.
    Aún más con la presión de mis jefes en el trabajo que piensan que solo es de soplar botellas y listo.
    Por el momento me han trabajado bien los Control Adapter, eso si, son faciles, pero el echo que sean faciles no quiere decir que es la solución más rápida, hay que trabajar más pero este trabajo al final se ve recompensado.
    Ahora mi proximo reto es incorporarlos con exito a los componentes de DNN, o crear mis componentes de DNN con Control Adapter.
    Me gustaria que siempre estemos en contácto para compartir experiencias, Saludos desde El Salvador, y nuevamente gracias por tu publicación.
    mariortizmmiv2@gmail.com.

  3. Hola…

    Muy bueno el articulo. Pero para que REALMENTE me funcione en IE 6.0 tuve que agregarle la carpeta JavaScript con todo sus js de contenido…

    Saludos cordiales

    CarlosMag…

  4. Hola, de nuevo yo…

    En donde tengo que setear para que el ancho de las opciones de menu sea automatico y no fijo…?

    Saludos cordiales
    CarlosMag

  5. hola me ha parecido estupendo el tutorial, ya lo he probado, solo he tenido el inconveniente de que los submenus…aparecen separados por medio centimetro del menu principal….no s e porque no de despliegan sin ninguna separacion, se me hace dificil selecionarlos. descaparecen en cuanto el mouse toca la parte blanca(la separacion entre el menu principal y los submenus).

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *