BLOCKLAR NEDİR VE YENİ BİR BLOCK NASIL OLUŞTURULUR?

Blocklar bir screen’nin veya başka bir blockun bir parçası olarak oluşturulmaktadır. Bu kullanıcı arabirimi bileşeni, UI’ları, Widgetleri, desenleri ve diğer blockları içerisinde tutabilen bir yapıya sahiptirler. En büyük avantajları ise Screenlerden farklı olarak yeniden kullanılabilir olmalarıdır. Blocklar sayesinde kullanıcı arayüzünün bir kısmına tek bir yerde sahip olmak mümkündür. Bu özelliğinden dolayı burada yapılan tüm değişiklikler, ilgili blocku kullanan tüm screenlerde otomatik olarak güncellenebilmekte ve görülebilmektedir.

Blockların genel özellikleri aşağıdaki şekildedir:

• Blocklar da Screenler gibi tasarlanmaktadır. Bu birleşen, Screenlerde olduğu gibi belirli elemanlara sahiptirler. Ayrıca, blockların kendilerine özel elemanları da mevcuttur.

1. Input Parameters
2. Local Variables
3. Screen Actions
4. Placeholders (Blocklara özeldir ve sadece Blocklar için kullanılmaktadır.)
5. Events (Blocklara özeldir.)

• Blocklar yeniden kullanılabilir bir yapıya sahiptirler.
• Blocklar her uygulamada farklılık gösterebilmektedir. Bundan dolayı Reactive Web Blocks, Reactive Web App ve Mobile Applerde, Traditional Web Blocks ise Traditional Web App’lerde yeniden kullanabilmektedir. Diğer uygulamalarda Blockların kullanımını sağlamamız için bu birleşenleri “public” yapmamız gerekmektedir.
• Blockların kullanıldığı alan Parent olarak isimlendirilmektedir. Her bir Block birleşeninin Temeli (Parent) bir Screen veya farklı bir Block olabilmektedir.
• Her bir Block kendine özel bir yapıya sahip olduğu için Temel (Parent) bileşenin elemanlarını (Inputs, Local variables ve s.) direkt olarak kullanamaktadır. Bu durum Temel (Parent) bileşeni içinde geçerlidir. Temel (Parent) bileşenler de aynı şekilde Blockları ve onların mantığını kullanamamaktadırlar.

Blocklar kendi içinde tekrarlamazlar. Fakat aynı Block bileşeni aynı Screen veya farklı Block içinde birden fazla kullanılabilmektedir. Örneğin:

(İşaretlenmiş alanlarda aynı block yapısı kullanılmıştır.)

Tasarımlarımızda daim kullanabileceğimiz Block oluşuturmak için takip etmemiz gereken belirli adımlar mevcuttur. İlgili adımlar, Block bileşeninin Reactive Web App’da oluşturmamıza yardımcı olacaktır.

Öncelikli belirli ürünlerden oluşan ve “Products” diye adlandırılan bir Screen’e sahip olduğumuzu varsayalım. Oluşturacağımız Block birleşeni bu Screende kullanılacaktır:

Block birleşenini oluşturmak için Main Flow’a sağ tıklayarak açılan ekranda “Add Block” seçeneğine tıklamanız gerekmektedir:

Ürün bilgilerini detaylandıracağımız bu Blockta ürünlerin isimlerinin, fiyatlarının ve açıklamalarının göstermek için Input parametleri kullanılacaktır. Bundan dolayı “Name”, “Price” ve “Description” olarak adlandıracağımız 3 Input parametresi oluşturunuz. Oluşturulan bu Input parametleri aracılığıyla Block ekranından Parent diye adlandırılanan ekran arasında bilgi alışverişi sağlamanıza yardımcı olacaktır:

Bu adımımızda ise Block ekranınızın düzenli ve detaylı görünmesini sağlayabilmeniz için birkaç ekleme yapmanız gerekmektedir. Öncelikle ana ekrana herbir Input paratmetresinin Container widget’lerini içinde bulundurması için Container widget yerleştirin. Bu makalede her bir Container widgeti için özel stiller kullanılmıştır:

Temel Container için “padding-m card-background-natural”

Product Name Container için “heading6”

Product Description Container için “heading8”

Product Price Container için “padding-top-s font size-xs text-neutral-6”

Bu adımı tamamladıktan sonra oluşturduğunuz her bir Input Parametreleri ilgili olduğu Container widget’inin içine sürükleyip bırakınız:

Her bir Container widget için Expression kısmı oluşacaktır. Oluşan Expression kısmını aşağıda görsellerde olduğu gibi sırasıyla düzenleyiniz:

Adımları doğru bir şekilde tamamladıktan sonra Block Ekranınız aşağıdaki görselde olduğu gibi görünecektir:

Ürünlerin görsellerinin sergileyebilmemiz için bir “Placeholder” widget’ine ihtiyacımız vardır. Bu adıma geçmeden önce ekranımızın daha düzenli görünmesi için aşağıdaki adımları takip etmeniz gerekmektedir:

1. İlgili Container widget’leri seçerek birlikte Container içine kapatınız.

2. “Placeholder” widget’ini yerleştirmek için boş bir Container ekleyin ve boyutunu küçültünüz.

3. Ana Container (ürün detay container’lerini içinde bulunduran container) boytununu küçültünüz:

Yukardaki adımları tamamladıktan sonra “Placeholder” widget’ini boş container içine sürükleyerek bırakınız. Daha sonra “Placeholder” ismini “Picture” olarak değiştiriniz:

Belirtilen adımları tamamladıktan sonra, İlgili Screen’de kullanılmak üzere Block birleşenini tamamlamış olacaksınız. Block birleşeninin tamamlanmış aşağıdaki gibi olacaktır:

Oluşturduğunuz Block’u Screen’de kullanmanız için öncelikle Screen’de bulunan ListItem siliniz. Daha sonra Block birleşenini kullanacağınız Screen sayfanıza sürükleyip bırakınız:

Bu adımı tamamladıktan sonra hata uyarısı ile karşılaşacaksınız. Bu hatanın kalkması için kutucuklara ilgili Entity ataması yapmanız gerekmektedir: