XBAP - WPF Browser Application

0 dakikada yazıldı

16281 defa okundu

Düzenle

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
Ö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.
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.
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.