OutSystems UI’ın Kişiselleştirilmesi

OutSystems’ta yeni bir proje oluşturduğumuz zaman bizim için Outsystems UI’ın dahil olduğu bir uygulama oluşturur. Burada OutSystems’ın verdiği özellikleri kullanarak güzel bir UI ve UX’e sahip sayfalar oluşturmamız mümkündür. Fakat bazı durumlarda buradaki renklerin, tasarımların daha fazlasına ihtiyacımız olabilir. Bu durumda OutSystems’ın bize sunduğu özellikleri kullanarak hayalimizdeki sayfayı tasarlayabiliriz.

Bu özelliklerden ilki ve en kolayı, UI Tema Editörüdür. Bu editör, OutSystems UI’ının görünümünü değiştirmek için kullanabileceğiniz bir aracıdır. UI Tema Editorü, renkler, fontlar, görüntüler ve daha pek çok şeyi düzenlemek için kullanılabilir. Buraya erişmek için, herhangi bir sayfadaki sol üst kısımda bulunan “Theme Editor…” butonuna tıklıyoruz.

Bu butona bastıktan sonra karşınıza bazı ayarlar yapabileceğiniz bir ekran çıkacaktır. Burada En üstte Tema Renkleri bölümünden web sayfasının renklerini kolayca değiştirebiliriz. Typography bölümünden sayfanın yazı fontunu ve normal şartlar altındaki yazı karakteri boyutunu değiştirebiliriz.

Structure altındaki Spacing kısmından elementler arasındaki boşluğun büyüklüğünü değiştirebiliriz. Header size bölümünden headerın yüksekliğini arttırabilir veya azaltabilirsiniz. Border seçeneği ile sayfadaki elementlerin köşelerinin geçişlerinin nasıl olacağını değiştirebilirsiniz. Shadow seçeneğini açar iseniz sayfadaki elementlerin arkalarına gölge efekti ekleyecektir. Login ve splash background ile giriş sayfasındaki arkaplanı düzenleyebilirsiniz.

Bunların da yetersiz kalması durumunda bazı elementlerin stillerini düzenleyebiliriz. Burada tanımlanmış olan classları bu elemente tanımlayabilir veya OutSystems’ın izin verdiği özellikleri kolayca düzenleyebiliriz. Bu sekmede OutSystems bize css kodu yazmamıza da izin verir. Fakat yazdığımız css kodu sadece bu elementi etkileyecektir.

Bu css kodlarını başka bir elementte kullanmak istiyorsak class tanımlamalıyız bunua css editörü kullanarak yapabiliriz. CSS editör sayfa tasarımını özelleştirebileceğiniz diğer bir özelliktir. Burayı tema editörüne benzer şekilde yukarıda bulunan, Thema Editor butonunun yanında bulunan CSS butonuna basarak açabiliriz.

Buraya ulaşmanın bir diğer yolu da Interface altındaki Themes klasörünün içerisindeki CSS dosyasını açmak. Bu klasör ile isterseniz yeni bir CSS dosyası oluşturabilirsiniz.

CSS Editörü açtığımızda Bazı sekmeler karşımıza çıkacaktır. Bunlardan son ikisi Theme Editorde yaptığımız değişiklikler ve OutSystems UI’ın bulunduğu CSS dosyalarıdır. Bunlar dışında kendi eklediğimiz CSS dosyaları ve eğer bir ekranda açmış isek o ekrana ait CSS kodlarını yazacağımız editör açılır. Bir ekrana tanımladığımız css kodları sadece o ekranda geçerli olurlar.

Eğer bunlarda yetersiz kalıyor ise OutSystem’ın bizim için verdiği widgetlar yerine kendi kişiselleştirilmiş widgetlarınızı oluşturabilirsiniz. Custom widget’lar, UI’ınizin daha fazla kişiselleştirilmesine olanak tanır. Daha fazla bilgi almak için OutSystems platformunun belgelerini ve eğitim materyallerini inceleyebilirsiniz.