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.