Tutorial: Crear un Control personalizado de Botón en Xojo (Cuarta Parte)

A continuación encontrarás traducido al Castellano el artículo escrito por Gabriel Ludosanu y publicado originalmente en el Blog oficial de Xojo.

En la tercera parte de esta serie de entregas logramos que nuestro CanvasButton mostrase varios de sus atributos en el Panel Inspector: colores, radio de redondeo para las esquinas, etc. En este artículo añadiremos la capacidad de foco mediante teclado, de modo que puedas:

• Utilizar la tecla Tabulador para que el control gane el foco.
• Añadir el habitual anillo de enfoque cuando el control tenga el foco.
• Obtener el foco cuando se haga clic sobre el control.

1. Registrar el estado de foco

Añade una propiedad privada para registrar cuando el botón tien el foco y cuando lo pierde:

  Private IsFocused As Boolean = False

2. Responder a los Eventos de Foco

Implementa los eventos FocusReceived y FocusLost para que podamos ajustar la propiedad en consonancia y forzar el redibujado del control:

  Sub FocusReceived()
    If Enabled And AllowFocusRing Then
      IsFocused = True
      Refresh(False)
    End If
  End Sub
 
  Sub FocusLost()
    If Enabled And AllowFocusRing Then
      IsFocused = False
      Refresh(False)
    End If
  End Sub

3. Obtener el foco al hacer clic sobre el control

Modifica el código disponible en el evento MouseDown para llamar a SetFocus. Ahora, al hacer clic sobre el botón también le proporcionará el foco de forma inmediata:

  Function MouseDown(x As Integer, y As Integer) As Boolean
    #Pragma unused x
    #Pragma unused y
 
    If Enabled Then
      IsPressed = True
      SetFocus       // ← new
      Refresh(False)
      Return True
    Else
      Return False
    End If
  End Function

4. Dibujar el anillo de enfoque

En el evento Paint, añade el siguiente código justo tras el código que se encarga de dibujar el borde:

// … after the border code …
If IsFocused And AllowFocusRing Then
  g.DrawingColor = Color.HighlightColor
  g.PenSize = 1
  // Inset by 2px so it sits inside the border
  g.DrawRoundRectangle(2, 2, g.Width-4, g.Height-4, CornerRadius-2, CornerRadius-2)
End If

5. Activa el Foco para el Canvas

Por omisión, el DesktopCanvas no aceptará el foco… de modo que has de activar la opción AllowFocus en el Inspector cuando añadas un CanvasButton a una ventana.

¡Hora de probarlo!

Ejecuta la app, pulsa la tecla Tabulador para que el botón obtenga el foco; deberías de ver el anillo de enfoque.

¡Permanece alerta para más actualizaciones asombrosas!

Descarga el código fuente de este proyecto en GitHub: