Opera İçin Eklenti Yapımı: Tercihler Sayfası

23 Ara 2010 Per

Kullanıcıların eklentinize ait çeşitli ayarları değiştirebilmeleri için arayüz oluşturun.

Opera 11 için geliştirdiğiniz eklentide kullanıcıların isteğine bağlı olarak değiştirebilecekleri çeşitli özellikler olabilir. Örnek verecek olursak, e-posta kutusuna bağlanıp okunmayan ileti saysını alan bir eklenti için kullanıcı adı ve parola girilmesi şarttır. Kullanıcıya bu iki bilgiyi Opera her açıldığında sormak yerine tercihler sayfası oluşturarak bir defaya mahsus bu bilgileri alabiliriz.

Eklentiniz özelleştirilebilir olmalı.

Neler Bilmeliyim?

HTML ve Javascript.

Tercihler Sayfasının Oluşturulması:

İlk olarak eklentiyi geliştirdiğiniz klasörde boş bir HTML dosyası oluşturun. Dosyanın ismini "options.html" olarak değiştirin. Dosyayı Not Defteri veya HTML düzenleyici programınızla açın. Dosya içeriğiniz bu şekilde olmalı:

<!DOCTYPE html>
<html>
<head>
<title>Tercihler</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body></body>
</html>

Tercihler Sayfasının Görüntülenmesi:

İsterseniz eklenti simgesine sağ tıklayıp Tercihler seçeneğine tıklayarak hemen tercihler sayfasını açabilirsiniz. Şayet eklenti herhangi bir simgeye sahip değilse Opera menüsünden Eklentiler->Eklentileri Yönet ekranında da aynı sayfaya ulaşabilirsiniz.

Seçenekler Formu:

HTML dosyamızda <body></body> etiketleri arasında bir <form> elementi oluşturun. Tıpkı normal web sayfalarında yapığımız gibi tüm form elementlerini (select, radio vs.) kullanabilirsiniz. Örneğimizde Açık/Kapalı seçenekleri olan bir açılır liste ekleyeceğiniz. Formumuz aşağıdaki gibi olacak.

<form>
<select name="ayar" id="ayar" >
<option value="acik">Açık</option>
<option value="kapali">Kapalı</option>
</select>
</form>

Ayarların Saklanması:

Değiştirilen seçeneği hemen saklamak istiyorsak, ilgili elemente "değiştiğinde" olayını eklemeliyiz. Bunun için <body></body> etiketinin bittiği yere yani </body> kapanış etiketinden sonra aşağıdaki JavaScript kodunu yazıyoruz.

Böylelik ayarımızı değiştiğinde hemen kaydetmiş oluyoruz.

Kayıtlı Ayarların Tercihler Sayfasında Okutulması:

Ayarı değiştirip kaydetmenize rağmen tercihler sayfasını açtığınızda göremeyeceksiniz. Bu ayarınızın kaydedilmediği anlamına gelmiyor öncelikle. Form normal olarak yükleniyor fakat dikkat ederseniz ayarları okuyup formdaki ilgili öğelere bildirmedik. Bunun için <head></head> etiketleri arasına aşağıdaki JavaScript kodlarını ekliyoruz:

Artık ayarımız okunacak ve formdaki açılır listenin seçili değeri kayıtlı değere göre değişecektir.

Ayarların Eklentiye Uygulanması:

Tercihler sayfasında yapılan değişikliklerin eklentideki çeşitli dosyalarda okunması şu şekilde yapılıyor:

if (widget.preferences.ayar)
{
var ayar = widget.preferences.ayar;
}

Örneğin bu kodu "index.html" dosyamızda kullanarak "ayar" isimli değişkenimize tercihler sayfasında kaydettiğimiz değeri aktarabilir ve istediğimiz şekilde kullanabiliriz. Örnek:

if(ayar=="kapali")
{
//Bu işlemleri yap.
}

Bir sonraki yazımda eklentiler aracılığıyla istediğimiz web sayfasına JavaScript kodları yerleştirmeyi (script injection) anlatacağım. Görüşmek üzere...