Gua prctica para skmMenu

Traduccin y adaptacin: Sergio Florez M. Este texto contiene la informacin mas relevante que est plasmada en el sitio web oficial de skmMenu, http://skmmenu.com Introduccin El Microsoft Framework .Net es un entorno de desarrollo que adems de ofrecernos una plataforma robusta, estable y flexible, tambin nos ha librado de desarrollar muchas tareas tediosas y repetitivas. Un ejemplo de esto en el caso de ASP.NET son los controles web. La vida del desarrollador web se ha mejorado significativamente gracias tanto a la facilidad de uso como a la excelente funcionalidad de controles tales como el DataGrid, el DropDownList y el Calendar, que nos libran de construir una gran cantidad de cdigo cuya nico objetivo es generar HTML y funciones de JavaScript repetitivos. Sin embargo, uno de los controles que por alguna extraa razn no hace parte del Framework y que mas falta nos hace es el men. Entonces cmo hacemos para tener mens en nuestras aplicaciones web? Esta es una pregunta que la gran mayora de los desarrolladores web tienen que resolver ms temprano que tarde en sus labores. Los que han tenido contacto con tecnologas de scripting seguramente habrn pensado en solucionar este problema utilizando mens de JavaScript. Los desarrolladores mas emprendedores posiblemente se habrn puesto en la tarea de generar custom server controls (algunos los llaman composite controls). El skmMenu es uno de estos custom server controls. Fue creado por Scott Mitchell en octubre de 2003 como parte de una serie de dos artculos para MSDN. Luego el cdigo fue publicado en GotDotNet para permitir el uso y mejoras por parte de otros desarrolladores. El skmMenu ha cambiado mucho desde su creacin, las mayores contribuciones viniendo de Robert Vreeland. El objetivo principal de este artculo es conocer el funcionamiento del skmMenu con el fin de poder incluirlo en nuestros futuros desarrollos, pero para todo el que est interesado en conocer los detalles de la construccin del control, estos son los artculos que lo originaron (en ingls): Building an ASP.NET Menu Control Examining the skmMenu Server Control Como ya fue mencionado, el skmMenu ha cambiado mucho desde que se escribieron estos artculos, as que seguramente habrn algunas inconsistencias entre el cdigo en discusin y lo que realmente encontraremos al descargar el control. Obtener el skmMenu El skmMenu se puede descargar de http://skmmenu.com/menu/Download/. En la pgina aparecen tres opciones de descarga. La primera opcin es skmMenu Versin x.x Binaries. Esta opcin nos entrega solamente el assembly, compilado para el Framework 1.1. La segunda opcin es skmMenu Versin x.x Source Code. Esta opcin nos entrega el cdigo fuente en un proyecto de Visual Studio .Net 2003. Si est usando Visual Studio .Net 2002 deber generar un nuevo proyecto de C# y agregarle todos los archivos manualmente. La tercera opcin es skmMenu Versin x.x Examples. Contiene una serie de ejemplos creados por Robert Vreeland y Steven Perry. El cdigo fuente para estos ejemplos est en Visual Basic .Net.

Todas estas opciones adems de una versin PDF de este artculo hacen parte de la descarga asociada al mismo. Agregar el skmMenu Si est usando Visual Studio .Net, cree un nuevo proyecto de ASP.NET y abra una pagina aspx en modo de diseo. En este momento es posible agregar el skmMenu al cuadro de herramientas. Para agregar el control debemos hacer clic sobre cualquier opcin (Web Forms o general, por ejemplo), elegir la opcin Agregar o quitar elementos (en VS.NET 2002 es Personalizar cuadro de herramientas), hacer clic en Examinar, navegar hasta la DLL, hacer clic en Abrir y luego en Aceptar. En este momento ya debemos tener el skmMenu dentro de nuestro cuadro de herramientas, aparece como Menu. Algo que se debe tener en cuenta es que al agregar el skmMenu al cuadro de herramientas lo nico que estamos haciendo es facilitar la agregacin del mismo a los proyectos web del Visual Studio .Net. Lo lgico sera que esta accin agregara el control al Global Assembly Cache, pero lamentablemente esto no es as. Sin embargo, aunque quisiramos agregar el skmMenu manualmente al GAC, esto no es posible ya que el control no es fuertemente tipeado (strongly typed). Todo esto significa que una vez que agreguemos el skmMenu al cuadro de herramientas no debemos cambiar la ubicacin fsica de la DLL, ya que si lo hacemos entonces los proyectos nuevos no la podrn encontrar. Dado el caso de que no tengamos Visual Studio .Net, lo que debemos hacer para utilizar el skmMenu en nuestros proyectos es agregar el archivo skmMenu.dll a la carpeta bin de nuestras aplicaciones. Luego debemos registrar el assembly en cada pgina que utilice el men poniendo la siguiente lnea al principio del archivo ASPX antes del HTML: <%@ Register TagPrefix="skm" Namespace="skmMenu" Assembly="skmMenu" %> Finalmente, agregamos lo siguiente en el lugar donde deseamos que aparezca el men: <skm:Menu id="id" runat="server" ...></skm:Menu> De hecho este es exactamente el procedimiento que nos ahorramos en Visual Studio .Net al agregar el skmMenu al cuadro de herramientas. Crear un Men Hay dos formas de agregarle elementos al skmMenu. La primera forma es utilizar un archivo XML. Este enfoque es el ms sencillo, pero esta sencillez viene con la limitante de que crea un men esttico. Si es necesario tener un men que muestre tems basado en algn tipo de condicin, por ejemplo roles de usuario, entonces se tendr que construir por cdigo. Agregar elementos del men por medio de un archivo XML Para poder utilizar un archivo XML como fuente de datos para el skmMenu primero debemos conocer la estructura que se debe usar. El elemento raz del documento XML es <men>, y este elemento debe contener cada opcin del men principal dentro de elementos hijos <menuItem>. <menu> <menuItem> ... Item 1 ... </menuItem>

<menuItem> ... Item 2 ... </menuItem> ... </menu> Cada <menuItem> puede contener una cantidad de elementos internos para especificar sus propiedades, las cuales corresponden a las propiedades de la clase MenuItem. La siguiente tabla lista los elementos, las propiedades a las que corresponden y da un ejemplo de su uso en el archivo XML (debemos recordad que XML es case-sensitive):
Elemento XML <text> <url> <target> <image> <imagealttext> <commandname> <javascriptcommand> <tooltip> <cssclass> <mouseovercssclass> <mouseupcssclass> <mousedowncssclass> <mouseoverimage> <mouseupimage> <resolveurl> <enabled> <visible> <leftimage> <rightimage> <rightimageleftpadding> <leftimagerightpadding> <rightimagealign> <leftimagealign> <horizontalalign> <verticalalign> <width> <height> <roles> Propiedad Correspondiente Text Url Target Image ImageAltText CommandName JavaScriptCommand ToolTip CssClass MouseOverCssClass MouseUpCssClass MouseDownCssClass MouseOverImage MouseUpImage ResolveUrl Enabled Visible LeftImage RightImage RightImageLeftPadding LeftImageRightPadding RightImageAlign LeftImageAlign HorizontalAlign VerticalAlign Width Height Roles Ejemplo <text>Acerca de</text> <url>http://skmmenu.com</url> <target>_blank</target> <image>/images/menu.gif</image> <imagealttext>Texto alternativo para la imagen...</imagealttext> <commandname>Eliminar</commandname> <javascriptcommand>funcion</javascriptcom mand> <tooltip>conozca sobre la gente detrs del skmMenu!</tooltip> <cssclass>plateado</cssclass> <mouseovercssclass>plateado</mouseovercss class> <mouseupcssclass>plateado</mouseupcssclas s> <mousedowncssclass>plateado</mousedowncss class> <mouseoverimage>over.jpg</mouseoverimage> <mouseupimage>up.jpg</mouseupimage> Slo puede ser: <resolveurl>true</resolveurl> o <resolveurl>false</resolveurl> Slo puede ser: <enabled>true</enabled> o <enabled>false</enabled> Slo puede ser: <visible>true</visible> o <visible>false</visible> <leftimage>unaImagen.png</leftimage> <rightimage> unaImagen.png</rightimage> <rightimageleftpadding>Convertible a unidades</rightimageleftpadding> <leftimagerightpadding>Convertible a unidades</leftimagerightpadding> <rightimagealign>Convertible a ImageAlign</rightimagealign> <leftimagealign>Convertible a ImageAlign</leftimagealign> <horizontalalign>Convertible a HorizontalAlign</horizontalalign> <verticalalign>Convertible a VerticalAlign</verticalalign> <width>Convertible a unidades</width> <height>Convertible a unidades</height> <roles>lista de roles delimitada por comas</roles> ej: <roles>dev,test,manager</roles>

<backcolor> <bordercolor> <borderwidth>

BackColor BorderColor BorderWidth

Agregado a skmMenu en la versin 2.2. <backcolor>nombre del color</backcolor> Agregado a skmMenu en la versin 2.2. <bordercolor>nombre del color</bordercolor> Agregado a skmMenu en la versin 2.2. <borderwidth>Convertible a unidades</borderwidth> Agregado a skmMenu en la versin 2.2.

Adems de estas propiedades el elemento <menuItem> tambin puede contener un elemento <subMenu>. Este elemento <subMenu> puede contener una cantidad de elementos <menuItem>. Entonces para generar un men con la siguiente estructura: Archivo Edicin Nuevo Cerrar Copiar Pegar

Podramos usar el siguiente XML: <menu> <menuItem> <text>Archivo</text> <subMenu> <menuItem> <text>Nuevo</text> </menuItem> <menuItem> <text>Cerrar</text> </menuItem> </subMenu> </menuItem> <menuItem> <text>Edicin</text> <subMenu> <menuItem> <text>Copiar</text> </menuItem> <menuItem> <text>Pegar</text> </menuItem> </subMenu> </menuItem> </menu> Espaciador El elemento <menuSpacer> se agreg al esquema de skmMenu en la versin 2.2. El elemento <menuSpacer> puede aparecer en los mismos lugares que el elemento <menuItem>, y simplemente aade un espaciador al men. <menuSpacer> tiene tres elementos hijos opcionales: <spacermarkup> - especifica el HTML utilizado al renderizar el espaciador <height> - especifica la altura del espaciador

<cssclass> - especifica la clase CSS del espaciador