따라서 Mendix UI Framework는 최근 발표된 우리의 눈길을 끄는 요소입니다. Mendix DX 출시(3월 XNUMX일 출시)^rd). 이 새로운 프레임워크는 개발자가 보다 쉽게 ​​매력적이고 반응성이 뛰어난 애플리케이션을 만들 수 있도록 하는 포괄적인 UI 패턴, 테마, 탐색 레이아웃 및 페이지 템플릿 세트를 제공합니다.

흥미롭게도 UI 프레임워크는 우리의 R&D 연구일을 위한 프로젝트로 시작되었습니다. Mendix, 우리는 플랫폼에 탐구하거나 기여하는 것이 흥미로울 것이라고 생각하는 혁신적인 아이디어를 작업하기 위해 이 기간 동안 주기적으로 계획합니다. 하루가 끝나면 개념이나 프로토타입이 제시되고 가장 많은 표를 얻은 후보가 상품화됩니다. 글쎄요, 이 아이디어는 많은 열광으로 환영받았습니다.

고객 및 파트너와 마찬가지로 우리는 성장하는 포트폴리오의 모양과 느낌을 쉽게 유지할 수 있는 기능을 원했습니다. Mendix 응용 프로그램. 몰랐다면, 우리는 내부적으로 많은 것을 구축합니다. MendixDev Center, Cloud Portal, App Store 및 다양한 내부 애플리케이션을 포함합니다.

UI 프레임워크를 사용하면 이제 여러 수준에서 이러한 애플리케이션의 원하는 모양과 느낌을 유지할 수 있는 유연성이 더 커졌습니다. 라이브러리를 업데이트하기만 하면 모든 애플리케이션을 한 번에 업데이트하거나 개별 애플리케이션을 선택할 수 있습니다. 또한 프레임워크를 사용하면 각 애플리케이션이 고유한 사용자 지정 스타일을 쉽게 가질 수 있습니다. 마케팅 팀이 리브랜딩을 원할 경우 Mendix 예를 들어 App Store에서 해당 애플리케이션에 대한 사용자 정의 변수 세트를 포함하는 사용자 정의 폴더를 만들 수 있습니다.

따라서 Mendix UI 프레임 워크

우리는 Mendix 깊은 기술 및 디자인 기술이 없는 개발자가 매력적이고 반응성이 뛰어난 다중 기기 애플리케이션을 구축할 수 있도록 하는 UI 프레임워크입니다. 이 프레임워크는 테마, 탐색 레이아웃, 페이지 템플릿, 디자인 요소 및 강력한 CSS/Sass 프레임워크를 포함하여 여러 수준에서 애플리케이션의 모양과 느낌을 정의할 수 있도록 합니다. 각각을 더 자세히 살펴보겠습니다.

테마

새로운 애플리케이션을 만들 때 다양한 테마 중에서 선택할 수 있습니다. Mendix UI 프레임워크. 아래 쇼케이스에서 볼 수 있듯이 테마는 동일하게 보일 수도 있지만 완전히 다를 수도 있습니다. 많은 작업 없이도 원하는 모양과 느낌으로 애플리케이션을 빠르게 브랜딩할 수 있습니다. 모든 테마는 물론 반응형이며 다중 기기에 적합합니다.

탐색 레이아웃

애플리케이션 전체에서 일관된 탐색을 빠르게 만들기 위해 탐색 레이아웃을 도입합니다. 레이아웃은 상단 바 또는 사이드 바 메인 및 하위 메뉴로 앱을 탐색하는 방법을 제어합니다. 각 기기 유형(휴대폰, 태블릿 또는 데스크톱)에 대한 탐색 레이아웃 세트가 테마와 함께 제공됩니다.

페이지 템플릿

우리는 내부 프로젝트에서 올바른 페이지 레이아웃과 상호작용을 디자인하는 데 엄청난 시간을 할애할 수 있다는 것을 알았습니다. 솔직히 말해서 UI 전문가를 참여시키지 않으면 일반적으로 결과가 그렇게 좋지 않습니다. UX 팀의 규모를 쉽게 두 배로 늘릴 수 있고 여전히 UI 전문가에 대한 수요를 충족하는 데 어려움을 겪을 수 있습니다.

그래서 우리는 UI 패턴을 살펴보고 페이지 템플릿을 제공하여 이를 상품화하기로 했습니다. 이는 개요, 마스터-디테일, 대시보드, 위치 및 마법사와 같은 광범위한 페이지 유형에 대한 사전 정의된 템플릿입니다. 모두 모든 유형의 장치에 반응하고 최적화되어 있습니다.

디자인 요소

마지막으로 중요한 것은 Mendix UI Framework에는 완전한 디자인 요소 세트가 제공됩니다. Design Elements를 사용하면 표준 Mendix 위젯은 스타일, 색상, 크기 및 정렬에 대한 선호도에 따라 빠르게 조정할 수 있습니다. 모든 디자인 요소에 대해, 우리는 여러분이 모든 구성 요소를 수동으로 스타일링하지 않고도 애플리케이션 전체에서 다른 모양과 느낌을 만들 수 있도록 돕기 위해 다양한 변형 세트를 만들었습니다. 예를 들어, 디자인 요소 "탭"은 제공된 클래스를 사용하여 간단히 7가지 다른 방식으로 사용할 수 있습니다. Mendix UI 프레임워크.

프레임워크 뒤에 있는 기술

장면 뒤를 살펴보고 프레임워크를 어떻게 구축했는지 살펴보겠습니다. Mendix 커뮤니티 멤버는 이를 사용하거나 확장할 수도 있습니다.

프레임워크는 CSS와 전처리기로 구성됩니다. 말대꾸 (사용은 선택 사항이지만 강력히 권장). CSS에 익숙할 수 있으며 애플리케이션의 모양과 느낌을 변경하는 것이 매우 쉽다는 것을 알고 있을 것입니다. CSS 자체는 재미있을 수 있지만 스타일 시트는 점점 더 커지고 복잡해지고 유지 관리하기 어려워지고 있습니다. 여기서 Sass와 같은 전처리기가 도움이 될 수 있습니다. Sass를 사용하면 변수, 인라인 가져오기, 중첩 등과 같이 CSS에 없는 기능을 사용할 수 있습니다. Sass를 사용하면 적절한 폴더와 문서를 만들 수 있습니다. Sass를 조작하기 시작하면 전처리된 Sass 파일을 가져와 애플리케이션에서 사용할 수 있는 일반 CSS 파일로 내보냅니다.

부트스트랩 통합

Mendix Bootstrap의 출시와 함께 사용이 소개되었습니다. Mendix 5.0. 에서 Mendix UI 프레임워크에서 Bootstrap 표준을 따르고 Business Modeler에서 추가 개선을 했습니다. Mendix DX 릴리스의 특징은 Modeler를 위한 몇 가지 새로운 위젯을 만들었다는 것입니다. 여기에는 다음이 포함됩니다.

레이아웃 그리드

개발자가 Bootstrap과 100% 통합된 그리드 시스템을 쉽게 만들 수 있도록 Modeler에 위젯 "Layout Grid"를 포함했습니다. 레이아웃 그리드는 콘텐츠를 보관하는 일련의 행과 열을 통해 페이지 레이아웃을 만드는 데 사용됩니다.

그룹 형성(수평/수직)

이 위젯은 최소한으로 보일 수 있지만 기존 위젯 개발에 비하면 큰 변화입니다. 더 이상 양식에 별도의 레이블이나 입력을 배치할 필요가 없습니다. form-group을 사용하면 Bootstrap에서 통합하여 적절한 양식을 매우 쉽게 만들 수 있습니다. 마우스 클릭만으로 레이블과 입력을 수직 또는 수평으로 배치할지 선택하세요.

글 리피 콘

글리피콘은 이제 Modeler의 일부이며 다양한 위젯에서 사용할 수 있습니다. 자세한 내용은 다음에서 읽어보세요. 이 블로그 게시물.

맞춤형

다음을 기반으로 사용자 정의 테마를 구축하세요. Mendix UI 프레임워크 또는 프레임워크에 기여할 수도 있습니다. 깃허브. 우리는 자세하지만 간단한 가이드 여러분이 직접 테마를 만드는 데 도움을 드리겠습니다.

프레임워크 개선에 도움을 주시고 피드백을 제공하여 우리가 다음과 같은 목표를 달성할 수 있도록 도와주세요. Mendix 지역사회는 우리의 업무를 수행하는 데 필요한 모든 도구를 갖추고 있습니다.

다음은 무엇입니까? Mendix UI 프레임워크?

이 릴리스는 시작에 불과합니다! 앞으로는 Bootstrap을 Business Modeler에 더욱 긴밀하게 통합할 것입니다. 또한 접근성, 웹 표준 및 WYSIWYG는 개발자가 훌륭한 애플리케이션을 더욱 빠르게 제공할 수 있도록 돕는 데 중요한 역할을 계속할 것입니다.

따라서 Mendix DX 릴리스는 3월 XNUMX일에 출시될 예정입니다.^rd, 계속 지켜봐 주세요. 그동안 여러분의 피드백을 환영합니다!