Makale Özeti

Bu makalede asp.net sayfalarında kullandığımız panelleri miras alarak kendi panelimizi oluşturacağız. Oluşturduğumuz bu panel CSS ler ve görsel öğeler kullanılarak şık bir görüntü gösterecektir.

Makale

SmartPanel Kontrolü Oluşturma

Bu makalede asp.net sayfalarında kullandığımız panelleri miras alarak kendi panelimizi oluşturacağız. Oluşturduğumuz bu panel CSS ler ve görsel öğeler kullanılarak şık bir görüntü gösterecektir.

<asp:Panel> kontrolü asp.net sayfaları üzerinde yazılabilir statik bir alan oluşturur. Bu alan içerisine html scripting alarak sayfa üzerinde aldığı bu scripti statik olarak gösterilmesini (sayfaya yazılmasını) sağlar. <asp:Panel> konrolünün genel yazım biçimi ve kullanımı aşağıdaki gibidir.

<asp:Panel id="value" Runat="Server"
  BackImageUrl="url"
  HorizontalAlign="Center|Justify|Left|NotSet|Right"
  ScrollBars="Auto|Horizontal|Vertical|Both|None"
  Wrap="True|False"
    property="value"
    Style="CSS"
  >
    HTML Kontrollerinin yazıldığı kısım
</asp:Panel>
 

<asp:Panel> kullanımı ile sayfa üzerindeki birden çok html kontrolünü gruplama yapabiliriz. Daha sonra bu panel üzerinde bir işlem yaptığımızda (örneğin visible(görünürlük) özelliği) içerisinde bulunan tüm html kontrolleri de bu işlemden etkilenir. Yapacağımız smartPanel kontrolü yukarıda kısaca bahsettiğim <asp:Panel> kontrolünden sahip olduğu tüm özellikleri alacaktır. Bu özellikler üzerine panel üzerine başlık konulması ve panel içerisine aldığı tablo ve görsel temalar vasıtasıyla şık bir görüntü vermesi sağlanacaktır. Panel içerisine render işleminde panelin script olarak aldığı HTML kontrollerini kapsayacak şekilde bir tablo script i yazacağız. Daha sonra bu tablonun en üst satırına panelimize ekleyeceğimiz başlık olması için bir etiket ekleyeceğiz. Daha sonra css ler vasıta ise tablomuzu şekillendirerek panelimize şık bir görüntü sağlamış olacağız. Oluşturacağımız kontrol public class SmartPanel : System.Web.UI.WebControls.Panel   şeklinde tanımlama yapılarak <asp:Panel> kontrolünün tüm özellikelerini miras alacaktır. SmartPanelimiz iki tane public değişkene sahiptir. Bunlardan birincisi panelimizin başlığı olarak GridTitle, diğeri ise panelimize şekilsel olarak tablonun görüntüsünü değiştirmemizi ve tablo görüntüsünün değişmesi ile de panelimizin görüntüsünü değiştirecek olan CssPrefix dir.

private string _GridTitle = "";

[Category("SmartPanelProperties")]

public string GridTitle

{

    get { return _GridTitle; }

    set { _GridTitle = value; }

}

private string _CssPrefix = "K";

[Category("SmartPanelProperties")]

public string CssPrefix

{

    get { return _CssPrefix; }

    set { _CssPrefix = value; }

}

 

Dikkat edilirse public olan değişkenlerin üzerine [Category("SmartPanelProperties")] tanımlaması yapılmıştır. Bu tanımlama sayesinde Visual Studio üzerinde kontrol özelliklerine bakıldığında SmartPanelProperties isminde bir kategorinin oluşur ve bu kategori altında GridTitle ve CssPrefix değişkenleri görülür. Bu değişkenler Visual Studio üzerinden değiştirilip atama yapılabilir hale gelir. CssPrefix değişkeni ön tanımlı olarak K css ini almıştır. Siz Css dosyasında yeni tanımlamalar yapıp sadece bu tanımlı css'in kullanılacağı sayfa üzerindeki smart panelin CssPrefix değerini değiştirerek (smartPanel kontrolünü değiştirmeden sadece CssPrefix değerini değiştirerek) farklı görüntülerde smartPaneller elde edebilirsiniz. Oluşturdumuz  kontrolün render işleminde ise aşağıda gösterildiği gibi panelimizin içerisine yazacağımız tabloyu script olarak yazıyoruz.

protected override void Render(System.Web.UI.HtmlTextWriter writer)

{

    string str = "";

    str += "<table width='100%' border='0' cellspacing='0' cellpadding='0'><tr><td class='" + _CssPrefix + "_TopLeftCorner'>&nbsp;</td><td class='" + _CssPrefix + "_TopBar'>" + "" + "<span id=GridHeaderCount class='GridHeaderCount'>" + GridTitle + "</span>";

    str += "</td><td class='" + _CssPrefix + "_TopRightCorner'>&nbsp;</td></tr><tr><td class='" + _CssPrefix + "_LeftBar'>&nbsp;</td><td class='" + _CssPrefix + "_Middle'>";

    str += "<table width='100%' border='0' cellpadding='0' cellspacing='0' class='" + _CssPrefix + "_MiddleHead'><tr><td>";

    writer.Write(str);

    base.Render(writer);

    str = "";

    str += "</td></tr></table></td><td class='" + _CssPrefix + "_RightBar'>&nbsp;</td></tr><tr><td class='" + _CssPrefix + "_BottomLeftCorner'>&nbsp;</td>";

    str += "<td class='" + _CssPrefix + "_BottomBar'>&nbsp;</td><td class='" + _CssPrefix + "_BottomRightCorner'>&nbsp;</td></tr></table>";

    writer.Write(str);

}

 

Yukarıdaki kodun püf noktası dikkat edilirse base.Render(writer) yani miras aldığımız asp:Panel kontrolünün renderinden önce tablumuzu oluşturmak ve base.Render(writer) işleminden sonra tablomuzu ve gerekli alanları yazdırmaktır. Bu sayede panel içerise atılan her türlü HTML script bizi base.render den önce oluşturduğumuz tablonun içerisinde yer alacaktır.  Bir diğer önemli nokta ise tablomuzun ilk satırına GridTitle yani panelimizin başlığını oluşturacak yazının yazdırılmasıdır.SmartPanel kontrolünü oluşturduktan sonra GridTitle değişkenine "İlk Smart Panelimiz" değerini ve CssPrefix değişkenine de K değerini verdiğimizde smartPanelimiz aşağıdaki şekilde olacaktır.

CssPrefix değerini K değilde J olarak tanımlarsak smartPanelimiz aşağıdaki gözükecektir.

SmartPanel kullandığımız sayfalarda eğer master page varsa master page içerisine yoksa sayfa içerisinde gerekli css referanslarını vermek gerekmektedir. Yukarıdaki resimlerde oluşan smartPanel aşağıdaki gibi tanımlanmıştır.

<cc1:SmartPanel runat="server" ID="wspPanel" GridTitle="˜lk Smart Panelimiz" CssPrefix="J">

        Hede höde<br>

        HTML scripts..................<br><br><br><br>

</cc1:SmartPanel>

Görüldüğü asp kontrollerinden miras alarak oluşturduğuz kontroller üzerinde ufak değişiklikler yaparak daha kullanışlı ve görsel kontroller haline getirebiliyoruz. Bu kontrol çok fazla programsal eklenti içermeyen fakat kullandığımız sayfalarda ayrı bir çekicilik getirmeyi başaran bir kontroldür. Sizde ihtiyaç duyduğunuz ek özellikleri  asp kontrollerinden türeterek oluşturduğunuz kontrollere ekleyerek asp.net sayfalarınıza ve asp.net kontrollerine yeni bir kontrol ekleyebilirsiniz. Bu ve benzeri kontroller oluşturarak her zaman ihtiyaç duyduğunuz kendi özel kontrol kütüphanenizi oluşturabilir ve yazılımlarınızı daha hızlı ve efektif yapabilirsiniz.

Makaleyi yazarken CSS yardımları için Erbuğ Kaya'ya verdiği destekler için teşekkür ederim. Makale 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

SmartPanel.cs

using System;
using System.Collections.Generic;
using System.Text;
using
System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using
System.Web;
using
System.Web.Security;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
namespace
ECERWebControls
{
    public class SmartPanel : System.Web.UI.WebControls.Panel
    {
        public SmartPanel(){}
        protected override voidOnLoad(EventArgs e)
        {
            base.OnLoad(e);
        }
        private string _GridTitle = "";
        [
Category("SmartPanelProperties")]
       
public string GridTitle
        {
            get { return _GridTitle;
        }
            set
     {
         _GridTitle =
value;
     }
    }
    private string _CssPrefix = "K";
    [
Category("SmartPanelProperties")]
    public
string CssPrefix
    {
        get
            {
return _CssPrefix; }
        set
             { _CssPrefix = value; }
    }
    protected override void Render(System.Web.UI.HtmlTextWriter writer)
    {
        string str = "";
        str +=
"<table width='100%' border='0' cellspacing='0' cellpadding='0'><tr><td class='" + _CssPrefix + "_TopLeftCorner'>&nbsp;</td><td class='" + _CssPrefix + "_TopBar'>" + "" + "<span id=GridHeaderCount class='GridHeaderCount'>" + GridTitle + "</span>";
        str +=
"</td><td class='" + _CssPrefix + "_TopRightCorner'>&nbsp;</td></tr><tr><td class='" + _CssPrefix + "_LeftBar'>&nbsp;</td><td class='" + _CssPrefix + "_Middle'>";
        str +=
"<table width='100%' border='0' cellpadding='0' cellspacing='0' class='" + _CssPrefix + "_MiddleHead'><tr><td>";
        writer.Write(str);
        base.Render(writer);
        str =
"";
        str +=
"</td></tr></table></td><td class='" + _CssPrefix + "_RightBar'>&nbsp;</td></tr><tr><td class='" + _CssPrefix + "_BottomLeftCorner'>&nbsp;</td>";
        str +=
"<td class='" + _CssPrefix + "_BottomBar'>&nbsp;</td><td class='" + _CssPrefix + "_BottomRightCorner'>&nbsp;</td></tr></table>";
        writer.Write(str);
    }
}
}

CSS dosyası

.K_TopLeftCorner{
background-image:url(images/Tables/11/topLeftCorner.jpg);
background-repeat:no-repeat;
height:36px;
width:23px;
}
.K_TopRightCorner{
background-image: url(images/Tables/11/topRightCorner.jpg);
background-repeat:no-repeat;
height:36px;
width:23px;
}
.K_BottomLeftCorner{
background-image: url(images/Tables/11/bottomLeftCorner.jpg);
background-repeat:no-repeat;
height:23px;
width:23px;
}
.K_BottomRightCorner{
background-image: url(images/Tables/11/bottomRightCorner.jpg);
background-repeat:no-repeat;
height:23px;
width:23px;
}
.K_TopBar{
background-image:url(images/Tables/11/topBar.jpg);
background-repeat:repeat-x;
height:32px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
}
.K_BottomBar{
background-image:url(images/Tables/11/bottomBar.jpg);
background-repeat:repeat-x;
height:36px;
}
.K_LeftBar{
background-image:url(images/Tables/11/leftBar.jpg);
background-repeat:repeat-y;
width:23px;
}
.K_RightBar{
background-image: url(images/Tables/11/rightBar.jpg);
background-repeat:repeat-y;
width:23px;
}
.K_Middle{
background-color:#006199;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight: normal;
color:#FFFFFF;
}
.K_MiddleHead{
background-color:#5495bb;
border-bottom:#FFFFFF 1px solid;
border-top:#FFFFFF 1px solid;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight: normal;
color:#FFFFFF;
height:22px;
padding-left:5px;
}