DOM UI

= DOM UI =

== Español ==

'''DOM UI''' es una extensión que permite crear elementos de interfaz sobre el escenario, como campos de texto, áreas de texto, listas desplegables, botones, etiquetas, casillas de verificación y grupos de opciones. Cada elemento se identifica mediante un ID y puede controlarse desde los bloques del proyecto.

=== Funciones principales ===

Esta extensión permite:

• crear controles de interfaz sobre el escenario
• detectar cuándo cambia cualquier control o uno concreto
• mover y redimensionar elementos
• mostrar, ocultar y eliminar controles
• leer y cambiar valores
• obtener la lista de IDs creados
• exportar los valores en formato JSON

=== Tipos de controles disponibles ===

La extensión permite crear los siguientes elementos:

• '''Input''': campo de texto de una sola línea
• '''Textarea''': campo de texto de varias líneas
• '''Select''': lista desplegable
• '''Button''': botón pulsable
• '''Label''': texto informativo
• '''Checkbox''': casilla de verificación
• '''Radio group''': grupo de opciones de selección única

=== Funcionamiento ===

Cada elemento se crea con un '''ID único'''. Ese identificador permite acceder después al control para cambiar su valor, moverlo, ocultarlo, mostrarlo o eliminarlo.

Los elementos se colocan sobre el escenario y pueden utilizarse para crear menús, formularios, paneles de configuración o interfaces interactivas.

=== Uso habitual ===

DOM UI resulta útil para:

• pedir al usuario que escriba un nombre
• ofrecer opciones en una lista desplegable
• añadir botones para confirmar acciones
• mostrar texto informativo en pantalla
• crear interfaces de configuración dentro del proyecto

=== Ejemplo ===

Un proyecto puede crear:

• un campo de texto con el ID ''nombre''
• una lista desplegable con el ID ''dificultad''
• un botón con el ID ''empezar''

Al pulsar el botón, el proyecto puede leer el contenido de ''nombre'' y la opción seleccionada en ''dificultad'' para iniciar el juego con esos valores.

=== Notas ===

• Cada control debe tener un ID diferente.
• Los elementos creados forman parte de la interfaz visual del proyecto.
• Esta extensión está pensada para facilitar la creación de interfaces más completas dentro de BloKes.

---

== English ==

'''DOM UI''' is an extension that allows you to create interface elements on top of the stage, such as text inputs, text areas, dropdown lists, buttons, labels, checkboxes, and radio groups. Each element is identified by an ID and can be controlled from the project blocks.

=== Main features ===

This extension allows you to:

• create interface controls on the stage
• detect when any control or a specific control changes
• move and resize elements
• show, hide, and delete controls
• read and change values
• get the list of created IDs
• export values in JSON format

=== Available control types ===

The extension can create the following elements:

• '''Input''': single-line text field
• '''Textarea''': multi-line text field
• '''Select''': dropdown list
• '''Button''': clickable button
• '''Label''': informational text
• '''Checkbox''': checkbox
• '''Radio group''': single-choice option group

=== How it works ===

Each element is created with a '''unique ID'''. That identifier can later be used to change its value, move it, hide it, show it, or remove it.

The elements are placed on top of the stage and can be used to create menus, forms, settings panels, or interactive interfaces.

=== Common uses ===

DOM UI is useful for:

• asking the user to type a name
• offering options in a dropdown list
• adding buttons to confirm actions
• displaying informational text on screen
• creating configuration interfaces inside the project

=== Example ===

A project can create:

• a text field with the ID ''name''
• a dropdown list with the ID ''difficulty''
• a button with the ID ''start''

When the button is pressed, the project can read the content of ''name'' and the selected option in ''difficulty'' to start the game with those values.

=== Notes ===

• Each control must have a different ID.
• The created elements are part of the project's visual interface.
• This extension is designed to make it easier to create more complete interfaces inside BloKes.