Trong các ứng dụng di động, quy trình làm việc của Thành phần Image hơi khác một chút so với quy trình làm việc trong các ứng dụng web. Bài viết này mô tả chi tiết cách sử dụng thành phần Image trong ứng dụng di động. Trong các phần tử lặp lại, chẳng hạn như các phần tử của các thành phần List và Grid , việc tải Image từ mô hình dữ liệu không rõ ràng và yêu cầu một quy trình nhất định để tải bằng BP.
Sử dụng thành phần Image trong các phần tử lặp lại ( List/Grid )
Hãy xem một ví dụ trong đó chúng ta có bảng chuyến bay và mỗi đối tượng chuyến bay có bìa riêng được đại diện bởi trường ImageFile [ file ].
Hãy tưởng tượng rằng danh sách các chuyến bay được biểu diễn bằng thành phần List . Mỗi thành phần của thành phần List - là thành phần Card chứa Image và một vài thành phần khác để hiển thị thông tin chuyến bay liên quan. Trong trình thiết kế giao diện người dùng, nó trông giống như sau:
Trước hết, Data Source phải được chỉ định cho thành phần chính ( List thành phần trong trường hợp này).
Để tải dữ liệu từ cơ sở dữ liệu lên thành phần Image , chúng ta cần tạo một quy trình kinh doanh mới cho thành phần Image .
BP bắt buộc bắt đầu bằng việc tạo một phần tử hình ảnh trong ứng dụng, cụ thể là trình kích hoạt onCreate . Trước hết, cần nhận đối tượng của mô hình dữ liệu tương ứng với hình ảnh đã cho. Để làm điều này, bạn có thể sử dụng dữ liệu mà phần tử cha đã nhận được ( List trong trường hợp này). Để lấy dữ liệu từ List , khối List Get Data được sử dụng.
Logic của BP mà chúng ta đang xây dựng như sau: nếu một trong các phần tử của mảng Data ( đối tượng mô hình flight ) có mã định danh ( ID ) bằng Record ID , thì chúng ta đã tìm thấy phần tử bảng chuyến bay mà mình cần. Sau đó, ID tệp hình ảnh được lấy từ đối tượng mô hình chuyến bay và được tải vào thành phần Hình ảnh với Widget ID được yêu cầu.
Để lặp qua tất cả các phần tử của mảng Data , khối For each loop BP được sử dụng và trong phần thân của vòng lặp, mỗi phần tử của mảng Data được mở rộng bằng cách sử dụng khối Expand Flight . Nếu Flight ID = Record ID , thì mã định danh tệp ImageFile được lấy và đối tượng tệp được tải bằng Server request GET /_files/:id/download/ block. Ví dụ về BP tương ứng như sau.
Trong bước tiếp theo, tệp hình ảnh được mở rộng bằng cách sử dụng khối Expand file để chuyển mảng byte làm đầu vào cho thuộc tính Data của khối Image Update Properties . Cũng cần chỉ định Widget ID của một thành phần hình ảnh cụ thể trong trang tính, chuyển cho nó giá trị từ khối onCreate ở đầu BP. Kết quả của phần cuối cùng của BP được hiển thị trong ví dụ dưới đây:
Cuối cùng, khối Break Loop được sử dụng để không lặp lại các phần tử còn lại của mảng một cách vô ích.
Đang tải hình ảnh từ hệ thống tệp trên điện thoại thông minh của người dùng
Hãy xem xét một ví dụ về tải hình đại diện hồ sơ người dùng. Giao diện web bao gồm một hình ảnh và một nút khởi chạy BP, trông giống như sau:
Sau đó, BP có liên quan cho phép người dùng chọn các tệp từ thiết bị của mình bằng cách sử dụng khối Select Files . Và nếu các tệp được chọn thành công, phần tử có index = 0 sẽ được lấy. BP tương ứng có dạng:
Phần tử tệp kết quả của mảng Files phải được tải lên máy chủ ứng dụng web để sử dụng tiếp ( Server request POST /_files/ ). Nếu yêu cầu thành công, đối tượng tệp ở đầu ra của khối Server request POST /_files/ được chuyển đến đầu vào của khối Expand file để nhận Bytes Array , được chuyển đến đầu vào của khối Image Update Properties trong thuộc tính Data .
