outsystems - 4.1 메인화면설계

이번포스팅에서 메인화면을 설계해보겠습니다. 같이 협력하여 프로젝트를 진행하는 회사의 멘토분께 도움을 받아 스크롤화면을 구현할 수 있게되어 원래 ui버전으로 진행하기로 했습니다.

위의 화면을 구현하려면 첫번째로 왼쪽에 버튼을 클릭하였을 경우 가운데의 메뉴들이 업데이트 되어야 합니다. 이를 위해 먼저 버튼을 클릭할경우 메뉴를 보여주는 화면을 설계해보겠습니다. 

 

 

Data

설계를 위해 첫번째로 데이터를 임시로 설계해보겠습니다. Entity는 2개를 만들었습니다. 메뉴들이 담기는 Menu Entity, 메뉴의 카테고리가 있는 MenuCategory Entity가 있습니다. 

속성으로는 Name 한개를 추가해주었습니다. 

 

다음으로는 Menu입니다.

속성으로는 Name, Price를 생성해주었습니다. 

 

다음으로 Menu Entity가 MenuCategory Entity를 참조하도록 해주었습니다. 

Interface

다음으로 Interface로 넘어와서 화면에 list 위젯 2개를 생성해줍니다. 첫번째 list의 열을 3col, 두번째 list의 열을 8col로 설정해줍니다. 그리고 첫번째 list의 source의 select data를 클릭하여 menu category를 두번째 list에는 menu로 설정해줍니다. 

그리고 브라우저를 열어 확인해보겠습니다. 다음과 같이 데이터에 저장한 값들이 잘 나옴을 볼 수 있습니다. 이제 카테고리의 각각의 카테고리 list를 클릭하였을 때 해당하는 카테고리 메뉴가 나오도록 설정해보겠습니다. 

 

먼저 listitem1을 더블클릭하여 action을 생성해줍니다. 그리고 흐름에 assign을 하나 생성해줍니다. 

 

 

그리고 assign에 변수를 설정해주어야합니다. 변수는 카테고리변수이어야하기 때문에 다음과 같이 설정합니다. 먼저 스크린에 지역변수를 하나 만들어줍니다. 이름은 CategoryFilter로 설정하겠습니다. 그리고 Data type을 카테고리의 Identifier로 설정해줍니다. 

assign의 variable에 방금만든 변수를 넣고 다음과 같이 값을 설정해줍니다. 

 

그리고 refresh data위젯을 다음 흐름에 넣어 주고 menu를 선택해줍니다.

 

 

그리고 publish하여 브라우저에서 확인해보겠습니다. 

카테고리를 클릭해도 메뉴에는 변화가 없습니다. 

이유는 아직 filter를 설정하지 않아서 입니다. GetMenus를 더블클릭하여 필터를 하나 만들어줍니다. 

 

방금 만든 Filter에 

CategoryFilter = NullIdentifier() or CategoryFilter = MenuCategory.Id

 

를 입력해줍니다. 그리고 다시 publish하여 확인해보겠습니다.

카테고리에 있는 list를 누를때마다 해당하는 메뉴들이 잘 나옴을 알 수 있습니다. 

 

 

여기서 드는 의문

1. Action에 Assign에서 CategoryFilter(변수)에 왜 GetMenuCategories.List.Current.MenuCategory.Id(카테고리 id를 값에 입력하는지)

2. 그리고 왜 filter를 설정해야하는지