4. 이벤트 구성 및 연결하기

생성한 서비스를 이벤트로 구성하여 검색버튼에 연결하도록 하겠습니다.

개발하기

서비스로 생성한 API연동을 이벤트로 구성하여 검색버튼에 연결하겠습니다.

이벤트 구성하기

  1. 이벤트를 추가하여 명칭을 "getDistanceTime"로 변경하여 생성합니다.

  1. 이벤트에 서비스를 추가하고 이전챕터에서 생성한 "distancematrix"를 지정합니다. 이때 보내는 카테고리는 입력한 주소가 있는 ‘inputPlace’ 를 입력하고 받은 데이터 카테고리는 ‘searchResult’ 카테고리를 덮어쓰기로 하여 등록해주도록 합니다.

  1. 결과로 받은 searchResult는 searchResult 영역에만 영향을 주게됩니다. searchResult 영역에만 반영해주기 위해 searchResult 영역의 상위 그룹인 Group1를 reload() 시켜주는 스크립트를 추가해야 합니다. 이를 위해 먼저 해당 그룹의 fId를 복사하도록 합니다.

fId는 컴포넌트 생성 시점에 따라 다르게 됩니다. 실습 이미지의 값이 아닌 시나리오에서 복사해서 사용해야합니다. 자세한 설명은 [개발모드]-[컴포넌트]-[컴포넌트 동적 활용(컴포넌트 아이디)] 를 참조해주세요.

  1. 그룹/레이아웃 reload 스크립트를 이벤트 마지막에 추가합니다. 그룹/레이아웃 reload 스크립트는 [함수자동생성]-[기능/함수자동생성]-[UI]-[그룹/레이아웃]-[다시 그리기]를 사용하여 간단하게 추가할 수 있습니다.

이벤트 연결하기

  • "distancematrix" 이벤트를 검색버튼의 클릭 이벤트로 등록해 줍니다.

중간확인

현재까지의 내용을 저장하고 디버거를 열도록 합니다.

디버거를 사용하여 확인해본 결과 의도한 형태로 값이 저장되어지고, 화면에 값을 보여주는것을 확인할 수 있습니다

챕터 마무리

배운 내용

  • 이전 챕터에서 구성한 서비스를 이벤트로 구성하여 사용해보았습니다.

다음 챕터에서는?

  • Flextudio에서 사용할 수 없는 형식의 데이터를 반환받을 때 어떻게 해야하는지에 대해 알아보겠습니다.

Last updated