Ignite UI Dock Manager: 웹 레이아웃 및 사용성 향상을 위해

Infragistics는 개발 프로세스와 요구 사항이 끊임없이 진화하고 있다는 것을 알고 있습니다. 시장과 고객의 기대에 부응하려면 사용성을 개선하는 동시에 새로운 기능을 추가해야 합니다.

그렇기 때문에 우리는 Ignite UI 툴킷을 지속적으로 개선하고 새로운 구성 요소와 더 많은 기능을 제공합니다. 그리고 바로 지금 Ignite UI Dock Manager 구성 요소의 새로운 릴리스를 발표하게 되어 기쁩니다. 이 강력한 새 도구를 사용하면 모든 프레임워크에서 다중 창, 다중 화면 웹 앱을 더 쉽게 빌드할 수 있습니다.

그러나 이것에 대해서는 잠시 후에 더 자세히 설명합니다.

도크 관리자란 무엇입니까?

Dock Manager는 복잡한 레이아웃을 구축하고 뷰를 더 작은 레이아웃으로 분할하기 위한 사용자 친화적인 표준 웹 구성 요소입니다. 이 작업은 런타임에 조작하고 조정할 수 있는 임의의 레이아웃을 만들기 위해 반복적으로 수행할 수 있습니다. 레이아웃과 여러 창, 패널 및 기타 UI 요소의 위치를 유연한 방식으로 관리하여 앱 내의 다른 위치에 도킹할 수 있습니다.

최종 사용자의 경우 Dock Manager는 창 고정, 크기 조정, 이동, 부동 및 숨기기와 같은 기능을 통해 생성된 레이아웃을 추가로 사용자 지정할 수 있는 기능을 의미합니다.

Dock Manager를 사용하면 어떤 이점이 있습니까?

일반적으로 Dock Manager를 사용하면 동적이고 복잡한 UI를 구축할 때 시간과 노력을 절약할 수 있으므로 웹 애플리케이션의 최종 사용자에게 더 나은 UX를 제공할 수 있습니다. 다음은 몇 가지 이점입니다.

크로스 플랫폼: 가장 좋은 점 중 하나는 데스크톱 및 모바일에 대한 여러 플랫폼 지원입니다. 또한 최신 웹 브라우저와의 호환성이 있어 Dock Manager 구성 요소를 사용하여 원하는 모든 플랫폼에 대한 반응형 레이아웃 소프트웨어 솔루션을 개발할 수 있습니다.

내장 드래그 앤 드롭: 창의 탭을 한 대상에서 다른 대상으로 재정렬하려는 경우 구성 요소가 제공하는 드래그 앤 드롭 기능을 사용하여 빠르게 수행할 수 있습니다.

원활한 통합: Angular, Blazor, Web Components 또는 기타 프레임워크에서 앱을 개발하든 관계없이 Dock Manager는 항상 지정된 프레임워크 아키텍처를 사용하여 앱 로직 및 데이터 내에 도킹 가능한 UI 요소를 통합합니다.

유연성 및 사용자 지정 조정: 레이아웃 관리, 슬롯 및 파트를 사용하여 모든 버튼 사용자 지정, 패널 및 창과 같은 항목을 다른 위치에 도킹, 앱 요구 사항에 맞게 UI 요소의 동작 변경 등 이 모든 것이 매우 간단합니다.

더 나은 UX: 최종 사용자가 사용 가능한 UI 요소를 추가로 조작, 재정렬 및 크기 조정할 수 있는 기능을 제공하는 Dock Manager 구성 요소는 실제로 앱의 전반적인 환경을 개선합니다.

Ignite UI Dock Manager의 차별점은 무엇입니까?

가장 큰 차별화 요소 중 하나는 Ignite UI Dock Manager 구성 요소가 Angular, Blazor, React 및 Web Components에 사용할 수 있는 종속성이 없는 순수 웹 구성 요소라는 것입니다. 이를 통해 데스크톱, Visual Studio와 같은 환경을 구축할 수 있을 뿐만 아니라 모든 산업 및 비즈니스를 위한 더 나은 웹 애플리케이션을 만드는 데 도움이 됩니다.

예를 들어, 금융 회사는 많은 데이터를 처리하며 이 데이터를 표시하고 이해하기 위해 복잡한 대시보드가 필요한 경우가 많습니다. 여기서 문제는 금융 회사가 Ignite UI Dock Manager를 사용하여 어떤 이점을 얻을 수 있느냐는 것입니다. 이를 통해 다음과 같은 몇 가지 작업을 수행할 수 있습니다.

• 회사의 목적과 개별 사용자의 요구 사항을 염두에 두고 쉽게 정렬하고 크기를 조정할 수 있는 사용자 지정 가능한 대시보드를 구축합니다.
• 한 번에 시각화되는 재무 데이터 볼륨을 최대화하기 위해 화면의 UI 요소 크기를 효율적으로 조정합니다.
• 최종 사용자에게 적합한 액세스 가능한 정보를 빠르게 표시합니다.
• Ignite UI Dock Manager의 플랫폼 간 호환성 덕분에 여러 장치에서 일관된 UX를 제공합니다.

이를 더 잘 설명하기 위해 "데이터 분석 도구" 설계 회의에서 직면한 실제 문제를 공유하겠습니다. 데이터 분석 도구를 사용하려면 먼저 데이터를 선택하고, 적절한 차트를 선택하고, 선택한 다음, 풀밭의 첫 번째 뱀이 있는 데스크톱 응용 프로그램이 아닌 브라우저 응용 프로그램에 있어야 합니다.

하지만 이 차트는 어디에 시각화해야 할까요? 이동할 수 없는 정적 대화 상자입니다. 그것은 당신의 그리드 뷰를 숨기고 당신은 거기에 갇혀 있습니다. 다른 항목을 검색하기 위해 스크롤해야 하는 경우 차트 대화 상자를 닫고 필요한 항목을 확인한 다음 처음부터 시작해야 합니다. 말만 해도 서투르다. 당신은 단지 브라우저에 의해 제한됩니다. 여기에서 Dock Manager가 매우 중요해집니다. 이를 통해 사용성을 희생하고 최종 사용자를 제한하지 않고 다중 화면 레이아웃을 쉽게 구축할 수 있습니다.

다음은 간단한 Dock Manager 예제와 시각적 비교입니다.

Ignite UI Dock Manager를 사용하는 방법?

NPM 패키지를 사용하여 Ignite UI Dock Manager 웹 구성 요소를 프로젝트에 종속성으로 포함할 수 있습니다. Dock Manager 패키지를 설치하려면 다음 명령을 실행합니다.

npm install --save igniteui-dockmanager

그런 다음 DefineCustomElements() 함수를 가져와서 호출해야 합니다.

import { defineCustomElements } from 'igniteui-dockmanager/loader';
defineCustomElements();

TS

Dock Manager를 가져온 후에는 페이지에 추가할 수 있습니다.

<igc-dockmanager id="dockManager">
</igc-dockmanager>

​GitHub Ignite UI Dock Manager 리포지토리에 빠른 방법 단계와 추가 정보가 추가되었습니다.

Dock Manager의 주요 빌딩 블록에 대해 알아야 할 몇 가지 중요한 사항은 이를 창 이라고 한다는 것입니다.

Dock Manager에서 창 사용

Dock Manager의 기본 빌딩 블록은 다음과 같습니다.

• Content pane 

콘텐츠 창은 헤더와 콘텐츠가 있는 창을 나타냅니다. 분할 창 또는 탭 그룹 창 내에서 호스팅할 수 있습니다.

• Split pane 

분할 창은 방향 속성에 따라 모든 자식 창을 가로 또는 세로로 쌓는 컨테이너 창입니다.

• Tab group pane 

탭 그룹 창에는 자식 콘텐츠 창이 탭 구성 요소의 탭으로 표시됩니다.

• Floating pane 

부동 창은 부동 창에서 다른 모든 창보다 먼저 렌더링되는 분할 창입니다.

• Document host 

문서 호스트는 코드 편집 및 디자인 보기를 위한 Visual Studio의 탭과 유사한 문서 탭 영역입니다.

다음은 Ignite UI를 사용하여 구축한 또 다른 Dock Manager 데모입니다.

 

Ignite UI for Dock Manager 구성 요소의 테마 사용자 정의

Dock Manager에는 밝은 테마와 어두운 테마가 모두 내장되어 있습니다. 즉시 사용 가능한 테마를 사용하면 편리할 수 있지만 애플리케이션에 필요한 모양과 느낌을 형성하기에는 충분하지 않으므로 CSS 변수 및 CSS 부분을 사용하여 Ignite UI Dock Manager를 사용자 정의할 수 있는 더 많은 옵션을 제공합니다.

먼저 closeButton, maximizeButton, minimizeButton, pinButton 및 unpinButton 슬롯을 사용하여 고유한 아이콘을 제공합니다.

그런 다음 스타일 시트에서 노출 된 부분을 사용하십시오. 이렇게 하면 구성 요소의 스타일을 완전히 제어할 수 있습니다.

잘 했어요. 이제 사용자 지정된 아이콘과 탭 영역이 있는 DockManager가 있습니다.

원하는 경우 이 stackblitz 라이브 예제를 사용하여 시도해 볼 수 있습니다.

Customizing Layouts 

최종 사용자는 다음 작업을 수행하여 런타임에 레이아웃을 사용자 지정할 수 있습니다.

• Pin a pane 

현재 필요하지 않은 모든 콘텐츠와 탭 창을 고정을 해제하여 트레이에 숨길 수 있습니다. 마지막 도킹 위치에서 필요할 때 고정하기만 하면 됩니다.

• 창 크기 조정

• 창 닫기

• Float a pane

창의 헤더를 드래그하여 부동 창을 만들 수 있습니다. 부동 창은 부동 창에서 다른 모든 창보다 먼저 렌더링되는 분할 창입니다. 다른 모든 창 위로 이동하며 Dock Manager 창에 의해 제한되지 않습니다. 크기를 조정하고 도킹하거나 분할 창 또는 탭 그룹 내에서 호스팅할 수 있습니다.

• 창 탐색기

커서가 현재 위치한 창에 상황에 맞는 창을 도킹하거나 호스트할 수 있는 위치에 대한 시각적 표시(조이스틱). 당신은 할 수 있어요:

• 창을 왼쪽, 오른쪽, 위쪽 또는 아래쪽에 전역/루트를 포함한 모든 중첩 수준에 도킹합니다.
• 창 아래쪽에 실시간 로그 창을 도킹합니다.
• 명령과 작업이 있는 창을 MS Office 리본과 같은 내 창 맨 위에 도킹합니다.
• 콘텐츠 영역을 분할하지 않고 창을 다른 보기의 탭으로 도킹합니다.
• 트레이를 열고 항목을 대상 창으로 끌어 특정 위치에 도킹합니다.

 

• 레이아웃 저장/불러오기

사용자 지정 및 복잡한 레이아웃을 만드는 것은 까다롭고 지속적으로 다시 만들어야 하는 경우 매우 성가실 수 있습니다. 그렇기 때문에 레이아웃을 저장하고 로드하는 옵션을 포함했습니다. 이제 현재 요구 사항에 맞게 레이아웃을 사용자 지정하고 기본값으로 저장하여 반복을 줄이고 시간을 절약할 수 있습니다.

예를 들어 직접 시도하려면 Angular 프로젝트만 있으면 여기의 지침을 따를 수 있습니다.

결국 Dock Manager는 웹 개발자에게 복잡한 웹 앱의 사용성을 개선할 수 있는 기능을 제공하여 웹에서 완전한 윈도우 경험을 제공합니다. 이 작업을 빠르고 쉽게 수행하여 영웅이 되고 다음 카페인 음료를 얻는 데 걸리는 시간 동안 사용자의 요구를 충족할 수 있습니다.