4.1 페이지에 동적 데이터 추가
페이지를 만들고 버튼을 사용하여 페이지에 연결한 후 다음 단계는 새 개요 페이지에 정보가 표시되지 않으므로 페이지를 실제 데이터로 채우는 것입니다. 지미는 자신의 시스템에서 각 페이지에 해당하는 정보가 포함된 목록을 보고 싶습니다. 예를 들어 코스 개요 아래에 있는 모든 기존 코스의 목록을 보고 싶습니다.
이러한 코스는 자주 변경되므로 앱에서 정적 텍스트로 표시하는 대신 직접 추가할 수 있기를 원합니다. 이렇게 하려면 동적 데이터를 사용해야 합니다. 이는 앱 사용자가 변경할 수 있는 데이터이며 도메인 모델을 사용하여 구성됩니다. 여기에는 새 데이터 입력과 기존 데이터 보기, 변경 또는 삭제가 포함됩니다.
목록 보기
이전 모듈에서 목록 페이지 템플릿을 사용하여 페이지를 만들었으므로 페이지에 헤더와 빈 목록 보기가 이미 있습니다. 목록 보기는 동적(또는 정적) 데이터를 세로 목록으로 표시하는 데 사용되는 특수 데이터 위젯입니다. 데이터 위젯은 데이터베이스의 동적 데이터에 연결할 수 있는 유일한 위젯 유형이며, 몇 가지 유형만 있습니다.
데이터베이스는 모든 정보를 포함하는 데이터베이스 테이블로 구성됩니다. 즉, 데이터베이스는 앱의 저장 시스템입니다. 목록 보기에는 마이크로 플로우, 나노 플로우 또는 연결과 같은 다양한 데이터 소스가 있을 수도 있습니다. 지금은 데이터베이스를 데이터 소스로 사용합니다. 이 학습 경로의 뒷부분에서 다른 데이터 소스에 대해 자세히 알아보겠습니다.
4.2 엔티티 및 속성
앱에 데이터를 표시하기 전에 먼저 세 가지 기본 원칙을 이해해야 합니다:
도메인 모델 - 앱의 동적 데이터 구조를 시각적으로 표현한 것입니다. 여기에서 어떤 정보를 저장할 수 있는지, 해당 정보에 어떤 규칙이 적용되는지, 그리고 이 모든 정보가 어떻게 연관되는지 선택할 수 있습니다.
엔티티 - 도메인 모델은 엔티티와 그 관계로 구성됩니다. Mendix에서 엔티티는 현실 세계의 개념을 가상으로 표현한 것입니다. 각 엔티티는 사람, 장소, 사물 또는 아이디어의 청사진입니다. 데이터를 입력할 수 있는 빈 스프레드시트라고 생각하면 됩니다. 앱에서 변화하는 동적 데이터를 표시하려면 데이터 위젯을 엔티티에 연결해야 합니다. LearnNow 앱의 엔터티의 예로는 코스를 들 수 있습니다. 각 코스에 대한 자세한 정보를 저장하려면 엔티티 내에 속성도 생성해야 합니다.
속성 - 엔티티에는 속성이 있습니다. 속성은 엔터티를 설명하는 데이터 비트입니다. 각 엔터티에는 여러 개의 속성이 있을 수 있으며, 각 속성에는 저장할 수 있는 정보의 종류를 결정하는 데이터 유형이 있습니다. 코스 엔터티의 경우 코스의 제목 및 설명을 저장할 수 있습니다.
다음과 같은 속성 유형을 사용할 수 있으며, 각 속성 유형에는 저장할 수 있는 항목에 대한 서로 다른 규칙이 있습니다:
| 타입 | 가능한 값 |
| AutoNumber | 양수 또는 음수 정수를 자동으로 생성합니다. 속성의 기본값에 따라 생성되는 첫 번째 숫자가 결정됩니다. 동일한 유형으로 생성된 각 객체에는 이전 객체보다 1이 큰 자동 번호가 있습니다. |
| Binary | 바이너리 데이 |
| Boolean | True / False |
| Decimal | 소수점 뒤에 자릿수가 있을 수 있는 양수 또는 음수입니다. |
| DateTime | 날짜와 시간 구성 요소로 구성된 시점으로 밀리초 단위까지 정확합니다. |
| Enumeration | 미리 정의된 값의 목록입니다. |
| HashString | 문자열은 해시(암호화)된 후에 저장됩니다. 이 유형은 예를 들어 비밀번호를 저장하는 데 사용할 수 있습니다. 해시 값은 프로젝트 설정에서 선택한 해시 알고리즘을 사용하여 생성됩니다. |
| Integer | 양수일 수 있는 (작은) 정수입니다. |
| Long | 양수일 수 있는 (큰) 정수입니다. |
| String | 문자, 공백, 숫자 및 기타 문자가 포함된 텍스트입니다. |
예를 들어 다음 딸기 잼 병 이미지를 살펴보세요. 항아리가 엔티티가 되겠지만, 이 항아리에 대한 몇 가지 속성과 그 유형을 생각해 볼 수 있나요?
아마도 이런 생각을 하셨을 겁니다:
병에 들어 있는 제품의 이름(딸기잼). 이것은 텍스트이므로 Name 속성, 유형 문자열이 될 수 있습니다.
병의 가격(1,99). 소수점 뒤에 자릿수가 있는 숫자이므로 가격 속성이 될 수 있으며, 유형은 Decimal입니다.
만료 날짜(09/2019)입니다. 이것은 날짜 값이므로 만료 날짜라는 DateAndTime 속성이 될 것입니다.
봉인이 깨졌는지 여부는 참(예) 또는 거짓(아니오)으로 대답할 수 있는 질문이므로 부울 속성 유형이 될 것입니다.
병의 재질은 유리, 플라스틱 또는 금속일 수 있습니다. 이것은 고정된 옵션 목록이므로 열거형이 되는 Material 속성으로 변환됩니다.
생산 번호(014698)입니다. 약간 까다로운 문제입니다. 정수가 될 수도 있지만, 새로 생성되는 병마다 생산 번호가 하나씩 증가해야 한다는 점을 고려해야 합니다. 이는 자동 번호 속성으로 만들면 쉽게 달성할 수 있습니다.
4.3 동적 데이터 표시
이제 엔티티와 속성이 무엇인지 알았으므로 페이지에 동적 데이터를 실제로 표시할 수 있습니다. 앞서 언급했듯이 이를 위해서는 페이지에 엔티티를 추가해야 합니다.
LearnNow 앱의 코스 개요 페이지에서 Jimmy가 앱에 추가할 모든 코스에 대한 개요를 표시하려고 합니다. 이렇게 하려면 코스 엔티티를 페이지에 추가해야 합니다. 또한 각 코스 또는 트레이너의 위치와 같은 일부 세부 정보를 표시하려면 해당 속성도 선택해야 합니다.
LearnNow 앱의 경우 Jimmy는 새 코스를 추가하고, 위치를 수정하고, 앱을 최신 상태로 유지할 수 있어야 합니다.
간단한 세 단계를 수행하면 됩니다:
1단계: 페이지 설정
2단계: 목록 보기의 레이아웃 조정하기
3단계: 속성 추가하기
다음 과제에서 이를 수행하는 방법에 대한 단계별 설명을 확인할 수 있습니다!
4.3.1 엔티티 생성 및 연결
이 과제에서는 이전 모듈에서 생성한 모든 개요 페이지에 관련 데이터가 표시되는지 확인합니다.
도메인 모델로 이동하여 엔티티 생성을 시작합니다.
편집 창 상단에서 엔티티를 끌어 작업 영역에 배치합니다.
엔티티를 두 번 클릭하면 다음 창이 나타납니다. 이제 이름을 코스로 변경합니다.
코스에 대해 학생들과 공유해야 하는 정보를 고려해 봅시다. 학생이 코스를 수강할지 여부를 결정할 수 있도록 유용한 정보를 간략하게 표시해야 합니다.
학생은 다음을 알아야 합니다:
제목
설명
가격
기간
이제 코스 엔티티에 어떤 속성이 포함될지 알았지만 속성 유형을 놓치고 있습니다. 이러한 속성의 올바른 유형은 무엇입니까?
예를 들어, 속성 제목에는 문자열 유형의 속성이 있습니다. 속성 가격에는 소수점 유형의 속성이 있습니다. 다음 차트에서 이 정보를 시각화해 보겠습니다:
| 속성 | 타입 |
| Title | String |
| Description | String |
| Price | Decimal |
| Duration | Integer |
이제 Studio Pro에서 이러한 속성을 편집할 차례입니다. 따라서 엔티티를 두 번 클릭합니다. 새로 만들기를 클릭합니다.
나머지 속성에 대해 1,2,3,4단계를 반복합니다. 다음 이미지와 같이 표시되어야 합니다:
다른 엔티티에 대해서도 동일한 단계를 반복합니다: 위치, 교사 및 연수생에 대해 동일한 단계를 반복합니다.
도메인 모델에 있는 각 엔티티는 데이터베이스에 테이블로 생성됩니다. 해당 엔티티 내부의 각 속성은 데이터베이스 테이블의 열이 됩니다. 이제 도메인 모델의 모습은 다음과 같습니다:
4.3.2 오류 수정
이제 이 네 가지 오류를 수정해야 합니다. 이렇게 하려면 엔티티를 목록 보기에 연결해야 합니다.
코스_오버뷰 페이지에서 목록 보기를 두 번 클릭합니다. 목록 보기 수정 팝업에서 데이터 소스 탭을 클릭합니다.
엔티티 필드 옆의 선택을 클릭합니다. 엔터티 선택 창에서 선택을 클릭하고 코스 엔터티를 선택합니다. 선택 및 확인을 클릭합니다.
다음 팝업에서 아니요를 클릭합니다.
1, 2, 3단계를 반복하여 다른 개요 페이지(예: 위치, 교사 및 연수생)의 오류를 수정합니다. 이제 지미가 저장할 데이터를 표시할 페이지에 엔티티를 연결했습니다.
4.4 속성 이름을 지정하는 방법
이름에 두 단어 이상의 단어가 포함된 엔티티 또는 속성(예: 이메일 주소)을 생성할 때는 CamelCase를 사용합니다. 즉, 공백이나 밑줄("_")을 사용하지 않고 새 단어마다 대문자로 시작해야 합니다. 예를 들어 "Email address"는 "EmailAddress"가 됩니다.
표시하려는 다른 속성(이 경우 코스 페이지의 기간 및 가격)에 대해서도 이 과정을 반복합니다. 중괄호 사이의 단어(예: {Title})는 앱의 데이터베이스에 있는 값으로 대체됩니다. 즉, 데이터베이스에 저장된 다른 제목에 따라 행마다 달라집니다. 괄호} 안에 있지 않은 텍스트(예: 기간 및 일)는 정적이며 모든 행에서 동일하게 유지됩니다.
4.4.1 매개 변수를 사용하여 동적 데이터 표시
페이지에서 동적 데이터를 구성하는 방법을 살펴보겠습니다.
중괄호는 Studio Pro의 속성에 연결됩니다. 텍스트 위젯의 속성에서 캡션 및 속성을 편집할 수 있습니다. 속성을 표시할 위치를 나타내는 숫자와 함께 {}을 입력한 다음 매개변수 섹션에서 속성을 선택합니다. 연결된 번호는 페이지에서 선택한 데이터로 대체됩니다.
제목 필드를 변경하려면 목록 항목 제목을 두 번 클릭해야 합니다. 텍스트 편집 창이 나타납니다. 캡션 필드 옆의 편집을 클릭하면 캡션 편집 창이 나타납니다.
캡션 필드에 {1}을 입력합니다. 매개변수 필드에서 새로 만들기를 선택합니다. 템플릿 매개변수 수정 창이 나타납니다. 표시할 속성을 선택합니다(예: 제목 선택). 선택을 클릭하고 확인을 클릭합니다.
이제 제목 필드에 제목 매개변수가 표시됩니다. 이것이 텍스트 위젯에 동적 데이터를 표시하는 것입니다.
이제 1단계와 2단계에 따라 기간 및 가격 매개변수에 대한 동적 데이터를 구성합니다. 이렇게 하려면 이미 가지고 있는 텍스트 위젯(보조 텍스트 캡션이 있는 위젯)을 복사/붙여넣으면 됩니다. 또는 도구 상자로 이동하여 위젯에서 텍스트를 검색할 수도 있습니다.
텍스트를 클릭하고 목록 보기로 끌어다 놓습니다.
위젯을 끌어다 놓으면 다음과 같은 모양이 됩니다.
완료되면 이렇게 표시됩니다:
휴대폰 보기는 다음과 같은 모습이어야 합니다:
나머지 개요 페이지에 대해서도 동일한 단계를 반복합니다.
축하합니다! 개요 페이지가 완성되었습니다. 이제 사용해 보세요!
4.5 앱 실행
이제 모든 개요 페이지를 만들고, 연결하고, 데이터를 추가했으므로 이제 앱을 실행하여 어떤 모습인지 확인할 수 있습니다. 앱을 실행하는 것은 아래 그림과 같이 애플리케이션 수명 주기 관리의 배포 단계에 해당합니다.
녹색 재생 버튼을 눌러 앱을 실행할 수 있습니다.
앱이 실행 중이면 클릭하여 페이지가 어떻게 보이는지 확인하세요! 새 코스, 위치, 교사 및 트레이너를 생성하고 싶지만 페이지에 이 작업을 수행할 수 있는 버튼이 없습니다. 페이지 헤더 제목 바로 옆에 녹색 추가 버튼을 만들어야 합니다.
이 버튼은 엔티티를 만드는 것이 아니라 엔티티의 인스턴스를 만들기 위한 것입니다. 이러한 인스턴스를 객체라고 부릅니다. 즉, 객체는 엔티티의 인스턴스이며 각 속성에 특정 값이 할당됩니다.
계속 진행하기 전에 개발자 팀이 Studio Pro를 사용하여 서로 간섭하지 않고 하나의 앱을 동시에 개발 및 테스트하는 방법에 대해 잠시 이야기해 보겠습니다.
4.6 팀 서버
Mendix 팀 서버는 모든 팀 서버 앱이 포함된 Mendix 호스팅 환경입니다. 이를 통해 팀과 협업하고 버전 관리를 사용할 수 있습니다. 버전 관리가 무엇일까요? 서브버전이나 깃허브에 대해 들어보신 적이 있나요? Dropbox나 Google 문서 도구는 어떠세요? 파일이 아닌 앱 전용이라는 점만 다를 뿐, Mendix 팀 서버도 바로 그런 서비스입니다.
개발자 포털에서 새 앱을 만들면 팀 서버가 자동으로 활성화됩니다. Mendix Studio Pro 내에서 직접 앱을 만든 다음 팀 서버를 사용하는 것은 선택 사항입니다. 빠르게 테스트하고 싶고 공동 작업이 필요하지 않은 경우 이 작업을 수행할 수 있습니다. 팀 서버를 활성화하지 않는 또 다른 이유는 원격으로 작업하는 동안 프로젝트 작업을 시작하려는데 인터넷에 연결되어 있지 않은 경우입니다. 하지만 일반적으로는 팀 서버를 사용 설정해야 팀과 공동 작업을 할 수 있습니다. 나중에 팀 서버를 사용 설정할 수도 있으므로 처음에 팀 서버를 사용 설정하지 않았다가 나중에 앱에서 공동 작업을 해야 하는 경우에도 걱정하지 마세요.
리포지토리
모든 팀 서버 앱에는 모델과 앱의 모든 리소스가 모두 포함된 온라인 리포지토리가 있습니다. 팀 서버를 모든 건축 프로젝트에 대한 폴더(모든 앱의 리포지토리)가 있는 건축 회사의 파일 캐비닛에 비유할 수 있습니다. 이러한 폴더 안에는 각 프로젝트에 대한 건물 계획이 있으며, 감독자가 리소스로 사용할 수 있으므로 건물이 어떤 형태(앱 모델 및 리소스)로 만들어져야 하는지 알 수 있습니다.
팀 서버 액세스
팀 서버 프로젝트에 액세스하려면 두 가지 전제 조건이 있습니다:
앱 프로젝트의 팀원이어야 합니다.
모델을 편집할 수 있는 권한이 있는 역할이 있어야 합니다(기본적으로 스크럼 마스터 또는 비즈니스 엔지니어 역할).
팀원을 초대하고 프로젝트 역할을 할당하는 방법에 대해 기억을 되살리고 싶다면 이 학습 경로의 2.5강을 살펴보세요.
팀 서버에 액세스할 수 있는 경우에만 Mendix Studio Pro에서 앱을 실제로 열고 변경할 수 있습니다. Mendix Studio Pro에서 앱을 처음 열면 팀 서버에 있는 앱의 최신 개정(또는 버전)을 가져와 하드 드라이브에 다운로드합니다. 이제 컴퓨터에서 앱을 작업 복사본으로 사용할 수 있습니다.
작업 복사본
작업 복사본은 프로젝트의 로컬 복사본입니다. 이 로컬 복사본에서 작업하고 모든 변경 사항을 적용합니다. 로컬 사본에서 작업을 시작하면 팀 서버의 리포지토리에 저장된 원본에서 벗어나기 시작합니다. 로컬 사본에서 작업해도 리포지토리에는 영향을 미치지 않습니다. 변경 작업을 완료하면 커밋하여 리포지토리에 새 리비전을 만들 수 있습니다.
상태 및 변경 사항
프로젝트의 상태는 팀 서버의 최신 버전과 비교하여 작업 복사본의 모든 변경 사항을 요약한 것입니다. Mendix Studio Pro에서 작업할 때 변경한 모든 내용은 자동으로 팀 서버에 커밋됩니다. Mendix Studio Pro에서 작업할 때 변경 사항은 로컬에서 수행되며 변경 사항 창에 표시됩니다(앞에서 간략하게 설명함). 그 다음부터는 이러한 변경 사항을 팀 서버에 커밋할 수 있으므로 변경 사항은 Mendix Studio Pro를 사용하는 프로젝트의 모든 사람이 사용할 수 있습니다.
Mendix Studio Pro는 앱 탐색기뿐만 아니라 변경사항 창에도 상태를 표시합니다.
다양한 종류의 변경 사항은 다음 아이콘으로 시각화됩니다:
앱 탐색기는 어떤 식으로든 변경된 항목 앞에 아이콘을 표시합니다. 아이콘은 하나만 표시될 수 있습니다. 문서가 수정과 이동이 모두 이루어진 경우 수정됨으로 표시됩니다.
변경사항 창에는 항목의 각 변경사항에 대한 줄이 표시됩니다. 문서가 수정과 이동이 모두 이루어진 경우, 해당 문서에 대해 두 줄이 표시됩니다. 이 창에는 프로젝트 탐색기로는 할 수 없는 삭제된 항목도 표시됩니다. 창 오른쪽 상단에 있는 모두 표시 버튼을 클릭하면 상태의 항목 목록을 필터링할 수 있습니다.
변경 내용 커밋
리포지토리에 변경 내용을 보내는 것을 커밋이라고 합니다. 새로운 기능 구현 및 버그 수정과 같이 작고 일관된 작업을 리포지토리에 커밋한다는 개념입니다. Mendix Studio Pro는 앱에서 놓쳤을 수 있는 사항(예: 아직 연결하지 않은 페이지를 가리키는 버튼)이 있는지 자동으로 확인하고 커밋하기 전에 이를 확인하고 수정하도록 알려줍니다. Mendix에서는 이를 오류라고 하지만 편리한 힌트로 볼 수 있습니다. 당연히 프로젝트에 오류가 있는 상태에서 커밋하는 것은 권장하지 않습니다. 리포지토리의 리비전이 오류가 없는지 확인하는 것이 좋습니다.
커밋하면 리포지토리에 새 리비전이 생성됩니다. 커밋 메시지를 추가하고 관련 사용자 스토리를 선택할 수 있습니다. 커밋 메시지에는 변경한 내용을 설명해야 합니다. 관련 사용자 스토리를 선택하는 것은 매우 중요합니다. 이렇게 하면 개발자 포털의 커밋 메시지에 스토리에 대한 링크가 추가되므로 필요한 경우 이전 사용자 스토리를 쉽게 다시 찾을 수 있습니다.
Mendix는 커밋을 작게 유지하고 한 번에 하나의 스토리만 관련시킬 것을 권장합니다. 멘딕스 스튜디오 프로는 현재 실행 중이거나 할 일인 스토리만 표시하며, 스토리의 상태는 변경하지 않습니다. 상태를 완료로 설정하는 것은 팀의 책임이며 '완료'에 대한 팀의 정의에 따라 달라집니다.
멘딕스 스튜디오 프로는 일부 정보도 자동으로 첨부합니다:
작성자(커밋한 사용자)
커밋 날짜 및 시간
변경된 콘텐츠(문서/폴더/모듈) 목록과 변경 유형(수정, 추가, 삭제 등)
커밋에 사용된 Mendix Studio Pro 버전
업데이트
커밋은 작업 복사본이 리포지토리에 최신 상태일 때만 가능합니다. 마지막으로 업데이트한 이후 다른 사람이 변경 사항을 커밋한 경우 로컬 사본을 최신 상태로 만들어야 변경 사항을 공유할 수 있습니다. 그 이유는 커밋으로 만든 수정본에 내 변경 사항과 다른 개발자가 변경한 내용이 모두 포함되어야 하기 때문입니다. 다행히도 Mendix는 업데이트 프로세스를 자동으로 커밋 프로세스에 통합합니다. 커밋을 클릭하기만 하면 Mendix가 팀 서버에서 변경 사항이 발생했음을 감지하면 업데이트가 시작됩니다.
팀에서 일할 때 팀원 중 한 명이 멋진 기능을 빌드하고 이를 팀 서버에 커밋하면 로컬 작업 복사본을 업데이트하여 로컬 버전의 앱에 해당 기능을 적용할 수도 있습니다. 이렇게 하면 현재 빌드 중인 모든 앱에 통합할 수 있습니다.
커밋을 수행하려는 경우 먼저 앱을 수동으로 업데이트할 필요가 없습니다. 변경 사항을 팀 서버에 커밋하려고 할 때 자동으로 수행됩니다.
이제 열심히 작업한 모든 내용을 Mendix Studio Pro로 가져와서 LearnNow 앱을 계속 사용할 수 있습니다!
이제 다음 강의에서 객체에 대한 주제로 들어가서 이 앱을 계속 만들어 보겠습니다!
4.7 객체
이전 과제에서 객체 생성을 수행하는 추가 버튼이 아직 존재하지 않는다는 것을 알았습니다. 헤더에 새 열을 생성하고 버튼을 추가한 다음 새 코스, 위치, 교사 또는 교육생 객체를 생성하도록 각 버튼을 구성해야 합니다. 이 문제를 해결하려면 객체가 무엇인지 알아야 합니다.
객체는 속성으로 구성된 엔티티의 단일 인스턴스입니다. 하나의 엔티티를 기반으로 여러 개의 객체를 생성할 수 있습니다. 이러한 오브젝트는 데이터베이스에 저장할 수 있습니다. 엔티티와 해당 속성을 결합하여 앱에 추가할 수 있는 정보의 청사진으로 볼 수 있습니다. 따라서 시스템의 각 코스는 객체이며, 새 코스를 생성하면 코스 유형(엔티티)의 객체가 새로 생성됩니다.
항아리의 예를 다시 생각해 보면 엔티티와 속성은 항아리를 만들 때 항아리가 어떤 모양이어야 하는지 알 수 있도록 제조업체에 전달되는 항아리의 청사진과 같습니다. 일단 항아리를 생산하기 시작하면 생성되는 각 항아리는 객체입니다. 데이터베이스는 생성된 모든 항아리를 저장하는 선반과 같습니다.
4.7.1 버튼을 사용하여 객체 만들기
이제 객체가 무엇인지 알았으므로 버튼에 어떤 객체를 만들지 지정할 수 있습니다.
코스_개요 페이지를 열고 머리글에서 열을 선택한 다음 새 열을 생성합니다.
팁: 화면 하단의 이동 경로를 사용하여 열을 선택할 수도 있습니다.
새 열을 두 번 클릭합니다. 레이아웃 격자 열 편집에서 콘텐츠 자동 맞춤을 선택합니다. 확인을 클릭합니다.
도구 상자로 이동하여 만들기 버튼 위젯을 검색합니다. 그런 다음 열에 끌어다 놓습니다.
엔터티 선택 창에서 코스를 선택하여 이 엔터티에 대한 객체를 생성합니다. 선택을 클릭합니다.
오류와 함께 새로 만들기 버튼이 표시됩니다. 이 오류를 해결하려면 버튼을 페이지에 연결해야 합니다. 하지만 아직 이 페이지가 없으므로 다음 강의에서 만들 것입니다.
새로 만들기 버튼을 두 번 클릭합니다. 작업 버튼 편집 팝업이 다시 표시됩니다.
이제 버튼의 캡션과 색상을 변경할 차례입니다:
캡션을 추가로 변경합니다.
버튼 스타일을 성공으로 변경합니다.
버튼이 이렇게 표시됩니다:
이 오류를 해결하기 위해 다음 강의로 이동해 보겠습니다.
4.7.2 세부 정보 페이지
지금까지 지미가 자신의 시스템에서 정보를 볼 수 있는 페이지를 만들었지만, 지미가 정보를 추가하거나 편집할 수 있는 페이지(세부 정보 페이지)는 아직 만들지 않았습니다. 각 개요 페이지마다 세부 정보 페이지가 필요합니다. 멋진 개요 페이지가 있으면 좋지만 지미가 앱에 정보(개체)를 추가할 수 없다면 앱은 지미에게 큰 도움이 되지 않습니다.
이전에는 새 페이지를 만든 다음 버튼에 연결했습니다. 이제 페이지 선택 대화 상자에서 새 페이지를 만들어서 그 반대로 해 보겠습니다. 이렇게 하면 이전 페이지의 데이터로 페이지를 미리 채울 수 있는 옵션과 같은 몇 가지 이점이 있습니다.
제목
Mendix 명명 규칙에 따라 이 페이지의 좋은 이름은 Course_NewEdit입니다. 이 페이지는 새 코스 객체의 세부 사항을 작성하고 기존 코스의 세부 사항을 변경하는 데 사용되기 때문입니다.
레이아웃
페이지를 생성할 때 몇 가지 사항을 선택해야 합니다:
페이지의 탐색 레이아웃은 어떻게 할 것인가? 메뉴를 페이지 상단에 배치할 것인가 아니면 사이드바에 배치할 것인가? 페이지가 전체 화면 페이지가 될까요, 아니면 팝업 창이 될까요?
페이지를 처음부터 새로 만들 것인가 아니면 Mendix 템플릿 중 하나를 사용할 것인가요?
이 페이지는 세부 사항 페이지이며 그다지 크지 않을 것이므로(코스 엔티티에는 제목, 설명, 가격 및 기간만 포함하면 됨을 기억하십시오) PopupLayout 레이아웃을 사용하는 것이 좋습니다. 이렇게 하면 세부 사항 페이지가 개요 페이지 위에 팝업 창으로 열립니다.
양식
이 작업의 와이어프레임을 살펴보세요. 몇 개의 입력 위젯이 있는 페이지입니다(입력 위젯의 예로는 텍스트 상자 또는 날짜 선택기가 있습니다). 약간 양식처럼 보이지 않나요? Mendix Studio Pro에서는 세 가지 유형의 양식 템플릿 중에서 선택할 수 있으므로 양식 템플릿을 선택하고 거기에서 양식 세로 템플릿을 선택합니다.
4.7.3 세부 정보 페이지 만들기
이제 개요 페이지와 일치하는 4개의 세부 페이지를 만들 차례입니다. 특히 이러한 페이지는 새 개체를 만들고 기존 개체를 편집하는 데 사용되므로 NewEdit라고 합니다.
추가 버튼의 속성을 엽니다. 클릭 페이지 필드 옆의 선택을 클릭합니다. 웹 페이지 선택 창이 나타나면 새로 만들기를 클릭합니다.
새로 만들기를 클릭하면 페이지 생성 창이 나타납니다. 페이지 이름인 Course_NewEdit는 이미 채워져 있으므로 변경할 필요가 없습니다. 그러나 탐색 레이아웃을 변경해야 하므로 PopupLayout(Atlas_Core)으로 변경합니다.
양식 세로 템플릿을 선택하여 페이지에 구조를 지정합니다. 확인을 클릭합니다.
구조 모드에서 Course_NewEdit 수정 페이지가 표시되는 방식입니다:
태블릿 보기입니다:
팁: 페이지를 만들 때는 항상 사용자 경험을 염두에 두세요. 어떤 정보가 사용자에게 유용하고 어떤 정보가 유용하지 않을까요? 그리고 유용한 정보라면 어느 페이지에서 가장 가치를 더할 수 있을까요?
모든 개요 페이지에 대해 추가 버튼과 상세 페이지를 만듭니다.
네 개의 세부 사항 페이지를 모두 만들었으면 각 개요 페이지로 돌아가 목록 보기 오른쪽에 있는 갈매기 모양(>) 버튼을 각각의 NewEdit 페이지에 연결합니다. 추가 버튼을 연결할 때와 같은 방법으로 연결할 수 있지만 객체 만들기 대신 페이지 표시 옵션을 사용합니다. 이렇게 하면 새 편집 페이지를 사용하여 데이터베이스의 기존 개체를 편집할 수 있습니다!
예를 들어 코스 개요 페이지에서 chevron 버튼을 구성하는 방법은 다음과 같습니다:
이 강의가 끝나면 이 페이지가 MyFirstModule에 있어야 합니다:
로컬에서 앱을 실행하여 결과를 확인합니다.
시간을 내어 몇 가지 코스, 위치, 교사 및 교육생을 시스템에 추가합니다.
4.8 도메인 모델
축하합니다! 첫 번째 사용자 스토리를 완성하셨습니다. 수고 많으셨고, 벌써 요령을 익히기 시작하셨습니다!
Jimmy는 여러분이 해낸 작업에 매우 만족하고 있습니다. 이제 시스템에 데이터를 추가할 수 있으며, 이는 LearnNow에 큰 도움이 될 것입니다. 지금까지 데이터가 어떻게 구조화되었는지 살펴봅시다! 이를 위해 도메인 모델을 살펴보겠습니다.
도메인 모델 확장하기
Jimmy에게 유용한 다음 기능은 교육 이벤트 예약 기능입니다. 이 기능을 사용하면 Jimmy는 앱에서 계획을 세울 수 있고, 강사는 언제 어디서 코스를 진행해야 하는지 확인할 수 있습니다.
교육 이벤트는 새로운 데이터입니다. 동적 데이터(Jimmy와 같은 사용자가 시스템에 추가할 수 있는 데이터)를 앱에서 사용할 수 있으려면 도메인 모델에 있어야 합니다. 도메인 모델에 새 엔티티 또는 속성을 추가하는 것을 도메인 모델 확장이라고 합니다.
데이터베이스
도메인 모델의 구조에 따라 데이터베이스의 모양이 결정됩니다. 각 엔티티는 데이터베이스 테이블이 되고 각 속성은 데이터베이스의 열이 됩니다. 데이터베이스에 저장하는 모든 객체(예: 코스)는 해당 데이터베이스 테이블의 행이 됩니다. 이는 또한 도메인 모델에 없는 항목이 있으면 해당 정보를 데이터베이스에 추가할 수 없다는 의미이기도 합니다.
코스 엔터티에 대한 데이터베이스 테이블은 다음과 같습니다:
ID 열이 보이시나요? 그건 속성이 아닙니다. 그렇다면 어떻게 데이터베이스 테이블에 포함되었을까요? 모든 객체에는 항상 고유 식별자(ID)가 필요하므로 시스템에서 어떤 객체인지 알 수 있도록 Mendix가 자동으로 이 작업을 수행합니다.
도메인 모델을 원하는 만큼 자주 변경할 수 있으며 앱을 다시 게시할 때 데이터베이스가 동기화됩니다. 또한 엔티티 또는 속성의 이름을 변경해도 앱은 계속 작동하므로 Mendix Studio Pro는 이러한 변경 사항을 모든 곳에 자동으로 적용합니다.
4.8.1 도메인 모델에 새 엔티티 추가
이 과제에서는 Jimmy가 자신의 앱에서 교육 이벤트를 예약할 수 있도록 합니다!
개발자 포털로 이동하여 다음 스토리를 실행으로 설정합니다: "관리자로서 언제든지 교육 이벤트를 예약하여 교사들이 휴대폰에서도 일정을 볼 수 있도록 하고 싶습니다."
Jimmy는 스토리에 다음과 같은 설명을 추가했습니다: "_교육 이벤트를 예약할 때는 이벤트를 주최할 교사와 함께 장소와 코스를 선택해야 합니다. 이렇게 하면 교사가 어떤 코스를 어디서 가르쳐야 하는지 알 수 있습니다. 또한 강의 시작일과 종료일을 선택할 수 있어야 교사가 강의가 어느 날짜에 진행될지 알 수 있습니다."
도메인 모델 MyFirstModule을 엽니다. 도구 상자에서 새 엔티티를 도메인 모델에 끌어다 놓습니다. 이름을 TrainingEvent로 변경합니다. 이름에 카멜케이스를 사용합니다. 또한 엔티티 이름은 항상 단수여야 한다는 것을 기억하세요! 엔티티는 객체의 목록이 아니라 객체의 청사진이기 때문입니다.
지미는 교육 이벤트에 시작 날짜와 종료 날짜가 있기를 원한다고 말했습니다.
따라서 TrainingEvent 엔티티에 두 개의 속성을 추가해 보겠습니다. 이 엔티티에 어떤 속성 유형이 있어야 하는지 짐작하실 수 있을 것입니다: 날짜 및 시간입니다!
훌륭합니다! 도메인 모델에 새 엔티티를 추가했습니다. 이제 도메인 모델이 다음과 같이 보일 것입니다:
도메인 모델에서 엔티티가 겹치지 않도록 다시 정렬합니다. 이미지를 사용하여 각 속성에 대해 올바른 유형을 선택했는지 확인합니다. 실수를 했나요? 걱정하지 마세요! 속성을 클릭하고 속성 창에서 올바른 유형을 선택하기만 하면 됩니다.
4.9 도메인 모델의 연결
도메인 모델에서는 다양한 엔티티를 서로 연결하여 상호 작용할 수 있도록 해야 합니다. 예를 들어, 어떤 코스가 제공될지, 어디에서 호스팅될지, 누가 가르칠지 등을 시스템에 저장할 수 있어야 합니다.
교육 이벤트는 항상 한 장소에서, 한 명의 교사가 진행하는 한 가지 코스만 진행됩니다. 그러나 시간이 지남에 따라 코스가 두 번 이상 예약되고, 장소가 두 번 이상 사용되며, 교사가 여러 교육 이벤트를 주최하게 될 것입니다.
이러한 연결을 연결이라고 합니다. 두 개체 간에 연결을 생성하면 예를 들어 코스를 교육 이벤트에 연결할 수 있는 가능성이 생깁니다.
도메인 모델에 추가하는 각 연결에 대해 새 데이터베이스 테이블이 생성됩니다. 이 테이블에는 서로 연결된 객체의 ID가 저장됩니다.
Mendix Studio Pro에서는 세 가지 유형의 연결 중에서 선택할 수 있으며, 축구를 예로 들어 설명하겠습니다. 축구에는 팀, 선수, 경기장, 리그가 있습니다. 가능한 연결은 아래에 설명되어 있습니다.
일대다 연결(1-*)
가장 일반적으로 사용되는 연결입니다. 이 예에서는 플레이어와 팀 간의 연결입니다. 한 플레이어는 항상 특정 팀에서 플레이하지만 한 팀에는 여러(많은) 플레이어가 있습니다.
일대일 연결(1-1)
두 개체가 동시에 다른 개체와 연결되지 않고 서로만 연결될 수 있는 연결입니다. 축구의 예에서 이것은 팀과 경기장 간의 연결에 표시됩니다. 팀에는 홈 경기장이 하나만 있을 수 있고 경기장에는 홈 팀이 하나만 있을 수 있습니다.
참조 집합 (-)
이를 다대다 연관이라고도 합니다. 축구 예시의 경우, 한 리그에는 여러 팀이 참가하지만 한 팀이 여러 리그에 참가할 수도 있습니다.
Jimmy가 사용자 스토리에 추가한 설명을 다시 한 번 살펴봅시다: "교육 이벤트를 예약할 때 어떤 교사가 이벤트를 주최할 것인지와 함께 장소와 코스를 선택해야 합니다."
등록에 대해 생각하기 전에 먼저 교육 이벤트를 일정에 추가할 수 있어야 합니다. 따라서 이번 사용자 스토리에서는 이 기능에 초점을 맞추고 다음 사용자 스토리에서는 교육 이벤트에 등록을 추가하는 방법을 살펴볼 것입니다.
4.9.1 연결 추가
실제로 적용해 봅시다! 교육 이벤트는 코스, 장소 및 강사와 연결되어 있어야 합니다. 이렇게 하면 어떤 코스가 제공될지, 어디에서 개최될지, 누가 가르칠지 시스템에 저장할 수 있습니다. 교육 이벤트는 항상 한 코스, 한 장소, 한 강사가 주최하는 한 코스만 진행됩니다. 그러나 시간이 지남에 따라 코스가 두 번 이상 예약되고, 장소가 두 번 이상 사용되며, 교사가 여러 개의 교육 이벤트를 주최하게 될 것입니다.
엔티티 위에 마우스를 가져가면 엔티티의 테두리에 나타나는 흰색 원을 클릭합니다. 이제 연결을 생성하려는 엔터티(예: 코스)를 선택하고 새 연결을 해당 엔터티로 끌어옵니다. 연결은 기본적으로 일대다 연결로 생성됩니다. 연결 유형을 변경하려면 연결을 두 번 클릭하고 다른 유형을 선택하면 됩니다.
연관에도 이름이 있습니다! 연결의 이름은 TrainingEvent_Course입니다. 이것이 연관의 명명 규칙입니다: 엔티티1_엔티티2입니다. 원하는 경우 연결 이름을 더 설명적으로 만들 수 있지만, 한 엔티티가 끝나고 다른 엔티티가 시작되는 위치를 나타내는 밑줄이 정말 중요합니다!
계속해서 Jimmy가 제공한 설명에 따라 모든 연결을 만듭니다. 필요한 경우 도메인 모델을 재정렬하여 모든 연결 레이블이 읽기 쉽도록 하세요.
결과는 다음과 같습니다:
팁
실수로 잘못된 방향으로 연결을 만들었나요? 걱정하지 마세요. 삭제하고 올바른 방향으로 다시 만들면 됩니다.
4.9.2 교육 이벤트 만들기 개요
이제 도메인 모델을 확장했으므로 이제 교육 이벤트용 페이지를 만들 차례입니다. 이전과 마찬가지로 개요 및 새 편집 페이지를 만들지만, 새 편집 페이지에서는 연결된 개체를 선택할 수 있는 드롭다운 위젯, 즉 연결을 만들 수 있는 위젯을 사용할 것입니다.
Training_Overview 페이지부터 시작하겠습니다:
이제 버튼을 만들어야 합니다. Home_Web 페이지로 이동하여 열을 추가합니다.
도구 상자에서 버튼을 끌어다 놓거나 이미 가지고 있는 버튼을 복사하여 붙여넣습니다.
버튼의 캡션을 교육 이벤트로 변경하고 캘린더 아이콘을 찾습니다.
클릭 시 필드로 이동하여 페이지 표시를 선택합니다. 웹 페이지 선택 팝업에서 새로 만들기를 클릭합니다.
이제 새 페이지를 구성할 차례입니다. 페이지 만들기 팝업에서 페이지 이름을 TrainingEvent_Overview로 변경합니다.
목록 템플릿을 선택하여 페이지에 구조를 지정합니다. 확인을 클릭합니다.
교육 TrainingEvent_Overview 페이지로 이동합니다. 헤더를 교육 이벤트로 변경합니다.
이제 오류를 해결하려면 목록 보기를 TrainingEvent 엔티티와 연결해야 합니다. 목록 보기를 두 번 클릭하면 목록 보기 편집 창이 나타납니다. 데이터 소스를 클릭합니다. 엔티티(경로) 필드에서 선택을 클릭하고 TrainingEvent 엔티티를 선택합니다.
콘텐츠를 자동으로 채우지 않으려면 아니요를 클릭합니다.
4.9.3 매개변수에서 연결 사용
이제 개요 페이지를 생성했으므로 학생에게 다음 정보를 표시하도록 목록 보기를 구성해야 합니다:
코스
날짜
교사
위치
사용할 텍스트 위젯을 준비해 봅시다. 이미 가지고 있는 텍스트 위젯을 복사하여 붙여넣거나 도구 상자에서 찾아보세요.
코스 제목, 시작 및 종료 날짜, 교사 이름, 위치 이름 등 네 가지를 표시하는 것이 좋습니다. 또한 다음과 같이 이해하기 쉽도록 정적 텍스트를 추가합니다:
목록 항목 제목을 두 번 클릭합니다. 첫 번째 캡션 필드 옆의 편집을 클릭합니다. 두 번째 캡션 필드에 {1}을 입력합니다. 새로 만들기를 클릭하여 매개변수를 설정합니다. 템플릿 매개변수 편집 팝업에서 선택을 클릭하고 제목을 선택합니다.
날짜를 계속 입력합니다. 이 경우 이벤트가 시작 날짜에서 종료 날짜로 넘어가는 것을 표시해야 합니다. 이미지에 따라 구성합니다.
이렇게 표시되어야 합니다:
4.9.4 교육 이벤트 신규 편집 페이지 만들기
이제 추가 버튼과 교육 이벤트를 구성할 수 있는 새 편집 페이지를 만들어야 합니다. 이전과 동일한 방식으로 생성합니다.
새 열을 만듭니다. 열을 두 번 클릭하고 콘텐츠 자동 맞춤을 선택합니다.
도구 상자에서 Create button 옵션을 끌어다 놓습니다.
팝업 창에서 TrainingEvent 엔티티를 선택합니다.
캡션을 추가로 변경하고 Add 아이콘을 검색합니다.
클릭 시 페이지 필드로 이동하여 선택 및 새로 만들기를 클릭하여 새 페이지를 만듭니다.
페이지 이름 필드가 자동으로 채워집니다(TrainingEvent_NewEdit). 탐색 레이아웃을 팝업 레이아웃으로 변경합니다. 확인을 클릭합니다.
새 TrainingEvent_NewEdit 페이지로 이동하여 코스 드롭다운을 상단 위젯으로 이동합니다.
이 입력 위젯 중 세 개는 드롭다운이며 속성에 연결되어 있지 않습니다. 대신 기존 객체(이 경우 이 새 교육 이벤트와 이미 데이터베이스에 있는 코스, 위치 및 교사)간에 연결을 설정할 수 있습니다.
이러한 위젯은 Mendix에서 자동으로 설정되지만 드롭다운의 속성에서 목록에 표시할 대상 개체의 속성을 선택할 수 있습니다. 저희의 경우 제목과 이름은 잘 작동하지만 나중에 직접 구성해야 할 수도 있습니다. 다음은 페이지의 모습입니다:
마지막으로, 기존 객체를 편집할 수 있도록 TrainingEvent_Overview 페이지의 chevron 을 구성하여 TrainingEvent_NewEdit 페이지로 이동합니다.
앱을 실행하고 트레이닝 이벤트를 예약하세요. 이제 필요한 모든 정보를 선택할 수 있습니다!
완료되면 개발자 포털로 이동하여 사용자 스토리를 완료로 설정합니다.
4.9.5 홈페이지에서 교육 이벤트 추가
지미는 새로운 기능에 매우 만족합니다. 일상 업무에 큰 도움이 되기 때문입니다. 그는 이동 중에 교육 이벤트를 예약하는 데 많은 시간이 걸린다는 것을 알게 되었습니다. 홈페이지에 교육 이벤트를 빠르게 예약할 수 있는 버튼이 있으면 편리할 것 같습니다.
그래서 지미와 함께 다음과 같은 사용자 스토리를 작성했습니다:
관리자로서 저는 교육 이벤트를 보다 효율적으로 예약할 수 있기를 원하므로 이 작업에 최대한 적은 시간을 소비합니다. 새 버튼으로 시작하기 전에 개발자 포털에서 사용자 스토리를 찾아 실행 중으로 설정합니다.
Home_Web 페이지로 이동합니다. 홈페이지에 새 버튼을 추가할 열을 만듭니다. 이전 버튼과 마찬가지로 이미 있는 버튼을 복사하여 붙여넣거나 도구 상자에서 버튼을 끌어다 놓습니다.
버튼을 구성하려면 다음과 같이 하세요:
캡션을 교육 이벤트 추가로 변경합니다.
더하기 아이콘을 선택합니다.
클릭 시 필드에서 개체 만들기를 선택합니다.
엔티티(경로) 필드에서 교육 이벤트를 선택합니다.
클릭 시 페이지 필드에서 TrainingEvent_NewEdit를 선택합니다.
Home_Web 페이지의 모습은 다음과 같습니다:
축하합니다! 방금 생성한 새 버튼으로 지미는 이제 앱의 홈페이지에서 바로 새로운 교육 이벤트를 예약할 수 있습니다.
요약
축하합니다! 이제 완벽하게 작동하는 앱을 만들었습니다!
이 모듈에서는 다음에 대해 배웠습니다:
페이지에 동적 데이터 추가하기
엔티티 및 속성
동적 데이터 표시
오류 수정하기
속성 이름 지정
앱 실행하기
팀 서버
개체 만들기
도메인 모델
다음 모듈에서는 앱 내에서 일부 프로세스를 자동화하여 Jimmy가 시간을 절약할 수 있는 방법을 살펴봅니다!
리소스 탭에서 모듈 4의 솔루션이 포함된 mpk를 찾을 수 있습니다.
https://academy.mendix.com/link/modules/82/lectures/858/4.10-Summary
Mendix
academy.mendix.com
