OfficeColorPicker

Qué es OfficeColorPicker

OfficeColorPicker es un selector de colores para B4J inspirado en la paleta clásica de Microsoft Office.

Está pensado para elegir colores rápidamente desde una cuadrícula conocida: color seleccionado, colores de tema, variantes claras y oscuras, colores estándar y un botón opcional More Colors....

A diferencia de JColorPicker, que ofrece selección HSV continua, alpha y valor hexadecimal, OfficeColorPicker usa una paleta discreta estilo Office. Resulta especialmente útil en Ribbon UI, editores de documentos, formatos, firmas y herramientas de diseño.

Estructura del control

OfficeColorPicker
├── Selected Color
├── Theme Colors
│   ├── 10 colores base
│   └── 6 variantes por columna
├── Standard colors
│   └── 10 colores estándar
└── More Colors... (opcional)

Cuando el usuario pulsa una casilla de color:

1. SelectedColor cambia al nuevo color.
2. La vista previa superior se actualiza.
3. La casilla elegida recibe un borde naranja.
4. Se dispara el evento ColorSelected.

Dependencias

El código real del módulo usa principalmente:

• jFX;
• XUI;
• B4XView;
• JavaObject;
• janimations.

JavaObject se utiliza para el cursor y los eventos de hover de JavaFX. janimations se usa para el efecto Ripple al seleccionar un color.

Para un uso normal no necesitas manejar esas piezas directamente.

Uso desde el Designer

Agrega OfficeColorPicker como Custom View en el Designer.

Supongamos que el control se llama OfficeColorPicker1.

Private Sub OfficeColorPicker1_ColorSelected(Clr As Int)
    Log("Color seleccionado: " & Clr)
End Sub

El color actual también se puede leer directamente:

Dim Clr As Int = OfficeColorPicker1.SelectedColor

Ejemplo completo

Private Sub OfficeColorPicker1_ColorSelected(Clr As Int)
    pnlPreview.Color = Clr

    Dim HexColor As String
    HexColor = "#" & Bit.ToHexString(Clr).ToUpperCase

    Log("Nuevo color: " & HexColor)
End Sub

Private Sub OfficeColorPicker1_MoreClick(Clr As Int)
    Log("El usuario quiere más colores. Color actual: " & Clr)
End Sub

El botón More Colors... no abre automáticamente otro selector. Su función es disparar MoreClick para que la aplicación decida qué mostrar.

Integración con JColorPicker

Una combinación práctica es usar:

• OfficeColorPicker para selección rápida.
• JColorPicker para seleccionar cualquier color con mayor precisión.

Private Sub OfficeColorPicker1_MoreClick(Clr As Int)
    AdvancedColorPicker.SelectedColor = Clr
    AdvancedColorPicker.SetVisible(True)
End Sub

Así puedes mantener la experiencia tipo Office y ofrecer un selector avanzado solo cuando haga falta.

Crearlo desde código

OfficeColorPicker también expone AddToParent.

Private OfficePicker As OfficeColorPicker

Private Sub CreateOfficePicker
    OfficePicker.Initialize(Me, "OfficePicker")

    OfficePicker.ThemeTitle = "Colores del tema"
    OfficePicker.ButtonText = "Más colores..."
    OfficePicker.ShowMoreColors = True
    OfficePicker.TextColor = xui.Color_Black
    OfficePicker.BackgroundColor = xui.Color_White
    OfficePicker.SelectedColor = 0xFF4472C4

    OfficePicker.AddToParent(pnlColors, 296)
End Sub

Eventos:

Private Sub OfficePicker_ColorSelected(Clr As Int)
    Log(Clr)
End Sub

Private Sub OfficePicker_MoreClick(Clr As Int)
    Log("Más colores: " & Clr)
End Sub

AddToParent

La firma pública real es:

AddToParent(Parent As B4XView, Width As Int)

El componente crea internamente su base, calcula la altura final, la agrega al Parent y ajusta el tamaño del contenedor al ancho y alto calculados.

Esto es especialmente útil para paneles flotantes, popups o menús personalizados.

Eventos

ColorSelected

Se dispara cuando el usuario pulsa una casilla.

Private Sub OfficePicker_ColorSelected(Clr As Int)
    Log(Clr)
End Sub

Clr contiene el color B4X / ARGB seleccionado.

MoreClick

Se dispara al pulsar More Colors....

Private Sub OfficePicker_MoreClick(Clr As Int)
    Log(Clr)
End Sub

Clr contiene el color seleccionado en ese momento.

SelectedColor

Establecer:

OfficePicker.SelectedColor = 0xFF5B9BD5

Leer:

Dim Clr As Int = OfficePicker.SelectedColor

Si la vista ya existe, la previsualización se actualiza inmediatamente y el control intenta resaltar una casilla equivalente dentro de la paleta.

Colores de tema

La implementación utiliza diez colores base y genera seis variantes verticales para cada columna.

Los factores reales son:

+0.8
+0.6
+0.4
 0
-0.25
-0.5

Los valores positivos aclaran el color hacia blanco. Los negativos lo oscurecen hacia negro.

Esto produce la cuadrícula característica de Office sin necesidad de declarar manualmente cada tono.

Colores estándar

La fila inferior incluye diez colores predefinidos:

• rojo oscuro;
• rojo;
• dorado;
• amarillo;
• verde claro;
• verde;
• cian;
• azul;
• azul oscuro;
• púrpura.

Hover y selección

Cada casilla usa eventos JavaFX de entrada y salida del mouse.

Al pasar el mouse se muestra un borde naranja. La casilla seleccionada mantiene un borde naranja de 2dip y las demás usan un borde gris fino.

Al seleccionar también se ejecuta un efecto Ripple mediante janimations.

AutoFitWidth

AutoFitWidth calcula un ancho aproximado según el título más largo.

OfficePicker.AutoFitWidth

El ancho mínimo calculado es 200.

Puede ser útil al traducir títulos o cambiar el tamaño de fuente.

Propiedades del Designer

Propiedades públicas en ejecución

OfficePicker.TextColor = xui.Color_DarkGray
OfficePicker.BackgroundColor = xui.Color_White
OfficePicker.FontSize = 12
OfficePicker.ThemeTitle = "Colores del tema"
OfficePicker.ButtonText = "Más colores..."
OfficePicker.ShowMoreColors = True
OfficePicker.SelectedColor = 0xFF4472C4

BackgroundColor se aplica inmediatamente si la base ya existe. FontSize reconstruye la interfaz.

Si usas AddToParent, configura ThemeTitle, ButtonText, ShowMoreColors y TextColor antes de llamar a AddToParent para construir la interfaz directamente con esos valores.

API pública

OfficeColorPicker vs JColorPicker

No son componentes duplicados: cubren dos formas diferentes de seleccionar color.

Patrón recomendado

OfficePicker.Initialize(Me, "OfficePicker")
OfficePicker.SelectedColor = xui.Color_Blue
OfficePicker.AddToParent(pnlColorMenu, 296)

Private Sub OfficePicker_ColorSelected(Clr As Int)
    CurrentColor = Clr
    UpdatePreview
End Sub

Private Sub OfficePicker_MoreClick(Clr As Int)
    ShowAdvancedColorDialog(Clr)
End Sub