Interfaces: menús, inputs y NUI · Lección 2/3 · 8 min

ox_lib: la alternativa moderna

Muchos servidores QBCore modernos usan ox_lib para menús, inputs y notificaciones. Conviene conocerlo.

ox_lib es una librería muy usada que aporta menús de contexto, diálogos de input, notificaciones y mucho más, con un look más cuidado. Cada vez más recursos QBCore la piden como dependencia.

Menú de contexto

lua

lib.registerContext({
  id = 'taller_menu',
  title = 'Taller mecánico',
  options = {
    { title = 'Reparar', description = 'Cuesta $500', event = 'mecanico:client:reparar' },
    { title = 'Salir', icon = 'xmark' },
  },
})
lib.showContext('taller_menu')

lib.registerContext

Input y notificación

lua

local input = lib.inputDialog('Transferir', {
  { type = 'number', label = 'Cantidad', required = true },
})
if input then
  TriggerServerEvent('banco:server:transferir', tonumber(input[1]))
end

lib.notify({ title = 'Listo', description = 'Transferencia enviada', type = 'success' })

lib.inputDialog / lib.notify

Para usar ox_lib, añade '@ox_lib/init.lua' en shared_scripts de tu fxmanifest y declara dependency 'ox_lib'. La decisión de usar qb-menu/qb-input u ox_lib depende de lo que ya monte tu servidor; conviene seguir el estándar de tu base.

Practica lo aprendido

0/3

Ordena el código

Ordena un menú de contexto de ox_lib que se registra y se muestra.

Coloca las líneas en el orden correcto con las flechas.

options = {

},

})

lib.showContext('mi_menu')

title = 'Tienda',

id = 'mi_menu',

lib.registerContext({

{ title = 'Comprar', icon = 'cart', onSelect = function() TriggerEvent('tienda:comprar') end },

Pista

Primero registras el contexto con su id y opciones; al final lo muestras con ese mismo id.

Rellena los huecos

Completa la llamada de ox_lib que pide datos al jugador con un cuadro de input.

1local input = lib.('Título', {

2 { type = 'number', label = 'Cantidad' },

3})

4if input then TriggerServerEvent('banco:transferir', input[1]) end

Pista

Es el diálogo moderno de ox_lib; devuelve una tabla indexada (input[1], input[2]...).

Test

¿Cómo muestras una notificación de éxito con ox_lib?

Reto: prográmalo tú

Recrea el menú de cajero (Depositar/Retirar) de la lección anterior, pero con ox_lib (lib.registerContext).

Escríbelo tú en tu editor (VS Code) y pruébalo en tu servidor. Aquí se aprende haciéndolo, no copiando.

Ver pista

lib.registerContext({ id, title, options = {...} }) + lib.showContext(id); '@ox_lib/init.lua' en shared_scripts.

Escribe aquí tu solución:

← Menús y formularios con qb-menu y qb-input Siguiente: NUI propia: cuando los menús no bastan

¿Qué tal esta lección?