Mobil uygulamalarda Image bileşeni iş akışı, web uygulamalarındaki iş akışından biraz farklıdır. Bu makale, mobil uygulamada Image bileşeninin nasıl kullanılacağını ayrıntılı olarak açıklamaktadır. List ve Grid bileşenlerinin öğeleri gibi yinelenen öğelerde, Veri modelinden Image yüklenmesi açık değildir ve BP kullanılarak yükleme için belirli bir prosedür gerektirir.
Yinelenen öğelerde Image bileşeni kullanımı ( List/Grid )
Uçuş tablomuza sahip olduğumuz ve her uçuş nesnesinin ImageFile alanı [ file ] tarafından temsil edilen kendi kapağına sahip olduğu bir örnek görelim.
Uçuş listesinin List bileşeniyle temsil edildiğini hayal edin. List bileşeninin her bir öğesi - ilgili uçuş bilgilerini görüntülemek için Image ve birkaç diğer bileşeni içeren bir Card bileşenidir. UI tasarımcısında şu şekilde görünür:
Her şeyden önce, ana bileşen için Data Source belirtilmelidir (bu durumda List bileşeni).
Veri tabanından Image bileşenine veri yüklemek için, Image bileşeni için yeni bir iş süreci oluşturmamız gerekiyor.
Gerekli BP, uygulamada bir görüntü öğesinin, yani onCreate tetikleyicisinin oluşturulmasıyla başlar. Her şeyden önce, verilen görüntüye karşılık gelen veri modelinin nesnesini almak gerekir. Bunu yapmak için, ana öğe tarafından önceden alınmış olan verileri kullanabilirsiniz ( Bu durumda List ). List'ten veri almak için List List Get Data bloğu kullanılır.
Oluşturmakta olduğumuz BP'nin mantığı şu şekildedir: Data dizisi elemanlarından ( flight modeli nesnesi) biri, Record ID eşit bir tanımlayıcıya ( ID ) sahipse, ihtiyacımız olan uçuş tablosu öğesini bulduk. Ardından, görüntü dosyası ID , uçuş modeli nesnesinden alınır ve gerekli Widget ID ile Görüntü bileşenine yüklenir.
Data dizisinin tüm öğeleri üzerinde yineleme yapmak için, For each loop BP bloğu kullanılır ve döngünün gövdesinde, Data dizisinin her bir öğesi Expand Flight bloğu kullanılarak genişletilir. Flight ID = Record ID ise, ImageFile dosya tanımlayıcısı alınır ve dosya nesnesi, Server request GET /_files/:id/download/ bloğu kullanılarak yüklenir. Karşılık gelen BP örneği aşağıdaki gibidir.
Sonraki adımda, bayt dizisini Image Update Properties bloğunun Data özelliğine girdi olarak geçirmek için Expand file bloğu kullanılarak görüntü dosyası genişletilir. Sayfadaki belirli bir görüntü öğesinin Widget ID belirtmek ve BP'nin başlangıcında onCreate bloğundan değeri iletmek de gereklidir. BP'nin son bölümünün sonucu aşağıdaki örnekte gösterilmiştir:
Sonunda, Break Loop bloğu, dizinin kalan öğelerini boşuna yinelememek için kullanılır.
Kullanıcının akıllı telefonunun dosya sisteminden bir görüntü yükleme
Bir kullanıcı profili avatarı yükleme örneğini düşünün. Web arayüzü, bir görüntü ve BP'yi başlatan bir düğmeden oluşur ve şöyle görünür:
Ardından ilgili BP, Select Files bloğunu kullanarak kullanıcının cihazından dosyaları seçmesine izin verir. Ve dosyalar başarılı bir şekilde seçildiyse, index = 0 olan eleman alınır. Karşılık gelen BP şöyle görünür:
Files dizisinin sonuçtaki dosya öğesi, daha fazla kullanım için web uygulama sunucusuna yüklenmelidir ( Server request POST /_files/ ). İstek başarılı olursa, Server request POST /_files/ bloğunun çıkışındaki dosya nesnesi, bir Bytes Array almak için Expand file bloğunun girişine iletilir, bu da içinde Image Update Properties bloğunun girişine iletilir. Data özelliği.
