워크플로

그리고 여기에서 우리는 웹 애플리케이션을 만드는 중요한 순간에 도달했습니다. 결국, 우리가 지금까지 한 모든 것은 단지 그림을 만드는 것이었습니다. 꽤 귀엽겠지만, 아마 거의 쓸모가 없을 것입니다. 이제 주요 작업을 수행해야 합니다. 그것을 되살리고 우리의 행동에 반응을 추가하십시오.

각 구성 요소에는 이 작업에 대한 Workflow 탭이 있습니다. 여기에서 비즈니스 프로세스를 생성하고 시작 조건(트리거)을 정의할 수 있습니다. Calculate 단추에 대해 이러한 비즈니스 프로세스를 만들어 보겠습니다.

트리거

비즈니스 프로세스를 만드는 것은 백엔드를 위한 비즈니스 프로세스를 만들 때 모듈 4에서 이미 본 것과 매우 유사합니다. 공통 캔버스가 있고 거기에 추가된 블록이 있으며 이들 사이의 연결이 작업 순서를 결정합니다. 중요한 차이점은 프런트 엔드 워크플로에는 비즈니스 프로세스를 시작하기 위한 다양한 블록이 있다는 것입니다. 비즈니스 프로세스를 시작하는 트리거입니다. 트리거 자체는 각 구성 요소에 대해 다를 수 있지만(버튼에는 클릭이 있고 테이블에는 데이터 업데이트가 있으며 목록에는 일부 옵션이 선택되어 있음) 일반적인 작업 논리는 어떤 경우에도 동일합니다. 이벤트가 발생하고 이 이벤트는 해당 비즈니스 프로세스를 시작합니다.

일반적인 계획을 결정합시다. 버튼이 클릭되었을 때 우리가 해야 할 일은:

• X 및 Y 값을 찾으십시오. 해당 입력 필드에서 가져옵니다.
• 계산을 위한 끝점을 시작하고 X 및 Y 매개변수를 전달합니다.
• 결과 컨테이너가 보이도록 합니다.
• 필수 Label 필드에 계산 결과를 입력합니다.
  

비즈니스 프로세스 블록

첫 번째 단계는 InputFloat Get Properties 블록이 필요합니다. 사용자가 입력한 것뿐만 아니라 다른 설정(예: 모양 설정 또는 허용된 값 범위)까지 구성 요소의 현재 값을 읽습니다. Value 를 가져와야 합니다. 정확히 여기에는 사용자가 입력한 데이터가 포함되어 있습니다. 입력 필드의 각 값과 이에 대한 두 개의 블록이 필요합니다(X 및 Y용). 그 중 입력에서 Component ID 값을 선택해야 합니다. 생성할 때 이름을 지정하는 것을 잊지 않았다면 필요한 구성 요소를 찾고 선택하는 것이 어렵지 않을 것입니다.

다음 단계는 엔드포인트를 시작하는 것입니다. 프론트엔드와 백엔드 사이의 연결이 이루어지는 곳이며, 계산을 위한 명령은 브라우저에서 서버로 전달된다. 애플리케이션의 각 끝점은 별도의 블록으로 표시됩니다. 필요한 것을 선택하고 연결하기만 하면 됩니다. 이 끝점에는 다섯 번째 모듈 동안 GET 메서드와 module4-basic URL 이 할당되었습니다. 블록 목록에서 이 이름 아래에 있습니다. - Server request GET /module4-basic/

구성 요소와 달리 끝점은 Endpoint ID 를 설정할 필요가 없습니다(기본적으로 올바르게 설정됨). 이전 단계에서 얻은 입력 X 및 Y에만 적용하면 됩니다.

다음 작업은 결과 컨테이너를 표시하는 것입니다. 이렇게 하려면 Container Update Properties 블록을 사용합니다. 블록 자체에서 원하는 컨테이너의 ID 를 선택하고 Visible = true 로 설정합니다.

마지막으로 해야 할 일은 배열에서 웹 애플리케이션의 해당 구성 요소로 5개의 결과 요소를 배포하는 것입니다. 우리는 결과가 항상 엄격하게 정의된 순서로 나와야 한다는 것을 알고 있으므로 원하는 인덱스가 있는 요소를 순차적으로 선택하고 해당 값을 Label 구성 요소에 할당하기만 하면 됩니다. 이를 위해 Array Element 블록(0에서 4까지의 인덱스 포함), toString ( Float 데이터를 String 으로 변환) 및 Label Update Properties 를 사용하여 Label 텍스트를 변경하고 결과를 표시합니다.

구성 요소의 속성 업데이트에는 속성 Update Properties 및 속성 Set Properties 이라는 두 가지 차단 옵션이 있습니다. 차이점은 Rest API의 Patch 및 Put 메서드와 동일합니다. 첫 번째는 명시적으로 지정된 속성만 변경하고 두 번째는 모든 속성을 덮어씁니다.

최종 결과

이것으로 비즈니스 프로세스 생성이 완료됩니다. 최종 결과를 저장, 게시 및 확인할 수 있습니다.

모든 것이 올바르게 완료되면 최종 결과는 다음과 같아야 합니다.