Gelişmiş İnternet Uygulamalarına Giriş

Gelişmiş İnternet Uygulamalarına Giriş

1 Gelişmiş İnternet uygulamaları geliştirmek için gerekli olan temel bilgileri edinip gerekli araçları kullanmayı öğrenebileceksiniz.  RIA (Rich Internet Application) kavramını araştırınız. 1. GİRİŞ XAML tabanlı uygulama geliştirme platformu, ilk olarak .NET Framework 3.0 içerisinde entegre olarak gelen vektörel arayüzler ile yazılım geliştirilmesine olanak sağlayan Windows Presentation Foundation’in (WPF) İnternete yansımasıdır. WPF ise uygulamaların çalıştığı pencerelerin şeffaflığı, renklerin daha belirgin ve etkin kullanımı gibi özellikleri ile karşımıza çıkan yeni nesil Form uygulamalarına ve vektörel arayüzlere verilen isimdir. WPF’in hedef makinelerde çalışabilmesi için ise .NET Framework 3.0 (veya daha üstü bir versiyon) yüklü olması şartı aranmaktadır. Teknik olarak baktığımızda başlangıçta XAML tabanlı uygulama geliştirme platformu, JavaScript ile kontrol edilebilen bir yapı olarak görünse de daha sonraki sürümlerle beraber C# ve Basic programlama dilleri ile geliştirilme imkânı sundu. Bu yenilik ile .NET üzerinde çalışan geliştiricilerin XAML tabanlı uygulama geliştirme platformu teknolojisine uyumu çok kolay hale getirilmiştir. Geliştirme mantığı olarak WPF’e oldukça benzemektedir. ASP.NET uygulamaların yaptığımız klasik işlemleri (metod yazma, olay yakalama vb. işlemler) XAML tabanlı uygulama geliştirme platformu ile de kolay bir şekilde gerçekleştirebilmekte, aynı zamanda online video yayınlarında kullanılan alanı azaltarak daha kaliteli videoları daha etkin bir biçimde sunabilmektir. ÖĞRENME FAALİYETİ–1 ARAŞTIRMA AMAÇ 4 Resim 1. 1: XAML tabanlı uygulama geliştirme platformu çalışma ekranı 1.1. Uygulama Mimarisi Silverlight ile uygulamalarımızı geliştirirken Visual Studio yazılımını kullanacağız. İndirmeniz gereken diğer programlar:  Visual Studio 2010 Service Pack 1  Silverlight 5 SDK  Silverlight 5 Tools for Visual Studio 2010 SP 1  Silverlight Toolkit  Expression Blend Preview for Silverlight 5 araçlarını kurarak uygulama geliştirmeye başlayabilirsiniz. Silverlight yine Flash gibi tarayıcı üzerinde yüklü plug-in’i ile çalışabilmektedir. Bilgisayarınızda Silverlight’ın plug-in’i yoksa tarayıcı ekranına bir uyarı gelecek ve Silverlight’ı yükleyebileceğiniz adresi gösteren bir resim çıkacaktır. Bu resme tıkladıktan sonra ufak bir kurulum gerçekleştirilecektir. Silverlight için gerekli araçları yükledikten sonra Visual Studio 2010’da File/New Project’iseçeneğini seçip Silverlight sekmesinde yer alan SilverlightApplication’ı seçerek ilk adımı atmaktayız. 5 Resim 1.2: Yeni proje oluşturma ekranı Uygulamaya yeni bir isim verip OK butonuna tıkladıktan sonra karşımıza bir ekran daha gelecektir. Bu ekranda Silverlight projesi ile beraber yeni bir ASP.NET projesinin açılmak istenip istenmediği ve hangi Silverlight sürümü ile çalışmak istediği sorulmaktadır. Burada sürüm olarak Silverlight 5.0 seçiyoruz ve “Host the Silverlight application in a New Web site” onayını kaldırarak ASP.NET projesi olmadan, Silverlight projemizi oluşturuyoruz. Çünkü Silverlight tarayıcı üzerinde çalışacağı için runtime’da zaten bir HTML çıktısı üretecektir. 6 Resim 1.3: Sistemimizde seçilebilecek Silverlight versiyonları Yeni bir Silverlight projesi açtıktan sonra gelen Visual Studio ekranını inceleyelim. 7 Resim 1.4: Visual Studio 2010 ekranı Yukarıdaki şekle baktığımızda şeklin orta kısmında tasarım alanını görmekteyiz. Bu alanda gerek ToolBox’ı kullanarak gerekse XAML ekranını kullanarak görsel düzeni oluşturmaktayız. Tasarım alanının hemen altında tasarım alanına ait XAML kodlarını görmekteyiz. Sol ve sağ taraflarda ise Silverlight uygulaması için gerekli pencereler yer almaktadır. Oluşturduğumuz Silverlight projesinde hiçbir işlem yapmadan hemen derleyip çalıştıralım ve çıktıları görelim. F5 tuşu ile projemizi derleyerek çalıştırıyoruz. Varsayılan tarayıcı ile var olan Silverlight projemize ait bir HTML çıktısı oluşturarak tarayıcı içerisinde gösterecektir. Gördüğünüz gibi HTML uzantılı bir dosya içerisinde Silverlight uygulamamız çalıştı. Bir HTML sayfası üzerinde fare ile sağ tıkladığımız zaman Flash uygulamalarında olduğu gibi uygulamanın hangi teknoloji ile geliştirildiğini göstermektedir. Aslında Silverlight projesi derlenip çalıştırıldığı zaman .xap uzantılı sıkıştırılmış bir dosya üretir. Bu dosyayı oluşturulan bir HTML sayfası nesne (object) olarak çağırır. Bu işlem Flash’ta .swf uzantılı dosyaları obje olarak sayfaya eklememize çok benzemektedir. 8 Projemizin Bin>Debug klasörü içerisine girdiğimizde bunu daha net bir şekilde görebilmekteyiz. Oluşturulan MerhabaSilverlight.xap isimli dosya sıkıştırılmış bir dosyadır. Winrar vb. herhangi bir sıkıştırılmış dosyayı açan program ile açtığımızda uygulamaya ait xaml dosyası ve dll dosyasını göreceğiz. Resim 1.5: Silverlight uygulama klasör Resim 1.6: xap dosyası içeriği Oluşturulan AppManifest.xaml dosyası uygulama içerisinde kullanılacak DLL’lerin kaydedildiği dosyadır. [AppManifest.xaml] HTML çalıştığı zaman xap dosyası yüklenir ve ilk olarak AppManifest.xaml dosyası çalıştırılır. Daha sonra AppManifest.xaml dosyası içerisinde EntryPointAssembly’de tanımlanan App.xaml dosyası çalıştırılır. 9 App.xaml dosyasının Application_Startupolayı, uygulama çalıştırıldığında hangi UserControl’ün ilk olarak yükleneceği bilgisi verilir.Son olarak Mainpage.xaml dosyası yüklenerek kullanıcı sayfayı görüntülemeye başlar. İstenilirse başlangıçta ilk açılan sayfa değiştirilebilir. Bunun için Application sınıfın içerisindeki Application_Startup metodunda tanımlı sayfayı değiştirmek yeterlidir. [App.xaml.cs C#] publicpartialclassApp : Application { public App() { this.Startup += this.Application_Startup; this.Exit += this.Application_Exit; this.UnhandledException += this.Application_UnhandledException; InitializeComponent(); } privatevoid Application_Startup(object sender, StartupEventArgs e) { this.RootVisual = newMainPage(); } privatevoid Application_Exit(object sender, EventArgs e) { } } Oluşturulan MerhabaSilverlightTestPage.html dosyasını Visual Studio ile açtığımızda HTML kodları ile bir object nesnesi tanımlanıp Silverlight için gerekli tanımlamalar yapıldığını görmekteyiz. [MerhabaSilverlightTestPage.html] html, body { height: 100%; overflow: auto; } body { 10 padding: 0; margin: 0; } #silverlightControlHost { height: 100%; text-align:center; } function onSilverlightError(sender, args) { var appSource = ""; if (sender != null&& sender != 0) { appSource = sender.getHost().Source; } var errorType = args.ErrorType; var iErrorCode = args.ErrorCode; if (errorType == "ImageError" || errorType == "MediaError") { return; } var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n" ; errMsg += "Code: "+ iErrorCode + " \n"; errMsg += "Category: " + errorType + " \n"; errMsg += "Message: " + args.ErrorMessage + " \n"; if (errorType == "ParserError") { errMsg += "File: " + args.xamlFile + " \n"; errMsg += "Line: " + args.lineNumber + " \n"; errMsg += "Position: " + args.charPosition + " \n"; } elseif (errorType == "RuntimeError") { if (args.lineNumber != 0) { errMsg += "Line: " + args.lineNumber + " \n"; errMsg += "Position: " + args.charPosition + " \n"; } errMsg += "MethodName: " + args.methodName + " \n"; } thrownew Error(errMsg); } 11