REACTIVE WEB APP’TE ÜRÜN GALERİSİ EKRANI OLUŞTURULMASI

Yaptığımız site tasarımlarının görsel açıdan güzel olması ve kullanıcılar tarafından rahatlıkla kullanılabilir olması ortaya çıkardığımızın işin kalitesinin en önemli göstergelerinden biridir. Örneğin bir e-ticaret sitesi tasarlandığınızı düşünün. Tasarladığınız sitede, veri tabanında bulunan tüm öğelerin adı, fiyatı, fotoğrafı gibi temel özelliklerini sergilemeniz gerekmektedir. Bunun için “Ürünler” başlığı altında bir ekran oluşturarak, ürünlerin gerekli bilgilerini galeri formatında sergileyebilirsiniz. Nasıl mı?

Reactive Web App’te kolay ve hızlı bir şekilde hayalinizdeki ürün galerisi ekranı oluşturabilmemiz için hızlandırıcı olarak adlandırdığımız hazır arayüzler bulunmaktadır. Bu hızlandırıcıları kullanarak karmaşık ve işlevsel arayüzleri kolaylıkla oluşturarak zamandan tasarruf edebilirsiniz.

İlk adımımız Service Studio’da bulunan Toolbox’da Order Management Products Gallery diye adlandırılmış arayüzü sayfaya eklemek olacaktır. Bunun için Toolbox kısmına Order yazarak aratmanız ve ekranın ortasına eklemeniz gerekmektedir:

Bu adımı tamamladıktan sonra ekranınızda ilgili alan oluşacaktır. Arayüzü hazır bir şekilde kullandığımız için Service Studio otomatik bir şekilde örnek verilerden oluşan bir arayüz oluşturacaktır. Kendi veri tabanınızda bulunan verileri kullanmak için bazı değişiklikler yapmanız gerekmektedir. Bunun için Widget Tree’de bulunan OrderManagmentGallery_List’nin özellikler penceresini açarak Source kısmında bulunan Select Data seçeneğine tıklamanız gerekmektedir:

Bu adımdan sonra bir seçim penceresi açılacaktır. Açılan pencereden kullanmak istediğimiz Entity ve ilgili attribute’ları seçmeniz gerekmektedir (Bu örnek için Item Entity’si kullanılmıştır).  Image attribute’na tıklamadan seçiminizi tamamlayınız:

İşlem tamamlandıktan sonra ekranınız aşağıdaki şekilde görünecektir:

Bir önceki adımda Image özelliğini seçmeme nedenimiz veri cinsinin “text” olmasıdır. Şimdi ise ürünlerin görsellerini sergileyebileceğimiz bir bölüme ihtiyacımız vardır. Bunun için Image widgetini Toolbox’dan sürükleyerek ürünün ismi bulunduğu bölümün üzerine eklemeniz gerekmektedir.

Bu işlemi tamamladıktan sonra sistem bize hata uyarısı verecektir. Bu hatayı gidermek için ilgili bölümde bazı düzeltmeler yapmanız gerekmektedir:

Image bölümünü fotoğrafta gösterildiği gibi düzenledikten sonra, hata uyarısı ortadan kalkacaktır. Gerekli adımları tamamladıktan sonra ekranınızın bu şekilde görünmesi gerekmektedir:

Sitemizi açtığımızda oluşturduğumuz galeri listesinin düzensiz olduğunu görmekteyiz.

Görsellik açısından oluşturduğumuz galeri görüntüsünün daha düzenli olabilmesi için son adım olarak Toolbox kısmından Card Sectioned Widget’i seçerek, oluşturduğunuz galeri listesinin içine eklemeniz gerekmektedir:

Daha sonra ListItem’de bulunan görsel öğesini CardSectioned widgetinin görsel kısmına eklemeniz gerekmektedir:

Bu adımı tamamlamak için, ListItem içinde kalan ifadelerin her birini sırayla CardSectioned widgetinde bulunan ilgili alanlara atamanız gerekmektedir. Bu adımı tamamladıktan sonra boş ListItem’i siliniz. Daha sonra Image ayarlarından Styles Classes kısmını “img-cover” olarak ayarlayınız. Son olarak genişlik kısmını 100%, yükseklik kısmını ise 190 px olacak şeklinde düzenleyiniz.

Bütün adımları doğru bir şekilde tamamladıktan sonra sitenizde bulunan “Ürünler” ekranınız aşağıdaki şekilde görünecektir: