Bu öğretici, web uygulamalarında Image bileşeni kullanımını açıklar.
Look & Feel
- Upload - düğmeye basarak ve dosya sisteminden bir görüntü seçerek bir görüntüyü önceden tanımlamak mümkündür;
- Image alt [ string ] - alt etiketleri ve alt açıklamaları olarak da adlandırılır, alt metin, resim kullanıcının ekranına yüklenemezse, web sayfasındaki bir resmin yerine görünen yazılı kopyadır. Bu metin, ekran okuma araçlarının görselleri görme engelli okuyuculara tanımlamasına yardımcı olur ve arama motorlarının web sitenizi daha iyi taramasını ve sıralamasını sağlar;
- Width [ string ] - varsayılan olarak görüntü genişliği;
- Height [ string ] - varsayılan olarak görüntü yüksekliği;
- Visible [ boolean ] - görüntünün görünür olup olmadığını tanımlar;
- Name [ string ] - bileşenin adı;
İlgili iş süreçleri
HTML'deki resim, resim nesnesinin kendisine bir referanstır. Bu nedenle, Image her zaman bağlantılarla çalışır ve görüntü verilerini kullanmak için ona bir bağlantı almanız gerekir.
Aşağıdaki BPs , web uygulamalarının kullanımı için önceden oluşturulmuştur:
- Image Get Properties - görüntü özelliklerini alır:
- Component ID [ string ] - bileşenin tanımlayıcısı;
- Width [ string ] - görüntü genişliği;
- Height [ string ] - görüntü yüksekliği;
- Image URL [ string ] - resim URL adresi;
- Araç Tooltip [ string ] - fareyle üzerine gelindiğinde gösterilecek araç ipucu dizesi;
- Visible [ boolean ] - görüntünün görünür olup olmadığını tanımlar;
- Loading [ boolean ] - true ise görüntüyü “ yükleniyor ” durumuna ayarlar;
- Image Set Properties - seçilen görüntünün tüm özelliklerini sıfırlar ve bunun yerine verilenleri ayarlar:
- Component ID [ string ] - bileşenin tanımlayıcısı;
- Width [ string ] - görüntü genişliği;
- Height [ string ] - görüntü yüksekliği;
- Image URL [ string ] - resim URL adresi;;
- Araç Tooltip [ string ] - fareyle üzerine gelindiğinde gösterilecek araç ipucu dizesi;
- Visible [ boolean ] - görüntünün görünür olup olmadığını tanımlar;
- Loading [ boolean ] - true ise görüntüyü “ yükleniyor ” durumuna ayarlar;
- Image Update Properties - görüntü özelliklerini günceller:
- Component ID [ string ] - bileşenin tanımlayıcısı;
- Width [ string ] - görüntü genişliği;
- Height [ string ] - görüntü yüksekliği;
- Image URL [ string ] - resim URL adresi;
- Araç Tooltip [ string ] - fareyle üzerine gelindiğinde gösterilecek araç ipucu dizesi;
- Visible [ boolean ] - görüntünün görünür olup olmadığını tanımlar;
- Loading [ boolean ] - true ise görüntüyü “ yükleniyor ” durumuna ayarlar;
kullanım örneği
Bir kullanıcı profili avatarı yükleme örneğini düşünün. Web arayüzü, bir görüntü ve BP'yi tetikleyen bir düğmeden oluşur ve şöyle görünür:
BP, onClick tetikleyicisinden başlar. Dosyaları kullanıcının aygıt dosya sisteminden seçmek için Dosyaları Select Files bloğu kullanılır ( Max files = 1 , File types = Image ). Dosya başarılı bir şekilde seçilirse, index=0 olan dizi elemanı seçilecektir.
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, ID almak için Expand file bloğunun girişine iletilir.
URL'yi almak için dosya ID almanız ve değerini bir dizeye ( To String ) dönüştürmeniz gerekir. Göreli dosya yolu /api/_files/<ID>/download/ olacaktır. Bu nedenle, bir resmi yüklemek için dosya yolunun, Image Update Properties bloğunun Image URL özelliğine geçirilmesi gerekir.
Yayınlanan uygulama aşağıdaki örnektedir
