모바일 응용 프로그램에서 Image 구성 요소 워크플로는 웹 응용 프로그램의 워크플로와 약간 다릅니다. 이 문서에서는 모바일 애플리케이션에서 Image 컴포넌트를 사용하는 방법에 대해 자세히 설명합니다. List 및 Grid 구성 요소의 요소와 같은 반복 요소에서 데이터 모델에서 Image 를 로드하는 것은 명확하지 않으며 BP를 사용하여 로드하기 위한 특정 절차가 필요합니다.
반복 요소의 Image 구성 요소 사용( List/Grid )
우리가 플라이트 테이블을 가지고 있고 각 플라이트 객체가 ImageFile 필드 [ file ]로 표현되는 자체 커버를 가지고 있는 예를 봅시다.
항공편 목록이 List 구성 요소로 표시된다고 상상해보십시오. List 구성 요소의 각 요소는 Image 및 관련 비행 정보를 표시하는 몇 가지 기타 구성 요소를 포함하는 Card 구성 요소입니다. UI 디자이너에서는 다음과 같이 보입니다.
먼저 상위 구성 요소(이 경우 List 구성 요소)에 대해 Data Source 를 지정해야 합니다.
데이터베이스에서 Image 구성 요소로 데이터를 업로드하려면 Image 구성 요소에 대한 새 비즈니스 프로세스를 만들어야 합니다.
필요한 BP는 애플리케이션에서 이미지 요소, 즉 onCreate 트리거를 생성하는 것으로 시작됩니다. 먼저 주어진 이미지에 해당하는 데이터 모델의 객체를 받아야 합니다. 이렇게 하려면 부모 요소(이 경우 List )에서 이미 받은 데이터를 사용할 수 있습니다. List 에서 데이터를 가져오기 위해 List Get Data 블록이 사용됩니다.
우리가 구축하고 있는 BP의 논리는 다음과 같습니다. Data 배열 요소( flight 모델 개체) 중 하나가 Record ID 와 동일한 식별자( ID )를 갖고 있으면 필요한 비행 테이블 요소를 찾은 것입니다. 그런 다음 비행 모델 개체에서 이미지 파일 ID 를 가져와 필요한 Widget ID 와 함께 Image 구성 요소에 로드합니다.
Data 배열의 모든 요소를 반복하기 For each loop BP 블록이 사용되고 루프 본문에서 Expand Flight 블록을 사용하여 Data 배열의 각 요소가 확장됩니다. Flight ID = Record ID 인 경우 ImageFile 파일 식별자가 사용되며 Server request GET /_files/:id/download/ 블록을 사용하여 파일 개체가 로드됩니다. 해당 BP의 예는 다음과 같습니다.
다음 단계에서는 Expand file 블록을 사용하여 이미지 파일을 확장하여 바이트 배열을 Image Update Properties 블록의 Data 속성에 대한 입력으로 전달합니다. 시트에 있는 특정 이미지 요소의 Widget ID 를 지정하여 BP 시작 부분에 있는 onCreate 블록의 값을 전달하는 것도 필요합니다. BP의 마지막 부분의 결과는 아래 예와 같습니다.
결국 Break Loop 블록은 배열의 나머지 요소를 헛되이 반복하지 않도록 사용됩니다.
사용자 스마트폰의 파일 시스템에서 이미지 로드
사용자 프로필 아바타를 로드하는 예를 고려하십시오. 웹 인터페이스는 이미지와 BP를 시작하는 버튼으로 구성되며 다음과 같습니다.
그런 다음 해당 BP는 사용자가 Select Files 블록을 사용하여 장치에서 파일을 선택할 수 있도록 합니다. 그리고 파일이 성공적으로 선택되면 index = 0 인 요소가 사용됩니다. 해당 BP는 다음과 같습니다.
Files 배열의 결과 파일 요소는 나중에 사용할 수 있도록 웹 응용 프로그램 서버에 업로드해야 합니다( Server request POST /_files/ ). 요청이 성공하면 Server request POST /_files/ 블록의 출력에 있는 파일 객체가 Expand file 블록의 입력으로 전달되어 Bytes Array 를 가져오고, 이 블록은 Image Update Properties 블록의 입력으로 전달됩니다. Data 속성.
