Uygulamanın kullanıcılarla etkileşim kurduğu katman olan Kullanıcı Arayüzü (UI) Katmanı, genellikle ASP.NET Core MVC (Razor Pages), Angular veya Blazor gibi teknolojilerle geliştirilir. ABP Framework, seçtiğiniz UI teknolojisiyle sorunsuz entegrasyon sağlayarak geliştirme sürecinizi hızlandırır ve ortak UI ihtiyaçlarını karşılar. Bu bölümde, ABP ile kullanıcı arayüzü geliştirmenin temel yönlerini ele alacağız.

Seçilen UI Teknolojisine Göre Temel Yapılandırma

ABP, proje oluştururken seçtiğiniz UI teknolojisine göre hazır şablonlar sunar. Bu şablonlar, uygulamanızın başlangıç yapılandırmasını (NuGet paketleri, servis kaydı, ara yazılımlar) otomatik olarak ayarlar.

• ASP.NET Core MVC (Razor Pages): YourProjectName.Web projesi, Razor Pages’ı temel alan bir yapı sunar. Bu projede Pages klasörü altında .cshtml dosyaları ve ilişkili C# code-behind dosyaları bulunur.
• Angular: Ayrı bir YourProjectName.Angular projesi bulunur. Angular CLI ile oluşturulmuş ve ABP HTTP API’lerini tüketmek üzere yapılandırılmış bir ön uç uygulamasıdır.
• Blazor WebAssembly/Server: YourProjectName.Blazor projesi, Blazor bileşenlerini ve ABP’nin Blazor entegrasyonlarını içerir.

Temel yapılandırmalar genellikle YourProjectNameWebModule veya YourProjectNameBlazorModule gibi modül sınıflarında yapılır.

Layout ve Tema Özelleştirme

ABP Framework, farklı UI teknolojileri için hazır tema (theme) ve layout (düzen) yapıları sunar. Bu temalar, uygulamanızın görsel tutarlılığını sağlamak için kullanılabilir.

• Basic Theme (Temel Tema): ABP’nin varsayılan olarak sunduğu, basit ve modern bir temadır.
• Commercial Themes: ABP Commercial, daha gelişmiş ve işlevsel temalar (örn. LeptonX) sunar.
• Özelleştirme: Mevcut temaları genişleterek veya tamamen yeni temalar oluşturarak uygulamanızın görünümünü özelleştirebilirsiniz. CSS (SCSS), JavaScript ve HTML dosyalarını değiştirerek veya tema mekanizmalarını kullanarak bunu yapabilirsiniz.

_Layout.cshtml (MVC/Razor Pages için) veya MainLayout.razor (Blazor için) dosyaları, uygulamanızın ana düzenini tanımlar.

Localization (Çoklu Dil Desteği)

ABP Framework, uygulamanıza kolayca çoklu dil desteği (localization) eklemenizi sağlar. Bu sayede, uygulamanızı farklı dillerde kullanıcılara sunabilirsiniz.

• .json veya .xml Kaynak Dosyaları: Metinler, her dil için ayrı ayrı kaynak dosyalarında (.json veya .xml) tanımlanır.
• L Servisi: UI’da veya C# kodunda L servisi aracılığıyla yerelleştirilmiş metinlere erişilir. C#// Razor Page'de @using Volo.Abp.Localization @inject IHtmlLocalizer<MyProjectResource> L <h1>@L["WelcomeMessage"]</h1> C#// C# kodunda _notificationService.Notify(L["ProductCreatedSuccessfully", productName]);
• Tarayıcı Dil Ayarı: ABP, kullanıcının tarayıcı dil ayarlarına göre otomatik olarak doğru dili seçmeye çalışır.

ABP UI Bileşenlerinin Kullanımı (DataTable, Modal, vb.)

ABP Framework, ortak UI ihtiyaçları için hazır UI bileşenleri (component) sunar. Bu bileşenler, tekrarlayan kod yazma ihtiyacını azaltır ve tutarlı bir kullanıcı deneyimi sağlar.

• Modal (Pop-up Pencere): Veri girişi veya onaylama için kullanılır. ABP, kolayca modal pencereler açmanızı ve yönetmenizi sağlayan bir modal sistemi sunar.
• DataTable: Veri listelerini filtreleme, sıralama, sayfalama ve arama özellikleriyle birlikte görüntülemek için kullanılır. ABP’nin DataTables entegrasyonu, sunucu tarafı veri işleme ile birlikte harika çalışır.
• Diğerleri: Otomatik formlar, bildirimler, confirm kutuları gibi birçok başka bileşen mevcuttur.

Bu bileşenler genellikle JavaScript ile etkileşime girer ve ilgili Razor partial view’ları veya Blazor bileşenleri aracılığıyla kullanılır.

Form Validasyonları

Kullanıcı arayüzünde form girişi sırasında validasyon (doğrulama) yapmak, hatalı verilerin sunucuya gönderilmesini engeller ve kullanıcı deneyimini iyileştirir.

• ASP.NET Core Veri Açıklamaları: DTO’lar üzerinde kullanılan [Required], [StringLength], [Range] gibi nitelikler, istemci tarafı (JavaScript) ve sunucu tarafı (C#) validasyonunu otomatik olarak sağlar.
• JavaScript Validasyon Kütüphaneleri: jQuery Validation gibi kütüphanelerle entegrasyon.
• Blazor Validasyonları: Blazor’ın kendi yerleşik validasyon bileşenleri (EditForm, DataAnnotationsValidator) kullanılır.

Dynamic Form Yapısı

ABP Commercial, Dynamic Forms (Dinamik Formlar) özelliği sunar. Bu özellik, veritabanından veya diğer kaynaklardan tanımlanan meta verilere göre otomatik olarak formlar oluşturmanıza olanak tanır. Bu, özellikle esnek ve yapılandırılabilir formlara ihtiyaç duyan uygulamalar için çok faydalıdır.

UI Komponentlerinin Oluşturulması

ABP’nin sunduğu hazır bileşenler yeterli olmadığında veya özel bir UI ihtiyacınız olduğunda, kendi UI bileşenlerinizi oluşturabilirsiniz:

• ASP.NET Core Partial View’ları: Küçük, tekrar kullanılabilir UI parçaları oluşturmak için kullanılır.
• View Components: Daha karmaşık ve iş mantığı içeren UI bileşenleri için kullanılır.
• Angular Bileşenleri: Angular uygulamalarında özel bileşenler geliştirilir.
• Blazor Bileşenleri: .razor dosyalarıyla özel Blazor bileşenleri oluşturulur.

UI katmanı, uygulamanızın kullanıcılar için cazip, kullanışlı ve erişilebilir olmasını sağlayan kısımdır. ABP Framework, bu katmanı hızlı ve verimli bir şekilde geliştirmenize yardımcı olan araçlar ve yapılar sunar.