{"id":124617,"date":"2020-09-29T18:51:30","date_gmt":"2020-09-29T16:51:30","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/examples-advanced-events-and-interactions\/"},"modified":"2025-02-03T16:44:34","modified_gmt":"2025-02-03T15:44:34","slug":"examples-advanced-events-and-interactions","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/eventos-avanzados-y-ejemplos-de-interacciones","title":{"rendered":"Ejemplos avanzados: eventos e interacciones"},"content":{"rendered":"

En este art\u00edculo, aprender\u00e1s a construir eventos m\u00e1s avanzados con m\u00faltiples acciones y diferentes desencadenantes. Tambi\u00e9n ver\u00e1s c\u00f3mo utilizar la funcionalidad de los formularios interactivos y las entradas de Justinmind para crear experiencias de usuario realistas. <\/p>\n

<\/a>Tabulaci\u00f3n entre campos de un formulario<\/h2>\n

En este ejemplo, aprender\u00e1s a crear formularios c\u00f3modos y accesibles utilizando un activador Al pulsar la tecla<\/strong> y una acci\u00f3n Establecer enfoque en<\/strong>. A\u00f1adir\u00e1s tres campos de formulario – \u00abNombre de usuario\u00bb, \u00abContrase\u00f1a\u00bb y \u00abConfirmar contrase\u00f1a\u00bb- y te mover\u00e1s por ellos pulsando la tecla Tabulador.
\n

    \n
  1. Arrastra tres widgets de Campo de texto de entrada al Lienzo y dales el estilo que prefieras. Puedes encontrarlos en la secci\u00f3n \u00abCampos de entrada interactivos\u00bb del desplegable de la Barra de herramientas o pulsando la tecla F<\/kbd>. <\/li>\n
  2. Selecciona el campo de texto de entrada \u00abNombre de usuario\u00bb y busca en la paleta Eventos. Haz clic en \u00abA\u00f1adir evento\u00bb. \"Bot\u00f3n<\/li>\n
  3. Haz clic en el desplegable Activador, pasa el rat\u00f3n por encima de la secci\u00f3n Teclado<\/strong> y elige el activador Al pulsar la tecla<\/strong>.<\/li>\n
  4. Ver\u00e1s que aparece un nuevo campo en el que puedes introducir la tecla que quieres que active el evento cuando la escribas. Introduce la tecla Tabulador<\/kbd>. <\/li>\n
  5. En el desplegable Acci\u00f3n, elige la acci\u00f3n Enfocar campo de entrada<\/strong>. Ver\u00e1s que aparece una vista previa del lienzo, en la que puedes seleccionar el campo de texto de entrada \u00abContrase\u00f1a\u00bb. Esto lo convertir\u00e1 en el objetivo de la acci\u00f3n Establecer enfoque en, de modo que cambiar\u00e1s a \u00e9l cuando salgas del campo de texto de entrada \u00abNombre de usuario\u00bb.
    \n\"Un
    \nHaz clic en \u00abAceptar\u00bb para terminar de crear el evento.<\/li>\n
  6. De vuelta en el Lienzo, selecciona el campo de texto de entrada \u00abContrase\u00f1a\u00bb. Ve a la paleta Eventos y crea otra acci\u00f3n Activar tecla<\/strong> + Activar foco<\/strong>. Esta vez, selecciona el campo de texto de entrada \u00abConfirmar contrase\u00f1a\u00bb como objetivo de la acci\u00f3n. Haz clic en \u00abAceptar\u00bb para terminar de crear el evento.<\/li>\n<\/ol>\n

    Pulsa el bot\u00f3n \u00abReproducir\u00bb para simular tu proyecto. Conc\u00e9ntrate en el campo \u00abNombre de usuario\u00bb y pulsa el tabulador para saltar al campo \u00abContrase\u00f1a\u00bb. Vuelve a pulsarla para pasar al campo \u00abConfirmar contrase\u00f1a\u00bb. <\/p>\n

    <\/a>Efecto m\u00faltiple al pasar el rat\u00f3n<\/h2>\n

    En Justinmind, puedes a\u00f1adir varias acciones a un evento. En este ejercicio, aprender\u00e1s a crear un evento Al pasar el rat\u00f3n por encima<\/strong> con dos acciones. Una acci\u00f3n cambiar\u00e1 el aspecto de una imagen y la otra la mover\u00e1.
    \n

      \n
    1. Crea un nuevo proyecto Web y coloca una Imagen I<\/kbd> en el Lienzo. Cambia la transparencia de la imagen a 40% en la paleta Propiedades.
      \n\"Imagen
      \nAseg\u00farate de que est\u00e1s utilizando un proyecto Web – M\u00f3vil o Tablet no funcionar\u00e1n para este ejemplo, ya que no puedes pasar el rat\u00f3n por encima en una pantalla t\u00e1ctil.<\/li>\n
    2. Con la imagen a\u00fan seleccionada, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.<\/li>\n
    3. Haz clic en el desplegable Activador, pasa el rat\u00f3n<\/strong> por encima y selecciona una acci\u00f3n Al pasar el rat\u00f3n<\/strong>.<\/li>\n
    4. Toca en el desplegable Acci\u00f3n y selecciona una acci\u00f3n Cambiar estilo<\/strong>. Ver\u00e1s que aparece una vista previa del lienzo en la que puedes elegir la imagen como objetivo de la acci\u00f3n. <\/li>\n
    5. En el desplegable de abajo, selecciona \u00abOpacidad\u00bb como estilo a cambiar y modifica su opacidad a %100. Haz clic en \u00abAceptar\u00bb para terminar de crear el evento.
    6. Mira en la paleta Eventos, donde ver\u00e1s el evento que acabas de crear. Ver\u00e1s un bot\u00f3n \u00ab+\u00bb junto a la acci\u00f3n Cambiar estilo<\/strong>. Haz clic en \u00e9l para a\u00f1adir otra acci\u00f3n al evento. \"Pulsa<\/li>\n
    7. El activador Al pasar el rat\u00f3n<\/strong> ya deber\u00eda estar seleccionado, as\u00ed que s\u00f3lo tienes que elegir una acci\u00f3n Mover<\/strong>.<\/li>\n
    8. Selecciona la imagen como objetivo de la acci\u00f3n en la vista previa del lienzo. Ver\u00e1s que aparece un desplegable debajo. Aqu\u00ed puedes definir d\u00f3nde mover la imagen cuando pases el rat\u00f3n sobre ella. Mant\u00e9n la posici\u00f3n X (horizontal) igual, pero ajusta la posici\u00f3n Y (vertical) en 10px.
      \n\"La
      \nA\u00f1ade una servidumbre lineal y cambia la duraci\u00f3n de la servidumbre a 200 ms. <\/p>\n

      Haz clic en \u00abAceptar\u00bb para terminar de crear el evento.<\/li>\n

    9. Vuelve a la paleta Eventos y ver\u00e1s un bot\u00f3n \u00abFlecha\u00bb entre las acciones Cambiar Estilo<\/strong> y Mover<\/strong> que has creado. Esta flecha indica el orden de la acci\u00f3n. Ahora mismo, las acciones se ejecutar\u00e1n una detr\u00e1s de otra, pero querr\u00e1s que ocurran al mismo tiempo.

      <\/a>Formularios interactivos con m\u00faltiples activadores<\/h2>\n

      Tambi\u00e9n puedes utilizar distintos activadores de eventos en un mismo elemento. En este ejemplo, aprender\u00e1s a crear eventos con activadores Enfocar dentro<\/strong> y Enfocar fuera<\/strong> para cambiar la apariencia de un campo de texto de entrada.
      \n

        \n
      1. Arrastra un Campo de Texto de Entrada F<\/kbd> al Lienzo y dale el estilo que prefieras.<\/li>\n
      2. Con el campo de texto de entrada seleccionado, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.<\/li>\n
      3. En el desplegable Disparador, elige un disparador Enfocar dentro<\/strong>.<\/li>\n
      4. Selecciona una acci\u00f3n Cambiar estilo<\/strong> y elige el campo de texto de entrada como destino de la acci\u00f3n en la vista previa del lienzo.<\/li>\n
      5. Ver\u00e1s que debajo aparece un desplegable en el que puedes especificar los estilos del campo de texto de entrada que deseas cambiar. En este ejemplo, cambia el borde del campo de texto de entrada para que sea de un color m\u00e1s oscuro. Haz clic en \u00abAceptar\u00bb para terminar de crear el evento.<\/li>\n
      6. Con el campo de texto de entrada a\u00fan seleccionado, vuelve a la paleta Eventos y haz clic en el bot\u00f3n \u00ab+\u00bb de la parte superior de la paleta para crear una nueva interacci\u00f3n.\"El Esta vez, elige un activador Enfocar fuera<\/strong> y una acci\u00f3n Cambiar estilo<\/strong>.<\/li>\n
      7. Elige el campo de texto de entrada como destino de la acci\u00f3n y selecciona el borde como estilo a cambiar en el desplegable de abajo.El color de borde por defecto deber\u00eda seleccionarse autom\u00e1ticamente, as\u00ed que puedes hacer clic en \u00abAceptar\u00bb para terminar de crear el evento.<\/li>\n<\/ol>\n

        As\u00ed es como debe ser tu paleta de Eventos:
        \n\"Paleta
        \nPulsa el bot\u00f3n \u00abReproducir\u00bb para simular tu proyecto. Enfoca el campo de texto de entrada y observa c\u00f3mo cambia de color su borde. Haz clic fuera del campo de entrada y ver\u00e1s c\u00f3mo vuelve a cambiar el color de su borde. <\/p>\n

        <\/a>Reflejar la informaci\u00f3n del usuario<\/h2>\n

        En este \u00faltimo ejercicio, aprender\u00e1s a utilizar una acci\u00f3n Establecer valor<\/strong> para reflejar la entrada del usuario durante la simulaci\u00f3n.
        \n

          \n
        1. Coloca un Campo de Texto de Entrada y un Bot\u00f3n B<\/kbd> en el Lienzo y dales el estilo que prefieras. Arrastra un elemento Texto T<\/kbd> debajo del campo de texto de entrada y m\u00e1rcalo como oculto durante la simulaci\u00f3n. \"Elemento<\/li>\n
        2. Selecciona el bot\u00f3n, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb. Elige un activador Al hacer clic<\/strong> del desplegable. <\/li>\n
        3. Elige la acci\u00f3n Establecer valor a un elemento<\/strong> del desplegable. Ver\u00e1s que aparece una vista previa del lienzo en la que puedes seleccionar el elemento de texto situado debajo del campo de entrada como destino de la acci\u00f3n. <\/li>\n
        4. F\u00edjate en el texto de abajo que dice ‘El valor es…’ y selecciona el bot\u00f3n de opci\u00f3n ‘Calculado’. A continuaci\u00f3n, haz clic en el enlace de texto ‘A\u00f1adir expresi\u00f3n’. \"A\u00f1adir<\/li>\n
        5. Ver\u00e1s que aparece el constructor de Expresiones de Valor, que es donde definir\u00e1s el valor que se transferir\u00e1 al elemento de texto. Sigue estos pasos para crear el valor:\n
            \n
          • \n