Eskiden sadece büyük atlaslarda veya belgesellerde görebildiğimiz uydu fotoğrafları, gelişen teknoloji ve internet sayesinde artık her bilgisayardan erişilebilir hale geldi. Yaklaşık üç yıl önce ücretsiz bir şekilde hayata geçen Google Maps, coğrafi bilgi sistemlerini hayatımızın bir parçası haline getirmekle kalmadı, tarayıcımızda bir masaüstü uygulaması gibi çalışarak belkide AJAX teknolojisinin bu kadar yayılmasında en büyük etkenlerden biri oldu. Özellikle büyük şehirlerin yüksek çözünürlüklü fotoğraflarını kullanıcıların hizmetine sunan Google ve Microsoft gibi firmalar, bilmediğimiz bir adrese giderken bizi kaybolmaktan kurtarıyorlar.

Günümüzde yoğun ilgi gören harita uygulamaları artık üç boyutlu görüntülenebilen, trafik yoğunluğunu bildiren, afet bölgelerindeki hasarı gösterebilen, Microsoft Live Local gibi servislerle bazı şehirlerde gezinmeye imkan veren özelliklere kavuştular. Hatta Dünya’da dolaşmaktan sıkıldıysanız, Google Sky veya bu ay incelediğimiz Microsoft Virtual Telescope gibi uygulamalar ile uzayı keşfetmeye başlayabilirsiniz. Gelişim süreci devam ederken firmalar web programcılarını da unutmuyor; SDK ve API’leri sürekli güncelleyerek uygulamaların başka sayfalara kolayca entegre edilebilmesi için uğraş veriyorlar. Bizde şimdi kullanımı giderek artan Microsoft Virtual Earth kütüphanelerinin yardımıyla web sitemiz için bir harita uygulaması hazırlayacağız.

Google Maps ve Microsoft Virtual Earth’ı diğer harita uygulamalarından farklı kılan en büyük özellik, iki platformun da kütüphanelerinin tamamen AJAX teknolojisiyle çalışmasıdır. Ayrıca katmanlı yapıda oluşturulan görüntüler, harita üzerine harici öğeler eklenmesine ve bu öğeler üzerinden işlem yapılmasına imkan sağlıyor. Gerekli javascript kütüphanesini sayfamıza ekledikten sonra haritayı oluşturmak, koordinatları değiştirmek ya da yeni öğe eklemeye dair bütün metodlara ulaşabiliyoruz. Bu noktada önümüze çıkan iki seçenek var. Birincisi, kullandığımız metodları javascript ile yazarak uygulamanın kullanıcı tarafında (client-side) çalıştırılması. Diğer seçeneğimiz ise yazdığımız sınıfların sunucu tarafında (server-side) saklanması, oluşturacağımız sınıflar ve metodların ajax yada javascript ile sunucudan çağrılarak kullanıcıya ulaştırılması. Sunucu tarafında çalıştıracağımız uygulamalar için bir web servisi hazırlamamız ve harita üzerinde işlemleri buradan gerçekleştirmemiz de mümkün.

HARİTANIN KURULUMU

Virtual Earth ile hazırlayacağımız projemizde, Microsoft’un uygulama geliştirme arayüzlerini (API) kullanacağımızdan bahsetmiştik. Bu noktada http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6 adresindeki en yeni  kütüphaneyi referans olarak sayfamıza ekleyerek programlamaya başlayabileceğiniz gibi, bu kütüphaneyi kullanarak hazırlanan bazı paket uygulamaları kullanarak da harita uygulamanızı geliştirebilirsiniz. Buna örnek olarak açık kaynaklı PietschSoft.VE projesini  (http://www.codeplex.com/PietschSoftVE3/Release/ProjectReleases.aspx?ReleaseId=2200) ve bu projenin gelişmiş lisanslı sürümü olan Simplovation.Web.Maps.VE (http://simplovation.com/) paket uygulamalarını inceleyebilirsiniz. Ancak biz hazırlayacağımız uygulamada temel VE kütüphanesini kullanarak haritaları nasıl oluşturabileceğimizi göreceğiz.

Öncelikle javascript ile kullanıcı tarafında haritaların nasıl yaratılabileceğinden bahsedelim. Sınıf kütüphanesini sayfaya referans olarak ekledikten sonra, sayfa açıldığında yüklenecek bir fonksiyon içerisinde haritanın temeli olan VEMap nesnesi yaratarak işlemlere başlayabiliriz. VEMap nesnesi  yaratırken haritayı oluşturacağı bir DIV objesinin ID değerini parametre olarak girmemiz gerekiyor. Daha sonra yaratılan nesnenin haritayı yüklemesi için LoadMap metodunu kullanıyoruz. Tamamen opsiyonel 7 parametresi bulunan bu fonksiyon ile haritanın belirlenen DIV kontrolünde çalışmasını sağlayabiliriz. Örneğimizde parametre kullanmayıp önemli VEMap metodlarını tek tek inceleyelim. SetCenter metodu ile haritanın merkez koordinatını değiştirebiliyoruz. Enlem (latitude) ve boylam (longitude) değerleri ile yaratılan VELatLong nesnelerini alan SetCenter metodu haritada istediğimiz bölgeyi merkezde görüntülememize imkan veriyor.

Harita Tipleri Tablosu

Sık kullanılan bir diğer metod olan SetZoomLevel ile harita üzerinde 1-19 değerleri arasında bir zoom seviyesi belirleyebiliyoruz. Haritamıza başlangıç ayarları yaparken en son kullandığımız method ise harita tipi ayarlamaya yarayan SetMapType. Parametre olarak VEMapStyle nesneleri alan bu fonksiyon ile coğrafi ya da yol haritası gibi görünüm seçenekleri belirleyebilirsiniz (bkz. Tablo 1). Örneğimizde Türkiyenin koordinatlarını girerek hazırladığımız web sayfası şu şekilde:

Açıklama: Harita Kurulumu

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6">

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

var harita = null;

function HaritayiYukle()

{

harita = new VEMap('HaritaAlani');

harita.LoadMap();

harita.SetCenter(new VELatLong(39.28, 35.20));

harita.SetZoomLevel(4);

harita.SetMapStyle(VEMapStyle.Aerial);

}

</script></head><body onload="HaritayiYukle();">

<div id='HaritaAlani' style=" width:400px; height:400px;"></body></html>

Merkezini ayarladığımız haritanın ilk görünümü

Haritanızı oluşturmayı başardıysanız, uygulamamızın bir sonraki aşamasına geçebiliriz. Harita üzerinde belirli koordinatları merkezde görüntülemek için, yukarıda bahsettiğimiz SetCenter fonksiyonunu kullanarak kullanıcımızı yönlendirebiliyoruz. Yapmanız gereken, merkeze yerleştireceğiniz koordinatları belirledikten sonra, bu değerden bir VELatLong nesnesi yaratmak ve SetCenter metodunu çağırmak. Bu çağırma işlemini javascriptle yaparsanız, harita kütüphanesinin sınıfları AJAX tabanlı çalıştığı için sayfamızda herhangi bir yenilenme (postback) işlemi gerçekleşmeyecektir. Örneğimize İstanbul ve Ankara’nın koordinatlarını döndüren iki küçük fonksiyon ile başlıyoruz. Daha sonra bir koordinat alarak harita objemizin SetCenter methodunu çağıran MerkezBelirle fonksiyonu ile işlemi tamamlıyoruz. Dizayn alanında sayfanıza ekleyeceğiniz buton, resim veya köprü (hyperlink) nesneleri ile ilgili metodları çağırabilirsiniz. Burada dikkat etmeniz gereken nokta, köprü kullanımında adres (href) değerini anchor karakteri olan “#” ile doldurarak sayfada bir yenilenme işlemini engellemenizin gerekmesi. Hazırladığımız kodları aşağıda inceleyebilirsiniz:

JS Fonksiyonları:

function istanbulKoord()

{

var koord = new VELatLong(41.20, 29);

return koord;

}

function ankaraKoord()

{ return new VELatLong(40.02, 32.61); }

function MerkezBelirle(koord)

{ harita.SetCenter(koord); }

HTML Kodlar:

<a href='#' onclick='MerkezBelirle(istanbulKoord());'>İstanbul</a><br />

<a href='#' onclick='MerkezBelirle(ankaraKoord());'>Ankara</a><br />

Haritamız DIV alanı içerisine yüklenecek.

ŞEKİL EKLEMEK

Virtual Earth’ün kütüphanesinde hazır bulundurduğu bir diğer sınıf da şekiller. Harita üzerine şekil eklemek, çizim yapmak veya bir alanı seçmek için VEShape nesnelerini kullanabilirsiniz. Raptiye (PushPin), çizgi (PolyLine) ve poligon (Polygon) olarak çeşitlendirilen bu eklentilerden kullanmak istediğimizi nesne yaratırken belirliyoruz.Farklı bir katmanda oluşturulan şekil nesnelerini yaratabilmek için bir şekil tipi (VEShapeType) ve eklenecek bölgenin koordinatlarını girmemiz yeterli. Resmi değiştirilebilen şekil objeleri, kullanıcıya istediğimiz mesajı göstermek için başlık ve açıklama bilgilerine de sahip. Örneğimizde harita üzerinde belirli bir noktayı raptiye (PushPin) şekli ile işaretleyip, SetTitle ve SetDescription metodlarını kullanarak bir açıklama ekleyeceğiz. Şekil üzerinde düzenlemeleri bitirdiğimiz zaman harita nesnesinin AddShape fonksiyonu ile ekleme işlemini gerçekleştiriyoruz. Örneğimizde hazırladığımız PushPinEkle fonksiyonu ve kullanılışını aşağıda görebilirsiniz:

Açıklama: Şekil Eklemek

function PushPinEkle(koord, baslik, aciklama)

{ var sekil = new VEShape(VEShapeType.Pushpin, koord);

sekil.SetTitle(baslik);

sekil.SetDescription(aciklama);

harita.AddShape(sekil);

}
<a href='#' onclick='PushPinEkle(istanbulKoord(), "Sariyer", "Kilyos plajı");'>Sariyer</a><br />

<a href='#' onclick='PushPinEkle(ankaraKoord(), "TBMM", "Turkiye Buyuk Millet Meclisi");'>TBMM</a>

PushPin gibi eklentiler kullanıcı deneyimini arttırıyor.

SUNUCU KONTROLLERİ

Dahili Virtual Earth sınıfları AJAX tabanlı çalıştığı için javascript ile kullanıcı tarafında interaktif bir uygulama çalıştırmayı başardık. Ancak ekleyeceğiniz sınıflar ya da geliştirmek isteyeceğiniz özellikler için kodları sunucu tarafında çalıştırmak isteyebilirsiniz. Bu durumda ilk yapmamız gereken Ajax Extensions altındaki ScriptManager objesini sayfamıza taşımak. Sonraki adım kullanacağımız .js dosyalarını ScriptReference nesnesi ile sayfaya eklemek. Sistemin çalışma mantığını aşağıdaki kodlar üzerinde inceleyebilirsiniz:

Açıklama: Şekil Eklemek

<script type="text/javascript">

var harita = null;

function HaritaYukle()

{

harita = new VEMap("myMap");

harita.LoadMap(new VELatLong(39.2, 35.2),6);

}

Sys.Application.add_load(HaritaYukle);

</script>

<body>

<form id="form1" runat="server">

<div>

<asp:ScriptManager runat="server" ID="ScriptManager1">

<Scripts>

<asp:ScriptReference Path="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6" />

</Scripts>

</asp:ScriptManager>

<div id="myMap" style="position:relative; width:600px; height:400px;"></div>

DÜNYA TURU

Gelişimi devam eden coğrafi bilgi sistemlerinin kullanımı da gün geçtikçe artıyor. İnternette birçok firmanın yararlandığı bu uygulamalar artık sadece adres göstermek için değil, emlak, arsa tanıtımı yapmak, filo takibi gerçekleştirmek gibi değişik alanlarda kullanılıyor. Örneğin bu yıl Microsoft’un düzenlediği Imagine Cup yarışmasında sürdürülebilir çevre için harita uygulamalarının yazılımcılıar tarafından yoğunlukla kullanıldığına şahit olduk. Bunların yanında CV’sini harita üzerinde hazırlayanlar gibi kişisel amaçlara yönelik yaratıcı uygulamalar da internette yerini almakta. Bu olanaklardan yaralanmanız, sitenizi takip edenler açısından kesinlikle faydalı olacaktır.

p.s. Bu yazı Haziran 2008 tarihli PC Magazine dergisi makalemden derlenmiş olup, kullandığım IDE, API ve toolkitlerin yeni versiyonunu indirmenizi tavsiye ederim ;)

Web programcılarının en çok vaktini çalan unsur, hiç şüphesiz sayfalarda ki küçük ayrıntılarla uğraşmaktır. Ancak detaylara verdiğiniz önem, web sitenizin kullanım kolaylığını arttırırken kullanıcıların sitenizi tercih etme sebebi de olabilir. Hatırlarsanız, geçtiğimiz aylarda projelerimizde kullandığımız “Ajax Control Toolkit” araçları, değişik alanlarda bünyesinde bulundurduğu öğeler ile bizleri büyük bir zaman kaybından kurtarıyordu. Ajax ile entegre gelen Visual Studio 2008 ise Control Toolkit araçlarının kullanımını daha da kolaylaştırarak sayfamızdaki ASP.NET nesnelerini doğrudan bu araçlara bağlamamıza imkan veriyor.
Bizde şimdi Ajax tabanlı bir web sitesi kayıt formu hazırlayarak, hem bu araçları öğrenmeye devam edeceğiz hem de yeni platformun bizlere sağladığı kolaylıkları tanıma fırsatı bulacağız.

Üyelik sistemine sahip web siteleri, kullanıcı adı ve şifre dışında kullanıcılarıyla ilgili daha çok bilgi edinmek isteyebilirler. Yapmamız gereken kayıt sayfasında değişik kullanıcı giriş alanları barındıran bir form oluşturmak ve bu formdan gelen verileri veritabanımıza kaydetmek. Tabi bu formu hazırlarken ASP.NET’in Ajax yeteneklerinden faydalanarak kısa zamanda profesyonel bir tasarım yapmamız mümkün. Extender diye adlandırılan Control Toolkit kontrolleri Panel, TextBox, Image, DropDownList gibi çok kullanılan ASP.NET öğelerini geliştirerek onlara Ajax destekli özellikler katıyordu. Visual Studio 2008 ile araç kutusundan sayfamıza eklediğimiz bu nesnelerinin yanındaki bir ok tuşuyla “Extender Wizard” isimli sihirbaza erişiyor ve nesneleri otomatik olarak bu araçlara bağlayabiliyoruz.

Eklediğiniz nesnenin yanında beliren SmartTask menüsü ile Extender Sihirbazına ulaşabilirisiniz.

Geçtiğimiz aylarda “Bilişim Kahramanları Aramızda” lansmanlarıyla ülkemizde tanıtımı yapılan yeni sürüm Visual Studio ile hala tanışmadıysanız, http://msdn2.microsoft.com/en-us/vstudio/products/aa700831.aspx adresinden deneme sürümü yada ücretsiz Express versiyonlarını indirmeniz mümkün. Ajax eklentileri programla birlikte geldiği için tekrar kurmanıza gerek yok fakat projemizde kullanacağımız ControlToolkit öğelerini yüklemeye ihtiyacınız olacak. VS 2008 kurulumunu gerçekleştirdikten sonra http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=4923 adresindeki ControlToolkit paketini indirip, SampleWebSite\Bin klasörü altındaki “AjaxControlToolkit.dll” dosyasını araç kutusu üzerine sürüklerseniz, yeni Ajax oyuncaklarınız otomatik olarak Visual Studio uygulamasına kurulmuş olacak. Bütün adımları tamamlayınca, bazı toolkit elemanlarını kullanarak hazırlayacağımız örnek projemize başlayabilirsiniz.

AjaxControlToolkit.dll dosyasını sürükleyince kurulum otomatik gerçekleşiyor.

İŞLEMLERE BAŞLIYORUZ
VS 2008 altında Ajax eklentileri hazır geldiği için yeni web sitesi oluştururken sitenizin Ajax destekli olacağını belirtmenize gerek yok. ASP.NET web sitesi oluşturduktan sonra, Toolbar’ın “Ajax Extensions” sekmesi altındaki “ScriptManager” ve “UpdatePanel” nesnelerini sayfamıza sürükleyerek sayfamıza Ajax yetenekleri kazandırıyoruz. Formumuza ekleyeceğimiz nesnelerin güzel görünmesi için bir tablo altında tutulması tercih edilir. Ancak Control Toolkit’in sahip olduğu bazı görünüm araçları tablolar ile çalışamadığı için, bütün formu bir Panel içerisinde oluşturmamız iyi olacaktır. Sayfamıza bir Panel nesnesi ekledikten sonra boyutlarını ayarlayalım ve nesnenin yanında görünen ok tuşuna basarak “Add Extender” seçeneğine tıklayalım. Yukarıda sözünü ettiğimiz Extender sihirbazı Panel nesnesi için kullanabileceğiniz bütün araçlar ile karşınızda belirmiş olmalı.

Extender Wizard ile ekleyebileceğiniz bütün araçları görebiliyorsunuz.

Projemizde kullandığımız panelimiz için görsel araçlardan DropShadow ve RoundedCorners öğelerini seçiyoruz. Ekleme işleminden sonra, Extender nesnesi Panel ile otomatik bağlanıyor ve özellikleri Panel’in özellikleri altından değiştirilebiliyor. RoundedCorners kontrolü panelimizin yuvarlak kenarlara sahip olmasını sağlayarak bizi resim veya JavaScript kodlarıyla uğraştırmıyor. “Corners” özelliği ile hangi köşelerin biçimini değiştirmek istediğinizi belirliyebiliyor, Radius ile açı değeri verebiliyorsunuz. DropShadow ise kullanıldığı panele gölgelendirme yapmaya yarayan bir kontrol. Burada önemli olan, yuvarlak hatlara sahip panelimize uyması için DropShadow’un Rounded özelliğini “True” yapmak ve iki nesnenin açı değerlerinin aynı olduğundan emin olmak.

Extender kontollerinin özelliklerine bağlı olduğu nesnenin altında ulaşabilirsiniz.

Formumuzun arka planını süsleyecek olan panelimizi hazırladıktan sonra bir tablo yatarak içerisine form elemanlarını eklemeye başlayabiliriz. Kişisel bilgiler ve üyelik bilgileri olarak ayırdığımız üyelik formuna ilk önce isim, mail ve doğum tarihi için gerekli TextBox nesnelerini ekliyoruz. Tekrar Extender Wizard’a girecek olursak bu nesneler için desteklenen birçok aracın olduğunu görebiliriz. Öncelikle tasarımımız için kullanacağımız TextBoxWatermarkExtender öğesini tanıyalım. Bu kontrol ile TextBox objelerinin görünümünü değiştirebilir, başlık (caption) ifadelerinin kutunun içerisinde yer almasını ve dinamik olarak değişebilmesini sağlayabiliriz. WatermarkCssClass özelliği ile WatermarkExtender, harici bir css dosyasında veya önceden tanımladığınız stil nesnesini kullanarak TextBox’un seçili değilken nasıl görüntüleneceğini ayarlayabiliriz. Text özelliğine ise kutu seçili değilken içerisinde yazmasını istediğiniz metni girebilirsiniz. Biz örneğimizde aşağıdaki stili kullanacağız:

Açıklama: TextBoxWatermarkExtender örnek stili.

.secili {
height:18px;
width:148px;
}

.secili_degil {
height:20px;
width:150px;
padding:2px 0 0 2px;
border:1px solid #BEBEBE;
background-color:#F0F8FF;
color:gray;
}

ZAMANINIZ DEĞERLİDİR

Control Toolkit araçları içerisinde en çok kullanılanlardan biri olan CalendarExtender ile tarih girişlerini birkaç tıklamayla takvim üzerinden alabilirsiniz. Kodlanması çok uzun zaman alabilecek böyle bir kontrolün hazır gelmesi gerçekten çok kullanışlı. Seçtiğiniz TextBox’a bu aracı bağladıktan sonra, kullanıcıların tıkladığında açılan bir takvim hazırlanmış oluyor. Ancak bu opsiyonu bir resim veya buton ile çalıştırmak da mümkün. Örneğimizde doğum tarihi alanının yanına bir Image nesnesi ekliyoruz. Bu işlemden sonra, CalendarExtender’in PopupButtonID özelliğine Image nesnesinin ID’sini yazarak takvimin resim tıklandığında açılmasını sağlıyoruz. Takvim eklentisinin stilini ve döndürdüğü değeri ayarlamanız da mümkün. Format özelliği ile tarihsel formatlama yaparak kutuya yazılan gün (d), ay (M) ve yıl (y) biçimini belirleyebilirsiniz (örneğin dd.MMM.yyyy).

CalendarExtender ile birkaç tıklamayla takviminiz hazır.

Kullanıcılarınızın ileride kötü sürprizlerle karşılaşmaması için kendilerine iyi bir şifre seçmesi önemlidir. Ancak çoğu kullanıcı rahatlığına düşkündür ve güvenilirliği kendisine aktarılmazsa hafızasını yoracak şifrelerden kaçınır. İşte bu noktada PasswordStrengthExtender aracı devreye giriyor ve üyelik sırasında şifre girişinin yanında belirerek yazılan şifreye dair kullanıcıya bilgi veriyor. Text ve BarIndicator isminde iki tipi bulunan bu kontrol ile yazılı veya görsel olarak şifrenin sağlamlığını aktarabilirsiniz. Örneğimizde kullandığımız Text tipindeki kontrolün Prefix özelliğine bir tanım yazısı ekliyor ve TextStrengthDescriptions özelliğine “;” karakteriyle ayrılmış güvenlik seviyelerini yazıyoruz (düşük;orta;yüksek gibi). Bu nesne toplamda 10 farklı seviyeye kadar çalışabiliyor. Ayrıca üyelik sisteminize göre tercih edilen şifre uzunluğunu (PreferredPasswordLength), içermesi gereken minimum numerik, sembol ve büyük küçük harf sayısını belirliyebilir, CalculationWeightings özelliğiyle bu sayıların hesaplamadaki ağırlığını arada “;” karakterleri kullanarak değiştirebilirsiniz (ör: 10;5;5;10).

Kullanıcılarınızı şifrelerinin güvenliğine dair bilgilendirin.

Üyelik formlarında sık kullanılan diğer bir nesne olan CheckBox’lar için de değişik genişleme kontrolleri mevcut. Belirli CheckBox objelerinden sadece bir tanesinin seçilebilmesine izin veren MutuallyExclusiveCheckBox kontrolü bunlardan biri. Normalde çoktan seçmeli alanlar için RadioButton nesneleri kullanmaya aşinayız. Fakat bu nesneler seçildikten sonra iptal edilememesi ve bir seçeneğe sabitlenmesi nedeniyle bazı durumlarda kullanımı tercih edilmiyordu. Kullanıcıların doldurmasını zorunlu olmayan alanlarda kullandığımız CheckBox nesnelerine MutuallyExclusiveCheckBox kontrolü ekleyerek bir nevi radio button gibi davranmasını sağlayabilirsiniz. Bu sayede kullanıcı seçimini yaptıktan sonra alanı doldurmaktan vazgeçerse seçimini iptal edebilir. Örneğimizde doldurulması zorunlu olmayan cinsiyet alanında Erkek ve Bayan seçimleri CheckBox vasıtasıyla işaretleniyor. Ancak iki cinsiyeti seçmek çok anlamlı olmayacağından eklediğimiz extender kontrolü ile sadece bir tanesinin seçilebilmesini mümkün kılıyoruz. Bunu yapabilmek için farklı CheckBox’ların extender ayarlarındaki Key özelliğine aynı değeri vermeniz yeterli. Aynı Key değerine sahip CheckBox extender nesneleri arasından sadece birinin seçilmesine izin veriliyor. CheckBox için kullandığımız diğer araç ToggleButtonExtender ise nesnelerin görünümünü değiştirmemize imkan veriyor. Mevcut check box’lardan sıkıldıysanız, extender nesnesinin CheckedImageUrl ve UncheckedImageUrl özelliklerine seçtiğiniz bir resmin adresini yazarak seçimlerin resimlerle ifade edilebilmesini sağlayabiliyorsunuz.

Örnek projemizde Ülke, Şehir ve Semt girişlerini sağlayan DropDownList nesneleri için CascadingDropDown kontrolünü kullanabilirsiniz. Formunuzda birbirine bağıntılı DropDown öğeleri bulunuyorsa bu kontrol ile seçim sırasına göre nesneleri aktif hale getirebiliyorsunuz. Extender’i kullanmak için DropDown’ları dolduracak bir web servis hazırlamanız gerekli. Bu aşamadan sonra ParentControlID özelliğine kendinden önce gelmesi gereken nesnenin ID’sini yazarak aradaki bağlantıyı kuruyoruz. PromptText ileti seçili değilken yazacak metni belirlerken, ServiceMethod özelliğine mevcut listeyi dolduran web servis metodunun ismini yazmalısınız.

CONTROL TOOLKİT’İ KEŞFEDİN

Tasarladığımız kayıt formunu artık tamamlamış bulunuyoruz. ASP.NET Ajax altyapısı, hazırlanması saatler hatta günler sürebilecek birçok ayrıntıyı dakikalar içerisinde sitemize uygulamamızı sağladı. Sık kullanılan toolkit kontrollerine değindiğimiz bu proje üzerinde değişik tasarım, doğrulama ve güvenlik kontrollerini de ekleyerek daha profosyonel hale getirmeniz mümkün. ControlToolkit araçlarının kullanımını http://www.asp.net/AJAX/AjaxControlToolkit/ adresinden inceleyerek keşfetmenizi tavsiye ederim. Visual Studio 2008 ile kullanımı daha kolay hale gelen bu kontroller ile kodlaması uzun zaman alan birçok özelliği çok kısa bir sürede sitenize ekleyebiliyorsunuz. Sitenizin içeriği ve işlevselliği önemli olsa da, unutmayın ki şeytan ayrıntıda gizlidir.

Örnek uygulamayı indirmek için tıklayın: Uygulama

p.s. Bu yazı Mayıs 2008 tarihli PC Magazine dergisi makalemden derlenmiştir; kullandığım IDE ve toolkitlerin yeni versiyonlarını yüklemenizi tavsiye ederim.

Ziyaretçilerinizin web sitenizi önemsemesini istiyorsanız, siz de onlara önem verdiğinizi göstermelisiniz. Birçok sitede bulunan iletişim formları, kullanıcıların öneri, istek  ve şikayetlerini hızlı bir şekilde ilgililere iletebilmesine imkan tanır. Bizde bu ay ASP.NET Ajax’ın yeteneklerinden faydalanarak şık ve hızlı çalışan bir iletişim formu oluşturacağız. Genel olarak kullanıcıların yazdıklarını belirlenen bir kişiye mail atarak ulaştıran iletişim formları, bizim yapacağımız örnekte bir adım öteye giderek bu işlemin hatasız bir biçimde sonlanmasını sağlayacak.

Senaryoyu biraz daha genişletip, iletişime geçilecek insan sayısını arttırmak da mümkün. Biz örneğimizde dergimiz yazarlarının listesine sahip bir formda kullanıcının istediği yazara hitap edebileceği bir uygulama dizayn edeceğiz. Buradaki problem yazarların aldığı eleştirilere cevap verebilmesi için mesajı yazan kullanıcının iletişim bilgilerinin de iletilmesi gerekliliği. Mesaj göndermek isteyen kullanıcının kendisine cevap verilebilmesi için adı, soyadı ve e-mail adresi gibi bilgilerinin mutlaka girilmesini bekliyoruz. ASP.NET’in formlardaki alanları kontrol edip geçerliliğini onaylayan bazı “Validator” nesneleri bu konuda bize yardım edebilirler.  Bu nesneler bir yazı kutusunun (text-box) boş bırakılmaması gerektiğini, yada girilen e-mail adresinin formata uymadığını kullanıcıya hoş bir dille hatırlatıp iletişim problemleri yaşanmasını engelliyorlar.

Blogumu takip eden yada Ajax ile ilgilenen biriyseniz, salt ASP.NET formlarının ne kadar can sıkıcı olduğunu  düşünebilirsiniz. Özellikle alanların hatalarını kontrol eden bir form olduğu için, böyle durumlarda sayfanın yenilenmesi ve bilgilerin kaybolması gibi sorunlar sizinle iletişime geçmek isteyen kullanıcınız için iyi bir deneyim olmayacaktır. Ajax ile klasik formları daha interaktif hale getirmek için yapmanız gereken ilk iş kullandığınız Visual Studio 2005 yada Web Developer Express Edition’a gereken http://ajax.asp.net adresindeki “Ajax Extensions” paketini indirerek kurmak. Eğer VS 2008 versiyonuna terfi ettiyseniz, ilgili kütüphaneler hazır geldiği için bir sonraki adıma geçebilirsiniz.

Form Hazırlıkları

Hazırlayacağımız formdaki bütün elemanların Ajax ile yenilenme (postback) işlemine tabi tutulmadan güncellenebilmesi için, araç kutusundaki ScriptManager ve UploadPanel nesnelerinizi sayfaya eklemeyi unutmayın. UploadPanel içerisinde bulunan nesnelerin Ajax ile desteklendiğini, yine de bazı elemanların AutoPostBack özelliğini “True” yaparak uyum sağlaması gerektiğini hatırlatarak, formumuzu oluşturmaya başlayalım. Örneğimizde, iki sütuna ayrılmış bir tablo oluşturarak, içinde dergi yazarlarının isimleri ve mail adreslerinin tutulduğu bir DropDownList’i ekliyoruz. Bu listenin altına kullanıcının bilgilerini girmesini istediğimiz Ad-Soyad, E-mail adresi, ve opsiyonel bir veri olarak URL alanını ekliyoruz. Formun en altına, mesaj ve konu alanları için TextBox nesneleri yerleştiriyoruz. Buradaki mesaj alanının TextMode özelliğini “MultiLine” ve row sayısını 10 olarak belirlersiniz, kullanıcılarınıza mesaj yazmaları için geniş bir alan yaratmış olursunuz. Son olarak bir gönder butonu, ve bu butonun altına gönderme işleminin sonuçlandığını bildirecek olan bir Label nesnesi ekleyerek formu tamamlıyoruz.

Alanların Kontrolü

İletişim formumuzun hedeflerinden biri de doldurulması zorunlu olan alanların dinamik kontrolü ve hatalı olanların kullanıcıya bildirilmesiydi. Bu işlem için araç kutusunun Validation bölümündeki araçları kullanacağız. Çeşitli Validator nesnelerini alanlara bağlayarak bu alanların doldurululduğunu (RequiredFieldValidator), aldığı değerlerin belirli bir aralıkta olduğunu (RangeValidator) veya belirli bir formata uymasını (RegularExpressionValidator) kontrol edebilirsiniz. Örneğimizde, doldurulması zorunlu olan yazar seçimi, isim, e-mail, konu ve mesaj alanları için RequiredFieldValidator nesnelerini sayfamıza ekliyoruz. Her bir nesnenin ControlToValidate özelliğinde hangi alanı kontrol etmesini istiyorsak bunu seçerek ilişkilendirmesini yapmamız lazım. Ayrıca “ErrorReport” ve “Text” özelliklerine yazdığımız hata mesajları ile kullanıcının nerede hata yaptığını görmesini sağlayabiliriz.

Validation nesnesini formdaki alanlardan birine bağlamalısınız.

Yazarlarımızın kullancılara cevap verebilmesi için E-Mail alanı son derece önemli. Kullanıcının girdiği adresin düzgün yazılıp yazılmadığını yine validator nesneleri ile kontrol etmemiz mümkün. Araç kutusundan sayfamıza ekleyeceğimiz bir RegularExpressionValidator nesnesi, bağlandığı alana istenen formatta yazı girilmesini denetliyor. Sayfamızdaki e-mail alanında bu nesneyi kullanabilmek için ControlToValidate özelliğinden ilgili TextBox nesnesini seçmeli, ErrorReport ve Text özelliklerine hata mesajlarını yazmalı ve ValidationExpression özelliğine tıkladığınızda çıkan menüden  “Internet E-mail Address” seçeneğini işaretlemeliyiz. Bu eklentiyle formdaki e-mail alanı kontrol edilecek ve düzgün bir e-mail adresi girilmediğinde (ör: boşluklu veya @ karakteri olmayan) kullanıcıya hata mesajı döndürülecek.

RegularExpressionValidator değişik türlerdeki alanları denetliyebiliyor.

Validation nesneleri eklendikten sonra dizayn sayfamızın görüntüsü.

Email Gönderimi

Farkındaysanız Ajax tabanlı ve birçok denetimin kullanıldığı bir form oluşturduk ve tek satır kod yazmadık! Visual Studionun bizlere sunduğu araçlar ile kısa sürede hazırladığımız formumuzun e-mail gönderebilmesi için özlediğimiz kod ekranına girebiliriz. Bu noktada .Net Framework altındaki Mail sınıfının fonksiyonları bize yardımcı olacak, ama önce kod sayfasının en üstünde

using System.Net.Mail;

deklerasyonunu yaparak bu sınıf altındaki metodları sayfamıza dahil etmeliyiz. Daha sonra mail göndermek için gereken kodları Gönder butonunun click olayınının içerisine yazabiliriz. Dizayn ekranında butona çift tıklayınca bu kod bloğu sizin için oluşturulacaktır. Önce validator nesnelerinin isValid özelliklerini kontrol edip, formdaki bütün alanlar denetimden geçebilmiş mi diye bakıyoruz.
Sonraki aşama gerekli verileri alıp maili göndermek olacaktır. Yazmamız gereken kod bu şekilde:

protected void Button1_Click(object sender, EventArgs e)
{
        //Doldurulması zorunlu alanların kontrolü:
        if (RequiredFieldValidator1.IsValid && RequiredFieldValidator2.IsValid && RegularExpressionValidator1.IsValid && RequiredFieldValidator4.IsValid && RequiredFieldValidator5.IsValid)
        {
            /*Yeni mail nesnesi yaratıp, kullanıcının mail adresini ve sectigi yazarin DropDownList'ten dönen mail adresini ekliyoruz */
            MailMessage MyMail = new MailMessage(TextBox2.Text, DropDownList1.SelectedItem.Value);

            //Mailin konusunu ekliyoruz.
            MyMail.Subject = TextBox4.Text;

            /*Maile yazılacak mesajın üst kısmına kullanıcının isim ve url bilgilerini ekliyoruz */
            string gonder = "İsim: " + TextBox1.Text + "\nUrl: " + TextBox3.Text + "\nMesaj:\n" + TextBox5.Text;
            MyMail.Body = gonder;

            /*Yeni bir mail client yaratıp, sunucumuzdan maili ilgili kişiye gönderilmesini sağlıyoruz */
            try
            {
                SmtpClient MyClient = new SmtpClient("localhost", 25);
                MyClient.Send(MyMail);
            }
            catch (Exception ex)
            {
   /*Mail gönderme işlemi sırasında oluşan sunucu hatalarını kullanıcıya bilgilendirmeliyiz.*/
                Label2.Text = "Sunucudaki bir hata nedeniyle mail gönderilemedi.";
                return;
            }

            //Kullanıcıya işlemin tamamlandığına dair bir yazı gösteriyoruz.
            Label2.Text = "Mesajınız Gönderilmiştir!..";

            //Yeni bir mesaj için formdaki bütün alanları temizliyoruz.
            DropDownList1.SelectedIndex = 0;
            TextBox1.Text = "";
            TextBox2.Text = "";
            TextBox3.Text = "";
            TextBox4.Text = "";
            TextBox5.Text = "";

        }
    }

İletişim formumuz tepkisiz kullanıcılara isyan ediyor J

Toolkit Araçlarını Kullanmak

Tebrikler, artık elimizde kullanabileceğimiz başarılı bir iletişim formumuz var. Ancak yapabileceklerimiz bunlarla sınırlı değil. Önceki workshoplarda bahsettiğimiz control toolkit elemanlarını sayfamıza ekleyerek, kullanıcıların aldığı statik hata mesajlarını görsel açıdan daha güzel bir hale getirebiliriz. Bir hatırlatma yaparsak, Ajax Extensions ortaya çıktıktan sonra yayınlanan control toolkit kütüphanesi, internette yaygın bir şekilde kullanılan ajax uygulamalarını mevcut altyapının üzerine inşa edilen çeşitli araçlarla ASP.NET projelerimize eklememize imkan tanıyordu. Bu araçları kurmak için toolkit kütüphanesini http://www.codeplex.com/AtlasControlToolkit adresinden indirmeniz gerekmekte. Ardından Visual Studio araç kutusunda yeni bir sekme yaratıp, sağ tuş ile “Choose Items” komutuna tıkladıktan sonra açılan arayüzdeki Browse tuşuna tıklamalı, indirdiğiniz dosyalar arasında yer alan AjaxControlToolkit.dll dosyasını eklemelisiniz.

ControlToolkit araçlarıyla sayfamız daha interaktif bir görünüme kavuştu.

Artık dizayn sayfamıza geri dönebiliriz. Eklediğimiz toolkit araçları içerisindeki ValidationCalloutExtender, sayfamızda bulunan Validation nesnelerinin görünümünü değiştirecek özelliklere sahip. Bu aracı sürükleyerek sayfada kullandığımız her Validation nesnesinin yanına bir tane ekleyelim. Önceden denetimden geçemeyen alanların yanında kırmızı bir uyarı çıkaran Validation nesneleri, bu toolkit aracıyla birlikte kullanıcıya popup uyarılar göstererek iletişim formumuza profesyonel bir görünüm katacak. Bütün denetleyicilerin yanına bir ValidationCalloutExtender ekledikten sonra bu nesnelerin “TargetControlID” özelliğinden bir denetleyici seçerek birbirleriyle ilişkilendirin. Artık Validation nesneleri uyarı göstermek istediğinde, bağlı olduğu ValidationCalloutExtender çalışarak şık görünümlü bir popup uyarı gösterecek.  Öte yandan önceki tasarımımızda Validation nesnelerimizin Text özelliklerine yazdığımız yazılar hala gözükmeye devam edecektir. Yazı ve popup uyarılarının aynı anda ortaya çıkması güzel bir görüntü oluşturmayacağı için, validation nesnelerinin Text özelliğindeki yazıyı silebilir, yada bir * karakteriyle küçük bir uyarı vermeye devam etmesini sağlayabilirsiniz. Extender nesneleri ise Validation objelerinin ErrorMessage özelliğinde bulunan yazıyı okuyacaklar.

ValidationCalloutExtender nesneleri eklendikten sonra dizayn sayfamızın görünümü.

İletişime Geçin

Planladığımız iletişim formunu Ajax’ın imkanları ile tasarlayıp, Control Toolkit araçlarıyla görsel açıdan güzel bir hale getirdik. Hazırladığımız interaktif sayfa, ziyaretçileriniz ile daha iyi iletişim kurabilmenize olanak sağlarken, sitenizin prestijini arttıracaktır. Çeşitli araçlara sahip olan toolkit’i ASP.NET Ajax ile yaptığınız bütün projelerde gözden geçirmenizi tavsiye ederim.

p.s. Bu yazi Nisan 2008 tarihli PC Magazine makalemden derlenmistir; kullandigim IDE ve toolkitlerin yeni sürümlerini takip etmenizi tavsiye ederim :)

Türk halkı olarak gösterdiğimiz ilgi, İngiliz The Sunday Times gazetesine bile haber olan; kullanıcı sayımızı bir ayda %466 artırarak özel bir rekor kırdığımız ve şu anda 3 milyona yaklaşan Türk üyesi bulunan Facebook üzerinde ASP.NET AJAX kullanarak uygulama geliştirebilmek hakkında yazmak istiyorum :)

Kullanıcısı sayısı bu kadar fazla olunca, Facebook platformuna özel uygulamalar geliştirmek pek çok yazılımcının ilgilendiği bir konu haline geldi. Hatta uygulamalar üzerinden verilen reklamlar ile insanlar para kazanmaya başlayınca, bu alanda bir pazar oluşmaya başladı ve bu uygulamaları geliştiren şirketlerin milyon dolarlar seviyesindeki fiyatlarla satıldığına tanıklık ettik.

Ülkemizde ise birçok insan, hazırladığı çeşitli uygulamalar ile Facebook dünyasını renklendirmeye devam etmekte. Bunların çoğu php ile hazırlansa da, internet üzerinde yer alan çok güçlü API ve ASP.NET sınıf kütüphaneleri  ile bu tip uygulamaları kısa sürede geliştirebilmek olası.

Bizde bu ayki dersimizde bu kütüphaneleri kullanara nasıl kendi Facebook uygulamamızı geliştirebileceğimizi göreceğiz. Eğer sizde Facebook üyesiyseniz ve yeterince ilkokul  arkadaşınızı bulduysanız, artık sıkılmaya başlamış olabilirsiniz. Peki  farklı uygulamalar ile Facebook’u renklendirmeye hazır mısınız?

Facebook Uygulama Geliştirme Alt Yapısı

Facebook’un güçlü uygulama geliştirme altyapısı bizlere birçok imkan sunuyor. Bu altyapıda web sayfalarını oluşturmak için FBML diye adlandırılan bir dil, veritabanı işlemleri için FQL sorgu sistemi ve FBJS adında bir javascript yorumlayıcısı gibi özgün araçlar mevcut. Ancak biz bu altyapıyı zaten kullanan bir ASP.NET sınıf kütüphanesi kullanacağımız için bu araçların hepsinin kullanımını öğrenmemize gerek kalmıyor. Bütün bu uygulama geliştirme bilgilerine geçmeden önce Facebook sayfa yapılarına değinelim. Geliştireceğimiz uygulamalar temel olarak 2 sayfa yapısında gözükebilir; Canvas sayfa yapısı ve Profil sayfa yapısı.

Canvas sayfalar, Facebook çerçevesi içinde kalan geniş alanda uygulamanızın çalışmasına izin verir. Bunu size ait bembeyaz bir tuval olarak düşünübilirsiniz. Üstelik bu tuvalin içinde FBML kullanmak zorunda değilsiniz. Facebook burada IFRAME uygulamalara da izin vermektedir, yani herhangi bir web sayfanızı olduğu gibi burada gösterebilirsiniz. Genellikle, uygulama eklendikten sonra gelen davetiye gönderme sayfaları, yada profil sayfasına sığmayan uygulamalar bu canvas sayfalarında yer alırlar.

Bir diğer seçeneğimizde profil sayfasını kullanmak. Hepinizin aşina olduğunu düşündüğüm, uygulamanın profil sayfanızda bir kutu içerisinde çalıştığı seçenek bu. Profil sayfaları iki bölümden oluşmakta; 200 piksel boyutundaki dar alan (narrow) ve 400 piksel boyutundaki geniş alan (wide). İşte bu bölümlere FBML kullanarak uygulama geliştirebilir, “Profile-action” diye tabir edilen, resimlerin altındaki linkler bölümüne de kendi uygulamanızın bir bağlantısını ekleyebilirsiniz.

Mevcut Facebook sayfa yapıları.

Uygulamamızı nerede geliştirebileceğimizden bahsettik, şimdi nasıl geliştirebiliriz buna değinelim. Öncelikle “Developer” uygulamasını http://www.facebook.com/developers/ adresinden ekleyerek gerekli kayıt işlemlerine başlamalıyız. Uygulama sayfasındaki “Set Up New Application” butonuna tıklayarak, formu doldurmaya başlayın. “Optional Fields” içerisindeki “Callback Url” alanına uygulamamızın çalıştığı adresi yazmamız gerek.

Geliştirme esnasında uygulamamızın çalışabilmesi için buraya “http://localhost/ornek/” gibi lokal bir adres de yazabiliriz. Uygulamanızda IFRAME kullanacaksanız “Application Type” alanından bu seçiminizi belirmeniz gerekiyor. “Can your application be added on Facebook?” sorusuna “Yes” cevabı vererek, açılan formun “Post-Add Url” alanına uygulama eklendiğinde açılacak sayfanın adresini, “Side Nav Url” alanına menüdeki butonuna basıldığında gitmesi gereken adresi vermelisiniz ve bütün bunlar yine lokal adresler olabilir. Kayıt işlemleri sonucunda edineceğimiz API KEY ve SECRET anahtarlarını ileride uygulamamızda gereken yerlere ekleyerek, Facebook ile beraber çalışabilmesini sağlayacağız.

Uygulamamızın kaydı tamamlandıktan sonra gerekli anahtarlara ulaşabiliriz.

Sırada uygulamamızı geliştirmek için kullanacağımız sınıf kütüphanelerini Visual Studio’ya ekelemek var. ASP.NET kullanarak Facebook uygulamaları geliştirmek için Facebook.NET, VS Starter Kit, Client Library for VB.NET ve Developer Toolkit gibi değişik donatılar mevcut. Biz bunlardan için en çok kullanılan “Facebook Developer Toolkit” platformunu seçtik. Yapmamız gereken ilk iş http://www.codeplex.com/FacebookToolkit adresinden gerekli binary dosyaları indirmek. Bu platformun en büyük avantajları, hem web uygulamaları hemde masaüstü uygulamalar için kütüphaneler ve araçlar içeriyor olması.

İndirme işleminden sonra Visual Studio’yu açmaya hazırız. Önce yeni bir “Web Site” yaratıp, daha sonra “Solution Explorer” bölmesine sağ tuşla tıklayarak “Add Reference -> Browse” sekmesi altından indirdiğimiz Facebook.dll ve Facebook.WebControls.dll kütüphanelerini projemize eklemeliyiz. Developer Toolkit ile uygulama geliştirmeyi örneklerle açıkladıktan sonra, bu kütüphaneye özgün araçların kullanımına da değineceğiz.

Örnek Uygulama

Blogumu takip edenler, bir önceki yazımda anlattığım ASP.NET Ajax ile RSS Okuyucu uygulamasını hatırlayabilirler. Şimdi örnek göstereceğimiz Facebook uygulamalarında da bu projemizi kullanacağız. Çalışma biçimini hatırlatmak amacıyla bu uygulamayı bir daha gözden geçirmek gerekirse, hazırladığımız bir RssOku() metodu, bir tablo içerisindeki “Label” nesnesinin text özelliğini değiştirip, bu işlemi Page_Load olayı ve Timer nesnesinin Tick olayında uygulayıp, RSS kaynağını anlık takip edebiliyorduk.

Daha önce Facebook uygulamalarının canvas veya profil sayfalarında çalışabileceğinden bahsetmiştik. Şimdi çalışma biçimleri farklı olan bu iki sayfa yapısıyla ilgili örneklerimize bakalım.

Canvas Uygulaması

Bu sayfa tipinde IFRAME ve FBML kullanma şansımızın olduğunu hatırlamakta fayda var. Her ne kadar FBML kısa sürede modüler uygulamalar hazırlamamıza izin versede, IFRAME ile alışık olduğumuz şekilde web sayfası geliştirme özgürlüğümüz var. Bu nedenle örneğimizde IFRAME kullanıyoruz. Öncelikle web sayfamızın kod dosyasını açarak, sayfanın kaynağını varsayılan asp.net “Page” sınıfı yerine, “CanvasIFrameBasePage” isimli toolkit üst sınıfından türetilmesini sağlamalıyız. Bundan sonra yapmamız gereken, Page_Load olayı içerisine kayıt işleminde aldığımız API KEY ve SECRET anahtarlarını üst sınıfımızın Api ve Secret özelliklerine atamak, ve üst sınıfımızın Page_Load olayını çağırmak.

Artık sayfanız facebook iletişim kurabilecek hale geldi. Yalnız login olmadan yapılan çağrılarda sorun yaşamamak için, bundan sonra kullanacağınız metodların geri yükleme esnasında çalışmamasını sağlamalısınız.  Bunuda devam eden kodları bir if(!IsPostBack) ifadesi içerisine yazarak sağlayabilirsiniz. Unutulmaması gereken nokta, Ajax ile verilerin anlık güncellenmesini sağlamak için, sayfamıza eklediğimiz bir Timer objesi olmalı ve bu objenin Tick olayında da RssOku() methodunu tekrar kullanmalıyız. Bir canvas uygulanması için gereken işlermleri aşağıdaki sayfa kodlarından inceleyebilirsiniz:

Canvas Uygulaması Kodları

//Canvas sayfalarda miras alınan sınıfı aşağıdaki gibi değiştirdik.</em>

public partial class _Default: CanvasIFrameBasePage

{

//Sayfamız yüklendiğinde çalışacak olan olay

protected void Page_Load(object sender, EventArgs e)

{

/* Üst sınıfımızın özelliklerini kayıt işleminde aldığınız anahtarlar ile tanımlayıp, kendi Page_Load olayını çağırıyoruz. */

base.Api = "APIKEY"

base</em><em>.Secret = </em><em>"SECRETKEY"

base</em><em>.Page_Load(sender, e);

/* Sayfaların postback olmadığını kontrol ettikten sonra kodlamaya başlayabiliriz. */

if (!IsPostBack)

{

/* Rss okuyucu projemizde, sayfamızdaki bir label objesinin text değerini RssOku metodumuzdan dönen string ifadeye bağlıyorduk. Bu işlemi şimdi burada yapıyoruz. */

Label2.Text = RssOku();

}

}

IFRAME sayesinde geçen ayki uygulamamızı aynen çalıştırabiliyoruz.

Profil uygulaması

Profilimizdeki kutularda yer alacak uygulamamızda gerçekleştirdiğimiz işlemleri FBML dilinin kullanıldığı bir arayüzde göstermeliyiz. Ayrıca bu arayüzü, geniş ve dar profil kutularına göre ayrı ayrı tasarlamamız gerekmekte. Bilmeniz gereken iki önemli FBML etiketi var; dar alandaki arayüz için <fb:narrow> ve geniş alan için <fb:wide> kullanacağız. Toolkit ile gelen “Facebook Service” nesnesi sayesinde, uygulamamız için gereken öğelere erişebilir, ve arayüzde göstermek istediklerimizi bu etiketler arasına  HTML olarak da yazabiliriz.

Geliştirmeye başlamaya hazırsanız, hemen yeni bir “Web Site” projesi oluşturun ve referanslarını ekleyin. Bu sefer kullanacağımız sayfaların türetildiği üst sınıfları değiştirmemize de gerek yok. Yapmamız gerekenler, bir Facebook Service nesnesi yaratmak, bu nesnenin özelliklerine kayıt esnasında aldığımız API KEY, SECRET anahtarlarını, session_key, auth_token ve userId gibi profil sayfalarından alınan bilgileri örneğimizdeki gibi atamak. Servisimizi hazırladıktan sonra, canvas uygulamasında olduğu gibi, postback kontrolü yapmalı, ve sayfamazla ilgili kodları yazmaya başlamalıyız. En sonunda arayüzde gösterilecek öğeleri bu servisin “setFBML” metodunu kullanıp uygun bir şekilde profil sayfalarına aktarabiliriz. Örneğimizde bir tablo kullanıp bunun içerisine uygulama sayfasındaki Label nesnesinin text değerini vererek, okunan rss kaynağı içerisindeki bilgilerin görünmesini sağlayacağız. Profil uygulamasının kodları bu şekilde geliştiriyoruz:

Profil Uygulaması Kodları

//Facebook Servisi nesnesi yaratıyoruz.

Facebook.Components.FacebookService _fbService = new Facebook.Components.FacebookService();

protected void  Page_Load( object  sender,  EventArgs e)

{

//yarattığımız nesneye gerekli anahtarları verelim.

_fbService.ApplicationKey = "---buraya sizin app keyiniz gelecek---";

_fbService.Secret = "---buraya sizin secret keyiniz gelecek---";

//Nesnemize uygulamamızın bir masaüstü uygulaması olmadığını hatırlatmamız gerek.

_fbService.IsDesktopApplication = false;

//Web uygulamalarında kimlik işlemleri için bazı verileri tarayıcıdan çekmeliyiz.

string sessionKey = Session["facebook_session_key"] as String;

string userId = Session["facebook_userId"] as String;

string authToken = Request.QueryString["auth_token"];

//Aşağıda bazı kimlik kontrolleri yapıyoruz, session süresi dolmuşsa kullanıcıyı login ekranına yönlendiriyoruz.

if(!String.IsNullOrEmpty(sessionKey))

{

_fbService.SessionKey = sessionKey;

_fbService.UserId = userId;

}

else if (! String.IsNullOrEmpty(authToken))

{

_fbService.CreateSession(authToken);

Session["facebook_session_key"] = _fbService.SessionKey;

Session["facebook_userId"] = _fbService.UserId;

Session["facebook_session_expires"] = _fbService.SessionExpires;

}

else

{

Response.Redirect(@"http://www.facebook.com/login.php?api_key=" + _fbService.ApplicationKey + @"&v=1.0");

}

//Sayfamızın postback kontrolünü yaptıktan sonra gereken kodları yazabiliriz.

if (!IsPostBack)

{

//Rss kaynağından verileri çekiyoruz.

Label2.Text = RssOku();

//işte burada geniş ve dar profil kutuları için arayüz FBML kodunu yazmamız gerekiyor.

_fbService.SetFBML("<fb:wide><table width=\"300\" border=\"0\"><tr><td>Forumlarımızdaki son başlıklar:</td></tr><tr><td>" + Label2.Text + "</td></tr><tr><td><img src=\"http://www.csoftlab.com/C-Organizer%20awards/pcm_logo.gif\" /> </td></tr></table></fb:wide><fb:narrow>" + Label2.Text + "</fb:narrow>", "","");

}

}

PC Magazine Forumları heryerde!

Developer Toolkit Araçları

Facebook Developer Toolkit aynı zamanda kendine özgün araçlarla birlikte geliyor. Dizayn sayfanıza sürükleyerek kullanabileceğiniz bu araçları eklemek için, Default.aspx dizayn sayfanızdayken “Toolbox” üzerinde sağ tuşla tıklayıp, “Choose Items -> Browse” üzerinden Facebook.WebControls.Dll kütüphanesini burayada eklemek. Şimdi PhotoAlbum, FriendList ve UserInfo isimli üç yeni araca sahibiz. Bu araçları dizayn sayfamıza sürükledikten sonra, nesnelerin gerekli özelliklerini Facebook Service nesnesindeki özelliklere bağlayarak kullanabiliriz.

Toolkit Araçları Kullanımı:

/* FriendList nesnesi öğelerini Facebook Service nesnesinden çekiyoruz. Eğer PhotoAlbum kullanırsanız GetPhotos() ve UserInfo için GetUserInfo() metodlarını kullanabilirsiniz.*/

FriendList1.Friends = _fbService.GetFriends();

Developer Toolkit içindeki web araçları.

Bilmekte Fayda Var

• Ortaya çıkarsa sizi çok uğraştıracak ilginç bir bug mevcut. Kayıt esnasında eğer Callback URL, Site Nav URL gibi belirli sayfa adresleri verdiğiniz alanlarda büyük harf kullanırsanız (ör: http://siteniz.com/Default.aspx), Facebook nedeni belirsiz bir “Sayfa Bulunamadı” hatasıyla sizi karşılıyor. Harfleri küçültünce sorun düzeliyor.
• Sayfanızda IFRAME kullanıyorsanız, IE 6 ile birlikte gelen bir güvenlik tedbiri nedeniyle session içinde tutulan bilgiler bu tarayıcılarda silinebilir ve uygulamanız hata verebilir. Bunun önüne geçmek için sayfanıza aşağıdaki kodu eklemeniz yeterli:

• Uygulamanızın kayıt bilgilerinde yaptığınız değişikliklerin gerçekleşmesi biraz zaman alabiliyor, bu yüzden sabırlı olmalısınız.

IE 6 Kullananlara:

protected override void OnPreRender(EventArgs e)

{

Response.AppendHeader("P3P", "CP=\"CAO PSA OUR\"");

base.OnPreRender(e);

}

Dünyaya Açılın!

Visual Studio’nun geliştirme ortamı bizlere, hazır sınıf kütüphaneleri kullanarak çok kısa sürede uygulamalarımızı geliştirmemize imkan tanıyor. Bilgisayarımızda hazırladığımız uygulama istediğimiz seviyeye ulaştığında, artık onu bir sunucuya gönderebiliriz. Uygulamanın yayına geçebilmesi için “Developer” uygulaması üzerinden kayıt bilgilerine erişip, buradaki adresleri güncellemeliyiz. Gönderme işleminden sonra Facebook yöneticileri onaylarsa, uygulama galerisinde sizin projenizde gözükecektir.

Büyük yazılım fimalarının ve yatırımcılarının ilgisi devam ettikçe, Facebook uygulamalarının popülerliğini yitireceğinden endişe etmenize gerek yok. Ayrıca yakın zamanda  web tabanlı işletim sistemi geliştiren bir firmayı bünyesine katan, bunun yanında uygulamaları MySpace gibi yüksek kullanıcı kitlesine sahip diğer sitelerde de çalışabilen bir platform, uğraşlarınızı dünyaya tanıtmak konusunda eminim size yardımcı olacaktır.

Örnek canvas uygulaması indir: Canvas Uygulaması

Örnek profil uygulaması indir: Profil Uygulaması

p.s. Bu yazı Mart 2008 tarihli PC Magazine dergisi makalemden derlenmiştir. Geçen zamanda Facebook uygulama yapısına bazı eklentiler yapıldı ve yazıda kullandığım bazı araçların da yeni versiyonları çıktı. Kendi uygulamanızı hazırlarken bunlara dikkat ederseniz sevinirim :)

Bu sefer Web 2.0 ile birlikte artık her yerde karşımıza çıkan RSS veri akışlarını okumaya yarayan bir web uygulaması hazırlayacağız. RSS okuyucular temel olarak, internetteki bir veri kaynağının ürettiği XML formatındaki yayın akışlarını çekip, bunları kendi arayüzünde kullanıcıya aktarırlar. Günümüzde birçok haber sitesi, sözlük, forum ve blog gibi kullanıcıların içeriği oluşturduğu sayfalar yayın akışlarını RSS kullanarak XML formatında izlenebilmesine imkan sağlıyorlar. Web portalları, Facebook ve MSN gibi yoğun olarak kullandığımız sitelerde de RSS okuyucuları yardımıyla, diğer sitelerde güncellenen konuları özet olarak görebiliyoruz.

Uygulamaya geçmeden önce AJAX kullanmamızın nedenlerinden bahsedelim. Aslında ASP.NET ile geliştirilen bir RSS okuyucusu da işimizi görebilirdi.  Fakat bu yayın akışlarının bilgileri sürekli güncellendiği için (ör. Bir haber sitesinin güncel haberlerinin özet akışları.) sayfamızdaki uygulamanın sürekli yenilenmesi gerekmekte. AJAX öncesi sistemleri hatırlarsak, uygulamamızda bir yenilenme söz konusu olduğunda sayfamızda önce bir tık sesi, ardından beyaz bir ekran ve bütün sayfanın tekrardan oluştuğu, kullanıcıların dikkatini dağıtan bir yenilenme (postback) işlemi gerçekleşmekteydi. Biz bu işlemleri AJAX içerisinde bir zamanlayıcı (timer) kullanarak otomatik olarak gerçekleştireceğiz, ve kullanıcı sayfada gezerken yayın akışlarındaki güncellemeleri bir masaüstü uygulamasındaki gibi dinamik olarak görebilecek. Son olarak güncel bir Visual Studio sürümü kurulu bilgisayarınıza AJAX yeteneklerini kazandırabilmeniz için http://ajax.asp.net adresinden Microsoft’un “AJAX Extensions” eklenti paketini indirip kurmanız gerektiğini belirtelim. Mevcut “AJAX Extensions 3.5” sürümü VS 2005 ve VS 2008 üzerinde çalışabilmekte.

Kurulum işlemlerini bitirip uygulamaya başlamaya hazırsanız biraz RSS kaynaklarının formatından bahsedelim. Daha önceden yayın akışlarının XML formatında veriler ilettiğini söylemiştik. Bu veriler temel olarak sayfadaki yayınların başlığını, konuyla ilgili resimleri ve konunun ilişkili linkini, yayımlanma tarihini ve kısa bir özetini içerebilirler. Özetleri aldığımız kaynaktaki xml dokümanda bu içerikler bazı standart etiketler (tag) ile (bkz. Rss etiketleri tablosu) sabittir ve RSS okuyucuları bu etiketleri kullanarak içeriği yorumlar. Hazırlayacağımız bu RSS okuyucuyu sayfanıza ekleyerek, kullanıcılarınız sayfanızla ilgili içeriğe sahip sitelerdeki gelişmelerden anında haberdar edebilir, veya sayfanızda oluşturduğunuz içeriği bu uygulama ile başka sitelerde yayınlayabilirsiniz.

Sık kullanılan rss etiketleri ve hiyerarşisi bu şekilde.

SAYFA TASARIMI

Uygulamamızı bir tablo içerisinde, daha önceden verilen bir RSS kaynağını okuyarak otomatik olarak içeriğini güncelleyebilecek şekilde planladık. Böyle bir uygulamanın ihtiyacı olan her şey .NET Framework ve AJAX Extensions içerisinde mevcut olduğundan, ayrıca Visual Studio ile gereken modülleri fareyle sayfamıza sürükleyerek kullanabildiğimizden çok yorulmayacağımızı şimdiden söylemeliyim. İlk olarak yapmamız gereken, Visual Studio ile yeni bir “Web Site Project” oluşturmak, ve eğer VS 2005 sürümünü kullanıyorsak seçenekler içerisinden “Ajax Enabled Web Site” seçeneğini seçtiğimizden emin olmak. Karşımıza default.aspx sayfasının dizayn ekranı gelince, uygulamada kullanacağımız modülleri sayfamıza taşımaya başlayabiliriz. Eğer VS 2008 versiyonunu kullanıyorsak, Tools içindeki Ajax Extensions modüllerinden ScriptManager’i sayfamıza eklememiz gerekiyor.  Yine Ajax Extensions içerisinden UpdatePanel, ve içine bir adet Timer objesini sayfaya eklerseniz, tasarım aşamasına geçebilirsiniz. RSS okuyucusu tasarımının en önemli tarafı, eklediğiniz öğeleri UpdatePanel içerisine taşıdığınızdan emin olmalısınız. Ben bir tane Table (2×1 formatında) ve iki adet Label ekleyerek sade bir tasarım yaptım, siz kendi sitenize uygun bir biçimde burayı çeşitlendirebilirsiniz. Bileşenlerin yer aldığı formun kodlarını aşağıda görebilirsiniz.

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<div>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Interval="60000">

</asp:Timer>

<asp:Table ID="Table1" runat="server" BorderColor="Navy" BorderStyle="Dashed" BorderWidth="3px" CellPadding="0" CellSpacing="0"  ForeColor="White">

<asp:TableRow runat="server" BackColor="SlateGray" Font-Names="verdana" Font-Size="10pt" Width="400px">

<asp:TableCell runat="server" Width="300px">

<asp:Label ID="Label1" runat="server" Font-Bold="True" Text="PC Magazin Forumlarında Son 10 başlık"></asp:Label></asp:TableCell>

</asp:TableRow>

<asp:TableRow runat="server" BackColor="WhiteSmoke" Font-Names="verdana" Font-Size="10pt"

ForeColor="Black" BorderWidth="0px" HorizontalAlign="Left" VerticalAlign="Top" Width="400px">

<asp:TableCell runat="server" BackColor="WhiteSmoke">

<asp:Label ID="Label2" runat="server"></asp:Label></div>

</asp:TableCell>

</asp:TableRow>

</asp:Table>

</ContentTemplate>

</asp:UpdatePanel>

</div>

RSS okuyucumuz PC Magazine forumlarını yakından takip ediyor..

RSS OKUYUCU HAZIRLAMAK

Yayın akışı kaynağının verileri XML olarak gönderdiğinden bahsetmiştik. Bu nedenle okuyucumuz aslında RSS standart etiketlerini kullanan bir XML okuyucudan ibaret. Okunan verileri bir StringBuilder ile birleştirerek, dizaynımızda eklediğimiz Label’ın text özelliğine eşitlememiz gerekiyor. Programlamaya başlamadan önce System.Xml, ve System.Text bileşenlerini sınıfımıza eklemeliyiz. Yine dizayn esnasında eklediğimiz Timer’ın zaman aralığını default 60000ms değerinde bırakırsanız, okuyucu 60 saniyede bir asenkron olarak içindeki verileri güncelleyecektir.  Örnek amaçlı hazırladığımız uygulamada, dergimizin forumlarındaki son 10 konu başlığını ve özetini görüntülensin istiyoruz. Ayrıca konu başlığına tıklayınca ilgili sayfaya gitmesi için sayfanın linkini de eklemeliyiz. Bu durumda RSS 2.0 etiketlerinden başlık (title), link ve açıklama (description)  etiketlerini kullanmamız yeterli olacaktır. Bütün xml okuma işlemlerini toplayacağımız string tipinde değişken döndüren bir metod ile gereken bilgileri tablomuzun içindeki Label objesine iletebiliriz. Framework içerisindeki XmlTextReader sınıfından bir objeye PC Magazine Forumlarının RSS kaynağının adresini verip, kaynaktan dönmesini beklediğimiz xml sayfası içerisinde istediğimiz etiketleri arayacağız. Bu etiketlere sahip elemanları (varsa eğer) bir string değişkeninde kaydedip sonucu döndüreceğiz. Dikkat edilmesi gereken nokta, istediğimiz etiketlere sahip elemanların, okuyucuya verdiğimiz xml kaynağı içerisinde olmaması; hatta verdiğimiz kaynak adresinin zaman içerisinde yanıt vermemesi veya ulaşılamaması durumunda sayfamızın yorumlanamayacağı ve hata vereceğidir. Böyle bir durumda olası hataların önüne geçebilmek için, xml okuma işlemini bir try-catch bloğu içerisinde yapmamız doğru olacaktır. Veri kaynağına bağlanmaya ve verileri okumaya yarayan satırları bir try-catch bloğu içinde yazarsak, bu işlemlerde herhangi bir hatayla karşılaşırsak bile bunu “Yeni bir başlık okunamadı?” gibi bir hata mesajıyla kullanıcılara çaktırmamak mümkün J.  Yayın akışını okumaya yarayan RssOku metodumuzun içeriği aşağıda görülebilir.

private string RssOku()

{

//Okunacak RSS kaynağının adresi (ör: dergimizin forumları).

string url =http://www.pcmag.com.tr/forum/index.php?type=rss;action=.xml";

//Kullandığımız XML etiketleri için değişkenler.

string baslik = null;

string link = null;

string aciklama = null;

//Kaç tane özet göstereceğimizi tutan değişken.

int ozetSayisi = 10;

//RSS kaynağını okuyacak xml reader nesnesi.

XmlTextReader okuyucu = null;

//Okunan bilgileri String Builder ile birleştireceğiz.

StringBuilder okunan = new StringBuilder();

okunan.Append("<ul>");//("<ul>");

//Kaynağa ulaşırken veya okuma esnasında oluşabilecek hatalara karşı,

//işlemlerimizi try-catch bloğu içerisinde yapıyoruz.

try

{

//Kaynak adresini okuyucu'ya verince hazırız.

okuyucu = new XmlTextReader(url);

okuyucu.MoveToContent();

//Kaynaktan okumaya başlıyoruz.

while (okuyucu.Read())

{

//Döküman içinde bir akış bulursak, bilgilerini toplamaya başlıyoruz.

if (okuyucu.Name == "item" && okuyucu.NodeType == XmlNodeType.Element)

{

//İstediğimiz sayıda başlık okuduysak devam etmeye gerek yok.

if (ozetSayisi-- == 0)

break;

//Eğer istediğimiz kadar okuyamadıysak devam edelim.

okunan.Append(" » ");

}

//Akışın başlık bilgisini ekle.

if (okuyucu.Name == "title")

baslik = okuyucu.ReadString();

//Akışın linkini ekle.

if (okuyucu.Name == "link")

link = okuyucu.ReadString();

//Akışın açıklamasını ekle.

if (okuyucu.Name == "description")

aciklama = okuyucu.ReadString();

//Akış bitiyorsa bütün bilgileri string değişkenine kaydet.

if (okuyucu.Name == "item" && okuyucu.NodeType == XmlNodeType.EndElement)

{

//bütün bilgiler değişkene html biçiminde eklenecek.

okunan.Append("<a href='");

okunan.Append(link);

okunan.Append("' target=\"_blank\">");

okunan.Append(baslik);

okunan.Append("</a>");

okunan.Append("<br />");

okunan.Append(aciklama);

okunan.Append("<br />");

}

}

}

//Eğer okuma sırasında bir hata olursa buradaki mesaj döndürülecek.

catch (Exception e)

{

return "Yeni bir başlık yok.";

}

//Sunucumuzu yormamak adına Xml okuyucumuzu kapatmalıyız.

okuyucu.Close();

//Yayın akışlarından kaydedilen bilgileri döndür.

return okunan.ToString();

}

Gereken araçları toolbardan eklediğimizde sayfanın görünümü

SON DÜZENLEMELER

Yayın akışlarını okuyup string tipinde bir değişken döndüren metodumuz hazır olduğuna göre işin büyük bir bölümünü bitirdik sayılır. Şimdi bu metodu sayfamıza entegre etmek kalıyor. ASP.NET ile ilgilenenler veya önceki sayılarımızı takip edenlerin yakından tanıdığı ünlü Page_Load olayını (event) kullanarak tablomuzdaki Label objesinin text değerine (Bizim dizaynımızda objenin ismi “Label2”.)  RssOku() metodumuzun sonucunu atayarak, sayfamız açıldığında uygulamamızın yüklenmesini sağlamış olacağız:

protected void Page_Load(object sender, EventArgs e)

{

Label2.Text = RssOku();

}

Tebrikler, artık çalışan bir RSS okuyucumuz var. Fakat en başta amacımız, sadece sayfa açıldığında açılan bir okuyucu değildi. Uygulamamızı arka planda sessizce içeriğini güncelleyecek bir şekilde dizayn etmiştik. Bu aşamada önceden UpdatePanel içerisine yerleştirdiğimiz Timer devreye giriyor. Hatırlarsanız, bu Timer default 60 saniyelik bir aralığa sahipti. O zaman dizayn ekranındaki Timer kontrolünün üzerine çift tıklayıp, Visual Studio’nun Timer1_Tick  olayını yaratmasına yardımcı olalım ve Page_Load olayında yaptığımız işlemin aynısı burada tekrarlayalım ki her Tick olayında RSS okuyucumuzun içeriği otomatik olarak güncellensin:

protected void Timer1_Tick(object sender, EventArgs e)

{

Label2.Text = RssOku();

}

Şimdi amacımıza gerçekten ulaştık, uygulamamız kendini asenkron bir biçimde yenileyebilecek. Artık birçok web 2.0 sayfasındaki içeriği web sayfanızda canlı bir şekilde yayınlayabilir, sayfanızı ziyaret edenlerin bilgiye daha kolay ulaşmalarına yardımcı olabilirsiniz. Konu RSS olunca, bu uygulamayla birçok kaynağı takip etme olanağı bulabilir, anlık veri değişimleri gerçekleşen (borsa verileri gibi) içerikleri web sayfanıza entegre edebilirsiniz. Kullandığınız kaynak destekliyorsa, farklı RSS etiketleri kullanarak (Resim, yorum, oy, vb.) yeni bileşenlerini de bu uygulamaya ekleyebilir, RSS okuyucunuzu daha interaktif hale getirebilirsiniz. Böyle bir durumda yapmanız gereken tek şey, RssOku metoduna yeni bir değişken atamak ve xml veriyi okurken bu değişkenin rss etiketini kayda almak olacak (ör. resim eklemek için “image” etiketini kullanmak).

Tekrar hatırlatmak gerekir ki, böyle bir uygulamayı “AJAX Extensions” kütüphanesini kullanmadan, javascript kodlarıyla yapmaya kalksak açıklamasını bu sayfalara sığdırmamız mümkün olmayacaktı. Visual Studio’nun imkanları, birçok şeyi arka planda otomatik gerçekleştirdiği için bu yeni teknolojiyi kısa zamanda ve en az kod satırıyla kullanmamıza olanak sağladı.

Örnek Uygulamanın Kodları: AJAXEnabledWebSite2

Örnek uygulama: http://www.yigitkiran.net/rssReader/

p.s.: Bu makale subat 2008 tarihli PC Magazine dergisinde yayınlanan makalemi kesip biçerek derlediğim ocak 2008 tarihli bir yazıdır ki kullanılan IDE ve kütüphaneler güncel değildir.