JWindowsMenuStyle

Menús y navegación · jdashboardUI · B4J

JWindowsMenuStyle construye el menú lateral que acompaña a jdashboard_WindowsStyle. La clase administra el ancho reservado para el menú, los elementos, la selección, iconos o imágenes, encabezado, panel inferior y el reajuste automático cuando la ventana cambia de tamaño o termina una animación de maximizar/restaurar.

La documentación de esta página está basada en el código real de JWindowsMenuStyle.bas y en proyectos del paquete de ejemplos, entre ellos JLicenseGenerator, Antivirus style, Store Example y ejemplo ui 2.

Qué hace

• Integra el menú con una instancia de jdashboard_WindowsStyle.
• Cambia automáticamente el MenuType de la ventana según el estilo elegido.
• Implementa 3 estilos visuales base y documenta 4 modos de uso reales construidos con esos estilos.
• Permite elementos con imágenes o iconos de fuentes.
• Genera eventos EventName_OptionClicked.
• Gestiona hover y selección.
• Permite seleccionar una opción desde código.
• Puede mostrar encabezado con título y subtítulo.
• Puede añadir un panel personalizado al fondo del menú.
• Se reajusta durante resize y al terminar maximize / restore.
• Puede aplicar fuentes y colores globales al menú.

Declaración e inicialización

Private ui As jdashboard_WindowsStyle
Private menu As JWindowsMenuStyle

Primero inicializa tu ventana y después el menú:

menu.Initialize(ui)
menu.StyleMenu = menu.DESIGN_CLASSIC_LOGO
menu.InitializePanels(Me, MainForm, fx.Colors.RGB(96, 118, 146))

Firma:

Initialize(WinStyle As jdashboard_WindowsStyle)
InitializePanels(callback As Object, frm As Form, color_selected As Paint)

Initialize también activa las animaciones de jdashboard_WindowsStyle, configura inicialmente el estilo 1 y registra la clase para recibir la notificación de fin de maximize / restore.

Configura StyleMenu antes de llamar a InitializePanels, porque el estilo determina el ancho y la estructura del panel.

3 estilos base y 4 modos de uso

Al revisar la implementación completa de JWindowsMenuStyle.bas y los proyectos del ZIP, la forma más precisa de describir la API es:

• 3 estilos visuales base realmente implementados por la lógica de layout y creación de items.
• 4 modos de uso reales visibles en los proyectos de ejemplo, porque el estilo clásico puede componerse de dos maneras claramente diferentes.
• La constante DESIGN_MODERN_MENU = 4 existe en la API, pero en esta versión no implementa un cuarto renderer independiente: setStyleMenu(4) redirige jdashboard_WindowsStyle a Menu_type_1, mientras que InitializePanels, Add_MenuItem, Add_MenuItem2, hover, selección y cálculo de altura solo contienen casos específicos para 1, 2 y 3.

Estilos visuales base

Los 4 modos que muestran los ejemplos reales

Modo 1A — Classic + Header + Bottom Panel

Proyecto: License Generator.

Este modo usa el estilo base 1, pero sustituye el comportamiento visual dinámico del encabezado por:

menu.SetHeader("License Pro", "Enterprise Control")
menu.SetBottomPanel(CreateLicenseMenuPanel)

El resultado es un panel administrativo con título/subtítulo fijos y una acción independiente en la parte inferior.

Modo 1B — Classic Logo / identidad dinámica

Proyecto de referencia: Postman B4X / ejemplo clásico.

Es el uso directo de DESIGN_CLASSIC_LOGO: menú ancho, iconos a la izquierda y espacio superior para logo, imagen o título. Es apropiado para aplicaciones con una identidad visual fuerte y pocas secciones principales.

Modo 2 — Compact Icon

Proyecto: B4X Antivirus Pro.

menu.StyleMenu = menu.DESIGN_COMPACT_ICON

Características reales:

• ancho base: 140 px;
• alto por item: 100 px;
• icono encima del texto;
• texto centrado;
• deja más ancho libre para el contenido.

Modo 3 — Modern Indicator

Proyecto: DataFlow / Store Example.

menu.StyleMenu = menu.DESIGN_MODERN_INDICATOR

Características reales:

• ancho base: 261 px;
• alto por item: 46 px;
• icono a la izquierda;
• barra lateral de 7 px para hover y selección;
• mayor densidad vertical, ideal para dashboards.

Capturas reales

La galería situada al inicio de esta documentación utiliza las cuatro capturas originales suministradas: License Generator, Postman B4X, DataFlow y B4X Antivirus Pro. No se usan maquetas dentro del tema.

Añadir items con una imagen

menu.Add_MenuItem( _
    "Dashboard", _
    xui.Color_RGB(77, 166, 255), _
    "Dashboard", _
    fx.Colors.White, _
    File.DirAssets, _
    "dashboard.png", _
    "Open dashboard", _
    True)

Firma:

Add_MenuItem(
    EventName As String,
    backgroudcolor As Int,
    MainText As String,
    color_text As Paint,
    dirIcon As String,
    fileIcon As String,
    toltip As String,
    SelectItem As Boolean)

SelectItem = True marca inicialmente ese elemento como seleccionado.

Añadir items con un icono de fuente

menu.Add_MenuItem2( _
    "Home", _
    xui.Color_Transparent, _
    "Home", _
    fx.Colors.White, _
    Chr(0xF0E4), _
    fx.CreateFontAwesome(30), _
    fx.Colors.RGB(0, 105, 155), _
    "Home", _
    True)

Firma:

Add_MenuItem2(
    EventName As String,
    backgroudcolor As Int,
    MainText As String,
    color_text As Paint,
    Icon As String,
    FontIcon As B4XFont,
    color_icon As Paint,
    toltip As String,
    SelectItem As Boolean)

Puedes mezclar FontAwesome, Material Icons u otras fuentes compatibles.

Versiones simples

Si quieres usar el color global del menú y no necesitas tooltip:

menu.MenuTextColor = fx.Colors.White

menu.Add_MenuItemSimple( _
    "Products", _
    "Products", _
    File.DirAssets, _
    "products.png", _
    False)

Con icono de fuente:

menu.Add_MenuItem2Simple( _
    "Dashboard", _
    "Generator", _
    Chr(0xE871), _
    xui.CreateMaterialIcons(18), _
    fx.Colors.White, _
    True)

Estas variantes llaman internamente a Add_MenuItem y Add_MenuItem2.

Eventos

Cada item dispara una Sub basada en su EventName:

Private Sub Dashboard_OptionClicked
    Log("Dashboard")
End Sub

Private Sub Products_OptionClicked
    Log("Products")
End Sub

La clase comprueba internamente:

EventName & "_OptionClicked"

y ejecuta el evento con CallSubDelayed.

Seleccionar una opción desde código

menu.SelectMenuItem("Dashboard")

SelectMenuItem:

1. busca el elemento por EventName;
2. limpia visualmente la selección anterior;
3. aplica el color seleccionado;
4. muestra el indicador lateral si es estilo 3;
5. actualiza título/logo cuando existen datos asociados;
6. dispara Dashboard_OptionClicked.

Para limpiar solo la selección:

menu.ClearSelection

ClearSelection no dispara eventos.

Encabezado estático

Los estilos 1 y 3 pueden sustituir el logo dinámico por un encabezado:

menu.SetHeader("License Pro", "Enterprise Control")
menu.title_color(fx.Colors.RGB(128, 131, 255))
menu.TitleTextSize = 20
menu.SubtitleFont = xui.CreateDefaultBoldFont(11)
menu.SubtitleTextSize = 11

Este patrón aparece en el proyecto JLicenseGenerator del paquete de ejemplos.

Cuando SetHeader está activo, SetTitle deja de reemplazar el título según el item seleccionado.

Panel inferior personalizado

Puedes insertar un panel propio en la parte inferior:

menu.SetBottomPanel(CreateLicenseMenuPanel)

La clase:

• elimina el panel anterior si existía;
• calcula el contenido real del nuevo panel;
• ajusta su altura;
• lo coloca al fondo;
• recalcula el alto disponible para el CustomListView.

Esto sirve para botones como New License, perfil de usuario, acciones especiales o información de sesión.

Logo y título

Imagen

menu.setlogo(File.DirAssets, "home@512px.png")

Icono de fuente

menu.setLogo2( _
    Chr(0xF0E4), _
    fx.CreateFontAwesome(80), _
    fx.Colors.White)

Título

menu.SetTitle("Dashboard")

En estilo 2, los métodos de logo no hacen cambios porque ese estilo no utiliza el logo superior.

Personalización de fuentes

Cambiar título y todos los items:

menu.SetAllFonts(xui.CreateDefaultBoldFont(14))

Propiedades disponibles:

menu.TitleFont = xui.CreateDefaultBoldFont(22)
menu.TitleTextSize = 22

menu.SubtitleFont = xui.CreateDefaultFont(11)
menu.SubtitleTextSize = 11

menu.MenuTextColor = fx.Colors.LightGray

Acceso directo a las etiquetas:

Dim Title As Label = menu.TitleLabel
Dim Subtitle As Label = menu.SubtitleLabel

Esto permite aplicar utilidades externas, por ejemplo:

jdashboardUtils.ApplyGlow( _
    menu.TitleLabel, _
    fx.Colors.RGB(145, 86, 239), _
    25, _
    0.3)

Colores

Color del título:

menu.title_color(fx.Colors.Cyan)

Color del subtítulo:

menu.subtitle_color(fx.Colors.LightGray)

Color global usado por las variantes Simple:

menu.MenuTextColor = fx.Colors.White

Limpiar el menú

menu.MenuClear

Borra:

• todos los items del CustomListView;
• el mapa interno de datos de los items;
• y recalcula el layout.

Resize, maximize y restore

JWindowsMenuStyle está conectado con el ciclo de tamaño de jdashboard_WindowsStyle.

Durante InitializePanels, la clase registra listeners sobre:

• widthProperty;
• heightProperty.

Además, Initialize llama a:

mWinStyle.RegisterOnMaximizeComplete(Me)

y el callback público:

Public Sub OnMaximizeComplete
    UpdateLayout
    CallSubDelayed(Me, "RepositionBottomPanel")
End Sub

recalcula el menú al terminar la animación.

También puedes forzarlo manualmente:

menu.ResetLayout

Esto es especialmente útil después de cambios dinámicos en la interfaz.

Alturas reales según estilo

Cuando hay un BottomPanel, la clase calcula cuántos items completos caben para evitar que el último se vea cortado.

Ejemplo completo — menú clásico

Sub Process_Globals
    Private fx As JFX
    Private xui As XUI
    Private MainForm As Form
    Private ui As jdashboard_WindowsStyle
    Private menu As JWindowsMenuStyle
End Sub

Private Sub BuildMenu
    menu.Initialize(ui)
    menu.StyleMenu = menu.DESIGN_CLASSIC_LOGO
    menu.InitializePanels(Me, MainForm, fx.Colors.RGB(96, 118, 146))

    menu.MenuTextColor = fx.Colors.White

    menu.Add_MenuItem2Simple( _
        "Dashboard", _
        "Dashboard", _
        Chr(0xF0E4), _
        fx.CreateFontAwesome(30), _
        fx.Colors.RGB(0, 105, 155), _
        True)

    menu.Add_MenuItemSimple( _
        "Reports", _
        "Reports", _
        File.DirAssets, _
        "reports.png", _
        False)
End Sub

Private Sub Dashboard_OptionClicked
    Log("Dashboard")
End Sub

Private Sub Reports_OptionClicked
    Log("Reports")
End Sub

Ejemplo completo — menú compacto

Private Sub BuildCompactMenu
    menu.Initialize(ui)
    menu.StyleMenu = menu.DESIGN_COMPACT_ICON
    menu.InitializePanels(Me, MainForm, fx.Colors.RGB(50, 58, 79))

    menu.Add_MenuItem2( _
        "Status", _
        xui.Color_Transparent, _
        "Status", _
        fx.Colors.White, _
        Chr(0xF5F3), _
        icons.IconFontAwesomeSolid, _
        fx.Colors.RGB(86, 107, 133), _
        "Status", _
        True)

    menu.Add_MenuItem2( _
        "Privacy", _
        xui.Color_Transparent, _
        "Privacy", _
        fx.Colors.White, _
        Chr(0xE90D), _
        fx.CreateMaterialIcons(30), _
        fx.Colors.RGB(86, 107, 133), _
        "Privacy", _
        False)
End Sub

Ejemplo completo — menú con indicador

Private Sub BuildModernMenu
    menu.Initialize(ui)
    menu.StyleMenu = menu.DESIGN_MODERN_INDICATOR
    menu.InitializePanels(Me, MainForm, fx.Colors.RGB(77, 166, 255))

    menu.Add_MenuItem( _
        "Dashboard", _
        xui.Color_RGB(77, 166, 255), _
        "Dashboard", _
        fx.Colors.Black, _
        File.DirAssets, _
        "dashboard.png", _
        "", _
        True)

    menu.Add_MenuItem2( _
        "Users", _
        xui.Color_RGB(77, 166, 255), _
        "Users", _
        fx.Colors.Black, _
        Chr(0xF0C0), _
        icons.IconFontAwesomeSolid, _
        fx.Colors.RGB(190, 159, 130), _
        "", _
        False)
End Sub

API pública

Sin menú lateral

La opción No_menu pertenece a jdashboard_WindowsStyle, no a JWindowsMenuStyle.

Para una ventana sin barra lateral:

ui.MenuType = ui.No_menu

En ese caso no necesitas construir JWindowsMenuStyle.

Notas importantes

• La clase analizada está orientada a B4J.
• StyleMenu debe definirse antes de InitializePanels.
• Los estilos funcionales implementados en la creación de items son 1, 2 y 3.
• El estilo 2 ignora setlogo y setLogo2.
• SetHeader está pensado para los estilos 1 y 3.
• El menú usa internamente CustomListView.
• La clase evita cortar el último item cuando existe un panel inferior.
• Los eventos se generan con el patrón EventName_OptionClicked.
• SelectMenuItem sí dispara el evento; ClearSelection no.

Relacionados

• jdashboard_WindowsStyle — base de ventana y espacio reservado para el menú.
• jdashboardUtils — iconos, bordes, glow y utilidades usadas por el menú.
• JMenuBar — menús superiores desplegables; es un sistema diferente de JWindowsMenuStyle.