SetFocus 함수

적용 대상: 캔버스 앱 모델 기반 앱

입력 포커스를 특정 컨트롤로 이동합니다.

Description

SetFocus 함수는 컨트롤에 입력 포커스를 제공합니다. 그런 다음 해당 컨트롤에서 사용자의 키 입력을 수신하여 텍스트 입력 컨트롤에 입력하거나 Enter키를 눌러 버튼을 선택할 수 있습니다. 사용자는 Tab 키, 터치, 마우스 또는 기타 제스처를 사용하여 입력 포커스를 직접 이동할 수도 있습니다. Tab 키 동작은 TabIndex 속성에서 제어합니다.

다음과 같은 경우에 SetFocus 함수를 사용하여 포커스를 설정합니다(각 예는 아래에 있음).

• 사용자를 다음 단계로 안내하고 더 빠른 데이터 입력을 위해 새로 노출되거나 활성화된 입력 컨트롤
• 신속한 해결을 위해 잘못된 입력 컨트롤에 포커스를 맞추고 표시하는 유효성이 검증된 양식
• Screen의 OnVisible 속성을 통해 첫 번째 입력 컨트롤에 포커스를 맞추기 위해 표시된 화면

포커스 기능이 있는 컨트롤은 FocusedBorderColor 및 FocusedBorderThickness 속성에 따라 다르게 보일 수 있습니다.

제한 사항

SetFocus는 다음과 함께 사용할 수 있습니다.

• Button 컨트롤
• Icon 컨트롤
• Image 컨트롤
• Label 컨트롤
• TextInput 컨트롤

Gallery 컨트롤, Edit form 컨트롤 또는 Component 내에 있는 컨트롤에 대해서는 포커스를 설정할 수 없습니다. SetFocus는 스크롤 가능 화면에서 컨트롤과 함께 사용할 수 있습니다.

Container 내부에 있는 컨트롤에 포커스를 설정할 수 없습니다.

SetFocus 호출이 포함된 수식과 동일한 화면의 컨트롤에 대해서만 포커스를 설정할 수 있습니다.

DisplayMode 속성이 Disabled로 설정된 컨트롤에 대해 포커스를 설정하려고 하는 것은 효과가 없습니다. 포커스는 이전 위치로 유지됩니다.

Apple iOS에서 소프트 키보드는 SetFocus가 직접 사용자 작업으로 시작된 경우에만 자동으로 표시됩니다. 예를 들어, 단추의 OnSelect 속성에서 호출하면 소프트 키보드가 표시되지만 화면의 OnVisible 속성에서 호출하면 표시되지 않습니다.

SetFocus는 동작 수식에서만 사용할 수 있습니다.

구문

SetFocus( Control )

• Control – 필수 항목입니다. 입력 포커스를 제공하는 컨트롤입니다.

예제

새로 노출되거나 활성화된 입력 컨트롤에 대한 포커스

많은 쇼핑 카트를 사용하면 고객이 운송 주소를 청구지 주소로 사용할 수 있으므로 동일한 정보를 두 번 입력 할 필요가 없습니다. 다른 청구지 주소가 필요한 경우 청구지 주소 텍스트 입력 상자를 사용할 수 있으며, 이를 통해 빠른 데이터 입력을 위해 고객을 새로 사용 가능한 이러한 컨트롤로 안내할 수 있습니다.

여기에는 많은 수식이 있지만, 포커스를 이동하는 수식은 Check box 컨트롤의 OnUncheck 속성에 있습니다.

SetFocus( BillingName )

Tab 키를 사용하여 한 필드에서 다른 필드로 포커스를 빠르게 이동할 수도 있습니다. 자세히 설명하기 위해 Tab 키가 애니메이션에서 사용되지 않았습니다.

이 예제를 만들려면

1. 새 앱 만들기
2. Label 컨트롤에 "Shipping address", "Name:", "Address:", "Billing Address", "Name:" 및 "Address:" 텍스트를 추가하고 애니메이션에 표시된 대로 배치합니다.
3. Text Input 컨트롤을 추가하고 ShippingName으로 이름을 변경합니다.
4. Text Input 컨트롤을 추가하고 ShippingAddress로 이름을 변경합니다.
5. Check box 컨트롤을 추가하고 SyncAddresses로 이름을 변경합니다.
6. 이 컨트롤에 대한 Text 속성을 "Use Shipping address as Billing address" 수식으로 설정합니다.
7. Text Input 컨트롤을 추가하고 BillingName으로 이름을 변경합니다.
8. 이 컨트롤에 대한 Default 속성을 ShippingName 수식으로 설정합니다.
9. 이 컨트롤에 대한 DisplayMode 속성을 If( SyncAddresses.Value, DisplayMode.View, DisplayMode.Edit ) 수식으로 설정합니다. 확인란 컨트롤의 상태에 따라 이 컨트롤이 자동으로 활성화되거나 비활성화됩니다.
10. Text Input 컨트롤을 추가하고 BillingAddress로 이름을 변경합니다.
11. 이 컨트롤에 대한 Default 속성을 ShippingAddress 수식으로 설정합니다.
12. 이 컨트롤에 대한 DisplayMode 속성을 If( SyncAddresses.Value, DisplayMode.View, DisplayMode.Edit ) 수식으로 설정합니다. 확인란 컨트롤의 상태에 따라 이 컨트롤이 자동으로 활성화되거나 비활성화됩니다.
13. 확인란에 대한 Default 속성을 true 속성으로 설정합니다. 청구지 주소가 운송 주소와 동일한 값을 사용하도록 기본 설정됩니다.
14. 확인란에 대한 OnCheck 속성을 Reset( BillingName ); Reset( BillingAddress ) 속성으로 설정합니다. 사용자가 운송 주소와 청구지 주소를 동기화하기로 선택하면 청구지 주소 필드에서 사용자 입력을 지우고 해당 운송 주소 필드의 값을 각 필드의 Default 속성으로 가져옵니다.
15. 확인란에 대한 OnUncheck 속성을 SetFocus( BillingName ) 속성으로 설정합니다. 사용자가 다른 청구지 주소를 선택하면 포커스가 청구지 주소의 첫 번째 컨트롤로 이동합니다. 컨트롤이 DisplayMode 속성으로 인해 이미 활성화되어 있습니다.

유효성 검사 문제에 대한 포커스

노트

이 예제는 Edit form 컨트롤인 것처럼 보이지만 안타깝게도 SetFocus는 해당 컨트롤에서 아직 지원되지 않습니다. 대신 이 예제는 스크롤 가능 화면을 사용하여 입력 컨트롤을 호스팅합니다.

양식의 유효성을 검사할 때 문제가 있는 경우 메시지를 표시하는 것뿐만 아니라 문제가 있는 필드로 사용자를 안내하는 데 도움이 될 수 있습니다. 문제가 있는 필드가 화면 밖으로 스크롤되어 보이지 않는 경우에 특히 유용할 수 있습니다.

이 애니메이션에서 모든 필드가 제대로 채워질 때까지 유효성 검사 버튼을 반복해서 누릅니다. 마우스 포인터는 화면 상단에서 아래로 이동하지 않습니다. 대신 SetFocus 함수는 다음 공식을 사용하여 입력 포커스를 주의가 필요한 컨트롤로 이동했습니다.

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 )
)

이 예제를 만들려면

1. 새로운 빈 휴대 전화 앱을 만듭니다.
2. Insert 메뉴에서 New screen을 선택한 다음 Scrollable을 선택합니다.
3. 화면의 중앙 섹션에서 Text input 컨트롤을 추가하고 Name, Street1, Street2, City, County, StateProvince, PostalCode 및 Phone으로 이름을 지정합니다. 필드를 식별하기 위해 각 필드 위에 Label 컨트롤을 추가합니다. 너무 길어서 모든 컨트롤에 맞지 않을 경우 섹션의 크기를 조정해야 할 수 있습니다.
4. 화면 상단의 스크롤 가능 섹션 위에 확인 표시 Icon 컨트롤을 추가합니다.
5. 아이콘 컨트롤에 대한 OnSelect 속성을 위에 나온 If( IsBlank( ... 속성으로 설정합니다.

화면을 표시할 때 포커스

노트

이 예제는 Edit form 컨트롤인 것처럼 보이지만 안타깝게도 SetFocus는 해당 컨트롤에서 아직 지원되지 않습니다. 대신 이 예제는 스크롤 가능 화면을 사용하여 입력 컨트롤을 호스팅합니다.

입력 컨트롤을 노출하는 것과 유사하게 데이터 입력 화면을 표시할 때 빠른 데이터 입력을 위해 첫 번째 입력 컨트롤에 포커스를 맞추는 것이 좋습니다.

이 애니메이션에서 왼쪽의 데이터 입력 화면은 SetFocus를 사용하고 있지 않습니다. 디스플레이에서 입력 컨트롤에 포커스가 없으므로 값을 입력하기 전에 사용자가 다른 수단을 탭, 터치, 마우스 또는 사용하여 Name 필드에 포커스를 맞춰야 합니다.

오른쪽에 이 수식에 대해 설정된 데이터 입력 화면의 OnVisible 속성과 정확히 동일한 앱이 있습니다.

SetFocus( Name )

이 앱은 자동으로 Name 필드에 포커스를 맞춥니다. 사용자는 사전 작업 없이 필드 사이에서 입력 및 탭을 즉시 시작할 수 있습니다.

이 예제를 만들려면

1. 위의 "유효성 검사 문제에 포커스" 앱을 작성하십시오.
2. 이 화면에서 OnVisible 속성을 SetFocus( Name ) 수식으로 설정합니다.
3. 두 번째 화면을 추가합니다.
4. Button 컨트롤을 추가합니다.
5. 이 컨트롤의 OnSelect 속성을 Navigate( Screen1 ) 수식으로 설정합니다.
6. 이 화면에서 앱을 미리 봅니다. 단추를 누릅니다. OnVisible 수식이 계산되고 Name 필드에 자동으로 포커스가 맞춰집니다.