앱 구성요소
회사 개요
이 튜토리얼에서는 재사용 가능한 기술 솔루션으로 앱 구성 요소를 만드는 방법을 배웁니다. 시각적 이벤트 핸들러를 신속하게 생성 및 개선하여 중복 작업을 줄이기 위해 구성 요소를 사용하고 구성하는 경험을 얻게 됩니다.
이 튜토리얼을 최대한 활용하려면 짧고 무료인 Vantiq를 완료하는 것이 좋습니다. 개발자 기초 과정 먼저.
1부: 구성요소 생성
1: 소개 튜토리얼 가져오기
사용 하이라이트 선택할 메뉴 수입. 선택 튜토리얼 가져오기 유형으로 선택 입문 튜토리얼 및 클릭 수입.
새로 고침 가져오기가 완료되면.
클릭 com.vantiq.engines.EngineMonitor 프로젝트 콘텐츠 트리의 서비스 또는 다음을 사용하세요. 추가 선택할 메뉴 예배 열어 라. com.vantiq.engines.EngineMonitor 서비스. 자세한 내용이나 방법에 대한 정보는 com.vantiq.engines.EngineMonitor 서비스 작업은 다음을 참조하세요. 입문 튜토리얼.
로 이동 구현 서비스 탭을 클릭하고 공공 영역 인바운드 이벤트 핸들러를 보려면 섹션 헤더를 선택하세요. 센서읽기1 이벤트 핸들러(이벤트를 처리함) 온도이벤트 이벤트 유형). 이 이벤트 핸들러는 온도 이벤트를 수신하고, 필요한 경우 현재 속도 값을 가져온 다음, 이벤트에 대한 경고 메시지를 생성합니다. 이 이벤트 유형 핸들러에는 세 가지 유사한 패턴이 있습니다. 필터 작업(즉, 경고 없음, 비속도과열, 속도과열) 각각 뒤에는 변환 작업이 옵니다(즉, 경고 지우기, 비속도과열 추가, 속도과열 추가).
중복 작업은 구성하기가 지루하고 유지 관리하기가 번거롭습니다. 이 문제를 해결하려면 다양한 온도 및 속도 값을 사용하여 필터링 및 변환을 위한 재사용 가능한 구성 요소를 만듭니다. 그만큼 온도이벤트 이벤트 핸들러는 이 구성요소를 사용하여 수신한 센서 데이터를 기반으로 적절한 엔진 경고 메시지를 생성합니다.
2: 기존 처리기에서 구성 요소 만들기
앱 구성 요소는 처음부터 새로 만들거나 기존 이벤트 핸들러에서 복사할 수 있습니다. 기존 정의를 사용합니다. 온도이벤트 중복된 작업을 복사하고 새 앱 구성요소를 생성하는 이벤트 핸들러.
Shift 키를 누른 상태에서 마우스를 드래그하여 선택하세요. 경고 없음 경고 지우기 작업. 작업을 선택하면 녹색 테두리가 표시됩니다.
구성 요소 저장 창의 오른쪽 상단 모서리에 있는 Enter를 누르세요. 필터 및 진단 앱 구성 요소 이름으로 클릭하고 OK.
이벤트 핸들러에서 선택한 작업의 정확한 복사본을 사용하여 새로운 앱 구성 요소가 생성되었습니다.
3: 구성요소 작업 이름 바꾸기
다음과 같은 타원형 버블이 있다는 점에 주목하세요. 하류 필터 작업 아래에 추가되었습니다. 구성 요소의 작성자로서 귀하는 구성 요소 사용자가 구성 요소 아래에 작업을 연결하는 방법을 결정할 수 있습니다. 구성 요소를 사용하면 그 안에 포함된 모든 기능과 작업에 대한 단일 블랙 박스로 나타납니다. 사용자가 구성 요소의 하위 작업으로 다른 작업을 연결하려면 구성 요소 생성자가 이를 노출해야 합니다. 하류 연결점 구성 요소 내의 하나 이상의 작업에 적용됩니다.
온 클릭 하류 버블링하고 이름을 바꿉니다. 진단. 이 구성 요소를 사용할 때 이 연결 지점을 사용하여 작업이 구성 요소의 하위로 추가되면 사실상 해당 구성 요소의 하위가 됩니다. 진단 일. 이름 바꾸기 경고 없음 할 일 진단 그리고 경고 지우기 할 일 진단 추가.
찜하기 구성 요소.
4: 구성요소 매개변수 노출
구성 요소는 광범위한 문제를 해결하기 위해 구성 및 재사용이 가능한 시각적 이벤트 처리기의 섹션입니다. 구성 요소는 블랙 박스 역할을 하며 단일 작업으로 표시됩니다. 구성 요소의 사용자는 이를 다른 작업처럼 처리하여 원하는 기능을 달성하기 위해 작은 속성 집합을 구성할 수 있습니다.
The 필터 및 진단 구성 요소에는 두 가지 작업이 포함되어 있습니다. 진단 필터 작업과 진단 추가 변환 작업. 다음을 사용하는 이벤트 핸들러 필터 및 진단 해당 작업에 대한 필터링 조건과 변환 속성을 지정해야 합니다. 그만큼 매개변수 노출 구성요소 편집기의 기능을 사용하면 작업 매개변수를 "노출"로 지정할 수 있습니다.
클릭 진단 작업을 클릭한 다음 수정하려면 클릭하세요. 링크. 다음을 클릭하세요. 매개변수 노출 + 오른쪽에 있는 버튼 조건 재산.
구성 속성의 이름을 기본값으로 둡니다. 조건다음을 클릭합니다 OK. 딸깍 하는 소리 OK 다시 한 번 단일 구성 매개변수를 저장합니다. 진단 작업.
클릭 진단 추가 작업을 클릭한 다음 수정하려면 클릭하세요. 링크. 다음을 클릭하세요. 매개변수 노출 + 오른쪽에 있는 버튼 변환 재산. 구성 속성의 이름을 기본값으로 둡니다. 변환다음을 클릭합니다 OK. 딸깍 하는 소리 OK 다시 한 번 단일 구성 매개변수를 저장합니다. 진단 추가 작업.
OK 그리고 찜하기 구성 요소.
2부: FilterAndDiagnose 구성 요소 사용
이제 필터 및 진단 구성 요소를 이벤트 핸들러에 연결할 차례입니다.
1: 반복되는 작업 바꾸기
다음을 사용하여 서비스를 엽니다. 추가 버튼을 클릭하십시오. 서비스 다음을 선택하십시오. com.vantiq.engines.EngineMonitor 다시 한번 확긴한다
온 클릭 구현 탭을 열고 센서읽기1 이벤트 핸들러( 온도이벤트 이벤트 유형) 공공 영역 안내
확장 구성 요소 이벤트 핸들러의 작업 팔레트 섹션. 주의할 점은 필터 및 진단 구성요소가 팔레트에 있습니다. 이제 시각적 이벤트 처리기에서 구성 요소를 사용할 수 있습니다.
삭제 경고 없음 경고 지우기 각 작업을 클릭한 다음 . 창의 도구 모음에 있는 버튼을 클릭하세요.
드래그하세요 필터 및 진단 구성 요소를 선택하고 위에 놓습니다. 센서읽기 일.
구성 요소는 다음과 같은 단일 작업으로 나타납니다. 필터 및 진단. 또한 다운스트림을 확인하세요. 진단 작업은 구성 요소의 연결 지점을 나타내는 구성 요소 아래에 삼각형 노드로 나타납니다.
이름 바꾸기 필터 및 진단 할 일 경고 없음 그런 다음 진단 에 연결된 다운스트림 작업 경고 없음 작업 및 선택 기존 작업 연결. 선택 게시상태 인사말 작업 이름 메뉴를 클릭한 다음 OK.
삭제 비속도과열 비속도과열 추가 작업을 클릭한 다음 . 창의 도구 모음에 있는 버튼을 클릭하세요.
드래그하세요 필터 및 진단 구성 요소를 선택하고 위에 놓습니다. 검색 속도 일.
이름 바꾸기 필터 및 진단 할 일 비속도과열 그런 다음 진단 에 연결된 다운스트림 작업 비속도과열 작업 및 선택 기존 작업 연결. 선택 게시상태 인사말 작업 이름 메뉴를 클릭한 다음 OK.
삭제 속도과열 속도과열 추가 각 작업을 클릭한 다음 . 창의 도구 모음에 있는 버튼을 클릭하세요.
드래그하세요 필터 및 진단 구성 요소를 선택하고 위에 놓습니다. 검색 속도 일.
이름 바꾸기 필터 및 진단 할 일 속도과열 그런 다음 진단 에 연결된 다운스트림 작업 속도과열 작업 및 선택 기존 작업 연결. 선택 게시상태 인사말 작업 이름 메뉴를 클릭한 다음 OK.
찜하기 저장하기 위해 com.vantiq.engines.EngineMonitor 서비스.
이제 중복된 작업을 재사용 가능한 구성 요소로 대체했습니다. 서비스를 저장한 후 오류가 표시된다는 점에 유의하세요. 이는 예상된 사항이며 후속 단계에서 수정될 예정입니다.
2: 새 구성 요소 작업 구성
이제 세 가지 인스턴스가 필터 및 진단 구성 요소는 XNUMX개의 작업을 대체했습니다. 온도이벤트 이벤트 핸들러, 이제 각 구성요소 속성을 구성할 차례입니다.
- 클릭 경고 없음 작업을 클릭한 다음 수정하려면 클릭하세요. 링크. 옆에 있는 링크를 클릭하세요. 조건 재산. 선택하다 비주얼 필터 로 조건 유형 다음을 클릭합니다 시각적 조건 추가 + 버튼. 다음 시각적 조건 매개변수를 입력합니다.속성 이름: 온도
비교기:
필터 표현식: 210
OK. 원본에 관해서는 경고 없음 작업에서 이 가시 필터는 온도 센서 판독값이 210도 미만인지 확인하여 엔진이 과열되지 않았는지 확인합니다.
이제 옆에 있는 링크를 클릭하세요. 변환 재산. 선택하다 시각적 변화 로 변환 유형 다음을 클릭합니다 변환 추가 + 버튼. 다음 시각적 변환 매개변수를 입력합니다.
아웃바운드 속성: 경고 메시지
변환 표현: ""
OK. 원본에 관해서는 경고 없음 작업에서 이 시각적 변환은 새 이벤트 속성을 설정합니다. 경고 메시지, 문자열 값을 가지려면 "" 이는 엔진 대시보드에 표시할 경고가 없음을 의미합니다. 이는 경고 없음 필터 작업을 통해 엔진이 과열되지 않은 것으로 확인되었습니다. 딸깍 하는 소리 OK 구성을 저장합니다.
- 클릭 비속도과열 작업을 클릭한 다음 수정하려면 클릭하세요. 링크. 옆에 있는 링크를 클릭하세요. 조건 재산. 선택하다 비주얼 필터 로 조건 유형 그런 다음 다음 두 개의 시각적 조건 매개변수를 이 순서대로 추가합니다.속성 이름: 속도
비교기:! =
필터 표현식: 없는
속성 이름: 속도
비교기:
필터 표현식: 45
OK. 원본에 관해서는 비속도과열 작업에서 이 시각적 필터는 엔진이 과열되고 속도가 null이 아니고 45 미만인지 확인합니다. 속도 판독값이 아직 나타나지 않은 경우 속도는 null일 수 있습니다.
이제 옆에 있는 링크를 클릭하세요. 변환 재산. 선택하다 시각적 변화 로 변환 유형 다음을 클릭합니다 변환 추가 + 버튼. 다음 시각적 변환 매개변수를 입력합니다.
아웃바운드 속성: 경고 메시지
변환 표현: “엔진이 과열되었습니다. 팬이 제대로 작동하지 않거나 냉각수 누출이 있는지 확인하세요.”
OK. 딸깍 하는 소리 OK 다시 구성을 저장합니다.
- 클릭 속도과열 작업을 클릭한 다음 수정하려면 클릭하세요. 링크. 옆에 있는 링크를 클릭하세요. 조건 재산. 선택하다 비주얼 필터 로 조건 유형 그런 다음 다음 두 개의 시각적 조건 매개변수를 이 순서대로 추가합니다.속성 이름: 속도
비교기:! =
필터 표현식: 없는
속성 이름: 속도
비교기: >=
필터 표현식: 45
OK. 원본에 관해서는 속도과열 작업에서 이 시각적 필터는 엔진이 과열되고 속도가 null이 아니고 45보다 크거나 같은지 확인합니다.
이제 옆에 있는 링크를 클릭하세요. 변환 재산. 선택하다 시각적 변화 로 변환 유형 다음을 클릭합니다 변환 추가 + 버튼. 다음 시각적 변환 매개변수를 입력합니다.
아웃바운드 속성: 경고 메시지
변환 표현: "엔진이 과열되었습니다. 속도를 줄여주세요."
OK. 딸깍 하는 소리 OK 다시 구성을 저장합니다.
찜하기 저장하기 위해 com.vantiq.engines.EngineMonitor 서비스.
3: 구성 요소를 통해 이벤트 실행
이제 구성 요소가 예상대로 작동하는지 테스트할 차례입니다.
가져온 경우 입문 튜토리얼 또는 앱 구성 요소 완료 튜토리얼을 완료하려면 두 소스를 활성화해야 합니다. com.vantiq.engines.SpeedSensor com.vantiq.engines.TemperatureSensor 시뮬레이션된 센서 이벤트의 흐름을 시작합니다.
클릭 활성 자원 제어 센터 (번개) 아이콘을 IDE 탐색 표시줄에 표시하려면 활성 자원 제어 센터 창유리:
활성화 속도센서 온도 센서 활성 슬라이더를 클릭하여 소스를 확인하세요.
클릭 com.vantiq.engines.EngineMonitor 프로젝트 콘텐츠 트리에서 클라이언트를 선택하거나 추가 선택할 메뉴 고객사 열어 라. com.vantiq.engines.EngineMonitor 고객.
구현이 완료되었음에도 불구하고 com.vantiq.engines.EngineMonitor 서비스가 변경되었으나 클라이언트의 데이터 스트림이 아웃바운드 서비스 이벤트 유형을 사용하고 인터페이스가 변경되지 않았기 때문에 클라이언트를 업데이트할 필요가 없었습니다.
맺음말
축하합니다. 첫 번째 앱 구성 요소를 만들었습니다!
이 튜토리얼에서는 다음을 수행합니다.
- 기존 이벤트 핸들러에서 구성요소를 생성했습니다.
- 구성 요소에 구성 가능한 속성을 추가했습니다.
- 이벤트 핸들러에서 동일한 앱 구성요소를 사용하여 중복된 코드를 대체했습니다.
. 다음 튜토리얼, 확장성과 성능을 유지하면서 상태 저장 서비스를 사용하여 엔진 데이터를 저장하고 유지하도록 이 앱 구성 요소를 업데이트합니다.