Gelişmiş İnternet Uygulamaları

... konulu sunumlar: "Gelişmiş İnternet Uygulamaları"— Sunum transkripti:

1 Gelişmiş İnternet Uygulamaları
Silverlight’ a Giriş XAML Uzunköprü TEML – Bilişim Teknolojileri Alan Şefi - Mustafa SEVEN

2 SilverLight Giriş Silverlight; web, masaüstü ve mobile uygulamalar için ilgi çekici, interaktif kullanıcı deneyimleri oluşturmak için online ve offline geliştirme platformu sunan Microsoft arka planlı bir teknolojidir. Microsoft’un 2007 başlarında tanıtımını yaptığı ve NET 3,0 içerisinde entegre olarak gelen vektörel ara yüzler ile yazılım geliştirilmesine olanak sağlayan Windows Presentation Foundation (WPF)’in internete yansımasıdır.

3 WPF(Windows Presantation Framework) Nedir?
WPF yeni nesil kullanıcı arayüzü geliştirme ve görüntüleme platformudur. Bu yeni platformun sağlamış olduğu yeni özellikler ile görsel olarak daha modern ,kullanıcı ile daha etkileşimli, içerik sunumunda daha esnek, uygulamalarda kullanılan ses ve görüntülerin daha kolay bir şekilde gösterilmesi ve zengin içerikli uygulamaların kolay ve hızlı bir şekilde geliştirilmesi sağlanmaktadır.

4 Silverlight Giriş NET temelli programcılık yeteneğiyle Adobe Flash karşısında büyük bir rakip olarak karşımıza çıkmaktadır.Özellikle Windows Vista ve Windows 7 ile beraber gelen masaüstü deneyiminin bir şekilde web’e aktarılması gerekiyordu.Bu doğrultuda özellikle uygulama bazında proje geliştirmek için Silverlight doğru tercih olacaktır.

5 Neden Silverlight 1- RIA RIA(Rich Internet Application) dediğimiz zengin internet uygulamaları oluşturmak ve bu uygulamaları etkin bir şekilde kullanıma sunmak günümüzün en büyük ihtiyaçlarından birisi olmuş durumda. Silverlight ‘ın temel amacı da tüm platformlar daki zenginliğin maksimum performans ile web’e aktarılmasıdır. Bu çerçevede grafikten animasyona, HD dediğimiz yüksek çözünürlüklü video oynatmaya kadar özellikleri içinde barındırması Silverlight’ın en önemli özelliklerinden biridir.

6 Neden Silverlight 2-Kolay Öğrenim ve Kullanım Kolaylığı
Özellikle. Net Platformunda bulunması, Microsoft’un Silverlight a verdiği önem, gerekse de MVP lerin bu konuda paylaştığı makaleler, yazdıkları kitaplar ile öğrenim açısından büyük kolaylık sağlanmış durumda.Kullanım kolaylığı açısından developer ve designer ayrımının olması en önemli avantajlarından biri olarak gösterebiliriz. Visual Studio gibi güçlü bir program ile programlama yaparken Expression Studio ile tasarım işlemlerimizi gerçekleştirebiliyoruz. Özellikle iş akışının iki bölüme ayrılması zaman ve kullanım kolaylığı açısından büyük öneme sahip.

7 Neden Silverlight 3-Vektörel Grafik
Buradaki vektörel den kasıt yaptığımız tüm çizimlerin matematiksel bir karşılığının olması ve sayfaya da ona göre çizilmesidir. Web Tasarımına getirdiği kolaylık düşünüldüğünde günümüzün vazgeçilmez özelliklerinden biri olarak gösterebiliriz. Çözünürlük bağımsız çalışmak tüm web tasarımcıların hayalidir aslında. Özellikle Css ile browserlar için özel tasarım yapma derdi vektörel bir tasarımla ortadan kalkıyor.

8 Neden Silverlight 4-Çapraz Platform & Çapraz Tarayıcı
Hem Windows hem de Mac ortamında Silverlight Runtime(Silverlight Player) desteği mevcut durumda. Böylelikle her iki platformda da Silverlight uygulamalarımızı çalıştırabiliyoruz. Linux platformunda Silverlight uygulamalarının görüntülenmesi için ise “MoonLight” adlı sürümü kullanabiliyoruz. Tarayıcı tarafında ise tüm güncel browserlar da Silverlight uygulamalarını görmemiz mümkün. Destek olarak Internet Explorer, Mozilla ve Google Crome desteğini görebiliyoruz.

9 Rakiplerine Göre Avantajları
Silverlight öncesi web tarafına baktığımızda Web in tek hâkimi olarak Flash’ı gösterebiliriz. Şimdi bu iki platform arasındaki farklara göz atalım. Animasyon Yapısı Flash bilindiği üzere animasyonları kare üzerinden gerçekleştirmektedir.Silverlight tarafında ise animasyonlar saniye üzerinden gerçekleşir. Bu çerçevede Flash tarafında saniye başına düşen kare sayısını hesaplamak gerekse de donanımsal aksaklıklardan dolayı kareler de bozulma meydana gelebilir. Silverlight da ise istediğimiz saniyede istediğimiz hareketi görmemiz mümkün.

10 Rakiplerine Göre Avantajları
Dil Farklılıkları Her ne kadar her iki program da tasarım olarak öne çıksa da özellikle uygulama bazında kullanılan dillerin büyük öneme sahip olduğunu söyleyebiliriz. Bunun dışında kullanılan objelere ulaşılması ve olay yönetimi bazında da dillerin kullanılması gerekir Flash bilindiği üzere dil olarak Action Script‘i kullanılır.Silverlight ise Asp.net,Php,Cold Fusion vb dilleri kullanır.Bu çerçeve de baktığımızda çoklu dil desteği ve güncel dilleri kullanması açısından Silverlight tercih sebebi olacaktır.Böylelikle genele baktığımızda ek bir dil öğrenme ihtiyacımız ortadan kalkmış oluyor.

11 Rakiplerine Göre Avantajları
Veri İşlemleri Gün geçtikçe verinin önemi de oldukça artmış durumda. Özellikle uygulama bazında proje geliştirecek isek veri ile daha rahat işlemler yapabilmek özellikle developerlar açısından oldukça büyük bir öneme sahip.Her ne kadar Flashın çıkış amacında Data işlemlerinin önemi olmasa da günümüz web dünyasında verinin önemi göz ardı edilmeyecek kadar büyük. Hal böyle olunca Flashın bu konuda geride kaldığını söyleyebiliriz. Silverlight tarafına baktığımızda özellikle Silverlight 4 ile veri tarafında büyük gelişmeler olmakta. Özellikle uygulama bazında alışık olduğumuz tablo ve grid yapıları ve temel database işlemlerini çok rahat bir şekilde yapabilmemiz Silverlight ın en önemli artılarından biri olarak gösterilebilir.

12 Rakiplerine Göre Avantajları
Uygulama Geliştirme Platformları Uygulama geliştirme açısından tasarımsal olarak her iki programında eşit özelliklere sahip olduğunu söyleyebiliriz. Ancak Flash tarafında Design ve Code işlemlerinin aynı program üzerinde yapılması iş akışı açısından dezavantaj sağlamaktadır. Silverlight da ise tasarım ve code işlemleri aynı proje içerisinde farklı öznitelikleri olan programlar(Expression Blend-Visual Studio) tarafından sağlanmaktadır. Böylelikle tasarımcı ve programcı ayrımı olmakla beraber güçlü iş akışı, hızlı proje geliştirme olanağına sahip oluyoruz.

13 Proje Oluşturma Expression Studio
Microsoft'un dijital tasarım ve kullanıcı deneyimine verdiği önem sonucunda çıkardığı ürün ailesidir. Web, Masaüstü ve Mobile uygulamalar için etkili ve bir o kadar da ilgi çekici tasarımlar oluşturmamızı sağlar. Expression Blend Expression Blend Silverlight için kullanıcı ara yüzü oluşturduğumuz araçtır. İleriki bölümlerde değineceğimiz Xaml kod yapısının tasarım olarak çıktısına Blend sayesinde ulaşabiliyoruz. Görsel tasarımcılar için işlevsel, iş akışlarının rahat kontrol edildiği bir geliştirme platformudur.

14 Proje Oluşturma Visual Studio 2008 Service Pack 1
Silverlight çıkış sürecinde Visual Studio 2008 üzerinde herhangi bir destek bulunmuyordu. Service Pack 1 ile gelen Silverlight desteği ile Developer tarafında Silverlight uygulaması geliştirebiliyoruz. Silverlight Tools oVisual Studio içerisinde yeni proje oluşturmamızı sağlayan tools paketidir. Silverlight Developer Runtime Silverlight Client Runtime dışında developerlara yönelik kendi debug özelliklerini sağlayan bir Runtime yüklememiz gerekmektedir.

15 Proje Oluşturma Önerilen Prgramlar Visual Studio 2010 Service Pack 1
Expression Blend 4 RC Silverlight Tools Silverlight Developer Runtime

16 Mimari Yapı Silverlight mimari yapı olarak Client tarafında çalışan uygulamalardır.Böylelikle yapmış olduğumuz tüm uygulamalar son kullanıcının kendi bilgisayarında çalışacaktır. Peki, bu işlem nasıl gerçekleşir? Örnek olarak yeni bir Silverlight uygulaması oluşturduğumuzu düşünelim. Bu aşamada; İlk olarak sistemimizde Silverlight uygulamalarını görebilmemiz için bir Silverlight runtime bulunması gerekecektir. Aksi takdirde Silverlight uygulamalarını görüntüleyemeyiz. Sistemimizde bulunan developer runtime projeyi compare edip, xap dosyasını çeviriyor ve Client tarafına yolluyor.Client tarafındaki runtime ise bu xap dosyasını çalıştırarak Silverlight uygulamalarının görüntülenmesini sağlıyor. Böylelikle server tarafında herhangi bir şey çalıştırmıyoruz.

17 Peki, xap dosyası nedir? Xap dosyası en basit tanımıyla Silverlight projemizde yapmış olduğumuz tüm işlemlerin kaydedildiği diğer bir ifadeyle tutulduğu yerdir. Projemizi Visual Studio üzerinde derlediğimizde Server tarafında ClientBin klasörü altında proje ismiyle bir xap dosyası oluşturulur. Xap uzantısı aslında bir zip dosyasıdır. İçeriğini görüntülediğimizde projemizin bilgilerinin tutulduğu dll leri görebiliriz. Tam bu aşamada dikkat edilmesi gereken birkaç hususdan bahsetmek gerekiyor. Bu aşamaya kadar Silverlight uygulamalarımızın Client tarafında çalıştığını gördük. Diğer bir değişle uygulamalarımız son kullanıcının elinde olacaktır. Hal böyle olunca önemli algoritmalarımızı ve class larımızı sunucu tarafında tutmamız gerekiyor. Genel olarak konuşacak olursak başkalarının eline geçmesini istemediğimiz tüm işlemleri sunucu tarafında saklamalıyız.

18 XAML NEDİR? “Genişletilebilir Uygulama İşaretleme Dili” (Extensible Application Markup Language)
XAML, Silverlight ve Wpf platformlarına statik ya da dinamik kullanıcı ara yüzleri oluşturmak için Microsoftun geliştirmiş olduğu yeni bir Markup (işaretleme) dilidir. Silverlight ile proje geliştirebilmek için Xaml kavramının çok iyi anlaşılması gerekmektedir. Özellikle nesnelere yönelik Xaml hiyerarşisine hakim olmak projelerimizi çok daha rahat bir şekilde geliştirmemizi sağlar.

19 XAML XAML ile WPF ve Silverlight teknolojilerinden hem masaüstü uygulamaları hem de Web uygulamaları için arayüz tasarımı yapılabilir, zaten XAML’de tam olarak bu konu üzerine odaklanmıştır. Masaüstü için tasarladığınız bir uygulamada kullandığınız düğmeyi, herhangi bir değişiklik yapmadan aynı kodlarda web uygulamalarında da görüntületebilirsiniz. Bu açıdan bakıldığında XAML, yıllardır yapılmak istenipte yapılamayan Masaüstü-Web programcılığının kaldırılması için büyük bir adım atmış oldu. ( Asp.net ve Windows Form Application’ ı birleştime)

20 XAML XAML size arayüzde bulunan nesneleri, bu nesnelerin başka nesneler ile olan ilişkilerini ve şekil, konum, renk, vs gibi tüm özelliklerini belirleme şansını verir. Tüm XAML dökümanları .xaml uzantısını alırken, XAML dökümanına ait kaynak kodu dosyaları ise (örn C# için) .xaml.cs uzantısını alır.

21 XAML XAML Yazım Kuralları
XAML kodları yazarken dikkat edilmesi gereken en önemli kural, bilinen XML kurallarına uymaktır. Yani, Açılan etiketler kapatılmalıdır, Gereken şemalar verilmelidir, Büyük-küçük harf ayrımına uyulmalıdır, Hiyerarşi korunmalıdır, Mutlaka bir tane kök düğüm bulunmalıdır

22 XAML <kok_eleman> <nesne ozellik="deger" ozellik2="deger2"> <alt_nesne ozellik="deger"> <alt_nesne.ozellik2> <sinif ozellik="deger" /> </alt_nesne.ozellik2> </alt_nesne> <alt_nesne ozellik="deger" /> </nesne> </kok_eleman>

23 XAML Object Elements 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. </StackPanel> İ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.

24 XAML - Nesne Özelliklerini Atamak
Nesnelere özellik atama yöntemleri atanacak özelliğin karakteristiklerine göre çeşitlilik gösterebilir. Bu yüzden olayı basit atama ve kompleks atamalar diye ikiye ayırabiliriz. 1- Basit Atama (Öznitelik Sözdizimi) Bu yöntemde özellik nesneye ait tanımlama kodu içerisinde atanır. Genelde basit, tek satırlı string ifadeler ve sayısal değerler için kullanılır. Yazması daha kolay bir yöntemdir, geçmişten beri işaretleme dili kullanan insanların en çok tercih ettiği yöntem olmuştur.

25 XAML - Nesne Özelliklerini Atamak
1- Basit Atama (Öznitelik Sözdizimi) Aşağıdaki düğme örneğimizde Content özelliğine atanan değer bu şekilde atanmıştır. <Button Content="Ben Bir Düğmeyim" /> Düğmeye bu şekilde birden fazla özellikte atanabilir. <Button Content="Ben Bir düğmeyim" FontFamily="Trebushet MS" FontSize="15" Background="Beige" Foreground="Red" Width="150" Height="60"/> Bu kod ile beraber, bej bir arka plan üzerine kırmızı olarak Trebushet MS fontunun 15 büyüklüğünde puntoları ile "Ben Bir düğmeyim" yazılmaktadır. Ayrıca düğmenin boyunun yüksekliğinin 60px, genişliğinin 150px olduğu belirlenmektedir.

26 XAML - Nesne Özelliklerini Atamak
2- Kompleks Atamalar Kompleks atamalar, basit atama yöntemi ile atanamayacak olan özellikleri atamak için kullanılır. Çünkü her zaman atanmak istenen özellikler tek satır veya basit bir string ile ifade edilemeyebilirler. Bu durumda kompleks atama yöntemine başvurulabilir. Bu yöntemde aşağıdaki gibi bir söz dizimi kullanılır. <nesne ozellik1="değer1"> <nesne.kompleksozellik> <deger ozellik="başka bir değer" /> <deger2 ozellik="başka bir değer" /> </nesne.kompleksozellik> </nesne>

27 XAML - Nesne Özelliklerini Atamak
2- Kompleks Atamalar <Button> <Button.Width> 100 </Button.Width> <Button.Height> 50 </Button.Height> <Button.Background> <SolidColorBrush Color="Green"/> </Button.Background> <Button.Foreground> <SolidColorBrush Color="White"/> </Button.Foreground> <Button.Content> Bu bir butondur... </Button.Content> </Button>

28 XAML - Nesne Özelliklerini Atamak
2- Kompleks Atamalar <Button Content="Ben Bir düğmeyim" FontFamily="Trebushet MS" FontSize="15" Width="150" Height="60"> < Button.Background> < LinearGradientBrush> < LinearGradientBrush.GradientStops> < GradientStop Color="PowderBlue" Offset="0.4"/> < GradientStop Color="Beige" Offset="0.6"/> < /LinearGradientBrush.GradientStops> < /LinearGradientBrush> < /Button.Background> < Button.Foreground> < LinearGradientBrush> < LinearGradientBrush.GradientStops> < GradientStop Color="Black" Offset="0.6"/> < GradientStop Color="White" Offset="0.4"/> < /LinearGradientBrush.GradientStops> < /LinearGradientBrush> < /Button.Foreground> < /Button>

29 XAML - Sitiller Çoğu zaman nesnelere ait görsel özellikler tek tek nesneler bazında tanımlanmak yerine CSS mantığında olduğu gibi bir kaynakta (Resources) tanımlanır ve nesnenin bu tanımlamaları kullanması istenir. Eğer tanımlanacak sitiller o pencere için geçerli olacaksa <Windows.Resources> etiketleri arasına yazılabilir. Şayet tüm uygulama için geçerli olacaksa <Application.Resources> etiketleri arasına yazılabilir.

30 XAML - Sitiller <Window.Resources> < Style x:Key="Dugmeler" TargetType="Button"> < Setter Property="Background" Value="Beige" /> < Setter Property="Foreground" Value="Red" /> < Setter Property="Width" Value="150" /> < Setter Property="Height" Value="60" /> < /Style> < /Window.Resources> Örneğin burada pencere içerisinde etkili bir sitil tanımlanmış durumda. Bu sitile de isim olarak Dugmeler ismi verilmiş. Bu sitilin etki edeceği nesne türü (TargetType) olarak ise Button türü verilmiştir. Ardından Setter etiketleri ile Property olarak hangi özelliğe değer atanacağı, Value ile de değerin ne olacağı belirlenmiştir.

31 XAML - Sitiller Tanımlanan bu sitili kullanmak için ise düğmede aşağıdaki gibi bir değişiklik yapılmıştır. <Button Style="{StaticResource Dugmeler}" Content="Ben Bir düğmeyim" Height="60" />

32 XAML - Kod Eklemek Normal şartlarda XAML, kod ile tasarımı ayrı tutmak üzere tasarlanmıştır ve içinde C# kodları bulunması pek doğal değildir; ancak imkansız da değildir. Böyle birşey istenirse, XAML kodları içerisinde <x:Code> </x:Code> etiketleri içerisinde istenen kodlar yazılabilir. <Button Click="Tikla" Style="{StaticResource Dugmeler}" Content="Ben Bir düğmeyim" Height="60" /> < x:Code> < ![CDATA[ public void Tikla(object sender, RoutedEventArgs e) { MessageBox.Show("Merhaba Dünya"); } ]]> < /x:Code>

33 XAML - Kod Eklemek Kodlar <![CDATA[ ile başlaması ve ]]> ile bitmesi gerekir. Burada kod olarak eklenen bir olay metodu olduğu için bir metodu bir olaya atamak için düğmemizin Click olayına metodun adı yazılmıştır. Sonuçta yandaki görüntü oluşmuştur.

34 Devamı gelecek…

35 Kaynaklar http://www.yazgelistir.com/ http://www.csharpnedir.com/
Nesne Tabanlı Programlama Modülleri