템플릿으로 회의실 예약 화면 구성하기

지난 편에서는 FlexDB를 연결하고 부서·사원·예약·참석자 4개 테이블을 생성해 샘플 데이터까지 세팅했습니다. 이번 편에서는 플렉스튜디오의 화면 템플릿을 활용해 예약 목록·등록·수정 화면을 구성하고, 각 화면에 테이블 데이터를 연결하는 과정을 다룹니다. 템플릿을 활용하면 디자인·컨트롤·일부 컬렉션키가 이미 구성되어 있어, 개발자는 데이터 연결과 이벤트 개발에 집중할 수 있습니다.

영상 강의로 학습하기 👉
사용된 코드 확인하기 👉

템플릿 적용 전 체크 포인트

레이아웃 템플릿은 덮어쓰기가 아닌 추가방식입니다. 기존 그룹이 남아 있으면 템플릿 적용 시 중복이 발생하므로, 기존 그룹을 먼저 삭제한 뒤 진행해야 합니다.

스텝 구조 만들기

이번 앱은 총 3개의 스텝으로 구성됩니다.

• Step1 : 예약 목록 (조회 화면)
• Step2 : 예약 등록 (신규 입력 화면)
• Step3 : 예약 수정 (수정 화면, Step2와 동일 템플릿)

1. Step1 : 새 예약 버튼 템플릿 적용

좌측 상단 툴바에서 템플릿 버튼을 클릭 → 회의실로 검색 → 새 예약 버튼이 있는 템플릿을 적용합니다.

2. Step2 : 입력 화면 템플릿 추가

Step1 테두리의 '+'  버튼을 원하는 방향으로 눌러 스텝을 추가합니다. 추가된 스텝에는 입력 화면 템플릿(회의실, 필수 체크 버튼 다수, 참석자 정보 포함)을 등록합니다.
이때 Group1은 먼저 삭제하고 진행합니다.

3. Step3 : 수정 화면 템플릿 추가

스텝을 하나 더 생성한 뒤 Step2와 동일한 입력 화면 템플릿을 선택합니다. 세 번째 스텝은 수정 화면으로 사용합니다.

4. Step1의 스텝 버튼 제거

Step1의 스텝 버튼은 불필요하므로 제거합니다. 버튼 선택 후 Delete 키 또는 ‘더 보기 → 삭제’로 제거합니다.

📌 템플릿에 이미 포함된 구성 요소

• 컨트롤 배치·디자인
• 일부 컬렉션키
• 로드스크립트
  • 예: Step1의 회의 유형 컨트롤은 Share·Decision·Idea 값에 따라 텍스트를 바꾸는 로드스크립트, Step2 참석자 목록의 그룹/개별 배지 색상 구분 로드스크립트 등
• 스텝 전환 설정
  • 예: 항목 클릭 시 Step3으로 이동
    

Step1 : 예약 목록 화면 구성

템플릿이 적용된 상태이므로 디자인은 이미 완성되어 있습니다. 이 단계에서는 데이터를 연결하는 작업에 집중합니다.

① 새 예약 버튼 - initReservation 이벤트 연결

새 예약 버튼의 Dev 탭을 확인하면 Step2로 이동하는 설정이 이미 들어 있습니다. 여기에 클릭 이벤트를 추가합니다.

• 클릭 이벤트 사용 체크
• 이벤트 명 : initReservation

📌 왜 initReservation이 필요한가?

사용자가 예약 입력을 하다가 취소하고 돌아온 뒤 다시 '새 예약'을 누르면, 이전에 입력하던 데이터가 컬렉션에 남아 있을 수 있습니다. 이 이벤트는 새 예약을 누르는 시점에 reservation, reservAttendee, selectData 카테고리를 모두 비우고 회의 종료 기본값이 들어간 빈 섹터를 하나 생성하는 초기화 작업을 수행합니다.

② 목록 아이템 그룹 - 데이터 연결 (조회 용도)

목록 아이템 그룹에 예약 데이터를 연결합니다.

• 데이터 연결 체크
• 데이터 용도 : 조회
  • '조회'로 설정한 이유 : 이 그룹은 DB에서 가져온 예약 목록을 읽기 전용으로 보여주는 역할만 합니다.
    조회 용도로 설정하면 컬렉션의 섹터 수만큼 목록이 자동으로 반복 표시됩니다.
• 카테고리명 : reservation
  • 카테고리명은 대소문자를 구분합니다. 대문자 R이 아닌 소문자 r로 정확히 기입해야 합니다.
    시나리오 내에서 한 글자라도 다르면 다른 카테고리로 인식되어 데이터가 연결되지 않습니다.

③ 목록 내 컨트롤에 컬렉션 키 연결

각 컨트롤에 비어 있는 컬렉션키를 연결합니다. 템플릿에는 날짜 포맷팅·시간 포맷팅이 이미 적용되어 있어, 컬렉션키만 연결하면 3/25, 14:00~15:00과 같은 형태로 자동 표시됩니다.

④ 삭제 버튼 - confirmDelete 이벤트 연결

삭제 버튼에 클릭 이벤트를 설정합니다.

• 이벤트 명 : confirmDelete

📌 바로 삭제하지 않고 confirmDelete를 거치는 이유

실수로 클릭했을 때 복구가 불가능하기 때문에, 메시지 박스로 '이 예약을 삭제하시겠습니까?'이라는 확인을 받은 후에만 실제 삭제가 실행되도록 합니다. 실무에서는 이런 확인 절차가 필수적입니다.

⑤ 스텝 이벤트 - queryReservation을 Loaded 시점에 연결

시스템 이벤트 사용을 체크하고 로드 시(Loaded) 시점에 queryReservation 이벤트를 입력합니다.
이 이벤트에서 DEMO_queryReservation 서비스를 호출하면 전체 예약 목록이 조회됩니다.

📌 Init이 아닌 Loaded인 이유

• Init : 스텝이 최초 생성되는 시점에 한 번만 실행
• Loaded : 화면이 로드될 때마다 실행

Step1은 앱의 메인 화면이자, 예약을 등록·수정·삭제한 후 돌아올 때마다 최신 목록을 다시 조회해야 합니다.
Init에 걸면 앱을 처음 열 때만 조회되고 이후 돌아와도 목록이 갱신되지 않습니다.

Step2 : 예약 등록 화면 구성

Step2 템플릿에는 두 영역이 이미 만들어져 있습니다.

• 윗부분 : 예약 정보 입력 영역
• 아랫부분 : 참석자 추가 영역

① Step 헤더 설정

Step2를 클릭한 뒤 다음과 같이 설정합니다.

• 뒤로가기 사용하기 체크
• 스텝명 : 회의실 예약

② 예약 정보 그룹 - 데이터 연결

• 데이터 연결 체크
• 데이터 용도 : 신규 입력
• 카테고리명 : reservation

📌 '신규 입력'으로 설정하는 이유

이 그룹에 진입할 때 reservation 카테고리에 빈 섹터가 자동으로 생성됩니다. 사용자가 입력 폼에 값을 채우면 이 빈 섹터의 값이 채워지는 구조입니다. '조회'로 설정하면 빈 섹터가 만들어지지 않아 입력한 값을 저장할 곳이 없게 됩니다.

카테고리 연결 팝업이 나타나면 아래 이미지와 같이 컬렉션키를 입력하고 적용 버튼을 클릭합니다.

③ 참석자 영역 - 데이터 연결

• 데이터 연결 체크
• 데이터 용도 : 신규 입력
• 카테고리명 : selectData

📌 왜 selectData라는 별도 카테고리를 사용하는가?

콤보 컨트롤에서 부서나 사원을 선택하면 그 선택값이 어딘가에 저장되어야 합니다. 이를 reservation이나 reservAttendee에 넣으면 실제 저장할 데이터와 섞여 버립니다. 그래서 선택용 임시 데이터 보관소로 selectData를 별도로 사용합니다.

그룹 추가 버튼을 누르는 시점에 selectData에서 선택된 데이터를 읽어 reservAttendee에 실제 참석자로 추가하는 흐름입니다.

④ 참석자 목록 그룹 - 데이터 연결

실제 추가된 참석자 목록은 reservAttendee 카테고리에 연결합니다.

• 데이터 연결 체크
• 데이터 용도 : 조회
• 카테고리명 : reservAttendee

⑤ 삭제 버튼 - removeAttendee 이벤트 연결

참석자 목록의 삭제 버튼에 클릭 이벤트를 설정합니다.

• 이벤트 명 : removeAttendee

⑥ 하단 스텝 버튼 - saveReservation 이벤트 연결

• 클릭 이벤트 : saveReservation
• 이동할 스텝 : 직전 스텝

⑦ 스텝 이벤트 - step2Init을 최초 시작 전 시점에 연결

📌 Step2에서 다시 한 번 초기화를 거는 이유 (방어 코드)

initReservation이 이미 Step1의 새 예약 버튼에서 초기화 작업을 수행했지만, 뒤로가기 등 비정상 경로로 Step2에 진입하는 경우가 있을 수 있습니다.
step2Init은 이런 경우를 대비한 방어 코드입니다.

Step3 : 예약 수정 화면 구성

Step3는 Step2와 동일한 템플릿을 사용하지만, 데이터 용도가 다릅니다.

핵심 차이점 : '수정' 용도 + Active 필터

Step3의 예약 정보 그룹에서 다음과 같이 설정합니다.

• 데이터 용도 : 수정
• 필터 : Active 필터 적용

📌 Active 필터가 필요한 이유

Step1 목록에서 항목을 클릭하면 해당 섹터가 Active 상태가 됩니다. Step3를 '수정 용도 + Active 필터'로 설정하면 현재 선택된 예약의 데이터가 입력 폼에 자동으로 채워져 수정할 수 있게 됩니다.

스텝 이벤트 - queryReservAttendee_E를 Init 시점에 연결

Step3의 스텝 이벤트는 Init 시점에 queryReservAttendee_E를 연결합니다. 이 이벤트는 기존 참석자 목록을 조회하는 역할을 수행합니다.

📌 왜 Step1은 Loaded, Step3는 Init인가?

• Step1 : 여러 번 돌아올 수 있는 메인 화면이라 매번 갱신이 필요합니다 → Loaded
• Step3 : 항상 특정 예약을 선택한 직후에 진입하므로, 최초 1회만 해당 예약의 참석자를 조회하면 충분합니다 → Init
  

다음 강의 : Combo 컨트롤로 참석자 추가 기능 개발하기

이번 편에서는 템플릿을 통해 3개 스텝의 화면을 구성하고 각 화면에 테이블 데이터를 연결했습니다. 다음 편은 이 시리즈의 진짜 핵심으로 Combo 컨트롤을 활용해 부서 단위 일괄 추가와 사원별 한 명씩 추가 두 가지 방식의 참석자 추가 기능을 개발하는 과정을 다루겠습니다.