[심화] Step의 구성과 생애주기
Step의 구성요소와 생애 주기에 대해 알고 싶다면 해당 페이지를 참고하세요. 시나리오 구성요소 중 하나인 Step에 대해 심화 학습을 하고 싶다면 해당 페이지가 도움이 될 수 있습니다.
Step의 구성요소와 데이터 표현
Step 의 구성요소
플렉스튜디오에서는 화면이 전환되는 단위를 Step이라고 합니다. 스텝(Step),은 그룹(Group), 레이아웃(Layout), 컨트롤(Control), 스텝 버튼(StepButton) 으로 구성됩니다.
또한 플렉스튜디오에서는 Step, Group, Layout, Control, StepButton 을 컴포넌트라고 합니다. 컴포넌트는 특정 기능을 수행하는 단위입니다.
Step : 한번에 나타나는 화면의 단위입니다. Group과 Layout으로 구성됩니다.
Group : 영역을 그룹화하여 관리합니다. Group과 Layout을 포함할 수 있습니다. 여러 Layout을 하나의 영역으로 묶어서 표현하고 싶을 때 유용합니다.
Layout : 영역을 표현하는 단위입니다. Layout은 컨트롤만을 포함할 수 있습니다.
Layout이 없이는 컨트롤(Control)을 배치할 수가 없습니다.
Controls: 사용자가 상호작용할 수 있는 인터페이스 요소로, InputText, Text, CheckBox, Radio, Button 등이 해당합니다. 컨트롤은 컬렉션의 데이터를 보여주기도 하며 사용자로 부터 데이터를 입력받기도 합니다.
더 다양한 컨트롤 정보는 컨트롤 페이지를 참고하세요.
StepButton: Step 하단에 나타나는 버튼입니다.
화면의 구성요소별 생성 순서
다음은 화면의 구성요소들이 생성되는 순서를 도식화한 표입니다.
Step의 구성요소는 Step에 배치되는 순서에 따라서 생성이 됩니다.
각 컴포넌트는 하위요소가 있을 경우 하위요소가 모두 생성되고 난 후 다음 요소를 생성합니다. 위의 그림에서도 두번째 레이아웃은 첫번째 레이아웃이 모두 생성된 후 8번째로 생성되는 것을 확인 할 수 있습니다.
Step에서의 데이터 표현
Stpe의 구성요소가 데이터에 연결되면서 어떻게 표현 되는지를 보여줍니다.
위와 같은 알림목록이 나오는 Step이 있습니다. 이를 Step에서 구현할 때는 다음과 같이 구현 하게 됩니다. 두개의 레이아웃을 포함한 하나의 그룹으로 알림 메세지 영역을 구성합니다.
그리고 해당 그룹을 데이터 연결 을 하면, 실제 해당 스텝이 구동될 때는 컬렉션에 있는 데이터와 연결되어 해당 데이터(Sector)가 알림 메세지로 나타나게 됩니다.
Step의 생애 주기와 이벤트
Step의 생애주기
다음은 스텝의 생애 주기입니다. 스텝은 다음의 Cycle의 단계를 따르게 됩니다.
Init : Step은 Init에서 실제 로드되기전 이벤트를 먼저 호출 할 수 있습니다.
Load : Step이 그려집니다. 스텝내부의 모든 컴포넌트들이 생성이 됩니다.
Loaded : Step을 모두 로드 한 후에 정의된 이벤트가 있다면 실행합니다.
Ready for Use: Step이 로드되고 사용자가 사용하기 시작합니다.
Leave : 다음스텝으로 넘어가기 전에 이벤트가 있다면 실행합니다.
Step의 이벤트
Step이 생성되고 이동하면서 다음과 같은 이벤트가 각 생애주기에서 발생하게 됩니다.
Init : 스텝이 로드되기 이전입니다.
Loaded : 스텝의 레이아웃과 컨트롤이 모두 그려지고 난 후 입니다.
OnLeave : 현재 스텝을 떠나기 전에 발생합니다.
OnBackLoaded : 다음 스텝에서 뒤로 돌아오면서 이전 스텝이 로드 될 때 발생합니다.
최초 스텝이 로드 될 때
다음 스텝으로 이동할 때
이전 스텝으로 돌아갈 때
이전 스텝으로 돌아갈 때는 이전 스텝의 마지막 상태가 그대로 나타나게 됩니다. 해당 스텝에서 사용자가 입력한 값이나 변경이 된 내용이 그대로 남아 있는 상태로 나오게 됩니다. 만약에 다시 뒤로 돌아 왔을 때 변경내용을 새롭게 하거나 새롭게 데이터를 조회하고 싶을 경우 OnBackLoaded 를 사용하여 이벤트를 걸어 줄 수 있습니다.
Last updated
