El botón es el elemento más simple del editor de aplicaciones web, pero juega uno de los roles principales en la interfaz de la aplicación terminada. Además, hoy te ofrecemos hacer una aplicación que consistirá solo en botones. La tarea puede parecer un poco extraña, pero si la hace, aprenderá a personalizar los botones, comprenderá los conceptos básicos para trabajar con el editor y la lógica de toda la plataforma.
Hagamos un breve cuestionario basado en el libro Alicia en el país de las maravillas. Averigüemos si los usuarios recuerdan dónde Alice conoció por primera vez al gato de Cheshire.
Nuestra aplicación tendrá:
- Texto de la pregunta: ¿Dónde conoció Alice al gato de Cheshire por primera vez?
- Botones de elección: Mad-Tea Party, Duchess 'House, Wood, Croquet-Ground. Si el usuario eligió la respuesta incorrecta, el botón con él desaparece, si el usuario eligió la respuesta correcta, todos los botones con las respuestas incorrectas desaparecen a la vez.
- Mensajes emergentes que le dicen si la respuesta fue correcta o no.
Por cierto, ¿recuerdas qué opción es la correcta?
Cómo crear un botón
Arrastre el elemento "Botón" con el puntero del mouse (haciendo clic y manteniendo presionada la tecla izquierda) al área donde desea colocar el botón.
Debe agregar cuatro botones, de acuerdo con la cantidad de respuestas posibles.
Personalización de 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: ingrese la primera respuesta: "Fiesta del té loco";
- Icono: icono de botón: haga clic en el "icono de selección" y elija el que más le guste (ahora hay más de 2500);
- Tamaño: tamaño del botón: establézcalo en "Grande" para agrandar el botón;
- Nombre: este es el nombre con el que otros elementos de la aplicación "ven" el botón; cada botón necesita un nombre único; nombre el botón "btn-mad_tea".
Cuando edita los campos, la imagen en la parte superior de la ventana cambiará para mostrar cómo se verá el botón después de aplicar la configuración.
2. Cuando complete todos los campos, haga clic en "Guardar".
- Configure el resto de botones por analogía con el primero, usando los nombres: btn-duchess_h, btn-wood, btn-croquet_g.
- Haga clic en "Guardar cambios" para guardar los cambios en su aplicación; de lo contrario, los botones desaparecerán una vez que actualice la página o cierre el editor.
Configurar disparadores y eventos
Ahora necesitas configurar las acciones de los botones. Comencemos con el que tiene la respuesta correcta: "Casa de la Duquesa" . Su tarea es "explicar" al editor de aplicaciones web:
- cuál es el gatillo del botón - significa, exactamente a qué debe reaccionar: al presionar;
- qué evento ocurre en este caso: los botones desaparecen;
- donde ocurre este evento, qué elementos cambia: otros botones.
Vuelva a la configuración del botón "Casa de la duquesa" y vaya a la pestaña Activadores. Se mostrarán todos los desencadenantes que se han agregado:
- Ahora solo hay uno: "OnClick". Se agrega automáticamente y significa que el botón actuará cuando haga clic en él (que es exactamente lo que necesita).
- Además de "OnClick", son posibles otros activadores para el botón. Una lista completa con una descripción se encuentra en la documentación de la plataforma.
Ahora necesita especificar información sobre el evento (tendrá tres de ellos, uno para cada botón). Haga clic en el "+" junto a "OnClick". Se abrirá la ventana de configuración del evento.
En el campo "Componente de destino", debe indicar dónde ocurrirá el evento, en el campo "Acción", qué tipo de evento será.
Ocultar todas las respuestas incorrectas
Agrega un evento que ocultará el botón Mad-Tea Party:
- Haga clic en el campo "Componente de destino" y búsquelo con el nombre exclusivo btn-mad_tea. En el campo Acción, seleccione el evento apropiado, en este caso, "Botón Ocultar".
- Clic en Guardar".
Configure el resto de botones para que se oculten de la misma forma.
- Así es como debería verse la lista de desencadenantes del botón "Casa de la duquesa" cuando haya terminado.
- Haga clic en "Guardar" para guardar sus cambios.
Ahora debes asegurarte de que todo funcione.
- Guarde sus cambios.
- Presione el botón para publicar la aplicación (colocándola en Internet), seleccione "Desarrollo".
- Haga clic en el icono de ir a su aplicación; se abrirá en una nueva pestaña.
Ve a la aplicación y asegúrate de que cuando selecciones la opción correcta, el resto de botones desaparezcan.
Ocultar 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 (presionar) como el evento (desaparecer) pertenecen al mismo botón; solo necesita trabajar con él.
Abra la configuración del botón, vaya a la pestaña "Activadores", agregue un nuevo evento al activador "onClick". En el campo "Componente de destino", seleccione "Este componente (propio)" para indicar que el botón activa un evento por sí mismo. El valor del campo "Acción" es el mismo que en el ejemplo anterior: "Botón Ocultar".
Guarde todos los cambios y publique la aplicación, cambie a la pestaña de la aplicación y actualícela. Comprueba que todo funcione según lo previsto:
Ahora ajuste el terreno de madera y croquet. Guárdelo, publíquelo y pruébelo nuevamente.
Tipos de botones
Genial, las respuestas funcionan. Es hora de agregar una pregunta. Por supuesto, Appmaster.io tiene elementos especiales para esto, pero recuerdas nuestra tarea: botones y nada más. Entonces agreguemos uno más. Esta vez, no en el lienzo principal, sino en la parte superior de la página:
Para hacerlo más divertido, complete la pregunta como en esta captura de pantalla:
Ahora "colorear" usando esquemas de color para diferentes tipos de botones: vaya a la configuración y cambie el valor en el campo "Tipo" a cualquier otro.
Lo conseguimos así, pero puedes elegir tu opción, el esquema de color del botón no afecta su funcionamiento:
Ahora pasemos a la última tarea: configurar un mensaje para el usuario.
Tarea mas dificil
Puede mostrar un mensaje en la pantalla de diferentes formas. Elegimos uno de los más inusuales:
- Primero, asegurémonos de que los botones que contienen la pregunta se desactivan automáticamente cuando el usuario ha dado la respuesta correcta. Se volverán grises y dejarán de responder a los clics. Para hacer esto, usamos la función Enable (Disable), que aún no hemos considerado, y el ya familiar "onClick".
- Entonces consideraremos un nuevo disparador - onStateChange, que se dispara cuando cambia el estado del botón. Asignemos este disparador al "?" - y el mensaje se mostrará en él.
Desactivación de botones
Puede habilitar o deshabilitar el botón manualmente en su configuración alternando el selector de campo "Habilitar":
Para configurar el cambio automático, abra las preferencias del botón "Casa de la duquesa" y agregue un disparador "onClick". En el campo "Componente de destino", seleccione uno de los botones de pregunta, en los campos "Acción" - "Botón de desactivación". Repita para todos los botones que contienen una pregunta. Debe tener un aspecto como este:
Recuerda guardar todos los cambios, publicarlos y comprobar si la aplicación está funcionando correctamente.
Ahora, vinculemos el inicio del mensaje al botón "?" (lo llamamos "btn_qqq"). Agreguemos el disparador "onStateChange". Se activa cuando cambia el estado del botón, por ejemplo, cuando se apaga.
En el campo "Componente de destino", seleccione "Aplicación" (el mensaje aparecerá en la ventana de la aplicación), en el campo "Acción" - "Mostrar mensaje de IU" (mostrar un mensaje al usuario).
- En el campo "Estilo de mensaje", elija el que mejor se adapte a su situación. En nuestro caso, se trata de "Éxito", un mensaje sobre la finalización satisfactoria.
- Complete los campos "Título" y "Contenido": informe al usuario que la respuesta es correcta o simplemente escriba algo agradable.
Guarde, publique y pruebe.
Resultado
Al elegir la opción correcta, los botones con respuestas incorrectas deben estar ocultos, el texto de la pregunta debe desaparecer 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 correcto. Aunque hoy no buscamos caminos fáciles. Además, ya sabe lo suficiente para hacer esto sin nuestras instrucciones. Intente personalizar el mensaje de error que aparecerá cuando elija la respuesta incorrecta . Debe tener un aspecto como este:
Estamos seguros de que esta instrucción le ayudó a conocer mejor Appmaster.io . Pero si no estaba claro (o tal vez, por el contrario, demasiado simple), escriba al canal de telegramas de nuestro soporte técnico sobre las instrucciones que necesita. ¡Los escribiremos!
Si busca información más detallada sobre Studio.appmaster.io , consulte nuestra documentación .
