에서 클라이언트 상태 매개변수 사용 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 을 가리키고, 메뉴 아이콘을 선택하고, Add after를 선택하여 세 번째 구성요소를 추가합니다.

   

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

      

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. ADD 알약을 두 번 클릭합니다.
    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. 개수를 늘리려면 위쪽 화살표 버튼을 선택하고 개수를 줄이려면 아래쪽 화살표 버튼을 선택합니다.

    

결과

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

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

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