Makale Özeti

Bu yazıda Web Kontrollerinden TabSpriti inceliyoruz.

Makale

Bir önceki makalede MultiPage nesnesini anlatmıştık. Bu nesnenin en önemli tag ı "<iewc:PageView>...</iewc:PageView>" tagıdır. Bu nesneyi mümkün derecede HTML olarak kullanmanızı tavsiye ederim. Böylece PageView (sayfacık) içinde kullanacağınız örneğin textbox, buton, label vs... web kontrollerini daha iyi ayırt edebilirsiniz. Bugun kü yazımda anlatmaya çalışacağım TabSprit nesnesi ile bir MultiPage nesnesinin birlikte neler yapabileceğini anlatan basit bir örnek yapacağız.
2-) TabSprit
İlk önce tabsprit nedir,ne işe yarar bunu anlatmak istiyorum. Örneğin bir winform uygulamadaki tab Kontrolünü ele alalım. Form üzerine eklediğiniz tab kontrol nesnemiz tab lar ile oluşuyor, daha sonra bu oluşturduğumuz her tab birbirinden bağımsızdır. TabSprit nesnemiz de bu işlemi yapıyor. Sayfa bir defa yüklenir ve tablar arasında hareket ederken sayfanız dinamik bir yapı kazanır. Bu ziyaretcinin sayfanısı ziyaret ettiği zaman işlemlerini daha kolay ve hızlı bir şekilde yapması demek oluyor. Bugune kadar ziyaret ettiğim ve üye olduğum sayfalarda en çok üye işlemleri sinirlerimi bozuyordu. Çünkü sürekli basit bir hatırlatma işlemi için bile geriye dönmek oluyordu. Bunu önceden javascript olarak yapabiliyorduk ama tabsprit ile beraber bunun için javascript kodu yazmamıza gerek kalmıyor. Tarayıcımızda (Browser) sayfamızbir defa yüklenmiş olarak karşımıza geliyor ve işlemlerimizi hızlı bir şekilde yapabiliyoruz. Bu yazıyı yazarken nasıl bir örnek üzerinde anlatmalıyım diye çok düşündüm. Yazının sonunda bir üye kayıt formu yapacağız. Siz kendinize göre bir haber sitesindeki Politika, Spor, Teknoloji gibi veya bir donanım firmasına ait ürün katolog işlemlerini yapabilirsiniz.
Geçen uygulamamızı çalıştırıyoruz. Project Menusünden Add WebForm... seçeneği ile yada Solution Explorer penceresinden Projemizin üzerine sağ tıklama ile Add NewWebForm... ile yani bir sayfa ekliyoruz. Sayfamızın adını TabSpritCs.aspx olarak belirledikten sonra Toolbox penceresinden yeni eklediğimiz web kontrolleridnen tabsprit nesnesini web formumuzun üzerine ekliyoruz.(Şekil-1)
 

(Şekil-1)






Şekil-1 deki gibi ekledikten sonra tabsprit nesnemizin görünümünü istediğimiz gibi değiştirebiliriz. Bunun için Properties Penceresinden TabDefaultStyle sayesinde tab ların default stilini belirtebilcemiz bir css tanımlıyoruz. (Şekil-2)
 
(Şekil-2)

Yukarıdaki Şekil-2 de görüldüğü gibi Tabsprit nesnemiz, default iken yani webformumuzun tarayıcıda göründüğünde, karşımıza çıkacağı stili burdan belirtebiliyoruz. Şimdi yukarıdaki şekili biraz anlatmak istiyorum. Sağ tarafta bulunan iki özellik ;css imizin attribute ve value değerlerini belirtiyoruz. burda attribute de yazacağımız şey css in anlayabileceği türden bir şey olmalı örneğin background-color veya font-family gibi value de ise css in anladığı değerin içinde tanımlı bir değer olmalı mesela attributemiz color ise valuemiz iki seçenekte olmalı ya #FFFFFF veya Black gibi bu şekilde tabsprit nesnemizin diğer özelliklerinide istediğimiz şekilde ayarlayabiliriz.
TabSprit nesnemizin 3 adet stil özelliği bulunuyor.
1-) TabDefaultStyle   = Tarayıcıda ilk görünen stili burdan ayarlıyoruz
2-) TabHoverStyle     = Fare üstüne geldiği zaman istediğimiz değişikliği burdan ayarlıyoruz.
3-) TabSelecterStyle = Seçili olduğunda görünmesi istediğimiz değişiklik burdan belirtiyoruz.
Şimdi WebForm üzerine eklediğimiz TabSpritimizi, ben kendimce görünüm özelliklerini değiştiriyorum.
 
Yandaki şekilde de görüldüğü gibi ben sadece Background-color özelliğini #FFC080 olarak değiştirdim siz burda keyfinize göre istediğiniz Background renk ayarlamalarını, font-family isimlerini, font-size yazı boyutlarını hatta kendiniz bile bir css attribute tanımlayabilirsiniz.
Yandaki şekilde fare tabsprit nesnemzin içndeki tabların üstüne geldiğinde yapmasını istediğimiz görünüm değişikliğini belirtiyoruz.
Tabsprit nesnemizde seçili olan tab ımızın seçili olduğunda görünmesi istediğimiz stil özelliğini burdan belirtiyoruz.

Tabsprit nesnemizin Properties penceresinden Items özelliği ile TabItem Collection Editör seçeneğine geliyoruz.
(Şekil-6)

Şimdi birazda yukarıdaki pencereyi incelemek istiyorum. TabProperties Penceresindeki;
 
DefaultImageUrl      = Tab ımızın default görünümünde, görünmesini istediğimiz resim dosyasının adresi için;
HoverImageUrl         = Fare üstüne geldiği zaman ilk resmin değişip sonra görünmesini istediğimiz resim dosyasının adresi için;
SelectedImageUrl    = Tab ımızın seçili olduğunda görünmesi istediğimiz resmin adresini belirtiyoruz.
DefaultStyle            = Tabımızın default görünümünü burdan css attribute olarak değiştirebiliriz.
HoverStyle              = Fare üstüne geldiği zaman Tabımıza özel bir stil belirtmek için css attribute tanımlayabiliriz.
SelectedStyle         = Seçili olan tabımıza özel bir css attribute tanımlayabiliriz.

Not: Yukarıdaki DefaultStyle, HoverStyle ve SelectedStyle özellikleri tablar arasında farklılık yani tab a özel stil belirtmek için oluşturuluyor. Az önceki konuda geçen (Şekil-2) deki stil ise genel olarak tüm tabların bir standardını belirtiyor.
Yukarıdaki gibi kısa bir tanımlamadan sonra şimdi aşağıdaki şekilde oluşturduğumuz tablarda değişiklik yapıyoruz.
 
Index Numarası
Text
Değiştirdiğimiz Text
0 Tab1 Kisisel Bilgilerim
1 Tab2 Is Tecrubem
2 Tab3 Egitim Durumum
3 Tab4 Özellikler

Buraya kadar anlattığım konu sadece TabSprit nesnesinin görünüm ile ilgili kısmını anlattım. Şimdi WebFormumuzun üzerine bir MultiPage nesnesi sürükle bırak yöntemi ile ekliyoruz. Daha sonra TabSprit nesnemizin properties penceresindeki TargetID özelliğine MultiPage nesnemizin ID sini yazıyoruz. Biz 4 adet tab oluşturmuştuk bunlar;
 
1- Kisisel Bilgilerim
2- Is Tecrubem
3- Egitim Durumum
4- Özellikler
WebFormumuzun HTML bölümüne geliyoruz ve "<iewc:PageView>...</PageView>" tagları ile sayfacıkları oluşturuyoruz. Burda geçen yazımdan bugune kadar öğrendiğim tecrübeyi sizinle paylaşmak istiyorum.
Örneğin: İlk PageView ı oluştururken kullanacağımız nesneleri textbox, label, buton vs... nesneleri ilk önce webformda oluşturun stillerini görünümünü backcolor, forecolor,font-family vs... belirtin. daha sonra WebFormumuzun HTML bölümüne gelin ve MultiPage nesnemizin aşağıdaki örnekteki gibi, MultiPage nesnemizin HTML bölümünden dışında tanımlanmış olarak görünen label nesnesini kes - yapıştır yöntemi ile aşağıdaki gibi yaptıktan sonra her nesnenin Top ve Left özelliği ile pixer olarak değerleri ile oynadığınızda Sayfacıklar içinde istediğiniz koordinatta nesnelerinizi tasarlayabilirsiniz.
 
<iewc:MultiPage>
      <iewc:PageView>
      ...
      </iewc:PageView>
</iewc:MultiPage>
<iewc:MultiPage>
      <iewc:PageView>
           <asp:Label>....</asp:Label>
           <asp:Label>....</asp:Label>
           <asp:Label>....</asp:Label>
      </iewc:PageView>
</iewc:MultiPage>
<asp:Label>....</asp:Label>
<asp:Label>....</asp:Label>
<asp:Label>....</asp:Label>
 
 



Şimdi yukarıdaki HTML kodları ile webformumuzun nasıl görüneceğine aşağıdaki resimler ile bakalım.


Şimdi MultiPage nesnemiz ile tabsprit nesnemizin tasarım aşamalarını bitirip artık TabSpritCs.aspx sayfamızın code behind bölümüne gelmemiz gerekiyor. Burda geçen yazımda anlatmayı unuttuğum bir şeyi yazmak istiyorum MultiPage bir nesnedir. Bu nesne içinde oluşturduğumuz sayfacıklar içinde tanımladığımız nesneler örneğin textbox, label, buton vs... MultiPage nesnesine ait olup bunları code behind bölümünde göremezsiniz. onun için şöyle bir tanımlama yapmamız gerekiyor. Örneğin;

protected System.Web.UI.WebControls.Label LblKisisel;
protected System.Web.UI.WebControls.Label LblKisiselSoyad;
protected System.Web.UI.WebControls.Label LblKisiselAdres;
protected System.Web.UI.WebControls.Label LblKisiselIlce;
protected System.Web.UI.WebControls.Label LblKisiselPostaKodu;
protected System.Web.UI.WebControls.Label LblKisiselSehir;
Yukarıdaki gibi bi tanımlama yaptıktan sonra Labelların adları MultiPage nesnesinin içinde tanımladığımız labelların ID leri ile aynı olmalı.!!
Şimdi aşağıda uygulanacak code behind bölümündeki nesne tanımlamayı yazdım. Burda code behind bölümüne çalışacak kod yazmadım sadece ilerde veritabanı uygulaması yapmayı düşünürseniz. yapmanız gereken adım olan MultiPage içindeki nesneleri code behind bölümde tanımlama işlemini yaptım.

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace IEWebControls
{   
    ///<summary>
    /// Summary description for TabSpritCs. 
    /// </summary>    
public class TabSpritCs : System.Web.UI.Page{
#region TabSprit Ve MultiPAge nesnelerimin tanimlandigi yer
            protected Microsoft.Web.UI.WebControls.MultiPage MultiPage1;
            protected Microsoft.Web.UI.WebControls.TabStrip TabStrip1;
#endregion

#region
KisiselBilgilerim PageView olusturuldu
            protected System.Web.UI.WebControls.Label LblKisisel;
            protected System.Web.UI.WebControls.Label LblKisiselSoyad;
            protected System.Web.UI.WebControls.Label LblKisiselAdres;
            protected System.Web.UI.WebControls.Label LblKisiselIlce; 
            protectedSystem.Web.UI.WebControls.Label LblKisiselPostaKodu;
            protected System.Web.UI.WebControls.Label LblKisiselSehir;
            protected System.Web.UI.WebControls.Label LblKisiselCepTel;
            protected System.Web.UI.WebControls.Label LblKisiselEvTel;
            protected System.Web.UI.WebControls.Label LblKisiselemail;
            protected System.Web.UI.WebControls.Label LblKisiselCinsiyet;
            protected System.Web.UI.WebControls.Label LblKisiselDogTarih;
            protected System.Web.UI.WebControls.TextBox TxtKisiselAd;
            protected System.Web.UI.WebControls.TextBox TxtKisiselSoyad;
            protected System.Web.UI.WebControls.TextBox TxtKisiselAdres; 
            protected System.Web.UI.WebControls.TextBox TxtKisiselIlce;
            protected System.Web.UI.WebControls.TextBox TxtKisiselPostaKodu; 
            protected System.Web.UI.WebControls.DropDownList DDListKisiselSehir;
            protected System.Web.UI.WebControls.TextBox TxtKisiselCepTel;
            protected System.Web.UI.WebControls.TextBox TxtKisiselEvTel;
            protected System.Web.UI.WebControls.TextBox TxtKisiselemail;
            protected System.Web.UI.WebControls.DropDownList DDListKisiselCinsiyet;
            protected System.Web.UI.WebControls.TextBox TxtKisiselDogumTarihi;
#endregion

#region IsTecrubem PageView olusturuldu
            protected System.Web.UI.WebControls.Label LblIsTecrubemFirma;
            protected System.Web.UI.WebControls.Label LblIsTecrubemFaaliyetAlani;
            protected System.Web.UI.WebControls.Label LblIsTecrubemPozisyon;
            protected System.Web.UI.WebControls.Label LblIsTecrubemUnvan;
            protected System.Web.UI.WebControls.Label LblIsTecrubemBaslangicTarihi;
            protected System.Web.UI.WebControls.Label LblIsTecrubemCikisTarihi;
            protected System.Web.UI.WebControls.Label LblIsTecrubemCikisNedeni;
            protected System.Web.UI.WebControls.TextBox TxtIsTecrubemFirma;
            protected System.Web.UI.WebControls.TextBox TxtIsTecrubemFaaliyetAlani; 
            protected System.Web.UI.WebControls.TextBox TxtIsTecrubemPozisyon;
            protected System.Web.UI.WebControls.TextBox TxtIsTecrubemUnvan;
            protected System.Web.UI.WebControls.TextBox TxtIsTecrubemBaslangicTarihi;
            protected System.Web.UI.WebControls.TextBox TxtIsTecrubemCikisTarihi;
            protected System.Web.UI.WebControls.TextBox TxtIsTecrubemCikisNedeni;
#endregion

#region Egitim Durumu PageView Olusuruldu
            protected System.Web.UI.WebControls.Label LblEgitimBilgileriEgitimDuzeyi;
            protected System.Web.UI.WebControls.Label LblEgitimBilgileriOkul; 
            protected System.Web.UI.WebControls.Label LblEgitimBilgileriBaslangic;
            protected System.Web.UI.WebControls.Label LblEgitimBilgileriBitis; 
            protected System.Web.UI.WebControls.Label LblEgitimBilgileriMezuniyetDerecesi;
            protected System.Web.UI.WebControls.Label LblEgitimBilgileriBitirmeDerecesi;
            protected System.Web.UI.WebControls.DropDownList DDListEgitimBilgileriEgitimDurumu;
            protected System.Web.UI.WebControls.TextBox TxtEgitimBilgileriOkul;
            protected System.Web.UI.WebControls.TextBox TxtEgitimBilgileriBaslangic; 
            protected System.Web.UI.WebControls.TextBox TxtEgitimBilgileriBitis;
            protected System.Web.UI.WebControls.DropDownList DDListEgitimBilgileriMezuniyetDurumu; 
            protectedSystem.Web.UI.WebControls.TextBox TxtEgitimBilgileriBitirmeDerecesi;
#endregion

#region Özellikler PageView Olusturuldu
            protected System.Web.UI.WebControls.Label LblOzelliklerDil;
            protected System.Web.UI.WebControls.Label LblOzelliklerBilgisayar;
            protected System.Web.UI.WebControls.CheckBoxList CheckBoxListOzelliklerYabanciDil; 
            protected System.Web.UI.WebControls.CheckBoxList CheckBoxListOzelliklerBilgisayarBilgileri;
#endregion
private void Page_Load(object sender, System.EventArgs e)
{
}
#region Web Form Designer generated code
            override protected void OnInit(EventArgs e)
            {
                         InitializeComponent();
                         base .OnInit(e);
            }
            private void InitializeComponent()
            {
                         this.Load += new System.EventHandler(this.Page_Load); }
#endregion
}
}

Yukarıdaki code behind bölümünü yazmamdaki sebep daha önce multipage içinde oluşturduğumuz nesnelerimiz tek bir nesne olarak algılanıyor yani multipage, yukaridaki şekilde tanımlama ile birlikte bir veritabanı uygulaması yapabilirsiniz. Çünkü artık nesnelerimiz tanımlanmış olacaktır.

Bu yazımda sizlere elimden geldiğince tabsprit nesnesini anlatmaya çalıştım. Umarım geçen yazımdaki gibi burda da bir unutkanlık yapmamamışımdır. :) Bir sonraki yazımda ToolBar nesnesini anlatmaya çalışacağım. Şimdilik bu kadar diyorum  en kısa sürede görüşmek üzere...Konu ile ilgili olarak bana ulaşabilirsiniz mail adresim e_peganom@homail.com  .