Configuración de los botones

Hagamos un pequeño test basado en el libro Las aventuras de Alicia en el país de las maravillas. Averigüemos si los usuarios recuerdan dónde se encuentra Alicia por primera vez con el Gato de Cheshire.
Nuestra aplicación tendrá:

1. Texto de la pregunta: ¿Dónde conoció Alicia al Gato de Cheshire?
2. Botones de elección: Fiesta del té, Casa de la Duquesa, Bosque, Campo de Croquet. Si el usuario eligió la respuesta incorrecta - el botón con ella desaparece, si el usuario eligió la correcta - todos los botones con las respuestas incorrectas desaparecen a la vez.
3. Mensajes emergentes que indican si la respuesta era correcta o no.

Cómo crear un botón

Arrastre el elemento "Botón " con el puntero del ratón (pulsando y manteniendo la tecla izquierda) hasta la zona donde desee colocar el botón.

Es necesario añadir cuatro botones, según el número de respuestas posibles.

Personalizar la apariencia del botón

Haga clic en el primer botón una vez - se abrirá la ventana de configuración. Se encontrará en la pestaña"Look&Feel", que es responsable de la apariencia de los botones.

1.Edite los siguientes campos:

• Etiqueta: texto del botón - introduzca la primera respuesta: "Mad-Tea Party";
• Icono: icono del botón - haz clic en "Elegir icono" y elige el que más te guste (ahora hay más de 2500);
  
• Tamaño: tamaño del botón - ponlo en "Grande" para que el botón sea grande;
  
• Nombre: Este es el nombre por el cual el botón es "visto" por otros elementos de su aplicación; cada botón necesita un nombre único - nombre el botón "btn-mad_tea".

Cuando edite los campos, la imagen de la parte superior de la ventana cambiará para mostrar el aspecto que tendrá el botón una vez aplicados los ajustes.

2. Cuando haya rellenado todos los campos, haga clic en"Guardar".

1. 3. Configure el resto de los botones por analogía con el primero, utilizando los nombres: btn-duchess_h, btn-wood, btn-croquet_g.
2. Haz clic en "Guardar cambios" para guardar los cambios en tu aplicación; de lo contrario, los botones desaparecerán cuando actualices la página o cierres el editor.

Configuración de disparadores y eventos

Ahora tienes que configurar las acciones de los botones. Empecemos por el que tiene la respuesta correcta:"Casa de la Duquesa". Su tarea es "explicar" al editor de Web Apps

• cuál es el disparador del botón - es decir, a qué debe reaccionar exactamente: al pulsar;
• qué evento ocurre en este caso: los botones desaparecen;
• dónde ocurre este evento, qué elementos cambian: otros botones.

Vuelva a la configuración del botón "Casa de la Duquesa" y vaya a la pestaña Disparadores. Se mostrarán todos los activadores que se han añadido para él:

1. Ahora sólo hay uno:"OnClick". Se añade automáticamente y significa que el botón actuará cuando se haga clic en él (que es exactamente lo que necesita).
2. Además de "OnClick", hay otros activadores posibles para el botón. Una lista completa con una descripción está en la documentación de la plataforma.

Ahora necesitas especificar información sobre el evento (tendrás tres de ellos - uno para cada botón). Haga clic en el signo "+" junto a"OnClick". Se abrirá la ventana de configuración del evento.

En el campo"Componente de destino", tiene que indicar dónde se producirá el evento, en el campo "Acción" - qué tipo de evento será.

Ocultar todas las respuestas erróneas

Añada un evento que oculte el botón de la fiesta de los locos:

1. Haz clic en el campo"Componente de destino" y búscalo por el nombre único btn-mad_tea. En el campo "Acción", seleccione el evento apropiado, en este caso - "Ocultar elbotón".
2. Haga clic en "Guardar".

Configure el resto de los botones para que se oculten de la misma manera.

1. Así es como debe quedar la lista de activadores del botón "Casa de laDuquesa" cuando hayas terminado.
2. Haz clic en "Guardar" para guardar los cambios.

Ahora tienes que asegurarte de que todo funciona.

1. Guarde los cambios.
2. Pulsa el botón para publicar la aplicación (ponerla en Internet), selecciona "Desarrollo".
3. Pulsa el icono de ir a tu aplicación - se abrirá en una nueva pestaña.

Ve a la aplicación y asegúrate de que cuando seleccionas la opción correcta, el resto de los botones desaparecen.

Ocultar las respuestas incorrectas al hacer clic

Ahora hagamos que el botón con la respuesta incorrecta"Mad-Tea Party" desaparezca cuando el usuario haga clic en él. En este caso, tanto el disparador (pulsar) como el evento (desaparecer) pertenecen al mismo botón - sólo hay que trabajar con él.
Abra la configuración del botón, vaya a la pestaña "Triggers", añada un nuevo evento al trigger "onClick". En el campo "Target component", seleccione "This component (self)" para indicar que el botón activa un evento para sí mismo. El valor del campo"Acción" es el mismo que en el ejemplo anterior:"Ocultar botón". Guarde todos los cambios y publique la aplicación, cambie a la pestaña de la aplicación y actualícela. Comprueba que todo funciona como es debido:

Ahora ajusta la"Madera" y el"Campo de Croquet". Guarda, publica y vuelve a probarlo.

Tipos de botones

Genial, las respuestas funcionan. Es hora de añadir una pregunta. Por supuesto, Appmaster.io tiene elementos especiales para esto, pero recuerda nuestra tarea - botones y nada más. Así que vamos a añadir uno más. Esta vez - no al lienzo principal, pero la parte superior de la página: Para hacerlo más divertido, rellena la pregunta como en esta captura de pantalla:

Para hacerlo más divertido, rellena la pregunta como en esta captura de pantalla:

Ahora "colorea" utilizando esquemas de color para los diferentes tipos de botones: ve a la configuración y cambia el valor del campo"Tipo" a cualquier otro.

Lo tenemos así, pero puedes elegir tu opción, el esquema de color del botón no afecta a su funcionamiento:

Ahora pasemos a la última tarea: configurar un mensaje para el usuario.

Tarea más difícil

Puede mostrar un mensaje en la pantalla de diferentes maneras. Hemos elegido una de las más inusuales:

En primer lugar, vamos a asegurarnos de que los botones que contienen la pregunta se desactiven automáticamente cuando el usuario haya dado la respuesta correcta. Se volverán grises y dejarán de responder a los clics. Para ello, utilizaremos la función Activar (Desactivar), que aún no hemos considerado, y el ya conocido"onClick". - Luego consideraremos un nuevo disparador - onStateChange, que se dispara cuando el estado del botón cambia. Asignemos este disparador al botón "?" - y el mensaje se mostrará en él.

Desactivación de botones

Puede activar o desactivar el botón manualmente en su configuración, alternando el selector de campo"Activar":

Para configurar la conmutación automática, abra las preferencias del botón "Casa de laDuquesa" y añada un activador "onClick". En el campo "Componente de destino" seleccione uno de los botones de pregunta, en los campos "Acción" - "Desactivarbotón". Repita la operación para todos los botones que contengan una pregunta. Debería tener este aspecto:

Recuerda guardar todos los cambios, publicar y comprobar si la aplicación funciona correctamente.

Ahora, vamos a vincular el inicio del mensaje al botón "?" (lo llamamos "btn_qqq"). Vamos a añadirle el trigger"onStateChange". Se activa cuando el estado del botón cambia - por ejemplo, cuando se apaga.En el campo

En el campo "Target component", seleccione "Application" (el mensaje aparecerá en la ventana de la aplicación), en el campo "Action" - "Show UI Message" (mostrar un mensaje al usuario).

1. En el campo"Estilo de mensaje", elige el que mejor se adapte a tu situación. En nuestro caso, se trata de"Éxito" - un mensaje sobre la finalización con éxito.
2. Rellena los campos "Título" y"Contenido" - informa al usuario de que la respuesta es correcta o simplemente escribe algo bonito.

Guarde, publique y pruebe.

Resultado

Al elegir la opción correcta, los botones con las respuestas incorrectas deben ocultarse, el texto de la pregunta debe desvanecerse y debe aparecer un mensaje de confirmación.

Por supuesto, era posible personalizar el mensaje más fácilmente vinculándolo al botón de respuesta correcta. Aunque hoy no buscamos formas fáciles. Además, usted ya sabe lo suficiente para hacerlo sin nuestras instrucciones. Intente personalizar el mensaje de error que aparecerá cuando elija la respuesta incorrecta. Debería tener el siguiente aspecto:

Estamos seguros de que estas instrucciones te han ayudado a conocer mejor Appmaster.io. Pero si no fue claro (o tal vez, por el contrario, demasiado simple), escriba al canal de telegrama de nuestro soporte técnico sobre las instrucciones que necesita. Las escribiremos.