Controles

Tabla de contenidos

• Tipos de controles
• Atributos
• Consideraciones
• Ejemplos

Una escena u overlay se compone de uno o varios controles agrupados. Cada control tiene una funcionalidad específica, definida en un elemento xml propio.

Tipos de controles

Elemento	Descripción
<button>	botón simple
<switch>	interruptor: cada vez que se pulsa alterna entre encendido y apagado
<picture>	imagen no interactiva
<label>	etiqueta de texto de una línea
<textarea>	cuadro de texto de varias líneas
<slider>	deslizador horizontal
<progress>	barra de progreso horizontal, muestra porcentaje
<div>	contenedor para agrupaciones

Atributos

Todos los controles, independientemente del tipo que sea, comparten los mismos atributos:

Atributo	Descripción	valores
status	estado inicial	enabled (por defecto), disabled, hidden
text	texto del control	texto literal o "%id_texto" (ver soporte internacional)
vmin	valor mínimo posible	número entero
vmax	valor máximo posible	número entero

Además pueden utilizarse todo los atributos comunes: class, left, top, right, bottom, width, height, padding, spacing, hscale, vscale, scale, angle, image, color, opacity, font, textcolor, align, valign, border, full, borderwidth, bordecolor, onclick, onrelease, ondragover ondragout, onselect, onunselect onenable, ondisable, onmouseover, onmouseout

Consideraciones

• Pueden definirse controles fuera de un elemento <scene> u <overlay>. En ese caso, el control no se pintará automáticamente, pero puede utilizarse para definir y sobre-escribir un control común a varias escenas.
• Si se define dentro de una escena un control que ya se ha definido previamente fuera, se crea una copia del control original y se modifican los atributos que se indican en la nueva instancia.

Ejemplos

Crea un botón indicando estilo y posición, y lo reaprovecha en dos escenas diferentes con pequeños cambios.

<button id="mi_boton" class="mi_clase" left="100" top="150" />
...
<scene id ="escena1" >
    <button id="mi_boton" left="120" text="Texto propio 1" />
</scene>
...
<scene id ="escena2" >
    <button id="mi_boton" text="Texto propio 2" />
</scene>