App Builder 릴리스: 변수 및 이벤트를 사용하는 마스터-디테일 스타일 앱

App Builder 최신 프레임워크로 사용자 인터페이스를 만드는 데 탁월합니다. 실제 데이터를 바인딩하고 CRUD 작업을 수행할 수 있지만 이제는 그 이상입니다. 최신 릴리스에서는 변수, 상태 관리 및 선택 이벤트와 같은 새로운 개념을 도입하여 앱에 생기를 불어넣고 마스터-디테일과 같은 누락된 패턴을 활성화합니다.

App Builder의 마스터-세부 사항: 개요

처음에 이 기능은 마스터-디테일 디자인 인터페이스의 기본을 따르도록 계획되었습니다. 그러나 그것은 훨씬 더 많은 것으로 발전했습니다. 본질적으로 기록 목록을 제시하여 사용자가 쉽게 관리할 수 있도록 하는 방법입니다. 일반적으로 두 가지 보기로 구성됩니다.

• 하나는 레코드의 마스터 목록입니다.
• 다른 하나는 단일 레코드에 대한 확장 데이터를 표시하는 데 사용됩니다.

일상 업무와 활동에 이 UI 패턴을 사용합니다. 마스터-디테일 UI의 일반적인 예로는 Facebook Messenger, Outlook 및 Gmail과 같은 모든 메일 클라이언트, 항공편 예약 웹사이트의 80% 등이 있습니다.

App Builder에 설정된 풍부한 UI 구성 요소 덕분에 이제 일반적인 마스터-디테일 사용 사례를 넘어서는 더 복잡한 디자인을 만들 수 있는 도구를 제공합니다.

이는 우리가 도입한 새로운 개념인 애플리케이션 변수를 통해 가능합니다. 이러한 변수와 새로운 이벤트 동작은 데이터 저장 및 상태 관리의 핵심이자 핵심 입니다. 이는 구성 요소의 이벤트를 이러한 변수에 바인딩하고 컨텍스트를 사용하여 앱을 더욱 동적이고 생생하게 만들 수 있음을 의미합니다.

새로운 기능은 마스터-디테일 패턴에 의해 설정된 다음과 같은 주요 요소를 다룹니다.

• 기본 창: 앞에서 설명한 대로 항목 목록이나 앱의 다른 부분 로드를 시작할 수 있는 모든 항목이 포함된 영역입니다.
• 세부정보 창: 이 영역에는 기본 창 영역에서 선택한 특정 항목의 세부정보가 표시됩니다. 제공한 데이터를 기반으로 최대한 많은 정보를 표시하는 것을 목표로 서로 상호 작용하는 다양한 구성 요소로 구성될 수 있습니다.
• 상호작용: 마스터 항목과 해당 세부정보 간의 상호작용에 관한 것입니다. 예를 들어 마스터에서 항목을 선택하면 세부 정보가 마스터 창 옆 창이나 팝업에 표시되거나 더 많은 페이지를 드릴다운할 수 있습니다. 상호작용을 컨텍스트, 드릴다운, 팝업으로 광범위하게 분류할 수 있습니다.

새로운 기능에 대해 자세히 알아보겠습니다.

참고: 아래 연습에서는 Northwind WebAPI를 사용합니다.

1. 변수 관리

간단히 말해서, 이제 다음을 통해 애플리케이션의 구성 요소 간에 데이터를 전달할 수 있습니다.

• 전역 변수- 뷰 간에 데이터를 전달하는 데 사용됩니다.
• 지역 변수- 동일한 뷰의 구성 요소 간에 데이터를 전달하는 데 사용됩니다.

변수 유형은 문자열, 숫자, 부울, 날짜, 개체 및 배열일 수 있습니다.

모든 기본 유형에 대해 값 편집기를 사용하여 기본값을 지정할 수 있습니다. 배열 및 개체의 경우 플라이아웃 메뉴에서 끝점 또는 스키마 유형을 선택할 수 있습니다. 앱에서 사용 가능한 데이터 소스 스키마를 기반으로 이를 나열합니다.

변수 작업을 시작하는 방법에는 두 가지가 있습니다.

1.1. 변수를 사용할 특정 구성요소에 대한 이벤트 핸들러를 통해

예를 들어 Movies 테이블에 콤보 바인딩을 추가하고 변수 설정 작업을 사용하여 Selection Changed 이벤트 핸들러를 추가하는 경우 변수 필드를 선택하고 "+ 새 변수" 버튼을 사용할 수 있습니다.

이를 클릭하면 콤보 데이터 소스 유형(박스 오피스 수익) 및 콤보 선택 모드에 따라 데이터 유형이 이미 미리 입력된 새 변수 대화 상자가 열립니다. 왜? 단일 선택 모드가 지정되면 변수는 단일 개체 (흥행 수익)를 사용할 것으로 예상되고, 다중 선택 모드를 사용하는 경우 변수는 개체의 배열 (흥행 수익 배열)을 그대로 사용해야 합니다. 우리의 경우.

이는 애플리케이션 수명 주기 생성의 일부이므로 변수 생성의 주요 흐름으로 간주됩니다.

.. 컴포넌트로 시작합니다

.. 날짜에 바인딩

.. 이벤트 추가

.. 특정 동작에 고정(변수 설정 동작)

.. 상태를 보존하기 위해 변수를 생성합니다.

.. 나중에 앱 내에서 이 변수를 사용하세요.

1.2. 변수 섹션을 통해 변수를 만듭니다.

여기에서 대화 상자를 열어 변수를 생성하고 편집할 수 있습니다. 이름 지정 프로세스를 안내하는 검증이 있습니다. 변수 유형을 설정하는 방법에는 드롭다운 메뉴에 미리 정의된 유형으로 지정하거나 API 요청에서 자동 초기화(엔드포인트 선택)를 통해 두 가지가 있습니다. 해당 옵션을 사용하면 선택한 엔드포인트의 스키마 데이터 유형을 기반으로 데이터 유형이 자동으로 선택됩니다.

아래 섹션에서는 변수를 사용하는 방법에 대한 자세한 내용을 확인할 수 있습니다.

1.3. 엔드포인트에서 데이터 초기화

이제 데이터를 변수에 저장하고 이를 기존 구성 요소의 데이터 컨텍스트에서 사용할 수 있습니다. 또한 선택한 끝점을 기반으로 변수 유형이 무엇인지 자동으로 감지합니다. 우리는 데이터 스키마에서 해당 정보를 얻습니다.

아래 예를 살펴보겠습니다. /Customers 엔드포인트 요청에서 데이터를 초기화하고 나중에 이 데이터를 콤보 구성 요소에 바인딩합니다. 추론 유형은 고객 배열입니다.

1.4. 구성요소 이벤트 컨텍스트 또는 데이터 컨텍스트를 통해 변수 값을 설정합니다.

이 기능을 사용하면 빈 변수를 데이터로 동적으로 채울 수 있습니다. 예를 들어 Customers Array('selectedCustomers') 유형의 빈 변수가 있습니다. 아래 gif는 이러한 변수를 생성하고 콤보 값 선택 변경 시 데이터로 채우기 시작하는 방법을 보여줍니다. 이 시나리오의 마지막 단계는 예를 들어 'selectedCustomers' 배열에 Grid 구성 요소를 바인딩하는 것입니다.

비슷한 시나리오가 다음 구성 요소에 바인딩 섹션의 일부로 나열되어 있지만 여기서는 변수 값을 설정하는 것이 아니라 속성 바인딩에 중점을 둡니다.

2. 확장된 바인딩 옵션

구성 요소 바인딩에 대해 말할 때 구성 요소 구성의 실제 속성에 바인딩하는 것을 의미합니다. 실제 바인딩은 바인딩 가능한 각 구성 요소 속성에 표시된 플러그 아이콘을 통해 발생합니다. 다음 예를 살펴보겠습니다. 이전에는 카드 구성 요소의 제목과 부제목을 설정하려면 데이터 배열을 반복해야 했습니다. 그런 다음에만​ ​데이터 컨텍스트가 바인딩 옵션으로 나타나 특정 데이터 필드를 설정할 수 있었습니다. 이제 변수는 데이터 반복 컨텍스트뿐 아니라 모든 구성 요소를 바인딩할 수 있는 컨텍스트를 제공합니다. 따라서 모든 유형의 변수를 생성하고 데이터 반복기 없이 간단한 카드에 바인딩할 수 있습니다.

2.1. 배열 유형의 변수를 통해 반복되는 데이터

영화 컬렉션이 있고 내가 수행한 다중 선택을 기반으로 가장 높은 수익을 올린 박스오피스 영화에 대한 세부 정보 목록을 표시하고 싶다고 가정해 보겠습니다. 어떻게 해야 합니까?

• 다중 선택 기능(콤보)이 있는 구성 요소에 영화 컬렉션을 바인딩하고 이벤트 핸들러 및 변수 설정 작업을 추가하는 위에서 다룬 흐름을 따릅니다.

• Box Office Revenue 유형의 빈 배열 변수를 만듭니다. 데이터 유형은 콤보 구성 요소에 제공된 데이터 소스를 기반으로 미리 채워집니다.

• 카드 구성 요소를 추가하고 새로 생성된 변수 "selectedMovies"에 바인딩합니다. 데이터 컨텍스트의 데이터 필드에 제목 및 부제 속성을 바인딩합니다.

변경 결과는 다음과 같습니다.

2.2. 전역 변수와의 크로스 뷰 통신.

그래서 우리가 알고 있는 것은 다음과 같습니다:

• 전역 변수는 뷰 간에 데이터를 전달하는 데 사용됩니다.
• 지역 변수는 동일한 뷰의 구성 요소 간에 데이터를 전달하는 데 사용됩니다.

즉, 다양한 마스터 및 하위 보기에서 전역 변수를 사용할 수 있습니다. 하나의 보기에서 전역 변수를 생성하면 다른 모든 보기에도 표시됩니다.

3. 데이터 요청 및 반복기에 대한 URL 매개변수 바인딩

3.1. 데이터 요청

경로/쿼리 매개변수가 필요한 데이터 엔드포인트를 지정하는 경우 이제 해당 매개변수를 지정할 수 있으며, 일단 존재하면 제공된 매개변수를 기반으로 데이터를 가져오는 데이터 요청이 이루어집니다. "CustomerID" 경로 매개변수를 기반으로 고객 주문에 바인딩된 그리드의 예

3.2. 데이터 리피터

또 다른 예는 선택한 고객 ID를 기반으로 가져온 Orders 컬렉션을 통해 트리 노드 구성 요소를 반복하는 것입니다. 차이점을 관찰하고 이제 이를 데이터 반복 컨텍스트에 바인딩합니다.

4. 이벤트 작업

현재 우리는 변수 관리 컨텍스트에서 사용할 수 있는 구성 요소 이벤트 핸들러를 공개합니다. 그러한 이벤트는 다음과 같습니다:

• 선택 변경 이벤트– Combo 구성 요소의 경우
• 행 선택 변경 이벤트– 그리드 구성 요소에 대한 것입니다.
• 클릭 이벤트– 클릭 이벤트로 변수 설정에 대한 데이터 컨텍스트(도구 상자의 모든 기존 구성 요소)

그리드 및 콤보 구성 요소는 선택 모드를 설정하는 방법을 노출합니다. 선택 모드에 따라 변수 유형을 동적으로 변경합니다.

예를 들면 다음과 같습니다. 단일 선택 모드를 사용하여 고객 배열에 바인딩된 콤보 구성 요소는 선택한 항목에 대한 이벤트 컨텍스트를 통해 고객 개체를 전달합니다.

App Builder의 모든 구성 요소에는 변수 컨텍스트에서 사용할 수 있는 OnClick 이벤트 핸들러가 있습니다. Select 항목의 경우 바인딩된 반복 데이터가 있는 경우 On Click -> Set Variable 작업을 통해 특정 항목에 대한 데이터 컨텍스트에 액세스하고 이를 사용하여 Variable 값을 수정할 수 있습니다. 아래 트리의 예:

`valueKey`가 설정된 콤보 사용에 대한 참고 사항입니다. 콤보가 작동하는 방식은 선택 변경 이벤트에 기본 값을 전달하는 것입니다. 예를 들어 Number 유형의 CustomerID가 설정된 경우 이벤트 인수는 CustomerID를 전달합니다. CustomerName이 설정된 경우 문자열을 전달합니다.

5. 단계별 예시

아래에서는 두 가지 시나리오에 대한 실제 사용 사례를 찾을 수 있습니다. 이러한 시나리오에서는 위에서 설명한 모든 내용을 다룹니다.

여기에서 애플리케이션의 실시간 미리보기를 확인할 수 있습니다.

하나의 보기에서 설정된 전역 변수 및 보기 컨테이너를 통해 다른 보기의 그리드 업데이트 요청.

• 콤보 선택 변경 이벤트 시 설정되는 전역 변수를 추가합니다. 콤보는 고객 엔드포인트에 바인딩됩니다.
• 콤보에서 CustomerID를 선택하세요.
• Grid가 해당 CustomerID를 기반으로 주문을 가져오는 API 요청에 바인딩된 다른 보기로 이동합니다.
• 그리드는 선택한 CustomerID(콤보에서)로 업데이트되어야 합니다.

• Orders 그리드에서 Order를 클릭하면 OrderDetails가 포함된 다른 그리드를 로드합니다.
• 결과

그리드 및 차트용 데이터를 로드하는 계층적 데이터 소스에 바인딩된 트리

여기에서 애플리케이션의 실시간 미리보기를 확인할 수 있습니다.

• Tree 구성 요소를 추가하고 해당 상위 구성 요소를 계층적 데이터 소스(반복 데이터 컨텍스트)에 바인딩합니다.
• 상위 트리 노드 On Click 이벤트를 CustomerID – 문자열 변수를 저장하는 변수 설정 작업에 바인딩합니다.

• Tree 하위 노드를 추가하고 상위 데이터 컨텍스트에서 반복합니다. 하위 트리 노드 On Click 이벤트를 OrderID – Number 변수를 저장하는 변수 설정 작업에 바인딩합니다.

• 루트 트리 요소에 고객이 표시되고 하위 트리 노드에 주문이 표시되는지 확인하세요.
• OrderID 변수를 쿼리 매개변수로 기반으로 주문을 가져오는 엔드포인트에 그리드를 바인딩합니다.

• CustomerID 변수를 쿼리 매개변수로 기반으로 고객을 가져오는 엔드포인트에 차트를 바인딩합니다.

• 결과

흥미로운 기사

최근 작업 중인 기사 목록을 확인하세요.

• App Builder 사용하여 Figma 디자인을 HTML 코드로 변환
• App Builder 사용한 Angular 코드 생성
• 로우코드 도구로 미션 크리티컬 엔터프라이즈 소프트웨어의 복잡성 감소
• 신속한 애플리케이션 개발이란 무엇입니까?
• 설계-코드 솔루션 설명
• UI 구성 요소 라이브러리 - 빌드 및 구매
• 그리드 CRUD 작업, 중첩된 데이터 바인딩 지원, 카테고리 차트 집계

마무리!

보시다시피, Infragistics Ultimate Q4 릴리스에는 한 번에 하나의 앱으로 아름다움과 단순성을 구축하는 방법을 크게 개선, 간소화 및 현대화할 수 있는 수많은 새로운 기능과 업데이트가 있습니다.

이번 릴리스의 각 부분에 대한 세부 정보가 있으며 여기에서 확인할 수 있습니다.

• Angular–변경 로그 및 업데이트
• App Builder–변경 로그 및 새로운 기능

더 자세한 내용이 필요하시면 다음을 확인해 보시기 바랍니다.

• Discord 채널.
• GitHub 토론.
• 로드맵
• 유튜브 채널
• 트위터

To experience everything, visit your customer portal and get the latest version. As usual, we are always excited to get your feedback and hear what you want to add or recommend. So please email me at zkolev@infragistics.com and let me know how we can help you continue delivering value to your customers with Infragistics.