Web: Crear menús deslizantes con animación

Hace algún tiempo recibí una consula: ¿Es posible crear con Xojo menús que se presenten delizándose desde el lateral de la página en un proyecto Xojo Web? Tras un poco de investigación, y la inestimable ayuda de Greg O’Lone (Ingeniero de Xojo), la respuesta es sí.

Los ingredientes para esta particular receta pasan por la necesidad de utilizar un ContainerControl, responsable de incluir todos los elementos que tendrá nuestro menú (en el ejemplo, una serie de controles WebLabel que, al hacer clic sobre ellos, presentarán la página web correspondiente), una página web (WebPage) que actuará como plantilla para el resto de las páginas de nuestro sitio web, de modo que todas ellas presenten el botón u otro elemento que decidas, para presentar el menú, un par de estilos Web (asignar opacidad al menú y color de texto), y también un poco de JavaScript que será el encargado de aplicar la animación propiamente dicha. Si estás interesado en ver como todo esto combina para crear la solución, sigue leyendo.

Definir los estilos

Una vez hayas abierto Xojo y creado un nuevo proyecto Web, comenzaremos añadiendo un par de estilos (WebStyle) desde la Librería al Navegador de Proyectos. Selecciona el primero de ellos para acceder al Editor de Estilos cambiando su propiedad Name a MenuStyle en el Panel Inspector, y añadiendo la propiedad Background en el Editor de Estilos propiamente dicho para ajustar el color de fondo al que desees, teniendo en cuenta que has de ajustar también la propiedad Opacity de modo que, una vez aplicado sobre el menú, este sea ligeramente translúcido al presentarse sobre la página.

Selecciona después el segundo de los estilos añadidos al proyecto y cambia su propiedad Name a TextWhite (u otro de tu elección) en el Panel Inspector, añadiendo a continuación la propiedad Text Color en el Editor de Estilos propiamente dicho. Aquí probablemente querrás seleccionar un color que resalte sobre el color de fondo que hayas definido en el estilo anterior, puesto que este será el que se aplique sobre los controles Label del menú. En este ejemplo se ha ajustado el color a 100% blanco completamente sólido, sin opacidad.

Crear el menú con ContainerControl

A continuación, añade un ContainerControl al Navegador de Proyectos desde la Librería. Este es el componente que incluirá los enlaces a las diferentes páginas web, así como el botón cuya función será la de cerrar el menú deslizándolo (animación) sobre el margen derecho de la página.

Con el ContainerControl seleccionado en el Navegador de Proyectos, utiliza el Panel Inspector para definir las siguientes propiedades:

• Name: CCMenu
• Style: MenuStyle

No es necesario modificar el tamaño del elemento, dado que utilizaremos las opciones de bloqueo de posición una vez que lo añadamos sobre la WebPage que emplearemos como plantilla.

Lo que haremos será añadir desde la Librería el botón encargado de cerrar el menú, así como las etiquetas que apuntarán al resto de las páginas web enlazadas. No olvides definir en el Panel Inspector la propiedad Style a TextWhite (o el nombre que hayas empleado al definir el estilo de color de texto).

En este punto, el ContainerControl CCMenu debería tener un aspecto similar al mostrado en la siguiente imagen:

Definir el comportamiento del menú

Ahora es el momento de definir el comportamiento que tendrá el ContainerControl cadaa vez que el usuario de nuestro sitio Web quiera mostrar u ocultar el menú. Para ello, añade un nuevo método sobre CCMenu utilizando la siguiente signatura:

ShowMenu( show as Boolean = True )

Y marcando su ámbito (Scope) con el valor Private (privado). Luego, introduce el siguiente código en el Editor de Código resultante:

Dim sa() As String

// Obtenemos el identificador único
// asociado con el ContainerControl
sa.Append "var el = document.getElementById('" + Me.ControlID + "');"

// y obtenemos su propuedad de estilo
sa.Append "var st = el.style;"

// Si la variable 'show' es True entonces
// significa que queremos mostrar el menú

If show Then

  // Ajustamos las propiedades de posición y animación
  // para que se muestre deslizándose desde
  // el margen derecho de la página

  sa.Append "st.transitionProperty = 'right';"
  sa.Append "st.transitionDuration = '1s';"
  sa.Append "st.transitionTimingFunction = 'ease-in-out';"
  sa.Append "st.right = '0px';"

Else

  // De lo contrario significa que queremos
  // ocultar el menú, animándolo hacia la derecha
  // de la página, de modo que ajustamos
  // las propiedades de animación
  sa.Append "st.right =  '-" + str(me.width) + "px';"
End If

// Creamos la sentencia JavaScript a ejecutar
Dim js As String = Join(sa, "")

// Y ejecutamos el código JavaScript sobre la página
ExecuteJavaScript(js)

Si bien este es el método que realmente hará el trabajo, añadiremos un par de métodos adicionales que simplificarán aun más la tarea de mostrar u ocultar el menú. Añade por tanto el primero de estos métodos en el ContainerControl CCMenu, utilizando los siguientes valores en el Panel Inspector:

• Method Name: Show
• Scope: Public

En el Editor de Código asociado nos limitaremos a introducir la siguiente línea:

ShowMenu(True)

Esto es, se limita a llamar al método privado definido previamente pasando el valor True; lo que indica que deseamos presentar el menú.

Añade el segundo método, utilizando los siguientes valores:

• Method Name: Hide
• Scope: Public

En el Editor de Código asociado nos limitaremos a introducir la siguiente línea:

ShowMenu(False)

Es decir, llamamos al método privado pasando el valor False, lo que indica que deseamos ocultar el memnú.

Con todos los métodos definidos, selecciona el botón añadido al ContainerControl y cambia su nombre a Close utilizando el Panel Inspector. A continuación, añade el evento Action e introduce la siguiente línea de código:

Hide

Esto es, cuando se pulse el botón se llamará al método encargado de ocultar el ContinerControl sobre la página web.

Ahora es el momento de añadir funcionalidad a las etiquetas (Label) encargadas de mostrar la página web asociada; lo que vendrían a ser las opciones de menú propiamente dichas. En este caso he optado por utilizar una técnica realmente sencilla, para simplificar el ejemplo al máximo y centrar el foco en el tema principal del tutorial. Para ello, el texto mostrado por cada etiqueta se corresponde con el nombre de cada una de las páginas. Por tanto, selecciona la primera de las etiquetas añadidas y utiliza el Panel Inspector para asignar la siguiente propiedad:

• Text: WebPage1

Añadiendo a continuación el Manejador de Evento MouseDown e introduciendo el siguiente código en el Editor de Código asociado:

If Me.Page.Name = Me.Text Then Exit

WebPage1.Show

Repetiremos ahora el proceso con la segunda de las etiquetas utilizando el siguiente valor en el Panel Inspector:

• Text: WebPage2

Y el siguiente código en el Manejador de Evento MouseDown:

If Me.Page.Name = Me.Text Then Exit

WebPage2.Show

Con esto ya habremos finalizado todos los pasos para crear nuestro menú.

Crear la página web plantilla

Ahora es el momento de crear la página web que hará las funciones de plantilla, de modo que el menú esté disponible para todas las páginas web que deriven de ella como subclases.

Añade una nueva Página Web (WebPage) al proyecto y utiliza el Panel Inspector para cambiar su nombre a WPBase. A continuación, añade el ContainerControl CCMenu desde el Navegador de proyectos y un botón desde la Librería, de modo que el resultado final del diseño sea el mostrado en la siguiente imagen:

Observa los ajustes de bloqueo de posición para el ContainerControl mostrados en el Panel Inspector, de modo que este mantenga en todo momento la altura y ancho correspondientes a la página.

A continuación, selecciona el botón y añade el Manejador de Evento Action introduciendo el siguiente código en el Editor de Código resultante:

ccmenu1.Show

Como puedes ver, se limita a llamar al método público Show que habíamos definido en nuestro ContainerControl para mostrar el menú. Esto es todo lo que hemos de hacer.

Crear páginas Web de ejemplo

Con todo lo anterior realizado, ya tenemos todo lo necesario para poner nuestro proyecto en funcionamiento. Par esto, añadiremos un par de páginas web adicionales (WebPage) desde la Librería sin modificar sus nombres (recuerda que estos son los que utilizarán nuestras opciones de menú para mostrar una página u otra).

Lo único importante aquí es que selecciones cada una de las páginas en el Navegador de Proyectos y modifiques su propiedad Super para que se corresponda con WPBase para que hereden los elementos de la plantilla creada en el paso anterior. Adicionalmente, añade sobre cada una de las páginas diferentes elementos de interfaz de usuario, de modo que puedas diferenciarlas cuando las selecciones en el menú creado.

Con todo lo anterior, ¡ya sólo queda que pulses el botón Run para poner el proyecto en marcha y ver el funcionamiento del menú! Y si lo deseas, puedes descargar el proyecto de ejemplo utilizado en este tutorial desde este enlace.