2. [Event] 클릭 시 스텝(Step) 이동하기

사전 준비

본 튜토리얼은 사전 준비가 필요 없습니다. 모든 실습을 문서 내에서 따라 할 수 있습니다.

만약 시나리오 스튜디오 내에서 따라 하고 계시다면 이전 챕터를 선수 학습하신 뒤 보시길 권장합니다.

개발하기

구현할 화면

스텝(Step)이동 구현하기

사용자의 행위에 따라 보여지는 화면의 전환을 구현해 보겠습니다. 플렉스튜디오 식으로 표현하자면, 사용자가 스텝 버튼(StepButton)을 누를 때 스텝(Step)을 이동시켜야 합니다.

스텝(Step)이란 플렉스튜디오의 고유한 개념으로 화면을 나타내는 단위입니다. 중고거래 템플릿도 여러 개의 스텝(Step)으로 이루어져 있습니다.

우리가 이동하려고 하는 스텝(Step)과 사용자 행위를 인식하는 요소를 알아보겠습니다.

Step1은 물건을 등록하는 화면 Step5는 물건을 조회하는 화면입니다.

사용자(유저)가 [작성 완료] StepButton 버튼을 누르면 Step5로 화면이 넘어가야 합니다.

실습 따라 하기

아래 따라 하기로 버튼에 클릭 이벤트를 설정하는 법을 알아봅시다. 아래 창에서 [시작하기]를 눌러주세요.

결과 화면

여기까지 오셨다면 클릭 시 스텝 이동을 통해 스텝을 전환할 수 있습니다.

'클릭 시 스텝 이동' 이 아닌 ' 클릭 시 이벤트'를 통해 커스텀 한 이벤트를 트리거 할 수도 있습니다.

이벤트는 플렉스튜디오의 고유한 개념으로 앱을 사용하는 유저의 행위로 발생하는 사건입니다. 예를 들어 '특정 버튼을 누르는 것', '값을 입력하는 것'같은 모든 행위가 이벤트를 발생시킵니다.

앱을 사용하는 사용자가 버튼을 누르거나(클릭), 입력 등의 행위를 할 때 이벤트를 통해서 데이터를 변경하거나 보이고 있는 화면을 제어할 수 있습니다.

해당 방법에 대해선 추후 챕터에서 다룹니다.

챕터 마무리

배운 내용

  • Step이라는 개념에 대해 배웠습니다.

  • StepButton에 클릭 시 스텝 이동을 적용하는 법을 배웠습니다.

다음 챕터에서는?

  • 컬렉션에 대해 알아봅시다.

  • 시나리오에서 데이터가 요소와 어떻게 결합하는지 알아봅시다.

Last updated