Makale Özeti

Atlas Control Toolkit içerisindeki kontrolleri kullanarak her uygulamada ihtiyaç duyacağınız bir yardım kontrolü yazacağız.

Makale

Atlas teknolojisi genişletilerek oluşturulmuş olan Atlas Control Toolkit içerisinde sadece istemci taraflı işlemleri gerçekleştiren sunucu taraflı kontroller bulunmaktadır. Bu makalede amacımız bu kontrollerin bir kaçını kullanarak kullanıcı arabiriminde bir yardım kontrolü oluşturmaktır. Bu yardım kontrolünün özelliklerine baktığımızda:

1. Bir başlık alanının olmasını
2. Bu başlık alanına tıklayınca açılan menüde yardımın içeriğinin gösterilmesini
3. İnternet tarayıcısının boyutları ne olursa olsun sayfada illa ki gözükebilir olmasını, boyutları istemci tarafında büyütülüp küçültüldüğünde, scroll bar ile sayfa üzerinde ilerlendiğinde sağ üst köşedeki konumunu sürekli koruyabilmesini

hedeflediğimizi söyleyebiliriz.

Yardım kontrolü olarak adlandırdığımız kontolü oluşturmak için ilk önce Visual Studio 2005 arayüzünden "File --> New --> Web Site" seçeneğini seçerek, çıkan menüde "Atlas Web Site" şablonunu seçip yeni bir Atlas kullanılabilen web sitesi açalım. Bu örnek için ben "YardimKontrolu" adında bir web sitesini dosya sisteminde sunacak şekilde masa üstümde oluşturdum.

Görünüm itibari ile güzel bir arayüz sunmak için bir adet resim kullanılacaktır, bu resim "images" klasöründe bulunacaktır. Bir adet de css dosyası oluşturalım, içeriği aşağıdaki şekilde olsun:

.helpPanel {

      overflow:hidden;

}

.helpHeader

{

      color:White;

      font-weight:bold;

}

.helpContent

{

      color:White;

}

Web sitemizin üzerine sağ tıklayıp "Add New Item" seçeneğini seçip "ucHelp.ascx" isminde bir Web User Control oluşturalım. Bu web user control üzerine iki adet ASP.NET Panel kontrolü yerleştirelim. Bu panel kontrollerinden bir tanesi yardım alanımız için başlık kısmını oluşturacak, bir diğeri ise yardımın içeriğini görüntüleyecektir. Başlıkla ilgili olan panel aşağıdaki gibidir.

<asp:Panel ID="pnlHelpHeader" runat="server" Width="200px" CssClass="helpHeader">

    <div style="padding:5px; cursor: pointer; vertical-align: middle;">

        <div style="float: left;">Yardım Rehberi</div>

        <div style="float: right; vertical-align: middle;">

            <asp:Image ID="imgHelp" runat="server" ImageUrl="~/images/sample_templ.gif" />

        </div>

    </div>

</asp:Panel>

İçerik alanı için hazırlanmış panel ise aşağıdaki gibidir:

<asp:Panel ID="pnlHelpContent" runat="server" Width="200px" Height="0" CssClass="helpPanel">

    <div style="padding:5px; vertical-align: middle;">

        <asp:Label ID="lblHelpContent" runat="server" CssClass="helpContent"></asp:Label>

    </div>

</asp:Panel>

 

Yardımın içeriğini, lnlHelpContent isimli label içerisine kodlama aracılığıyla yazdıracağız. Bu iki paneli user control'ümüzün içerisine bıraktıktan sonra, Atlas Control Toolkit içerisindeki ilgili kontrolü kullanırken ihtiyaç duyacağımız bir başka panel daha oluşturuyoruz. Bu panel ise, alt alta duran yukarıdaki iki paneli içerisine alan bir panel olacaktır. Şu ana kadar yazdığımız user control'ün içeriği aşağıdaki gibi olmaktadır:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ucHelp.ascx.cs" Inherits="ucHelp" %>

<div style="float:right">

    <asp:Panel ID="pnlHelp" runat="server" BackColor="#4CB6E7" Width="200px">

        <asp:Panel ID="pnlHelpHeader" runat="server" Width="200px" CssClass="helpHeader">

            <div style="padding:5px; cursor: pointer; vertical-align: middle;">

                <div style="float: left;">Yardım Rehberi</div>

                <div style="float: right; vertical-align: middle;">

                    <asp:Image ID="imgHelp" runat="server" ImageUrl="~/images/sample_templ.gif" />

                </div>

            </div>

        </asp:Panel>

        <asp:Panel ID="pnlHelpContent" runat="server" Width="200px" Height="0" CssClass="helpPanel">

            <div style="padding:5px; vertical-align: middle;">

                <asp:Label ID="lblHelpContent" runat="server" CssClass="helpContent"></asp:Label>

            </div>

        </asp:Panel>

    </asp:Panel>

</div>

Artık bu noktadan sonra sayfamıza Atlas giydirmeye başlayabiliriz. İlk başta "<%@ Control" deklerasyonunun altına kullanacağımız Atlas Control Toolkit'in derlenmiş halini refere eden "<%@ Register" deklerasyonunu yerleştirelim:

<%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="act" %>

Ardından Atlas kullanılan her sayfada olması gereken Script Manager kontrolünü aşağıdaki özellikleri verilmiş şekilde ekleyelim:

<atlas:ScriptManager ID="smMaster" runat="server" EnablePartialRendering="True" EnableScriptGlobalization="true" EnableScriptComponents="true" />

Bu gerekli aşamayı da atlattıktan sonra artık Atlas Control Toolkit içerisindeki ilgili kontrolleri kullanmaya başlayabiliriz. İlk kullancağımız kontrol "Collapsible Panel" kontrolüdür. Bu kontrol bize yardım kontrolümüzün başlık paneli kısmına tıkladığımızda kapalı olan yardım içeriği panelinin animasyon vari bir şekilde açılmasını, tekrar tıkladığımızda ise kapanmasını sağlayacak olan kontrolümüzdür. Bu kontrolü aşağıdaki gibi yerleştirebiliriz:

<act:CollapsiblePanelExtender ID="cpeHelp" runat="server">

    <act:CollapsiblePanelProperties CollapseControlID="pnlHelpHeader" Collapsed="true" CollapsedImage="~/images/sample_templ.gif" CollapsedSize="0" ExpandControlID="pnlHelpHeader" ExpandDirection="Vertical" ExpandedImage="~/images/sample_templ.gif" ImageControlID="imgHelp" SuppressPostBack="true" TargetControlID="pnlHelpContent" />

</act:CollapsiblePanelExtender>

Burada verilmiş olan ayarları açıklayacak olursak:

1. CollapseControlID: Hangi kontrolün üzerine tıklandığında kapanma işleminin gerçekleşeceğinin belirtildiği özellik

2. Collapsed: Sayfa ilk yüklendiğinde açılır - kapanır olan içerik kısmının açık mı kapalı mı geleceğinin belirtildiği özellik

3. CollapsedImage: Kapalı durumdayken "ImageControlID" özelliğinde verilmiş olan resim kontrolünde hangi resimin gösterileceğinin belirtildiği özellik

4. CollapsedSize: Kapalı durumdayken içerik alanının boyutunun ne kadar olacağının belirtildiği özellik

5. ExpandControlID: Hangi kontrolün üzerine tıklandığında açılma işleminin gerçekleşeceğinin belirtildiği özellik

6. Expand Direction: Açılma - kapanma işleminin hangi yöne doğru yapılacağının belirtildiği özellik

7. ExpandedImage: Açık durumdayken "ImageControlID" özelliğinde verilmiş olan resim kontrolünde hangi resimin gösterileceğinin belirtildiği özellik

8. ImageControlID: Açık ya da kapalı durumdayken gözükecek olan resimlerin hangi kontrol tarafından gösterileceğinin belirtiliği özellik

9. SuppressPostBack: Açma - kapama işlemleri sırasında sayfanın tekrarda sunucuya gönderilip gönderilmeyeceğinin belirtildiği özellik

10. TargetControlID: Hangi kontrolün açılma ve kapanmaya mağruz kalacağının belirtildiği özellik

İkinci olarak kullanacağımız Atlas Control Toolkit kontrolü ise "Always Visible Control" olmaktadır. Bu kontrol, internet tarayıcısının boyutundan, konumundan, scroll bar'ın konumundan bağımsız olarak yardım kontrolümüzün görünmesini sağlayacak olan kontroldür. Aşağıdaki gibi yazılabilir:

<act:AlwaysVisibleControlExtender ID="avceHelp" runat="server">

    <act:AlwaysVisibleControlProperties HorizontalOffset="10" HorizontalSide="Right" TargetControlID="pnlHelp" VerticalOffset="10" />

</act:AlwaysVisibleControlExtender>

Bu kontrolün özelliklerine değinecek olursak aşağıdaki gibi açıklama yapabiliriz:

1. HorizontalOffSet: Her zaman görünmesi gereken, "TargetControlID" özelliğinde tanımlanmış kontrolün yatay olarak internet tarayıcısının kenarlarından ne kadar uzaklıkta duracağının belirtildiği özellik

2. HorizontalSide: Her zaman görünmesi gereken kontrolün ekranın neresinde durması gerektiğinin belirtildiği özellik

3. TargetControlID: Her zaman görünmesi gereken kontrolün belirtildiği özellik

4. VerticalOffset: Her zaman görünmesi gereken kontrolün dikey olarak internet tarayıcısının kenarlarından ne kadar uzaklıkta duracağının belirtildiği özellik

Üçüncü olarak gölgelendirme yapmak, görünümü güzel kılmak adına "Drow Shadow Control" kullanılacaktır. Bunun için de aşağıdaki tanımlamalar yapılabilir:

<act:DropShadowExtender ID="dseHelp" runat="server">

    <act:DropShadowProperties Rounded="true" TargetControlID="pnlHelp" TrackPosition="true" />

</act:DropShadowExtender>

Bu kontrolün özelliklerinin anlatımı aşağıdaki gibidir:

1. Rounded: Kontrole verilecek olan gölgenin köşelerinin yuvarlak olup olmayacağının belirtildiği özellik

2. TargetControlID: Hangi kontrole gölge verileceğinin belirtildiği özellik

3. TrackPosition: Kontrolün pozisyonunun takip edilip edilmeyeceğinin belirtildiği özellik

Artık kodlama aracılığı ile içeriğini verebileceğiniz ve her sayfada değiştirebileceğiniz bir yardım kontrolümüz olmuş oldu. Kolay bir kullanım olması açısından, yardım alanının içeriğinin otomatik olarak doldurulması için, hazırlanmış olan user control'ün Load olayında kullanılan Page_Load metoduna aşağıdaki kod parçasını eklemek anlamlı olacaktır:

try

{

    this.lblHelpContent.Text = File.ReadAllText(this.MapPath("~/App_Data/" + this.Request.Path.Substring(this.Request.Path.LastIndexOf('/') + 1) + ".txt"), Encoding.Default);

}

catch

{

    this.lblHelpContent.Text = File.ReadAllText(this.MapPath("~/App_Data/noHelpAvaliable.txt"), Encoding.Default);

}

 

Bu kod parçasının yaptığı iş, içinde bulunduğu sayfa istendiğinde, bu sayfanın adını almak ve buAd.txt isimli yardım içerik dosyasını ASP.NET 2.0 ile gelen App_Data klasörü içerisinde aramak olacaktır. Bulamadığı noktada ise yine App_Data klasörü içerisindeki noHelpAvaliable.txt isimli dosyanın içeriğini yardım içeriği olarak kullanacaktır. Örnek vermek gerekirse, default.aspx sayfası içerisinde çalışan bir yardım kontrolü, App_Data\default.aspx.txt isimli dosyanın içeriğini yardım içeriği olarak ekranda gösterecektir.

Bu kontrolün dizayn aşamasındaki görünümü Şekil 1'de, bir web sayfasındaki çalışır hali ise Şekil 2'de görüntülenmektedir. Kontrolün bitmiş halini, resimi ve css'i ile bilgisayarınıza indirip, çalıştırıp, deneyebilirsiniz. Küçük bir hatırlatma olması açısından, bu örneğin çalışabilmesi için web uygulamanızın "bin" klasöründe Atlas Control Toolkit'in derlenmiş haldeki dll'inin, ve onun referans ettiği dll'lerin bulunması gerektiğini hatırlatalım.

 

Şekil 1 Şekil 2
Yardım Kontrolü Projesi - Yardım Kontrolü + Deneme Sayfası