SIDEBAR UI ŞABLONU KULLANIMI

OutSystems’ta ara yüz tasarlarken kullanmamız için önceden hazırlanmış bazı UI şablonları tanımlı olarak gelir. Bu şablonlar kullanıcılara verilerin gösterilmesi ve kullanıcıların etkileşimlerini standart bir hale getirmemize ve kullanışlı ve kullanıcı dostu bir sayfa tasarlamamıza yardımcı olurlar. Bunlardan birsi olan Sidebar UI şablonunu sayfayı terk etmek zorunda kalmadan, kolayca erişilebilecek bir alanda ek bilgiler sunmamıza olanak sağlar ve ana ekrandan herhangi bir yeri işgal etmez. Mobil ve Web ara yüzlerinde sıkça kullanılan bir özelliktir.

Sidebar UI Şablonunu kullanabilmek için önce toolbox’dan sidebar elementini buluyoruz.

Bu elementi siderbar eklemek istediğimiz sayfanın içerisine sürüklememiz gerekiyor. Sidebar elementinin en üstüne bilgi eklemek için bir Header Content kısmı ve diğer eklemek istediğimiz şeyler için Content alanı bulunuyor.

Sidebar Eklentisinin özelliklerine baktığımız zaman, İsmini belirleyeceğimiz bir input değişkeni bulunuyor. Bunu Sidebarı açma ve kapama işlemleri için doldurmamız gerekiyor. StartsOpen inputu True veya False olarak doldurulabiliyor ve sayfa yüklendiğince açık veya kapalı olacağını burada belirtiyoruz. HasOverlay Sidebarın arka tarafına yarı opak bir kaplama getiriyor ve true veya false olarak belirterek bunu açıp kapatabiliyoruz. Width seçeneği Sidebarın genişliğini belirtiyor. Bu seçeneğe css’de kullandığımız genişlik parametrelerini girebiliyoruz (Örnek: “60px”, “60%”, …) ExtendedClass ile tanımlanan oluşturduğunuz veya OutSystems içerisinde olan still classlarını Sidebara tanımlayabilirsiniz. Events kısmında tanımlı olan OnToggle eventine Handler bir action tanımlayarak, sidebar açılıp kapandığında çalışacak bir action ekleyebilirsiniz.

Direction, sidebarın hangi yönde açılacağını belirtiyor ve bize sağ ve sol olmak üzere iki adet seçenek sunuluyor. Bu seçeneği doldurmamanız durumunda normal şartlarda sağ taraftan açılacaktır.

Sidebarı açıp kapatabilmek için OutSystems UI içerisinde hazırda gelen iki adet client action bulunuyor. Bunları kullanarak açma ve kapatma işlemlerini gerçekleştirebiliriz.

Bunları kullanmak için isterseniz ayrı ayrı client actionlar oluşturabilirsiniz, isterseniz de tek bir action içerisinde birleştirebilirsiniz. Bu daha çok nasıl bir alanda kullanacağına bağlı.

Bu actionları ekledikten sonra bizden WidgetId girmemizi bekleyecektir, buraya açmak ve/veya kapatmak istediğimiz Sidebara verdiğimiz Name altındaki Idyi girmemiz gerekiyor.

Bunları tek bir client actionda toparlayabilmek için sidebarın açık veya kapalı olduğunu anlayabileceğimiz bir local değişken oluşturuyoruz. Bunu StartsOpen kısmına tanımlayarak başlangıç durumunu da belirliyoruz.

Daha sonra Client Action içerisinde açık olup olmadığını kontrol ediyoruz açık ise kapatma, kapalı ise açma actionını çağırıyoruz. Son olarak da tanımladığımız değişkeni tam tersi hale getiriyoruz.

Son olarak sistemi test ederek düzgün çalışıp çalışmadığını kontrol edebiliriz. Bu UI Şablonunu kullanarak yapabilecekleriniz artık sizin hayal gücünüze kalıyor.