데이터 그리드, 입력 텍스트, 드롭다운과 같은 App Store의 대부분 위젯은 바로 사용할 수 있습니다. 첫 번째 기사에서 제가 가장 좋아하는 위젯 몇 가지를 강조했습니다. 오늘은 훌륭한 사용자 인터페이스를 제공하는 데 도움이 되는 주요 위젯을 자세히 살펴보고 이를 사용하여 빌드하는 것이 얼마나 쉬운지 보여드리겠습니다.

이 게시물에서 사용할 예는 App Store에서 가져온 것입니다. 직원 디렉토리 앱.

데이터 뷰 및 데이터 그리드

데이터 뷰와 데이터 그리드는 Mendix 개발자의 빵과 버터. 이들은 최종 사용자에게 동적 데이터를 표시하는 기반입니다. 데이터 뷰는 데이터베이스의 단일 객체를 보여주는 반면, 데이터 그리드는 데이터베이스의 객체 목록을 보여줍니다.

필요할 수 있는 모든 개요 페이지를 고려하세요. 개요 페이지를 만드는 가장 쉬운 방법은 페이지에 데이터 그리드를 추가하고 표시하려는 엔터티를 선택하는 것입니다. 거기에서 저는 항상 나머지 페이지를 자동으로 채우고 자동 생성합니다. 메인 페이지를 만든 후에는 사용자에게 관련성이 있는 데이터만 표시하고 컨테이너, 그룹 상자 또는 탭을 추가하여 인터페이스를 수정합니다.

으로 Mendix 개발자님, Desktop_Employee_Directory 페이지로 가면 그룹박스와 데이터뷰, 그리고 리스닝 그리드를 사용하는 것을 볼 수 있습니다. 모든 도구와 위젯을 실험해 보시기를 강력히 권합니다!

그림 1: 그룹 상자와 데이터 보기가 있는 페이지의 예

그림 2: 최종 사용자가 보는 것의 예

입력

입력 위젯은 엔터티 내의 속성을 보여줍니다. 데이터 유형에 따라 다른 입력 필드를 가질 수 있습니다. 아래 예에서는 세 가지 유형의 입력 위젯이 있습니다.

1. 텍스트 입력 위젯은 문자열 및 기타 영숫자 데이터 유형에 사용됩니다.
2. 날짜 데이터 유형은 직원 레코드가 생성된 날짜를 보여줍니다. 동일한 날짜 입력 위젯은 생년월일을 표시하는 데에도 사용됩니다.
3. 라디오 버튼 목록은 직원의 성별을 표시하는 데 사용됩니다. 드롭다운 입력 위젯을 사용할 수도 있지만, 앱 스토어의 라디오 버튼 목록은 더 매력적인 사용자 인터페이스를 제공합니다.

그림 3: 입력 위젯의 예 - Desktop_EmployeeSnippet 표시

그림 4: 최종 사용자가 볼 수 있는 예

짧은 발췌

스니펫은 가장 큰 추가 기능입니다. Mendix 5+ 그리고 제가 가장 좋아하는 도구 중 하나입니다. 스니펫 위젯은 페이지나 레이아웃 구성 요소를 재사용하고 싶을 때 유용합니다.

직원 디렉토리 앱에서 직원 정보는 두 개의 서로 다른 페이지에서 사용되는 스니펫입니다(아래 참조).

그림 5: 직원 정보가 호출되는 횟수 - 직원 세부 정보 및 새 직원 생성 시

여러 페이지에 걸쳐 동일한 정보를 생성하는 대신, 스니펫을 한 번 빌드하고 원하는 만큼 호출할 수 있습니다! 스니펫을 사용하면 한 곳에서만 데이터 뷰나 데이터 그리드 정보를 변경하면 되므로 효율성이 높아집니다. 게다가 페이지가 더 빨리 로드됩니다!

저는 최근 프로젝트에서 스니펫을 사용했고 그것이 엄청나게 유용하다는 것을 알게 되었습니다. 스니펫 사용 방법에 대한 자세한 내용은 다음을 읽어보세요. 이 도움이 되는 기사! 보기 직원 디렉토리 앱 및 기타 샘플 응용 프로그램 앱 스토어.

Mendix 개발자는 사용자가 보는 것을 봅니다

사용자 인터페이스를 구축할 때 위젯은 필수입니다. 위젯은 직관적이기 때문에 UI 개발을 훨씬 더 쉽게 만들어줍니다. Mendix 개발자는 사용자가 보는 것과 거의 같은 것을 봅니다. 그리고 Mendix App Store에는 사전 구축된 위젯과 구성 요소가 많이 있으며, 커뮤니티에서는 항상 더 많은 아이디어를 제공해 주시길 바랍니다.