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


Yorum bırakın

ASP.NET MVC ile Bootstrap Checkbox ve Radio Kullanımı

Evet.. Uzun bir aradan sonra tekrar makale yazmaya başlamalıyım diye düşünüyordum. Sonunda yavaştan yavaştan başlamak gerektiği için hadi bakalım dedim ve kolları sıvadım. Aslında bunun sebeplerinden biri artık çoğu kişinin video içeriklere yönelmesi ve video ile bazı şeyleri göstererek daha hızlı ve 1 dakikalık bir zaman dilimine daha çok şey sığdırabildiğimizden dolayıdır sanırım. Fakat açıkçası ben hala makalelerden ve kitaplardan yanayım. Video içerikler daha kolay uçuyor akıllardan ve özümsemesi zor. Anlatılan bir noktayı bulması da daha zor. Henüz video içi arama pek gelişmedi. Sanırım bu gelince bende ona daha fazla yönelebilirim. Tabii ki izlemek, anlatılanı yapılırken görmek ayrı, olmazsa olmaz. Ama nedense benim gözlerim metin arıyor, ne diyebilirim.

Peki konumuza dönelim. Bu yazımızda sizlere asp.net mvc içinde radio ve checkbox kullanımı ile ilgili bir yöntem göstereceğim. Bende herkes gibi projelerimde veya örneklerimde bootstrap kullanıyorum. Dolayısı ile en çok sıkıntı duyduğum nokta checkbox ve radio kontrollerinin tasarımının bootstrap’te eksik olması! Aslında eksik değil ama bizim alıştığımızdan farklı olması. Bizim bildiğimiz bu şekilde..

 

image

Bootstrap kullanılsa bile ortaya çıkan radio ve checkbox görünümü.

 

Fakat bootstrap ‘in yaklaşımı ile olması gereken budur.

 

image

Bootstrap in checkbox ve radio yaklaşımı bu şekilde

 

Kullanımı kolay ve özellikle mobil cihazlar için bu tasarım aslında harika oluyor.. Fakat bunu elde etmek için gereken HTML kodu şu şekilde(Bu arada ikonlar tamamen benim uydurmamdır ki onu da nasıl yaptığımı göstereceğim). Örneğin HTML, CSS ve JS kodlarına buradan ulaşabilirsiniz.

Okumaya devam et

Reklamlar


2 Yorum

Veysel Uğur KIZMAZ’ın Asp.Net 4.5 kitabı sizlerle!

Bu yazımızda sizlere, Veysel Uğur KIZMAZ’ın kurucusu olduğu 2011 yılında kurulmuş, yazılım ve bilişim kategorisinde IT sektöründe hizmet eden bir bilgi paylaşım sitesinden bahsedeceğim. Sitenin içeriği çok zengin olup sektöründeki neredeyse her alana ait bir başlık ve yazarı mevcut. Üstelik yazarlar, sektörde tecrübeye sahip insanlardan oluşmaktadır. Yazılım alanında bilgisini geliştirmek isteyen herkese tavsiye ederim.

www.yazilimdilleri.net

Veysel Uğur KIZMAZ Asp.Net 4.5

Site kurucusu; Veysel Uğur KIZMAZ’ın ASP.NET üzerine yazdığı kitabıda bulunmaktadır. .Net 4.5 ile gelen yenilikleri ve Asp.Net ile proje geliştirme konusunu detaylarıyla anlatan bu kitap; sadece ilgili teknoloji ile kodlamanın değil, bir web projesinin başlangıcından son noktasına kadar neler yapılması gerektiğini de anlatmaktadır. HepsiBurada, Kitapyurdu ve diğer online kitap satış sitelerinden kitaba ulaşabilirsiniz.

Asp.Net ile yazılım geliştirme (kodlama) konusunda son olarak projelerinizi zenginleştirmek için JavaScript ve jQuery kavramlarını örnek uygulama ve örneklerle öğrenebileceğiniz bir kitap’tır. 
"Yazılım geliştirmek, sadece kod yazmak demek değildir." Kitabın genelinde de bu konu üzerinde durulmuş ve Asp.Net ile yazılım geliştirme (kodlama) konularının ardından, "bir yazılım geliştirirken hangi aşamalardan geçilir, nelere dikkat edilmelidir, bir yazılımı geliştirirken planlama süreci nasıl olmalıdır, yazılım geliştirmede katmanlı mimari neden önemlidir ve yazılım geliştirme standartları" konuları, güncel hayattan örnekler ve uygulamalarla detaylı olarak anlatılmış.

Kitabında içindeki konu başlıkları;

  • ASP.NET Nedir?
  • .NET Framework Nedir?
  • .NET Bileşenleri
  • ASP.NET Çalışma Mantığı
  • İstemci Taraflı Kodlama
  • Sunucu Taraflı Kodlama
  • ASP.NET Versiyonları ve Yenilikleri
  • ASP.NET ile Yazılım Geliştirmeye Giriş
  • Visual Studio 2012’ye Genel Bakış
  • Visual Studio 2012 Çalışma Ortamı
  • Web Form Kavramı Ve Kullanımı
  • Web Form Özellikleri
  • Web Form İçerisine ASP.NET Kontrollerini Ekleme
  • ASP.NET’te C# ile Kodlama Yöntemleri
  • ASP.NET 4.5 ile C# 5.0 Kullanımı
  • C# Nedir ve Neden C# Kullanmalıyız?
  • C#’ın Kullanım Alanları
  • ASP.NET Formu Geliştirilirken Kullanılan Diller
  • Asp.Net Formlarında En Sık Kullanılan C# Örnekleri
  • C# 5.0 ile Gelen Yenilikler
  • ASP.NET Kontrolleri
  • Standart Kontroller Ve Kullanımları
  • Veri Kontrolleri
  • Veritabanından Veri Getirme
  • XML Dosyasından Veri Getirme
  • Entity Framework ile Veri Sorgulama
  • LINQ to SQL ile Veri Sorgulama
  • Nesnel Veri Kaynağı
  • Site Haritası Veri Kaynağı
  • Grafiksel Rapor Oluşturma
  • Verileri HTML Tasarımıyla Listeleme
  • Verileri Listeleme
  • Kayıt Detaylarını Görüntüleme
  • Verileri Listeleme ve İşlem Yapma
  • Verileri Sayfalayarak Görüntüleme
  • Verileri Kontroller ile Sorgulama
  • Verileri Html Şablonu ile Görüntüleme
  • Doğrulama Kontrolleri
  • Navigation Kontrolleri
  • Menü Oluşturma
  • Site Haritası Menüsü Oluşturma
  • Ağaç Menüsü
  • Kullanıcı Giriş Kontrolleri
  • Gelişmiş Sihirbaz Oluşturma
  • XML Dosyasını Görüntüleme
  • Web Part Kontrolleri
  • AJAX Kontrolleri
  • ASP.NET ile Durum Yönetimi
  • Sunucu Tabanlı Durumlar
  • İstemci Tabanlı Durumlar
  • Çerezler
  • ViewState
  • QueryString ile Sayfalara Veri Gönderme
  • LINQ ve Entity Framework
  • Temel LINQ Sorgulama İşlemleri
  • LINQ Metodları
  • LINQ ile SQL Server İşlemleri
  • Tasarım İşlemleri
  • Master Page Kavramı
  • ASP.NET ile CSS Kullanımı ve Style Sheet Dosyaları
  • Tema Tanımlama
  • Skin Tanımlama
  • JavaScript ve JQuery
  • JavaScript ile Kodlama
  • jQuery ile Kodlama
  • URL Rewrite
  • ASP.NET ile Proje Altyapısı Hazırlama
  • Yazılım Geliştirme Yaşam Döngüsü
  • Yazılım Geliştirme Standartları
  • Katmanlı Mimari
  • Kod Yazma Standartları
  • Değişken, Sınıf ve Metod Tanımlama Yöntemleri
  • Proje Tanımlama Yöntemleri
  • Web Projesini Yapılandırma ve İnternet Üzerinde Yayınlama
  • Proje Yapılandırması
  • Temel Kavramlar
  • ASP.NET Web Projesinin Yayınlanma Yöntemleri
  • ASP.NET 4.5 Yenilikleri
  • ASP.NET MVC 4
  • … ve Daha Fazlası

Kitap iç sayfalar için tıklayınız..


Yorum bırakın

BilgeAdam Şubat Yazılım Seminerleri

BilgeAdam Şubat Yazılım Seminerleri

23-24-26-28 Şubat 2013 tarihlerinde BilgeAdam ‘da gerçekleştirilecek olan şubat seminerleri süper bir içerik ile geldi ve geliyor. Bu seminerlere katılmanızı şiddetle tavsiye ederim. Konu başlıkları gerçekten ilgili çekici, ayrıca BilgeAdam farkıyla olacağını düşünürsek sakın kaçırmayın diyebilirim.

BilgeAdam’dan bu tarz seminerleri daha sık gerçekleştirmesini ve microsoft etkinliklerinde de oturum sahibi olmasını bekliyoruz.

Etkinliğin içeriğine bakarsak;

  • HTML 5 : Gaffar Salkım
  • Windows Azure ve Bulut Bilişim : Murat Akay
  • Youtube Web API : Ayhan Güney
  • JQuery ile Efekt ve Animasyon : Koray Özdemir

Seminerler Kadıköy-BilgeAdam şubesinde Lab-M ‘de gerçekleştirilmektedir.


Yorum bırakın

RadioButtonList Sample With JQuery

HTML, Javascript Code
<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <meta charset="utf-8" />
    <title>Radio List Sample</title>
    <style>
        #frame-list
        {
            padding: 5px;
        }
        .frame
        {
            border: 1px solid silver;
            padding: 8px;
            margin-bottom: 3px;
        }
        .inner-frame
        {
            border: 1px solid lightgray;
            padding: 8px;
        }
        .result
        {
            width: 100%;
            height: 25px;
            text-align: right;
        }
        #result
        {
            width: 250px;
            margin-right: 10px;
        }
    </style>
    <script>
        $(document).ready(
  function () {

      var radio_inputs = $(".inner-frame input:radio");
      var result = $("#result");

      $(".inner-frame input").click(function () {
          result.text($(radio_inputs).index($(this)) + 1);
      });

      $(".inner-frame").each(function () {
          var radio = $(this).find("input:radio");

          $(this).click(function () {
              radio.attr("checked", "checked");
              result.text($(radio_inputs).index(radio) + 1);
          });
      });

      $(".inner-frame").hover(
      function () {

          $(this).css({
              "background-color": "silver",
              "border-color": "gray"
          });

          var sp = $(this).find("span");

          sp.animate({
              "margin-left": "20px"
          }, 300,
          function () {
              sp.css("color", "white");
          });

      },
      function () {

          $(this).css({
              "border-color": "silver"
          });

          var sp = $(this).find("span");

          sp.animate({
              "margin-left": "0px"
          }, 300,
          function () {
              sp.css("color", "black");
              sp.parent().css("background-color", "white");
          });

      }
    );

  });
</script>
</head>
<body>
    <div class="result">
        <span id="result">Kay?t bulunamad?.</span>
    </div>
    <div id="frame-list">
        <div class="frame">
            <div class="inner-frame">
                <input type="radio" name="item" />
                <span>Merhaba 1</span>
            </div>
        </div>
        <div class="frame">
            <div class="inner-frame">
                <input type="radio" name="item" />
                <span>Merhaba 2</span>
            </div>
        </div>
        <div class="frame">
            <div class="inner-frame">
                <input type="radio" name="item" />
                <span>Merhaba 3</span>
            </div>
        </div>
        <div class="frame">
            <div class="inner-frame">
                <input type="radio" name="item" />
                <span>Merhaba 4</span>
            </div>
        </div>
    </div>
</body>
</html>


Yorum bırakın

AJAX Drop Shadow Extender Server Control With JQuery

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..


Yorum bırakın

2011 Open Source Yıldızları

Özgürce…: 2011 Open Source Yıldızları.


Yorum bırakın

JQuery Kaynak Siteleri

JQuery ile ilgili güzel faydalı kaynakların yer aldığı sitelerden ikisi. İçlerinden biri zaten JQuery’nin kendi sitesidir.

http://www.eburhan.com/

http://jquery.com/