6.1 정보 엔티티
모듈 4에서는 교육 이벤트를 예약하는 기능을 구축했으며 도메인 모델 및 연결에 대해 배웠습니다. TrainingEvent, 코스, 위치 및 교사 간에 연결을 생성했습니다. 교육생이 아직 다른 엔티티에 연결되어 있지 않다는 것을 눈치채셨나요? 다음 사용자 스토리에서는 이를 바꿀 것입니다!
지미는 교육생을 교육 이벤트에 등록할 수 있기를 원합니다. 즉, 두 개체를 연결해야 합니다. 두 엔티티 사이에는 연결이 필요합니다! 하나의 트레이닝 이벤트에 여러 명의 트레이너가 참석할 수 있고, 한 명의 트레이너가 여러 개의 트레이닝 이벤트에 참석할 수 있습니다. 따라서 이것은 참조 집합이라고도 하는 다대다 연결이 될 것 같습니다. 하지만 지미는 이 연결에 몇 가지 정보를 추가할 수 있기를 원합니다(예: 교육생이 등록되었을 때 등록 번호와 교육생의 참석 여부를 등록하고 싶음). 하지만 연결 자체 외에는 연결에 아무것도 저장할 수 없습니다.
일반적인 다대다 연결과는 다른 접근 방식이 필요합니다. 교육생과 교육 이벤트 사이에 둘 사이의 연결에 대해 설명하는 엔티티가 필요합니다. 이를 정보 엔티티라고 합니다.
6.1.1 도메인 모델 확장
이제 정보 엔티티를 사용하여 지미가 제공할 수업에 대한 등록을 기록할 수 있도록 할 차례입니다.
스토리 탭으로 이동하여 다음 사용자 스토리를 실행 중으로 설정합니다: "관리자로서 저는 교육 이벤트에 등록을 추가하여 선생님들이 수강생이 누구인지 알 수 있도록 하고 싶습니다."
이제 이 정보 엔티티를 앱에 추가할 차례입니다! 앱 탐색기에서 도메인 모델을 찾아서 엽니다. TrainingEvent와 연수생 사이에 새 엔티티를 배치합니다.
새 엔티티를 마우스 오른쪽 버튼으로 클릭하고 속성을 선택하거나 두 번 클릭하여 새 엔티티의 속성을 편집합니다. 이 엔티티의 이름을 Registration으로 지정하고 다음 속성을 추가합니다:
번호
이 속성은 자동 번호 속성이므로 새로 생성된 등록이 있을 때마다 자동 증가하므로 각 등록은 자동으로 고유한 등록 번호를 얻게 됩니다.
날짜
물론 날짜 및 시간 속성이 될 것이지만 날짜가 등록이 생성된 순간으로 자동 설정되면 좋지 않을까요? 기본값을 설정하면 이렇게 할 수 있습니다. 먼저 속성을 만든 다음 속성 창을 사용하여 기본값을 현재 날짜 및 시간으로 기본값으로 설정합니다.
참석
이 속성은 누군가가 참석했는지 여부를 나타내므로 부울 속성이 됩니다.
등록과 교육 이벤트 및 교육생 사이에 일대다 연결을 생성하여 각 등록이 단 하나의 교육생 및 단 하나의 교육 이벤트와 연결될 수 있도록 합니다.
이것이 도메인 모델의 모습입니다:
6.2 중첩된 데이터
이제 앱에서 등록을 관리하는 방법을 생각해야 합니다. 등록은 특정 교육 이벤트에 속하게 되므로 TrainingEvent 개요 페이지에서 관리하는 것이 좋습니다.
하지만 과거에 했던 것처럼 데이터베이스의 모든 등록을 보여주는 목록 보기를 사용하여 개요 페이지를 만들면 금방 너무 커져서 유용하지 않게 됩니다! 지미가 트레이닝을 받는 장소가 10개일 수도 있지만 천 개는 아니므로 한 페이지에 모두 표시하는 것은 괜찮습니다. 하지만 각 교육 이벤트에 10개 이상의 등록이 있을 수 있는 경우, 몇 달 또는 몇 년 후에는 등록 개체가 수천 개가 될 수 있으며 모든 등록 개체의 간단한 목록으로는 작업하기가 불가능하다는 것을 알 수 있습니다.
이 대규모 데이터 집합에서 관련 개체만 표시하도록 필터링해야 합니다. 이 작업은 데이터 위젯의 검색 필드나 필터를 사용하여 Mendix에서 수행할 수 있지만, 이 경우에는 중첩이라는 기능을 사용하여 프로세스를 더욱 자동화할 수 있습니다. 중첩을 사용하면 Jimmy가 현재 관심 있는 교육 이벤트에 따라 한 번에 수백 개가 아닌 10개 또는 20개의 작은 등록 목록을 볼 수 있습니다.
중첩은 데이터 뷰 안에 목록 뷰를 배치하고 두 뷰가 제대로 함께 작동하도록 구성하면 작동합니다. 특정 교육 이벤트의 등록을 보려면 교육 이벤트 데이터 뷰 안에 등록 목록 뷰를 중첩해야 합니다. 이렇게 하면 멘딕스 스튜디오가 데이터 뷰(특정 교육 이벤트)의 컨텍스트를 사용하여 이 교육 이벤트에 속하는 등록만 표시할 수 있습니다.
그러기 위해서는 반드시 필요합니다:
TrainingEvent_Overview 페이지에 새 버튼을 만듭니다.
등록 개요에 대한 새 페이지를 만들고 방금 만든 버튼을 해당 페이지에 연결합니다.
특정 교육 이벤트에 대한 등록만 표시되도록 데이터 보기 안에 목록 보기를 배치합니다.
사용자가 특정 교육 이벤트에 대한 새 등록을 만들 수 있도록 새 버튼과 세부 정보 페이지를 만듭니다.
다음 과제에서는 이를 단계별로 수행하는 방법을 살펴보겠습니다.
6.2.1 등록 페이지 만들기
등록 정보를 저장할 수 있는 프레임워크가 준비되었습니다. 이제 앱에 입력할 수 있도록 사용자 인터페이스만 있으면 됩니다. 시작하세요!
TrainingEvent_Overview 페이지로 이동합니다.
도구 상자에서 페이지 열기 버튼을 찾습니다. ">" 버튼 위에 끌어다 놓아 ">" 버튼 왼쪽에 배치합니다.
웹 페이지 선택 창이 열립니다. 등록 페이지가 아직 존재하지 않으므로 새로 만들기를 클릭하여 지금 생성합니다.
이 페이지의 좋은 이름은 TrainingEvent_Registration_Overview입니다.
이 페이지를 처음부터 새로 만들 예정이므로 빈 템플릿을 선택합니다.
Atlas_Default 탐색 레이아웃을 사용해야 합니다.
확인을 클릭합니다.
새 버튼의 캡션을 등록으로 변경합니다.
새 버튼이 칙칙해 보이므로 더 눈에 띄도록 다른 스타일을 지정해 보겠습니다. 등록 버튼을 선택한 상태에서 속성 패널에서 버튼 스타일 선택기를 찾아 정보로 설정합니다.
완료된 등록 버튼을 마우스 오른쪽 버튼으로 클릭하고 클릭 페이지(MyFirstModule.TrainingEvent_Registration_Overview)로 이동을 클릭합니다.
다음 강의에서는 등록 개요 페이지를 편집하여 작동하도록 합니다. 데이터를 중첩하고 기존 데이터를 컨텍스트로 사용하는 방법을 배웁니다.
6.2.2 데이터 중첩 방법
이제 방금 만든 교육 이벤트 등록 개요 페이지에 있습니다. 페이지에는 빈 열만 있으며, 가장 먼저 해야 할 일은 해당 열 안에 데이터 보기를 추가하는 것입니다. 데이터 보기 위젯을 사용하면 하나의 특정 객체의 정보를 보고 변경할 수 있습니다. 지금까지 만든 모든 세부 정보 페이지에는 데이터 보기가 포함되어 있습니다. 데이터 보기는 시작 지점인 페이지의 컨텍스트에 있습니다. 이 경우에는 TrainingEvent 개체입니다. 이 페이지로 이동하면 Jimmy는 개요 페이지에 교육 이벤트 목록이 표시되고 각 이벤트 옆에 등록 버튼이 있습니다. 지미가 어떤 등록 버튼을 클릭하는지에 따라 이 새 페이지에 컨텍스트로 전송할 교육 이벤트 개체를 선택할 수 있습니다.
열 안에 새 데이터 보기 위젯을 놓습니다(도구 상자에서 찾을 수 있음).
데이터 보기 위젯을 TrainingEvent 엔티티에 연결하여 오류를 해결합니다. 페이지의 내용을 자동으로 채우지 마십시오. 아니요를 클릭합니다.
데이터 보기 위젯을 두 번 클릭합니다. 바닥글 표시 필드에서 아니요를 클릭합니다.
이제 최종 사용자가 어떤 교육 이벤트의 등록을 보고 있는지 알 수 있도록 페이지에 헤더(페이지 제목)를 추가해 보겠습니다. 도구 상자에서 컨트롤이 있는 페이지 헤더 빌딩 블록을 찾아 데이터 보기 안에 배치합니다.
빌딩 블록은 멘딕스 UX 팀에서 디자인한 것으로, 페이지에 사용자 친화적인 섹션을 추가할 수 있도록 도와줍니다. 각 빌딩 블록은 스타일 속성이 적용된 여러 위젯으로 구성된 템플릿입니다. 빌딩 블록을 페이지로 끌어다 놓은 다음 필요한 경우 데이터 또는 페이지에 연결하기만 하면 됩니다. 빌딩 블록을 배치한 후에는 언제든지 원하는 대로 변경할 수 있습니다.
함께 제공되는 큰 텍스트 위젯을 사용하여 속성을 사용하여 설명적인 제목을 구성합니다(예: {시작 날짜}에 {코스/제목}에 대한 등록 에 대한 등록
회색 작업 버튼은 삭제하고 나중에 파란색 버튼을 사용하겠습니다.
페이지에 새 전폭 행을 추가합니다(측면의 회색 막대를 마우스 오른쪽 버튼으로 클릭하여 내부 레이아웃 그리드에 추가).
새 행 안에 새 목록 보기를 배치합니다. 목록 보기를 강조 표시한 상태에서 커넥터 창으로 이동하여 등록 엔티티를 찾습니다. 커넥터는 페이지 요소를 동적 데이터에 쉽고 빠르게 연결할 수 있는 유용한 창입니다. 등록을 두 번 클릭합니다.
교육 이벤트에 연결할 수 있는 옵션이 표시되나요? 연결 없음을 선택하면 시스템에 있는 모든 등록이 표시됩니다. 이 교육 이벤트에 속하는 등록만 표시하기 위해 교육 이벤트의 컨텍스트를 사용하지 않습니다.
연결 이상을 선택하면 교육 이벤트의 컨텍스트가 사용됩니다. 이를 객체를 제약 조건으로 사용한다고 합니다. 그러면 등록 목록을 필터링하여 이 특정 교육 이벤트에 속하는 등록만 표시합니다. 이 페이지에서 원하는 옵션입니다! 마지막으로 목록 보기의 내용을 자동으로 채우기를 선택 취소하고 확인을 클릭합니다.
목록 보기에 텍스트 위젯을 추가하고 연수생의 이름, 등록 번호 및 등록 날짜를 표시하도록 캡션 및 매개 변수를 구성합니다.
Phone 보기에서는 이렇게 표시됩니다:
6.2.3 상세 페이지 만들기
이제 등록을 추가하고 편집할 수 있는 기능을 추가할 차례입니다.
하나의 작업 버튼과 목록 보기 기능을 만들겠습니다:
파란색 버튼의 캡션을 추가로 변경합니다.
클릭 시 동작을 개체 만들기로 설정합니다.
이제 엔티티를 선택합니다. 올바른 등록 엔티티를 찾아 선택을 클릭합니다. 등록 엔티티를 선택할 때 TrainingEvent를 제약 조건으로 사용하는 것을 잊지 마세요!
또한 버튼의 클릭 시 페이지 설정을 통해 새 페이지를 생성하여 새 등록을 편집합니다. Registration_NewEdit 페이지를 호출하고 팝업 레이아웃과 세로 양식 양식을 사용합니다.
이제 목록 보기에서 행을 클릭하여 편집할 수 있습니다. 이전 모듈에서는 '>' 버튼을 사용하여 이 작업을 수행했지만, 이제 목록 보기 위젯의 편리한 기능을 사용하여 동일한 작업을 수행해 보겠습니다. 목록 보기의 속성을 열고 클릭 시 동작을 아무것도 하지 않음에서 페이지 표시로 변경합니다. 새 페이지인 Registration_NewEdit을 선택합니다. 이제 특정 버튼이 아니라 목록 보기의 행을 클릭하기만 하면 편집 페이지로 이동할 수 있습니다.
방금 만든 Registration_NewEdit 페이지를 엽니다. 이 등록은 누군가의 소유여야 합니다. 그렇지 않으면 교사는 누가 나타날지 알 수 없고 누군가가 있다는 것만 알 수 있습니다. 지미가 이 페이지에서 가장 먼저 할 수 있는 일이 연수생을 선택하는 것인지 확인하세요. 또한 이것은 등록에 대한 가장 중요한 정보이므로 가장 먼저 수정 가능한 필드에 표시해야 합니다. 연수생 선택 위젯을 날짜 선택 위젯 위로 이동합니다.
로컬에서 앱을 실행하고 몇 가지 등록을 해보세요. 축하합니다, 또 하나의 사용자 스토리를 완성했습니다! 개발자 포털로 이동하여 스토리를 완료로 설정하세요.
요약
이 모듈에서는 다음에 대해 학습했습니다:
정보 엔티티
중첩된 데이터 및 데이터 중첩 방법
멘딕스 스튜디오 프로로 더 많은 작업을 하고 싶으신가요? 그렇다면 다음 모듈을 따라 계속 학습하세요!
리소스 탭에서 모듈 6의 솔루션이 포함된 mpk를 찾을 수 있습니다.
https://academy.mendix.com/link/modules/93/lectures/708/6.3-Summary
Mendix
academy.mendix.com
