Perşembe, Aralık 27, 2007

Microsoft Popfly

Bu makalemizde sizlere çok farklı, farklı olduğu kadar eğlenceli, eğlenceli olduğu kadar da kolay olan, Silverlight için uygulamalar geliştirebildiğimiz bir uygulamaya değineceğiz.İnceleyeceğimiz bu uygulama Microsoft Popfly ’dır.

Popfly ’ın diğer Silverlight geliştiricilerine oranla farklı olduğundan bahsetmiştik.Bu farklılığın ilk sebebi ise herhangi bir editörü bilgisayarımıza kurmak zorunda olmamamızdır. Çünkü Popfly web üzerinde çalışan, Silverlight ve XAML tabanlı bir web sitesidir aslında.Burada bize sunulan belirli miktardaki alanları kullanarak kendimize istediğimiz türde web siteleri ve mashup bir çok yapı hazırlamamıza olanak tanımaktadır.

İlk olarak incelememiz gereken bu Popfly ’ı nasıl kullanacağımız olacaktır.En başta bilgisayarımızda Silverlight ’ın kesinlikle kurulmu olması gerekmektedir.Eğer kurulu değilse www.microsoft.com/silverlight adresinden kurabilmemiz mümkündür.Silverlight ’ı kurduktan sonra ikinci yapacağımız işlem ise bir Live Hotmail hesabımızın olması gerekmektedir. Eğer hotmail hesabı olmayan bir kullanıcı iseniz Hotmail’in resmi web sitesinden live mail hesabını elde edebilirsiniz.
Not: Aktif olarak kullanmış olduğunuz hotmail, msn, office uzantılı bir mail adresiniz var ise bunları sorunsuz bir şekilde Popfly’ da kullanabilmeniz mümkündür.
Artık bir mail adresimiz olduğuna göre Popfly ’ın resmi sitesine giriş yapabiliriz.Bu işlemi gerçekleştirmek için kullanacağımız link www.popfly.ms olacaktır.Bu adrese girdiğimiz zaman karşımıza aşağıdaki gibi bir ekran çıkacaktır.



Bu ekranda gözümüze ilk çarpan özellik Alpha yazısıdır.Eğer ilk gördüğünüzde benim gibi düşündüyseniz henüz beta bile olmayan bir sistemi kullanıyor olacağız ve o sistemin Alpha testerlığını da yapmış olacağız. Popfly ’ın içerisine girdiğimiz zaman ilk dikkatimizi çeken bir yazı olmuştur ve bu yazıda "kullanabilmek için davetiye isteyiniz" yazmaktadır. Bu linke tıkladıktan sonra mail adresimize gelen bir mail olacaktır. Bu mailde toplu davetiye dağıtımı zamanında "sizin de istediğiniz karşılanacaktır." şeklinde Popfly takımından gelen yazı ile karşılaşmaktayız.Bunun sebebi ise Popfly’ ın henüz alpha sürümünde olması ve her kullanıcıya verilmekte olan 25MB ’lık alan ve kullanıcı sayısıdır.Ayrıca hangi program olursa olsun bir uygulamanın alpha sürümüne çok fazla kullanıcı alınmaması gerekmektedir.Çünkü final beta sürümleri yaklaştıkça görülecektir ki inceleyeceğimiz bu özellikler sanki yürümeye başlayacak olan bir bebeğin ilk adımları gibi kalacaktır.

Davetiyemizin gelmesini beklerken biraz daha araştırma yapalım. Popfly acaba Firefox’ ta ve Internet Explorer’ ın eski sürümlerinde çalışması mümkün müdür sorusunun cevabını arayalım.Evet Popfly, Firefox 2.0 ve Internet Explorer 6.0 da çalışabilmekle birlikte daha üst versiyonlarında da çalışabilmektedir. Apple firması tarafından geliştirilmekte olan Safari internet tarayıcısı Popfly’ ı diğer tarayıcılar gibi sorunsuz çalıştıramamaktadır.Fakat Safari ile çalışmak istiyorsanız MAC işletim sistemleri üzerinde sorunsuz çalışabilmeniz mümkündür.Yapmanız gereken tek şey Silverlight’ ın MAC bilgisayarlar için olan versiyonunu sisteminize kurmak olacaktır.Linux için ise Silverlight desteği olmadığı için maalesef animasyon gerektiren işlemleri görütülemeyi başaramıyoruz.Ama bu sorunun çözümlenmesi için MoonLight kod adı verilen proje geliştirilmektir.Bu proje yardımıyla Silverlight ile hazırladığımız uygulamalar başarılı bir biçimde çalıştırılmış olacaktır.Fakat bunun olabilmesi için MoonLight projesinin bitirilmesi gerekmektedir.Lafı fazla uzatmadan davetiyelerimizin geldiğini varsayarak Popfly’ a tekrar giriş yapıyoruz.Karşımıza bu sefer ilk davetiye istediğimiz ekranın yerine gerçek Popfly uygulamaları geliştirebileceğimiz bir karşılama ekranı gelmiştir.


Popfly karşılama ekranı...

Karşılama ekranında dikkatimizi çeken bir ekran var. Popfly kullanıcıları alanı: Burada da Popfly’ a kayıtlı olan kullanıcıları görebilmekteyiz.


Kullanıcı alanı(Popfly Space)

Kullanıcılarıda artık gördük şimdi ise bize popfly ekranında sunulmakta olan menülerin ne işe yaradıklarını inceleyelim:

Join the Community : Aktif kullanıcılara erişlebileceğimiz bir bölgedir.

Find Users : Popfly sistemine kayıtlı olan kullanıcıları arayabileceğimiz, ayrıca aradığınız kullanıcıların geliştirdikleri uygulamaları görebileceğiniz bir bölümdür.Örneğin:Turhal Temizer diye arattığınızda benim profilime ulaşabilirsiniz.

The Popfly Team : Bu bölümde Popfly geliştiriciler takımı tarafından değinilen bilgilere, popfly konusundaki yeniliklere ulaşabileceğiniz bir bölümdür.

Help : Popfly konusunda bilmek istediğimiz bütün bilgilere ulaşabilmemizi sağlayan bölümdür.

See It : Paylaşılan bütün projeleri görebileceğimiz bölümdür.

Hot Mashups : Kullanıcılar tarafından en çok puan almış olan uygulamaların bulanabildiği bölümdür.

My Account : Puanlamalar sonucunda üç yıldız ve daha fazla yıldız almış olan projelerimizin yer aldığı bölümdür.

My Popfly Page : Kendi kişisel alanınızın bulunduğu bölümdür.Sizinle ilgili bilgiler yer alır.

My Profile : Profilimize avatar, üst resim ve benzeri daha bir çok özellik ekleyebileceğimiz bölümdür.

My RSS Feed : Henüz Popfly alpha ile aktif olmasada RSS Feeds (beslemelerimizi) görüntülememize olanak sağlayacak bir bölüm olacaktır.

My Developer Keys : Bu bölümde herhangi bir uygulama geliştirmek için ne yapmamız gerektiğini bulabileceğimiz bir bölümdür.

Invite a Friend : Bu bölüm aracılığı ile Popfly’ a arkadaşlarımızı davet edebilmemiz mümkündür fakat alpha sürümünden sonraki sürümlerde aktifleşmesi beklenmektedir.

Karşımıza çıkan yan menüleri temel olarak tanımış olduk. Şimdi de üst menüyü daha yakından tanıyabilmemiz için ekran görüntüsüne göz atalım.



Bu bizim uygulamalar geliştirebileceğimiz, yapılmış olan projeleri inceleyebileceğimiz ve bu işlemlerin dışında daha bir çok işlem yapabileceğimiz bu arayüzdür.Bu arayüzdeki menüleri incelemek gerekirse.

İlk olarak inceleyeceğimiz menü "Create Stuff" olacaktır.



Bu menü altında yer alan seçenekler yardımıyla proje geliştirebilmemiz mümkündür.İlk olarak geliştirebileceğimiz uygulama Mashup ’tır.Fakat en baştan beri Mashup diyoruz.Peki bu mashup nedir.Genel hatları ile açıklamak gerekirse.
Kullanıcıların Popfly kütüphanesini kullanarak gadget benzeri sürüklenebilir Microsft Surface ’in yapısını andıran yapıdır.Kullanabileceğimiz mashup ’lar block denilen bölümlerde oluşturulmaktadırlar.

Mashupları genel olarak tanıdık.Şimdi ise mashupları yapmamıza yarayan Block ’a değinmek gerekirse;

Block, HTML, .net dilleri, XAML ve javaScript yardımı ile proje mashup geliştirmemize yarayan popfly özelliğidir.Eğer harhangi bir editör kullanamadan tamamen web üzerinde yararlanmak istersek .net dilleri yerine kullanmamıza izin verilen javaScript ve XAML olacaktır.Ayrıca javaScript kullanırken intelliSense (Kod tamamlama &Bilgilendirme) yardımı her zaman kullanamamız için hazır olarak bekleyecektir.Ayrıca Block oluştururken eskiden oluşturulmuş olan Blocklardan da yararlanabilinme imkanı tanınmıştır.Bu sayede çok beğendiğim bir özelliği daha geliştirerek çok başarılı bir çözüme dönüştürmüş oluruz.Bu başarıyı sağlayabilmemizde ki en büyük özellik ise başkaları tarafından hazırlanmış olan javaScript ve XAML’ leri görebilme olanağı tanımasıdır.En kısacası açık kodlu olması bizim yapacağımızın uygulamaların güzelliğini sağlamaktadır.


Mashup oluşturma, düzenleme ve görüntüleme ekranı

Popfly alanımız (Popfly Space), bize tanınan alanın büyüklüğünden daha önce bahsetmiştim.Şimdi ise daha ayrıntılı olarak bize neler yapabilme olanağı tanıdığına değineceğiz.

Sağladığı imkanların başında geliştirdiğimiz uygulamarı web üzerinde paylaşabilmemiz için 25MB web alanı.Burada oluşturduğumuz projeler windows sideBar olarak, windows live eklentisi olarak kullanılabilmektedir.Eğer bize sunulanların dışında eklentiler geliştirmek istiyorsak ise Popfly plug-in’ ini indirmemiz gerekmektedir.Daha sonra bu özelliği kullanabilmemiz için gerekli olan Visual Studio Express ailesinden ya Visual Basic.net Express 2008 ya da C# Express edition’ unun yüklü olması gerekmektedir.Aksi taktirde geliştirme yapmamız mümkün değildir.

Menümüzde kalan son seçenek ise WebPage ’dir.Bize web sayfası yaratmamız için izin verilen özellikler ilk olarak oluşturduğumuz Block’ ların birleşimi ile oluşturmul olduğumuz Mashup’ ları ekleyebiliyoruz.Bu sayede olulşturduğumuz Mashup’ ların web sayfasında nasıl görüldüğünüde test etmiş oluyoruz.Sağladığı diğer bir olanak ise HTML ekleyebilmemiz.Bilgimiz dahilinde olan HTML kodları ve Mashuplar ile gerçekten çok güzel web sitesi oluşturabilmemiz mümkündür.Daha ek özellikler için Tutorial (Temel dersler) ve videolar yardımı ile hem öğrenebilir hemde başarılı bir biçimde istediklerinizi yapabilirsiniz.

Web sayfası hazırlarken Office 2007 ile aramıza katılmış olan Ribbonlar (papyonlar) karşımıza çıkmaktadır.Bu tasarımın en önemli özelliği neyin nerede olduğunu sadece yazılar ile değil resimleri ile de gördüğünüz için çok çabuk ve pratik bir biçimde istediklerimizi yapma olanağı tanımaktadır.

Bu ribbonlar bizim işlemlerimizi kolaylaştıran hazır işlemleri sıralayalım şimdide,yazının tipi, yazının boyutu, yazının fontu, yazının stili, paragraf seçenekleri, resimler, mashup’ lar, tablolar, linkler, gelişmiş metin yapıları, sayfanın stili için editör, temalar, stiller, diyagramlar, renkler ve sayfa özellikleri ribbon denilen yapının üzerinde yer almaktadır.





Bu bölüm ile Create Stuff menüsünü tamamlamış oluyoruz.Genel olarak diğer menülerin ne işe yaradıklarına değinmek çok daha doğru olacaktır.Çünkü gerçek anlamda yapacağımız bütün işlemlerin hepsini Create Stuff menüsünün altında tamamlıyoruz.

Şimdi inceleyeceğimiz menü My Stuff olacaktır.



My Stuff seçeneği bizim kendi profilimize çok rahat şekilde ulaşamak için hazırlanmış bir izlenim vermektedir.Bu menü altındaki seçenekler yardımı ile yaptığımız projelere, mesajlarımıza, geliştirdiğimiz önemli noktalara, profilimizin düzenlemek için olan gerekli bölüme ve arkadaş davet etmemize yarayan bölümlere bu menü altında ulaşabilmekteyiz.

Diğer menüler bu ikisi kadar işlevliği olmadığı için değinmiyorum.Ama karmaşık gelen noktalar olduğu taktirde eğitim vidyolarından yararlanarak çok rahatlıkla sorunlarınızı giderebilirsiniz.

Son olarak değineceğimiz nokta Block hazırlarken kullanabileceğimiz fonksiyonlar olacaktır.Bu fonksiyonların kullanılış amaçlarına göre ayrıştırılmış olarak sizlere sunamacağım.Bu sayede gelecekte kullanmak istediğinizde ben bir resim görüntülemek istiyorum acaba bu elli küsür fonksiyondan hangisidir demek yerine 6 fonksiyon arasından hangisini seçeceğinizi düşünmek hem size zaman kazandıracak hemde yaptığınız işten zevk almanızı sağlayacaktır.Bu foksiyonları aşağıdaki tabloda inceleyebilirsiniz.

// BLaugh Block
getRandomComics()
getComic()

// Block Inspector Block
getOperations ()
getAllowedValues()

// Calculator Block
getRandomWholeNumber()
getRandomNumber()
getMaximum()
getMinimum()
round()
add()
subtract()
multiply()
divide()

// Carousel Block
addImage()
setFrameColor()
setAttribution()

// Combine Block
combineTwoLists()
combineThreeLists()

// Conversation Block
addMessage()

// Digg Block
GetStories()
GetPopularStories()
GetUpcomingStories()
GetStoriesByContainer()
GetPopularStoriesByContainer()
GetUpcomingStoriesByContainer()
GetStoriesByTopic()
GetPopularStoriesByTopic()
GetUpcomingStoriesByTopic()
GetStoryByStoryId()
GetStoriesByUser()
GetTopics()
GetTopicByName()
GetUsers()
GetUser()
GetUserFriends()
GetUserFans()

// Digital Podcast Block
Search()

// Facebook Block
getFriends()
getUserInfo()
getPhotosOfMe()
getPhotos()
getPhotoAlbums()
getGroups()

// Filter Block
filter()
truncate()

// flickr Block
getGeotaggedPhotos()
getPhotos()
getTags()
getUserPhotos()
getPhotoset()

// Gauge Block
setValue()
increaseValue()

// GameTrailers Block
getFeeds()
getTrailers()

// GeoNames Block
getLatitudeAndLongitude()
lookupOnPlaceName()
lookupOnLatitudeLongitude()
lookupOnZipCode()
lookupOnCityState()

// Image Scaper Block
getImages()
getUniqueImages()

// Image Comment Block
comment()

// Indeed Jobs Block
search()

// Live Spaces Block
getPhotos()
getFriends()
getLists()

// MSN Horoscopes
getMonthlyHoroscope()
getWeeklyHoroscope()
getDailyHoroscope()

// MSN News Feeds
TopBoxOffice()
JimJubekMoneyCentralColumn()
LizPulliamMoneyCentralColumn()
InCarNation()
TopCelebrities()
TopMovieRentals()
InTheaters()
ComingSoon()
TopStories()

// My Live Contacts Block
getContacts()

// News Reader Block
addNewsItem()

// Page Turner Block
addNewsItem()

// PhotoFlip Block
addImage()

// PhotoSphere Block
addImage()

// PhotoStack Block
addImage()

//PhotoTiles Block
addImage()

//RegExp Block
getMatches()
isMatch()
isWholeNumber()

// RSS Block
getItems()
getFeed()

// SeattlePublicLibrary Block
getBooks()

// Slideshow Block
addImage()

// Snipshot Block
editImage()

// SoapBox Block
search()
getFeaturedVideos()

// Sort Block
sort()

// Stock Quotes
getStockGraph()
getQuote()

// Text Helper Block
getSubstring()
append()
skipFirstCharacters()
split()

// Timer Block
tick()

// Trynt Block
calculateLoveFactor()

// Twitter Block
getLatestPosts()
getFriendsPosts()

// Upcoming Block
findEvents()

// User Input Block
getText()
getTwoTextValues()
getThreeTextValues()
getChoiceFromDropdown()
getTwoChoicesFromDropdowns()
getThreeChoicesFromDropdowns()
getTextAndChoice()

// Video Player Block
findEvents()

// Virtual Earth Block
addPushpin()
setMapView()
drawLine()
deleteAllPushpins()

// Whack-A-Mole Block
addImage()

// Yahoo! Answers Block
getAnswers()

// Yahoo! Images Block
search()

// Yahoo! News Block
search()

// Yahoo! Term Extraction Block
getTerm()

// Yahoo! Traffic Block
getTrafficForAddress()
getTrafficForZipCode()
getTrafficForCoordinates()

// Yahoo! Video Block
search()

// XBox Live Block
getGamerCard()
getLastPlayedGames()
getPlayerPresence()</PRE>


Yukarıdaki fonksiyonların Türkçe açıklamaları ile vermememin sebebi Popfly için henüz Türkçe dil paketi oluşturulmamış olması ve Blockları incelerken kafanızın karışmaması için Popfly’ da kullanıldığı biçimdeki isimleri ile size bunları sundum.

Bu fonksiyonları tekrar blocklarda kullanmanın dışında Microsoft tarafından yayınlanan blockların özellikleridir.Bu fonksiyonları arttırabilme olanağımızda vardır.Bunuda .net dillleri yardımı ile Express Editonlardan birisine ekleyecek olduğumuz Popfly plugin’ i ile mümkündür.

Microsoft ’un zengin web olarak bilinen Silverlight’ ı kullanıcılara daha çok sevdirebilmesi sunduğu gayet eğlenceli bir sistemi incelemiş olduk.Genel olarak Popfly ile gelen bütün özelliklere değinmeye çalıştık.Değindiğimiz bu özelliklerin sonunda ise oluşturulmuş olarak Block’ lardaki fonksiyonları inceleyerek yazımızı sonlandırmış oluyoruz.

Popfly’ ın eğlenceli noktalarından biriside logosunun küçük küçük ördek yavrularından oluşmasıdır.Bu ördek yavruları bir topluluk içinde bulunmaktadır ve hepsi sarı renktedir.Fakat sadece bir tanesi kırmızıdır.İşte o kırmızı renkli ördek yavrusu sizsiniz.Bu kırmızı renkli ördek sizin profilinizi temsil etmektedir.Benim bu logodan yorumum artık sıradanlaşmış olan web siteleri arasında Silverlight ile güçlendirilmiş olan web sitenizin bu kırmızı ördek gibi sıyrılmasıdır.

Diğer Popfly makalemizde Mashupların kullanımını inceleyerek kendimize ait olan bir Block oluşturacağız daha sonra ise bunu bir web sitesinde kullanıma açacağız.

Umarım sizde hayatta bu kırmızı ördek yavrusu gibi sıyrılarak kendinizi rahatça anlatabilirsiniz.

Popfly’ ı denemeniz temennisiyle.

İyi çalışmalar...

Turhal TEMİZER


Kaynaklar
MSDN Magazine

Microsoft Popfly - 2

Bu makalemizde ise popfly'ı kullanarak ilk olarak basit projeler geliştireceğiz. Daha sonra ise bir RSSFeed'i ne kadar kolay yapabileceğimizi göreceğiz.

Popfly, Silverlight'ı kullanan bir teknoloji olduğunu ve silverlight'ında javaScript ve XAML tabanlı olduğunu daha önceki makalelerimizde öğrenmiştik. Popfly ile herhangi bir uygulama geliştirirken de yapmamız gereken aynı Silverlight'ta olduğu gibi javaScript ve XAML yardımları ile kod yazmamız gerekecektir.

Eğer ki siz ben kod yazmak istemiyorum derseniz. Daha önce hazırlanmış olan projeleri Mashup denen proje yöntemi ile de kullanabilirsiniz. Biz de işlemlerimizi ilk olarak Mashuplar yardımı ile yapacağız. Daha sonrada kendimizin nasıl bir mashup oluşturacağımıza değineceğiz.

Bu işlemleri yaparken ilk yapmamız gereken www.popfly.ms adresinden kullanıcı girişi yapmak olacaktır.Daha sonra karşımıza çıkan ekrandan CreateStuff yazan menüden Mashup'ı seçerek işlemimize başlıyoruz.



Bu menü altında yapabileceklerimiz genel anlamda eskiden hazırlanmış ve bizlerin kullanımı için paylaşılmış olan projeleri birbirine bağlayarak kullanabilmemizi sağlamaktadır. Fakat bu işlemi yaparken de bize Silverlight'ın hızlılığını kullanacağız. Bunun dışında uygulamaları geliştirirken göreceksiniz ki yapılan birçok grafiksel işlem üç boyutlu gibi gözükmektedir. Bu yapı, gelecekte hayatımızda yer alacak olan Web3.0 yapısına çok benzemektedir.

Mashup oluşturma işlemini sol tarafta block adı verilen, daha önceden hazırlanmış olan projeler ile yapabilmemiz mümkündür.



Bu projeler topluluğunu yalnız başlarına kullanabildiğimiz gibi bir kaç tanesini birleştir erekte güzel uygulamalar gerçekleştirebilmemiz mümkündür. Yalnızca tek bir Block ile projemizi yapmak istersek, tek yapmamız gereken menüde yer alan projelerden birinin üzerine tıklamamız yeterli olacaktır. Bu seçim sonrasında seçilen proje ekranda kendisini kullanmamız için hazır tutmaktadır.



Örneğin bizim seçtiğimiz block, bize çevresinde dönen resimler sunmaktadır. Fakat yalnız başına kullanıldığı zaman sadece tek resim göstermesine karşı, biraz öncede bahsettiğimiz gibi başka bir block ile birleştirildiğinde istediğimiz sayıda ve istediğimiz resmi gösterebilmesi mümkündür. Bu işlemi yapabilmemiz için menüden Images&Video seçeneğinden isteğimizi seçebilmemiz mümkündür. Bu resimleri alacağımız block'u da seçtikten sonra özelliklerinden nasıl bir resim göstereceğini seçmemiz ve onu resimleri gösterecek olan block'a bağlamamız yetecektir.



Yukarıda mavi ok ile gösterilmiş olan bağlantı sistemi kullanmış olduğumuz Mashupları birbirleri ile ilişkilendirilmesi ile projenin çalışmasını sağlayabilmekteyiz. Peki, bu bağlantıyı birden fazla ile yapabilir miyiz? Eğer benzer görünüm gerçekleştirmeyecek ise rahatlıkla buna izin vermektedir. Örnek vermek gerekirse; hedefimiz resim resim görüntülemek olsun ve bu görüntülemek istediğimiz resimleri internetteki verilerden çekmek istiyoruz. Bu resimlerimiz internette Flickr ve Yahoo Images’ te olduğunu varsayalım. İşte bu iki farklı resim sağlama sisteminden çekmek istediğimizi verileri özellikler kısmından belirledikten sonra tek sistemi bağlamış olduğumuz gibi iki sistemi de bağlayabilmemiz mümkündür ve bu uygulama sorunsuz bir biçimde çalışabilmektedir.

Şimdi ise başka bir sistem daha deneyelim. Örneğin görüntülerimizi hem döner bir yapı ile hem de sayfalarını çevirebildiğimiz resim görüntüleyici ile görmek istiyoruz. Fakat dikkat etmemiz gereken bir nokta var ki o da bu iki sistemin aynı anda çalıştırmak istiyoruz. İşte bu sistemi çalıştırmak değil koymak istediğimizde bile “iki veya daha fazla benzer özelliği kullanıcıya sunacak olan Mashup kullanamazsınız” şeklinde bir mesaj ile karşılaşıyoruz. Bu aldığımız mesaj bize Popfly da bizim benzer uygulamaları aynı anda ekleyemeyeceğimizi öğretmiş oluyor.

Popfly ile ilgili bu kadar ayrıntılı bilgiden sonra artık oluşturduğumuz uygulamanın nasıl bir ekran görüntüsüne kavuştuğuna bakabiliriz.



Karşımıza çıkan görüntüye hayran kalmamak gerçekten elde değil. Hiç kod yazmadan sadece iki özellik ekleyerek harika bir görüntüye sahip olduk.

Bu yapabileceklerimiz peki sadece görüntüsel işlemler değil tabii ki de, medya uygulamalarından haber servislerine kadar, haritada istediğimiz bir yeri görüntülemekten istediğimiz bir gazetenin haberlerini okumaya kadar ve bunların dışında daha birçok özellik yer almaktadır.

İşlemlerimizi yaparken kafamıza şöyle bir soru takıldı. Acaba biz bu uygulamalardan(Mashup) yapabilir miyiz? İnsanlar bizim yaptığımız bu uygulamaları bizim onlarındakileri kullandığımız gibi kullanabilirler mi? Şeklinde birçok soru takılabiliyor. Bu soruların ve benzer türdeki daha birçok sorunun cevabı EVET.

Bizlerde istediğimiz şekilde bir uygulama geliştirip, o uygulamayı kullanıcılara çalışmaları için sunabilmekteyiz. Bu işlemleri yaparken nasıl bir işlem topluluğu incelememiz gerektiğine değineceğiz.

Bu işlem topluğunda yapmamız gereken tabii ki kod yazmak olacaktır. Her ne kadar işlemlerimizi sürükle bırak işlemleri ile yapsak da uzman bir uygulama geliştirmemiz gerektiğinde kod yazmamız gerekmektedir. Bu gerçeği asla unutmamız gerektedir.

Ayrıntılı bilgilerden sonra kod yazacağımız yeri öğrenmekle başlayalım. CreateStuff menüsünde yer alan Block seçeneği yardımı ile projemizi geliştirmeye başlayabiliriz.



Uygulamamızı geliştirirken karşımıza iki menü çıkmaktadır. Bunlar yukarıdaki resimden de görebileceğiniz gibi Block Description(Block Tanımı) ve Block Code(Block Kodu)’dur. Şimdi bu üst menüde yer alan iki özelliğin ne işe yaradığını basitçe açıklamaya çalışalım.

Block Description(Block Tanımı):Bu bölümde daha sonra görsel olarak kullanılacak olan projemizin görünümünü, ekran ne gibi yazıların olacağını belirtiyoruz. Yaptığımız bu işlemleri için ise XAML kodlaması kullanıyoruz.

Block Code(Block Kodu):Bu bölümde ise oluşturmuş olduğumuz projenin işlevselliğini ayarlayabilmemiz mümkündür. İşlevsellikleri sağlarken kullanacağımız kodlama dili ise JavaScript olacaktır.

JavaScript’in web uygulamaları için ne kadar önemli olduğunu bir kez daha görmüş oluyoruz. Web uygulamalarını deyim yerinde ise hayat veren bir dildir javascript. Yapmak istediğimiz birçok kontrolü bu güzel dil ile yapabilmemiz mümkündür ki bunları sadece 50 komutu olan bir yapı ile gerçekleştirmek gerçekten çok hoş bir durumdur. JavaScript, hayatımızda daha birçok yerde karşımıza çıkacak gibi gözüküyor. Bu yüzdendir ki bu yapı olarak küçük içerik olarak büyük olan dili öğrenmekte bir zarar olmayacağını düşünüyoruz.

Kısa bilgilerimizden sonra yukarıda belirttiğimiz özellikler yardımı ile ufak bir RSSFeed(Yayın alıcı) uygulaması yapmaya çalışalım.

JavaScript’e bu kadar fazla övgü yaptıktan sonra isterseniz uygulamamızı geliştirmeye bu bölüm ile başlayalım.

Uygulamamızı geliştirirken de tamamen oluşmuş olan kodu verip üzerinde ne işlem yaptığımızı açıklamak daha anlaşılır olacaktır.

<?xml version="1.0" encoding="utf-8" ?>
<block class="RSSCsharpNedirClass">
<operations>
<operation name="getItems" callMode="auto">
<description>
Retrieves items from the specified RSS feed.
</description>
<inputs>
<input name="url" required="true" type="feedUrl">
<description>The URL of the RSS feed</description>
<defaultValue>http://www.csharpnedir.com/rss.xml</defaultValue>
<constraints/>
</input>
</inputs>
<outputs>
<output isArray="true" type="custom" object="RSSItem"/>
</outputs>
</operation>
<operation name="getFeed" callMode="auto">
<description>
Retrieves information about the specified RSS feed.
</description>
<inputs>
<input name="url" required="true" type="feedUrl">
<description>The URL of the RSS feed</description>
<defaultValue>http://www.csharpnedir.com/rss.xml</defaultValue>
<constraints/>
</input>
</inputs>
<outputs>
<output isArray="false" type="custom" object="RSSFeed"/>
</outputs>
</operation>
</operations>
<objects>
<object name="RSSItem">
<field name="title" type="title" isArray="false"/>
<field name="link" type="url" isArray="false"/>
<field name="description" type="description" isArray="false"/>
<field name="source" type="string" isArray="false"/>
<field name="sourceLink" type="url" isArray="false"/>
<field name="author" type="name" isArray="false"/>
<field name="tags" type="string" isArray="false"/>
<field name="comments" type="string" isArray="false"/>
<field name="commentRss" type="string" isArray="false"/>
<field name="publishedDate" type="date" isArray="false"/>
<field name="mediaLink" type="url" isArray="false"/>
<field name="mediaType" type="string" isArray="false"/>
</object>
<object name="RSSFeed">
<field name="title" type="title" isArray="false"/>
<field name="url" type="feedUrl" isArray="false"/>
<field name="link" type="url" isArray="false"/>
<field name="description" type="description" isArray="false"/>
<field name="imageURL" type="imageUrl" isArray="false"/>
</object>
</objects>
</block>

Kodlarımızı yukarıdan aşağıya doğru anlaşılır biçimde açıklayalım. En yukarıda gördüğümüz XML ‘in ekranda göstereceği dili belirtmektedir. Türkçe dil sorununu çözebilmek için ise encoding="utf–8" yazılması gerekmektedir. Teorik olarak bu yaptığımız tanımlama Türkçe karakterleri uygulamamızda sağlaması gerekmektedir. Fakat Popfly’da karşımıza çıkan görünüm maalesef böyle olmuyor. Popfly’ın beta sürümünde bulunmasından ötürü daha tam olarak bütün dillere desteği eklenmediği için Türkçe karakterleri gösteremiyoruz. Göstermediği halde neden kullandığımıza gelirsek, daha sonraki sürümlerinde Popfly’ın Türkçe karakterlere de destek vereceğini düşündüğümüz için ekliyoruz.

<block class="RSSCsharpNedirClass"> bölümünde ise oluşturduğumuz JavaScript dosyasını kullanmamızı sağlamaktadır.

<operations> bölümünde uygulamamızı kullanıcılara sunduğumuz zaman seçenekler menüsünde nelerin yer alacağını belirtebiliyoruz.

<defaultValue> bölümünde ise kullanacak olduğumuz adresi ekliyoruz.

Temel olarak kafamızı karıştıracak olan bölümler bunlardı. Diğer satırlarda ise JavaScript tarafında oluşturmuş olduğumuz değişkenleri kullanmak ve kullanıcıya sunmak gibi özelliklerden yararlanılmaktadır.

XAML kısmında oluşturduğumuz kodlara göz attıktan sonra şimdi de JavaScript kısmında yer alan kodlarımıza biraz değinelim.

function RSSCsharpNedirClass()
{
}

RSSCsharpNedirClass.prototype.getFeed = function (url) {
this.__checkValidation(url);
var returnResponse = environment.getXml(url);
return this.__formatResponseDataRSSFeed(url, returnResponse);
};

RSSCsharpNedirClass.prototype.getItems = function (url){
this.__checkValidation(url);
var returnResponse = environment.getXml(url);
return this.__formatResponseDataRSSItem(returnResponse);
};

RSSCsharpNedirClass.prototype.__checkValidation = function (url) {
var url = this.__trimParamValue(url);

if(url.length == 0) { throw "Please enter the URL of an RSS" }
};

RSSCsharpNedirClass.prototype.__trimParamValue = function (paramValue){

if(!paramValue)
{
return paramValue;
}
else if (!isNaN(paramValue))
{
return paramValue;
}

return paramValue.trim();
};

RSSCsharpNedirClass.prototype.__formatResponseDataRSSItem = function (resultXML){
var resultArray = new Array();
if(resultXML.getElementsByTagName("channel").length >= 1)
{
var errorCheck = resultXML.getElementsByTagName("channel")[0].getElementsByTagName("description")[0].text;
errorLength = errorCheck.indexOf('Error');

if(!resultXML)
{
throw "Sorry, the RSS block encountered a problem which it could not solve.";
}
if(errorLength != -1)
{
try
{
throw resultXML.getElementsByTagName("channel")[0].getElementsByTagName("description")[0].text;
}
catch(ex)
{
throw "Sorry, the RSS block encountered a problem which it could not solve.";
}
}
else
{
var itemNodeList = resultXML.getElementsByTagName('item');
var resultNodeCount = itemNodeList.length;
var resultArray = new Array(resultNodeCount);

if(!resultNodeCount resultNodeCount < 1)
{
throw "Sorry, it seems that the RSS feed does not contain any items.";
}

for(var i = 0; i < resultNodeCount; i++)
{
var itemNode = itemNodeList[i];
if(itemNode)
{
var title = itemNode.getElementsByTagName("title").length >= 1 ? itemNode.getElementsByTagName("title")[0].text : "";
var source = itemNode.getElementsByTagName("source").length>= 1 ? itemNode.getElementsByTagName("source")[0].text : "";
var sourceLink = itemNode.getElementsByTagName("source").length>= 1 ? itemNode.getElementsByTagName("source")[0].getAttribute("url") : "";
var link = itemNode.getElementsByTagName("link").length >= 1 ? itemNode.getElementsByTagName("link")[0].text : "";
var description = itemNode.getElementsByTagName("description").length >= 1 ? itemNode.getElementsByTagName("description")[0].text : "";
var author = itemNode.getElementsByTagName("author").length >= 1 ? itemNode.getElementsByTagName("author")[0].text : "";
var tags = itemNode.getElementsByTagName("tags").length >= 1 ? itemNode.getElementsByTagName("tags")[0].text : "";
var comments = itemNode.getElementsByTagName("comments").length >= 1 ? itemNode.getElementsByTagName("comments")[0].text : "";

var commentRss = itemNode.getElementsByTagName("wfw:commentRss");
if (commentRss.length == 0)
{ // IE:
commentRss = itemNode.getElementsByTagName("commentRss");
}
if (commentRss && commentRss.length > 0)
{
commentRss = commentRss[0].text;
}
var pubDate = itemNode.getElementsByTagName("pubDate").length >= 1 ? itemNode.getElementsByTagName("pubDate")[0].text : "";
var mediaLink = itemNode.getElementsByTagName("enclosure").length>= 1 ? itemNode.getElementsByTagName("enclosure")[0].getAttribute("url") : "";
var mediaType = itemNode.getElementsByTagName("enclosure").length>= 1 ? itemNode.getElementsByTagName("enclosure")[0].getAttribute("type") : "";

resultArray[i] = new RSSItem(title, link, description, source, sourceLink, author, tags, comments, commentRss, pubDate, mediaLink, mediaType);
}
}
return resultArray;
}
}
else
{
return resultArray;
}
};

RSSCsharpNedirClass.prototype.__formatResponseDataRSSFeed = function (url, resultXML){
if(resultXML.getElementsByTagName("channel").length >= 1)
{
var errorCheck = resultXML.getElementsByTagName("channel")[0].getElementsByTagName("description")[0].text;
errorLength = errorCheck.indexOf('Error');
if(errorLength != -1)
{
throw resultXML.selectSingleNode("/rss/channel/item/description").text;
}
else
{
var channelNode = resultXML.getElementsByTagName("channel")[0];
var title = channelNode.getElementsByTagName("title")[0].text;
var link = channelNode.getElementsByTagName("link")[0].text;
var description = channelNode.getElementsByTagName("description")[0].text;

}
else
{
return new RSSFeed("", "", "", "", "");
}
};

function RSSFeed(title, url, link, description, imageURL)
{
this.title = title;
this.url= url;
this.link = link;
this.description = description;
this.imageURL = imageURL;

this.toString = function() {
return "<a href='" + environment.escapeQuotes( this.url ) + "' target='_blank'>" + this.title + "</a><br>";
};
}

function RSSItem(title, link, description, source, sourceLink, author, tags, comments, commentRss, pubDate, mediaLink, mediaType)
{
this.title = title;
this.link = link;
this.description = description;
this.source= source;
this.sourceLink= sourceLink;
this.author = author;
this.tags= tags;
this.comments = comments;
this.commentRss = commentRss;
this.publishedDate = pubDate;
this.mediaLink = mediaLink;
this.mediaType = mediaType;
}

RSSItem.prototype.toString = function() {

var html = "";

html += "<strong>" + this.title + "</strong>";
html += "<br /><font style='font-size: xx-small'>"+ this.publishedDate +"</font>" + "\n";
html += "<p>"+ this.description +"</p><hr/>";

return html;
};


JavaScript kısmında dikkat etmemiz gereken tek bölge var itemNode = itemNodeList[i]; ile belirtmiş olduğumuz dizidir. Bu dizide yayınlanan haberlerin başlıkları, özetleri ve kim tarafından yazıldığı gibi bilgiler tutulmaktadır. Bu dizide tuttuğumuz verileri biraz öncede bahsettiğimizi gibi XAML’de tekrardan kullanarak görselliği sağlamaktayız. JavaScript kısmında yer alan diğer kod parçacıkları standartlaşmış olan kod bloklarıdır.

Şimdi inceleyeceğimiz kısım ise benim en çok hoşuma giden görsel kısmıdır. Tabi bu görsel kısma geçmeden önce yaptığımız bu uygulamayı kaydedip başka kullanıcılarında görebilmesi için paylaşıma açmalıyız. Bu ufak işlemi de gerçekleştirdikten sonra tekrar daha önceden yaptığımız gibi CreateStuff menüsünden Mashup seçeneğini tıklayarak uygulamamızı incelemeye başlıyoruz.

Uygulamamızı geliştirmeye başlayabiliriz. Daha önceden hazırlanmış olan projeleri kullanmak için kullanmış olduğumuz Block menüsünün bu sefer arama bölümünü kullanarak kendi oluşturmuş olduğumuz block yapısını aratacağız. Bizim makalemizde oluşturmuş olduğumuz block’ın adı CsharpNedir olduğu için bu adla arama yapıyoruz. Sizlerde hangi isimle oluşturmuş iseniz o isimle aratarak projenizi çalışma ekranına ekleyebilirsiniz. Bu uygulamayı eklemeden önce üzerinde faremizi tuttuğumuz zaman karşımıza çıkan bir bilgilendirme alanı çıkıyor. Bu bölümde ise yapılmış olan Block'ın kimin tarafından yapıldığı ve ne için yapıldığı yazılmaktadır. Bu bahsetmiş olduğumuz bilgilendirme alanına bir göz atalım.



Biraz öncede bahsettiğimiz gibi kimin tarafında yapıldığı gibi bilgiler yer almaktadır.

Bu uygulamanın üzerine tıklayarak çalışma ekranın üzerine alınmasını sağlıyoruz. Bu sefer çalışma ekranının üzerinde iken özellikler kısmına göz atalım.



Bu bölümde uygulamamızın ismi, kullanmış olduğu link gibi özellikleri yer almaktadır.Bu özellkleri XAML kodlarını yazdığımız kısımda arttırabilmemiz veya da Türkçeleştirebilmemiz mümkündür. Fakat benim tavsiyem başka ülkelerden kullanıcılarında kullanabilmesi için İngilizce olarak uygulamalarınızı hazırlamanızdır.

Şimdi göz gezdireceğimiz ekran ise oluşturmuş olduğumuz uygulamanın detaylarının daha da ayrıntılı bir biçimde gösterilmesidir.



Tekrardan uygulamanın adını kimin tarafından yapıldığını ne zaman kullanıma açıldığı gibi bilgiler yer almaktadır. İçerik hakkında yer alan bölümde ise bizim projemizi kullanıma açarken yazmış olduğumuz bilgiler gözükmektedir. Bu yazıları istediğimiz şekilde şekillendirebilmemiz mümkündür.

Artık uygulamamız ile ilgili temel özelliklerine göz attığımıza göre çalıştığında nasıl göründüğüne bakabiliriz. Bunun için çalışma ekranımızın üst kısmında yer alan Preview seçeneğine tıklamamız yeterli olacaktır.



Uygulamamızın derlenmesi sonucunda oluşan görüntüye artık göz atabiliriz. Bakalım yapmış olduğumuz uygulamayı gerçek bir RSSFeed 'e benzetebilmişmiyiz.



Temel olarak Türkçe karakter sorununu katmazsak benzemişe benziyor. Bu kadar kolay bir biçimde RSSFeed hazırlamak çok güzel bir duygu oluyor.

Bir makalemizin daha sonuna gelmiş oluyoruz. Bu yazımızda Popfly ile hazır uygulamaları nasıl kullanacağımıza ve bizim oluşturmuş olduğumuz uygulamarı nasıl kullanıma açıp hazır uygulamalarmış gibi kullanabileceğimize değindik. Ayrıca bu uygulamada geliştirilmesi anlatılan CsharpNedir RSSFeed Block'unu da kullanabilmeniz mümkündür.

Umarım yararlı olmuştur. Bir sonraki makalemizde görüşünceye dek hepinize mutlu günler diliyorum.

Turhal TEMİZER

Cuma, Aralık 14, 2007

WPF - .NET Framework 3.5 ile Gelen Yenilikler

Visual Studio 2008 ‘i yakından takip edenler hatırlar ki 3 hafta(20 Kasım 2007) önce tam sürümü biz geliştiricilere sunulmuştu. Bu tam sürümün piyasaya sunulması ile birlikte birçok sorun düzeltilmişken Windows Vista kullanıcılarında bazı sorunlar ile karşılaştır. Fakat bu sorunlarda çözülemeyecek kadar vahim değildi. Bazıları .NET kütüphanelerine ulaşamıyorlardı, bazıları ise hiçbir kod yazmadan boş projeyi derleyemiyorlardı. Bu tür sorunların çözümleri tahmin edeceğiniz üzere oldukça kolaydı. Nerelerde çalışacaklarını belirtmemiz yeterliydi.

Bu gelişimlerin ötesinde birde çok güzel bir olay yaşandı. .NET3.0 ömrünü doldurmuş yerini .NET3.5 almıştır. Bu gelişimler olurken bizlerinde .NET3.0 bünyesinde yer alan yeni nesil dillerin ne tür değişiklikler yaşadığını merak etmeye başlamıştık. Bu meraklar ilk olarak eski özellikler kaybolup kaybolmadığı ile ilgiliydi. Fakat bunun yersiz bir merak olduğunu ve kaybolması yerine birçok ek özellikle geldiğini öğrenmiş olarak içimizi rahatlatıyorduk. Peki, .NET3.5 ‘te neler yeniydi. İlk olarak bu sorunun cevabını bulmamız gerekiyordu.

.Net3.0 ile aramıza katılmış olan WPF, WCF, WF ve CardSpace .NET3.5 bünyesinde yerlerini almışlardı. Peki daha yeni ne vardı. Hatırlayacağınız kadarıyla Visual Studio 2005 ’e .NET3.0 ile birlikte Linq to SQL, Ajax gibi eklentilerde kuruyorduk. Bu teknolojilerin hayatımızı oldukça kolaylaştırdığı söyleyebilirdik. Doğal olarak beklentimiz yeni çekirdekte bulunmasıydı. Çünkü bu yapılar .NET3.0 bünyesine dahil edilmemişlerdi. Microsoft’ta çalışan .NET geliştiricileri de bu durumu gözlerinden kaçırmayarak bu iki nadide yapının yanında Rest adı verilen bir yapıyı da .NET3.5 çekirdeğine de ekleyerek beklentileri karşılamış oluyordu.

Peki, bu kadar eklemeler olurken eskiden bünyede yer alan dillere ve eski sürüm Framework ’lere destek ne düzeydeydi. .NET2.0 tek bir eksiklik dışında tamamıyla .NET3.5’ eklenmiş. Fakat tek bir eksikten bahsetmiştik. VS ’in daha önceki sürümlerinde Java geliştiricilerini düşünerek tamamıyla pazarlama taktiği olarak kullanılan J# dili VS 2008 ’de maalesef yerini alamamış. Diğer diller ise (VB.net, C++.net ve C#.net) varlıklarını sürdürmektedirler. Tabii unutulmaması gereken bir nokta ASP.NET ’te 3.5 sürümü ile aramızda kalmaya devam etmektedir.

.NET3.5 yapısında yer alan dilleri ve kütüphaneleri gösteren bir resim ile yukarıda açıkladıklarımızı daha da akılda kalıcı kılabiliriz.

mak22_1

.NET3.5 çekirdeğinde hangi dillerin ve yapıların yer aldığına göz attıktan sonra, bu yazımızda değinmeyi amaçladığımız .NET3.5 WPF ’e ne tür yenilikler getirdi olacaktır.

Windows Presentation Foundation(WPF) aramıza 2005 yılının son çeyreğinde Avalon kod adı ile merhaba demişti. Kendisi ile birlikte gelen yenilikler ile adından çokça söz ettireceğe benziyordu. Öylede oldu. Peki, ilk çıktığı zamanlarda ne gibi yenilikler getiriyordu. İlk olarak geliştirme aşamasında bizlere XML ’den türemiş olan XAML(Zammel) ile merhaba diyordu. XAML yardımı ile artık standartlaştı dediğimizi Windows Formlar büyüleyici bir görünüme kavuşmuş oldular. Resim, animasyon gibi verilerimizi alternatif programlar(Expression Studio ailesi) yardımı ile XAML kodlarını alarak uygulamamıza ekleyebiliyorduk. Bunun bizlere kazancı tasarımcı – geliştirici uyumunu en üst düzeye çıkarmakla birlikte tamamen sayısal kodlar yardımı ile verilerimizi uygulamamıza eklediğimiz için hem uygulamanın boyutu hem de performansı en uygun denilebilecek seviyeye yaklaşmış oluyordu.

2006 yılının ortalarında ise .NET3.0 ile birlikte Avalon kod adı Windows Presentation Foundation ile gerçek ismine kavuşuyordu. Bu sefer getirdiği yenilikler, masaüstü uygulamalarında Browser tarzı uygulamalar sunarak web ile tam uyum içinde çalışan yazılımlar geliştirmemize olanak tanıyordu. Bunları yaparken de XAML ile birlikte C# ‘ın uyumlu çalışması geliştiricileri kendisine çekmeye başlıyordu.

2007 yılının son çeyreğinden ise Visual Studio 2008 ile .NET Framework 3.5 ‘in içerisinde yer alarak kendisini yenilemiş olarak aramıza daha da kuvvetli bir biçimde yer almış oluyordu. Kod yazımı biraz daha kolaylaştırılması gibi özellikleri, web servisleri ile karşılaşılan sorunların çözümü gibi yenilikler ile kendini daha kuvvetlendirmiş olarak geliştiricilere kendisini sunuyor.

Şimdi ayrıntılı bir biçimde WPF ’in .NET Framework 3.5 ile ne tür yeniliklere sahip olduğuna değineceğiz.

3.0 sürümü ile Uyumu

.NET3.0 ile hazırlanmış olan uygulamalar .NET3.5 ile çalıştırılmak istendiğinde yeni sürüme güncelleme yapılarak sorunsuz bir biçimde çalıştırılması sağlanmıştır.

.NET3.5 sürümü ile geliştirilmiş uygulamalar .NET3.0 ile geliştirilmek istendiğinde XAML ’de yeni nesil XML kütüphanesi yok ise sorunsuz bir biçimde çalışmaktadır.Bu yeni nesil XML kütüphanesi: http://schemas.microsoft.com/netfx/2007/xaml/presentation dır. Bu kütüphaneyi .NET3.0 sürümü ile çalıştırmak istiyorsak 2006 sürümünü seçmemiz gerekmektedir. Bu sürümü nasıl seçeceğimizin ekran görüntüsüne alttaki resimden ulaşabilirsiniz.

mak22_2

.NET3.0 sürümünden .NET3.5 sürümüne geçişte bir güncellemenin olduğunu belirtmiştik. Bu geliştirme esnasında uygulanan mimariyi aşağıda bilgilendirme için vereceğiz. Vermiş olduğumuz bu mimari .NET1.1 sürümünden bu yana kullanıldığından ötürü bu sürümün mimarisini verirsek mantıken herhangi bir sorun ile karşılaşmayız.

mak22_3

Yukarıda görmüş olduğunuz mimari farklı .NET sürümlerinde geliştirilmiş olan uygulamalarda güncelleme sırasında uygulanan mantıktır.

Uygulamalar Açısından Yenilikler

Uygulama modellerinde geliştirilmiş olan özellikler:

• XBAP ile geliştirilmiş geniş çaplı uygulamalarda görüntüsel olmayan(dll) öğeler eklenmek istendiğinde uygulama hata verip Visual Studio kendisini kapatıyordu. Bu sorun çözülmüş. Bu arada XAML ile geliştirilmiş Browser uygulamalarına XBAP denilmektedir.

XBAP uygulamaları Firefox ile sorunsuz bir biçimde çalışabilecek düzeye getirilmiş. Fakat Opera ve Safari internet tarayıcılarında hala sorunlar ortaya çıkmaktadır.

• XBAP uygulamaları internet tarayıcısında çalışırken artık arka planda cookie ‘lerin oluşmasına olanak tanınıyor. Yani uygulama diğer web siteleri gibi dosyalarını tarayıcının yedeklemesine izin veriyor. Bu gelen yenilik uygulamaların tarayıcılarda ilk defa açılmasından sonraki açılmalarından açılma süresi olarak gözle görülür bir hızlanma olmasına sebep olacaktır.

• XAML de kullanılmakta olan IntelliSense çok daha iyileştirilmiş(Visual Studio 2005 ’te .NET3.0 SP1 gelene kadar maalesef çok kötü çalışıyordu).

• Localization özelliğinde kullanılmakta üzere ekstra dil aileleri eklenmiş.

Visual ve NonVisual Yapıların WPF ’e Eklenmesi

.NET3.0 sürümünde uygulamalara fonksiyonellik katabilecek eklentiler yapabilmemize olanak tanınıyordu. Amaçlanan fonksiyonelliği .NET Framework ’ün izin verdiği ölçüde sağlayabilmekteydik. Örneğin bu fonksiyonelliği dinamik link kütüphanesi(dll) ile sağlayabiliyorduk. Fakat eğlence ile ilgili bir eklenti eklemek istediğimizde yalnızca Microsoft tarafından geliştirilmiş olan eğlence dosyalarını uygulamamıza ekleyebiliyorduk.

Tabii bu tür yukarıda bahsettiğimiz eklentiler dışında eklentiler yapabilmemiz için 3. Parti yazılımları kullanmamız gerekmekteydi. .NET3.5 ile birlikte Office dosyalarından Visual Studio eklentilerine ve Windows Media Player ’ı hiçbir sorunsuz bir biçimde ekleyebilmekteyiz.

Yukarıda belirttiğimiz eklentiler dışında UIElement ve FrameworkElement ile geliştirilmiş uygulamaları da sorunsuz bir biçimde kullanabilmemiz mümkündür. Örnek senaryolar ile kullanılabilirliği açıklamaya çalışalım:

• Messenger stili uygulamalar geliştirilebilmesi mümkündür. Arka planda oluşturulmuş olan web servisleri ile kendimiz tarafından geliştirilmiş bir 3. Parti yazılımımız olabilir.

• Oyun uygulamaları geliştirerek belirli bir host ile kullanıma sunabiliriz.

• İçerik tarayıcı oluşturabilmemiz mümkündür. Kendime ait bir PDF Reader imiz olabilir.

• Mashup tarzı uygulamalar geliştirebilmemiz mümkündür. Örnek olarak Windows Sidebar ’ları

ve bu senaryoların dışında tarayıcılar üzerinde çalışabilecek sınırsız sayıda XBAP uygulamaları geliştirebilmemiz mümkündür.

WPF ’te Add-In ile ilgili daha ayrıntılı bir yazımız yakın zamanda sitemizde yer alacaktır.

Firefox ile XBAP

WPF 3.5 ’da Firefox 2.0 da XBAP uygulamalarının çalışmasına olanak sağlamıştı. Şimdi WPF 3.0 ile Firefox kullanıcılarının başına gelen ve çözülmüş olan birkaç sorundan bahsedelim:

Varsayılan tarayıcısı Firefox 2.0 olan geliştiricilerde XBAP uygulamalarını derlemek neredeyse bir kabul durumuna gelmişti. Çünkü bu uygulamalar çalıştırılmak istendiğinde tarayıcıya fazladan yüklenerek kilitlenmesine sebep olmaktaydı. Bu geliştiricinin sisteminde Internet Explorer ’da yüklü değilse geliştirmiş olduğu XBAP uygulamalarını test edememekteydi.

Karşılaşılan bir diğer sorun ise alternatif yollarla XBAP uygulamasını Firefox ’ta çalıştırma başarısını gösteren geliştiricilerde Internet Explorer ’da sağlanan güvenliklerin hiç biri sağlanmıyor olmasıdır. Bu durum uygulama internet üzerinde çalışırken kötü düşünceli bilgisayar korsanları tarafından sistemimize girilmesi olacaktır.

Cookie

Tarayıcılarda XBAP uygulamaları derlendiği zaman arka planda oluşturulan oturum dosyalarını otomatik olarak siliyordu. WPF3.5 ile bu oluşturulan cookieler biz istemediğimiz sürece silinmez suruma geldi. Bu sayede XBAP, tarayıcılar tarafından web servis ve HTML gibi algılanmaktadır.

Visual Studio IntelliSense

Visual Studio ‘nun XAML editörüne eklenen yeni elementleri artık IntelliSense ’te yardımı ile erişebiliyoruz.

Localization

WPF3.5 ‘in bünyesine eklenmiş olan yeni dil aileleri aşağıdakilerdir.

Bengali
Devanagari
Gujarati
Gurmukhi
Kannada
Malayalam
Oriya
Tamil
Telugu

Grafik

WPF ’in grafik objeleri sayısal veri olarak tuttuğunu ve bu yöntem sayesinde oldukça hızlı olduğundan defalarca bahsetmiştik. Bu sayısal yöntem dışında internet üzerinden ya da yerel bilgisayarımızdan resimleri alabilmemiz mümkündür. İşte grafiksel olarak eklenen öğeler için 4 adet daha Bitmap metodu oluşturulmuş. Bu metotlara ve aldıklara parametrelere bir göz atalım.

BitmapImage.UriCachePolicy

BitmapDecoder.Create(Uri, BitmapCreateOptions, BitmapCacheOption, RequestCachePolicy)

BitmapFrame.Create(Uri, RequestCachePolicy)

BitmapFrame.Create(Uri, BitmapCreateOptions, BitmapCacheOption, RequestCachePolicy)

Bu metotlar yardımı ile istediğimiz görüntüleri daha farklı özelliklerle uygulamamızda kullanma olanağımız oluşmuştur.

3-D Grafik

Yeni nesneler ve sınıflar geliştirilmiş ve WPF3.5 bünyesine eklenmiştir. En göze batan özellik ise enteraktif uygulamaların boyutsal dönüşümlerde kullanılacak olan yeni bir sınıf oluşturulmuş olmasıdır.

Enteraktif 2-D ve 3-D Uygulamaları

Viewport2DVisual3D isimli yeni bir oluşturulmuştur. Bu sınıf sayesinde enteraktif olarak alınmış 2D görüntülerin içeriği 3D ‘ye dönüştürülebilmektedir.

Data Binding

Bu özellik ilgili birkaç iyileştirme yapılmıştır. Bunlar:

Yeni bir debug mekanizması oluşturuldu. Bu sayede binding yaptığımız kodları da kolayca debug yapabileceğiz.

Business Layer ’da oluşabilecek hatalara karşı IDataErrorInfo metot iyileştirilmiştir. Bu model yardımı ile kullandığımız özelliklerde karşılaşabileceğimiz hatalardan haberdar olmamız sağlanmıştır.

Data Binding modeli Linq ve Dlinq ile ilişkilendirilebilir oldu.

Yeni Debug Mekanizması

Data Binding işlemlerinde debug işlemlerinin yapılmasının kolaylaştırıldığı bilgisini vermiştik. Bu işlemin gerçekleşmesini PresentationTraceSources.TraceLevel özelliğinin debug yapısına eklenmesi ile sağlanmıştır.

Bu son özelliğimizi incelememiz ile WPF ’e .NET Framework 3.5 ile eklenmiş olan yeni özellikleri bitirmiş oluyoruz. Genel olarak eksiklerin tamamlanması ve hazırlanmış olan sınıfların iyileştirilmesine ağırlık verildiğini gözlemlemiş oluyoruz.

Daha sonraki WPF ile ilgili yazılarımızda WPF bünyesinden yer alan sınıfları, metotları, veri yapılarını ve özelliklerini incelemeye devam edeceğiz.

Bir sonraki yazımızda görüşünceye dek esenlikle kalın.

İyi çalışmalar…

Turhal TEMİZER

WPF Mimarisi ve XAML Genel Yapısı

WPF yapısını incelerken genellikle yeni yapılar ve örnekler üzerinde durmaya çalışmıştık. Bu inceleme yöntemimiz temel bilgileri edinme açısından oldukça iyi bir yöntemdir. Fakat WPF mimarisi konusunda yeterince bilgiye sahip olamamamız sonucunu çıkarıyor. C# ve diğer programlama dilleri ile profesyonel uygulamalar geliştirirken arka planda işleyen yapıyı, işlemci çekirdekleri ve Framework içerisinde işleyiş yapısını bilmemiz durumunda daha etkin ve performans açısından başarılı uygulamalar geliştirebiliriz.

Bu yapıyı WPF ile de yapabilmemiz için mimarisinde .NET Framework yapısında yer alan System sınıfından hangi özellikleri kullandığını bilmemiz gerekiyor. Bu özellikleri öğrendikten sonra ise incelememiz gereken başka bir özellik XAML olacaktır. Aslında XAML’ e özellik dememiz anlam kargaşasına sebep olacaktır. Asılında XAML, WPF için formları özelleştirmemize yarayan, uygulamalarımızı eşsiz kılmaya yarayan, çalışırken dâhil ettiği kütüphaneler ile kodlar yardımı ile uzun sürede yapacağımız işlemleri oldukça kısa sürelerde yapmamıza olanak tanıyor.

Bizim yazımızda işleyeceğimiz sıra ise ilk olarak WPF mimarisi daha sonrada XAML’ i tanımak olacaktır.

WPF MİMARİSİ

WPF mimarisini incelemeden önce ilk olarak inceleyeceğimiz sınıfları liste olarak vermek, System sınıfına ait olan alt sınıfların hangilerinin WPF’ i oluştururken etki ettiğini açıklarken bizlere çok daha yardımcı olacaktır.

• System.Object
• System.Threading.DispatcherObject
• System.Windows.DependencyObject
• System.Windows.Media.Visual
• System.Windows.UIElement
• System.Windows.FrameworkElement
• System.Windows.Controls.Control


İsimlerini sıralamış olduğumuz sınıfları incelemeye başlayalım.

System.Object

Object sınıfları nesne tabanlı programlarda sıkça kullanılan bir yapıdır. Öyle ki uygulamalarımızda sıklıkla kullanmış olduğumuz Componentleri hiyerarşik yapısı ile incelememiz gerekirse en üst katmanında Object sınıfının yer aldığı görülecektir. Bunun sebebi geliştirdiğimiz kütüphanelerde aslında geliştirilen bütün yapıların birer nesne olmasından kaynaklanmaktadır.

Nesnesel yapıyı biraz daha açıklamak gerekirse, belirli bir markada arabamız olduğunu varsayalım. Bu arabamızı hiyerarşik olarak incelememiz gerektiğinde bir üst katmanında bize spor veya klasik türde bir araba olup olmadığı sorulur. Bir üst katmana çıktığımızda ise bu artık bir araba değil araçtır ve bize sunulan seçeneklerde uçak, tren, araba gibi seçenekler bulunmaktadır. Bir katman daha üste çıkmamız gerekirse bu katmanda da motor gücü ile veya da insan gücü ile çalışanlar diye bir katman çıkacak. Bu katmanları daha üst taraflarına doğru çıkarmak mümkün fakat en üst katmana çıktığımızda bu bahsettiğimiz katmanların en tepesinde bir nesne katmanı olduğu ve bu katmanın en tepede olduğu görülür. Bizim fiziksel olarak kullandığımız bütün eşyaların aslında atası genel tanımıyla bir nesne(object)’ dır.

WPF de yer alan Object sınıfını da işte bu mantık ile incelememiz daha doğru olacaktır. Uygulamamızda yapacağımız bütün işlemleri bir nesnesel yapı olarak düşünürsek bunların en üst katmanında Object sınıfı yer alacaktır. Object sınıfından türetilmiş olan WPF’ de programcılar açısından tasarım tarafında hangi özelliklerin kullanılacağı uzun tartışmalar sonucunda bulunmuştur. Bu uzun süren araştırmaların sonucunda bizlere, CLR ‘nin güçlü yapısını kullanarak geliştirme yaparken güçlü bir yapı ile yapmak ( bellek yönetimi, hata yakalama, bilinen tipler, vb. ) olanağını tanımışlardır.

Yukarıda basitçe değindiğimiz güçlü programlama yapısını bir şema üzerinde açıklarsak daha da anlaşılır olacaktır. Şema üzerinden yer alan katmanlarda kırmızı ile yer alanlar ( PresentationFramework, PresentationCore ve Milcore) için ayrılmıştır. Bu katmanlarda yer alan Milcore = Yönetilemeyen Bileşen olarak bilinmektedir. Bu durumu WPF’ de ortadan kaldırmak için ise DirectX bileşenleri ile birlikte kullanılarak bu bileşenlerinde kullanılmasına olanak tanınmıştır. Milcore yapısının bu kadar fazla kullanılmaya çalışmasının sebebi ise performans olarak diğer bileşenlere oranla katlarca iyi performans vermesidir.

Şimdi yukarıda belirttiğimiz şemayı görelim.

mak21_1

Yukarıda görmüş olduğumuz şemada hangi katmanlar sonucunda WPF uygulamasının oluştuğunu nesne(object) olarak görebiliyoruz. Ayrıca bu yapı yalnızca WPF’ de değil diğer programlama dillerinde de bilinmesi gereken yararlı bir diyagramdır. Fakat diğer dillerde kullanılan sınıfların isimlerinin farklı olması gayet doğal bir durumdur.

Yukarıdaki mimariyi WPF ile uygulama geliştirirken asla unutmamız gerekmektedir…

System.Threading.DispatcherObject

WPF mimarisinde yer alan nesneler arasında en kritik görevi bulanan nesne(object) diyebiliriz.

Böyle anılmasının sebebi ise Thread işleyiş mantığına sahip olması, DispatcherObject ‘lerin basit sorunlardan ötürü birbiri ile çakışmasını engellemesidir. Çünkü WPF sistemden aldığı mesajları düzenli olarak yeniden sisteme iletmektedir. Bu olayın gerçekleşmesi ise çalıştığı sistemin yine bir Windows ailesine dâhil olmasından kaynaklanmaktadır.

Performans açısından Win32 ailesinden Pump(Pompa) denilen bir yapı kullanılıyordu. Bu sistem Thread ile birlikte çalışarak sistemi hızlandırıyordu. WPF ’de kullanılan yapı ise dispatcher nesneler kullanılarak kullanıcıdan alınan User32 sistem mesajlarını Thread ler ile eşzamanlı performans artışı sağlamaktadır.

Bu yapıda kullanılmakta olan Thread yapısı, gerçek anlamda çift çekirdekli işlemcilerde kullanılmakta olan Thread yapısı arasında oldukça fazla bir benzerlik gözlenmektedir.

WPF uygulamaları ilk gelişim aşamalarında tekli Thread mimarisi kullanılmaktaydı. Fakat böyle bir sistemin kullanılması Windows la birlikte Threadlerin ortaklaşa kullanılacak olması durumuna gelecektir. Böyle bir durumda web üzerinden uygulama geliştirenlerin başlarına sıklıkla gelen Threadlerin görevleri taşıma hatası ile karşılaşılacaktır. İşte böyle bir durumun gerçekleşmesi durumunda bizim uygulamamızı yönetecek olan bir Thread kalmıyor ve non-thread adı verilen “affinitized” model oluşuyor. Thread affinity(benzerliği) ile karşılaşıldığı zaman bizim kullanmış olduğumuz bileşenlerin kullanımı konusunda thread de yapılmakta olan planlamasında benzer tip çakışması oluşması mümkündür. Bu duruma genel olarak Thread Local Store(TLS) denilmektedir. Thread affinity, sayısal thread verilerini fiziksel thread verilerine dönüştürerek işletim sisteminde de kullanılacak olan thread ’ler ile karışmaması hedeflenmiştir.

Bu sistemlerin geliştirilmesindeki en büyük etken uygulamalarımızı çalıştıracak olduğumuz formlar, Internet Explorer gibi uygulamaların single thread affinity(STA) kullanıyor olmalarıdır.

Üst paragrafta anlatmaya çalıştığımız STA yapısını ufak bir örnek ile açıklamaya çalışalım. Açıklamaya çalışacağımız örnek bir dispatch(yönlendirme) üzerine olacaktır. Faremizin bir noktadan başka bir noktaya getirilmesi esnasında yapılan iş ile ilgili mesaj sisteme yüklenmektedir, yüklenmiş olan mesajlarda framework içerisinde yer alan kullanıcı için oluşturulmuş bölümlere bu iş yapıldı emri verilecektir. Elde edilen bu sistem DispatcherObject yardımı ile CLR ‘de STA modeli oluşturulur. Bu yaratılmış bütün işlemlerin sonucunda ise bellekten belirli bir nokta tutulur ve tutulan bu noktaya işlemin gerçekleştirilme süresi eklenerek işlemler sonlandırılır.

System.Windows.DependencyObject

Bu özelliğimiz felsefi olarak WPF mimarisine tam anlamıyla uyan, mimaride yer alan metot ve özelliklerin birlikte kullanılmasını sağlayan bir nesnedir. Özellikleri ve bu özelliklerin alt yapılarını kolayca kullanabilmemize olanak tanımaktadır. Modeli, veriyi ve sistem için bizlere görüntülenebilir ara yüzler sunmaktadır. Bu felsefi yaklaşım hazırlamış olduğumuz efektleri bir özellik olarak başka özelliklere bağlamaya da yaramaktadır. Yani WPF ile aramıza katılan DataBinding özelliği bu nesnemiz yardımı ile kullanılmaktadır.

Sistemin içerisinde yer alan zengin(richer) özellikleri kullanarak sistemde hangi CLR bileşenlerinin kullanıldığını da seçebilmektedir. Ayrıca bu nesnemizde yalnızca tek veriye bağlama işlemi değil, birden fazla bağlama işlemi de birlikte yapılabilmektedir. Microsoft .NET Framework ara yüzünde yer alan INotifyPropertyChange özelliği ile uygulamalarımızı Visual Studio ’nun publish seçeneği yardımı ile yayınladığımızda sorunsuz bir biçimde çalışmasını sağlamaktadır.

DependencyObject ile bizlere kazandırılan bir diğer özellik ise fontların sorunsuz bir biçimde uygulamalarımızda kullanabilmemiz olmuştur. Ayrıca bu özellik ile fontun boyutu gibi özelliklerini DataBinding yaparak otomatik olarak ayarlayabilmemiz mümkündür.

Eğer bu nesne oluşturulmamış olsaydı bizler;

DataBinding işlemlerini yaparken çok fazla zaman kaybedecektik
Uygulamalarımız da oluşturmuş olduğumuz stilleri çok daha zor ve yoğun kod blokları ile oluşturmak zorunda kalacaktık.

Son olarak değineceğimiz özelliği ise Grid elementi olacaktır. Uygulamalarımızda sanki web uygulaması geliştiriyormuşuz gibi parçalara bölmemizi sağlayan bileşende bu nesnemiz yardımı ile bizlere sunulmuştur. Bu bileşenin en büyük yarayı satır ve sütunların boyut değerlerini otomatik olarak ayarladığımızda yağmış olduğumuz uygulamanın ekran genişliğinden oluşabilecek çirkin görünüm sorunlarını ortadan kaldırmış olacağız.

Sonuç olarak bu nesnemiz WPF uygulamalarında JavaScript gibi görev görerek kontrolleri daha başarılı bir biçimde kullanmamızı sağlar.

System.Windows.Media.Visual

Sistem ile birlikte çalışarak piksellere nelerin çizileceğinin belirtildiği nesnedir. Visual sınıfıyla miraslaşarak oluşturulmuştur. Uygulamamızda yapacak olduğumuz çizim, animasyon, transform gibi işlemleri gerçekleştirebilmemiz için gerekli olan bir nesnedir. Visual ile tasarılarımız ışık özellikleri ile desteklenmiş ve büyülü gibi gözüken bir geliştirme olanağı sunmaktadır.

WPF ile gerçek zamanlı uygulamalar geliştirecek yazılımcılar için ise iki tür alt sistem ile bağlantı sağlanarak bu olanak sağlanmıştır. Bunlardan birinci yönetilebilir API ’ler ikinci ise Milcore olan yönetilemeyen yapılardır. Fakat milcore ’larında DirecxT ile ilişkilendirilerek yönetilebildiğinden bahsetmiştik.

Yönetilebilirlik kavramı pointerlar yardımı ile bellekte yer tutarak işlemlerimizi yapmaktadır.

WPF ile programlama yaparken, Visual(görüntüsel) unsurlar yardımı ile oluşturduğumuz tipler durumuna getirilir. Bu tipler arka planda dağınık bir yapıda bulunmaktadır. Visual elementi bu dağınık yapıları belirli protokollere göre düzenleyerek daha en uygun bir tipler topluluğu ile bizler yardımcı olur.

Şimdi bu protokol yapısına bir göz atalım ve yapıyı açıklamaya çalışalım.

mak21_2

Yukarıda vermiş olduğumuz mimaride sol tarafta yer alan piramit kullanıcı tarafından yapılmış olan tasarımı, sağ tarafta yer alan tasarım ise Visual sınıfı ile düzenlenmiş(render) tasarımdır. Visual sınıfı tarafından düzenlenmiş olan tasarım yüksek hızda yenilenebilirlik özelliğine sahip olmakla birlikte XAML olarak oluşturulduğu için sistem tarafından kodların çağırılması aşamasında da uygulama performansı sağlamaktadır.

Grafikler için oluşturulmuş olan arabellek diyagramda mor renkte gösterilmiştir. Dikkat ettiğiniz kadarıyla kullanıcı tarafından oluşturulmuş olan tasarımda iki defa arabellek istendiği halde Visual sınıfı kullanılarak oluşturulmuş tasarımda yalnızca tek bir arabellek yeterlidir. Bu da işlemcileri ve grafik sistemlerini en çok zorlayan görüntüsel öğeleri çok daha hızlı bir biçimde yapabilmemiz anlamına gelmektedir.

WPF ’te “painter’s algorithm” boyama ve çizim algoritması kullanılmaktadır. Bu algoritma sayesinden ekran üzerindeki pikselleri kullanırken en doğru noktalar seçilerek işlemlerimiz yapılır. En doğru noktanın seçilmesi dışında User32 ve GDI sistemden çağırılarak kullanılmasından ötürü işlem performansı ve en uygun piksel seçimi de oldukça iyi bir şekilde yapılmıştır.

İlk zamanlarda kullanmış olduğumuz çizim sistemleri DrawLine/DrawLine biçimindeydi. Bu tip modeller veriler ile kullanıldığı zaman bölüm işlemi sonucunda tanımsız değerler verebilmekteydi. Yeni sistemde ise veriden alınan model – new Line()/new Line() biçimine dönüştürülmüştür. Bu kompleks yapı yukarıda belirtmiş olduğumuz sorunları bizlere yansıtmadan işlemlerini tamamlayabilmektedir. Kısacası Drawing işlemleri de iyileştirilmiştir.

Son olarak değineceğimiz özelliği ise geliştirici ile tasarımcı arasındaki etkileşimin artmasıdır. Bu etkileşimi ufak bir örnekle açıklamak gerekirse, projeyi isteyen müşterimiz Windows Vista’da görmüş olduğu butonların aynısının yapılmasını istiyor. Bu durumda tasarımcı bu butonları tasarlayarak geliştiriciye vermekteydi. Geliştiricide bu bileşeni uygulamaya entegre etmeye çalışıyordu. Fakat asla tasarımcının tasarladığı kadar mükemmel bir biçimde uygulamamızda gözükmemekteydi. Visual elementi yardımı ile Expression Blend gibi ara programlarla tasarımcılar istenilen bileşeni oluşturuyor. Geliştiricide yaklaşık 5 saniye içerisinde uygulamaya bu bileşeni entegre etmektedir. Bunun sebebi ise tasarımcı ile geliştiricinin farklı yapılar üzerinde işlemlerini yapmalarıydı. İkisi de ortak bir yapı ile çalıştıkları zaman çok hızlı ve istenen işler yapılmış olarak işlerini bitirebilmektedirler.

System.Windows.UIElement

UIElement, alt sistemlerde tanımlanmış olan tasarım, giriş verilerini tutar.

WPF ’in yapısal içeriğini çekirdeğinde barındırır. HTML modellerden alışık olduğumuz formlarda akış yapıları, tablolar gibi modelleri ve hiçbir model yapısında bulunmayan User32 pozisyonlarını bünyesinden barındırmaktadır. WPF ’i açıklarken geliştirici ile tasarımcı ile basit bir şekilde etkileşim sağladığından bahsetmiştik. Bu etkileşimde geliştiricilerinde basit olarak tasarımlar yapabilmesini bu nesnemiz olanak tanımaktadır. Geliştiricinin yapabileceği basit tasarımlar ölçülü ve düzenli tasarımlardır.

Ölçülü(Measure) yapılar bileşenlerin izin verdiği düzeyde yapılmaktadır. Bu izinlerde genellikle boyutlar için verilmektedir. Düzenli(Arrange) olanlarda ise bileşenlerin duracağı yerler gibi özelliklerine izin vermektedir. Ayrıca oluşturulmuş olan alt formların tasarımlarında da belirttiğimiz özellikler taşınmaktadır.

UIElement genel olarak kullanıcıların genel olarak alışık olduğu kısa yolları (CTRL+N yeni bir sayfa açma gibi), grafik olarak daha güzel yapıları tasarlamamız için kullandığımız bir nesnedir.

System.Windows.FrameworkElement

FrameworkElement ‘i iki farklı davranış yapısı ile inceleyeceğiz. Bunlar davranış biçimi ve özelleştirilebilirliktir. Bu iki özellik WPF sisteminde bulunan Framework elementinin davranış yapısına uygun bir biçimde oluşturulmuştur.

FrameworkElement, UIElement ‘in birkaç özellik daha eklenmiş biçimi diye de bahsedebiliriz. Kolay tasarımlara ek olarak eklenmiş olan özellikler;

HorizontalAlignment, VerticalAlignment, MinWidth ve Margin dir. Bu özelliklerin hepsi formun ve form üzerinde yer alan bileşenlerin boyutlarını belirlememizde bizlere yardımcı olan özelliklerdir.

Bir diğer özelliği ise animasyon işlemleri yaparken kullanmış olduğumuz Storyboard ve BeginStoryboard metotlarıdır. Bu özellikler yardımı basit animasyon işlemleri ile birlikte birçok animasyon yapısı birleştirilerek karmaşık ve göze hoş gelen animasyonlarda oluşturulabilmektedir.

DataBinding ’te ailesi de bu nesnemizde yer almaktadır. Genel olarak kullandırdığı DataBinding özellikleri, özellikleri bind(bağlamak) etmek, transform işlemlerinde kullanmak ve oluşturmuş olduğumuz listeleri bind(bağlamak) etmektir.

DataBinding ‘in FrameworkElement yardımı ile kullanıldığı bir diğer alan ise stillerdir. Daha önceden hazırlamış olduğumuz şablonları ve özellikleri yine FrameworkElement yardımı ile kullanabilmemiz mümkündür.

System.Windows.Controls.Control

Adından da anlaşılacağı gibi form üzerinde kullanmış olduğumuz kontrollerin barındırıldığı nesnelerimizdir. Eğer WPF ’i iyi bilmiyorsak ToolBox menüsünden sürükleyerek ulaşabileceğimiz, biliyorsak ise XAML kod tarafında kendimizin oluşturabileceği bileşenlerdir. Peki, bileşenleri barındırıyorsa neden adı Component sınıfında değil diyebilirsiniz. Çokta doğru bir noktaya değinmiş olursunuz. Controls.Control nesnesinin genel görevi kullanmış olduğumuz kontrol bileşenlerinin özelliklerini dilediğimizce kullanabilmemizdir.

Kullanabileceğimiz özelliklerin neler olduğuna göz atarsak;

Foreground, Background, Padding gibi özellikleri dileğimizce özelleştirebiliriz. Bunları daha önceden de dilediğimizce özelleştirebiliyorduk diye bir düşünceye kapılabilirsiniz. Fakat diğerlerinden farklı olarak başka bir kontrolden değerler alınarak yani DataBinding yapılarak kullanabilmemizdir.

En çok olarak özelliği değiştirilen kontrol Button’ dur. Button’ da içerik özellikleri değiştirilerek istenen sonuç gerçekleştirilebilir.

Burada WPF mimarisinde yer alan bütün nesneleri tanımış oluyoruz. Genel olarak neler yapabileceğimizi bir kez daha hatırlarsak; dinamik tasarımlar yapabilmemize artık olanak tanınmakta, sistem yapısında yer alan Thread ’ler ile geliştirdiğimiz uygulamanın performansını en üst düzeye çıkartabilmekte ayrıca da buton gibi kontroller başka bir yerde kullandığımız özellikleri bağlamamıza olanak tanımaktadır.

WPF mimarisinde yer alan nesneleri tek tek incelemeye çalıştık. Bu mimariyi WPF uygulamaları geliştirirken hatırlarsak çok daha başarılı ve istenen düzeyde kaliteli projeler geliştirebilmemiz mümkündür.

WPF mimarisini burada bitirmiş oluyoruz. Şimdi inceleyeceğimiz konu ise WPF ‘de çok önemli bir görevi olan XAML ‘dir. Nasıl bir içeriği olduğunu formlarımızı nasıl ve hangi özellikleri ile özelleştirdiğine değinmeye çalışacağız.

XAML Genel Yapısı

XAML, WPF ’i çok kuvvetli kılan çok geniş kapsamlı bir dil olarak karşımıza çıkmaktadır. XAML dilini incelerken en temel özelliklerini WPF ’te nasıl kullanabileceğimize değinerek öğrenmeye çalışacağız.

Dilin Genel Yapısı ve Akış Kontrolleri

XAML temel olarak UI avantajları .NET Framework programlamasında yer alan bir modeldir. Programlar oluşturulduğu zaman sistemi zorlayan birçok özelliği sayısal veriye dönüştürerek daha az bellek harcayan programlar oluşturmamıza olanak tanımaktadır. WPF dilinde tasarım bölümünde kullanmış olduğumuz bir dildir.

XAML, XML dilinin daha genelleştirilmiş hali gibi görülebilir. Oluşturulan dosyaların uzantıları, .xaml ‘dir.

İlk XAML örneğimiz için bir buton oluşturacağız. Bu oluşturacağımız buton içerisinde .NET Framework kütüphanesi içerisinde hazırlanmış olan sınıfları kullanmaktadır.

XAML
<StackPanel>
   <Button Content="Click Me"/>
</StackPanel>

XAML Object Elements

XAML bünyesinde yer alan Object Elements sınıfı içerisinde yapılar, özellik olayları ve XML temel yapısı ile birlikte CLR yapısı da yer almaktadır.

XAML ’de object elementlerimiz iki türlüdür. Bunlardan birincisi, <StackPanel>(tagları kapatma işlemi yapılması gerekiyor.) şeklindedir. Taglar işlem bittikten sonra tekrar / koyularak kapatılır. İkincisi ise açtığımız tagın içerisinde işlemimiz biter bitmez kapatmaktır.Örnek olarak <Button /> gösterilebilir. Bu iki yapı ile WPF uygulamalarını XAML ile istediğimiz biçimde özelleştirebiliriz.

Attribute Syntax

XAML ‘in içerisine bazı özellikler bağlanmıştır. Bağlanan bu özelliklere genel olarak Attribute denmektedir. Kullanım şekilleri ise standart özellik kullanımı ile aynıdır. Yani geliştiricilerin alışık olduğu dil yapısından bir farkı yoktur.

XAML
<Button Background="Blue" Foreground="Red" Content="Bu bir buttondur..."/>

Property Element Syntax

Bu özellik ObjectElements ve Attribute Syntax yer alan özelliklere kıyasla bir öncekinden referansla hareket ederek istenilen işlemleri yapmaktadır. Genel sonuç olarak birbirinden farkı olmasada kod yazımı açısından belirli bir fark göstermektedir. Bu farkı aşağıdaki örnek kodumuzda ayrıntılı bir biçimde göreceğiz. <TypeName.Property> şeklinde kod tarafında kullanılır. Bu tür yapıda kodumuzu yazabilmemiz için kullandığımız kontrolün bir alt özelliğinin olması yeterlidir.

XAML
<Button>
   <Button.Background>
      <SolidColorBrush Color="Blue"/>
   </Button.Background>
   <Button.Foreground>
      <SolidColorBrush Color="Red"/>
   </Button.Foreground>
   <Button.Content>
      This is a button
   </Button.Content>
</Button>

XML ’den alışık olduğumuz yorum artışı bölümüne temel olarak aynıdır. Kullanacağımız özelliği <TypeName.Property >biçiminde belirtip, Property bölümüne istediğimiz özelliği seçerek işlemlerimizi yapabiliriz.

Property ve Class İnheritance(Miraslama)

XAML verileri ile oluşturulmuş olan özellikleri miraslama yöntemi ile WPF elementlerinden kullanabilme olanağı vardır. Örneğin, Background özelliğini Button sınıfında tanımlamış olalım. Daha sonra bu özelliği başka yerlerde de kullanmak istiyoruz. İşte bunu yapabilmemiz için miraslama yöntemini kullanarak istediğimiz kontrole tanıtmamız yeterli olacaktır.

Referans Değerler

XAML ile formumuzda dinamik olarak işlemler yapmamız gerekebilir. Bu işlemleri de gerçekleştirebilmek için ilk olarak bağlama işlemi daha sonrada tekrardan oluşturduğumuz kaynağı çağırmamız gerekecektir. Bu işlemleri gerçekleştirebilmemiz için gereken özellikler Binding ve StaticResource & DynamicResource ‘dir.

Binding yapılan verileri daha sonradan çağırmak istediğimizde “{…}” süslü parantezler içersine yazılarak bağlanan veriyi çağırabiliriz.

Şimdi bu binding ve çağırma işlemini bir örnek üzerinden gösterirsek çok daha açıklayıcı olacaktır.

XAML
<Page.Resources>
   <SolidColorBrush x:Key="MyBrush" Color="Gold"/>
   <Style TargetType="Border" x:Key="PageBackground">
      <Setter Property="Background" Value="Blue"/>
   </Style>


...

</Page.Resources>
<StackPanel>
   <Border Style="{StaticResource PageBackground}">


...

   </Border>
</StackPanel>

XAML Content Property Değerleri

XAML ’de ağaç yapısı ile özellikleri kullanabilmemizin dışında, kullandığımız kontrolün içersinde de kullanabilmemiz mümkündür.

Örnek kod yapıları ile bu özelliği incelemeye çalışalım;

XAML
<Button>Ben
   <Button.Background>Blue</Button.Background>
   Mavi button</Button>

Sıklıkla kullanılan XAML özellikleri yukarıda incelediklerimizdir. Bu özelliklerin dışında birçok özellik daha bulunmakta, fakat bunların büyük bir kısmı genellikle kullanılmamaktadır. Kullanılmayan bu özellikleri daha sonraki makalelerimizde kullandıkça yavaş yavaş açıklamaya çalışacağız.

Bu yazımızda nelere değindiğimize kısaca bir hatırlamak gerekirse; İlk olarak WPF mimarisini oluşturan nesneleri ayrıntılı bir biçimde açıklamaya çalıştık. Açıklarken de neden geliştirildiklerine temel olarak değinmiş olduk. Daha sonra bu mimaride sıklıkla adı geçen form tasarımlarını özelleştirebileceğimiz, kodlarla uyum içerisinde çalışabilen bir dil olan XAML ’in en temel özelliklerini açıklamaya çalıştık. Açıkladığımız bu özellikleri de basit kod örnekleri ile pekiştirerek yazımızın sonuna geldik.

Bir sonraki yazımızda görüşünceye dek esenlikle kalın.

İyi çalışmalar…

Turhal TEMİZER