에서 클라이언트 상태 매개변수 사용 UI 빌더

경험 페이지에 스타일화된 텍스트 구성요소와 두 개의 버튼을 추가하여 간단한 카운터를 생성합니다. 버튼을 선택할 때 카운트가 증가하거나 감소하도록 클라이언트 상태 매개변수를 사용하여 기능을 구현합니다.

시작하기 전에

필요한 역할: ui_builder_admin

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. > 경험 생성을 선택하여 작업할 경험을 열거나 경험을 생성합니다.
   경험 생성에 대한 자세한 내용은 을 참조하십시오 에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 에서 페이지 생성 UI 빌더 을 클릭하거나 페이지를 엽니다.
4. 본문 아래의 콘텐츠 트리에서 + 콘텐츠를 선택하여 열 레이아웃을 추가합니다.
5. 레이아웃 탭에서 두 개의 열을 선택합니다.
6. 열 1 아래의 콘텐츠 트리에서 + 콘텐츠 추가를 선택하여 첫 번째 구성 요소를 추가합니다.

   

   1. 검색에 sty를 입력합니다.
   2. 스타일을 입힌 텍스트 구성요소를 선택합니다.

      

   3. 구성 패널에서 없음 - 구성 요소를 수동으로 구성을 선택합니다.

      

7. 열 2 아래의 콘텐츠 트리에서 + 콘텐츠 추가를 선택하여 두 번째 구성 요소를 추가합니다.
   1. 검색에서 button을 입력합니다.
   2. 선택 버튼 아이콘.

      

   3. 구성 패널에서 없음 - 구성 요소를 수동으로 구성을 선택합니다.
   4. 아이콘에서 사각형 화살표 위쪽 채우기를 선택합니다.

      

8. 컨텐츠 트리에서 버튼 아이콘 1 을 가리키고 메뉴 아이콘을 선택한 다음 뒤에 추가를 선택하여 세 번째 구성요소를 추가합니다.

   

   1. 검색에서 이전 단계에서와 같이 button을 입력합니다.
   2. 이전 단계에서와 같이 아이콘 버튼을 선택합니다.
   3. 구성 패널에서 없음 - 이전 단계에서와 같이 구성요소를 수동으로 구성을 선택합니다.
   4. Icon(아이콘)에서 이번에는 Square Arrow Down Fill(사각형 화살표 아래쪽 채우기)이라는 다른 아이콘을 선택합니다.

      

9. 저장을 선택합니다.
   스타일화된 텍스트 구성요소와 두 개의 버튼 아이콘 구성요소가 저장되고 스테이지에 나타납니다.

   

10. 데이터 및 스크립트로 이동하여 클라이언트 상태 매개변수를 가리키고 새로 추가(더하기) 아이콘을 선택하여 클라이언트 상태 매개변수를 추가합니다.
    1. count를 입력하여 이름을 변경합니다.
    2. 유형을숫자로 변경합니다.
    3. 숫자 0을 입력하여 초기값을 설정합니다.
    4. X를 선택하여 창을 닫습니다.

       

11. 스타일화된 텍스트 구성요소를 클라이언트 상태 매개변수에 바인딩합니다.
    1. 스테이지에서 스타일이 지정된 텍스트 구성요소를 선택합니다.
    2. 구성 패널에서 텍스트 필드를 가리키고 데이터 바인딩 또는 스크립트 사용 아이콘을 선택합니다.

       

    3. 데이터 형식 탭에서 클라이언트 상태를 선택합니다.
    4. 카운트 알약을 두 번 클릭합니다.
    5. 적용을 선택합니다.

       

       텍스트 필드가 카운트로 변경됩니다.

12. 이제 숫자를 늘리거나 줄이도록 버튼을 구성합니다.
    1. 스테이지의 상단 버튼을 선택합니다.
    2. 구성 패널에서 이벤트 탭을 선택합니다.
    3. + 이벤트 처리기 추가를 선택합니다.
    4. 페이지 수준 이벤트 처리기에서클라이언트 상태 매개 변수 업데이트를 선택합니다.
    5. 클라이언트 상태 매개변수 이름에서 카운트를 선택합니다.
    6. 새 값 필드를 가리키고 데이터 바인딩 또는 스크립트 사용 아이콘을 선택합니다.

       

    7. 데이터 형식 탭에서 클라이언트 상태를 선택합니다.
    8. 카운트 알약을 두 번 클릭합니다.
    9. 수식 탭을 선택합니다.
    10. 목록에서 수학을 선택합니다.
    11. 추가 정제를 두 번 클릭합니다.
    12. 맨 위에 있는 오른쪽 알약에서 텍스트를 제거하고 1을 입력합니다.

        

    13. 적용을 선택합니다.
    14. 추가를 선택합니다.
13. 이제 첫 번째 버튼에 사용한 것과 동일한 프로세스에 따라 두 번째 버튼을 구성하되 ADD 알약 대신 SUB 알약을 선택합니다.
    1. 스테이지에서 아래쪽 버튼을 선택합니다.
    2. 구성 패널에서 이벤트 탭을 선택합니다.
    3. + 이벤트 처리기 추가를 선택합니다.
    4. 페이지 수준 이벤트 처리기에서클라이언트 상태 매개 변수 업데이트를 선택합니다.
    5. 클라이언트 상태 매개변수 이름에서 카운트를 선택합니다.
    6. 새 값 필드를 가리키고 데이터 바인딩 또는 스크립트 사용 아이콘을 선택합니다.
    7. 데이터 형식 탭에서 클라이언트 상태를 선택합니다.
    8. 카운트 알약을 두 번 클릭합니다.
    9. 수식 탭을 선택합니다.
    10. 목록에서 수학을 선택합니다.
    11. SUB 알약을 두 번 클릭합니다.
    12. 상단의 오른쪽 알약에서 텍스트를 제거하고 1을 입력합니다.
    13. 적용을 선택합니다.
    14. 추가를 선택합니다.
14. 미리 보기를 선택하여 카운터를 테스트합니다.
15. 카운트를 늘리려면 위쪽 화살표 버튼을 선택하고 카운트를 줄이려면 아래쪽 화살표 버튼을 선택합니다.

    

결과

카운트를 하나씩 늘리는 버튼 구성요소와 카운트를 하나씩 줄이는 다른 버튼 구성요소를 추가했습니다. 스타일화된 텍스트 구성요소를 추가하여 증가 및 감소하는 개수를 표시했습니다.

버튼 구성 요소에 대한 자세한 기술 정보는 버튼 개요 및 API를 참조하십시오.

스타일화된 텍스트 구성 요소에 대한 자세한 기술 정보는 스타일 텍스트 개요를 참조하십시오.