Makale Özeti

Günümüz internet kullanıcılarının web sitelerinde en çok aradıkları özelliklerin başında site içeriğini kendi gereksinimleri doğrultusunda özelleştirebilmek geliyor. Günümüzün en büyük portallarını incelersek, hepsinin kullanıcılarına bu özelliği sunduklarını görürüz..Örneğin msn.com, kullanıcılarına anasayfayı, ilgi alanlarına ve ihtiyaçlarına göre özelleştirebilmelerini sağlamaktadır.

Makale

Günümüz internet kullanıcılarının web sitelerinde en çok aradıkları özelliklerin başında site içeriğini kendi gereksinimleri doğrultusunda özelleştirebilmek geliyor. Günümüzün en büyük portallarını incelersek, hepsinin kullanıcılarına bu özelliği sunduklarını görürüz..Örneğin msn.com, kullanıcılarına anasayfayı, ilgi alanlarına ve ihtiyaçlarına göre özelleştirebilmelerini sağlamaktadır. 

Microsoft Sharepoint’in dünyada Microsoft’un dahi ön göremediği kullanım oralarına ulaşmasınında en önemli nedenlerinden biride sunulan içeriğin, kullanıcı tarafından, ihtiyaçlar ve tercihler doğrultusunda özelleştirilebiliyor olmasıdır..

ASP.NET 2.0, modüler yapıda web portalları geliştirmek son derece kolaylaştıran bir yöntem olan web part framework yapısını sunuyor..

ASP.NET 2.0 sunduğu hazır kontroller ile birlikte oluşturduğumuz web portallarında web part kullanımını son derece kolaylaştırıyor. Bu kontrolleri toolbox’ta Webparts bölümünde bulabilirsiniz. Bu makalede, ASP.NET web uygulamamızda web partları nasıl kullanabileceğimizi ele alıyor olacağız.

Web Partların Kullanımı
ASP.NET uygulamalarında web partları kullanabilmek için kullanıcının kimliği doğrulanmış olmalıdır. 

Varsayılan olarak ASP.NET, Windows authentication mekanizmasını kullanmaktadır ancak bu web uygulamasının internet üzerinden erişileceği durumlarda (yani çoğu durumda) pek kullanışlı bir yöntem değildir. Bu nedenle Forms authentication kullanmak daha doğru bir karar olacaktır.

Kimliği doğrulanmamış bir kullanıcı web part kullanan bir sayfayı görüntülemeye çalıştığında bir çalışma zamanı hatası oluşacaktır.

Web Partların Kullanımı
Web partların nasıl çalıştığını daha kolay anlamak için basit bir örneğin üzerinden gitmenin daha faydalı olacağını düşünüyorum.  

Sayfaya web part eklemenin iki yolu vardır:

  • Varolan bir web server kontrolünü sayfaya sürükleyerek bırakmak
  • Yeni bir web user kontrolü oluşturmak ve sayfaya eklemek

Her iki yolda da ilk olarak sayfaya bir WebPartManager kontrolü ve gerekli sayıda WebPartZone kontrolü eklememiz gerekecektir.

WebParManager: Sayfadaki tüm webpartları kontrol eder.

WebPartZone: Web Part kontrolleri için gerekli alanı sağlar. Bu kontrol web part kontrolleri için bir anchor gibi çalışır.  

Standart bir sunucu kontrolünden web part oluşturmak ile başlayalım.

  1. İlk olarak web partlar için bir anasayfa oluşturmamız gerekiyor. Visual Studio 2005 ile yeni bir web sitesi oluşturalım.
  2. Şimdi toolbox’tan bir WebpartMenuManager kontrolü sürükleyerek sayfaya bırakalım.WebPartManager kontrolü web form üzerindeki tüm web partları yönetir ve sayfaya eklenen ilk kontrol olmak zorundadır.
  3. webpartların sayfanızın neresinde yer alacağını belirlemek için sayfaya bir tablo ekliyoruz ve tablonun istediğimiz hücresine bir WebpartZone ekliyoruz. Her WebPartZone kontrolü, bir veya daha çok WebPart için host görevi görmektedir.

    <table border=0 width=500>
    <tr width=500 valign=top>
    <td width=250 align=center valign=top></td>
    <td width=250 align=center valign=top></td>
    </tr>
    </table>
  1. Artık bir web server kontrolü ekleyerek sayfaya biraz fonksiyonellik katabiliriz. WebPartZone1’e bir Calendar kontrolü sürükleyerek bırakıyoruz. Auto Format özelliğini kullanarak istediğimiz bir biçimlendirmeyi seçiyoruz.

    Bir kontrolü WebPartZone kontrolüne eklediğiniz zaman, ASP.NET 2.0 Web Parts Framework yapıyı özel bir tür olan GenericWebPart kontrolüne çevirir.
  2. Source View ekranına geçerek Calendar kontrolüne <title> özniteliğini ekleyerek değer olarak “Bugünün Tarihi” belirtiyoruz..

    <asp:Calendar ID="Calendar1" runat="server" title="Bugünün Tarihi" BackColor="White" BorderColor="#3366CC"
    ...


  3. Bildiğiniz gibi Calendar kontrolü aslında <title> özniteliğini desteklememektedir ancak bir WebPartZone kontrolüne eklendiğinde GenericWebPart kontrolüne dönüştürüldüğü için bu türün desteklediği <title> özniteliği kullanılabilir hale gelmektedir. <title> özniteliğinin değeri, GenericWebPart kontrolünün başlığı olarak kullanılacaktır.
  4. Bu aşamada webformumuz aşağıdaki gibi görünüyor olacaktır..
  5. Calendar kontrolünün Internet Explorer’da nasıl göründüğünü görmek için F5 tuşuna basıyoruz. Sayfa açıldığında, Calendar kontrolünün sağ üst köşesinde bir ok görüyoruz. Oku tıkladığımızda iki link ile karşılaşıyoruz. Minimize ve Kapat. Kontrolü minimize etmek için Minimize linkini tıklıyoruz, eski boyutunu getirmek içinse Minimize linkini tıkladığımızda aktif hale gelen Restore linkini tıklıyoruz.

    Calendar kontrolünün çalışma zamanındaki görünümü..


    Minimize ve Close linkleri.. minimize tıklandığında Restore linki aktif hale geliyor.


    Restore tıklandığında ise tekrar Calendar kontrolü görüntüleniyor.

Klasik bir web sunucu kontrolünün, web part’a dönüştürülmesi gördüğünüz gibi oldukça kolay. Şimdi bir adım ileri gidip bir portal sayfasına web part eklemeyi göreceğiz. Yeni bir user control oluşturacak ve WebPartZone’da görüntüleyeceğiz. Örnek kontrolümüz, kullanıcıların google’da arama yapabilmelerini sağlayan bir arayüz sunacaktır.

 

  1. İlk olarak Solution Explorer’da projeyi sağ tıklayarak projeye yeni bir Web User Control ekliyoruz. Kontrolün adını Google.ascx olarak belirtiyoruz.
  2. Oluşturduğumuz Web User Control’de bir google logosu kullanacağız. Kullanmak istediğimiz google logosunu http://www.google.com.tr/intl/tr/logos.html  sayfasından seçebliriz. Ben örneğe http://www.google.com.tr/logos/monet_logo.gif adresindeki logoyu kullanarak devam edeceğim.

Web User Control’e bir image kontrolü ekleyerek görüntülenecek grafik olarak yukarıdaki URL’yi veriyorum. Ek olarak bir textbox kontrolü ve bir buton ekliyorum. Web User Controlün son hali aşağıdaki gibidir.


Web User Control’ün html kodları ise aşağıdaki gibidir;

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="google.ascx.vb" Inherits="google" %>

<table border=0 width=250>

<tr width=250 align=center valign=top>

<td align=center width=250 colspan=2>

    <asp:Image ID="Image1" runat="server" ImageUrl="http://www.google.com.tr/logos/monet_logo.gif"

        Width="250px" /></td>

</tr>

<tr width=250 align=center valign=top>

<td align=center valign=top style="width: 68px">

    <asp:Label ID="Label1" runat="server" Text="Keyword:"></asp:Label></td>

<td width=170 align=center valign=top>

    <asp:TextBox ID="TextBox1" runat="server" Width="118px"></asp:TextBox>&nbsp;

    <asp:LinkButton ID="LinkButton1" runat="server">Ara</asp:LinkButton></td>

</tr>

</table>

Arama işlemini başlatacak olan LinkButton1’in Click olayına ise şu kodları yazıyoruz:

Dim qStr As String = HttpUtility.UrlEncode(TextBox1.Text)

Response.Redirect("http://www.google.com.tr/search?hl=tr&q=" & qStr & "&meta=")

  1. Şimdi Solution Explorer’dan Web User Control’ü sürükleyerek Default.aspx sayfasındaki WebPartZone2 alanına bırakıyoruz.
    Default.aspx sayfasının tasarım aşamasındaki görünümü aşağıdaki gibi oluyor..


  2. Google kontrolünün Untitled olarak göründüğünü farketmişsinizdir. Source View ekranına geçerek eklediğimiz user control’e <title> özniteliğini ekleyerek bu sorunu çözüyoruz..

    <uc1:google ID="Google1" runat="server" />
    Yukarıdaki kodu aşağıdaki şekilde güncellediğimizde
    <uc1:google ID="Google1" title="Google'a Sor" runat="server" />
    Sayfadaki kontrolün görünümü aşağıdaki gibi değişiyor:


  3. Sırada işin en zevkli kısmı, yani F5’e basarak kodun nasıl çalıştığını görmek var..

    Sayfa çalışma zamanında yukarıdaki gibi görünüyor.. Google’a kendimi sorduğumda;


    Arama sonuçları görüntüleniyor..

 

Bir Web User Control’ü tam anlamıyla Web Part olarak kullanmak için IWebPart arayüzünü ve özelliklerini implement etmemiz gerekir. Bunu gerçekleştirmek Web User Control’ün WebPart spesifik özelliklere (örneğin WebPart kontrolünün title veya icon özellikleri gibi) erişebilmemizi sağlar.

 

Partial Class Google_ascx
      Inherits System.Web.UI.UserControl
      Implements IWebPart

 

Eğer Web User Control’de IWebPart arayüzünü implement edersek, Title ve TitleUrl gibi WebPart özellikleri, web user control’ün Properties ekranında görüntülenecektir. Tabi IWebPart arayüzünün implement edilmesi, GenericWebPart’lara göre sadece bu özelliklere Properties ekranından doğrudan erişim değil, performans açısından da büyük avantaj sunmaktadır.

Daha Fazla Görsellik
Varsayılan olarak webpart kontrollerinin görünümü WebPartZone tarafından sunulan standart seçimler doğrultusunda belirlenir. Standart görünümü WebPartZone kontrolünün sunduğu özellikleri kullanarak geliştirebiliriz. Örneğin Minimize, Restore, Close ve Edit linklerinin standart simgelerini değiştirmek için aşağıdaki ifadeleri kullanabiliriz.

  • CloseVerb.ImageUrl = “images\close.gif”
  • EditVerb.ImageUrl = “images\edit.gif”
  • MinimizeVerb.ImageUrl = “images\minimize.gif”
  • RestoreVerb.ImageUrl = “images\restore.gif

Aynı zamanda AutoFormat özelliği ile daha gelişmiş görsel şemalar seçebiliriz. 

Bir sonraki bölümünde kişiselleştirilebilir bir web part kontrolü oluşturma konusunu ele alıyor olacağız.

Kadir Sümerkent
kadir@sumerkent.com