PhoneGap için Hook.js kütüphanesinin kullanımı

11 Eylül 2013
Bu yazıyı beğendiysen paylaşmayı unutma :)
Pin It

PhoneGap ile geliştiridiğimiz mobil uygulamalarda pek çok Javascript kütüphanesini kullanıyoruz. Ve bunu yaparken Amerika’yı yeniden keşfetmektense, Github gibi sosyal kod paylaşım imkanı veren web sitelerinde oldukça başarılı Javascript kütüphanelerinden faydalanıyoruz. Bu makalede sizlere Mobil Twitter kullanıcılarının yakından tanıdığı “Pull to Refresh” ya da “Yenilemek için çekin” mantığına dayalı şekilde çalışan “Hook.js” kütüphanesinin detaylarına ineceğiz.

Hook.js’i kullanmak için öncelikle https://github.com/jordansinger/hook.js/ adresinden ya da http://www.usehook.com/ adresini kullanarak bilgisayarınıza indirmeniz gerekiyor. Bir PhoneGap projesi için gerekli projeyi oluşturduktan sonra download ettiğiniz zip içerisindeki gerekli dosyaları projenize uygun şekilde yerleştirin. PhoneGap ile bir projenin nasıl oluşturulduğunu ya da daha da ötesi PhoneGap’in ne demek olduğunu buradan bakabilirsiniz.

En basit kullanımı ile HTML sayfanız içerisine;

<div id="hook"></div>

etiketini yerleştirdikten sonra Javascript kısmına da aşağıdaki kodu yerleştirerek direkt olarak çalıştırabilirsiniz.

$('#hook').hook();

Bu kullanım hook.js’si varsayılan ayarları ile direkt olarak kolayca çalıştırmanıza imkan verir. Eğer bu ayarlar ile çalışması bana yeter diyorsanız yazıyı okumayı burada noktalayabilirsiniz. Kütüphanenin ayarlarını değiştirmek ve kendinize göre düzenlemek isteyenleri buraya alalım.
Hook.js kütüphanesi düzenleyebileceğiniz 9 ayar ve 1 callback (geri dönüş) fonksiyonuna sahiptir. Şimdi bunları daha yakından inceleyelim.

– reloadPage
– dynamic
– textRequired
– swipeDistance
– loaderClass
– spinnerClass
– loaderTextClass
– loaderText
– reloadEl (callback fonksiyonu)

– reloadPage: Varsayılan değeri true’dur. İşlem sonrasında sayfa yenilenir. Eğer bu değeri false olarak ayarlarsanız “reloadEl” callback fonksiyonunu çağırmanız gerekir.

Örnek;
// reloadPage-reloadEl

$(‘#hook’).hook({
    reloadPage: false,
    reloadEl: function(){
         console.log(‘Hello World!’);
    }
});

– dynamic: Varsayılan değeri true’dur. “Yenileniyor” metninin ve “Spinner” resminin otomatik olarak oluşmasını sağlar. Eğer değeri false olarak ayarlarsanız bu kısımdaki HTML’leri kendiniz yazmanız gerekiyor.

Örnek;
// Dynamic

$('#hook').hook({
    reloadPage: false,
    dynamic: false,
    reloadEl: function(){
        document.getElementById("messageText").innerHTML = "Yenilendi!";
    }
});

<div class="hook hook-with-text" id="hook">
	<div class="hook-loader">
		<div class="hook-spinner"></div>
	</div>
	<span class="hook-text">Yenileniyor...</span>
</div>
<div id="messageText"></div>

– textRequired: Varsayılan değeri false’tur. Eğer true durumuna getirilirse kodunuzun içerisine loaderText ve loaderTextClass eklemelisiniz.

Örnek;
// textRequired

$('#hook').hook({
    textRequired: true,
    loaderTextClass: 'hook-text',
    loaderText: 'Yenileniyor...'
});

<div id="hook"><div></div></div>

– swipeDistance: Dokunmatik ekranlı cihazlarda kaydırma mesafesini belirtmek için kullanılır. Varsayılan değeri 50’dir. Rakam büyüdükçe ekranın üst kısmından aşağıya doğru kaydırmanız gereken mesafe daha fazla artacaktır.

Örnek;
// swipeDistance

$('#hook').hook({
    textRequired: true,
    swipeDistance: 300,
    loaderTextClass: 'hook-text',
    loaderText: 'Yenileniyor...'
});
<div id="hook"><div></div></div>

– loaderClass: Varsayılan değeri “hook-loader
– spinnerClass: Varsayılan değeri “hook-spinner

Bu iki class ayarı da “Hook.css” içerisinde tanımlanmış class’lardır. İstenirse içeriği de isimleri de bu ayar üzerinden değiştirilebilir. Bunun yanında dynamic özelliği true yapıldığında bu iki class’ın tanımlandığı div’lerle sarmalanmıştır. (Daha fazla detay için Hook.js içerisinde 65. satıra göz atabilirsiniz.)

– loaderTextClass: Varsayılan değeri “hook-text”. textRequired ayarını true hale getirildiğinde kullanılabilir. Hook.css içerisinde tanımlanmış hook-text class’ını kullanır. İsterseniz CSS’in içeriğinden özelliklerini değiştirebilirsiniz. Kullanımı için “// textRequired” başlıklı örneğe bakabilirsiniz.

– loaderText: Varsayılan değeri “Reloading..” tir. textRequired ayarını true hale getirildiğinde kullanılabilir. “// textRequired” başlıklı örnekte olduğu gibi istediğiniz metni bu ayarda belirtebilirsiniz.

– reloadEl: İşlemin sonucunu geri döndüren callback fonksiyonudur. Aşağıdaki örnekte olduğu gibi sayfa içerisindeki bir elementin içerisine sonucu döndürebilirsiniz. Ancak bunu yaparken reloadPage alanını false yapmalısınız. Zira elementin içi doldurulmuş olsa dahi sayfa yenilendiğinden dolayı içi boş görünecektir.

Örnek;
// reloadEl

$('#hook').hook({
    reloadPage: false,
    dynamic: true,
    textRequired: true,
    swipeDistance: 5,
    loaderTextClass: 'hook-text',
    loaderText: 'Yenileniyor...',
    reloadEl: function(){
        document.getElementById("messageText").innerHTML = "Yenilendi!";
    }
});

<div id="hook"></div>
<div id="messageText"></div>

Bir sonraki yazıda görüşmek üzere..

Benzer Yazılar


DeliPenguen'i Google+'da bulun



  1. teoman
    6 Şubat 2014 - 20:13

    super yazi hocam, sayenizde kolayca cross-platform app gelistirebilecegiz, birde magzalara app submit ederken (ozellikle ios) nelere dikkat etmeliyiz onlara deginirseniz harika olur. tesekkurler kolay gelsin.

    • :DeliPenguen
      11 Şubat 2014 - 12:08

      iOS markete hiç app göndermedim. Bu yüzden bilgi sahibi değilim. Ama sırf öğrenmek için bir uygulamayı iOS markete göndereceğim. Yaşadığım tecrübeleri de yine yazarım.

  2. 21 Temmuz 2015 - 10:25

    Merhaba paylaşımlarınız gerçekten çok faydalı. Emeği olan herkese teşekkür ederim. Fakat benin phonegap ile ilgili takıldığım bir konu var, bu konu var yardımcı olursanız çok sevinirim. Phonegap, Php ve Mysql arasındaki bağlantıyı bir türlü sağlayamadım. örenek bir uygulama ile açıklarsanız çok sevinirim.

    iyi çalışmalar…

    • :DeliPenguen
      30 Ağustos 2015 - 00:29

      Maalesef bahsettiğin gibi bir bağlantı yok. Zira mobil ve web’in dinamikleri çok farklı. Ancak PhoneGap/Cordova ile mobil geliştirmede web teknolojileri kullanıldığı için böyle bir karışıklık meydana gelebiliyor. Yapmak istediğini anlatırsan daha net yardımcı olabilirim.