Makale Özeti

ASP.NET ile web uygulamalarında da kullanıcı arayüzlerinde bileşen temelli yazılım geliştirme olanağına kavuşuyoruz.

Makale

WebControlleri

Bu yazı dizisinde WebControllerini anlatmaya çalışacağım. Bunun için Bilgisayarımıza IEWebControls.msi dosyasını kurmanız gerekiyor.Bu dosya Sistemimize 4 adet yeni nesne ekleyecektir.Bu dosyayı   http://msdn.microsoft.com/downloads/samples/internet/asp_dot_net_servercontrols/webcontrols/default.asp  adresinden indirebilirsiniz. Gerekli olan dosyayı bilgisayarımıza kurduktan sonra. Konumuza başlayabiliriz ilk olarak MultiPage nesnesini anlatacağım.

1-MultiPage

MultiPage nedir?
Hepiniz az yada çok bir üye giriş sayfası görmüşsünüzdür. Kullanıcı bilgileri, Hesap Bilgileri, vs... gibi bir sürü başlıklı bir site düşünün burda ya birden fazla sayfa kullanacaksınız yada panellerle oluşturup tek tek nesnelerimiz panellerin üzerine oluşturacağız. MultiPage bu işlemleri biraz daha kolaylaştırıyor. WebForm üzerine birden fazla panel görmek yerine tekbir panel ile oluşturulan, panelleri kendisi bir index numarasına göre diziyor. MultiPage içinde "<iewc:PageView>" bu tag sayesinde sayfacıklarımız oluşturuyoruz. İlk oluşturduğumuz PageView e " 0 " index numarasını veriliyor ve sonraki oluşturulan "<iewc:PageView>" ile bu index numarası +1 artıyor. Şimdi MultiPage ile ilgili bir örnek yapmaya başlayalım. VS.NET i çalıştırıyoruz. Karşımıza gelen New Project penceresinden uygulama dili olarak C# ı, oluşturulacak proje türü olarak ise ASP.NET WebApplication u seçiyoruz. Daha sonra Location yazılan yere Projemizin adını IEwebControls olarak belirledikten sonra WebForm1.aspx dosyasının adını MultiPageCs.aspx olarak belirledikten sonra References işlemlerini yapmamaız gerekiyor.(Sekil-1) Bunun için ToolBox penceresine gelip fare ile sağ tıklıyoruz. Costumize toolbox seçeneği ile Nesnelerimiz toolbox a ekliyoruz.

                    Sekil-1

Şimdi MultiPageCs.aspx formumuzun üzerine ToolBoxdan MultiPage nesnemizi fare ile sürükle-bırak yapıyoruz. Şimdi MultiPage nesnemizin properties penceresindeki bazı özelliklerini inceleyim.(tablo-1)

ID MultiPage nesnemizin adını buraya yazıyoruz
SelectIndex Burda default olarak 0 dır multipage de oluşturduğumuz pageview 0 dan başlar burayı eğer 1 verirsen oluşturduğumuz pageview den index numaraı 1 olan sayfa ilk açıldığında gösterilir.
Show Previus Page Önceki Sayfacığa git;
Show Next Page Sonraki Sayfacığa git;

Tablo-1

MultiPageCs.aspx dosyamızın HTML kısmına geçiyoruz. Burda Sayfacık(pageview) oluşturmak için kullancağımız tag "<iewc:PageView></iewc:PageView>" Bu tag ler arasında oluşturduğumuz nesneler örneğin label, textbox, buton vs.. diğer pageview lerde ayrıdır. Her PageView kendi nesnelerinden sorumludur gibide düşünebiliriz.
Örnek bir tag oluşturalım;
<iewc:pageview>
     <asp:label id="AdLabel" style="Z-INDEX: 108; LEFT: 15px; POSITION: absolute; TOP: 30px" Runat="server">Ad</asp:label>
     <asp:label id="SoyadLabel" style="Z-INDEX: 107; LEFT: 15px; POSITION: absolute; TOP: 70px" Runat="server">Soyadı</asp:label>
     <asp:label id="AdresLabel" style="Z-INDEX: 106; LEFT: 15px; POSITION: absolute; TOP: 110px" Runat="server">Adres</asp:label>
     <asp:label id="MailLabel" style="Z-INDEX: 105; LEFT: 15px; POSITION: absolute; TOP: 150px" Runat="server">Mail</asp:label>
</iewc:pageview>
Oluşturduğumuzbu tag index numarası ilk olduğu için 0 dır.

Şimdi HTML kısmında yazacağımız kodlar şunlar.(tanlo-2)

<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Page language="c#" Codebehind="MultiPageCs.aspx.cs" AutoEventWireup="false" Inherits="IEWebControls.WebForm1" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta content="Microsoft Visual Studio 7.0" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">

<iewc:multipage id="MultiPage_Controls" style="Z-INDEX: 101; LEFT: 96px; POSITION: absolute; TOP: 23px" runat="server" BorderStyle="Solid" Width="440px" Height="271px" Font-Names="Verdana" Font-Size="10pt">

<iewc:pageview>

<asp:label id="AdLabel" style="Z-INDEX: 108; LEFT: 15px; POSITION: absolute; TOP: 30px" Runat="server">Ad</asp:label>
<asp:label id="SoyadLabel" style="Z-INDEX: 107; LEFT: 15px; POSITION: absolute; TOP: 70px" Runat="server">Soyadı</asp:label>
<asp:label id="AdresLabel" style="Z-INDEX: 106; LEFT: 15px; POSITION: absolute; TOP: 110px" Runat="server">Adres</asp:label>
<asp:label id="MailLabel" style="Z-INDEX: 105; LEFT: 15px; POSITION: absolute; TOP: 150px" Runat="server">Mail</asp:label>
<asp:textbox id="AdTxt" style="Z-INDEX: 104; LEFT: 110px; POSITION: absolute; TOP: 30px" Runat="server"></asp:textbox>
<asp:textbox id="SoyadTxt" style="Z-INDEX: 103; LEFT: 110px; POSITION: absolute; TOP: 70px" Runat="server"></asp:textbox>
<asp:TextBox ID="AdresTxt" style="Z-INDEX: 102; LEFT: 110px; POSITION: absolute; TOP: 110px" Runat="server" TextMode="MultiLine"></asp:TextBox>
<asp:TextBox ID="MailTxt" style="Z-INDEX: 101; LEFT: 110px; POSITION: absolute; TOP: 150px" Runat="server"></asp:TextBox>

</iewc:pageview>
<iewc:pageview>

<asp:Label ID="KlnAdLabel" style="Z-INDEX: 108; LEFT: 15px; POSITION: absolute; TOP: 30px" Runat="server">Kullanıcı Adı</asp:Label>
<asp:Label ID="SifreLabel" style="Z-INDEX: 107; LEFT: 15px; POSITION: absolute; TOP: 70px" Runat="server">Şifre</asp:Label>
<asp:Label ID="SifreTekrarLabel" style="Z-INDEX: 106; LEFT: 15px; POSITION: absolute; TOP: 110px" Runat="server">Şifre Tekrar</asp:Label>
<asp:TextBox ID="KlnTxt" style="Z-INDEX: 105; LEFT: 110px; POSITION: absolute; TOP: 30px" Runat="server"></asp:TextBox>
<asp:TextBox ID="SifreTxt" style="Z-INDEX: 104; LEFT: 110px; POSITION: absolute; TOP: 70px" Runat="server" TextMode="Password"></asp:TextBox>
<asp:TextBox ID="SifreTekrarTxt" style="Z-INDEX: 103; LEFT: 110px; POSITION: absolute; TOP: 110px" Runat="server" TextMode="Password"></asp:TextBox>

</iewc:pageview>
<iewc:pageview>

<asp:Label ID="SonLabel" style="Z_INDEX: 108; LEFT: 15px; POSITION: absolute; TOP: 30px" Runat="server" Font-Bold="True" Font-Size="14">Uyelik Antlaşması...</asp:Label>
<asp:Label ID="Son1Label" style="Z-INDEX: 107; LEFT: 15px; POSITION: absolute; TOP: 100px" Runat="server" Font-Italic="True" Font-Size="10"> Üyelik metnini okuduysanız kabul etmek için Tamam, Reddetmek için iptal butonuna basınız...</asp:Label>
<br>
<br>
<br>
<asp:Button ID="iptalButon" style="Z-INDEX: 103; LEFT: 110px; POSITION: absolute; TOP: 150px" Runat="server" Font-Bold="True" Font-Size="8" Text="İptal"></asp:Button>
<asp:Button ID="tamamButon" style="Z-INDEX: 102; LEFT: 10px; POSITION: absolute; TOP: 150px" Runat="server" Font-Bold="True" Font-Size="8" Text="Tamam"></asp:Button>

</iewc:pageview>
<iewc:pageview>

<asp:Label ID="IptalLabel" style="Z-INDEX: 102; LEFT: 15px; POSITION: absolute; TOP: 110px" Runat="server" ForeColor="#ff0066" Font-Bold="True" Font-Italic="True">Uyelik anlaşmasını İptal ettiniz iyi günler...</asp:Label>

</iewc:pageview>

</iewc:multipage>
<asp:linkbutton id="sonrakiLinkButon" style="Z-INDEX: 102; LEFT: 444px; POSITION: absolute; TOP: 304px" runat="server" Font-Names="Verdana" Font-Size="9pt">Sonraki >></asp:linkbutton>
<asp:linkbutton id="oncekiLinkButon" style="Z-INDEX: 103; LEFT: 102px; POSITION: absolute; TOP: 304px" runat="server" Font-Names="Verdana" Font-Size="9pt"><< Önceki</asp:linkbutton></form>
</body>
</HTML>


Tablo-2

Buraya kadar yaptığımız işlemler kısaca nesnelerimizi Oluşturduk yani dizayn bölümünü yaptık.  (Sekil-2)

Sekil-2

Yukarıdaki şekilde görüldüğü gibi 4 adet Sayfacığımız(PageView) var bunlardan ilki Kullanıcı Bilgilerini almak için, ikincisi Üyelik Bilgileri için, üçüncüsü ise Üyelik anlaşması için burda tamam butonuna tıklanınca İlk pageview a dönüyor ve son pageview ise üçüncü pageview da iptal butonuna basılması durumunda yapacağı işlemi gösteriyor.

Şimdi sayfamızın code behing bölümüne geçiyoruz.Burda şuna dikkat etmek gerekiyor. HTML olarak eklediğimiz bir nesnenin olayını mesela bu bir buton olabilir. Bunu Code Behing olarak göremiyoruz bunun için kendimiz bir click eventı tanımlayacağız. Örneğimizin bütün olay yordamları private void InitializeComponet() metodunda işlem görüyor. Bu metodun içine

private void tamamButon_Click(object sender, System.EventsArgs e)
{
      MultiPage_Controls.SelectIndex=0;
}
//*****

private void iptalButon_Click(object sender, System.EventsArgs e)
{
      sonrakiLinkButon.Enabled=false;
      oncekiLinkButon.Enabled=false;
      MultiPage_Controls.SelectIndex=3;
}

yukarıdaki iki metodu aşağıdaki tablodaki gibi tanımlamamız gerekiyor(Tablo-3)


private void InitializeComponent()
{
       this.sonrakiLinkButon.Click += new System.EventHandler(this.sonrakiLinkButon_Click);
       this.oncekiLinkButon.Click += new System.EventHandler(this.oncekiLinkButon_Click);
       this.tamamButon.Click += new System.EventHandler(this.tamamButon_Click);
       this.iptalButon.Click+=new System.EventHandler(this.iptalButon_Click);

       this.Load += new System.EventHandler(this.Page_Load);

Tablo-3

Bu tanımlama işleminden sonra LinkButonlarımızın hareket işlemleri için bir metod yapıyoruz.

private void hareket(int adim)
{
    MultiPage_Controls.SelectedIndex=i+adim;
    switch(MultiPage_Controls.SelectedIndex)
   {
      case 0:
          sonrakiLinkButon.Enabled=true;
          oncekiLinkButon.Enabled=false;
      break;
      case 1:
          sonrakiLinkButon.Enabled=true;
          oncekiLinkButon.Enabled=true;
      break;
      default:
          sonrakiLinkButon.Enabled=false;
          oncekiLinkButon.Enabled=true;
       break;
   }
}

Hareket metodumuzuda oluşturduktan sonra şimdi sonrakiLinkButon nesnemizin click olayına giriyoruz.
private void sonrakiLinkButon_Click(object sender, System.EventArgs e)
    {
          hareket(+1); // İleri gitmesi için +1 arttırıyoruz.
    }
oncekiLinkButon_Click(object sender, System.EventsArgs e)
   {
          hareket(-1);// geri gitmesi içim -1 değerni verdik
   }

Örneğimiz burada bitmiştir. Şimdi Code Behing daki kodlarım tümünü aşağıdaki tabloda inceleyebilirsiniz (Tablo-4)

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;  
using
Microsoft.Web.UI.WebControls;
namespace IEWebControls
{
///
/// Summary description for WebForm1. 
     public class WebForm1 : System.Web.UI.Page
    {
              protected System.Web.UI.WebControls.LinkButton sonrakiLinkButon;
              protected System.Web.UI.WebControls.LinkButton oncekiLinkButon;
              protected Microsoft.Web.UI.WebControls.MultiPage MultiPage_Controls;
              protected System.Web.UI.WebControls.Button tamamButon;
              protected System.Web.UI.WebControls.Button iptalButon;
              private int i;
              private void Page_Load(object sender, System.EventArgs e)
              {
                        i=MultiPage_Controls.SelectedIndex;
                        sonrakiLinkButon.Enabled=true;
                        oncekiLinkButon.Enabled=false;
               }
             #region Web Form Designer generated code
               override protected void OnInit(EventArgs e)
               {
                       InitializeComponent();
                       base .OnInit(e);
               }
               private void InitializeComponent()
               {
                       this.sonrakiLinkButon.Click += new System.EventHandler(this.sonrakiLinkButon_Click);
                       this.oncekiLinkButon.Click += new System.EventHandler(this.oncekiLinkButon_Click);
                       this.tamamButon.Click += new System.EventHandler(this.tamamButon_Click);
                       this.iptalButon.Click+=new System.EventHandler(this.iptalButon_Click);
                       this.Load += new System.EventHandler(this.Page_Load);
               }

            #endregion
            private void iptalButon_Click(object sender,System.EventArgs e)
            {
                      sonrakiLinkButon.Enabled=false;
                      oncekiLinkButon.Enabled=false;
                      MultiPage_Controls.SelectedIndex=3;
           }
           private void tamamButon_Click(object sender,System.EventArgs e)
           {
                     MultiPage_Controls.SelectedIndex=0;
           }
           private void oncekiLinkButon_Click(object sender, System.EventArgs e)
           {
                     hareket(-1);
           }
           private void hareket(int adim)
           {
                    MultiPage_Controls.SelectedIndex=i+adim;
                    switch(MultiPage_Controls.SelectedIndex)
                    {
                            case 0:
                                     sonrakiLinkButon.Enabled=true;
                                     oncekiLinkButon.Enabled=false;
                                     break; 
                            case 1:
                                     sonrakiLinkButon.Enabled=true;
                                     oncekiLinkButon.Enabled=true;
                                     break;
                            default:
                                     sonrakiLinkButon.Enabled=false;
                                     oncekiLinkButon.Enabled=true;
                                     break;
                    }
          }
          private void sonrakiLinkButon_Click(object sender, System.EventArgs e)
          {
                   hareket(+1);
          } //metod
     } //class
} //namespace

Tablo-4

Bu yazımda multipage i nasıl kullanılabileceğini anlatmaya çalıştım. Bir sonraki yazımda webcontrollerinden TabSprit nesnesini anlatmaya devam etmeye çalışacağım. Şimdilik bu kadar en kısa zamanda görüşmek üzere. Konu ile ilgili olarak bana mail atabilirsiniz.

Mail adresim : e_paganom@hotmail.com 

ERAY CAKIR