에서 카운터 생성 UI 빌더

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

시작하기 전에

필요한 역할: ui_builder_admin

프로시저

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

   

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

      

   3. 구성 패널에서 None - Configure the component manually 를 선택합니다.

      

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

      

   3. 구성 패널에서 None - Configure the component manually 를 선택합니다.
   4. 아이콘에서 Square Arrow Up Fill을 선택합니다.

      

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

   

   1. 검색에서 이전 단계에서와 같이 단추를 입력합니다.
   2. 이전 단계에서와 같이 버튼 아이콘을 선택합니다.
   3. 구성 패널에서 이전 단계에서와 같이 None - Configure the component manually 를 선택합니다.
   4. 아이콘에서 이번에는 다른 아이콘(Square Arrow Down Fill이라는 이름의 아이콘)을 선택합니다.

      

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

   

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

       

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

       

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

       

       텍스트 필드가 개수로 변경됩니다.

12. 이제 숫자를 늘리거나 줄이도록 버튼을 구성합니다.
    1. 스테이지에서 맨 위 버튼을 선택합니다.
    2. 구성 패널에서 이벤트 탭을 선택합니다.
    3. + 이벤트 처리기 추가를 선택합니다.
    4. Page-level event handlers(페이지 수준 이벤트 처리기)에서Update client state parameter(클라이언트 상태 매개 변수 업데이트)를 선택합니다.
    5. Client State Parameter Name(클라이언트 상태 매개 변수 이름)에서 count를 선택합니다.
    6. 새 값 필드를 가리키고 데이터 바인딩 또는 스크립트 사용 아이콘을 선택합니다.

       

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

        

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

    

결과

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

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

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