멘딕스Mid / 고급 페이지 작성으로 앱 만들기 : 요청 추가(Adding Requests) 3.Expenses (47)

마법사( wizard ) 구축 전 도메인 모델 확장

1. Project 도메인 생성 (Number, Name)

 

날짜 생성/변경 , 변경 가능으로 설정.

 

 

 

여러 프로젝트 *-* 요청자 

entity Rule 설정.

 

 

모두 구성하면, 

============================================================================================ Mendix Wizard 페이지 템플릿

(멘딕스에서 자체 제공하는 Wizard 페이지 템플릿 입니다. / 페이지 생성할 때 누르면 됩니다.)

주로 단계 별 프로세스 (단계 별 절차)가 있을 때 사용하는 템플릿. 

 

3개 페이지 생성. (명명은 보통 무슨 일하는 지_Step_1,2,3 등과 같이 표기한다.) 

기본적으로 중간 과정이 자동 생성되며 1,3 단계 (초기, 끝 필요 시 추가)는 수정해서 사용합니다.

 

=========================================================================

Snippet 

스니펫 용도:  콘텐츠를 변경할 때 앱 전체에서 자동으로 업데이트된다는 이점( 다른 페이지에서도 계속 사용할 때 스니펫을 사용한다고 합니다.)

 

1. 스니펫으로 지정하고 싶은 컨테이너(구간)를 마우스 우클릭 > Extract snippet 누르기 > 

위 처럼 추출한 스니펫의 이름을 명명

 

스니펫을 사용하면 헤더 등과 같이 일정하게 나오는 부분을 쉽게 재사용이 가능. (아래 처럼 변경했습니다.)

 

가져오는 방법은 좌측 App Explorer에서 각 페이지에 스니펫 파일?(문서?)를 끌어다 놓으면 자동으로 이전에 만들어 놓은 양식 (Layout Grid 안에 Text작성 부)을 가져 올 수 있습니다.

 

 

 

(이제 페이지에 있는 Data view에 Request엔터티를 연결(위 사진은 멘딕스에서 제공한 완성 모듈을 열어 찍은 것입니다. / 원래는 Request from page parameter 'Request'(Request)만 있으면 됩니다.))

 

============================================================================================Wizard에 navigation 추가

 

단계 별로 이동하면서, 고려 사항

 

1. 다음 단계로 어떻게 이동하는가?

2. 어떤 데이터를 전달 해야 하는가?

3. 데이터를 데이터 베이스에 저장해야 하는 시기.(예를 들어 위자드 단계를 모두 완료 해야 저장할 지 , 중간에 저장할 지)

일단 아래 버튼 2개를 변경 해줍니다. (이전 단계로 가는 버튼, 다음 단계로 가는 버튼 위에 사진 처럼 단계 별 작성.)

 

마법사 1단계 버튼 2개 (버튼 설정 부분)

 

버튼 기능을 줄 때, 항상 버튼의 동작을 잘 생각해야 합니다. (그 버튼이 무슨 기능을 하는 지에 따라 위에 내용만 달라지기 때문.)

 

요약: 아래 3개 설명 처럼 페이지 간 (다른 페이지로의 이동)은 Micro flow를 사용하여 이동합니다. 이동 버튼은 마이크로 플로우를 불러오기 + 마이크로 플로우에 아래 Request Object를 $Request로 전달해야 합니다.

 

마이크로 플로우 이름: Request_wizard_Step2( 2번 째 마법사 페이지로 이동 할꺼니까)

 

마이크로 플로우 해석 : Request 파라미터 값 가져오기 

close 페이지 (현재 보는 페이지를 닫고 다음페이지로 이동할 꺼니까 ) => show page 

이 버튼은 wizard  1단계 (다음 버튼) 의 마이크로 플로우이고, 페이지 간 이동은 같아서 생략하겠습니다.

(버튼이 지시하는 페이지와 올바르게 연결만 되어 있으면 됩니다.)

 

 

============================================================================================

★ 참조 세트 선택기 (The Reference Set Selector)

이전에 올렸던 내용에서 Rference Set Selector가 잘 작동하지 않아 여기서 다시 사용해 봅니다.

Reference Set Selector는 서로 연관된 Object를 선택하는 데 사용하는 위젯으로 멘딕스 아카데미에서 나온 것 처럼 

*-* 연관 사용 가능. 

 

요약: 각각의 UI를 구성하는데 장단점이 있습니다. 

드롭다운: 가져올 값 (데이터)가 별로 없다면, 가장 적합하다고 생각합니다. (3~5 정도? 한 눈에 보이게)

 

Selector: 셀렉터의 경우 가져올 값이 너무 많을 때, 유용하다고 생각합니다. 

 

============================================================================================

간단하게 Wizard page는 머리 속으로 단계를 거쳐 수행할 때(로그인, 문서 동의양식 등), 나오는 페이지고 구글 자동 번역으로 마법사 페이지라고 한국어로 나오니, 자동 번역해서 생략하겠습니다.

 

마법사(Wizard)의 첫 번째 페이지 완료하기

 

 

(위 사진은 이미 만들어진 모듈에 단계 별로 따라 하면서 이름만 한국어로 변경한 것입니다.)

 

위에 사진처럼 각각 정보에 맞는 위젯을 사용해서 보다 입력 시 간편하게 할 수 있도록 제작합니다.

(TMI: 이런 종류 페이지를 만들 때, 가장 많이 저지른 실수 중 는 1. DataView에 엔터티를 잘 연결 했는지, 맞는 어트리뷰트 값을 가져 오는 지 였습니다. (기억 상) )  / +++ 여기서 ENum으로 설정한 Boston, Rotterdam 처럼 영어로 된 것도 caption으로 한국어 수정이 가능함.

 

 

참조 선택기는 2개를 연결해야 합니다. (페이지, 데이터 소스)

아래 과정을 보면 페이지를 새로 만듭니다.

 ===========================================================================================

참조 선택기 페이지 < = > Project_Select , PopupLayout

페이지 템플릿: 데이터 그리드 (데이터 그리드는 사용해 본 결과, 아래 처럼 격자 모양 (행렬)처럼 생긴 부분에 데이터를 정렬해주는 기능을 해주는 위젯이였는데 기억 상 이 부분도 엔터티 연결이 필요했었고, X-path를 여기에 원하는 양식으로 걸어주게 되면 조건에 따라 볼 수 있었습니다. (ex. 멘딕스 레피드에서 휴가자 목록 명단 보기 할때, 상태에 따라 보거나 , 날짜에 따라 보기 조건 등을 걸어서 ))

 

양식을 만드는 방법은 개인, 사용자 취향 차이지만, 보통 위젯이 어디서, 어떻게 쓰이고, 무슨 기능을 하는 지 윗 부분 처럼 기억나면 작성하겠습니다.

 

============================================================================================

Wizard 페이지 두번째 페이지 제작

 

 

 

1. Dataview 안에 Data Grid를 넣어야 작동합니다. 

빈 Dataview에 Data Grid 넣기 > ReqeustLine_Request 엔터티 연결 (그리드 자동 채우기 ok.) >

>> 선택 모드에서 다중 선택 누르기. (grid안에 row를 다중으로 선택하는 기능일 것입니다.)

 

 New 버튼을 눌러 페이지 생성 (아래 사진에서 신규 등록으로 캡션 변경 했습니다.)

New 버튼에 페이지를 연결하는데 (항상 이때, 페이지 접근 권한과 마이크로플로우 접근 권한을 설정해야 합니다.)

 

페이지 이름: RequestLine_NewEdit

버튼과 연결 시킬 마이크로 플로우 이름: ACT_RequestLine_Edit

RequestLine_NewEdit의 페이지 파라미터

 

 

 

편집 버튼은 이전에 파라미터 (값=사용자, 내가 입력한 값)을 가져와서 수정하는 것 이기 때문에 올렸습니다.

(여기서도 오류가 많이 납니다.) 

마이크로 플로우 해석: 

1. 파라미터 : 요청라인(서)의 엔터티 오브젝트 값 (방금 Edit 페이지에서 작성한 내용.) 

 

데이터 타입: List (1개면 First인데 여기서 여러 값을 불러오고 List 형식으로 불러와서. (이것도 오류 조심.))

엔터티 : Expenses.RequestLine

변수 명: RequestLineList (새로운 리스트 변수 명으로 값을 담아 갈 것입니다.)

 

 

2. 집계목록 활동 (마이크로플로우에서 숫자를 세주는 역할)

 

 

3. 앞에 집계 목록 활동에서 Count 변수가 1인지 판단하는 결정자 입니다. (true 앞 / false 아래 진행)

 

 

4. 위에 결정자에서 false일 경우 Error 메세지로 한개의 요청 라인만 선택해 주세요. 라는 창을 띄웁니다.

 

5. 잘 모르겠어서 검색한 결과입니다.

 

(리스트 상단에 값을 넣어줘라? 같습니다... 정확히 모르겠습니다.)

 

6.  편집 페이지 버튼을 클릭했을 때 작동하는 마이크로 플로우 임으로, 요청라인 편집 페이지와 연결해 준 뒤, 

앞에 목록작업활동? List Operation에서 $RequestLine 오브젝트 Argument아큐멘트 (값)을 전달해 줍니다. 

 

 

편집 버튼과 위에 마이크로 플로우 연결.

 

==================================================================================

보통 삭제버튼 보다, 생성 버튼이나 수정 버튼에서 CreateObject로 마이크로 플로우를 잘못 만들면 Data Base에 빈 값 (null)이 들어 가서 주의해야 합니다. (멘딕스 스튜디오 내에 expert? adv ~~~ 에서 확인 가능합니다. 나중에 정확히 기재하겠습니다.)

 

 ===========================================================================================Wizard 3단계 페이지

 

요청 제목/ 프로젝트 명은 수정이 불가능 하도록 만들고, 프로젝트 명은 reference selector로 만듦.

 

 

 

위에 마이크로 플로우 처럼 작성해 줍니다. 

 

마이크로플로우 해석: Retrieve는 찾는 값, $는 엔터티 명을 , /는 Association을 나타냅니다.

즉

RequestLine엔터티의 RequestLine을 찾아온다. (정도만 해석.)

 

(이때 commit은 DB에 저장할 지 여부를 Refresh in client는 화면에 새로고침 여부를 묻는 것인데 보통 상황에 맞게 사용합니다.)

 

============================================================================================

 

사용자 정의 탐색 레이아웃을 동적으로 만들기

 

위에 사진처럼 페이지 UI를 만들고, 데이터 뷰에

DS_HeaderData_Calculate 마이크로플로우를 만듭니다.

 

(이때도 꼭 마이크로 플로우에 접근권한을 설정해야 오류가 안납니다.)

 

HeaderData_GetOrCreate라는 마이크로 플로우를 1개 더 만듭니다. 

 

DS_HeaderData_Calculate는 메인 마이크로 플로우 / 

 

 

 HeaderData_GetRequests 라는 이름의 마이크로 플로우를 1개 더 만듭니다. 

 

 

이 마이크로 플로우 하는 역할은 요청자 자신이 요청한 총 금액만 보게하는 마이크로 플로우 입니다.

 

다시 위쪽 Main 마이크로 플로우로 돌아가서 마이크로 플로우를 위에 (완성본) 처럼 수정.

(마지막 End Point는 HeaderExpenses 스니펫으로 돌아가는 로직입니다.) 

 

============================================================================================홈페이지에 요청 표시 

 

 여기선 리소스 폴더에 (데이터 소스 마이크로 플로우를 관리합니다...)

DS_Request_GetForUserRole라는 마이크로 플로우 작성

(마이크로 플로우에 권한 부여)

 

여기서 배울 수 있는 점 :

★ Container1을 사용하여, 조건부 표기를 나타 낼 수 있다. (예시: 관리자만 볼 수 있을지 , 사용자만 볼 수 있을 지 등 여부) )

 

★ List View 쪽에 Class로 lv-col-md-4를 주게 되면 위에 그림처럼 목록 보기가 한 행에 3개 표시 됩니다. 

4개씩 표시 되게 하고 싶다면 lv-col-md-3 (로 응용하면 되겠죠?)