Makale Özeti

Bu makalede asp.net sayfalarında kullandığımız asp:calendar kontrollerinin yerini tutacak SmartRapidCalendar kontrolünü yapacağız. Asp:Calendar kontrolü üzerinde kullanıcının yaptığı işlemlerde tüm aspx sayfası sunucuya gider-gelir, yani sunucunun calendar kontrolü üzerindeki işlemleri algılaması için aspx sayfasının postback olması gerekir. Sayfa üzerindeki tüm kontrollerin client'tan servera gidip gelmesi(ya da ajax panel kullanarak sadece calendar kontrolünün servera gidip gelmesi) sayfa üzerinde önemli miktarda performans kaybına yol açar. Yapacağımız SmartRapidCalendar kontrolü ile basit bir takvim kontrolü yapacağız ve tüm işlemleri client side'da yapılmasını sağlayacağız. Javascript teknolojisini kullanarak yapacağımız bu kontrolle aspx sayfalarında büyük performans kazanımları elde edebiliriz. Bu yapı ile calendar kontrolü üzerinde yapılan her işlemde server'a gidiş-geliş önlenmiş olacaktır Javascript teknolojisini kullanmanın bir diğer önemli avantajı ise, Javascript ile yapılan işlemlerde client, sayfa için gereken javascript dosyalarını indirip temp bir klasörde depolar. Sayfa daha sonra açıldığında client kendisinde olan javascript dosyası ile server tarafındaki javascript dosyasını karşılaştırır eğer dosya aynı ise javascript dosyasını tekrar server dan indirmez, kendi depoladığı temp klasöründeki dosyayı kullanır. Bu da defalarca girilen sayfalar için büyük performans artışlarını sağlar.

Makale

SmartRapidCalendar Kontrolü Oluşturma

Bu makalede asp.net sayfalarında kullandığımız asp:calendar kontrollerinin yerini tutacak SmartRapidCalendar kontrolünü yapacağız. Asp:Calendar kontrolü üzerinde kullanıcının yaptığı işlemlerde tüm aspx sayfası sunucuya gider-gelir, yani sunucunun calendar kontrolü üzerindeki işlemleri algılaması için aspx sayfasının postback olması gerekir. Sayfa üzerindeki tüm kontrollerin client'tan servera gidip gelmesi(ya da ajax panel kullanarak sadece calendar kontrolünün servera gidip gelmesi) sayfa üzerinde önemli miktarda performans kaybına yol açar. Yapacağımız SmartRapidCalendar kontrolü ile basit bir takvim kontrolü yapacağız ve tüm işlemleri client side'da yapılmasını sağlayacağız. Javascript teknolojisini kullanarak yapacağımız bu kontrolle aspx sayfalarında büyük performans kazanımları elde edebiliriz. Bu yapı ile calendar kontrolü üzerinde yapılan her işlemde server'a gidiş-geliş önlenmiş olacaktır Javascript teknolojisini kullanmanın bir diğer önemli avantajı ise, Javascript ile yapılan işlemlerde client, sayfa için gereken javascript dosyalarını indirip temp bir klasörde depolar. Sayfa daha sonra açıldığında client kendisinde olan javascript dosyası ile server tarafındaki javascript dosyasını karşılaştırır eğer dosya aynı ise javascript dosyasını tekrar server dan indirmez, kendi depoladığı temp klasöründeki dosyayı kullanır. Bu da defalarca girilen sayfalar için büyük performans artışlarını sağlar.

Öncelikle rapidCalendar kontrolünün çalışma algoritmasını inceleyelim. SmartRapidCalendar kontrolü bir textbox kontrolünün tüm özelliklerini miras almış ve textbox kontrolünden türetilmiştir. public class SmartRapidCalendar : System.Web.UI.WebControls.TextBox. SmartRapidCalendar kontrolü textbox kontrolünün yanında bir HtmlImage kontrolü alacak, bu image kontrolüne basıldığında(onclick) yine SmartRapidCalendar kontrolün içerisinde dinamik olarak oluşturulan <div> kontrolü içerisinde  javascript yardımıyla takvim açtırılacaktır. Javascript ile takvim kütüphanelerini internet üzerinden ücretsiz olarak indirip projelerinizde kullanabilirsiniz. Kontrolümüzü yazıp derledikten sonra Visual studio içerisinde bulunan Toolbox üzerinde ChooseItem... bölümüne tıklayıp yazdığımız kontrolün dll'lini gösterdiğimizde artık visual studio içerisinde sayfalara sürükle bırakarak kontrolümüzü taşıyıp kullanılabilir hale gelecektir.

 

 

Kontrolümüzde miras olarak aldığımız textbox'ın yanında yer alan HtmlImage kontrolü içerisinde görülecek image yolunu dinamik bir halde tanımlanma imkanı vermiştir. Bu dinamikliğin iki önemli faydası olacaktır, birincisi kontrolünüzün dll lini alarak kullandığınız projelerde farklı image'ler kullanarak projenizi gerçekleştirebilme ikincisi ise projenizde resimlerin bulunduğu dosyanın farklı olması durumunda uygun yolu verebilme kolaylığıdır.

private string ImageURL_;

public string ImageURL

{

get { return ImageURL_; }

set { ImageURL_ = value; }

}

 

 

Yukarıda bir proje içerisinde iki farklı image yolu göstererek oluşturduğumuz SmartRapidCalendar'larının farklı yapılabildiği gösterilmiştir. SmartRapidCalendar yazılırken aynı sanal yerleşke sayfası üzerinde birden fazla SmartRapidCalendar kullanılabileceği düşünülerek tüm kullanılan kontrollerin farklı isimde olması sağlanmıştır. Eğer böyle bir yapı yapılmamış olsaydı aynı sayfa üzerinde aynı isimde birden fazla div ya da image olacaktı ya da kontroller birbirinin divlerini çalıştıracak ve farklı textboxlar dolacaktı, sonuçta sayfamızın düzgün olarak çalışamayacaktı. Bunun için tüm bileşenlerinin isimlendirilmesi verilirken, ana kontrolümüzün isimlendirmesinden faydalanılmıştır. Yani sayfa client'lara aşağıdaki gibi gönderilecektir.

    <input name="SmartRapidCalendar1" type="text" id="SmartRapidCalendar1" style="width:101px;" /><img src="calendar.png" id="imageSmartRapidCalendar1" onclick="var calSmartRapidCalendar1x = new CalendarPopup('divSmartRapidCalendar1');         calSmartRapidCalendar1x.setCssPrefix('TEST');calSmartRapidCalendar1x.select(document.getElementById('SmartRapidCalendar1'),'imageSmartRapidCalendar1','MM/dd/yyyy');     return false;" align="absMiddle" /><DIV ID='divSmartRapidCalendar1' STYLE='position:absolute;visibility:hidden;background-color:white;layer-background-color:white;'></DIV>

Yukarıdan anlaşılacağı gibi  image için "image" öneki ve kontrol ismi, div için "div" ön eki ve kontrol ismi olarak tanımlama yapılmıştır. Javascript üzerinde de nesneler tanımlanırken bu yapı kullanılmış aynı sayfa üzerinde bulunabilecek birden fazla kontrol için nesnelerin karışması önlenmiştir. Yine Javascript fonksiyonları çağırılırken uygun isimlendirmeye göre tanımlamalar yapılmıştır. Bu tanımlamalar yapılırken oluşturulan kontrolün adı(Id'si) this.UniqueID tanımlaması ile alınmıştır. Bu işlemler kontrolün render işleminde yapılmıştır. Aşağıdaki koda dikkat edilirse dinamik olarak HtmlImage kontrolünün ve HtmlTextWriter kullanarak dinamik olarak div nesnesinin nasıl yaratıldığı görülebilmektedir.

protected override void Render(HtmlTextWriter output)

{

    EnsureChildControls();

    base.Render(output);

    HtmlImage image1 = new HtmlImage();

    image1.ID = "image" + UniqueID;

    image1.Attributes.Add("onclick", "var cal"+UniqueID+"x = new CalendarPopup('div"+UniqueID+"'); cal"+UniqueID+"x.setCssPrefix('TEST');cal"+UniqueID+"x.select(document.getElementById('"+UniqueID+"'),'image"+UniqueID+"','MM/dd/yyyy'); return false;");

    image1.Src = ImageURL;

    image1.Attributes.Add("align", "absMiddle");

    image1.RenderControl(output);

    output.Write("<DIV ID='div"+UniqueID+"' STYLE='position:absolute;visibility:hidden;background-color:white;layer-background-color:white;'></DIV>");

}

Kontrolümüz çalışması için gerekli olan bir diğer bir önemli nokta ise javascript kütüphanemizin ve style'larımızın sayfaya yüklenmesidir. Bunun için eğer master page'li bir yapı kullanıyorsan masterpage'ın içerisine yoksa SmartRapidCalendar kullandığımız her sayfanın başına aşağıdaki referansları vermemiz gerekmektedir.

<SCRIPT LANGUAGE="JavaScript" SRC="CalendarPopup.js"></SCRIPT>

<link href="style.css" rel="stylesheet" type="text/css" />

Sayfa üzerine attığımız SmartRapidCalendar  kontrolü aspx sayfası üzerinde aşağıdaki gibi görülmektedir.

<cc1:SmartRapidCalendar ID="SmartRapidCalendar1" runat="server" ImageURL="calendar.png" Width="101px"></cc1:SmartRapidCalendar>

Makalede ya da kodlarda bulunan hatalar ya da sorularınız için mehmetaliecer@gmail.com adresinden bana ulaşabilirsiniz. İyi çalışmalar.

Mehmet Ali ECER

www.mehmetaliecer.com

 

 

Kaynak dosyalar