SEOmium » ExtJS Dersleri, XHTML / CSS / JavaScript

Ext Core ile Firebug’ı Algılama

Salih Gedik 21 Eylül 2009 2.309 kez okundu 1 Yorum

ExtJS Logo

Bildiğiniz gibi Firebug, Firefox için üretilmiş bir debug konsoludur. Gelişmiş özellikler içerir. Ancak kimi zaman bunu iyiye kullanmak yerine tasarımınızı çalmak isteyen kullanıcılar çıkacaktır. Bunlara karşı Firebug’ı bloklamak isteyebilirsiniz. Bu doğrultuda şu adımları yapmalıyız:

Öncelikle Firebug’ın aktif olup olmadığını kontrol etmemiz gerekiyor. Bu yüzden “_firebugConsole” un doğru olup olmadığını kontrol edeceğiz. Biz buna ExtJS ile şu şekilde ulaşacağız. Bu yazı sayesinde bu zamana kadar öğrendiklerimizin bir çoğunu pekiştirmiş uygulama halinde görmüş olacağız.

var firebug = Ext.get('_firebugConsole');
// firebug değişkeni içinde
if(firebug) {
// Eğer Firebug Aktifse ... şunları yap
}
Şimdi aktif bir şekilde görelim:
Ext.onReady(function () {
// Ext HAZIR
var firebug = Ext.get('_firebugConsole');
// firebug değişkeninde depola
if(firebug) {
//eğer firebug aktif ise :
Ext.fly('icerik').hide().update('');
// içerik id'sine git gizle ve içeriğini '' ile yenile
Ext.fly('block').addClass('hata').update('<h1>Firebug\'ı seçtin. Giremezsin</h1>');
// block idsine Git ve oluşturmuş olduğum hata classını ekle ve şöyle bir mesaj göster
}
});

Bunlar da CSS kodlarımız:

h1 { color: #FF0000; text-align: center;}  /**  Kırmızı arkaplan tam ortada   */
.hata{
background:#fbe3e4;  /** renk */
border-color:#e0011b;	/** kenarlık çizgileri */
width: 50%; /** % cinsinden genişlik */
font-weight: bolder; /** Font genişliği  */
font-style: italic;	/** Font stili */
}

Son olarak HTML kodlarımız:

<div id='icerik'>
<h2>Firebug'ı kapattığın için teşekkürler.</h2>
</div>
<div id="block"></div>

Ya da HTML yazmak istemiyorsanız ExtJS bunu sizin için yapmaya hazır böylece sayfanızda kaynağı görüntüle şeklinde bir kullanımda JS dosyaları incelenmek zorunda kalacak

Ext.onReady(function() {
// Ext hazır
Ext.DomHelper.append(document.body, {tag: 'div', id: 'icerik'});
// belgenin body kısmına <div id="icerik"></div> ekle ( İçerik idli bir div oluştur)
Ext.DomHelper.append(document.body, {tag: 'div', id: 'block'});
// belgenin body kısmına <div id="block"></div> ekle ( Block idli bir div oluşturur)
Ext.select('div#icerik').update('Firebug'ı kapattığın için teşekkürler.');
// icerik idli div'ı seçer ve belirtilen mesajı ekler.
});

Unutmayın ki HTML ile yapacağınız şeyi zorunlu olmadıkça JavaScript ile yapmayın bu performans kaybına yol açacaktır (herhangi bir frameworkte ya da saf Javascriptte)

Firebug konsolunu açarak sayfayı gösterdiğimizde çalıştığını göreceksiniz. Bundan sonrası sizin yaratıcılığınıza kalmış.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="ext-core.js"></script>
<style type="text/css">
h1 { color: #FF0000; text-align: center;}
.hata{
background:#fbe3e4;
border-color:#e0011b;
width: 50%;
font-weight: bolder;
font-style: italic;
}

</style>
<script type="text/javascript">

Ext.onReady(function () {
/**
İsterseniz bu kodu da kullanabilirsiniz HTML i boşaltmak şartıyla
Ext.DomHelper.append(document.body, {tag: 'div', id: 'icerik'});
Ext.DomHelper.append(document.body, {tag: 'div', id: 'block'});
Ext.select('div#icerik').update('Firebug\'ı kapattığın için teşekkürler.');

*/
var firebug = Ext.get('_firebugConsole');
if(firebug) {
Ext.fly('icerik').hide().update('');
Ext.fly('block').addClass('hata').update('<h1>Firebug\'ı seçtin. Giremezsin</h1>');
}
});
</script>

</head>

<body>

<div id='icerik'>
<h2>Firebug'ı kapattığın için teşekkürler.</h2>
</div>
<div id="block">
</div>

</body>
</html>

Okuduğunuz için teşekkür ederim. Sorunlarınızı yorum şeklinde belirtirseniz sevinirim.

Etiketler: ExtJS, Javascript