Widget Sınıfı

 

Widget Sınıf Diyagramı

Örnek bir Widget

Her tıklandığında DIV'nin yazı tipi boyutunu artıran bir widget oluşturalım:

namespace MySamples
{
    public class MyCoolWidget : Widget
    {
        private int fontSize = 10;

        public MyCoolWidget(jQueryObject div)
            : base(div)
        {
            div.Click(e => {
                fontSize++;
                this.Element.Css("font-size", fontSize + "pt");
            });
        }
    }
}

<div id="SomeDiv">Sample Text</div>

Bu widget'ı aşağıdaki gibi bir HTML öğesinde oluşturabiliriz:

var div = jQuery.Select("#SomeDiv");
new MyCoolWidget(div);

Widget Sınıfı Üyeleri

public abstract class Widget : ScriptContext
{
    private static int NextWidgetNumber = 0;

    protected Widget(jQueryObject element);
    public virtual void Destroy();

    protected virtual void OnInit();
    protected virtual void AddCssClass();

    public jQueryObject Element { get; }
    public string WidgetName { get; }
    public string UniqueName { get; }
}

Widget.Element Özellik

Widget'tan türetilen sınıflar, üzerinde oluşturuldukları öğeyi özellik aracılığıyla alabilirler Element.

public jQueryObject Element { get; }

Bu özellik jQueryObject türüne sahiptir ve widget oluşturulduğunda kullanılan öğeyi döndürür. Örneğimizde konteyner DIV öğesine this.Elementtıklama işleyicisindeki gibi başvurulur.

HTML Öğesi ve Widget CSS Sınıfı

Bir HTML öğesinde bir widget oluşturulduğunda, öğede bazı değişiklikler yapılır.

İlk olarak HTML öğesi, widget'ın türüne bağlı olarak bir CSS sınıfı alır.

Örneğimizde ID ile .s-MyCoolWidgetsınıfa sınıf eklenmiştir .DIV#SomeDiv

Böylece, widget oluşturulduktan sonra DIV şuna benzer:

<div id="SomeDiv" class="s-MyCoolWidget">Sample Text</div>

Bu CSS sınıfı, widget sınıfı adının önüne bir önek konularak oluşturulur s-(Widget.AddCssClass yöntemi geçersiz kılınarak değiştirilebilir).

HTML Öğesini Widget CSS Sınıfıyla Şekillendirme

Widget CSS sınıfı, widget'ın oluşturulduğu HTML öğesine stil vermek için kullanılabilir.

.s-MyCoolWidget {
	background-color: red;
}

jQuery.Data İşleviyle Bir HTML Öğesinden Widget Referansı Alma

Bir CSS sınıfı eklemenin yanı sıra, widget hakkında başka bir bilgi de HTML öğesine eklenir, ancak işaretlemede açıkça görülmez. Bu bilgileri Chrome konsoluna aşağıdakini yazarak görebilirsiniz:

> $('#SomeDiv').data()

> Object { MySamples_MyCoolWidget: $MySamples_MyCoolWidget }

Böylece, işlevi kullanarak bir HTML öğesine eklenen bir widget'a referans almak mümkündür $.data. C#'ta bu şu şekilde yazılabilir:

var myWidget = (MyCoolWidget)(J("#SomeDiv").GetDataValue('MySamples_MyCoolWidget'));

WidgetExtensions.GetWidget Uzantı Yöntemi

Biraz uzun ve karmaşık görünen önceki satır yerine Serenity kısayolu kullanılabilir:

var myWidget = J("#SomeDiv").GetWidget<MyCoolWidget>();

Bu kod parçası, HTML öğesinde mevcutsa widget'ı döndürür, aksi takdirde bir istisna atar:

Element has no widget of type 'MySamples_MyCoolWidget'!

WidgetExtensions.TryGetWidget Uzantı Yöntemi

TryGetWidget, widget'ın var olup olmadığını kontrol etmek için kullanılabilir; nullyoksa basitçe geri döner:

var myWidget = $('#SomeDiv').TryGetWidget<MyCoolWidget>();

Bir HTML Öğesinde Birden Çok Widget Oluşturma

Bir HTML öğesine aynı sınıftan yalnızca bir widget eklenebilir.

Bir öğe üzerinde aynı sınıftan ikincil bir pencere öğesi oluşturma girişimi aşağıdaki hatayı verir:

The element already has widget 'MySamples_MyCoolWidget'.

Davranışları birbirini etkilemediği sürece, farklı sınıflardan herhangi bir sayıda widget tek bir öğeye eklenebilir.

Araç. UniqueName Özellik

MySamples_MyCoolWidget3Her widget örneği , otomatik olarak gibi, özellik tarafından erişilebilen benzersiz bir ad alır this.UniqueName.

Bu benzersiz ad, HTML öğesi ve widget'ın kendisi tarafından oluşturulabilen alt öğeleri için bir kimlik öneki olarak kullanışlıdır.

$.bindAyrıca , öğeye eklenebilecek diğer işleyicileri etkilemeden olay işleyicilerini eklemek/çıkarmak için ve `$.unbind' yöntemleri için bir olay sınıfı olarak da kullanılabilir :

jQuery("body").Bind("click." + this.UniqueName, delegate { ... });
...

jQUery("body").Unbind("click." + this.UniqueName);

Widget.Destroy Yöntem

Bazen, HTML öğesinin kendisini kaldırmadan, ekli bir widget'ın serbest bırakılması gerekebilir.

DestroyWidget sınıfı amaca yönelik yöntem sağlar .

Destroy yönteminin varsayılan uygulamasında, widget'ın kendisi tarafından atanan olay işleyicileri temizlenir (UniqueName olay sınıfı kullanılarak) ve CSS sınıfı ( ) .s-WidgetClassHTML öğesinden kaldırılır.

Özel pencere öğesi sınıflarının, HTML öğesindeki değişiklikleri geri almak ve kaynakları serbest bırakmak için Destroy yöntemini geçersiz kılması gerekebilir (ancak, daha önce UniqueName sınıfına eklenmiş işleyicileri ayırmaya gerek yoktur)

HTML öğesi DOM'dan ayrıldığında Destroy yöntemi otomatik olarak çağrılır. Ayrıca manuel olarak da çağrılabilir.

Yok etme işlemi doğru şekilde yapılmazsa bazı tarayıcılarda bellek sızıntıları meydana gelebilir.