KMRT BSRN

"Hiç kimsenin ilgisine ihtiyaç duymadığın gün olgunlaşırsın. Hiç kimseden beklentiye girmediğin gün yara almazsın. Ve hiç kimseye bağımlı kalmazsan kazanırsın." OSHO

AJAX Drop Shadow Extender Server Control With JQuery

Yorum bırakın


JQuery ile geliştirilmiş resim kullanılmadan gölge efekti veren bir plugin arıyordum. Sonrasında aşağıdaki adreste örneklerini göreceğiniz, geliştirilmiş plugin’i keşfettim. http://playground.marmaladeontoast.co.uk/jquery.shadow/ Çok başarılı bir plugin olduğunu itiraf etmeliyim. Resim kullanmadan HTML elementlere çeşitli gölge efektleri verebilirsiniz. Tabii ki kullanılan teknik CSS3 kullanıyor. Bu da her tarayıcı versiyonunda çalışmayacağını gösteriyor. Genelde son versiyonlarda çalışmaktadır. Öncelikle plugin’i bu adresten indirin. https://github.com/sydlawrence/jQuery-Shadow

Şimdi Visual Studio ile AJAX Toolkit’ten alışık olduğumuz extender kontrolleri gibi bir Drop-Shadow Extender kontrolü geliştireceğiz. Bunun için bir tane ASP.NET Server Control Projesi oluşturmalısınız. Bu şekilde AJAX Control Toolkit gibi bir Dynamic Link Library(DLL) geliştireceğiz ve Toolbox’a ekleyerek buradan kullanabileceğiz. Bu yapacağımız basit ve eğitimsel projeden sonra eminim ki bir çok ASP.NET Server Control oluşturacaksınız ve projelerinizde kullanacaksınız. Sözü fazla uzatmadan başlayalım.

Boş bir Solution açarak başlayalım.

image

Ardından Solution’a 2 proje ekleyeceğiz. Bunlardan biri “ASP.NET Server Control” projesi diğeri de “ASP.NET Web Application” projesidir. Neden ASP.NET AJAX Server Control veya ASP.NET AJAX Server Control Extender eklemediğimizi düşünebilirsiniz. Onlarıda ilerleyen makalelerimizde kullanacağız. Şimdilik en basit yoldan yani temelden gideceğiz. Hemen Server Control projemizi ve ardından Web Application projemizi ekliyoruz.

image

image

ASP.NET Web Application projemize yukarıdaki DropShadow plugin’imizi ve örnek resimler ekleyeceğiz.

image

Resimde gördüğünüz gibi klasörleri oluşturarak plugin içindeki javascript(.js) ve style(.css) dosyalarını yerleştirin. Bu makaleyi yazdığım sıralarda JQuery’nin 1.7.1 versiyonu yayında olduğu için onuda projeye ekledim. Plugin ile gelen jquery-1.5.min.js dosyası yerine jquery-1.7.1.min.js dosyasını sayfamıza ekleyeceğiz. Örnek resim olarak da www.iconfinder.com adresinden 128×128 boyutlarında resimler bulabilirsiniz.

DropShadow isimli plugin’in kullanımı ile ilgili bir örnek yaparak projemize biraz kod yazmaya başlayabiliriz. WebForm1.aspx isimli web sayfamıza kodlarımızı ekleyelim.

Öncelikle webform’umuzda aşağıdaki elementler yer alacaktır.

HTML
<form id="form1" runat="server">
<%–Kutular–%>
<div id="infoboxes">
    <%–Kutu 1–%>
    <div class="m_box">
        <div>
            <img width="64px" height="64px" alt="" src="images/img(4).png" />
            <p>
                Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                architecto beatae vitae dicta sunt explicabo.
            </p>
        </div>
    </div>
    <%–Kutu 2–%>
    <div class="m_box">
        <div>
            <img width="64px" height="64px" alt="" src="images/img(2).png" />
            <p>
                Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                architecto beatae vitae dicta sunt explicabo.
            </p>
        </div>
    </div>
    <%–Kutu 3–%>
    <div class="m_box">
        <div>
            <img width="64px" height="64px" alt="" src="images/img(3).png" />
            <p>
                Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                architecto beatae vitae dicta sunt explicabo.
            </p>
        </div>
    </div>
</div>
</form>

Gördüğümüz gibi yapımız basit. <div id=“infoboxes”></div> isimli elementimiz ve içinde 3 ayrı <div class=”m_box”> bulunmaktadır. Bu div’ler içinde ise bir resim ve paragraf bulunmaktadır. Örnek resim ve metinlerimizi ilgili resim(img) ve paragraf(p) elementlerine ekledik. Sayfamızın element dizilimi bu şekilde olacak. Amacımız bu elementlerden class niteliği “m_box” olan elementlere DropShadow plugin’inin uygulanmasını sağlamaktır. Tabii ki bu uygulama javascript kodumuz ile DropShadow plugin’in sayfasında örneklendiği şekilde olacaktır.

Sayfamızın HEAD tag’ları arasına ekleyeceğimiz Style kodu ile bu elementleri biraz düzene koyacağız.

Style
<style type="text/css">
        body
        {
            font-family: Trebuchet MS Tahoma Times New Roman;
            font-size: 8pt;
        }
        img
        {
            float: left;
            margin-right: 10px;
            margin-left: 5px;
            margin-bottom: 10px;
            margin-top: 0px;
        }
        .m_box
        {
            border: 1px solid #808080;
            width: 350px;
            height: 80px;
            background-color: #E6E6E6;
            margin: 10px;
            padding: 5px;
        }
        .m_box div
        {
            opacity: 0.5;
        }
    </style>

 

Web Sayfamızın HEAD tag’ları arasına JQuery ve DropShadow ‘a ait javascript dosyalarını ve DropShadow’a ait style(css) dosyalarını yerleştiriyoruz. (Sağ tarafa solution explorer üzerinden HEAD tag’ları arasına sürükleyip bırakarak yapabilirsiniz.)

 

LINKS
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.shadow.js" type="text/javascript"></script>
    <link href="Style/jquery.shadow.css" rel="stylesheet" type="text/css" />

 

Son olarak HEAD tag’ları arasına gölgelendirme yapacak olan DropShadow plugin’in javascript kodunu ekleyeceğiz. Bu kod sayfa yüklendikten sonra çalışacak ve HTML elementlerimizi (id özelliği “infoboxes” olan ve içinde class özelliği “m_box” olan elementlerimize) gölgelendirme efektini uygulayacaktır.

 

JavaScript
<%–Bu Javascript kodu DropShadow Plugin'in kullanim seklidir.–%>
<script type="text/javascript">
    $(document).ready(function () {

        // Web sayfamizdaki ".m_box" stili uygulanmis tum elementler elde edilir.
        var boxes = $("#infoboxes .m_box");

        // Bu element'lere "lifted" ayarli olarak golgelendirme yapilir.
        // Aslinda ust satir ve bu satir golge efekt'i vermek icin yeterlidir.
        boxes.shadow("lifted");
    });
</script>

 

Sayfamızı bir çalıştıralım ve neler yapmış olduk bir görelim.

image

Çok şık göründüğünü itiraf etmeliyim. Tarayıcınızın son versiyon bir tarayıcı olması(IE 9 , Chrome vs..) önemli aksi halde şu şekilde görünecektir.

image

Rengi soluk gelebilir. Bunun sebebi class özelliği m_box olan elementlerin opacity değerinin 0.5 olmasıdır. Ayrıca belirtmem gerekiyor ki alttaki resmin üsttekinden daha net olduğunu göreceksiniz. Bunun sebebi gene opacity özelliğinin yeni tarayıcılarda geçerli olmasıdır. İşte tüm bu javascript ve css kodlarının o tarayıcıda çalışması, bu tarayıcıda çalışmaması sorunu insanın canını biraz sıkıyor ve insanı takla atmaya zorluyor. İleride inşallah tüm bu değişikliklerin standart ve tek bir tarayıcıda olması ve bizleri bu işkenceden kurtarmasını umuyoruz. Gülümseme

Sayfamızın tam kodunu aşağıda açıklamaları ile bakalım.

 

ASPX
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head id="Head1" runat="server">
    <%–?lgili javascript ve css dosyalarimizi sayfamiza bagliyoruz..–%>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.shadow.js" type="text/javascript"></script>
    <link href="Style/jquery.shadow.css" rel="stylesheet" type="text/css" />
    <%–Siz ugrasmayin diye ben biraz tasarim kodu yazdim.
    Bu sekilde sayfamizdaki HTML element'leri yola getirebilecegiz. 🙂 —%>
    <style type="text/css">
        body
        {
            font-family: Trebuchet MS Tahoma Times New Roman;
            font-size: 8pt;
        }
        img
        {
            float: left;
            margin-right: 10px;
            margin-left: 5px;
            margin-bottom: 10px;
            margin-top: 0px;
        }
        .m_box
        {
            border: 1px solid #808080;
            width: 350px;
            height: 80px;
            background-color: #E6E6E6;
            margin: 10px;
            padding: 5px;
        }
        .m_box div
        {
            opacity: 0.5;
        }
    </style>
    <%–Bu Javascript kodu DropShadow Plugin'in kullanim seklidir.–%>
    <script type="text/javascript">
        $(document).ready(function () {

            // Web sayfamizdaki ".m_box" stili uygulanmis tum elementler elde edilir.
            var boxes = $("#infoboxes .m_box");

            // Bu element'lere "lifted" ayarli olarak golgelendirme yapilir.
            // Aslinda ust satir ve bu satir golge efekt'i vermek icin yeterlidir.
            boxes.shadow("lifted");
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <%–Kutular–%>
    <div id="infoboxes">
        <%–Kutu 1–%>
        <div class="m_box">
            <div>
                <img width="64px" height="64px" alt="" src="images/img(4).png" />
                <p>
                    Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo.
                </p>
            </div>
        </div>
        <%–Kutu 2–%>
        <div class="m_box">
            <div>
                <img width="64px" height="64px" alt="" src="images/img(2).png" />
                <p>
                    Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo.
                </p>
            </div>
        </div>
        <%–Kutu 3–%>
        <div class="m_box">
            <div>
                <img width="64px" height="64px" alt="" src="images/img(3).png" />
                <p>
                    Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo.
                </p>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

 

Şimdi buraya kadar yapımızı çalıştırmayı başardık. Peki amacımız neydi? Amacımız bu gölgelendirme yapısını AjaxControlToolkit’deki gibi bir Extender kontrolü şeklinde kullanmaktır. Bunun için yapımıza bir bakalım. Özellikle DropShadow efektinin uygulandığı javascript kısmına odaklanmalıyız. Çünkü DropShadow uygulanacak elementleri bulup onlara Shadow uygulayan orasıdır. Bize gerekli olan Extender kontrolünde hangi id’li element içinde, hangi class niteliğine sahip elementlere Shadow efekti vereceğimizi belirtebileceğimiz ve hangi efekt modunda Shadow uygulayacağımızı belirtebileceğimiz bir Server kontrolü geliştireceğiz. Sonucu şimdi göstererek hayalimizde “Tüm’den gelim” uygulamak daha mantıklı olacak gibi. Elde etmeye çalıştığımız kontrol’ü şu şekilde kullanmak istiyoruz.

 

Drop Shadow Ext.Server Control
<cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="infoboxes"
        ClassName="m_box" ShadowMode="lifted" />

 

Sol taraftan sürükleyerek sayfamıza bir Label kontrolü ekler gibi geliştireceğimiz extender kontrolünü sayfamıza ekliyor olacağız. Sonrasında “TargetControlID” isimli özelliğimize hangi efekt uygulamak istediğimiz elementleri içeren üst element id’sini belirteceğiz. “ClassName” özelliğine efekt’in uygulanacağı elementlerin sahip olduğu class niteliği değerini vereceğiz. Son olarak ‘ta “ShadowMode” ile ne tür bir efekt uygulanacağını belirteceğiz.

ASP.NET Server Control projemize “DropShadowExtender” isimli bir Server Control ekliyoruz.

image

Ayrıca yapacağımız extender içinde uygulayabileceğimiz gölge efektlerini listeleyeceğimiz bir Enum ekleyeceğiz. Bunun için projemize bir tane de class ekleyeceğiz.

image

DropShadowMode.cs
namespace JSDropShadowExtender
{
    public enum DropShadowMode
    {
        lifted = 0,
        perspective = 1,
        raised = 2,
        sides_vt_1 = 3,
        sides_vt_2 = 4,
        sides_hz_1 = 5,
        sides_hz_2 = 6,
        rotated_5degree = 7
    }
}

Bu şekilde Enum yapımıza gölge modlarımızı girelim. Bu listedeki isimler mode’ları anlamlı olarak belirtmek içindir. Kodumuzu bu mode’a göre yapılandıracağız.

Projemize bir de resim ekleyeceğiz. Bu resim toolbox’da kontrolümüzün ikonu olacak şekilde belirleyeceğiz. Resmimizin 16×16 olması yeterlidir. Resmimizin özelliklerinde “BuildAction” özelliğini “Embedded Resources” olarak belirlemezsek Toolbox’da kontrolümüze ait ikon göremeyiz. Server kontrolümüzün kodu ise ilk aşamada şu şekilde olacaktır.

 

DropShadowExtender.cs
using System;
using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;

namespace JSDropShadowExtender
{
    [DefaultProperty("TargetControlID")]
    [ToolboxData("<{0}:DropShadowExtender runat=server></{0}:DropShadowExtender>")]
    [ToolboxBitmap(typeof(DropShadowExtender), "ok.png")]
    [Description("Elementlere golge efekti verir. PLUGIN URL : https://github.com/sydlawrence/jQuery-Shadow&quot;)]
    public class DropShadowExtender : WebControl
    {
        //
        // Local degiskenler..
        //
        private string _TargetControlID;
        private string _ClassName;
        private DropShadowMode _ShadowMode;

        //
        // Ozellikler..
        //
        /// <summary>
        /// Icindeki elementlere golge uygulanacak olan dedef element ID'si.
        /// </summary>
        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]
        public string TargetControlID {
            get {
                String s = (String)ViewState["TargetControlID"];
                return ((s == null) ? this._TargetControlID : s);
            }

            set {
                ViewState["TargetControlID"] = value;
                this._TargetControlID = value;
            }
        }

        /// <summary>
        /// TargetControlID icindeki golge uygulanacak olan class niteligi degeri.
        /// </summary>
        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]
        public string ClassName {
            get {
                String s = (String)ViewState["ClassName"];
                return ((s == null) ? this._ClassName : s);
            }

            set {
                ViewState["ClassName"] = value;
                this._ClassName = value;
            }
        }

        /// <summary>
        /// Golge efekti turu.
        /// </summary>
        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]
        public DropShadowMode ShadowMode {
            get {
                DropShadowMode s = (DropShadowMode)ViewState["ShadowMode"];
                return s;
            }

            set {
                ViewState["ShadowMode"] = value;
                this._ShadowMode = value;
            }
        }

        protected override void RenderContents(HtmlTextWriter output) {

        }
    }
}

 

Server kontrolümüzü şimdilik yukarıdaki gibi kodlayacağız. Belirttiğimiz özellikleri(property) tanımladık. Ayrıca kontrolümüzün niteliklerini belirledik. “ToolboxData” , “ToolboxBitmap” , “Description” ifadelerini istediğimiz gibi düzenledik. Son olarak kontrolümüzün ekranda nasıl bir HTML çıktı oluşturacağını belirteceğimiz kısıma bunun için hazır olarak bize “RenderContents” isimli metot verilmiştir. Bunun içine yazacağımız kodları “output” parametresinde bize gelen “HtmlTextWriter” kullanarak ekrana aktaracağız. Extender kontrolleri genelde ekranda bir çıktı üretmezler, sadece çalışacak olan kodların oluşturulmasını sağlarlar. Bizde ihtiyacımız olan javascript kodunun sayfamızda belirttiğimiz özelliklerde otomatik oluşturulmasını sağlayacağız.

 

DropShadowExtender.cs
protected override void RenderContents(HtmlTextWriter output) {

    if (!string.IsNullOrEmpty(this.TargetControlID) &&
        !string.IsNullOrEmpty(this.ClassName)) {

        // Sayfamiza otomatik olarak olusturarak ekleyecegimiz javascript kodu kalibi.
        // [<…>] seklinde belirttigimiz kisimlari yukarida tanimladigimiz ozelliklerin degerine gore
        // degistirecegiz ve javascript'imizi olusturacagiz.
        string script =
            "$(document).ready(function () " +
            "{ " +
                "var boxes = $('#[<TargetControlID>] .[<ClassName>]'); " +
                " boxes.shadow('[<ShadowMode>]');" +
            "});";

        string shadowModeString = string.Empty;

        // Secili ShadowMode'a uygun kodun elde edilmesi..
        switch (this.ShadowMode) {
            case DropShadowMode.lifted:
                shadowModeString = "lifted";
                break;
            case DropShadowMode.perspective:
                shadowModeString = "perspective";
                break;
            case DropShadowMode.raised:
                shadowModeString = "raised";
                break;
            case DropShadowMode.sides_vt_1:
                shadowModeString = "{type:'sides', sides:'vt-1'}";
                break;
            case DropShadowMode.sides_vt_2:
                shadowModeString = "{type:'sides', sides:'vt-2'}";
                break;
            case DropShadowMode.sides_hz_1:
                shadowModeString = "{type:'sides', sides:'hz-1'}";
                break;
            case DropShadowMode.sides_hz_2:
                shadowModeString = "{type:'sides', sides:'hz-2'}";
                break;
            case DropShadowMode.rotated_5degree:
                shadowModeString = "{type:'rotated',rotate:'-5deg'}";
                break;
            default:
                shadowModeString = "lifted";
                break;
        }

        // Ozellik degerlerinin javascript kalibina yerlestirilmesi.
        script = script.Replace("[<TargetControlID>]", this.TargetControlID);
        script = script.Replace("[<ClassName>]", this.ClassName);
        script = script.Replace("[<ShadowMode>]", shadowModeString);

        // Script'imiz icin bir key belirliyoruz.
        string scriptKey = "DropShadowScript_" + this.ID;

        // Javascript kodumuzun sayfanin en altina yerlestirilcek sekilde sayfaya eklenmesinin saglanmasi.
        Page.ClientScript.RegisterStartupScript(
            this.GetType(), scriptKey, script, true);

    }
}

 

Kod içinde gerekli açıklamaları yaptım. Projemizi derleyelim ve “WebForm1.aspx” ‘e geri dönelim. “Design” ekranına geçtiğimizde “Toolbox” ‘da kontrolümüzü görüyoruz. Kontrolümüzü sayfamıza ekliyoruz. Ekleme işleminden sonra otomatik olarak Visual Studio tarafından ASP.NET Server Control projemiz referans olarak projemize ekleniyor. Sayfamızın üstünde kontrolümüzü içeren referans Assembly tanımlanıyor. Kontrolümüze ait tag’lar ekleniyor. Önceden yazdığımız javascript kodunu açıklama satırı yaparak pasif hale getiriyoruz. Extender kontrolümüzün özelliklerini giriyoruz. Ardından sayfamızı görüntüleyelim.

 

ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JSSampleDropShadow.WebForm1" %>

<%@ Register Assembly="JSDropShadowExtender" Namespace="JSDropShadowExtender" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head id="Head1" runat="server">
    <%–?lgili javascript ve css dosyalarimizi sayfamiza bagliyoruz..–%>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.shadow.js" type="text/javascript"></script>
    <link href="Style/jquery.shadow.css" rel="stylesheet" type="text/css" />
    <%–Siz ugrasmayin diye ben biraz tasarim kodu yazdim.
    Bu sekilde sayfamizdaki HTML element'leri yola getirebilecegiz. 🙂 —%>
    <style type="text/css">
        body
        {
            font-family: Trebuchet MS Tahoma Times New Roman;
            font-size: 8pt;
        }
        img
        {
            float: left;
            margin-right: 10px;
            margin-left: 5px;
            margin-bottom: 10px;
            margin-top: 0px;
        }
        .m_box
        {
            border: 1px solid #808080;
            width: 350px;
            height: 80px;
            background-color: #E6E6E6;
            margin: 10px;
            padding: 5px;
        }
        .m_box div
        {
            opacity: 0.5;
        }
    </style>
    <%–Bu Javascript kodu DropShadow Plugin'in kullanim seklidir.–%>
    <%–Pasif durumda yani calismaz..–%>
    <%—    <script type="text/javascript">
        $(document).ready(function () {

            // Web sayfamizdaki ".m_box" stili uygulanmis tum elementler elde edilir.
            var boxes = $("#infoboxes .m_box");

            // Bu element'lere "lifted" ayarli olarak golgelendirme yapilir.
            // Aslinda ust satir ve bu satir golge efekt'i vermek icin yeterlidir.
            boxes.shadow("lifted");
        });
    </script>–%>
</head>
<body>
    <form id="form1" runat="server">
    <%–Kutular–%>
    <div id="infoboxes">
        <%–Kutu 1–%>
        <div class="m_box">
            <div>
                <img width="64px" height="64px" alt="" src="images/img(4).png" />
                <p>
                    Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo.
                </p>
            </div>
        </div>
        <%–Kutu 2–%>
        <div class="m_box">
            <div>
                <img width="64px" height="64px" alt="" src="images/img(2).png" />
                <p>
                    Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo.
                </p>
            </div>
        </div>
        <%–Kutu 3–%>
        <div class="m_box">
            <div>
                <img width="64px" height="64px" alt="" src="images/img(3).png" />
                <p>
                    Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo.
                </p>
            </div>
        </div>
    </div>
    <cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="infoboxes"
        ClassName="m_box" ShadowMode="lifted" />
    </form>
</body>
</html>

 

Sayfamız yine istediğimiz gibi çalışıyor. Böylece kendimizi javascript kodu yazmaktan kurtarmış olduk.

image

Sayfamızın Source’una bakalım nasıl birşey üretilmiş.

 

HTML Source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head id="Head1">
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.shadow.js" type="text/javascript"></script>
    <link href="Style/jquery.shadow.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body
        {
            font-family: Trebuchet MS Tahoma Times New Roman;
            font-size: 8pt;
        }
        img
        {
            float: left;
            margin-right: 10px;
            margin-left: 5px;
            margin-bottom: 10px;
            margin-top: 0px;
        }
        .m_box
        {
            border: 1px solid #808080;
            width: 350px;
            height: 80px;
            background-color: #E6E6E6;
            margin: 10px;
            padding: 5px;
        }
        .m_box div
        {
            opacity: 0.5;
        }
    </style>
    <title></title>
</head>
<body>
    <form method="post" action="WebForm1.aspx" id="form1">
    <div class="aspNetHidden">
        <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTUwNDMyMDA4N2RkfHdssebibenUJPh2evilDAOipWvUGqW2OczFsQV6yik=" />
    </div>
    <div id="infoboxes">
        <div class="m_box">
            <div>
                <img width="64px" height="64px" alt="" src="images/img(4).png" />
                <p>
                    Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo.
                </p>
            </div>
        </div>
        <div class="m_box">
            <div>
                <img width="64px" height="64px" alt="" src="images/img(2).png" />
                <p>
                    Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo.
                </p>
            </div>
        </div>
        <div class="m_box">
            <div>
                <img width="64px" height="64px" alt="" src="images/img(3).png" />
                <p>
                    Ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo.
                </p>
            </div>
        </div>
    </div>
    <span id="DropShadowExtender1"></span>
    <script type="text/javascript">
//<![CDATA[
        $(document).ready(function () { var boxes = $('#infoboxes .m_box'); boxes.shadow('lifted'); });//]]>
    </script>
    </form>
</body>
</html>

 

Web sayfasını çalıştırdıktan sonra sayfa kaynağına(Source) baktığınızda en altta javascript kodunun nasıl eklendiğini görebilirsiniz.. İsterseniz DrowShadowExtender kontrolümüzde CSS(style) yapısınında kullanıcı tarafından bir özellik ile girilebilmesin ve varsayılan olarak bizim tanımladığımız gibi olmasını sağlayabilirsiniz. Kontrolün geliştirilmesi tamamen sizin hayal gücünüze kalmış durumdadır. Olayın mantığı kısaca budur.

Peki javascript kodumuzu değiştirerek kontrolümüzü biraz daha geliştirelim ve makalemizi tamamlayalım. Hatırlıyorsanız “m_box” isimli stil etiketine “opacity” uygulamıştık. Bu sebepten dolayı sayfamızda soluk bir görüntüsü oluşmaktadır. şimdiki amacımız fare ile hangi kutu üzerine gelirsek onun netleşmesinin ve mouse ile üzerinden gidince gene soluk renklenmesini sağlayalım. Böylece sayfamıza bir hareketlilik te katmış oluruz. Bunun için DropShadowExtender kontrolümüzün “RenderContents” metodunun içindeki javascript kalıbını yenileyelim.

 

DropShadowExtender.cs
protected override void RenderContents(HtmlTextWriter output) {

    if (!string.IsNullOrEmpty(this.TargetControlID) &&
        !string.IsNullOrEmpty(this.ClassName)) {

        // Sayfamiza otomatik olarak olusturarak ekleyecegimiz javascript kodu kalibi.
        // [<…>] seklinde belirttigimiz kisimlari yukarida tanimladigimiz ozelliklerin degerine gore
        // degistirecegiz ve javascript'imizi olusturacagiz.
        string script =
            "$(document).ready(function () " +
            "{ " +
                "var boxes = $('#[<TargetControlID>] .[<ClassName>]'); " +
                " boxes.shadow('[<ShadowMode>]'); boxes.hover(" +
                    "function () {" +
                        "$(this).find('div').animate({ 'opacity': '1' }, 350);" +
                    "}," +
                    "function () { " +
                        "$(this).find('div').animate({ 'opacity': '0.5' }, 350);" +
                 "});" +
            "});";

        string shadowModeString = string.Empty;

        // Secili ShadowMode'a uygun kodun elde edilmesi..
        switch (this.ShadowMode) {
            case DropShadowMode.lifted:
                shadowModeString = "lifted";
                break;
            case DropShadowMode.perspective:
                shadowModeString = "perspective";
                break;
            case DropShadowMode.raised:
                shadowModeString = "raised";
                break;
            case DropShadowMode.sides_vt_1:
                shadowModeString = "{type:'sides', sides:'vt-1'}";
                break;
            case DropShadowMode.sides_vt_2:
                shadowModeString = "{type:'sides', sides:'vt-2'}";
                break;
            case DropShadowMode.sides_hz_1:
                shadowModeString = "{type:'sides', sides:'hz-1'}";
                break;
            case DropShadowMode.sides_hz_2:
                shadowModeString = "{type:'sides', sides:'hz-2'}";
                break;
            case DropShadowMode.rotated_5degree:
                shadowModeString = "{type:'rotated',rotate:'-5deg'}";
                break;
            default:
                shadowModeString = "lifted";
                break;
        }

        // Ozellik degerlerinin javascript kalibina yerlestirilmesi.
        script = script.Replace("[<TargetControlID>]", this.TargetControlID);
        script = script.Replace("[<ClassName>]", this.ClassName);
        script = script.Replace("[<ShadowMode>]", shadowModeString);

        // Script'imiz icin bir key belirliyoruz.
        string scriptKey = "DropShadowScript_" + this.ID;

        // Javascript kodumuzun sayfanin en altina yerlestirilcek sekilde sayfaya eklenmesinin saglanmasi.
        Page.ClientScript.RegisterStartupScript(
            this.GetType(), scriptKey, script, true);

    }
}

 

Server Control projesini derleyip web sayfasını çalıştırdığınızda yaptığımız değişikliğin çalışmadığını göreceksiniz. Bunun sebebi, kontrolümüzün eski durumunun Visual Studio tarafından bir cache durumunda olmasından dolayı yenilenmemesidir. Bu sebeple toolbox’dan kontrolümüzü tekrar sayfamıza sürükleyip bırakarak bu cache’lenmiş durumu yenilemiş oluruz. Bu işlemden sonra sayfayı çalıştırdığınızda kontrolümüzün çalıştığını göreceksiniz. Aşağıdaki resimde ortadaki kutu üzerine gelindiğinde animasyonlu olarak netlenecek ve üzerinden ayrıldığınızda eski haline geri gelecektir.

image

Son olarak; toolbox’da kontrolümüze ait resmin neden görünmediği merak edebilirsiniz. Resmin görünmesi için, Toolbox’a sağ tıklayarak “Choose Items…” seçin.

image

Browse” diyerek Server Control proje DLL’ini konumuna giderek seçiyoruz.

image

Tamam butonuna basıyoruz. Toolbox’da seçtiğiniz alana kontrolünüz eklenmiştir.

image

 

image

 

Tabii bu işlem biraz uğraştırıcı olduğu için test işlemlerinde üstteki en son kontrolünüzü Release ettiğinizde yani uygun bir versiyonda stabil olduğunu düşünüp kalıcı kullanacağız zaman bu şekilde toolbox’a eklemenizi tavsiye ederim.

Böylece bir makalenin daha sonuna geldik. Bu makalemizde; JQuery kullanılarak javascript ile geliştirilmiş bir plugin olan resimsiz DropShadow plugin ‘in ASP.NET Server Control projesi oluşturarak ASP.NET Server Control haline getirdik. Böylece özelliklerini değiştirerek sayfada otomatik olarak javascript kodunun oluşturulmasını sağladık. Geliştirdiğimiz kontrolü toolbox’a ekleme ve geliştirme aşamasında karşılaşacağımız bazı sorunlara değindik. Kontrolümüzü ufak bir şekilde geliştirerek nasıl daha gelişmiş hale getirebileceğimizi gördük.

Herkese iyi çalışmalar..

Reklamlar

Yazar: K. Murat BAŞEREN, MBA, MCP

I am a senior software developer, MCP, consultant, blogger, former chemist and software trainer. My interests range from software developer to technology. I am also interested in web development, education, and coffee.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s