1 / 35

Gelişmiş İnternet Uygulamaları

Gelişmiş İnternet Uygulamaları. Silverlight ’ a Giriş XAML. 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.

derick
Download Presentation

Gelişmiş İnternet Uygulamaları

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 PresentationFoundation (WPF)’in internete yansımasıdır.

  3. WPF(Windows PresantationFramework) 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 AdobeFlash 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- RIARIA(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. VisualStudio gibi güçlü bir program ile programlama yaparken ExpressionStudio 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 SilverlightRuntime(SilverlightPlayer) 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 GoogleCrome 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 ActionScript‘i kullanılır.Silverlight ise Asp.net,Php,ColdFusion 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(ExpressionBlend-VisualStudio) 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 • ExpressionStudio • 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. • ExpressionBlend • ExpressionBlendSilverlight 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 • VisualStudio 2008 Service Pack 1 • Silverlight çıkış sürecinde VisualStudio 2008 üzerinde herhangi bir destek bulunmuyordu. Service Pack 1 ile gelen Silverlight desteği ile Developer tarafında Silverlight uygulaması geliştirebiliyoruz. • SilverlightTools • oVisualStudio içerisinde yeni proje oluşturmamızı sağlayan tools paketidir. • SilverlightDeveloperRuntime • SilverlightClientRuntime 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 Silverlightruntime bulunması gerekecektir. Aksi takdirde Silverlight uygulamalarını görüntüleyemeyiz. • Sistemimizde bulunan developerruntime 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 VisualStudio ü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 dllleri 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 classları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” (ExtensibleApplicationMarkupLanguage) • 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><sinifozellik="deger" /></alt_nesne.ozellik2></alt_nesne><alt_nesne ozellik="deger" /></nesne></kok_eleman>

  23. XAML ObjectElements • 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. • <ButtonContent="Ben Bir Düğmeyim" /> Düğmeye bu şekilde birden fazla özellikte atanabilir. • <ButtonContent="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><degerozellik="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> <SolidColorBrushColor="Green"/> </Button.Background> <Button.Foreground> <SolidColorBrushColor="White"/> </Button.Foreground> <Button.Content> Bu bir butondur... </Button.Content> </Button>

  28. XAML - Nesne Özelliklerini Atamak 2- Kompleks Atamalar <ButtonContent="Ben Bir düğmeyim" FontFamily="Trebushet MS" FontSize="15" Width="150" Height="60">< Button.Background> < LinearGradientBrush> < LinearGradientBrush.GradientStops> < GradientStopColor="PowderBlue" Offset="0.4"/> < GradientStopColor="Beige" Offset="0.6"/> < /LinearGradientBrush.GradientStops> < /LinearGradientBrush>< /Button.Background>< Button.Foreground> < LinearGradientBrush> < LinearGradientBrush.GradientStops> < GradientStopColor="Black" Offset="0.6"/> < GradientStopColor="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">< SetterProperty="Background" Value="Beige" />< SetterProperty="Foreground" Value="Red" />< SetterProperty="Width" Value="150" />< SetterProperty="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. • <ButtonStyle="{StaticResourceDugmeler}" 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. • <ButtonClick="Tikla" Style="{StaticResourceDugmeler}" Content="Ben Bir düğmeyim" Height="60" />< x:Code>< ![CDATA[publicvoidTikla(objectsender, 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/ • http://www.yusufkarakas.net/ • Nesne Tabanlı Programlama Modülleri

More Related