Pero si esto es un problema que hemos resuelto para una página web sencilla, no lo es cuando tratamos de utilizar una aplicación Web a través de Visual Studio .NET. Por ejemplo, un sistema con el cual podamos acceder a una página, consultar datos, agregar, eliminar, etc., pero teniendo un menú desplegable con menús internos que nos permitan accionar eventos, todo esto utilizando Web Forms y XML.
Bueno, en una de mis búsquedas desesperadas por algo que me permitiera crear un menú desplegable para un WebForm a través de Visual Studio .NET, concretamente C#, me encontré con una opción, OpenSource ASP.NET MenuServer Control, o para los amigos skmMenu creada por Scott Michell. La página oficial de este control es http://www.skmmenu.com/menu/ y en ella se encuentra toda la información disponible para descargar el control y utilizarlo en las aplicaciones Web creadas en Visual Studio .Net e inclusive en otras plataformas.
Me atrevo a presentarles esta herramienta y a mostrarles un pequeño manual de ayuda que tal vez le pueda servir a alguien. Los ejemplos que se muestran dentro de este artículo fueron realizados sobre Visual Studio .NET 2003 en proyectos de Visual C# y con el Internet Information Server bien configurado. Espero que sea de su agrado.
La Herramienta skmMenu:
skmMenu es un control para crear Menus Desplegables y programarlos para conseguir disparar eventos dentro de nuestras aplicaciones.
Nota:
Para utilizar este control, es necesario primero descargarlo de la página http://www.skmmenu.com/menu/Download/. Existen tres opciones:
skmMenu Version 2.2 Binaries – Descarga para lo que trabajan sobre el .Net Framework 1.1. Si se necesita trabajar en versiones anteriores, se deberá de descargar y recompilar a través del Visual Studio .NET 2003
skmMenu Version 2.2 Source Code – Esta es la versión mas común. Se presenta el código fuente editable a través de Visual Studio .NET 2003. También trae consigo el control skmMenu.dll dentro de la carpeta debug/bin con el cuál podremos agregarlo fácilmente a nuestras aplicaciones.
Download skmMenu 2.2 Examples - Robert Vreeland y Steven Perry nos ofrecen una buena cantidad de ejemplos hechos en Visual Basic .NET con los cuales trabajar.
Iniciemos de una vez:
1.- Descarguemos skmMenu Version 2.2 Source Code, guardemos el .ZIP en nuestro equipo.
2.-Posteriormente es necesario descomprimir el archivo. Te encontraras con un grupo de archivos .cs, .resx, .js, etc.
3.- A través de Visual Studio. NET 2003 abrimos el Proyecto skmMenu.csproj
4.- Genera la Solución mediante Menu Generar/ Generar skmMenu.
5.- Aparecerá el Cuadro de Dialogo de Guardar como, solo guarda el archivo skmMenu.sln en la misma carpeta.
6.- Una vez Compilado el archivo (si te aparecen advertencias en Visual Studio .NET, no son de cuidado) se habrá creado un archivo .dll que necesitaremos; la ubicación es: skmMenu2.2.Source\bin\Debug\skmMenu.dll
7.- Ahora agreguemos el control al cuadro de herramientas. Para eso abre un nuevo proyecto (Menu Archivo/ Nuevo / Proyecto). En mi caso, creo un Proyecto en C#, Aplicación Web ASP.NET
8.- En el Cuadro de Herramientas, pulsa Clic Derecho y selecciona la opción Agregar o Quitar elementos.
9.- En la ventana que aparecerá (cerciórate que este activa la pestaña Componentes de .NET Framework) presiona el botón de Examinar. Busca el archivo skmMenu.dll que compilaste en el paso 6, selecciónalo y presiona el botón Abrir. Notaras que el componente se agrego; solo pulsa Aceptar y listo, podrás utilizar el control en tus aplicaciones.
Bueno, ahora que hemos agregado el control, empecemos a utilizarlo. Propiamente, en C# a través de un WebForm.
Ejemplo 1
1.- Creamos un Nuevo Proyecto de Visual C# como Aplicación Web ASP.NET, de nombre “ejemplo1”
2.- Una vez creado, podemos darle al WebForm un diseño en particular y agregamos un control skmMenu del Cuadro de Herramientas.
3.- Una vez cargado el control skmMenu, podemos cambiar sus propiedades como:
ID=skm1 (Identificador del Objeto Menu)
BACKCOLOR=#C0C0FF (Color de Fondo)
BORDERCOLOR=Red (Color de Borde)
BORDERSTYLE=Double (Estilo de Borde)
BORDERWIDTH=5 (Ancho del Borde)
FONT BOLD=True (Fuente en Negrita)
FONT NAME=Arial (Tipo de Fuente)
FONT SIZE=Small (Tamaño de Fuente)
SELECTEDMENUITEM BACKCOLOR= #FFC080 (Color de Fondo cuando se coloque el puntero encima del Menu)
SELECTEDMENUITEM BORDERCOLOR=Red (Color de Borde cuando se coloque el puntero encima del Menu)
SELECTEDMENUITEM BORDERSTYLE=Double (Estilo de Borde cuando se coloque el puntero encima del Menu)
SELECTEDMENUITEM FONT BOLD=True (Estilo Negrita del Texto cuando se coloque el puntero encima del Menu)
SELECTEDMENUITEM FONT NAME=Arial (Tipo de Fuente del Texto cuando se coloque el puntero encima del Menu)
SELECTEDMENUITEM FONT SIZE=Small (Tamaño de Fuente del Texto cuando se coloque el punter encima del Menu)
Recuerda que puedes darle el formato que tú desees.
Procedamos ahora a preparar el código.
10.- Dentro del Código de ejemplo1.aspx, exactamente en private void page_load… colocamos el siguiente código
private void Page_Load(object sender, System.EventArgs e)
{
skm1.DataSource=Server.MapPath(“ejemplo1XML.xml”);
skm1.DataBind();
}
“ejemplo1XML.xml” es una página .XML que vamos a crear posteriormente. Recuerda bien el nombre por que debe de estar en el mismo proyecto y con el mismo nombre.
11.- Ahora regresamos al área de Diseño de ejemplo1.aspx. Una vez ahí, localizamos la opción para pasarnos a la vista HTML del mismo WebForm.
12.- Dentro de esta vista veremos todo el código HTML creado para nuestro WebForm. Confirmemos que se encuentren las siguientes etiquetas:
"%@ Register TagPrefix="cc1" Namespace="skmMenu" Assembly="skmMenu" %"
Esta debe de estar al principio del código y sombreado en amarillo.
"?xml:namespace prefix = cc1 / cc1:menu id="Menu2" runat="server" /cc1:menu"
Esta indica la existencia de nuestro control en el WebForm. Dentro de esta etiqueta debe de encontrarse todo el código en base al formato que le dimos al Menu mediante la ventana de propiedades.
13.- Ahora debemos de crear el archivo “ejemplo1XML.xml” y agregarlo a nuestro proyecto. Menu Proyecto / Agregar Nuevo Elemento…, elegimos Archivo XML y le damos el mismo nombre que utilizamos en el código del paso 10.
14.- Dentro del archivo que acabamos de crear, insertaremos el siguiente código para crear nuestro Menu. La explicación de cada etiqueta viene comentada.
15.- Si todo salió bien, podrás dar clic en Iniciar para correr la aplicación. Se mostrará la página con el menú ejecutándose y funcionando.
Agregando funcionalidad para Visual C#
El ejemplo anterior fue solo para probar la creación de nuestro menú, pero no hizo más de lo que haría cualquier otro editor de Menú Desplegables. Ahora veamos como sería el código para ocasionar un PostBack al mismo WebForm y controlar el contenido de un Label.
1.- Sobre el ejemplo anterior, editemos el menú de la vista diseño mediante sus propiedades, específicamente:
LAYOUT=Horizontal (Para cambiar la orientación)
2.- Agrega un label, con propiedad ID=lbl1 y sin texto en la propiedad TEXT
3.- En vista de código, localiza el Page_Load y al código que creamos agrégale una condición if para agregarle texto al código solo si la página es recargada:
private void Page_Load(object sender, System.EventArgs e)
{
// Introducir aquí el código de usuario para inicializar la página
if (!Page.IsPostBack)
{
skm1.DataSource=Server.MapPath("ejemplo1XML.xml"); skm1.DataBind();
}
}
4.- Ahora, en el archivo ejemplo1XML.xml, agregaremos las siguientes etiquetas. Puedes colocarlas donde gustes, yo las puse a todos. Nota: Hay que quitarle el código de
5.- Regresemos ahora al diseño de nuestro WebForm. Presiona doble clic izquierdo sobre nuestro Menu para crear código en su evento click. Es necesario agregarle a ese evento el siguiente código:
private void skm1_MenuItemClick(object sender, skmMenu.MenuItemClickEventArgs e)
{
lbl1.Text = "Mensaje: " + e.CommandName;
}
Mediante el código, le agregamos a la propiedad Text de la Label “lbl” una cadena de texto entre comillas, concatenada con el mensaje e.CommandName que viene de la página ejemplo1XML.xml con el mensaje que agregamos.
6.- Ejecutamos la aplicación. Si todo sale bien probamos nuestro menú.
Espero que este pequeño manual sea de ayuda. Agradezco su atención.
Mauricio Moo Aguilar
mauriciomoo@gmail.com
Fuente: : www.skmmenu.com/
No hay comentarios.:
Publicar un comentario