Blog

Merhaba arkadaşlar bu makalemizde Ajax Always Visible Control Extender kontrolünün nasıl kullanıldığına göz atacağız.

Açıklama

AlwaysVisibleControl içerik kaydırıldıgında yâda yeniden boyutlandırıldıgında sayfa background'u üzerinde float görünen sayfa kontrollerine izin veren basit bir kontroldür. Içerigi degistirseniz bile sizin belirlemis oldugunuz yerde kalır. Sayfa yüklenirken flash kontrolüne yakalanmamak için kontrolün pozisyonunu absolutely olarak belirlemeliyiz

Özellikler

·                    TargetControlID - Sürekli gösterilecek olan kontrolün ID'si

·                    HorizontalOffset - Browserin yatay kenarından pixel olarak uzaklıgı. Varsayılan olarak 0'dır.

·                    HorizontalSide - Yatay olarak browser üzerindeki tarayıcının pozisyonunu belirler (Left, Center, yada  Right) Varsayılanı Left'dir.

·                    VerticalOffset - Browserin dikey kenarından pixel olarak uzaklıgı. Varsayılan olarak 0'dır.

·                    VerticalSide - Dikey olarak browser üzerindeki tarayıcının pozisyonunu belirler (Top, Middle, yada Bottom) Varsayılanı Top'dır.

·                    ScrollEffectDuration - Kontrolün pozisyonunun degistiginde scroll efektinin süresinin uzunlugu. Varsayılan olarak 1 saniyedir.

Örnek Uygulama

Kontrolümüz ile ilgili bilgi edindikten sonra örnek bir uygulama yapabiliriz. Ofis içerisinde kullanılan bir Intranet uygulaması yaptıgımızı var sayalım. Bu uygulama içerisinde kullanıcılar birbirlerini mesaj gönderebiliyorlar. Kullanıcı programını açtıgı anda maili olup olmadıgını görmek isteyecektir. Yine aynı sekilde sayfa içerisinde dolasırken mesajı olup olmadıgını görmek isteyebilir. Burada Always Visible Control Extender kontrolünü kullanabiliriz. Kullanıcı sayfanın neresinde olursa olsun Always Visible Control Extender kontrolü ile mesajı olup olmadıgını görebilir. Artık örnegimize geçebiliriz, yeni bir atlas projesi olusturalım.

Projemizi olusturduktan sonra Sayfamızın scroll barların çıkması için biraz uzun bir metin, 1 panel, 1 label 1update panel ve 1 de buton ekleyelim. Benim sayfa tasarımım asagıdaki gibidir.

Kullanıcı sayfada gezinirken maili olup olmadıgını kontrol edebilecek. Bunun için ilk olarak maili olup olmadıgını kontrol edecek kodları yazalım.

Private MailSayisi As Integer = 1 ’ bu deger normalde DB’den gelecek Ama bizim amacımız bu degil bu yüzdeb manuel olarak belirledik.   Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load         MailKontrolET()     End Sub     Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click         MailSayisi = MailSayisi - 1’ mail okundugunda mail MailKontrolET fonksiyonu yeniden çalısıyor.         MailKontrolET()     End Sub     Protected Sub MailKontrolET()’ burada mail olup olmadıgı kontrol ediliyor.         If MailSayisi > 0 Then             Label1.Text = "Okunmamıs Mesajınız Var"         Else             Label1.Text = "Hiç Mesajınız Yok"         End If     End Sub

Simdi artık Always Visible Control Extender kontrolümüzü çalıstıracak kodalara geçelim.

<cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server">         <cc1:AlwaysVisibleControlProperties         HorizontalOffset="0"         HorizontalSide="right"         ScrollEffectDuration="0.1"         TargetControlID="Panel1"         VerticalOffset="0"          VerticalSide="Bottom" />         </cc1:AlwaysVisibleControlExtender>

Always Visible Control Extender özelliklerinide yazdıktan sonra projemizi çalıstırabiliriz.

Evet, nesnemiz belirledigimiz gibi sag alt kösede yer alıyor.  Simdi sayfamızı asagıya dogru kaydıralım.

Gördügünüz gibi nesnemizde bizimle birlikte gelir. Simdi okunmamıs olan maili okuyalım ve atlasın baska bir nimeti olan UpdatePanel'den yararlanalım.

Evet, sayfamız yenilenmeden mesajımızı okuduk. Yeni mesajımız var mı yok mu kontrol edebiliyoruz. Normal de bir timer nesnesi ile mailimiz olup olmadıgını belirli sürelerle kontrol ettirebilirdik. Ama suan için bizim esas konumuz bu olmadıgı için sadece manuel olarak islem yaptırdık.

Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim.

Sem GÖKSU
MCP | MCAD.NET

Örnek Kodlar için mail adresimi kullanabilirsiniz

askisem@hotmail.com

Kaynaklar
http://atlas.asp.net

Merhaba arkadaşlar bu makalemizde Ajax modal popup extender kontolünün nasıl kullanıldığına göz atacağız.

Modal Popup Extender

Açıklama:

Modal popup extender kullanıcının sayfanın arkada kalan kısmı ile iliski kurmasını engelleyerek kullanıcının sayfayı görmesine izin verir. Modal içerik bir kontroller hiyerarsisi olabilir ve üzerine herhangi bir stil uygulanmıs bir bakcgroundun üzerinde gösterilebilir. Gösterildigi zaman sadece modal içerikle iliski kurulur ve sayfanın geri kalanına tıkladıgınızda hiç bir sey olmaz. Kullanıcı modal içerikle iliski kurarken bir ok/cancel butonunun kullanılması modal içerigin çalısmasına izin vermez ve özel bir scripti çalıstırır. Özel script genellikle modal mod aktifken yapılan degisiklikleri uygulayacaktır. Eger bir postback gerekliyse, basit olarak ok/cancel kontrolüne postback için izin verir ve sayfa yenilenir.  

Özellikleri:  

·                  TargetControlID  - Modal popup'ı açtıracak olan kontrol

·                  PopupControlID - Açılacak olan modal popup kontrolü

·                  BackgroundCssClass - Modal popup'un gösterilecegi background CSS sitil adı

·                  DropShadow - Modal  Popup'a drop-shadow özelligi kazandırmak için. Default olarak true gelir

·                  OkControlID - ModalPopup'ı çalıstıran kontrolün ID'si

·                  OnOkScript - OkControlID tıklandıgında çalısacak script.

·                  OkCancelID - ModalPopup'ı iptal eden kontrolün ID'si

·                  OkCancelScript - CancelControlID tıklandıgında çalısacak script.

Modal Popup Extender kontrolünü tanıdıktan sonra örnegimize geçelim.

Örnek Uygulama

Bir Spor Haberleri sitesi yaptıgımızı varsayalım. Burada farklı takımları tutan kisiler girecektir. Biz bu sayfadaki haberleri kullanıcıya göre özellestirmek isteyebiliriz. Kullanıcıda okudugu haberi kendi tuttugu takımın renklerin de görmek isteyebilir. Bunun için Modal Popup Extender Konrolünü Kullanabiliriz.

Yeni bir Atlas Projesi Açalım.

Sayfamızda herhangi bir haberi yayınlayacagımızı varsayalım. Sayfamıza 1 Modal Popup Extender, 1 adet linkbutton 4 input radio, 4 label ve 2 button kontrolü ekleyelim. Ben sayfama asagıdaki gibi bir haber ekledim.

Yapacagımız islemden kısaca bahsedeyim. Kullanıcı haber detayını okurken sayfasını kendine göre özellestirecek. Bunun için linkbutton'a (sayfayı özellestir) tıklayacak ve kendine göre olan sitili seçecek ve seçmis oldugu sitil sayfaya uygulanacak.

<asp:LinkButton ID="LinkButton1" runat="server">Sayfayı Özellestirin</asp:LinkButton><br />         <br />         <span style=" color: #ff3366; font-family: Verdana"><strong>Türkiye:1             - Italya: 1 </strong></span>             <br /><br />        <div>              <p id="Metin">            Italya (A) Milli Futbol Takımı ile Türkiye (A) Milli Futbol Takımı’nın Italya’da            yaptıgı özel maç 1-1 sona erdi.            <br />            51. dakikada Emre çalımlarla girdigi ceza alanı içerisinde açısını kaybettikten            sonra attıgı sert sutta top yan direge çarparak auta çıktı.            <br />            65. dakikada Ibrahim Üzülmez’in ortasında topun gelisine uzak direkte Halil’in sutunda            defansa çarparak hızını kaybeden mesin yuvarlagı defans oyuncuları uzaklastırdı.<br />            67. dakikada Di Natale’nin ceza alanı içerisinden attıgı sert sutta topu kaleci            Volkan güçlükle kontrol etti.            <br />            21 bin 334 seyircinin 250.481 Avro hasılat bırakarak izledigi Türkiye-Italya özel            maç 1-1 sona erdi.<br />            <br />            <br />            Stat: Atleti Azzuri D’italia            <br />            <br />            Hakemler: Massimo Busacca xxx (Isviçre), Matthias Arnet xxx (Yunanistan), Francesco            Buragina xxx (Isviçre)            <br />            <br />            Italya: Buffon xx (Dk. 46 Amelia xx), Zambrotta xx (Dk. 67 Palombo xx), Materazzi            xx, Cannavaro xx (Dk. 46 Barzagli xx), Oddo xx (Dk. 46 Zaccardo xx), Mauri xx (Dk.            46 Aquilani xx), De Rossi xx (Dk. 67 Pasquel xx), Brocchi xx (Dk. 57 Rocchi xx),            Camaranesi xx (Dk. 57 Barone xx), Di Natale xxx, Gilardino x (Dk. 46 Bonazzoli xx)<br />            <br />            Türkiye: Rüstü x (Dk. 9 Volkan x), Hamit Altıntop xx (Dk. 75 Nuri x), Gökhan Zan            xx, Servet xx, Ibrahim Üzülmez xx, Sabri xx (Dk. 83 Ibrahim Toraman x), Mehmet Aurelio            xx (Dk. 83 Hüseyin x), Emre Belözoglu xxx (Dk. 75 Gökdeniz x), Arda xxx (Dk. 83            Fatih Tekke xx), Tuncay xx (Dk. 61 Tümer x), Hakan Sükür xx (Dk. 61 Halil xx)<br />            <br />            Goller: Dk. 39 Di Natale (Italya), Dk. 42 Materazzi (kendi kalesine) (Türkiye) (Anadolu            Ajansı)        </p>        </div>    Haberimizi bir paragraf satırı içerisinde kullanıcıya gösterecegiz.

Simdi açacagımız ModalPopup' için panel ve panel içerisindeki kontrolün kodlarına geçelim

<asp:Panel ID="Panel1" runat="server" Height="50px" Width="264px"  CssClass="modalPopupSitili">             Lütfen Sayfa Özelliklerinizi Seçiniz<br /><br />             <input id="Radio1" name="Radio" onclick="SitilBelirle = ’Fenerbahce’;"type="radio" />             <asp:Label ID="Label1" runat="server" CssClass="Fenerbahce" Text="Fenerbahçe Sitili" Width="136px"></asp:Label><br />             <input id="Radio2" name="Radio" onclick="SitilBelirle = ’Fenerbahce2’;"type="radio" />             <asp:Label ID="Label2" runat="server" CssClass="Fenerbahce2" Text="Fenerbahçe Sitili - 2" Width="136px"></asp:Label><br />             <input id="Radio3" name="Radio" onclick="SitilBelirle = ’Besiktas’;"type="radio" />             <asp:Label ID="Label3" runat="server" CssClass="Besiktas" Text="Besiktas Sitili" Width="136px"></asp:Label><br />             <input id="Radio4" name="Radio" onclick="SitilBelirle = ’Galatasaray’;"type="radio" />             <asp:Label ID="Label4" runat="server" CssClass="Galatasaray" Text="Galatasaray Sitili" Width="136px"></asp:Label><br />             <br />                    <div align="center">                         <asp:Button ID="btnSec" runat="server" Text="Sitili Seç" CssClass="sitil1" />                         <asp:Button ID="btnIptal" runat="server" Text="Iptal" CssClass="sitil4" />                     </div>             </asp:Panel>

Kodlarda onClick() eventinde de gördügünüz gibi SitilBelirle adlı bir fonksiyon ve içerisinde uygulanacak sitilin adı var. Simdi isterseniz o sitilleri yazalım. 

<style type="text/css"> /*Modal Popup*/ .ModalPopupBackgroundSitili     {       background-color:yellow;       filter:alpha(opacity=70);       opacity:0.7; } .modalPopupSitili {       background-color:#ffffdd;       border-width:3px;       border-style:solid;       border-color:Gray;       padding:5px;       width:300px; } .Fenerbahce {       background-color:navy;       color:yellow;       font-family:verdana;       font-size:10pt; } .Fenerbahce2 {       background-color:yellow;       color:navy;       font-family:verdana;       font-size:10pt;   } .Besiktas {       background-color:black;       color:white;       font-family:verdana;       font-size:10pt; } .Galatasaray {       background-color:red;       color:yellow;       font-family:verdana;       font-size:10pt; } /*Popup Control*/ .popupControl{       background-color:White;       position:absolute;       visibility:hidden; } </style>

Sitillerimizi de tamamladıktan sonra. Kullanıcı Modal Sayfasını açtıktan sonra yapacagımız degisiklikleri kullanıcının sayfasına uygulayacak kodları yazalım. Asagıdaki javascript Metin adını verdigimiz paragrafın CssClassName özelligine uygulanacak. 

<script type="text/javascript"> var SitilBelirle; function SitilSec() { $(’Metin’).className = SitilBelirle; } </script>

Son olarak Modal Popup Extender Kontrolünün özelliklerini belirleyelim.

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server">                     <cc1:ModalPopupProperties                     TargetControlID="LinkButton1"                     PopupControlID="Panel1"                     BackgroundCssClass="ModalPopupBackgroundSitili"                     DropShadow="true"                     OkControlID="btnSec"                     OnOkScript="SitilSec()"                     CancelControlID="btnIptal"                      />                </cc1:ModalPopupExtender>

Evet, artık projemizi çalıstırabiliriz.

Sayfayı Özellestirin butonuna tıklayalım;

Ben en üstteki Fenerbahçe Sitili'ni seçtim (: iste sonuç (:

Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim.

Sem GÖKSU
MCP | MCAD.NET

Örnek Kodlar için mail adresimi kullanabilirsiniz

askisem@hotmail.com  

Kaynaklar  

http://atlas.asp.net  

Ingilizce Çevirimlerde yardımcı olanlar: Enis Eftekin ve Dilara Kilercioglu

Bir sevgi selidir bayramlarımız...Dostluk ve kardeslik duygularının en sıcak sekilde hissedildigi, birlik ve beraberligimizin zirveye çıktıgı müstesna günler. Tüm Müslümanların kutsal Ramazan Bayramı`nı kutluyor, bu müstesna günün tüm insanlık için hayırlara vesile olmasını temenni ediyorum.