App Builder 릴리스: 양방향 데이터 바인딩, 데이터 소스 OpenAPI 스키마 업데이트 등
또 다른 흥미로운 App Builder 릴리스가 오늘 출시되었습니다. 이제 Two-Way Data Binding, 업데이트된 Datasource OpenAPI Schema 등을 통해 앱 개발을 진행하세요.
즈드라브코 콜레프
6분 읽기
5월에 출시될 App Builder 새로운 기능과 개선 사항이 다수 포함되어 있습니다. 이제 사용자는 기존 데이터 원본을 최신 OpenAPI 스키마로 업데이트하여 차이점을 볼 수 있습니다. 개선 사항에는 Input, Checkbox, Switch, Date Picker, Calendar, Rating 및 Slider 구성 요소에 대한 양방향 데이터 바인딩 지원도 포함됩니다.
그밖에 다른 거? 이제 행 생성, 업데이트 및 삭제를 위한 데이터 작업을 트리-그리드 구성 요소에서 사용할 수 있으며, 트리-그리드 구성 요소의 행 선택 이벤트를 기반으로 변수를 업데이트할 수 있습니다. Tree 구성 요소가 단일 노드 확장 및 항목 클릭 시 토글에 대한 속성으로 향상되었습니다. 또한 입력 구성 요소에 대한 새로운 검색 스타일 옵션이 추가되었습니다.
이러한 새로운 기능에 대해 자세히 알아보기 전에 App Builder에 대해 처음 배우는 경우 조직의 애플리케이션 개발 프로세스에서 핵심 도구로 고려해야 하는 이유를 빠르게 공유하겠습니다.
- 시각적 앱 빌더 – 제품 관리자, 디자이너, 개발자 및 이해 관계자를 위한 통합 플랫폼입니다.
- 기업이 그 어느 때보다 80% 빠르게 완전한 비즈니스 앱을 설계하고 구축할 수 있도록 지원하는 클라우드 기반 WYSIWYG 드래그 앤 드롭 도구입니다.
- Figma 및 Sketch 디자인에서 프로덕션 준비가 완료된 Blazor 코드, Angular 코드 및 Web Components 코드를 생성하는 로우 코드 도구입니다.
양방향 데이터 바인딩 지원
이 App Builder 릴리스에서는 입력, 확인란, 스위치, 날짜 선택기, 달력, 등급 및 슬라이더 구성 요소에 양방향 데이터 바인딩 지원을 추가했습니다.
양방향 바인딩 지원을 사용하면 속성이 변수에 바인딩될 때 구성 요소 속성을 twoWayBindable로 표시할 수 있습니다. 그러나 양방향 바인딩이란 정확히 무엇입니까?UI와 기본 데이터를 동기화된 상태로 유지한다고 상상해 보십시오. 따라서 데이터를 변경하면 UI가 자동으로 업데이트되고 UI를 변경하면 변수 데이터가 자동으로 업데이트됩니다.
사용자는 이제 다음을 수행할 수 있습니다.
- 입력 콘텐츠를 일부 값으로 설정하고 생성된 코드에서 양방향 데이터 바인딩된 필드로 생성합니다.
- 구성 요소에 해당하는 value/content 속성을 변수에 바인딩합니다.
- 이 바인딩이 양방향 바인딩으로 생성되는지 여부를 제어합니다.
데이터 원본 OpenAPI 스키마 업데이트가 포함된 App Builder 릴리스
App Builder의 데이터 소스 UI는 개발자에게 데이터 소스 엔드포인트 및 스키마의 시각화를 제공합니다. 데이터 소스는 시간이 지남에 따라 발전하고 스키마가 변경되므로 App Builder 데이터 소스 UI도 그에 따라 업데이트되어야 합니다.
이 App Builder 릴리스를 사용하면 이제 OpenAPI 스키마의 최신 버전을 사용하고 차이점이 있는 경우 표시하도록 기존 데이터 원본을 쉽게 업데이트할 수 있습니다.
이 새로운 기능의 본질은 무엇입니까?
- 이 기능을 사용하면 App Builder에서 프런트 엔드를 개발하는 동안 데이터 소스를 백엔드 WebAPI와 동기화할 수 있습니다.
- 데이터 원본을 새로 고치고 데이터 바인딩에 사용한 데이터 스키마 속성이 변경되지 않은 상태로 유지되면 데이터 바인딩은 그대로 유지됩니다.
- 데이터 원본 및 데이터 결합 변경에 사용한 데이터 스키마 속성을 새로 고치면 영향을 받는 데이터 결합 목록이 포함된 알림이 표시되므로 그에 따라 UI 구성요소를 수동으로 업데이트할 수 있습니다.
*향후 자동 백그라운드 새로 고침을 도입할 계획이며, 이는 데이터 원본 Web API URL이 변경되지 않은 경우에 유용합니다. 새로운 데이터 매핑 기능도 사용할 수 있어 바인딩을 보다 편리하게 업데이트할 수 있는 UI를 제공합니다.
트리 그리드 작업
이제 Web API 호출을 사용하여 트리 그리드 구성 요소에서 행을 생성, 업데이트 및 삭제하도록 Data-action을 설정할 수 있습니다. 이를 트리 그리드 편집 작업 단추에 연결하고 실시간 Web API 업데이트를 활용할 수 있습니다. 코드 생성 시 App Builder 사용 가능한 Post/Put/Delete HTTP 메서드를 통해 리소스 만들기, 가져오기, 업데이트 및 삭제에 대한 API 호출을 처리하는 데 필요한 서비스를 만듭니다.
트리 그리드 행 선택 상호 작용
이번 App Builder 릴리스에서는 트리-그리드 구성 요소의 [Row Selection] 이벤트를 기반으로 변수를 업데이트할 수도 있습니다.
다시 말씀드리자면, 작년의 주요 App Builder 릴리스에서는 변수 관리의 컨텍스트에서 중요한 역할을 하는 다양한 구성 요소 이벤트 처리기를 공개했습니다.
주요 이벤트는 다음과 같습니다.
- Selection Changed Event: 콤보 컴포넌트에서 활용됩니다.
- 행 선택 변경 이벤트: 그리드 및 트리 그리드 구성 요소 모두에 사용됩니다.
- 클릭 이벤트: 모든 구성 요소에 사용할 수 있는 이 이벤트는 클릭 동작 시 변수를 설정하는 컨텍스트에서 사용됩니다.
- 특정 구성 요소 이벤트. 예를 들어 Stepper 구성 요소는 다음/이전 단계, 재설정 및 단계로 이동(x) 작업을 노출합니다.
자세한 내용은 이 항목 –App Builder에서 이벤트 및 작업 작업을 확인하십시오.
이 App Builder 릴리스의 새로운 트리 구성 요소 속성도 마찬가지입니다
단일 노드 확장을 위한 Tree 구성 요소 속성을 추가하고 항목 클릭 시 토글을 추가했습니다.
- 단일 노드 확장– 활성화된 경우 한 번에 하나의 트리 노드만 확장됩니다. 두 번째 것을 열려고 하면 전자가 무너집니다.
- Toggle item on click– 확장/축소 아이콘뿐만 아니라 노드를 클릭하면 확장/축소 상태를 전환하는 속성입니다.
다른 개선 사항
- 입력 구성 요소에 대한 검색 스타일 옵션 추가
- Angular 앱은 Angular 17.2.0용 Ignite UI를 사용하여 생성됩니다.
- 웹 구성 요소 앱은 Web Components 4.9.0용 Ignite UI를 사용하여 생성됩니다.
- Blazor 앱은 Blazor 23.2.204용 Ignite UI를 사용하여 생성됩니다.
마무리
결론적으로 App Builder 앱 개발 프로세스의 판도를 바꾸는 역할을 합니다. 클라우드 기반 비주얼 빌더, 로우 코드 기능 및 새로운 기능을 갖춘 이 도구는 모든 조직에 꼭 필요한 도구입니다. 오늘 사용해 보세요! 더 자세한 내용이 필요하시면 다음을 확인해 보시기 바랍니다.
모든 것을 경험하려면 고객 포털을 방문하여 최신 버전을 다운로드하세요. 늘 그렇듯이 우리는 항상 귀하의 피드백을 받고 귀하가 추가하거나 추천하고 싶은 것을 듣게 되어 기쁩니다. 따라서 zkolev@appbuilder.dev로 이메일을 보내 Infragistics를 통해 고객에게 지속적으로 가치를 제공하는 데 도움이 될 수 있는 방법을 알려주십시오.
