사용자 입력에 의한 데이터 변화

사용자가 입력한 값에 의해 컬렉션이 변하는 방식과, 화면에 어떻게 나타나는지를 학습하려면 해당 페이지가 도움이 될 수 있습니다.

이전 챕터를 통해 화면의 구성요소들이 어떻게 섹터(Sector)와 결합하는지를 알아보았습니다.

이번에는 실제 앱이 실행되었을 때, 사용자 행동에 의해 어떤 데이터 변화가 일어나는지 확인해 봅니다.

컬렉션과 화면과의 관계

1) 데이터가 관리되는 컬렉션(Collection)의 모습

: 섹터들로 구성되어 있는 컬렉션

2) 시나리오 스튜디오 내에서 개발된 Step의 화면

3) 실제 앱에서 개발된 Step이 보이는 모습

각각의 섹터 1)가 개발한 구성요소 2)와 결합해서 섹터 수만큼 그려지고 있는 것 3)을 볼 수 있습니다.

사용자에 의한 섹터(Sector)의 변화

섹터에 의해 화면이 그려진다면 사용자에 의한 섹터의 변화는 화면을 다르게 그릴 것입니다. 이번에는 섹터의 변화에 따른 화면의 변화를 사용자를 중심으로 살펴보도록 하겠습니다.

컨텐츠 항목과 함께 섹터(Sector)를 추가

만약 사용자가 섹터를 추가하면 어떻게 될까요?

섹터 추가와 컨텐츠 항목의 변화

섹터만큼 멤버 리스트에 멤버 정보가 나오고 있으니 추가된 섹터만큼 리스트 화면에 나오는 멤버의 수가 늘어날 것입니다.

위의 그림은 멤버(Member)를 추가하는 화면입니다.

1. 멤버의 이름과 사번을 입력하는 영역을 구성합니다. 이곳을 편의를 위해 Contents라고 하겠습니다.

   

   개발시의 화면
2. 실제 앱이 실행될 때는 섹터가 없어서 Contents가 그려지지 않습니다

   

   앱에서의 화면
3. 사용자가 [Add Member] 를 누르면 섹터가 추가되고 섹터와 연결된 Contents 요소가 하나 생성됩니다.

1. 계속해서 추가(Add Member)를 누르면 섹터가 추가됩니다. 추가된 섹터가 Cotents와 결합해서 실제 화면에 그려지게 됩니다.

사용자의 활동에 의해 생성되는 섹터(Sector)는 Added라는 상태 값을 갖게 됩니다. 섹터(Sector)의 상태 값에 대한 자세한 설명은 [심화] Filter - 섹터(Sector) Status, Condition 페이지를 참고하세요.

이 내용을 플렉스튜디오에서 구현하기 위해선 이벤트 사용 페이지를 참고하여 데이터 연결 및 추가 기능 선택을 해야 합니다.

사용자 입력에 의한 데이터의 변경

생성된 Content는(여기서는 멤버 입력 콘텐츠 항목 1개) Content 영역에 사용자 입력에 의한 변화가 생기면 결합된 섹터를 찾아서 바로 변경 내용을 섹터에 반영합니다.

사용자의 입력 변화를 바로 섹터에 반영하는 모습

사용자의 입력값과 함께 사용자 활동으로 인한 섹터(Sector)의 변경 여부도 상태 값에 추가됩니다.

위와는 반대로, 섹터(Sector) 내부에서 변경되었을 경우에는 이 상태가 자동으로 Content에 반영됩니다.

컬렉션의 섹터 값을 바꾸는 스크립트는 set(key, value, key2, value.. ) 페이지를 참조하세요.

사용자 입력에 의한 섹터(Sector)의 상태값(Status)의 변화 - 사용자의 행위가 존재하는 마지막 Content에 연결된 섹터(Sector)는 Active 라는 상태값을 갖습니다. 사용자의 행위가 존재한다는 의미는 현재 입력으로 변경되는 섹터(Sector)나 마지막으로 사용자가 누르거나 선택한 컨텐츠가 해당합니다. - 사용자의 행위에 의해 변경이 일어난 섹터(Sector)는 Updated 라는 상태값을 갖게 됩니다.

상태값에 대한 자세한 설명은 [심화] Filter - 섹터(Sector) Status, Condition페이지를 참고하세요.

챕터 마무리

이번 챕터에서는 사용자에 의해 섹터가 바뀔 때 화면에 어떤 영향을 주는지 알아보았습니다. 또한 사용자의 입력이 섹터에는 어떤 영향을 주는지 알 수 있었습니다. 시나리오 요소와 섹터가 결합되어 있을 때는 서로 영향을 준다는 점을 알 수 있었습니다.

다음 챕터에서는 시나리오 구성요소 중 이벤트와 서비스의 구동 방법에 대해 살펴보겠습니다.