5 Ocak 2014 Pazar

AMBERJACK KÜTÜPHANESİ
  Amberjack kütüphanesi internet sayfaları üzerinde tur yapabilmemizi sağlayan ve sayfaların kullanılabilirliğini arttıran küçük bir JavaScript kütüphanesidir. Kütüphane ile internet sayfaları üzerine bilgilendirme, açıklama gibi çeşitli alanlar ekleyerek site üzerinde tur yapabiliriz. Kütüphane internet sayfasının fonksiyonelliğini arttırır. Bu kütüphaneyi kullanmak için Amberjack JS linkinden indirebilirsiniz. Kütüphaneyi indirdikten sonra kullanmak için projenin kaynak dosyalarına şekilde görüldüğü gibi eklememiz gerekiyor:

  Ardından kütüphaneyle üzerinde tur oluşturacağımız internet sayfalarını belirlememiz gerekiyor. Bu işlem sonrasında, sayfaların <head> bölümüne aşağıdaki kodu ekleyerek, sayfaların adreslerinden (URL) de faydalanarak bir Amberjack kütüphanesi örneği yapabiliriz artık. 
<script type="text/javascript" src="Scripts/amberjack.js"> </script>
  Oluşturacağımız internet sitesi turunun bilgi kutuları, kütüphanenin yardımıyla basit HTML <div> etiketlerinden ibaret olacak. Ancak tabi bu <div> etiketinin Amberjack turu olabilmesi için bazı özelliklere sahip olması gerekiyor. Tur için <div> etiketinin, 'class' özelliği 'ajTourDef' değerine sahip olmalı ve turun adresinde kullanacağımız ve de kendimiz belirleyeceğimiz bir 'id' özelliğine sahip olmalıdır:
<div class="ajTourDef" id="tur" >
</div>
  Bu eklediğimiz 'class' ve 'id' özelliklerine sahip olan <div> etiketi, bizim site turumuz olur. Bu <div> etiketinin içine ekleyeceğimiz, 'title' özelliği tur sayfalarının adresleri olan, diğer <div> etiketleri de turumuzun gezinme sayfaları olacaktır:
<div title="Default.aspx" > 
         Gezinme penceresi içeriği
</div>
  Amberjack kütüphanesinin gezinme pencereleri için 6 farklı görünüm seçeneği vardır. Bu seçenekler, gezinme turumuzun bağlantı adresine eklenecek olan, 'skinId' sorgu dizgesine (query string) değer olarak girilecektir. Bu görünüm seçeneği değerleri; White_Wave, Model_T, Safari, Tux, Black_Beauty ve Spongebob'tur. 
  Yukarıdaki gibi, tur oluşturma ve biçimini belirleme gibi durumlarını tamamladıktan sonra artık turumuzun bir giriş bağlantısı oluşmuş oluyor. Bu bağlantı şu şekilde olacaktır:
"Default.aspx?tourId=tur&skinId=White_Wave"
  Kütüphanenin tam anlamıyla çalışıyor olması ve bazı kişiselleştirmeleri gerçekleştirebilmemiz için, <script> etiketi içerisinde bir takım Amberjack JS fonksiyonlarını kullanmamız gerekiyor. Dilerseniz o fonksiyonları da yapacağımız örnek üzerinden anlamaya çalışalım. Yapacağımız örnek proje için sayfalar arası geçişleri daha güzel şekilde görebilmemiz için 'Site.master' isimli bir master page (internet sitelerinde sayfalar için ortak olan ve değişken alan dışında kalan sabit bölüm) ve bu sayfada görüntüleyeceğimiz 'Default.aspx', 'Hakkinda.aspx' ve de 'iletisim.aspx' isimli, 3 adet ASP.NET sayfası oluşturalım.  Amberjack kütüphanesi ile ilgili işlemlerin sadece 'Site.master' sayfasında yapılması yeterli olacaktır.  Diğer ASP.NET sayfalarında sadece dilediğimiz şekliyle sayfanın içeriği bulunacaktır. Projemize eklediğimiz bu sayfalarla beraber kaynak dosyalarımızın son halini görelim:

Şimdi kütüphaneyi kullanarak yaptığımız örnek çalışmamızı inceleyelim:
  'Default.aspx' sayfasının kodları: 
<%@ Page Title="Ana Sayfa" Language="C#" MasterPageFile="~/Site.master"               AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        Ana Sayfa
    </h2>
    <p>
        Sitemiz içerisinde ana sayfada 
        <br />  
         bulunacak herhangi bir içerik
    </p>
</asp:Content>

  'Hakkinda.aspx' sayfasının kodları:
<%@ Page Title="About Us" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Hakkinda.aspx.cs" Inherits="About" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        Hakkında
    </h2>
    <p>
        Kişisel bir internet sitesi ise kişisel bilgiler
        <br />  
        bu sayfada yer alabilir.
    </p>
</asp:Content>

  'iletisim.aspx' sayfasının kodları:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="iletisim.aspx.cs" Inherits="iletisim" MasterPageFile="~/Site.master" Title="iletişim"  %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        İletişim Bilgileri
    </h2>
    <p style="color: #000000">
       Berna Çorbacı 
        <br />  
       internet sayfası: bernacorbaci.blogspot.com 
        <br />  
       e-mail: brna.crbc@gmail.com
    </p>
</asp:Content>

  Asıl Amberjack JavaScript kütüphanesi işlemlerini gerçekleştirdiğimiz 'Site.master' sayfasının kodları:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs"            Inherits="SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <script type="text/javascript" src="Scripts/amberjack.js"> </script>
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    Benim İnternet Sitem <a href="Default.aspx?tourId=tur&skinId=Model_T "     style="color: #00FFFF">
                        SİTE TURUNA BAŞLAMAK İÇİN TIKLAYIN!!</a>
                </h1>
                <div class="ajTourDef" id="tur" style="display: none">
                    <div title="Default.aspx">
                        İlk Gezinme Penceremiz!
                        <br />
                        Buraya istenilen içerik girilebilir!
                    </div>
                    <div title="Hakkinda.aspx">
                        2. Gezinme Penceremiz!!
                        <br />
                        Hakkında sayfasının tanıtımı gibi istenilen içerik buraya girilecektir.
                    </div>
                    <div title="iletisim.aspx">
                        3. Gezinme Penceremiz!!!
                        <br />
                        İletişim sekmesinin tanıtım ya da kullanım bilgileri..
                    </div>
                </div>
            </div>
            <div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"                    EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Ana Sayfa" />
                        <asp:MenuItem NavigateUrl="~/Hakkinda.aspx" Text="Hakkında" />
                        <asp:MenuItem NavigateUrl="~/iletisim.aspx" Text="İletişim" />
                    </Items>
                </asp:Menu>
            </div>
        </div>
        <div class="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />
        </div>
    </div>
    </form>
    <script type="text/javascript">
        Amberjack.textOf = '/';
        Amberjack.textClose = 'x';
        Amberjack.textPrev = '&lt;';
        Amberjack.textNext = '&gt;';
        Amberjack.onCloseClickStay = true;
        Amberjack.open();
    </script>
</body>
</html>
  Yukarıdaki örnek projemizde Amberjack kütüphanesi ile internet sayfaları üzerinde bir tur oluşturduk. <div> etiketinin anlattığımız şekliyle kullanımını gördük. Şimdi örnekte kullandığımız <script> etiketi içindeki Amberjack elemanlarının da işlevlerini öğrenip, örneğimizin çıktılarını görelim. 

  • Amberjack.textOf: Bu özelliğe girilen dizgi değeri, gezinti pencerelerinde görülen, turdaki pencerelerin tümünün sayısı ile üzerinde bulunulan sayfanın numarası arasına yazılacak olan dizgi olur (1/3 gibi, toplamda bulunan 3 gezinti penceresinden 1.sinde olduğumuzu gösterir.).
  • Amberjack.textClose: Bu özelliğe girilen dizgi değeri, gezinti pencerelerinin kapatma butonu üzerinde görülecek olan dizgi olur.
  • Amberjack.textPrev: Bu özelliğe girilen dizgi değeri, gezinti pencerelerinden bir öncekine geçiş butonu üzerinde görülecek dizgidir. (Örnekte '&lt' dizgisi bu özelliğe girilmiş ve '<' karakteri bu butonun üzerindeki dizgi olmuştur.)
  • Amberjack.textNext: Bu özelliğe girilen dizgi değeri, gezinti pencerelerinden bir sonrakine geçiş butonu üzerinde görülecek dizgidir. (Örnekte '&gt' dizgisi bu özelliğe girilmiş ve '>' karakteri bu butonun üzerindeki dizgi olmuştur.)
  • Amberjack.onCloseClickStay: Bu özellik 'true' ya da 'false' değerler alabilmekte ve bu değerin 'true' olması pencerede kapatma butonunun görünmesi, 'false' olması ise bu butonun görünmemesi anlamına gelmektedir.
  • Amberjack.Open(): Bu fonksiyonla Amberjack gezinti penceresi açılıyor. Diğer yazdığımız özellikler <script> etiketi içerisinde belirtilmezse, kütüphanede tanımlı varsayılan değerleri gelecektir. Ancak bu fonksiyonla pencereyi açık hale getirmeden gezinti turumuzu gerçekleştiremeyiz.
Şimdi örneğimizin çıktısını görelim:
'Site turuna başlamak için tıklayın' bağlantısına tıkladığımızda:
Pencere üzerindeki '>' karakteriyle gösterdiğimiz geçiş butonuna tıklayarak, diğer gezinti sayfalarını da görüntüleyelim:

Oluşturduğumuz site turunda 'skinId' için, örneğin safari gibi bir başka değer girdiğimizde ise gezinti penceresinin görünümü şu şekilde olacaktır:
  Benzer şekilde diğer gezinme penceresi görünümlerini de kullanarak, siteniz için en uygun gezinti turu penceresi stilini seçip, kullanılabilirliği artmış internet sayfaları ve sayfalar için tanıtım rehberleri oluşturabilirsiniz artık. Bu haftalık anlatacaklarım bu kadar. 10 hafta boyunca anlatmaya çalıştığım JavaScript kütüphaneleri bilgileri yararlı olmuştur umarım.

Kaynaklar:
Gönderen zaman: Hiç yorum yok:
Kaydol: Kayıtlar (Atom)