위젯을 구성하는 방법
  • 21 Oct 2024
  • 2 읽을 분
  • 기여자

위젯을 구성하는 방법


기사 요약

개요

애플리케이션 내에서 위젯이라고 부르는 모든 요소는 원하는 형태와 기능에 가장 적합하도록 구성할 수 있습니다.

위젯마다 서로 다른 구성 옵션을 지원합니다. 이러한 설정은 위젯의 다양한 속성에 영향을 줄 수 있습니다. 콘텐츠/데이터 매핑 - 예: 버튼에 표시할 텍스트, 표의 어떤 열을 표시할 것인가? - 예: 입력 값을 어디에 저장할 것인가, 어떤 표를 표시할 것인가?- 스타일링 - 예: 버튼의 색상을 어떤 색으로 할 것인가, 텍스트 위젯을 굵게 또는 이탤릭체로 설정할 것인가?- 트리거 - 예: 사용자가 [Enter]를 클릭하면 어떻게 될 것인가, 사용자가 행을 선택하면 어떻게 될 것인가?- 트리거 - 예: 사용자가 행을 선택할 때 어떤 일이 일어날 것인가?

위젯을 구성하는 방법

위젯을 편집하려면 위젯을 선택해야 합니다. 1. 구성하려는 위젯을 선택합니다.2. 선택하면 해당 위젯에 대한 컨텍스트 창이 표시됩니다.Context Pane

콘텐츠 - 데이터 매핑

위젯에 표시되는 콘텐츠는 위젯마다 다르지만 매핑하는 프로세스는 다르지 않습니다. "데이터 소스" 위젯 설정은 위젯 콘텐츠의 소스를 정의합니다. 위젯을 처음 추가하면 해당 데이터 소스는 매핑되지 않습니다.

Datasource mapping.png

데이터 소스 유형은 위젯이 매핑되는 광범위한 소스 유형입니다. 예를 들어 변수, 테이블 레코드 필드, 머신 속성 등이 있습니다.

데이터소스는 위젯이 매핑되는 해당 유형 내의 특정 속성입니다.

:::(Info) (참고) 입력 모서리에 경고 아이콘이 표시되어 데이터 소스가 선택되지 않았음을 나타냅니다:

데이터 매핑

입력의 경우 데이터소스는 사용자 입력이 저장되는 위치를 나타내며, 다른 모든 위젯의 경우 데이터소스는 위젯이 표시하는 데이터의 출처를 나타냅니다.

많은 위젯이 데이터에 연결되어 있습니다. 위젯 콘텐츠는 테이블 레코드나 변수와 같은 동적 데이터에 의해 구동될 수 있습니다. 입력 위젯은 변수나 테이블 레코드 필드에 데이터를 채우는 데에도 사용할 수 있습니다.

입력 위젯은 데이터 소스와 함께 읽기/쓰기가 가능하며, 입력을 변경하면 데이터 소스의 값이 변경됩니다. 대부분의 위젯은 읽기 전용으로, 동적 데이터에 의해 구동될 수 있지만 데이터 소스 값에 직접적인 영향을 줄 수는 없습니다.

스타일링

위젯을 Tulip에 업로드한 후 화면 오른쪽의 컨텍스트 창에서 다음과 같은 위젯의 속성을 편집할 수 있습니다. 스타일 지정 옵션은 위젯에 따라 다르지만 대부분의 위젯에는 아래 나열된 옵션이 있습니다.

  • 글꼴 크기
  • 글꼴 색상
  • 글꼴 스타일
  • 버튼 텍스트 정렬
  • 버튼 색상
  • 크기
  • 회전
  • 그림자
  • 테두리 반경
  • 깜박임

데이터 기반 위젯

많은 위젯은 동적 데이터로 채울 수 있습니다. 대부분의 동적 위젯에서 데이터 소스 설정은 위젯 상태를 구동하는 데이터를 나타냅니다.image.png

Color모든색상 속성은 정적으로 설정하거나 변수를 기반으로 동적으로 설정할 수 있습니다.

변수변수위젯의 콘텐츠는 색상을 포함한 모든 앱 변수의 값에 연결할 수 있습니다. 이 위젯은 소스 변수가 변경되면 동적으로 변경됩니다.

테이블레코드테이블 레코드 위젯은 전체 레코드 또는 개별 테이블 레코드 필드의 현재 값을 반영합니다.

대화형테이블대화형테이블 위젯은 테이블의 현재 상태를 표시합니다.

트리거

많은 위젯이 앱 로직을 트리거할 수 있습니다. 위젯마다 트리거 실행을 유도하는 동작이 다릅니다.

image.png

입력 위젯모든입력 위젯의 경우 입력이 변경되면 트리거가 실행됩니다.:::(Info) (참고)숫자 및 텍스트 입력 위젯의 경우 사용자가 [Enter] :::인터랙티브 테이블사용자가 행을선택하면트리거가 실행됩니다. 또한 해당 행은 연결된 레코드 위젯 설정에 설정된 테이블 레코드 플레이스홀더에 로드됩니다. 대화형 표 위젯에 대해 자세히 알아보려면 여기를 참조하세요.

:::(Warning) (경고) 대화형 테이블 위젯의 행을 선택할 수 있으려면 연결된 레코드 필드가 테이블 레코드 플레이스홀더에 연결되어 있어야 합니다:::

추가 읽기


이 문서가 도움이 되었습니까?