Comparteix a través de

Funció SetFocus

  • Article

S'aplica a: Aplicacions de llenç Aplicacions basades en models

Desplaça l'èmfasi d'entrada a un control específic.

Descripció

La funció SetFocus proporciona a un control l'èmfasi d'entrada. A continuació, el control rep els tecleigs de l'usuari, la qual cosa permet escriure en un control d'entrada de text o utilitzar la tecla Retorn per seleccionar un botó. L'usuari també pot utilitzar la tecla Tabulador, la funció tàctil, el ratolí o altres gestos per desplaçar l'èmfasi d'entrada. El comportament de la tecla Tab es regeix per la propietat TabIndex .

Utilitzeu la funció SetFocus per definir l'èmfasi quan (amb exemples a continuació):

  • s'exposa o s'habilita recentment un control d'entrada, per guiar l'usuari pels següents passos i entrar dades més ràpidament.
  • es valida un formulari, per destacar i mostrar el control d'entrada infractor per resoldre-ho ràpidament.
  • es mostra una pantalla, es destaca el primer control d'entrada amb la propietat OnVisible de la Pantalla.

El control amb èmfasi pot ser diferent visualment segons les propietats FocusedBorderColor i FocusedBorderThickness.

Limitacions

SetFocus només es pot utilitzar amb:

No podeu definir el focus en controls que es troben dins d'un control Galeria , Edita el formulari o Component. SetFocus es pot utilitzar amb un control en una pantalla desplaçable.

No podeu definir el focus en controls que es troben dins d'un control de Contenidor.

Només podeu definir l'èmfasi en controls a la mateixa pantalla que la fórmula que conté la trucada a SetFocus.

L'intent de definir l'èmfasi en un control que té la propietat DisplayMode definida com a Desactivat no té cap efecte. L'èmfasi es mantindrà on era abans.

A Apple iOS, el teclat virtual només es mostrarà automàticament si SetFocus s'ha iniciat mitjançant una acció directa de l'usuari. Per exemple, si s'invoca des d'una propietat OnSelect, es mostrarà el teclat en pantalla; mentre que, si s'invoca des d'una propietat OnVisible, no.

Només podeu utilitzar SetFocus en fórmules de comportament.

Sintaxi

SetFocus( Control )

  • Control : obligatori. El control al qual es donarà l'èmfasi d'entrada.

Exemples

Èmfasi en un control d'entrada exposat o habilitat recentment

Molts carretons de compra permeten al client utilitzar l'adreça d'enviament com a adreça de facturació, fet que redueix la necessitat d'introduir dues vegades la mateixa informació. Si es vol una adreça de facturació diferent, els quadres d'entrada de text de l'adreça de facturació estan habilitats i és útil guiar el client cap a aquests controls recentment activats per a una entrada de dades més ràpida.

Animació de triar l'ús d'una adreça de facturació personalitzada, amb l'èmfasi desplaçat al control d'entrada del nom de facturació com a resultat, cosa que desactiva la sincronització automàtica amb l'adreça d'enviament.

Hi ha moltes fórmules que intervenen aquí, però la que desplaça l'èmfasi és a la propietat OnUncheck del control Casella de selecció:

SetFocus( BillingName )

La tecla Tabulador també es pot utilitzar per desplaçar l'èmfasi ràpidament d'un camp a un altre. Per il·lustrar-ho millor, la tecla Tabulador no s'ha utilitzat a l'animació.

Per crear aquest exemple:

  1. Creeu una nova aplicació.
  2. Afegiu controls Etiqueta amb el text "Adreça d'enviament", "Nom:", "Adreça:", "Adreça de facturació", "Nom:" i "Adreça:" i col·loqueu-los com tal com es mostra a l'animació.
  3. Afegiu un control Entrada de text i canvieu-ne el nom per ShippingName.
  4. Afegiu un control Entrada de text i canvieu-ne el nom per ShippingAddress.
  5. Afegiu un control Casella de selecció i canvieu-ne el nom per SyncAddresses.
  6. Definiu la propietat Text d'aquest control a la fórmula "Use Shipping address as Billing address".
  7. Afegiu un control Entrada de text i canvieu-ne el nom per BillingName.
  8. Definiu la propietat Default d'aquest control a la fórmula ShippingName.
  9. Definiu la propietat DisplayMode d'aquest control a la fórmula If( SyncAddresses.Value, DisplayMode.View, DisplayMode.Edit ). S'activarà o es desactivarà automàticament aquest control en funció de l'estat del control de casella de selecció.
  10. Afegiu un control Entrada de text i canvieu-ne el nom per BillingAddress.
  11. Definiu la propietat Default d'aquest control a la fórmula ShippingAddress.
  12. Definiu la propietat DisplayMode d'aquest control a la fórmula If( SyncAddresses.Value, DisplayMode.View, DisplayMode.Edit ). S'activarà o es desactivarà automàticament aquest control en funció de l'estat del control de casella de selecció.
  13. Definiu la propietat Default de la casella de selecció a la fórmula true. L'adreça de facturació tornarà al valor per defecte i utilitzarà el mateix valor que l'adreça d'enviament.
  14. Definiu la propietat OnCheck de la casella de selecció a la fórmula Reset( BillingName ); Reset( BillingAddress ). Si l'usuari decideix sincronitzar les adreces d'enviament i de facturació, s'esborrarà qualsevol entrada de l'usuari als camps d'adreça de facturació que permetin que les propietats Default puguin extreure els valors dels camps d'adreça d'enviament corresponents.
  15. Definiu la propietat OnUncheck de la casella de selecció a la fórmula SetFocus( BillingName ). Si l'usuari tria una adreça de facturació diferent, es desplaçarà l'èmfasi al primer control de l'adreça de facturació. Els controls ja s'hauran habilitat a causa de les propietats DisplayMode.

Èmfasi en problemes de validació

Nota

Tot i que aquest exemple sembla que és un control Edita el formulari, aquest control encara no és compatible amb SetFocus. En lloc d'això, aquest exemple utilitza una pantalla que es pot desplaçar per allotjar els controls d'entrada.

Quan es valida un formulari, pot ser útil no només mostrar un missatge si hi ha un problema, sinó també dur l'usuari al camp infractor. Pot ser especialment útil si el camp en qüestió es desplaça fora de la pantalla i no és visible.

Una animació de la validació d'un formulari d'entrada de dades i no només mostrar un missatge, sinó també la configuració d'èmfasi d'entrada al control d'entrada infractor, fins i tot si es desplaça fora de la pantalla.

En aquesta animació, el botó de validació s'ha premut repetidament fins que tots els camps s'han omplert correctament. Fixeu-vos que el punter del ratolí no es desplaça cap avall des de la part superior de la pantalla. En lloc d'això, la funció SetFocus ha desplaçat l'èmfasi d'entrada al control que requereix atenció amb aquesta 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 )
)

Per crear aquest exemple:

  1. Creeu una nova aplicació en blanc per a telèfons.
  2. Al menú Insereix, seleccioneu Pantalla nova i, a continuació, seleccioneu Desplaçable.
  3. A la secció central de la pantalla, afegiu controls Entrada de text i anomeneu-los Nom, Street1, Street2, Ciutat, Comtat, StateProvince, PostalCode i Telèfon. Afegiu-hi controls Etiqueta a cadascun per identificar els camps. Potser haureu de canviar la mida de la secció si no és prou llarga per encabir-hi tots els controls.
  4. Afegiu un control Icona de marca de verificació a la part superior de la pantalla, a sobre de la secció desplaçable.
  5. Definiu la propietat OnSelect del control d'icona a la fórmula If( IsBlank( ... que es proporciona anteriorment.

Èmfasi en mostrar una pantalla

Nota

Tot i que aquest exemple sembla que és un control Edita el formulari, aquest control encara no és compatible amb SetFocus. En lloc d'això, aquest exemple utilitza una pantalla que es pot desplaçar per allotjar els controls d'entrada.

Semblant a l'exposició d'un control d'entrada, quan es mostra una pantalla d'entrada de dades, és útil destacar el primer control d'entrada per entrar dades més ràpidament.

Una animació que mostra una comparació en paral·lel d'utilitzar SetFocus i no fer-ho en mostrar una pantalla d'entrada de dades.

En aquesta animació, la pantalla d'entrada de dades de l'esquerra no utilitza SetFocus. A la pantalla, cap control d'entrada no té èmfasi, cosa que obliga l'usuari a utilitzar el tabulador, la funció tàctil, el ratolí o un altre mitjà per destacar el camp Nom abans que s'hi pugui escriure.

A la dreta tenim exactament la mateixa aplicació amb la propietat OnVisible de la pantalla d'entrada de dades definida en aquesta fórmula:

SetFocus( Name )

Defineix l'èmfasi al camp Nom automàticament. L'usuari pot començar a escriure i desplaçar-se entre els camps immediatament sense que calgui cap acció prèvia.

Per crear aquest exemple:

  1. Creeu l'aplicació "Èmfasi en problemes de validació".
  2. En aquesta pantalla, definiu la propietat OnVisible a la fórmula SetFocus( Name ).
  3. Afegiu una segona pantalla.
  4. Afegiu un control Botó.
  5. Definiu la propietat OnSelect d'aquest control a la fórmula Navigate( Screen1 ).
  6. Feu una visualització prèvia de l'aplicació des d'aquesta pantalla. Premeu el botó. La fórmula OnVisible s'avaluarà i el camp Nom es destacarà automàticament.