지난 편에서는 FlexDB를 연결하고 부서·사원·예약·참석자 4개 테이블을 생성해 샘플 데이터까지 세팅했습니다. 이번 편에서는 플렉스튜디오의 화면 템플릿을 활용해 예약 목록·등록·수정 화면을 구성하고, 각 화면에 테이블 데이터를 연결하는 과정을 다룹니다. 템플릿을 활용하면 디자인·컨트롤·일부 컬렉션키가 이미 구성되어 있어, 개발자는 데이터 연결과 이벤트 개발에 집중할 수 있습니다.
레이아웃 템플릿은 덮어쓰기가 아닌 추가방식입니다. 기존 그룹이 남아 있으면 템플릿 적용 시 중복이 발생하므로, 기존 그룹을 먼저 삭제한 뒤 진행해야 합니다.
이번 앱은 총 3개의 스텝으로 구성됩니다.
좌측 상단 툴바에서 템플릿 버튼을 클릭 → 회의실로 검색 → 새 예약 버튼이 있는 템플릿을 적용합니다.
Step1 테두리의 '+' 버튼을 원하는 방향으로 눌러 스텝을 추가합니다. 추가된 스텝에는 입력 화면 템플릿(회의실, 필수 체크 버튼 다수, 참석자 정보 포함)을 등록합니다.
이때 Group1은 먼저 삭제하고 진행합니다.
스텝을 하나 더 생성한 뒤 Step2와 동일한 입력 화면 템플릿을 선택합니다. 세 번째 스텝은 수정 화면으로 사용합니다.
Step1의 스텝 버튼은 불필요하므로 제거합니다. 버튼 선택 후 Delete 키 또는 ‘더 보기 → 삭제’로 제거합니다.
📌 템플릿에 이미 포함된 구성 요소
템플릿이 적용된 상태이므로 디자인은 이미 완성되어 있습니다. 이 단계에서는 데이터를 연결하는 작업에 집중합니다.
새 예약 버튼의 Dev 탭을 확인하면 Step2로 이동하는 설정이 이미 들어 있습니다. 여기에 클릭 이벤트를 추가합니다.
📌 왜 initReservation이 필요한가?
사용자가 예약 입력을 하다가 취소하고 돌아온 뒤 다시 '새 예약'을 누르면, 이전에 입력하던 데이터가 컬렉션에 남아 있을 수 있습니다. 이 이벤트는 새 예약을 누르는 시점에 reservation, reservAttendee, selectData 카테고리를 모두 비우고 회의 종료 기본값이 들어간 빈 섹터를 하나 생성하는 초기화 작업을 수행합니다.
목록 아이템 그룹에 예약 데이터를 연결합니다.
각 컨트롤에 비어 있는 컬렉션키를 연결합니다. 템플릿에는 날짜 포맷팅·시간 포맷팅이 이미 적용되어 있어, 컬렉션키만 연결하면 3/25, 14:00~15:00과 같은 형태로 자동 표시됩니다.
삭제 버튼에 클릭 이벤트를 설정합니다.
📌 바로 삭제하지 않고 confirmDelete를 거치는 이유
실수로 클릭했을 때 복구가 불가능하기 때문에, 메시지 박스로 '이 예약을 삭제하시겠습니까?'이라는 확인을 받은 후에만 실제 삭제가 실행되도록 합니다. 실무에서는 이런 확인 절차가 필수적입니다.
시스템 이벤트 사용을 체크하고 로드 시(Loaded) 시점에 queryReservation 이벤트를 입력합니다.
이 이벤트에서 DEMO_queryReservation 서비스를 호출하면 전체 예약 목록이 조회됩니다.
📌 Init이 아닌 Loaded인 이유
Step1은 앱의 메인 화면이자, 예약을 등록·수정·삭제한 후 돌아올 때마다 최신 목록을 다시 조회해야 합니다.
Init에 걸면 앱을 처음 열 때만 조회되고 이후 돌아와도 목록이 갱신되지 않습니다.
Step2 템플릿에는 두 영역이 이미 만들어져 있습니다.
Step2를 클릭한 뒤 다음과 같이 설정합니다.
📌 '신규 입력'으로 설정하는 이유
이 그룹에 진입할 때 reservation 카테고리에 빈 섹터가 자동으로 생성됩니다. 사용자가 입력 폼에 값을 채우면 이 빈 섹터의 값이 채워지는 구조입니다. '조회'로 설정하면 빈 섹터가 만들어지지 않아 입력한 값을 저장할 곳이 없게 됩니다.
카테고리 연결 팝업이 나타나면 아래 이미지와 같이 컬렉션키를 입력하고 적용 버튼을 클릭합니다.
📌 왜 selectData라는 별도 카테고리를 사용하는가?
콤보 컨트롤에서 부서나 사원을 선택하면 그 선택값이 어딘가에 저장되어야 합니다. 이를 reservation이나 reservAttendee에 넣으면 실제 저장할 데이터와 섞여 버립니다. 그래서 선택용 임시 데이터 보관소로 selectData를 별도로 사용합니다.
그룹 추가 버튼을 누르는 시점에 selectData에서 선택된 데이터를 읽어 reservAttendee에 실제 참석자로 추가하는 흐름입니다.
실제 추가된 참석자 목록은 reservAttendee 카테고리에 연결합니다.
참석자 목록의 삭제 버튼에 클릭 이벤트를 설정합니다.
📌 Step2에서 다시 한 번 초기화를 거는 이유 (방어 코드)
initReservation이 이미 Step1의 새 예약 버튼에서 초기화 작업을 수행했지만, 뒤로가기 등 비정상 경로로 Step2에 진입하는 경우가 있을 수 있습니다.
step2Init은 이런 경우를 대비한 방어 코드입니다.
Step3는 Step2와 동일한 템플릿을 사용하지만, 데이터 용도가 다릅니다.
Step3의 예약 정보 그룹에서 다음과 같이 설정합니다.
📌 Active 필터가 필요한 이유
Step1 목록에서 항목을 클릭하면 해당 섹터가 Active 상태가 됩니다. Step3를 '수정 용도 + Active 필터'로 설정하면 현재 선택된 예약의 데이터가 입력 폼에 자동으로 채워져 수정할 수 있게 됩니다.
Step3의 스텝 이벤트는 Init 시점에 queryReservAttendee_E를 연결합니다. 이 이벤트는 기존 참석자 목록을 조회하는 역할을 수행합니다.
📌 왜 Step1은 Loaded, Step3는 Init인가?
이번 편에서는 템플릿을 통해 3개 스텝의 화면을 구성하고 각 화면에 테이블 데이터를 연결했습니다. 다음 편은 이 시리즈의 진짜 핵심으로 Combo 컨트롤을 활용해 부서 단위 일괄 추가와 사원별 한 명씩 추가 두 가지 방식의 참석자 추가 기능을 개발하는 과정을 다루겠습니다.