Partilhar via

Função SetFocus

  • Artigo

Aplica-se a: Aplicações de tela Aplicações condicionadas por modelo

Move o foco de introdução para um controlo específico.

Description

A função SetFocus dá a um controlo de foco de entrada. Os batimentos de tecla do utilizador são, em seguida, recebidos por esse controlo, permitindo-lhes escrever num controlo de introdução de texto ou utilizar a tecla Enter para selecionar um botão. O utilizador também pode utilizar a tecla de Tabulação, o toque, o rato ou outro gestor para mover o foco de entrada. O comportamento da tecla de Tabulação é regido pela propriedade TabIndex.

Utilize a função SetFocus para definir o foco quando (cada um com um exemplo abaixo):

  • um controlo de entrada recentemente exposto ou ativado, para guiar o utilizador no que vem a seguir e para uma introdução mais rápida de dados.
  • um formulário é validado, para focar e apresentar o controlo de entrada incorreto para resolução rápida.
  • é apresentado um ecrã, para focar o primeiro controlo de entrada com a propriedade OnVisible do Ecrã.

O controlo com foco pode ser visualmente diferente com base nas propriedades FocusedBorderColor e FocusedBorderThickness.

Limitações

SetFocus só podem ser utilizados com:

Não é possível definir o foco para controlos que estejam dentro de um controlo de Gallery, Edit form ou Componente. SetFocus pode ser utilizado com um controlo num ecrã de deslocamento.

Não é possível definir o foco para controlos que estão dentro de um controlo de Container.

Só pode definir o foco para controlos no mesmo ecrã que a fórmula que contém a chamada SetFocus.

A tentativa de definir o foco para um controlo que tenha a propriedade DisplayMode definida como Desativada não tem efeito. O foco permanecerá onde estava antes.

No Apple iOS, o teclado virtual só será apresentado automaticamente se SetFocus foi iniciado por uma ação direta de utilizador. Por exemplo, a invocação a partir da propriedade OnSelect de um botão apresentará o teclado virtual enquanto o mesmo invocado a partir de uma ecrã OnVisible não ficará.

Só pode utilizar SetFocus em fórmulas de comportamento.

Sintaxe

SetFocus( Control )

  • Control – Obrigatório. O controlo para dar o foco de entrada.

Exemplos

Foco num controlo de entrada recentemente exposto ou ativado

Muitos carrinhos de compras permitem que o cliente utilize o endereço de envio como endereço de faturação, reduzindo a necessidade de introduzir as mesmas informações duas vezes. Se pretender um endereço de faturação diferente, as caixas de entrada de texto do endereço de faturação são ativadas e é útil para guiar o cliente para os seguintes controlos ativados recentemente para uma introdução mais rápida dos dados.

Animação de optar por utilizar um endereço de Faturação personalizado, com o foco movido para o controlo de entrada do nome de faturação como resultado, a desativação da sincronização automática com os endereços de Envio.

Existem muitas fórmulas em jogo aqui, mas a que move o foco é a propriedade OnUncheck do controlo da Check box:

SetFocus( BillingName )

A tecla de Tabulação também pode ser utilizada para mover rapidamente o foco de um campo para outro. Para ilustrar melhor, a tecla de Tabulação não foi utilizada na animação.

Para criar este exemplo:

  1. Criar uma nova aplicação.
  2. Adicione controlos de Label com o texto "Endereço para envio", "Nome:", "Endereço:", "Endereço de Faturação", "Nome:" e "Endereço:" e posicione-os conforme mostrado na animação.
  3. Adicione o controlo Text Input e renomeie-o para NomeDeEnvio.
  4. Adicione o controlo Text Input e renomeie-o para EndereçodeEnvio.
  5. Adicione um controlo de Check box e renomeie-o para EndereçosdeSincronização.
  6. Defina a propriedade Text deste controlo para a fórmula "Use Shipping address as Billing address".
  7. Adicione o controlo Text Input e renomeie-o para NomeDeFaturação.
  8. Defina a propriedade Default neste controlo para a fórmula ShippingName.
  9. Defina a propriedade DisplayMode neste controlo para a fórmula If( SyncAddresses.Value, DisplayMode.View, DisplayMode.Edit ). Isto irá ativar ou desativar automaticamente este controlo com base no estado do controlo da caixa de verificação.
  10. Adicione o controlo Text Input e renomeie-o para EndereçodeFaturação.
  11. Defina a propriedade Default neste controlo para a fórmula ShippingAddress.
  12. Defina a propriedade DisplayMode neste controlo para a fórmula If( SyncAddresses.Value, DisplayMode.View, DisplayMode.Edit ). Isto irá ativar ou desativar automaticamente este controlo com base no estado do controlo da caixa de verificação.
  13. Defina a propriedade Default desta caixa de verificação para a fórmula true. Isto irá predefinir o endereço de Faturação para utilizar o mesmo valor que o endereço de Envio.
  14. Defina a propriedade OnCheck desta caixa de verificação para a fórmula Reset( BillingName ); Reset( BillingAddress ). Se o utilizador optar por sincronizar endereços de Envio e Faturação, isto limpará qualquer entrada de utilizador nos campos de endereço de Faturação, permitindo que as propriedades Default em cada um para os campos correspondentes de Envio e Faturação.
  15. Defina a propriedade OnUncheck desta caixa de verificação para a fórmula SetFocus( BillingName ). Se o utilizador optar por ter um endereço de faturação diferente, este irá mover o foco para o primeiro controlo no endereço de Faturação. Os controlos já foram ativados devido às suas propriedades DisplayMode.

Foco nos problemas de validação

Nota

Embora este exemplo pareça ser um controlo de Edit form, infelizmente SetFocus ainda não é suportado por esse controlo. Em vez disso, este exemplo utiliza um ecrã deslocável para alojar os controlos de introdução.

Ao validar um formulário, pode ser útil não apenas apresentar uma mensagem se existir um problema, mas também levar o utilizador ao campo que está incorreto. Poderá ser particularmente útil se o campo em questão for deslocado para fora do ecrã e não estiver visível.

Uma animação de validação de um formulário de entrada de dados e de ter não apenas uma mensagem apresentada, mas também a definição do foco de entrada para o controlo de entrada incorreto, mesmo que este seja deslocado para fora do ecrã.

Nesta animação, o botão de validação é repetidamente pressionado até que todos os campos tenham sido preenchidos corretamente. Note que o ponteiro do rato não é movido para baixo a partir da parte superior do ecrã. Em vez disso, a função SetFocus moveu o foco de entrada para o controlo que requer atenção com 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 criar este exemplo:

  1. Criar uma nova aplicação para telemóvel em branco.
  2. No menu Inserir, selecione Novo ecrã e, em seguida, selecione Deslocável.
  3. Na secção central do ecrã, adicione controlos de Text input e atribua-lhes os nomes de Nome, Rua1, Rua2, Cidade, Município, Estado, CódigoPostal e Telefone. Adicione controlos de Label sobre cada um para identificar os campos. Poderá ter de redimensionar a secção se não for suficientemente longa para se adequar a todos os controlos.
  4. Adicione um controlo de Icon de marca de verificação na parte superior do ecrã, acima da secção deslocável.
  5. Defina a propriedade OnSelect do controlo de ícone para a fórmula If( IsBlank( ... fornecida acima.

Foco ao apresentar um ecrã

Nota

Embora este exemplo pareça ser um controlo de Edit form, infelizmente SetFocus ainda não é suportado por esse controlo. Em vez disso, este exemplo utiliza um ecrã deslocável para alojar os controlos de introdução.

Semelhante a expor um controlo de entrada, ao apresentar um ecrã de entrada de dados, é útil focar o primeiro controlo de entrada para uma introdução mais rápida de dados.

Uma animação que mostra uma comparação lado a lado com a utilização de SetFocus em vez de não a utilizar quando apresenta um ecrã de introdução de dados.

Nesta animação, o ecrã de introdução a dados à esquerda não está a utilizar SetFocus. Após a apresentação, nenhum controlo de entrada tem foco, exigindo que o utilizador utilize a tecla de tabulação, toque, rato ou utilize outro meio de focar o campo de Nome antes que um valor possa ser escrito nele.

Na direita temos exatamente a mesma aplicação com a propriedade OnVisible do conjunto de ecrã de introdução de dados para esta fórmula:

SetFocus( Name )

Isto define automaticamente o foco para o campo Nome. O utilizador pode começar a escrever e a utilizar a tecla de tabulação entre campos imediatamente sem necessitar de uma ação prévia.

Para criar este exemplo:

  1. Crie a aplicação "Focar em problemas de validação" acima.
  2. Neste ecrã, defina a propriedade OnVisible para a fórmula SetFocus( Name ).
  3. Adicionar um segundo ecrã.
  4. Adicionar um controlo de Button.
  5. Defina a propriedade OnSelect deste controlo para a fórmula Navigate( Screen1 ).
  6. Pré-visualize a aplicação a partir deste ecrã. Prima o botão. A fórmula OnVisible será avaliada e o campo de Nome ficará automaticamente em foco.