Önceki bölümde özel web kontrol geliştirmeyle ilgili giriş yapmıştık. Bu bölümle birlikte kontrol geliştirme örneklerine geçeceğiz. İlk örnek olarak Inherited Control türündeki kontrolleri işleyeceğiz.
Inherited Control
.NET Framework ile birlikte gelen ve System.Web.UI.WebControls altında bulunan bir kontrolü taban alarak geliştirilen kontrollerdir. Bunu yapmamızın nedeni var olan kontrolü özelleştirmek veya ona yeni özellikler kazandırmaktır. Bu yönteme örnek olarak web sayfalarında kullanılan “hover button” kontrolünü hazırlayacağız.
Visual Studio içinde ismi OrnekWebKontrol olacak şekilde yeni bir Class Library projesi oluşturalım. Kendisinin oluşturduğu Class1 (Modul1 VB.NET) dosyasını silip yerine projeyi sağ tıklayıp “Add » New Item” bölümünden ismi HoverButton olan bir Class dosyası ekleyelim. Bu classı ImageButton’dan inherit edilecek şekilde düzenleyelim. HoverButton, mouse üzerine gelince zemin resmi veya rengi değişen butondur. Dolayısıyla burada kontrole ait tagın içeriğini oluşturmaktan ziyade (ki bu içerik, ImageButton’dan gelecek) oluşan elemente nitelik ekleyeceğiz. Bunun için override edilecek en uygun metod, AddAttributesToRender() metodudur. System.Web.UI.WebControls.WebControl üyesi olan bu metod, render edilmiş HTML elementine attribute ekleme aşamasını temsil eder. AddAttributesToRender() metodu, parametre olarak System.Web.UI.HtmlTextWriter türünde nesne alır. Bu bölümde yoğun kullanacağımız HtmlTextWriter nesnesi, ASP.NET server kontrollerinin istemciye gönderilecek içeriğine markup karakteri(,< ,> vb.) veya herhangi bir metin eklemek için kullanılır. Bu amaçla çoğu overload edilmiş geniş bir metod listesine sahiptir. Örneğin kontrole attribute eklemek için, AddAttribute() metodu kullanılır veya doğrudan stream üzerine bir metin eklemek için nesnenin yapıcı yordamları kullanılır. Bu metodları daha sonra ele alacağız.
Projeye, “System.Web” kütüphanesini referans olarak eklemeyi unutmayalım. Özel bileşen geliştirirken çoğu System.ComponentModel kütüphanesinde bulunan tasarıma dayalı attributeler kullanılır. Bunları detaylı göreceğiz ama bu örnekte editörün “Properties” penceresinde bölümlendirme yapmak için Category isimli niteliği kullanacağız.
[HoverButton.vb]
[HoverButton.vb]
Imports System.Web.UI ‘HtmlTextWriter
Imports System.Web.UI.WebControls ‘ImageButton
Imports System.ComponentModel ‘Category niteliği

Namespace OrnekWebKontrol

‘ImageButton’dan türetilsin
Public Class HoverButton : Inherits ImageButton
‘Butonun üzerine gelince çıkacak resim için değişken tanımlıyoruz.
Private _hoverResim As String = “”

‘Bu yerel değişkenlerin Properties penceresinden ayarlanması için property tanımlayalım. Propertynin başında kullanılan Category niteliği bu propertynin görüneceği grubu tanımlar.

[HoverButton.cs]

using System.Web.UI; //HtmlTextWriter
using System.Web.UI.WebControls; //ImageButton
using System.ComponentModel; //Category niteliği

namespace OrnekWebKontrol
{
//ImageButton'dan türetilsin
public class HoverButton : ImageButton
{
    //Butonun üzerine gelince çıkacak resim için değişken tanımlıyoruz.
    private string _hoverResim = "";

    /*
     Bu yerel değişkenlerin Properties penceresinden ayarlanması için property tanımlayalım. Propertynin başında kullanılan Category niteliği bu propertynin görüneceği grubu tanımlar.
     */
    [Category("Hover Resmi")]
    public string HoverResim
    {
        get
        {
            return this._hoverResim;
        }
        set
        {
            this._hoverResim = value;
        }
    }

    protected override void AddAttributesToRender(HtmlTextWriter writer)
    {
        //Eğer kullanıcı HoverResim property'sine değer girmişse.
        if (_hoverResim != "")
        {
            //JavaScript ile butonun üzerine gelindiğinde(onMouseOver) veya geri çekildiğinde(onMouseOut) butonun resmini değiştireceğiz.
            writer.AddAttribute("onMouseOver", "this.src='" + _hoverResim + "'");
            writer.AddAttribute("onMouseOut", "this.src='" + base.ImageUrl + "'");
        }
        base.AddAttributesToRender(writer);
    }//AddAttributesToRender

}//HoverButton

}//OrnekWebKontrol

Böylece basit kişisel bir kontrol geliştirmiş olduk. Konuya detaylı devam etmeden önce kontrolleri, uygulamalarda nasıl kullanacağımızı öğrenmek için deployment konusundan bahsetmek faydalı olacaktır.
Custom Kontrol’ün deploy edilmesi
Geliştirdiğimiz custom kontrolleri web uygulamalarında kullanmak için kontrolü, uygulamaya referans olarak eklememiz gerekir. Eğer web projesi, custom kontrol projesiyle aynı solution içerisinde bulunuyorsa VS.NET 2005, custom kontrolü, otomatik olarak Toolbox’a ekler. Bu yöntem özellikle ayrıntılı kontrollerde bazen sorunlar çıkarsa da custom kontrolümüzü test etmek için en pratik yöntemdir. Bir custom kontrolü, deploy etmek için .dll dosyasının uygulamanın BIN klasörüne veya sunucunun GAC klasörüne kopyalayıp. Kontrolün Assembly’sini kullanılacak uygulamaya register etmeliyiz.
VS.NET 2005’te eğer aynı Solution içinde bir web projesi oluşturursak, projenin Toolbox’ında otomatik olarak HoverButton görünecektir. Başka bir Solution içindeki web projesinde bu kontrolü kullanmak için Toolbox’ı sağ tıklayıp “Choose Items” menüsünü kullanarak açılan pencerede “.NET Framework Components” sekmesinde “Browse” butonu kullanılır.

Kontrolü, aspx sayfasında kullanılmak üzere sayfanın üzerine taşıdığımızda kontrolün .dll dosyası, uygulamanın BIN klasörüne kopyalanır ve HTML tarafında aşağıdaki gibi tag tanımlama satırları eklenir.
< %@ Register Assembly="OrnekWebKontrol" Namespace="OrnekWebKontrol" TagPrefix="cc1" %>
. . . . .

VB.NET’te aşağıdaki gibi olur.
< %@ Register Assembly="OrnekWebKontrol" Namespace="OrnekWebKontrol.OrnekWebKontrol" TagPrefix="cc1" %>
. . . . .

VB.NET’e özel olarak;
Namespace değerinde geçen OrnekWebKontrol ifadesinden birinci Assembly adı(Root Namespace) diğeri de içinde classı yazdığımız namespace’dir. Sadece birini yazmak için ya classı namespace’siz yazarız ya da projenin property’sinden Application sekmesinde “Root namespace” alanını boş geçeriz. Fakat “bir kontrolün namespace alanı boş olmamalı” kuralından dolayı custom kontrol uygulamalarında iki seçeneği de uygulayamayız.
Sayfaya eklenmiş ilk satır, kontrolün register işlemiyle ilgilidir. Bir kontrolü, sayfamızda kullanmak için o kontrolü öncelikle projeye register etmeliyiz. Yani projeyi, bu kontrol hakkında bilgilendirmemiz gerekir. Görüldüğü gibi @ Register belirtecinde kullanılacak kontrolün register edilmesi sağlanmıştır. Bu satırda kontrolün assembly bilgileri ve TagPrefix’i belirtilmiştir. Kontrolleri, kullanılacak her sayfada @ Register belirtecinde kayıt ettirmek zorundayız. Bu da zahmetli bir iş olduğu için buna alternatif olarak Web.Config kullanılabilir. Bir custom kontrolü, aşağıdaki yazımda gösterildiği gibi Web.Config dosyasında register edebiliriz.
[Web.Config]

Custom kontrole ait Assembly, kullanıldığı projenin BIN klasöründe bulunmalıdır. Eğer custom kontrol, web server üzerinde bulunan tüm web uygulamaları tarafından erişilecekse, GAC’a eklememiz daha mantıklı olur.
Eğer custom kontrol, web uygulamasıyla aynı solution içerisinde değilse, kontrolün .dll dosyasını sürükle-bırak işlemiyle VS.NET’in Toolbox bölümüne taşıyarak ta kontrolü kullanabiliriz.
Kontrolün ImageUrl property’sine örnek bir resim yolu girip sayfayı kaydedelim. Sayfayı bu şekilde çağırdığımızda istemci tarafında generate edilecek HTML elementi aşağıdaki gibi olur.

Görüldüğü gibi sadece ImageUrl property’sini set ettiğimiz için onMouseOver ve onMouseOut nitelikleri boş tanımlandı. Dolayısıyla HoverButton kontrolü, kullanıcı HoverResim propertysine değer girildiği zaman anlamlı olacaktır yoksa normal bir ImageButton’dan bir farkı olmayacaktır. Eğer HoverResim property’sini set edersek çıktığı aşağıdaki gibi oluşur.

Aynı işlemi PreRender() veya Render() metodlarında da yapabilirdik. Render() metodu, Web controlün, asıl render edildiği metoddur. Genellikle türetilmiş kontrollerde kontrol öncesi veya sonrası özel bir metin eklemek için kullanılır. Örneğin HoverButton kontrolünün bizim tarafımızdan yazıldığını HTML comment olarak istemci tarafında gönderelim. Class içinde Render() metodunu da override ederek aşağıdaki ifadeleri ekleyelim.
Public Class HoverButton : Inherits ImageButton
. . .
Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
writer.Write(”
public class HoverButton : ImageButton
{
. . .
protected override void Render(HtmlTextWriter writer)
{
writer.Write(”
Bu eklemeden sonra, HoverButton, istemci tarafında aşağıdaki gibi görünecektir.