Sem Göksu
Sem Göksu
Yazılım · Yolculuk · Fenerbahçe
ASP.NET

ASP.NET Custom Control Geliştirme – Marquee Kontrolü

Merhaba arkadaşlar, bu makalemizde diğer web geliştirme editörlerinde olan ama .net toolbox’da olmayan bir web controlünün nasıl geliştirildiğine bakacağız.

08 Mart 2007 3 dk okuma 3988 4
Merhaba arkadaşlar, bu makalemizde diğer web geliştirme editörlerinde olan ama .net toolbox’da olmayan bir web controlünün nasıl geliştirildiğine bakacağız.

ASP.NET Custom Control Gelistirme - Marquee Kontrolü

Visual Studio da kullanılabilir kontol sayısı çok fazla olsada bazı durumlar da visual studio toolbox'ında yer almayan bir kontrol gerekebilir. Bu durum da geriye 2 seçenek kalır. Ya dısarıdan 3th party bir component satın almalıyız. Yâda kendi kontrolümüzü kendimiz gelistirmeliyiz. Dısarıdan satın almak hem maliyetli bir istir hemde alacagımız kontol bizim isimizi tam olarak görmeyebilir. Ayrıca gelistirmek istedigimizde yine ücret ödememiz gerekebilir. Buda hem biz yazılımcıların hemde firmaların isine gelmez. Bu durumu çözmek için kendi kontrolümüzü kendimiz gelistirebiliriz. Visual studio ile kendi kontrolümüzü gelistirip istedigimiz gibi kullanabiliriz istedigimiz gibi gelistirebiliriz.

Kendi kontrollerimizi gelistirebilmemiz için visual studio WebControlLibrary'yi sundu(Aynı islemleri Class Library ile de yapabiliriz). Simdi ilk olarak WebControlLibrary'de bize lazım olacak metodları tanıyalım.

Render Methodu

Olusturacagımız Custom kontrolü çalıstırdıgımızda tüm islemler render metodunda gerçeklesecektir. Render metodu Web Browser'da kontrolleri görüntülemek için HTML olarak output edecektir. Otomatik olarak sayfayı Host eden sayfayı HtmlTextWriter ile HTML'e çevirecektir. Aynı Clasik ASP de olan Response.write gibi.

Design-Time Destegi

Olusturacagımız nesneye ait özellikleri belirleyecegimiz kısımdır. Kontrol'e design-time özelligi eklemek için property'ler ve class'lar tanımlanır codun içine dahil edilir.

[Category("ÖzellikAdi"),
DefaultValue(""),
Description("Açıklama")]


Attributes

Category
Appearance
Behavior
Data

Description
Belirlenecek olan property ile ilgili açıklama.

DefaultValue
Kendi degerimiz.

Browsable
Property'nin property box içinde gösterilip gösterilmeyecegine karar verir. Alacagı degerler.  true  yada false


Kontrolü kullanmak

Olusturacagımız kontrolü olusturmak için WebControlLibrary'i Build ettikten sonra olusacak olan dll'i kendi toolbox'mızda sag tıklayarak Choose Items seçenegini seçerek ekleyebiliriz.

Örnek: Ben örnek olarak Visual Studio içerisinde yer almayan ama web sayfalarında çok ise yarayan Marquee(kayan yazı) kontrolünü gelistirecegim. Ilk olarak yukarıda da anlattıgım gibi WebControlLibrary olusturalım.



Projemizi olusturduktan sonra Kodumuzu inceleyelim.

namespace CustomControl

{

[DefaultProperty("Text")]

[ToolboxData("<{0}:WebCustomControl1 runat=server>")] // Kontrolümüzün Sayfaya eklendiginde belirlenecek olan ID'si

public class WebCustomControl1 : WebControl

{

[Bindable(true)]

[Category("Appearance")] //propertyleri

[DefaultValue("")]

[Localizable(true)]



public string Text

{

get

{

String s = (String)ViewState["Text"];

return ((s == null) ? String.Empty : s);

}


set

{

ViewState["Text"] = value;

}

}



protected override void RenderContents(HtmlTextWriter output)//Kontrolümüzün output edilecegi render metodu.

{

output.Write(Text);

}

}

}

Simdi projemize devam edelim. Ilk olarak Kontrolümüzün adını SemMarquee yapalım.

namespace Marquee

{

[DefaultProperty("Text")]

[ToolboxData("<{0}:SemMarquee runat=server>")]

public class SemMarquee : WebControl

{

Propertieslerimiz için açıklamayı yapalım.

[Category("Appearance")]

[Browsable(true)]

[Description("Kayan Yazı içerigi")]

[Editor(typeof(System.Web.UI.Design.TextControlDesigner), typeof(System.Drawing.Design.UITypeEditor))]


Simdi property penceremize eklemek istedigimiz özellikleri yazalım


string _text;

string _width;

string _height;



public string MarqueeText //marque içerisinde kaydırılacak olan yazı resim vs..

{

get { return _text; }

set { _text = value; }

}



public string MarqueeWidth //marwuenin genisligi

{

get { return _width; }

set { _width = value; }

}



public string MarqueeHeight //marwuenin yüksekligi

{

get { return _height; }

set { _height = value; }

}

Simdi render edilecek olan marquee'yi yazalım.



protected override void RenderContents(HtmlTextWriter writer)

{

try

{


catch

{

writer.RenderBeginTag(HtmlTextWriterTag.Div);

writer.Write("Kayan Yazı");

writer.RenderEndTag();

}

}



}

}

Evet, Kontrolümüzü olusturduk Simdi bunu bir web site içerisinde kullanalım. Bunun için var olan projemize bir web site ekleyelim.



Simdi ekledigimiz web site'in referanslarına gelip olustugumuz class library'i ekleyelim.



Simdi toolbox'ımıza göz atalım.



Marquee controlümüz toolbox'a eklendi. Simdi bunu formumuza ekleyelim ve özelliklerini belirleyelim.



Simdi projemizi çalıstıralım.



Biraz bekleyelim tekrar bakalım;



Evet çok güzel oldu gerçekten. Artık bizimde bir Custom Web controlümüz var.

Bu makalemizinde de sonuna geldik. Tesekkür eder iyi çalısmalar dilerim.

Sem GÖKSU
MCP | MCAD.NET | MCTS | ASP.NET MVP

Örnek Kodlar için mail adresimi kullanabilirsiniz
semgoksu@semgoksu.com

Kaynaklar

www.codeproject.com
Etiketler: #ASP.NET
Paylaş:

Yorumlar (4)

C
Coşkun BAKİ 28 Oca 2009 03:24

Abi çok sağol emeğine sağlık dersi yaptım Custom Controlde oluştu fakat bunu bir sayfasa kulanmak istediğimde aşağıdaki hataları alıyorum. Ne yaptıysam çözemedim nedeni ne olabilir acaba? Error 2 Unknown server tag 'cc1:EmbeddedObject'. C:\Documents and Settings\BÖRTEÇİNE\Belgelerim\Visual Studio 2005\WebSites\WebSite9\Default.aspx 14 Error 2 Element 'EmbeddedObject' is not a known element. This can occur if there is a compilation error in the Web site. C:\Documents and Settings\BÖRTEÇİNE\Belgelerim\Visual Studio 2005\WebSites\WebSite9\Default.aspx 16 14 C:\...\WebSite9\

S
Sem GÖKSU 28 Oca 2009 05:45

Render ederken bir hata yapmadığına emin misin?

C
Coşkun BAKİ 29 Oca 2009 02:55

Abi, baştan başlayıp yaptım oldu, tekrar teşekkür ederim. Birde abi, bu konuda birşey kafama takıldı. Seçmeli bir özellik yapabilirmiyiz. Mesela bu örnek için bir yön özelliği oluştursam, Properties kısmında bu özellik seçildiğinde dört seçenek çıksa Sağ,Sol,Aşağı,Yukarı diye. Kullanıcı hangisini seçerse direction özelliğine o yönü atasam böyle bişey düşündüm olabilir mi acaba?

S
Sem GÖKSU 29 Oca 2009 05:13

Olabilir tabi ki, Bak width ve height olmuş :)

Yorum bırak

* Yorumlar moderasyon sonrası yayınlanır. E-posta gizli tutulur.