클라이언트 상태 매개변수
클라이언트 상태 매개변수를 사용하여 구성요소 구성에 값을 바인딩합니다. 클라이언트 상태 매개변수의 값이 변경되면 구성요소가 새 값을 사용하도록 업데이트됩니다.
클라이언트 측 상호작용이란?
- 버튼 클릭
- 필터 적용
- 목록 정렬
- 목록 새로 고침
- 인라인 검색 결과 제공
- 불완전하거나 잘못된 데이터에 대해 사용자에게 경고
사용자는 때때로 다른 페이지로 이동하기 위해 페이지와 상호 작용합니다. 사용자가 페이지의 콘텐츠, 모양 또는 데이터를 업데이트하려는 경우도 있습니다. 클라이언트 측 상호작용은 전체 페이지를 새로 고치는 대신 페이지의 영향을 받는 부분만 업데이트합니다.
예를 들어 사용자는 열 헤더를 클릭하여 목록을 정렬할 수 있습니다. 정렬하면 전체 페이지가 아닌 목록만 다시 그려집니다.
- 클라이언트 상태 매개변수
- 이벤트
- 클라이언트 스크립트
클라이언트 상태 매개변수란?
클라이언트 상태 매개변수는 페이지 변수입니다. 클라이언트 상태 매개변수를 정의 및 구성하고 값을 사용하여 구성요소를 구성합니다. 클라이언트 상태 매개변수는 페이지 구성요소의 구성 값 관리를 중앙 집중화합니다. UI 빌더 는 클라이언트 상태 매개변수를 사용하여 사용자 경험을 개선하고 개인화된 콘텐츠와 서비스를 제공합니다.
클라이언트 상태 매개변수의 예
이 예시에서 페이지에는 color라는 클라이언트 상태 매개변수가 있습니다. 세 가지 구성요소 중 두 가지가 색상 클라이언트 상태 매개변수를 사용하도록 구성되어 있습니다. 색상이 주황색으로 설정되면 구성요소는 주황색입니다. 색상이 보라색으로 설정되면 구성요소는 보라색입니다. 색상이 녹색으로 설정되면 구성요소는 녹색입니다. 클라이언트 상태 매개변수는 페이지의 공통 값을 관리하는 단일 위치입니다. 클라이언트 상태 매개변수가 없으면 해당 값이 변경되면 값을 사용하는 각 구성요소를 개별적으로 업데이트해야 합니다.
예를 들어 웹 환경은 구성요소에서 사용하는 기본 색상을 색상 클라이언트 상태 매개변수에 저장합니다. 구성요소가 클라이언트 상태 매개변수를 사용하도록 구성된 경우 클라이언트 상태 매개변수의 값을 변경하면 구성요소가 새 값으로 업데이트됩니다.
사용자가 페이지 구성요소의 색상을 선택할 수 있도록 버튼이 환경에 추가될 수 있습니다. 사용자는 한 번의 클릭으로 페이지에 있는 모든 구성요소의 색상을 동시에 변경할 수 있습니다. 사용자의 색상 선택을 클라이언트 상태 매개변수에 저장한 다음, 클라이언트 상태 매개변수를 사용하여 페이지의 구성요소를 구성합니다. 사용자 상호작용으로 인해 클라이언트 상태 매개변수 값이 변경되면 페이지의 구성요소가 실시간으로 업데이트됩니다.
클라이언트 상태 패널
클라이언트 상태 패널은 기본적으로 축소되어 있습니다. 왼쪽 탐색 모음에서 클라이언트 상태 아이콘을 클릭하여 클라이언트 상태 패널을 엽니다.
- 클라이언트 상태 매개변수: 페이지의 클라이언트 상태 매개변수
- 클라이언트 상태 미리 보기: 페이지의 클라이언트 상태 매개변수에 대한 JSON
클라이언트 상태 매개변수 생성
페이지에 클라이언트 상태 매개변수를 추가하려면 클라이언트 상태 매개변수 섹션에서 + 추가 버튼을 클릭합니다.
- 이름: 매개변수의 이름입니다. 이름에는 공백을 사용할 수 없습니다.
- 유형: 매개변수의 유형
- 문자열
- 번호
- 부울
- JSON
- 초기값: 매개변수의 기본값
- occasionTypeQuery 는 기본값이 없는 문자열입니다.
- occasionListTitle 은 기본값이 모든 특수 행사인 문자열입니다.
클라이언트 상태 매개변수 작업
클라이언트 상태 매개변수가 있으면 이를 사용하여 무엇을 할 수 있습니까? 클라이언트 상태 매개변수를 사용하려면 먼저 클라이언트 상태 매개변수의 값을 구성요소 구성에 바인딩합니다. 클라이언트 상태 매개변수의 값이 변경되면 구성요소가 새 값을 사용하도록 업데이트됩니다. 클라이언트 상태 매개변수의 값을 변경하는 한 가지 방법은 이벤트 처리기를 사용하는 것입니다.
클라이언트 상태 매개변수 생성 페이지 예시에서 특수 상황 애플리케이션에 occasionTypeQuery 및 occasionListTitle 두 개의 클라이언트 상태 매개변수가 추가되었습니다. occasionTypeQuery 매개변수에는 기본적으로 값이 없으며 occasionListTitle의 기본값은 모든 특수 행사입니다. 이러한 클라이언트 상태 매개변수는 이벤트의 목록 구성요소에 적용되어 목록의 제목과 필터를 설정합니다. 버튼을 사용하여 이러한 클라이언트 상태 매개변수의 값을 업데이트하여 목록을 동적으로 업데이트합니다.
클라이언트 상태 매개변수 바인딩
클라이언트 상태 매개변수 값은 페이지 컨텍스트, 페이로드 및 데이터 자원과 동일한 방식으로 구성요소 구성 필드에 바인딩될 수 있습니다. 구성요소를 구성할 때 필드 위로 마우스를 가져간 다음 동적 데이터 바인딩
. )을 선택하여 클라이언트 상태 매개변수를 필드 값에 바인딩합니다. 이 예에서는 이벤트 목록 구성요소의 필터 필드에 대한 동적 데이터 바인딩 버튼이 강조 표시됩니다.
문자 @는 데이터 바인딩을 나타내고 상태 개체에는 클라이언트 상태 매개변수가 포함되어 있습니다. 선택 목록에서 클라이언트 상태 매개변수를 선택합니다. 이 예제에서는 occasionTypeQuery 클라이언트 상태 매개변수를 선택하는 방법을 보여줍니다. occasionTypeQuery 클라이언트 상태 매개변수의 기본값이 비어 있으므로 기본적으로 필터가 적용되지 않습니다.
구성요소의 제목도 비슷한 방식으로 설정됩니다. 제목 필드에 대한 동적 데이터 바인딩 버튼을 선택하거나 @를 입력한 다음, 선택 목록에서 state.occasionListTitle 클라이언트 상태 매개변수를 선택합니다. occasionListTitle 클라이언트 상태 매개변수의 기본값은 모든 특수 시간입니다. 이 예에서는 클라이언트 상태 매개변수를 사용하도록 구성된 제목과 필터를 보여 줍니다.
두 클라이언트 상태 매개변수가 모두 적용되면 목록에 필터가 적용되지 않으며 제목은 모든 특별한 경우입니다.
occasionTypeQuery 및 occasionListTitle 클라이언트 상태 매개변수 값은 사용자가 클라이언트 상태 매개변수의 값을 변경하는 구성요소와 상호 작용할 때까지 변경되지 않습니다.
클라이언트 상태 매개변수 값 변경
사용자는 런타임에서 클라이언트 상태 매개변수의 값을 변경하기 위해 클라이언트 상태 매개변수 업데이트 이벤트 핸들러를 사용합니다. 클라이언트 상태 매개변수 업데이트 이벤트 처리기에는 업데이트할 클라이언트 상태 매개변수와 클라이언트 상태 매개변수에 사용할 새 값의 두 가지 속성이 있습니다.
예를 들어, 생일 버튼은 Special Occasions 애플리케이션의 이벤트 목록 구성요소 위에 추가됩니다. 이 버튼의 목적은 목록의 제목 을 모든 생일 로 변경하고 생일만 표시하도록 목록의 필터를 조정하는 것입니다. 이 목적을 달성하기 위해 두 개의 이벤트 처리기가 버튼에 대한 Button clicked 이벤트에 매핑되는데, 하나는 occasionTypeQuery 클라이언트 상태 매개 변수를 변경하고 다른 하나는 occasionListTitle 클라이언트 상태 매개 변수를 변경합니다. 이미지는 windowTypeQuery 클라이언트 상태 매개 변수를 special_occasion=birthday로 설정하도록 구성된 업데이트 클라이언트 상태 매개 변수 이벤트 처리기를 보여 주며, 이는 생일만 표시하도록 목록을 필터링합니다.
버튼 클릭 이벤트가 이벤트 핸들러에 매핑되어 occasionTypeQuery 및 occasionListTitle 클라이언트 상태 매개변수를 모두 업데이트할 때, 버튼을 클릭하면 클라이언트 상태 매개변수가 업데이트되어 이벤트 목록 구성 요소가 새 값으로 자동 업데이트됩니다.