Crear una barra de navegación vertical para tu aplicación Web

A continuación encontrarás traducido al Castellano el artículo publicado originalmente en el blog de Xojo y escrito por Ricardo Cruz.

La composición de nuevos controles a partir de otros más básicos es algo que decididamente querrás explorar. En este artículo crearemos una barra de navegación vertical reutilizable, con animaciones, para tus proyectos Xojo Web.

Repositorio de Código: https://github.com/piradoiv/vertical-navigation-example
Descarga del proyecto de ejemplo: vertical-navigation-example

Breve introducción a la Metodología de Diseño Atómico

Si no has oído hablar del Diseño Atómico antes, te recomiendo que profundices un poco sobre este tema. Con este tipo de metodología en mente comenzaremos a crear los controles más básicos que podamos. Luego, iremos componiendo controles más complejos reutilizando los más básicos.

Recuerda que no tienes por qué seguir ciegamente las categorías propuestas de Átomos, Moléculas y Organismos, y tampoco pienses demasiado cuando los categorices. Siempre que puedas componer controles con otros controles resultará perfecto. Adáptalo a tus preferencias personales a la hora de crear software.

La idea combina a la perfección con Xojo, y si bien crearemos unos cuantos controles web en este ejemplo, puedes aplicarlo a otras plataformas como Desktop o Mobile.

Este es un vídeo de Brad Frost, la persona tras la Metodología de Diseño Atómico.

¡Contenedores al Rescate!

En este caso no necesitaremos utilizar ningún control Web SDK, CSS o JavaScript; utilizaremos simplemente Contenedores de Xojo Web para crear nuestros Átomos y Moléculas.

Este es el aspecto que tendrá nuestra barra de navegación lateral al estilo de Twitter:

Crearemos algo similar. Mediante el Diseño Atómico, lo descompondremos en unos cuantos controles reutilizables:

Cada Átomo, Molécula y Organismo será un Contenedor. En la imagen anterior tenemos identificados cada uno de ellos.

• Tenemos un “Icono de enlace de navegación”, un Átomo, que mostrará uno de los iconos disponibles en Bootstrap. Como puedes observar en el ejemplo de Twitter, si el enlace está activo, entonces el icono se mostrará relleno.
• En el caso del Átomo de etiqueta podemos utilizar simplemente el control incluido de serie WebLabel. No hay necesidad de utilizar un Container en este caso.
• El enlace de navegación será una Molécula, compuesta por el icono y la etiqueta.
• El Indicador de Enlace Activo se moverá al enlace activo utilizando una animación.
• Por último, el Control de Navegación Vertical será un Organismo, combinando todo lo anterior en uno.

Icono de Enlace de Navegación

Este control es básicamente un Container con un ImageViewer. Técnicamente este podría ser simplemente una subclase de ImageViewer, pero utilizando un WebContainer también podemos indicar su ancho y altura iniciales.

Tendrá dos propiedades calculadas:

• Active As Boolean
• IconName As String

También tendrá un método privado ShowIcon. Cuando cambies tanto la propiedad Active como IconName, la propiedad calculada llamará a ShowIcon.

La magia se encuentra en ShowIcon:

Var iconColor As Color = If(mActive, Color.Black, Color.LightGray)
Var icon As String = If(mActive, mIconName + "-fill", mIconName)
IconImageViewer.Picture = WebPicture.BootstrapIcon(icon, iconColor)

El color del icono será o bien LightGray o Black, en función de si está activo o no. Hay un montón de iconos en Bootstrap con el sufijo “-fill”, así que los usaremos. Esto nos obligará a utilizar sólo los iconos que tengan dicho sufijo, pero tendremos que vivir con ello.

El truco final consiste en utilizar Inspector Behavior y exponer nuestras propiedades calculadas Active e IconName. Haz clic en NavigationLinkIcon y luego clic en Inspector Behavior:

Desde aquí puedes activar las casillas de verificación y definir sus valores iniciales:

Ahora que tenemos listo el Control, veamos cómo funciona por sí mismo:

¡Bien! Puedes reutilizar este Átomo en cualquier parte, incluyendo otros proyectos.

Control de Enlace de Navegación

Ahora crearemos nuestra Molécula NavigationLink combinando nuestro recién creado NavigationLinkIcon, una WebLabel y exponiendo una API

Crea un nuevo Container y sitúa los items dentro. Luego, añade algunas propiedades calculadas:

• Active
• Caption
• IconName

Cuando la propiedad cambie, sólo has de actualizar el control subyacente.

Un truco consiste en añadir un WebCanvas sobre los otros controles para que se pueda hacer clic sobre el control; implementa su evento Pressed y reenvíalo como una nueva Definición de Evento “Pressed”.

Si quieres mostrar un cursor apuntador cuando el usuario mueva el ratón sobre tu control, añade esta línea de código en el evento Opening del container:

Me.Style.Cursor = WebStyle.Cursors.Pointer

Este es el aspecto que tendrá en el IDE:

Vamos a probarlo:

Ya estamos más cerca.

Indicador de Enlace Activo

Ya tenemos creados la mayoría de los Átomos y Moléculas. El Indicador de Enlace de Navegación es tan simple y asociado con la barra lateral que no creo que merezca la pena el esfuerzo de crear un Átomo individual para ello.

Será suficiente con usar un WebRectangle con una o dos líneas de código en su evento Opening.

Control de Navegación Vertical

Ahora es el momento de combinar los Átomos y Moléculas para crear nuestro primer Organismo. Crea un nuevo Container llamado VerticalNavigation.

Suelta un WebRectangle sobre él. Define sus propiedades Left y Top a 0 e implementa su evento Opening con estas líneas de código:

Me.Style.BorderThickness = 0
Me.Style.AddTransition("top", 0.2)

Esto eliminará el borde que se incluye por defecto con este control. También indicará al navegador que anime el rectángulo cuando varíe su posición Top.

El color de fondo del rectángulo será gris claro, pero puedes cambiarlo a tu gusto.

Para la API que queremos exponer, añade estos Métodos:

• AddLink(caption As String, icon As String, active As Boolean = False)
• HandleLinkPressed(sender As NavigationLink)
• SetActiveLink(index As Integer)

AddLink y SetActiveLink son Public, HandleLinkPressed será un Método Privado.

Código para AddLink:

// We will create a new NavigationLink instance
// and set the properties we're receiving.
Var link As New NavigationLink
link.Caption = caption
link.IconName = icon
 
// For its pressed event, we will handle it
// internally in the HandleLinkPressed method.
AddHandler link.Pressed, WeakAddressOf HandleLinkPressed
 
// We will place it programatically in  the container.
Const padding = 10
Var linkTop As Integer = mLinks.Count * (link.Height + padding)
link.EmbedWithin(Self, padding, linkTop, Self.Width - padding, link.Height)
 
// A reference for this NavigationLink will be
// needed later, so we will store it internally.
mLinks.Add(link)
 
// Finally, if the item is active, we will
// handle it just like if it's been pressed
// by the user.
If active Then
  SetActiveLink(mLinks.LastIndex)
End If

Código para HandleLinkPressed:

SetActiveLink(mLinks.IndexOf(sender))
RaiseEvent Pressed(sender)

Y por último el código para SetActiveLink:

// Here we will loop through the NavigationLink
// references we have and enable or disable the
// Active property, depending on the index
// comparison.
For i As Integer = 0 To mLinks.LastIndex
  mLinks(i).Active = i = index
Next
 
// Move the visual active indicator to the
// NavigationLink position.
ActiveLinkIndicator.Top = mLinks(index).Top

Resultado Final

Ya está todo listo, suelta su VerticalNavigation en tu WebPage y añade unos cuantos enlaces dentro de su evento Opening:

// Setting the third parameter to "True" will set that link as Active.
Me.AddLink("Home", "house")
Me.AddLink("Explore", "binoculars", True)
Me.AddLink("Notifications", "bell")

Deberías obtener algo similar a esto:

¡Enhorabuena! Has creado una barra de navegación vertical con transiciones y usando algunos principios de Diseño Atómico.