Makale Özeti

Bu makalemde sizlerle web sitelerinde genel bir sorun olan kullanıcıyı sayfayı gezerken help vermeyi kolaylaştıracak bir yöntem olarak kullanıclabilecek bir yöntemi inceleyeceğim. Bu yöntem web formlarımızda kullandığımız Label larımızı kişiselleştirerek çeşitli olaylarda bu label tarafından yardım gösterilmesini sağlamaktır

Makale

         Merhabalar,

         Bu makalemde sizlerle web sitelerinde genel bir sorun olan kullanıcıyı sayfayı gezerken help vermeyi kolaylaştıracak bir yöntem olarak kullanıclabilecek bir yöntemi inceleyeceğim. Bu yöntem web formlarımızda kullandığımız Label larımızı kişiselleştirerek çeşitli olaylarda bu label tarafından yardım gösterilmesini sağlamaktır.

         Bunun için ilk önce System.Web.UI.WebControls namespace i altında bulunan Label classını inherit eden bir class yaratacağız ve bu aşamadan sonra web formlarımızda bu Label'i kullanacağız. Bu Label in özelliği ise çeşitli javascript fonksiyonları ve eventlarıyla destekleniyor olmasıdır.

         Öncelikle bir tane Solution yaratıp bu Solutiona Bir Tane Web Bir Tanede Class Library projesi ekleyerek başlayalım.

         

         Daha sonra yarattığımız Class Library projesinin referanslarına System.Web namespacini ekliyoruz ve Class Librarymizi referans olarak Web Sitesi projemize ekliyoruz. Bundan sonra ise Class library Projemize HelpLabel adında yeni bir class eklemek.

         

         Ve sıra bu Class Dosyasının içeriğini düzenlemeye geliyor. İlk önce yarattığımız bu kontrolü System.Web.UI.WebControls.Label classından türetmek olacaktır.

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.ComponentModel;
namespace HelpLabelControl
{
      public class HelpLabel : System.Web.UI.WebControls.Label
      {
            public HelpLabel()
            {
            }

         Şimdi ise yardımın kullanıcılara nasıl gösterileceğinin belirleneceği property , bunun saklandığı member değişkeni ve bu değişkenin ve property nin tip olarak aldigi enum'u tanımlıyoruz.
         Bu seçeneklerden Layer yardım metninin bir layer üzerinde, StatusBar ise mevcut internetexplorer penceredinde bulunan statusbarda, Alert ise JSScript tarafından üzerilen bir Mesaj penceresinde gösterileceğini belirtmektedir.

            public enum eHelpType
            {
                  Layer=0,
                  StatusBar=1,
                  Alert=2
            }
            private eHelpType mHelpType;
            public eHelpType HelpType
            {
                  get
                  {
                        return mHelpType;
                  }
                  set
                  {
                        mHelpType = value;
                  }
            }

         Aşağıda yer alan property,enum, ve member variable ise bize yardımın hangi event tarafından tetikleneceğinin seçilmesi imkanını sunmaktadır.
         Burada yeralan seçeneklerden OnMouseDown Label üzerine mouse basıldığı anda, OnMouseOver ise mouse üzerinde hareket ettiği zamanda yardımın devreye gireceğini belirtmektedir.

            public enum eHelpDisplayType
            {
                  OnMouseDown = 0,
                  OnMouseOver = 1
            }
            private eHelpDisplayType mHelpDisplayType;
            public eHelpDisplayType HelpDisplayType
            {
                  get
                  {
                        return mHelpDisplayType;
                  }
                  set
                  {
                        mHelpDisplayType = value;
                  }
            }

         Bu propertyde ise yardım verilecek kendi label kontrolümüz üzerine gelindiğinde mouse imlecinin şeklinin nasıl olacağını belirleyebiliyoruz.

            public enum eCursorType
            {
                  Help = 0,
                  None = 1
            }
            private eCursorType mCursorType;
            public eCursorType CursorType
            {
                  get
                  {
                        return mCursorType;
                  }
                  set
                  {
                        mCursorType = value;
                  }
            }

         Aşağıda yer alan property be member değişken sayesinde ise Labelimiz yardım göstermek üzere tetiklendiği zamanda yardım metni olarak neyin gösterileceğinin belirlenmesi içindir.

            private string mHelpText;
            public string HelpText
            {
                  get
                  {
                        return mHelpText;
                  }
                  set
                  {
                        mHelpText = value;
                  }
            }

Bu kısımda ise belirlenmiş mouse imleç şekline,yardım gösterme şekine, yardımın gösterilmesini tetikleyecek event'a vede yardım metnine göre kontrolümüze yeteneklerini katacak olan javascript kodlarını ekliyoruz. Enum isimlerimiz aynı zamanda jScript evet isimlerine eşit olduğundan dolayı enum tipinden propertylerin değerlerinin encapsule edildiği member değişkenleri stringe ToString() metodu ile çevirerek kullanabiliyoruz. Yardımı tetikleyecek her event ın zıttı olan eventta ise yardım gösterilmesini devre dışı bırakıyoruz.

            protected override void  OnLoad(EventArgs e)
            {
                  base.OnLoad(e);
                  if (this.mHelpText != null)
                  {
                        this.Style.Add("CURSOR", mCursorType.ToString());
                        if (mHelpType == eHelpType.Alert)
                        {
                             this.Attributes.Add(mHelpDisplayType.ToString(), "alert('" + mHelpText + "')");
                        }
                        else if (mHelpType == eHelpType.StatusBar)
                        {
                             this.Attributes.Add(mHelpDisplayType.ToString(), "window.status='" + mHelpText + "'");
                             if (mHelpDisplayType == eHelpDisplayType.OnMouseDown)
                             {
                                   this.Attributes.Add("OnMouseUp", "window.status=''");
                             }
                             if (mHelpDisplayType == eHelpDisplayType.OnMouseOver)
                             {
                                   this.Attributes.Add("OnMouseLeave", "window.status=''");
                             }
                        }
                        else if (mHelpType == eHelpType.Layer)
                        {
                             this.Attributes.Add(mHelpDisplayType.ToString(), "helpDiv.style.top=event.y+17;helpDiv.style.left=event.x+17;helpDiv.innerHTML='" + mHelpText + "';helpDiv.style.visibility='visible';");
                             if (mHelpDisplayType == eHelpDisplayType.OnMouseDown)
                             {
                                   this.Attributes.Add("OnMouseUp", "helpDiv.style.visibility='hidden'");
                             }
                             if (mHelpDisplayType == eHelpDisplayType.OnMouseOver)
                             {
                                   this.Attributes.Add("OnMouseLeave", "helpDiv.style.visibility='hidden'");
                             }
                        }
                  }
            }
      }
}

Bu ise kontrolümüzü koyacağımız asp.net web formunun kod içeriğidir. Burada yer alan div ise Layer seçildiği durumda yardımın gösterileceği layerdır.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default"  %>
<%@ Import Namespace="HelpLabelControl" %>
<%@ Register Assembly="HelpLabelControl" Namespace="HelpLabelControl" TagPrefix="cc1" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<
body>
    <form id="form1" runat="server">
        <div>
            <cc1:HelpLabel ID="HelpLabel1" runat="server" HelpType=Layer Text=HelpLabel HelpDisplayType=OnMouseOver HelpText=YardimMetni></cc1:HelpLabel>
       
        </div>
        <div id="helpDiv"  style="position: absolute;
      z-index: 200;
      top: 0px;
      left: 0px;
      width: 100px;
      border: red 1px solid;
      height: 100px;
      background-color: #ecf0f3;visibility: hidden; font-size:small">
        </div>
    </form>
</body>
</
html>

Sizde bazı propertyler ekleyerek basit bir kontrolü kendinize göre özelleştirebilirsiniz.

Tamer ÖZ

oztamer@hotmail.com
tamer.oz@yazgelistir.com
oztamer@hotmail.com
Ornek Kodlar