|
Para desarrollar una aplicación Web, no solo es necesario cumplir con la lógica de negocios que el sistema debe implementar, mucho más si esta aplicación va a estar colgada sobre Internet y en donde nuestros socios de negocios van a poder observar la calidad y vistosidad de la misma. También es necesario darle un valor agregado en cuanto a la amigabilidad frente a nuestros usuarios finales, a la facilidad de uso y navegabilidad de sus contenidos.
Una de las partes mas importantes de nuestra aplicación Web es sin duda alguna el Menú ya que será la parte con la que mas interactuaran nuestros usuarios, dada la importancia que acabamos de definir para esta parte de una aplicacion, los desarrolladores generalmente recurrimos a Controles de externos y muchas veces controles por los que se debe pagar cierta cantidad de dinero.
Ahora con la liberación de Visual Studio 2005 y el Framework 2.0 versión beta, trae consigo un control denominado Menu que es el que usaremos ahora para desarrollar un ejemplo de como poder cargar dinámicamente desde la base de datos, toda una estructura de menús de acuerdo a lo que se requiera publicar en la Web.
Base de Datos
Para iniciar este ejemplo primero debemos crear una tabla en la base de datos de SQL Server que pueda contener a todas las opciones que va a presentar nuestro menu, ahora como vamos a tener varios ítems del menú, además un ítem del menú a la vez puede contener varios SubItems y asi sucesivamente, esto nos hace pensar en una tabla estructurada de tal forma que se pueda generar una estructura jerarquica a partir de los datos que contenga y de las relaciones entre estos datos, lo que conlleva a generar una tabla que se relaciona a si misma, en donde además de generar un código para cada elemento se debe definir además un código del padre a quien pertenece ese elemento.
La estructura de la tabla quedaría de la siguiente manera:
MenuId. Es el código que va a tener cada Ítem de Menú.
Descripción. Descripción que aparecerá en el Menú.
PadreId. Es el código del Ítem de Menú de quien es hijo cada registro, en el caso de uno de los elementos de nivel superior (root), este código seria el mismo que MenuId.
Posición. Es la posición que va a tener en el árbol que se genere para cada ítem, por ejemplo si es el primer hijo tendrá posición 1, si es el segundo posición 2 y así sucesivamente.
Icono. Imagen que estará a la izquierda de la descripción del Ítem.
Habilitado. Indica si un determinado Ítem esta habilitado para mostrarse.
Url. La url a la que se redireccionará nuestra Web en caso de dar click en el ítem.
FechaCreacion. Fecha en que se ha creado este Ítem ( para auditoria).
UsuarioCreacion. Usuario que ha creado este Ítem ( para auditoria).
FechaModificacion. Ultima fecha en que se ha modificado este Ítem ( para auditoria).
UsuarioModificacion. Ultimo usuario que ha modificado este Ítem ( para auditoria).
De esta manera hemos definido nuestra tabla que se encargara de almacenar la información necesaria para el funcionamiento de nuestro ejemplo, luego de esto lo que necesitamos es definir un procedimiento almacenado que nos pueda proveer la información que se requiere para mostrar nuestro menú dinámico, en nuestro caso será un procedimiento sencillo que nos listara todos los ítems que están Habilitados para mostrarse, además ordenándolos por la Posición para de esta manera se muestren ordenados nuestros elementos del menú sin necesidad de agregar ninguna logica adicional.
El Procedimiento almacenado quedaría de la siguiente manera:
CREATE PROCEDURE dbo.ObtenerOpcionesMenu
AS
SET NOCOUNT ON
SELECT MenuId, Descripcion, Posicion, PadreId, Icono, Habilitado, Url
FROM dbo.Menu
WHERE Habilitado = 1
SET NOCOUNT OFF
Figura 2. Procedimiento Almacenado.
|
Presentación
Luego de ya tener el Procedimiento almacenado, pasamos a crear el Web site, para esto primero cargamos nuestro Visual Studio .NET 2005, y vamos a File , New Web site y creamos nuestro proyecto Web denominado menuDemo tal como se muestra en la siguiente figura. ahi podemos notar los diferentes tipos de proyectos existentes solo para crear sitios web, en esta version se ha separado la creacion de webs con los otros tipos de proyectos existentes.
Luego de crear nuestro Web Site por defecto se agrega un formulario Web denominado Default.aspx sobre el cual agregaremos nuestro Menú, para esto vamos a la caja de herramientas de Visual Studio donde encontraremos un conjunto de separadores o Tabs, en ese conjunto de controles buscamos el tab denominado Navigation y dentro de el encontraremos a nuestro control Menu, lo seleccionamos y arrastramos sobre el diseñador de la pagina, le ponemos por Name mnuPrincipal.
La presentación inicial del menú es muy pobre en cuanto a colores, esto lo notaran al momento en q este ya se encuentre sobre el formulario , desde luego que podríamos elegir darle un auto formato como se puede hacer con controles como el calendario o la grilla, para esto se selecciona el menú en el diseñador, se da botón secundario , se elige Auto Format... y se puede elegir entre varios formatos ya definidos, o desde luego se puede personalizar de la manera que a nosotros nos parezca conveniente, puede ser de acuerdo a los colores que son el estándar de la empresa para la que estamos desarrollando el aplicativo Web.
Ahora pasemos a la parte mas fundamental de este ejemplo, que es la carga dinámica de los diferentes ítems que tendrá nuestra aplicación en base a jerarquías definidas en la base de datos. lo primero que debemos hacer es conectarnos a la base de datos para poder invocar el procedimiento almacenado que antes definimos, luego de eso pasaremos a llenar el menú de una forma recursiva ya que así lo definimos en base de datos, el código necesario con sus respectivos comentarios seria el siguiente:
Imports System.Data
Imports System.Data.SqlClient
Partial Class Default_aspx
Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
'Traemos los datos de
de datos.
Dim dtMenuItems As New DataTable
'Conexion a la base de datos donde
esta nuestra tabla Menú.
Dim cnDatos As New SqlConnection("server=localhost;DataBase=DBApp;Integrated
Security=SSPI;")
'se invoca al procedimiento almacenado
Dim daMenu As New SqlDataAdapter("ObtenerOpcionesMenu",
cnDatos)
daMenu.SelectCommand.CommandType
= CommandType.StoredProcedure
'llenamos el datatable
daMenu.Fill(dtMenuItems)
'recorremos el datatable para agregar
los elementos de que estaran en la cabecera del menú.
For Each drMenuItem As Data.DataRow
In dtMenuItems.Rows
'esta condicion indica q son elementos padre.
If
drMenuItem("MenuId").Equals(drMenuItem("PadreId")) Then
Dim mnuMenuItem As New MenuItem
mnuMenuItem.Value = drMenuItem("MenuId").ToString
mnuMenuItem.Text = drMenuItem("descripcion").ToString
mnuMenuItem.ImageUrl = drMenuItem("Icono").ToString
mnuMenuItem.NavigateUrl = drMenuItem("Url").ToString
'agregamos el Ítem al menú
mnuPrincipal.Items.Add(mnuMenuItem)
'hacemos
un llamado al metodo recursivo encargado de generar el árbol del menú.
AddMenuItem(mnuMenuItem,
dtMenuItems)
End
If
Next
End If
End Sub
Private Sub AddMenuItem(ByRef mnuMenuItem As MenuItem,
ByVal dtMenuItems As Data.DataTable)
'recorremos cada elemento del datatable para poder determinar cuales
son elementos hijos
'del menuitem dado pasado como parametro ByRef.
For Each drMenuItem As Data.DataRow In dtMenuItems.Rows
If drMenuItem("PadreId").ToString.Equals(mnuMenuItem.Value)
AndAlso _
Not drMenuItem("MenuId").Equals(drMenuItem("PadreId"))
Then
Dim mnuNewMenuItem
As New MenuItem
mnuNewMenuItem.Value
= drMenuItem("MenuId").ToString
mnuNewMenuItem.Text
= drMenuItem("descripcion").ToString
mnuNewMenuItem.ImageUrl
= drMenuItem("Icono").ToString
mnuNewMenuItem.NavigateUrl
= drMenuItem("Url").ToString
'Agregamos el Nuevo
MenuItem al MenuItem que viene de un nivel superior.
mnuMenuItem.ChildItems.Add(mnuNewMenuItem)
'llamada recursiva
para ver si el nuevo menú ítem aun tiene elementos hijos.
AddMenuItem(mnuNewMenuItem,
dtMenuItems)
End If
Next
End Sub
End Class
|
Ahora ya implementado el método recursivo encargado de generar el menú, de acuerdo a la información almacenada en base de datos que mostrare en la figura siguiente, podríamos tener un menú de la siguiente manera:
Claro que si observamos bien notaremos que no es nada llamativo, ahora si vamos a proceder a ponerle los colores adecuados, con los anchos apropiados también, además de darle una presentación horizontal, en la cabecera de nuestra pagina, es muy recomendable que nuestro Menú vaya en una Master Page en donde se ubiquen los métodos que se encarguen de generarlo, y cada una de las Paginas de Contenido (Content Pages) deben tener la estructura de la misma Master Page para así guardar uniformidad en todas las paginas de la aplicación. Pasamos ahora a aplicar ciertos formatos a nuestro menú, el cual quedaría con el siguiente código HTML:
<asp:Menu ID="mnuPrincipal" MaximumDynamicDisplayLevels ="2" Runat="server" Height="20px"
Orientation="Horizontal" BackColor="#b1c3d9" ForeColor="#336699" Font-Names="Verdana"
Font-Size="11px" StaticSubMenuIndent="" DynamicHorizontalOffset="2" Font-Bold = "true"
BorderStyle="Solid" BorderColor="#336699" BorderWidth="1px">
<DynamicMenuStyle BackColor="#B1C3D9" BorderWidth="1px" BorderColor="#336699"
Width="180px"/>
<DynamicMenuItemStyle HorizontalPadding="5" VerticalPadding="2"
/>
<DynamicHoverStyle ForeColor="White" Font-Bold="True" BackColor="#336699"/>
<StaticMenuStyle BackColor="#B1C3D9" BorderWidth="1px" BorderColor="#336699"/>
<StaticMenuItemStyle HorizontalPadding="5" VerticalPadding="2"
Width="180px"/>
<StaticHoverStyle ForeColor="White" Font-Bold="True" BackColor="#336699"/>
</asp:Menu>
|
Como podemos ver el menú se ha modificado para que tenga una mejor presentación, cada una de las propiedades definidas dentro del tag tienen una función especial de las cuales tenemos a MaximunDynamicDisplayLevels que viene a ser el numero máximo de subniveles permitidos para el menú y la propiedad Orientation podría ser horizontal o vertical. Ahora los tags dentro del menú están formados por dos grupos bien definidos, los que inician con Static que en si son elementos definidos para los elementos Root o elementos padre y los que inician Dynamic que son características que se aplican a los subitems del menú.
Luego de haber agregado los atributos antes mencionados, la presentación final del menú seria la siguiente.
Conclusiones.
La nueva versión de .NET se viene con muchas novedades bajo el brazo, con controles muy interesantes, de mucha funcionalidad y sobre todo muy fáciles de usar, que con un poco de ingenio nos van a permitir realizar aplicaciones diversas con características de buena performance y a la vez de navegabilidad y presentación al usuario final. El nuevo control Menú es uno de estos controles que encierra estas características y que da un valor agregado al trabajo que estemos realizando, evitando tener que estar preocupándonos por ir a la Internet y buscar controles de terceros que son complicados de utilizar o que implican un alto coste el adquirirlos.
|
