Makale Özeti

Bu makalemizde ASP.NET 2.0 ile gelen yeni odaklanma(focus) özellikleri olan Page.SetFocus, DefaultFocus, DefaultButton ve SetFocusOnError başlıklarına yakından bakıyor olacağız.

Makale

ASP.NET Web formları üzerinde yer alan birçok kontrolümüz artık windows formlarını aratmayacak halde işlevsellik ile geliyor. Bunlardan en yenisi ASP.NET 2.0 ile gelen yeni odaklanma (focus) özellikleri. Birçok uygulamada sayfa yüklendiği anda belirli bir bilgi girişi yapılan kontrole odaklanılmasını isteyebilirsiniz, geçmişte bunu istemci taraflı javascript kodları kullanarak çözebiliyorduk ama artık bunu ASP.NET kontrollerinin bir özelliği olarak belirleyebiliyoruz. Bunun dışında birden fazla form içeren webform sayfalarında paneller kullanarak istediğimiz butonu default yapmak da elimizde. Son olarak bilgi denetleme kontrolleri kullanırken hata verilen yere odaklanma özelliği de kullanıcılar açısından daha kolay bir arayüz oluşturmamızı sağlıyor. İşte bütün bunlar aslında Focus API'ın güzel web becerileri. Gelin detaylı olarak bu bahsettiklerimize tek tek değinelim

Page.SetFocus

Sayfa yükleme sonrasında belirli bir imleç'in belirli bir kontrole odaklanmasını isteyebilirsiniz. ASP.NET 2.0'da bunu Page.SetFocus metodunu kullanarak yapabilirsiniz. Yapmanız gereken sayfa özelliğini arka plandaki veya kod içerisindeki programlama kodu kısmında bir kontrole vermek. Gelin hemen örnekle bakalım:

Page.SetFocus(TextBox1)

Bu kodu eklediğiniz sayfa içerisinde bulunan bir kontrol olan Textbox1 kontrolüne odaklanacaktır, örneğin bir butona basıldıktan sonra odaklanmasını istediğiniz kontrolü arka plandan bu şekilde kolaylıkla değiştirebilirsiniz.

DefaultFocus

Diğer bir özellik ise Form'un bir özelliği olarak karşımıza geliyor DefaultFocus. Form yüklenirken belirli bir kontrole odaklanılmasını sağlayabilirsiniz. Buna da bir örnekle bakalım:

<form id="form1" DefaultFocus="TextBox2" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</form>

DefaultButton

Diğer bir ASP.NET 2.0 yeni özelliği ise Buton sıralamasında yani hangi butona odaklanılacağında karşımıza çıkıyor; DefaultButton. Buna da bir örnek verecek olursak;

<form id="form1" DefaultButton="Button2" runat="server">
<asp:Button ID="Button1" runat="server" Text="Submit" />
<asp:Button ID="Button2" runat="server" Text="Submit" />
</form>

Böylece form'un yeni özelliği DefaultButton'ın hangi kontrol olduğunu söylememizle odaklanılacak öncelikli butonu belirlemiş oluyoruz.

SetFocusOnError

Son olarak inceleyeceğimiz özellik ise ASP.NET 2.0 ile gelen yeni özelliklerden biri olan hata anında mesajı verdikten sonra hata verilen kontrole odaklanabilmektir; SetFocusOnError. Böylece kullanıcılar hatayı daha kolay bir şekilde düzeltebilirler. Aslında SetFocusOnError özelliği Focus API'ın bize sunduğu güzel bir özelliklik. Nasıl kullanılabileceğine bakacak olursak:

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator SetFocusOnError="true" ErrorMessage="TextBox1 is empty"
ID="RequiredFieldValidator1" ControlToValidate="TextBox1" Display="Dynamic" runat="server">*</asp:RequiredFieldValidator>

Gördüğünüz gibi bir bilgi denetleme kontrolü olan RequiredFieldValidator kontrolünün yeni bir özelliği olan SetFocusOnError'u true yaparak hata anında ona odaklanmasını sağlayabiliyoruz.

Şimdi gelin bu bahsettiklerimizin hepsini içeren bir örnek yapalım ve gerçek dünyada nasıl bunları biraraya getirebileceğimizi somut olarak görelim. Yapacağımız sayfa bir kayıt sayfası ve kullanıcının birden fazla alan doldurması isteniyor içerisinde, dosyamızın adı: aspnet20_focus.aspx

<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">

Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As EventArgs)

If Not Panel1.Visible Then
Panel1.Visible = True
LinkButton1.Text = "Paneli Gizle"
il.Focus()
Else
Panel1.Visible = False
LinkButton1.Text = "Paneli Göster"
Page.SetFocus(soyad)
End If
End Sub

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As EventArgs)

Label1.Text = "Yazdığınız İl " & il.Text
End Sub

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Odaklanma Özellikleri Örneği</title>
</head>
<body>
<form id="form1" DefaultButton="Button1" DefaultFocus="ad" runat="server">
<div>
<h3>Odaklanma Özellikleri Örneği: Kayıt Formu</h3>
Soyadınız:
<asp:TextBox ID="soyad" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator SetFocusOnError="true" ErrorMessage="Soyad boş"
ID="RequiredFieldValidator1" ControlToValidate="soyad" Display="Dynamic" runat="server">*</asp:RequiredFieldValidator>
<br />
Adınız:
<asp:TextBox ID="ad" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator SetFocusOnError="true" ErrorMessage="Ad boş"
ID="RequiredFieldValidator2" ControlToValidate="ad" Display="Dynamic" runat="server">*</asp:RequiredFieldValidator>
&lt;-- Sayfa yüklenirken buraya odaklanıyor
<br />
Adres:
<asp:TextBox ID="adres" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator SetFocusOnError="true" ErrorMessage="Adres Boş"
ID="RequiredFieldValidator3" ControlToValidate="adres" Display="Dynamic" runat="server">*</asp:RequiredFieldValidator>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Submit" />
<br />
<br />
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
<asp:LinkButton ID="LinkButton1" CausesValidation="false" OnClick="LinkButton1_Click" runat="server">Paneli Göster</asp:LinkButton><br />
<br />
<asp:Panel Visible="false" DefaultButton="Button2" ID="Panel1" runat="server" Width="125px">
Bulunduğunuz İl:
<asp:TextBox ID="il" runat="server"></asp:TextBox><br />
<br />
<asp:Button ID="Button2" CausesValidation="false" runat="server" Text="Devam" OnClick="Button2_Click" />
<br />
<br />
<asp:Label ID="Label1" runat="server"></asp:Label><br />
</asp:Panel>
</div>
</form>
</body>
</html>


Dosya adı: aspnet20_odaklanma.aspx

Bu webform örneğinde gördüğünüz gibi soyad, ad ve adres soran bir kısım; bir de panel içerisinde yer alan ve il sorun ikinci bir kısım bulunmaktadır. Sayfa yükleme anında form tag'i içerisinde yer alan DefaultFocus sayesinde form yüklenir yüklenmez şekilde görüldüğü gibi ad kontrolüne odaklanmaktadır:


Şekil 1 : Odaklanma ad kontrolüne oluyor

Eğer soyad alanını doldurmadan submit butonuna basacak olursanız hata mesajını vereceği gibi aynı zamanda soyad alanına imleç'in odaklandığını göreceksiniz.

Panel'i göster link butonuna tıklarsanız karşınıza şekildeki gibi bir panel çıkacaktır:


Şekil 2: Panel'in Açık Olduğu Durum

Bu panel'in amacı özellikle birden fazla buton olan tek formlarda hem doğru butona odaklanmayı sağlamayı anlatmak, hem de arka plandaki kod içerisinde basılan butona göre farklı işlemlerin oluşabileceğini aktarmaktır. Ayrıca Buton2'deki CausesValidation="false" de yine ASP.NET 2.0 ile gelen hata oluşmasını engelleyen güzel bir yeni özelliktir.

Sonuç olarak ASP.NET 2.0 ile Focus API'ın özelliklerini kullanarak çok esnek ve kullanıcı dostu sayfalar tasarlamamız mümkün olmaktadır. Yeni bir yazımızda daha bilgiyi paylaşmak dileklerimle.

Mehmet Nuri ÇANKAYA
www.nuricankaya.com

Referanslar:
- http://msdn.microsoft.com/library/en-us/dnvs05/html/ValGroups.asp
- http://www.asp.net (QuickStartv20)