Serenity ile Üçüncü Taraf Eklentisini Kullanma

Serenity uygulamasıyla üçüncü taraf/özel eklentiyi kullanmak hiçbir özel adım gerektirmez. Komut dosyalarını ve CSS'lerini _LayoutHead.cshtml'ye ekleyebilir ve belgelerini takip edebilirsiniz.

Özellikle TypeScript kullanıyorsanız özel bir adım gerekmez.

Saltaralle durumunda (kullanımdan kaldırılmıştır), bazı içe aktarma sınıfları yazmanız veya aksi takdirde dinamik kullanmanız gerekebilir.

Ancak bu bileşenin diyaloglardaki diğer Serenity editörleri arasında iyi çalışmasını istiyorsanız, onu bir Serenity widget'ına sarmayı deneyebilirsiniz.

Burada örnek olarak Bootstrap MultiSelect eklentisini alıp, LookupEditor'a benzer şekilde Serenity'ye editör olarak entegre edeceğiz.

İşte bu bileşene ilişkin belgeler ve örnekler:

http://davidstutz.github.io/bootstrap-multiselect/

Komut Dosyası ve CSS Dosyalarını Alma

Öncelikle script ve CSS dosyalarını indirip MyProject.Web/scripts/ ve MyProject.Web/content klasörleri altında doğru yerlere yerleştirmeliyiz.

Bu bileşenin bir NuGet paketi var ancak ne yazık ki standart bir biçimde değil (dosyaları proje klasörlerinize yerleştirmiyor), bu nedenle dosyaları manuel olarak indirmemiz gerekecek.

Bu komut dosyasını indirin ve MyProject.Web/Scripts altına yerleştirin:

https://raw.githubusercontent.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js

Bu CSS dosyasını indirin ve MyProject.Web/Content altına yerleştirin:

https://raw.githubusercontent.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css

_LayoutHead.cshtml'ye Komut Dosyası/Css Dosyalarını Ekleme

Eklenti belgelerine göre şu dosyaları eklemeliyiz:

<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" 
  src="js/bootstrap-multiselect.js">
</script>
<link rel="stylesheet" type="text/css"/
      href="css/bootstrap-multiselect.css" />

MyProject.Web/Views/Shared altında _LayoutHead.cshtml dosyasını açın ve şu dosyaları ekleyin:

// ...
@Html.Stylesheet("~/Content/bootstrap-multiselect.css")
@Html.Stylesheet("~/Content/serenity/serenity.css")
@Html.Stylesheet("~/Content/site/site.css")
// ...
@Html.Script("~/Scripts/bootstrap-multiselect.js")
@Html.Script("~/Scripts/Site/Serene.Script.js")
@Html.Script("~/Scripts/Site/Serene.Web.js")

BSMultiSelectEditor.ts oluşturma

Artık bileşenimizi tutacak bir TypeScript kaynak dosyasına ihtiyacımız var. Bunu MyProject.Web/Scripts veya MyProject.Web/Modules dizinlerinin altına koymalıyız.

Bunu MyProject.Web/Modules/Common/Widgets altında oluşturacağım (öncelikle klasör Widget'ları oluşturmanız gerekir)

Bu konumda BSMultiSelectEditor.ts dosyasını oluşturun:

namespace MyProject {
    @Serenity.Decorators.element("<select/>")
    @Serenity.Decorators.registerClass(
        [Serenity.IGetEditValue, Serenity.ISetEditValue])
    export class BSMultiSelectEditor
        extends Serenity.Widget<BSMultiSelectOptions>
        implements Serenity.IGetEditValue, Serenity.ISetEditValue {

        constructor(element: JQuery, opt: BSMultiSelectOptions) {
            super(element, opt);
        }

        public setEditValue(source: any, 
            property: Serenity.PropertyItem): void {
        }

        public getEditValue(property: Serenity.PropertyItem, 
            target: any): void {
        }
    }

    export interface BSMultiSelectOptions {
        lookupKey: string;
    }
}

Burada Widget'tan türetilen yeni bir editör tipi tanımladık. Widget'ımız, LookupEditor'a benzer bir LookupKey seçeneği içeren BSMultiSelectOptions türündeki seçenekleri alır. Ayrıca IGetEditValue ve ISetEditValue TypeScript arayüzlerini de uygular (bu, C# arayüzlerinden farklıdır)

@Serenity.Decorators.element("<select/>")

Yukarıdaki satırda widget'ımızın bir SELECT öğesi üzerinde çalıştığını belirttik, çünkü bu önyükleme çoklu seçim eklentisi de bir select öğesi gerektiriyor.

@Serenity.Decorators.registerClass(
    [Serenity.IGetEditValue, Serenity.ISetEditValue])

Yukarıda TypeScript sınıfımızı Saltaralle tip sistemine kaydediyoruz ve widget'ımızın getEditValue ve setEditValue yöntemlerine karşılık gelen özel değer alıcı ve ayarlayıcı yöntemlerini uyguladığını belirtiyoruz.

Saltaralle ve TypeScript arasındaki birlikte çalışmayı ele almamız gerektiğinden burada sözdizimi biraz kısadır.

Yapıcımız ve getEditValue, setEditValue yöntemlerimiz henüz boş. Yakında bunları dolduracağız.

Yeni Editörümüzü Kullanma

Şimdi projenizi oluşturun ve şablonları dönüştürün.

CustomerRow.cs'yi açın ve Temsilciler özelliğini bulun:

[LookupEditor(typeof(EmployeeRow), Multiple = true), NotMapped]
[LinkingSetRelation(typeof(CustomerRepresentativesRow), 
    "CustomerId", "EmployeeId")]
public List<Int32> Representatives
{
    get { return Fields.Representatives[this]; }
    set { Fields.Representatives[this] = value; }
}

Burada Temsilcilerin birden fazla seçeneğin doğru olduğu bir Arama Düzenleyicisi kullandığını görüyoruz. Bunu yepyeni editörümüzle değiştireceğiz:

[BSMultiSelectEditor(LookupKey = "Northwind.Employee"), NotMapped]
[LinkingSetRelation(typeof(CustomerRepresentativesRow), 
    "CustomerId", "EmployeeId")]
public List<Int32> Representatives
{
    get { return Fields.Representatives[this]; }
    set { Fields.Representatives[this] = value; }
}

Düzenleyiciyi Arama Öğeleriyle Doldurma

Şimdi projenizi oluşturur ve Müşteri iletişim kutusunu açarsanız Müşteri temsilcileri alanı yerine boş bir SEÇİM göreceksiniz.

Önce onu verilerle dolduralım:

export class BSMultiSelectEditor {
    constructor(element: JQuery, opt: BSMultiSelectOptions) {
        super(element, opt);
        
        let lookup = Q.getLookup(this.options.lookupKey) as Q.Lookup<any>;
        for (let item of lookup.get_items()) {
            let key = item[lookup.get_idField()];
            let text = item[lookup.get_textField()] || '';
            Q.addOption(element, key, text);
        }        
    }

İlk önce, LookupKey seçeneğimiz tarafından belirtilen arama nesnesine bir referans alırız .

Aramalar, genellikle arama satırınızdaki IIdRow ve INameRow arabirimleri tarafından belirlenen alanlara karşılık gelen idField ve textField özelliklerine sahiptir.

Aramadaki tüm öğeleri numaralandırırız ve idField ve textField özelliklerini kullanarak bu öğelerin anahtar ve metin özelliklerini belirleriz.

Şimdi dosyayı kaydedin ve Müşteri iletişim kutusunu tekrar açın. Bu sefer seçeneklerin dolduğunu göreceksiniz.

Bootstrap Çoklu Seçim Yazımları

Belgelere göre artık select öğemizde ".multiselect()" jQuery uzantısını çağırmalıyız.

SELECT öğemizi yayınlayacak <any>ve üzerinde .multiselect'i çağıracaktım, ancak multiselect'i intellisense ile yeniden kullanmak için bir TypeScript .d.ts tanım dosyası yazmak istiyorum.

Yani, MyProject.Web/Scripts/typings/bsmultiselect klasörü altında* bsmultiselect.d.ts* adlı bir dosya oluşturun.

interface JQuery {
    multiselect(options?: BSMultiSelectOptions | string): JQuery;
}

interface BSMultiSelectOptions {
    multiple?: boolean;
    includeSelectAllOption?: boolean;
    selectAllText?: string;
    selectAllValue?: string | number;
}

Burada jQuery'nin kendisine ait olan ve jquery.d.ts dosyasında tanımlanan JQuery arayüzünü genişlettim. TypeScript'te herhangi bir arayüzü yeni yöntemler, özellikler vb. ile genişletebilirsiniz.

BSMultiSelectOptions'ı tanımlamak için eklenti belgelerini kullandım. Eklentinin aslında çok daha fazla seçeneği var ama şimdilik kısa tutuyorum.

Editörümüzde Bootstrap MultiSelect Oluşturma

Şimdi yapıcımıza geri döneceğim ve üzerinde çoklu seçimli bir eklenti başlatacağım:

export class BSMultiSelectEditor {
    constructor(element: JQuery, opt: BSMultiSelectOptions) {
        super(element, opt);
        
        element.attr('multiple', 'multiple')
        
        let lookup = Q.getLookup(this.options.lookupKey) as Q.Lookup<any>;
        for (let item of lookup.get_items()) {
            let key = item[lookup.get_idField()];
            let text = item[lookup.get_textField()] || '';
            Q.addOption(element, key, text);
        }        
        
        element
            .attr('name', this.uniqueName + "[]")
            .multiselect();     
    }

CustomerDialog'u açtığınızda Temsilcilerin önyükleme çoklu seçim düzenleyicimize sahip olduğunu göreceksiniz.

GetEditValue ve SetEditValue Yöntemini Kullanma

Bu yöntemleri ele almazsak, Serenity editör değerinizi nasıl okuyacağını veya ayarlayacağını bilemeyecektir, dolayısıyla bazı temsilcileri seçseniz bile, iletişim kutusunu bir sonraki açışınızda boş seçimleriniz olacaktır.

export class BSMultiSelectEditor {
//...

public setEditValue(source: any, property: Serenity.PropertyItem): void {
    this.element.val(source[property.name] || []).multiselect('refresh');
}

public getEditValue(property: Serenity.PropertyItem, target: any): void {
    target[property.name] = this.element.val() || [];
}

setEditValue, editör değerinin ayarlanması gerektiğinde çağrılır. Genellikle bir iletişim kutusuna yüklenen varlığınız olan bir kaynak nesneyi alır .

Özellik parametresi, örneğin Temsilciler özelliğimiz gibi, işlenmekte olan alanla ilgili ayrıntıları içeren bir PropertyItem nesnesidir. Ad alanı , alan adını içerir, örneğin Temsilciler .

Burada, seçim değerini ayarladıktan sonra multiselect('refresh') işlevini çağırmalıyız, çünkü multiselect eklentisi seçimlerin ne zaman değiştirildiğini bilemez.

getEditValue tam tersidir. Düzenleme değerini okumalı ve bunu hedef varlığa ayarlamalıdır.

Tamam, şimdi özel düzenleyicimiz iyi çalışıyor olmalı.