Función SetFocus

Se aplica a: Aplicaciones de Canvas Aplicaciones basadas en modelos

Mueve el foco de entrada a un control específico.

Description

La función SetFocus proporciona al control el foco de entrada. Posteriormente, ese control recibe las pulsaciones de teclas del usuario, lo que permite escribir en un control de entrada de texto o usar la tecla Entrar para seleccionar un botón. El usuario también puede usar la tecla Tabulador, toque, mouse u otro gesto para mover el foco de entrada. El comportamiento de la tecla Tab está regido por la propiedad TabIndex .

Utilice la función SetFocus para establecer el foco cuando (cada uno con un ejemplo a continuación):

• Se ha expuesto o habilitado un control de entrada recientemente, para guiar al usuario en lo que pasará posteriormente y para una entrada de datos más rápida.
• Se valida un formulario, para enfocar y mostrar el control de entrada infractor para una resolución rápida.
• Se muestra una pantalla, para enfocar el primer control de entrada con la propiedad OnVisible de la Pantalla.

El control con enfoque puede ser visualmente diferente según las propiedades FocusedBorderColor y FocusedBorderThickness.

Limitaciones

SetFocus solo se puede utilizar con:

• Botón de control
• Icono de control
• Control de imagen
• Control de etiquetas
• Control de entrada de texto

No puede establecer el foco en controles que están dentro de un control Gallery, Edit form o Component. SetFocus se puede utilizar con un control en una pantalla desplazable.

No puede establecer el enfoque en controles que se encuentran dentro de un control Container.

Solo puede establecer el foco en los controles en la misma pantalla que la fórmula que contiene la llamada a SetFocus.

Intentar establecer el foco en un control que tiene su propiedad DisplayMode establecida en Deshabilitado no tiene efecto alguno. El foco permanecerá donde estaba anteriormente.

En Apple iOS, el teclado virtual solo se mostrará automáticamente si SetFocus lo inició una acción directa del usuario. Por ejemplo, invocar desde un una propiedad OnSelect del botón mostrará el teclado virtual mientras que si se invoca desde una pantalla OnVisible no lo hará.

Puede usar SetFocus solo en fórmulas de comportamiento.

Sintaxis

Establecer enfoque( Control )

• Control – Obligatorio. El control para proporcionar el foco de entrada.

Ejemplos

Establecer el foco en un control de entrada recién expuesto o habilitado

Muchos carros de la compra permiten al cliente usar la dirección de envío como la dirección de facturación, eliminando la necesidad de especificar la misma información dos veces. Si se desea una dirección de facturación diferente, los cuadros de entrada de texto de la dirección de facturación están habilitados, y resulta útil orientar al cliente sobre estos controles recientemente habilitados para que puedan especificar los datos con mayor rapidez.

Aquí se utilizan muchas fórmulas, pero la que mueve el foco está en la propiedad OnUncheck del control Check box:

SetFocus( BillingName )

La tecla Tabulador también se puede usar para mover el foco rápidamente de un campo a otro. Para ilustrarlo mejor, la tecla Tabulación no se utilizó en la animación.

Para crear este ejemplo:

1. Cree una nueva aplicación.
2. Agregue los controles Label con el texto "Dirección de envío", "Nombre:", "Dirección:", "Dirección de facturación", "Nombre:" y "Dirección:" y colóquelos como se muestra en la animación.
3. Agregue un control Text Input y cámbiele el nombre a ShippingName.
4. Agregue un control Text Input y cámbiele el nombre a ShippingAddress.
5. Agregue un control Check box y cámbiele el nombre a SyncAddresses.
6. Establezca la propiedad Text de este control en la fórmula "Use Shipping address as Billing address".
7. Agregue un control Text Input y cámbiele el nombre a BillingName.
8. Establezca la propiedad Default en este control con la fórmula ShippingName.
9. Establezca la propiedad DisplayMode en este control con la fórmula If( SyncAddresses.Value, DisplayMode.View, DisplayMode.Edit ). Esto habilitará o deshabilitará automáticamente este control según el estado del control de la casilla de verificación.
10. Agregue un control Text Input y cámbiele el nombre a BillingAddress.
11. Establezca la propiedad Default en este control con la fórmula ShippingAddress.
12. Establezca la propiedad DisplayMode en este control con la fórmula If( SyncAddresses.Value, DisplayMode.View, DisplayMode.Edit ). Esto habilitará o deshabilitará automáticamente este control según el estado del control de la casilla de verificación.
13. Establezca la propiedad Default de la casilla de verificación en la fórmula true. Esto predeterminará la dirección de facturación use el mismo valor que la dirección de envío.
14. Establezca la propiedad OnCheck de la casilla de verificación en la fórmula Reset( BillingName ); Reset( BillingAddress ). Si el usuario elige sincronizar las direcciones de envío y facturación, esto borrará cualquier entrada del usuario en los campos de dirección de facturación, lo cual permite a las propiedades Default en cada uno extraer los valores de los campos de dirección de envío correspondientes.
15. Establezca la propiedad OnUncheck de la casilla de verificación en la fórmula SetFocus( BillingName ). Si el usuario elige tener una dirección de facturación diferente, esto moverá el foco al primer control en la dirección de facturación. Los controles ya se habrán habilitado debido a sus propiedades DisplayMode.

Establecer el foco en los problemas de validación

Nota

Aunque este ejemplo parece ser un control Edit form, lamentablemente SetFocus aún no es compatible con ese control. En cambio, este ejemplo utiliza una pantalla desplazable para hospedar los controles de entrada.

Al validar un formulario, puede ser útil no solo mostrar un mensaje si hay un problema, sino también llevar al usuario al campo infractor. Puede ser particularmente útil si el campo en cuestión se desplaza fuera de la pantalla y no está visible.

En esta animación, el botón de validación se presiona repetidamente hasta que todos los campos se hayan completado correctamente. Tenga en cuenta que el puntero del mouse no baja desde la parte superior de la pantalla. En cambio la función SetFocus ha movido el foco de entrada al control que requiere atención con esta fórmula:

If( IsBlank( Name ),
        Notify( "Name requires a value", Error ); SetFocus( Name ),
    IsBlank( Street1 ),
        Notify( "Street Address 1 requires a value", Error ); SetFocus( Street1 ),
    IsBlank( Street2 ),
        Notify( "Street Address 2 requires a value", Error ); SetFocus( Street2 ),
    IsBlank( City ),
        Notify( "City requires a value", Error ); SetFocus( City ),
    IsBlank( County ),
        Notify( "County requires a value", Error ); SetFocus( County ),
    IsBlank( StateProvince ),
        Notify( "State or Province requires a value", Error ); SetFocus( StateProvince ),
    IsBlank( PostalCode ),
        Notify( "Postal Code requires a value", Error ); SetFocus( PostalCode ),
    IsBlank( Phone ),
        Notify( "Contact Phone requires a value", Error ); SetFocus( Phone ),
    Notify( "Form is Complete", Success )
)

Para crear este ejemplo:

1. Cree una nueva aplicación de teléfono vacía.
2. Desde el menú Insertar, seleccione Nueva pantalla y luego seleccione Desplazable.
3. En la sección central de la pantalla, agregue los controles de Text input y asígneles los nombres Nombre, Calle 1, Calle2, Ciudad, Provincia, Región, Código postal y Teléfono. Agregue los controles Label sobre cada uno para identificar los campos. Es posible que deba cambiar el tamaño de la sección si no es lo suficientemente larga como para ajustarse a todos los controles.
4. Agregue un control Icon de casilla de verificación en la parte superior de la pantalla, sobre la sección desplazable.
5. Establezca la propiedad OnSelect del control de icono en la fórmula If( IsBlank( ... que se proporciona más arriba.

Establecer el foco al mostrar una pantalla

Nota

Aunque este ejemplo parece ser un control Edit form, lamentablemente SetFocus aún no es compatible con ese control. En cambio, este ejemplo utiliza una pantalla desplazable para hospedar los controles de entrada.

De forma similar a lo que ocurre cuando se expone un control de entrada, cuando se muestra una pantalla de entrada de datos, es útil establecer el foco en el primer control de entrada para una entrada de datos más rápida.

En esta animación, la pantalla de entrada de datos a la izquierda no está usando SetFocus. Cuando se muestra, ningún control de entrada tiene el foco establecido, lo que requiere que el usuario presione el tabulador, toque, use el mouse o use otros medios para establecer el foco en el campo Nombre antes de que se pueda escribir un valor en él.

A la derecha tenemos exactamente la misma aplicación con la propiedad OnVisible de la pantalla de entrada de datos establecida en esta fórmula:

SetFocus( Name )

Esto establece el foco en el campo Nombre automáticamente. El usuario puede comenzar a escribir y usar el tabulador entre campos de inmediato sin necesidad de realizar ninguna acción previa.

Para crear este ejemplo:

1. Cree la aplicación "Establecer el foco en los problemas de validación" de más arriba.
2. En esta pantalla, establezca la propiedad OnVisible en la fórmula SetFocus( Name ).
3. Agregue una segunda pantalla.
4. Agregue el control Button.
5. Seleccione la propiedad OnSelect de este control en la fórmula Navigate( Screen1 ).
6. Obtenga una vista previa de la aplicación desde esta pantalla. Presione el botón. La fórmula OnVisible se evaluará y el campo Nombre estará automáticamente en el foco.