XBAP da ne ola ki?

XBAP'ın açılımı "XAML Browser Applications" şeklinde. Peki XAML neydi? Extensible Application Markup Language, yani WPF (Windows Presentation Foundation) ile beraber gelen XML yapısında görsel, vektörel içeriklerin tanımlandığı bir model. XAML aynı anda Silverlight içerisinde de görsel arayüzü modellemek, animasyonları hazırlamak için kullandığımız yapının ta kendisi. Daha önceki yazılarımda bu konulardan bahsettiğim için XAML'in veya WPF'in çok detaylarına girmeyeceğim.

WPF'de yapabildiğiniz herşeyi Browser'a taşıyın!

XBAP işte tam olarak bu işi yapıyor. WPF Browser Application olarak da tanımlayabileceğimiz bu uygulamalar tamamen internet üzerinden çalışarak istemcideki tarayıcının içerisinde sunuluyor. Hemen aşağıdaki linklerden birkaç örnek incelemenizi tavsiye ediyorum. Sonrasında konumuza devam edelim.

http://scorbs.com/workapps/woodgrove/FinanceApplication.xbap
http://ttpdownload.bl.uk/browserapp.xbap
http://scorbs.com/workapps/photobook/PhotoBook.xbap

Örnekleri incelediyseniz özellikle ilk örnekteki 3 boyutlu grafikler dikkatinizi çekmiştir. WPF'in 3D desteği olduğunu biliyoruz, bu çerçevede hazırladığımız herhangi bir WPF 3D uygulamasını hemen WFP Browser Application olarak çevirerek internette yayınlama şansımız da var. Maalesef şu an ne Silverlight ne de Flash'ın böyle bir desteği yok.

Silverlight, WPF, XBAP? Nedir bunların farkı?

Programlama açısından XBAP ile WPF arasındaki fark çok az. XBAP bir internet tarayıcı içerisinde (Sadece Internet Explorer) çalıştığı için bazı ek güvenlik sınırlamaların maruz kalıyor. WPF ise zaten bildiğimiz windows programlarından farksız. Hem XBAP hem de WPF'de tüm .NET dillerini (VB.NET, C# vs) kullanabiliyoruz. XBAP'ın avantajı bir HTTPRequest ile karşı tarafta internet tarayıcıya yüklenerek hemen çalıştırılabiliyor olması. Fakat bu noktada özellikle belirtmem gereken bir nokta var; istemci bilgisayarda .NET Framework 3.0'ın yüklü olması şart! Aksi halde uygulama çalışmayacaktır. Bunun için bir ASP.NET sitesi hazırlayarak ilk aşamada kullanıcının bilgisayarında .NET Framework 3.0'ın yüklü olup olmadığı incelenerek uygun mesajlar verilebilir ama her halükarda istemcileri Windows XP SP2 ve Vista ile sınırlamış oluyorsunuz.

Silverlight zaten apayrı bir dünya. İstemcide .NET Framework 3.0 vs yüklü olmasa da sadece Silverlight Plug-In yüklü ise Macintosh dahil tüm cihazlarda çalışacaktır. WPF ile XBAP arasındaki kadar büyük bir yakınlık olmasa da Silverlight da WPF'in ufak bir parçası aslında. Silverlight şu anki 1.0 sürümünde JavaScript, ileride ise .NET dilleri ile programlanabilecek fakat yine de kullanılan .NET sınıfları da sınırlı olacak ve XBAP gibi geniş olanaklara sahip olmayacak.

Ufak bir örnek yapalım.

Şimdi çok ufak bir WPF windows uygulaması hazırlayalım ve aynı uygulamayı WPF Browser Application yapmanın ne kadar kolay olduğunu inceleyelim. Tüm bunları yaparken Visual Studio 2008 kullanacağım. VS 2005 ile WPF Browser Application Proje Şablonu gelmiyor ve bazı işlemleri elle yapmak gerekiyor. O nedenle Visual Studio 2005 ile hiç uğraşmayarak doğrudan Visual Studio 2008 kullanacağım. Önümüzdeki bir ayı takiben tüm örneklerimi de VS 2008 ile yapıyor olacağım. Eğer hala VS 2008 Beta 2 edinmediyseniz hemen bilgisayarınıza indirmenizi tavsiye ederim. Bu konuda aşağıdaki yazımı inceleyebilirsiniz.

Visual Studio 2008 Virtual PC İmajları Yenilendi

Expression Blend 2 Beta September Preview kullanarak yeni bir WPF Application yaratarak otomatik olarak gelen uygulamanın ana penceresi üzerine bir dikdörtgen koyarak ufak bir animasyon tanımladım. Bunu takiben bir de pencereme düğme koyarak önceden hazırladığım animasyonu bu düğmeye bağladım. Window1.XAML'in kodu aşağıdaki şekilde sonlandı.

<Window

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  x:Class="Window1"

  x:Name="Window"

  Title="Window1"

  Width="300" Height="300">

  <Window.Resources>

    <Storyboard x:Key="OrnekAnimasyon">

      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">

        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>

        <SplineDoubleKeyFrame KeyTime="00:00:02" Value="91"/>

      </DoubleAnimationUsingKeyFrames>

      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>

        <SplineDoubleKeyFrame KeyTime="00:00:02" Value="93"/>

      </DoubleAnimationUsingKeyFrames>

    </Storyboard>

  </Window.Resources>

  <Window.Triggers>

    <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button">

      <BeginStoryboard Storyboard="{StaticResource OrnekAnimasyon}"/>

    </EventTrigger>

  </Window.Triggers>

  <Grid x:Name="LayoutRoot">

    <Rectangle Margin="18,34,131,128" Fill="#FFFF0000" Stroke="#FF000000" x:Name="rectangle" RenderTransformOrigin="0.5,0.5">

      <Rectangle.RenderTransform>

        <TransformGroup>

          <ScaleTransform ScaleX="1" ScaleY="1"/>

          <SkewTransform AngleX="0" AngleY="0"/>

          <RotateTransform Angle="0"/>

          <TranslateTransform X="0" Y="0"/>

        </TransformGroup>

      </Rectangle.RenderTransform>

    </Rectangle>

    <Button HorizontalAlignment="Left" Margin="18,0,0,8" VerticalAlignment="Bottom" Width="81" Height="36" Content="Button" x:Name="button"/>

  </Grid>

</Window>

Şu an hala bir windows programı üzerinde çalıştığımızı aşağıdaki basit ekran görüntüsünü inceleyerek tekrar hatırlayalım :)

Örnek WPF Uygulamamız

Şimdi biraz .NET kodu yazmak için Blend'de hazırladığım projemi Visual Studio ile açarak hazırlamış olduğum animasyonun bitişinde çalıştırılmak üzere aşağıdaki kodu yazacağım.

Imports System

Imports System.IO

Imports System.Net

Imports System.Windows

Imports System.Windows.Controls

Imports System.Windows.Data

Imports System.Windows.Media

Imports System.Windows.Media.Animation

Imports System.Windows.Navigation

Partial Public Class Window1

    Dim WithEvents Animasyonum As Storyboard

    Public Sub New()

        MyBase.New()

        Me.InitializeComponent()

        ' Insert code required on object creation below this point.

    End Sub

    Private Sub Window1_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded

        Animasyonum = CType(Me.Resources.Item("OrnekAnimasyon"), Storyboard)

    End Sub

    Private Sub Animasyon_Bitti(ByVal sender As Object, ByVal e As System.EventArgs) Handles Animasyonum.Completed

        Microsoft.VisualBasic.MsgBox("Bitti")

    End Sub

End Class

Sıra geldi uygulamamızı aynen bir WPF Browser Application'a çevirmeye. Bunun için ilk olarak Visual Studio 2008 içerisine yeni bir WPF Browser Application yaratmamız gerekiyor.

Visual Studio 2008 ile WPF Browser Application yaratıyoruz.

Projemizi yarattıktan sonra ilk olarak XAML kodlarımızı kopyalayacağız. Visual Studio ile WPF Browser Application'ımızı yarattıktan sonra bizim için otomatik olarak boş bir XAML Page de yaratılmış oluyor. Page1.XAML olarak geçen dosyanın içeriğine gelin hızlıca bir göz atalım.

<Page x:Class="Page1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Page1">

  <Grid>

  </Grid>

</Page>

Hmm... Peki bunun herhangi bir WPF uygulamanın bir penceresinden farkı nedir? Onun da içerisinde Grid yok muydu? Evet, aynen öyle. Aradaki fark WPF uygulamalarda Window'lar varken XAML Browser Application'larda Page'lerin olması. Yani sadece XML dosyasında kök element değişiyor. O nedenle WPF windows uygulamamızda Window tagları arasında yer alan tüm XAML kodunu kopyalayarak burada Page taglarının arasına koymamız gerekiyor. Zaten bu nedenle bir önceki örnekteki XAML kodunda Window taglarını koyu olarak yazmıştım :) Bakalım tüm bu işlemleri yapınca WPF Browser Application'ımızın Page1.XAML dosyası ne hale geliyor.

<Page x:Class="Page1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Page1">

  <Page.Resources>

    <Storyboard x:Key="OrnekAnimasyon">

      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">

        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>

        <SplineDoubleKeyFrame KeyTime="00:00:02" Value="91"/>

      </DoubleAnimationUsingKeyFrames>

      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>

        <SplineDoubleKeyFrame KeyTime="00:00:02" Value="93"/>

      </DoubleAnimationUsingKeyFrames>

    </Storyboard>

  </Page.Resources>

  <Page.Triggers>

    <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button">

      <BeginStoryboard Storyboard="{StaticResource OrnekAnimasyon}"/>

    </EventTrigger>

  </Page.Triggers>

  <Grid x:Name="LayoutRoot">

    <Rectangle Margin="18,34,131,128" Fill="#FFFF0000" Stroke="#FF000000" x:Name="rectangle" RenderTransformOrigin="0.5,0.5">

      <Rectangle.RenderTransform>

        <TransformGroup>

          <ScaleTransform ScaleX="1" ScaleY="1"/>

          <SkewTransform AngleX="0" AngleY="0"/>

          <RotateTransform Angle="0"/>

          <TranslateTransform X="0" Y="0"/>

        </TransformGroup>

      </Rectangle.RenderTransform>

    </Rectangle>

    <Button HorizontalAlignment="Left" Margin="18,0,0,8" VerticalAlignment="Bottom" Width="81" Height="36" Content="Button" x:Name="button"/>

  </Grid>

</Page>

Yukarıdaki kodu incelerseniz özellikle kalın olarak yazılmış 4 satır kod göreceksiniz. Bunlar sayfamızdaki Trigger (Tetikleyiciler) ve Ressources (Kaynaklar) ile ilgili tanımlamaların bulunduğu bölümler. Bu bölümlerin tag isimlerinde WPF uygulamamızda "Window" yazıyordu, onları "Page" olarak değiştirmemiz gerekti, çünkü artık bir Window değil Page içerisinde çalışıyoruz.

Sıra geldi VB ile yazdığımız kodları da WPF Browser Application tarafına taşımaya. Gelin yine Page1.XAML'in boş VB sayfasına göz atalım.

Class Page1

End Class

Epey basit değil mi? :) Eh gelin o zaman kodlarımızı kopyalayalım.

Imports System.Windows.Media.Animation

Class Page1

    Dim WithEvents Animasyonum As Storyboard

    Private Sub Window1_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded

        Animasyonum = CType(Me.Resources.Item("OrnekAnimasyon"), Storyboard)

    End Sub

    Private Sub Animasyon_Bitti(ByVal sender As Object, ByVal e As System.EventArgs) Handles Animasyonum.Completed

        Microsoft.VisualBasic.MsgBox("Bitti")

    End Sub

End Class

Aynı kodları bire bir "copy-past" :) Hiçbir değişiklik gerekmeden uygulamamızı artık F5 tuşu ile Internet Explorer içerisinde çalıştırabiliriz.

XBAP - WPF Browser Application iş başında.

Hızlı ilerlemek ve konsepti gösterebilmek adına yine çok basit bir örnek olduğunun farkındayım fakat hayal gücünüzü kullanmak tabi ki size kalmış. WPF içerisinde yapılabilen (neredeyse) herşeyi WPF Browser Application'lar ile yapmak da mümkün.

Hepinize kolay gelsin.