Bu gün dersimizde değişik web kontrollerinin kullanımını gösteren birkaç web sitesi hazırlayacağız. Önce Visual Studio 2005 i açalım.

Transkript

1 Bu gün dersimizde değişik web kontrollerinin kullanımını gösteren birkaç web sitesi hazırlayacağız. Önce Visual Studio 2005 i açalım. VS2005 den yeni bir web sitesi oluşturmasını isteyelim. Yeni bir ASP.NET Web Site seçeneğini seçtikten sonra web sitemizin adını girelim. Yeni web sitemizin adı Website1 dir. Bilgisayarınızda D:\InetPub\wwwroot\MT486_I\WebSite1 yeni bir dizin oluşturulduğunu ve bu dizine aşağıdaki resimde görülen dosyaların kendiliğinden konulduğunu göreceksiniz.

2 Web sitemize yeni bir sayfa eklemek için Website menüsünden Add New Item seçeneğini seçtikten sonra Yeni sayfamızın adını TebrikKart.aspx olarak belirleyip Add düğmesini tıklayalım. Bu işlemin sonunda web sitemize iki tane dosya eklediğini göreceğiz. TebrikKart.aspx dosyasının source kısmının içeriğini inceleyecek olursanız en başta Page Language="VB" AutoEventWireup="false" CodeFile="TebrikKart.aspx.vb" Inherits="TebrikKart" %> yazılı olduğunu göreceksiniz. Bu TebrikKart.aspx dosyasının kodunun TebrikKart.aspx.vb dosyasında bulunacağını ve TebrikKart.aspx.vb dosyasında tanımlanmış olan TebrikKart sınıfının bu sayfa tarafından kullanılacağını belirtmektedir. Partial Class TebrikKart Inherits System.Web.UI.Page End Class TebrikKart.aspx.vb dosyasının kaynağını inceleyecek olursak bu sınıfı tanımlanmış olduğunu, fakat henüz bir özelliğinin veya metodunun bulunmadığını göreceksiniz.

3 TebrikKart.aspx dosyasına bir takım kontroller iliştirmek istiyoruz. Bu sayfaya aşağıda görüldüğü gibi bir <DIV> elemanı eklemek istiyoruz. Bu <DIV> elemanın özelliklerinden style özelliğini değiştirmek istiyoruz. Bu stili aşağıdaki özellikleri taşıyacak şekilde oluşturalım. style="border-right: thin ridge; PADDING-RIGHT: 20px; BORDER-TOP: thin ridge; PADDING-LEFT: 20px; FONT-SIZE: x-small; PADDING-BOTTOM: 20px; BORDER-LEFT: thin ridge; WIDTH: 293px; PADDING-TOP: 20px; BORDER-BOTTOM: thin ridge; FONT-FAMILY: Verdana; HEIGHT: 508px; BACKGROUND-COLOR: lightyellow" Daha sonra sayfamıza bir panel koymak ve bu paneli div için oluşacak bölgenin sağına oturtmak istiyoruz.

4 Bu panelin stilini style="z-index: 110; LEFT: 352px; POSITION: absolute; TOP: 24px" olacak şekilde ayarlayalım. Ayrıca özelliklerini ID = "pnlcard" Height="496px" Width="336px" HorizontalAlign="Center" olacak şekilde değiştirelim. Sayfanızdaki <DIV> bölümünü aşağıdaki özellikleri taşıyan web kontrolleri ve metinlerle doldurunuz. Sayfanızın üzerini çift tıklayınız. TebrikKart.aspx.vb dosyası içinde aşağıdaki gibi bir olay kodu eklendiğini göreceksiniz.

5 Partial Class TebrikKart Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load End Class Bu sub programa aşağıdaki kodu ekleyiniz. Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Me.IsPostBack = False Then ' Renk leri sitemden alınız Dim ColorArray As String() = System.Enum.GetNames(GetType(System.Drawing.KnownColor)) ddarkarenk.datasource = ColorArray ddarkarenk.databind() ddonrenk.datasource = ColorArray ddonrenk.databind() ddonrenk.selectedindex = 34 ddarkarenk.selectedindex = 163 ' Fontları sitemden alınız Dim Family As Drawing.FontFamily Dim Fonts As New System.Drawing.Text.InstalledFontCollection() For Each Family In Fonts.Families ddfont.items.add(family.name) Next ' >Sınır seçeneklerini sistemden alınız Dim BorderStyleArray As String() = System.Enum.GetNames(GetType(BorderStyle)) stilborder.datasource = BorderStyleArray stilborder.databind() End If ' ilk seçeneği sınır için seçiniz stilborder.selectedindex = 0 ' varsayılan resimi seçiniz VarsayResim.ImageUrl = "SeyhanBarajGolu.jpg" VarsayResim.Visible = False Buraya kadar olanların ne işe yaradığını görmek için programınızı çalıştırınız. Karşınıza

6 Şkelinde bir mesaj çıkabilir. Bu mesaja OK seçeneği ile cevap veriniz. Şimdi Tebrik Kartını Oluştur düğmesine çift tıklayınız. Böylece bu düğme tıklanınca tebrik kartımızla ilgili yapacağımız işlemleri yazacağımız aşağıdaki gibi bir program bloğu karşımız çıkacaktır. Protected Sub cmdolustur_click(byval sender As Object, ByVal e As System.EventArgs) Handles cmdolustur.click Bu programı aşağıdaki gibi oluşturalım. Protected Sub cmdolustur_click(byval sender As Object, ByVal e As System.EventArgs) Handles cmdolustur.click ' Rengi düzenle pnlcard.backcolor = Drawing.Color.FromName(ddArkaRenk.SelectedItem.Text) lbltebrikkart.forecolor = Drawing.Color.FromName(ddOnRenk.SelectedItem.Text) ' Fontu seç lbltebrikkart.font.name = ddfont.selecteditem.text If Val(txtFontSize.Text) > 0 Then lbltebrikkart.font.size = FontUnit.Point(Val(txtFontSize.Text)) End If ' Sınır stilini oluştur pnlcard.borderstyle = System.ComponentModel.TypeDescriptor.GetConverter(GetType(BorderStyle)).Con vertfromstring(stilborder.selecteditem.text) ' Resimi yenile If chkresim.checked = True Then VarsayResim.Visible = True Else VarsayResim.Visible = False

7 End If ' Tebrik mesajını yaz lbltebrikkart.text = txttebrikmesaj.text Son olarak sayfa üzerindeki kontrollerde bir değişiklik olursa tebrik kartımızda da bir değişiklik olması için aşağıdaki olay kodunu ekleyelim. Private Sub ControlChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) _ Handles ddarkarenk.selectedindexchanged, chkresim.checkedchanged, _ ddonrenk.selectedindexchanged, stilborder.selectedindexchanged, _ ddfont.selectedindexchanged, txtfontsize.textchanged, txttebrikmesaj.textchanged ' Call the button event handler to refresh the window. cmdolustur_click(nothing, Nothing) Sayfamız artık kullanılmaya hazırdır. Bu nedenle başkalarının da bu sayfayı izleyebilmesi için sayfayı yayınlayalım. Bunu aşağıdaki seçenek ile yapabiliriz.