Dalam aplikasi seluler, alur kerja komponen Image sedikit berbeda dari alur kerja di aplikasi web. Artikel ini menjelaskan secara detail cara menggunakan komponen Image di aplikasi seluler. Dalam elemen berulang, seperti elemen List dan komponen Grid , memuat Image dari model data tidak ambigu dan memerlukan prosedur tertentu untuk memuat menggunakan BP.
Penggunaan komponen Image dalam elemen berulang ( List/Grid )
Mari kita lihat contoh di mana kita memiliki tabel penerbangan dan setiap objek penerbangan memiliki penutupnya sendiri yang diwakili oleh bidang ImageFile [ file ].
Bayangkan bahwa daftar penerbangan diwakili dengan komponen List . Setiap elemen dari komponen List - adalah komponen Card yang berisi Image dan beberapa komponen lain untuk menampilkan informasi penerbangan yang relevan. Di desainer UI tampilannya seperti berikut:
Pertama-tama, Data Source harus ditentukan untuk komponen induk ( Komponen List dalam kasus ini).
Untuk mengupload data dari database ke komponen Image , kita perlu membuat proses bisnis baru untuk komponen Image .
BP yang diperlukan dimulai dengan pembuatan elemen gambar dalam aplikasi, yaitu pemicu onCreate . Pertama-tama, perlu untuk menerima objek model data yang sesuai dengan gambar yang diberikan. Untuk melakukan ini, Anda dapat menggunakan data yang sudah diterima oleh elemen induk ( List dalam hal ini). Untuk mendapatkan data dari List , blok List Get Data digunakan.
Logika BP yang kita bangun adalah sebagai berikut: jika salah satu elemen array Data ( objek model flight ) memiliki pengenal ( ID ) yang sama dengan Record ID , maka kita telah menemukan elemen tabel penerbangan yang kita butuhkan. Kemudian, ID file gambar diambil dari objek model penerbangan dan dimuat ke dalam komponen Gambar dengan Widget ID yang diperlukan.
Untuk mengulangi semua elemen larik Data , blok For each loop BP digunakan, dan, di badan perulangan, setiap elemen larik Data diperluas menggunakan blok Expand Flight . Jika Flight ID = Record ID , maka pengidentifikasi file ImageFile diambil dan objek file dimuat menggunakan Server request GET /_files/:id/download/ block. Contoh BP yang sesuai sebagai berikut.
Pada langkah berikutnya, file gambar diperluas menggunakan blok Expand file untuk meneruskan array byte sebagai input ke properti Data blok Image Update Properties . Anda juga perlu menentukan Widget ID dari elemen gambar tertentu di lembar, meneruskannya nilai dari blok onCreate di awal BP. Hasil bagian terakhir dari BP ditunjukkan pada contoh di bawah ini:
Pada akhirnya blok Break Loop digunakan agar tidak mengulangi elemen array yang tersisa dengan sia-sia.
Memuat gambar dari sistem file ponsel cerdas pengguna
Pertimbangkan contoh memuat avatar profil pengguna. Antarmuka web terdiri dari gambar dan tombol yang meluncurkan BP, dan terlihat seperti ini:
Kemudian, BP yang relevan memungkinkan pengguna untuk memilih file dari perangkatnya dengan menggunakan blok Select Files . Dan jika file berhasil dipilih, elemen dengan index = 0 diambil. BP yang sesuai terlihat seperti:
Elemen file yang dihasilkan dari larik Files harus diunggah ke server aplikasi web untuk penggunaan lebih lanjut ( Server request POST /_files/ ). Jika permintaan berhasil, objek file pada output dari Server request POST /_files/ blok diteruskan ke input dari blok Expand file untuk mendapatkan Bytes Array , yang diteruskan ke input dari blok Image Update Properties di properti Data .
