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

Menús y formularios con qb-menu y qb-input

La forma más rápida de tener menús en QBCore sin escribir HTML: qb-menu para listas y qb-input para formularios.

Antes de montar tu propia NUI, QBCore te da dos recursos listos: qb-menu (menús de opciones) y qb-input (formularios). Para el 80% de los casos sobra con esto.

Un menú con qb-menu

lua

-- client.lua
exports['qb-menu']:openMenu({
  { header = 'Taller mecánico', isMenuHeader = true },
  {
    header = 'Reparar vehículo',
    txt = 'Cuesta $500',
    params = { event = 'mecanico:client:reparar' },
  },
  {
    header = 'Cerrar',
    params = { event = 'qb-menu:client:closeMenu' },
  },
})

qb-menu

Un formulario con qb-input

lua

local dialog = exports['qb-input']:ShowInput({
  header = 'Transferir dinero',
  submitText = 'Enviar',
  inputs = {
    { type = 'number', name = 'cantidad', text = 'Cantidad', isRequired = true },
  },
})

if dialog and dialog.cantidad then
  local cantidad = tonumber(dialog.cantidad)
  TriggerServerEvent('banco:server:transferir', cantidad)
end

qb-input

El menú y el input son SOLO interfaz. Lo que el jugador elige se manda al servidor por un evento, y el servidor valida y ejecuta. Nunca confíes en lo que vuelve del input.

Practica lo aprendido

0/3

Test

¿Qué te resuelven qb-menu y qb-input sin tener que escribir HTML?

Rellena los huecos

Completa el export que abre un menú de qb-menu con una cabecera.

1exports['qb-menu']:({

2 { header = 'Tienda', isMenuHeader = true },

3 { header = 'Comprar', txt = '', params = { event = 'mi:evento', args = { item = 'water' } } },

4})

Pista

Es el método que recibe el array de opciones del menú.

Corrige el error

Este qb-input no devuelve nada al alumno. Falta guardar lo que devuelve ShowInput en una variable para poder leer la cantidad.

Este código tiene un fallo:

1exports['qb-input']:ShowInput({

2 header = 'Cantidad',

3 submitText = 'OK',

4 inputs = { { name = 'cantidad', type = 'number', text = '¿Cuántos?' } },

5})

6print(dialog.cantidad)

Reescríbelo corregido:

Pista

ShowInput DEVUELVE una tabla con los valores; tienes que capturarla con 'local dialog = ...'.

Reto: prográmalo tú

Haz un qb-menu con dos opciones (Depositar, Retirar) que disparen sendos eventos de cliente.

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

Ver pista

exports['qb-menu']:openMenu con un array de { header, params = { event = '...' } }.

Escribe aquí tu solución:

Siguiente: ox_lib: la alternativa moderna

¿Qué tal esta lección?