Article etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Article etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Cuma, Mayıs 22, 2009

Asp.Net MVC Framework - Controller ve Action Kavramı

Asp.Net MVC Framework web projesi şablonunu incelerken başlattığımız yazı dizimize Controller katmanına daha detaylı değinerek devam ediyor olacağız.

MVC Framework ‘te en önemli parçalarından biride Controller ‘dır. MVC patterninde son kullanıcılar tarafında yapılan istekler doğrultusunda route map yardımıyla gerekli controller sınıfına yönlendirerek işlemleri gerçekleştirmeye başlatır. Controller üzerinde modelle ilişkili olarak veri tabanı işlemleri, yönlendirme işlemleri, hesap işlemleri gibi bir web sitesi için en temel işlemlerin yapıldığı katmandır.

Controller ‘ı Anlamak

Asp.Net MVC ‘ de kullanıcılar tarafında gelen istekleri alan işleyen ve geri ileten katman olarak tanımlayabiliriz. İnternet tarayıcısında parçalı olarak her controller için ayrı bir istek yapılır. Ufak bir örnek adres üzerinden değinmek gerekirse;

http://localhost/Urun/Index/7 başarılı bir gösterim olabilir.

Controller adı adres çubuğunda Urun olarak geçmektedir. Bu Controllers\ klasörünün alt dizininde yer alan UrunController.cs sınıfından gelmektedir. Bu sınıf gelen isteklere karşı gerekli sonuçları döndürmek için kullanılmaktadır. Controller ların bir diğer özelliği ise yapılan bir işlem sonrasında işlenecek daha parçalar var ise başka bir controller sınıfına aktarmaktadır.

Basit olarak UrunController.cs sınıfına göz atalım;

Controller\UrunController.cs
using System.Web.Mvc;
using System.Web.Mvc.Ajax;

namespace MvcApplication1.Controllers
{
    public class UrunController : Controller
    {
         //
         // GET: /Urun/

         public ActionResult Index()
         {
              // Add action logic here
              return View();
          }

     }
}

Harici olarak oluşturulan controller sınıfları System.Web.Mvc.Controller sınıfı miraslanarak oluşturulmaktadır. Ayrıca controller sınıflarında oluşturulan metotlarda en çok dikkatimizi çeken Action kullanımıdır.

Action ‘ı Anlamak

Controller sınıflarını daha da işlevsel kılan Action kullanımıdır. Son kullanıcıdan gelen istek doğrultusunda hangi işlemi yapacağını belirtilen controller sınıfında yer alan metodlar yani action ‘lar yapmaktadır.

http://localhost/Urun/Index/7 adres çubuğunda Urun kontrollerken Index/7 belirtilen meto da 7 parametresine göre işlem yapması anlamına gelmektedir.

Controller ‘ı incelerken vermiş olduğumuz kod bloğunu örnek olarak kullanırsak, UrunController sınıfında yer alan Index() metodunu action ‘dır. Action public metot olmalıdır. C# metodları varsayılan olarak private oluşturulmaktadır. Bu sebepten ötürü action metotlarının public olarak belirtilmesi gerekmektedir.

Action metotlarının aşırı yüklenmesi kabul gören bir kullanım biçimi değildir. Action özellikle daha özelleştirilmiş kullanıma odaklandığı için benzer metot isimleri ile birden fazla işlem yapılması çalışma zamanında sorunlara sebep olabilmektedir.

Action Result ‘ı Anlamak

Controller da kullanılan action lar action result ile geri dönüşleri vardır.

1. ViewResult: HTML ve Markup sunar (Represent).
2. EmptyResult: Sunumu sonlandırır.
3. RedirectResult: Sunulan linki yeni bir adrese yönlendirmeye yarar
4. JsonResult: Java Script Object ‘leri Ajax ile birlikte kullanılabilir bir duruma getirir.
5. JavaScriptResult: Java Script leri sayfada kullanılabilir biçimde sunar.
6. ContentResult: Metin içeriği sunar.
7. FileContentResult: İndirilebilir dosyaları sunar (Binary içerik ile).
8. FilePathResult: İndirilebilir dosyaları sunar (Dosya yolu ile).
9. FileStreamResult: İndirilebilir dosyaları sunar (Stream dosyalar için).
View result kullanılarak hazırlanmış bir metoda göz atalım.

Controller\KitapController.cs
using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    [HandleError]
    public class KitapController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

Action sonucunda ViewResult ile HTML view ‘e dönecektir. Index() metodunda view adına göre geri dönüşü yapacaktır.

ViewResult() ve View() metotları Controller sınıfında türetilerek oluşturulmuştur. Controller ‘ın temel sınıfları;

1. View: Action sonucunda ViewResult ‘a yönlendirilir.
2. Redirect: Action sonucunda RedirectResult ‘a yönlendirilir.
3. RedirectToAction: Action sonucundan RedirectToRouteResult ‘a yönlendirilir (action yardımıyla yönlendirilir).
4. RedirectToRoute: Action sonucunda RedirectToRouteResult ‘a yönlendirilir (route yardımıyla yönlendirilir).
5. Json: JsonResult döndürür.
6. JavaScriptResult: JavaScriptResult döndürür.
7. Content: Action işlemi sonucunda ActionResult döndürür.

İnternet tarayıcılarında Controller üzerinde action çağırıldığında View() metodu kullanılmaktadır. Kullanılan bir diğer Action metodu ise RedirectToAction ‘dır. Bu metot yapılan işlemler doğrultusunda geri dönülmesi gerekiyorsa kullanılmaktadır.

Eğer ki Details metodunda ki id parametresine gelen değer HasValue ‘dan farklıysa bizim belirttiğimiz bir view HTML sayfaya yönlendirilmesini talep eden bir controller sınıfı hazırlayalım.

Controller\KullaniciController.cs
using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    [HandleError]
    public class KullaniciController : Controller
    {
        public ActionResult Details(int? id)
        {
              if (!id.HasValue)
                   return RedirectToAction("Index");
              return View();
        }

        public ActionResult Index()
        {
            return View();
        }
    }
}

Şimdi vereceğimiz örnek ise içeriklerin gösterimi ile ilgili. Index metodunda ContentResult metodunu kullanarak belirtilen içerisi göstermektedir.

Controller\DurumController.cs
using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    [HandleError]
    public class DurumController : Controller
    {
        public ActionResult Index()
        {
            return Content("Merhaba Dunya!!!");
        }
    }
}

İçeriği ContentResult metodu da bizim girebilmemiz dışında oluşturulan metotların geri dönüş değerlerine göre de otomatik olarak belirtilebilmesi mümkündür.

Controller\IsController.cs
using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    [HandleError]
    public class IsController : Controller
    {
        public DateTime Index()
        {
             return DateTime.Now;
        }
    }
}

Index() metodunda action olarak DateTime nesnesini geri dönüş değeri almaktadır. İnternet tarayıcısında DateTime ‘ın geri dönüş değeri metin olarak View sayfada gösterilmektedir.

Controller Oluşturuyoruz…

Asp.Net MVC Framework ‘te Controllerları nerelerden nasıl ekleyebileceğimize ve detaylarını inceleyerek yazımıza devam ediyoruz. Bu işlemlerimizi Visual Studio geliştirme ortamı üzerinde örneklerimizi yapıyor olacağız.

Menü üzerinde Projeye Menü Eklenmesi

MVC Framework web projesi şablonu ile oluşturulmuş proje üzerinde yeni bir controller sınıfı eklemek için Controllers klasörünün üzerinde fare ile sağ tıklama ile Add->New -> Controller yolunu izleyerek ekleyebilmemiz mümkündür.



Sonrasında karşımıza controllerin adını gireceğimiz bir ekran çıkmaktadır.



Controller\PersonelController.cs
using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    [HandleError]
    public class PersonelController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

Action Metotunun İskeleti

Biraz önce anlattığımız gibi kolay bir şekilde controller sınıfı ekleyebilmemiz mümkündür. Anlattığımız temel işlemlerin dışında bir de Create, Update ve Details Action metotlarını da basitçe ekleyebilmemiz mümkündür. Sadece yapmamız gereken Controller adını verdiğimiz ekranda senaryolarında oluşmasını isteyip istemediğimizi soran bölüme onay vermek olacaktır.



Seçeneği onaylayığ UrunController sınıfını ekle dediğimizde aşağıdaki sınıfı bize Visual Studio otomatik olarak oluşturmaktadır.

Controller\UrunController.cs
using System.Web.Mvc;
using System.Web.Mvc.Ajax;

namespace MvcApplication1.Controllers
{
    public class UrunController : Controller
    {
        //
        // GET: /Urun/

        public ActionResult Index()
        {
            return View();
         }

         //
         // GET: /Urun/Details/5

         public ActionResult Details(int id)
         {
             return View();
         }

         //
         // GET: /Urun/Create

         public ActionResult Create()
         {
             return View();
         }

         //
         // POST: /Urun/Create

         [AcceptVerbs(HttpVerbs.Post)]
         public ActionResult Create(FormCollection collection)
         {
             try
             {
                   // TODO: Add insert logic here

                  return RedirectToAction("Index");
              }
              catch
              {
                  return View();
              }
          }

          //
          // GET: /Urun/Edit/5

          public ActionResult Edit(int id)
          {
               return View();
           }

           //
           // POST: /Urun/Edit/5

          [AcceptVerbs(HttpVerbs.Post)]
          public ActionResult Edit(int id, FormCollection collection)
          {
              try
              {
                   // TODO: Add update logic here

                   return RedirectToAction("Index");
              }
              catch
              {
                     return View();
               }
          }
     }
}

Oluşturulan sınıf yardımıyla Index, Details, Update, Edit gibi temel veri tabanı işlemleri daha hızlı hazırlayabilmemize olanak tanır.

Controller Sınıfı Oluşturmak

Şu ana kadar sürekli olarak ya daha önceden oluşturulmuş olan controller sınıflarını inceledik ya da Visual Studio yardımıyla kolayca oluşturduk. Şimdi ise boş bir sınıf oluşturarak kendimiz bir controller sınıfı nasıl oluşturabileceğimizi incelemeye çalışalım.

Visual Studio ‘da controllers sınıfına sınıfımızı el ile ekliyoruz. Şimdi yapacağımız adımlara bir göz atalım.

1. Controllers klasörüne bir sınıf ekliyoruz.
2. Eklemiz olduğumuz sınıfın adı muhakkak Controller ile bitmelidir.
3. Sınıfı düzenlerken System.Web.Mvc.Controller ile miraslaşması gerekmektedir.

Bu işlemleri tamamladığımızda kendimiz sorunsuzca bir controller sınıfı oluşturmuş oluruz.



Controller\YaziController.cs
using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    [HandleError]
    public class YaziController : Controller
    {
        public string Index()
        {
            return "Merhaba Dunya!!!";
        }
    }
}

Index() metodunu internet tarayıcısı üzerinde çağırmak istediğimizde http://localhost:40700/yazi adresini belirtmeniz yeterli olacaktır. Bize Merhaba Dünya!!! Sonucunu döndürecektir.

Not: localhost:40700 ‘deki 40700 port numarasıdır. Bu numara her yeni bir Asp.Net Development Server oluşturulduğunda birbirinden farklı bir biçimde oluşturulabilir. Eğer değişmesini istemiyorsanız projenin özelliklerinden statik olmasını sağlar ya da web sayfanızı localhost altına alıp hiç port numarasına gerek kalmadan kullanabilirsiniz.

Action Oluşturuyoruz…

Yazımız boyunca controller sınıflarının ne işe yaradığını detaylı bir şekilde öğrendik. Şimdi ise yeni bir controller action nasıl oluşturulur, özellikleri nelerdir incelmeye çalışıyor olacağız.

Controller sınıfları içerisinden gelen istekler doğrultusunda işlemler action metotları ile gerçekleştirilir. Şimdi action metotlarının nasıl oluşturulabildiğini incelemeye çalışalım.

Controller Action Ekliyoruz…

HomeController sınıfının içerisine Index() action metodunun dışında birde MerhabaDe() action metodunu oluşturuyoruz. Şimdi bu değişikliği hemen yapalım. J

Controller\HomeController.cs
using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public string MerhabaDe()
        {
            return "Merhaba";
        }
    }
}

Action metot oluştururken dikkat etmemiz gereken kriterler aşağıdaki gibidir.

• Bu metot public(genel) olmalıdır .
• Metot statik olamaz.
• Metodun bir uzantısı olamaz.
• Metoda ilişkin bir yapıcı, alıcı ya da verici olamaz
• Metotta açık genel türleri olamaz.
• Bu metot controller temel alınarak hazırlanmış bir metot değildir.
• Metot parametreleri Ref veya out içeremez.

Controller action metotları geri dönüş değerleri olarak string, DateTime gibi tipleri alabilirler. Asp.Net MVC Framework string olmayan bir action metot parametresini tarayıcı tarafında string değer gönderildiği durumlarda dönüştürme işlemini yapamaz ve hata mesajı verir.

Action metotlarda kullanılacak parametrelerde boş değer de gelme olasılığını düşünerek tipler nullable olarak belirlenir.

Genel bir action metodu oluşturalım. Fakat bu oluşturma işleminde bu metoda action değilsin diyerek bir de çelişkiye sebep olduralım. Bu durumda controller ı ve action adının çağırdığımız durumda bize nasıl bir tepki vereceğine hep bir birlikte bir göz atalım.

Controller\SirketController.cs
using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    [NoAction]
    public class SirketController : Controller
    {
        public string SirketSirri()
        {
            return "Bu bilgi şirket sırrıdır.";
        }
    }
}

İnternet tarayıcımızda Sirket/SirketSirri yazarak action metodumuzu çağırdığımızda nasıl bir tepki ile karşılaşacağımıza göz atalım.

Gördüğünüz üzere Sirket controlleri ve SirketSirri() metodu olduğu halde bize isteğiniz bulunamamaktadır gibi hata mesajı vermektedir. Bunun sebebi Action metodumuzun başına sen action değilsin dememizden kaynaklanmaktadır.

Bir yazımızın daha sonuna geldik. Bu yazımızı da Controller sınıflarını ve action metotlarını detaylı bir biçimde incelemeye çalıştık.

Herkese mutlu günler diliyorum.

Perşembe, Mart 19, 2009

WPF AutoComplete Folder TextBox

Introduction

This article demos how to create a TextBox that can suggest items at runtime based on input, in this case, disk drive folders.

Background

There is a number of AutoComplete TextBox implementation around but some don't support data binding, others don't support runtime items polling and so on. After lot of research and Googling, I decided to write my own instead of continue looking for one.

My Design process

My first design is based on ComboBox, I copy the default template and remove the drop down button and develop from that, it doesnt work because combobox have it's own autocomplete mechanism which will change the selection of textbox when Items is changed, it's not designed for Items that change at realtime.

So the second design is based on TextBox, I create the following style :

<Style x:Key="autoCompleteTextBox" TargetType="{x:Type TextBox}"><Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TextBoxBase}"> <Grid x:Name="root"> <ScrollViewer Margin="0" x:Name="PART_ContentHost"/> <Popup x:Name="PART_Popup" AllowsTransparency="true"

Placement="Bottom" IsOpen="False" PopupAnimation="{DynamicResource

{x:Static SystemParameters.ComboBoxPopupAnimationKey}}"> <ListBox x:Name="PART_ItemList" SnapsToDevicePixels

="{TemplateBinding SnapsToDevicePixels}" VerticalContentAlignment="Stretch" HorizontalContentAlignment

="Stretch" KeyboardNavigation.DirectionalNavigation="Contained" /> </Popup> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>

and then create a custom control and hook the style to it :

<TextBox x:Class="QuickZip.Controls.SelectFolderTextBox" Style="{DynamicResource autoCompleteTextBox}" >...
</TextBox>

PART_ContentHost is actually a control that TextBoxView, it is required for TextBox template
(with that name), or the control won't function, the another two part (PART_Popup and PART_ItemList)
is defined so I can use them in the custom control :

public partial class SelectFolderTextBox : TextBox

{

Popup Popup { get { return this.Template.FindName("PART_Popup", this) as Popup; } }

ListBox ItemList { get { return this.Template.FindName("PART_ItemList", this) as ListBox; } }

ScrollViewer Host { get { return this.Template.FindName("PART_ContentHost", this) as ScrollViewer; } }

UIElement TextBoxView { get { foreach (object o in LogicalTreeHelper.GetChildren(Host)) return o as UIElement; return null; } }

}

AutoCompleteTextBox

If text is changed, the suggestion item list is updated as well :

protected override void OnTextChanged(TextChangedEventArgs e)

{

if (_loaded)

{

try

{

if (lastPath != Path.GetDirectoryName(this.Text))

{

lastPath = Path.GetDirectoryName(this.Text);

string[] paths = Lookup(this.Text);

ItemList.Items.Clear();

foreach (string path in paths)

if (!(String.Equals(path, this.Text, StringComparison.CurrentCultureIgnoreCase)))

ItemList.Items.Add(path);

}

Popup.IsOpen = true;

//I added a Filter so Directory polling is only called once per directory, thus improve speed

ItemList.Items.Filter = p =>

{

string path = p as string;

return path.StartsWith(this.Text, StringComparison.CurrentCultureIgnoreCase) &&

!(String.Equals(path, this.Text, StringComparison.CurrentCultureIgnoreCase));

};

}

catch

{

}

}

}

A number of handlers is then defined :

public override void OnApplyTemplate()

{

base.OnApplyTemplate();

_loaded = true;

this.KeyDown += new KeyEventHandler(AutoCompleteTextBox_KeyDown);

this.PreviewKeyDown += new KeyEventHandler(AutoCompleteTextBox_PreviewKeyDown);

ItemList.PreviewMouseDown += new MouseButtonEventHandler(ItemList_PreviewMouseDown);

ItemList.KeyDown += new KeyEventHandler(ItemList_KeyDown);

}

AutoCompleteTextBox_PreviewKeyDown :

if user press down button, the textbox will move focus to the Listbox, so the user can choose an item from it, this is placed in PreviewKeyDown instead of KeyDown because TextBox's mechanism will consume the event before it reach KeyDown if the button is down button.

void AutoCompleteTextBox_PreviewKeyDown(object sender, KeyEventArgs e)

{

if (e.Key == Key.Down && ItemList.Items.Count > 0 && !(e.OriginalSource is ListBoxItem))

{

ItemList.Focus();

ItemList.SelectedIndex = 0;

ListBoxItem lbi = ItemList.ItemContainerGenerator.ContainerFromIndex(ItemList.SelectedIndex) as ListBoxItem;

lbi.Focus();

e.Handled = true;

}

}

AutoCompleteTextBox_KeyDown

if user press <enter> button, the textbox will close the popup and update the binding.

void AutoCompleteTextBox_KeyDown(object sender, KeyEventArgs e)

{

if (e.Key == Key.Enter)

{

Popup.IsOpen = false;

updateSource();

}

}

ItemList_PreviewMouseDown and ItemList_PreviewMouseDown

if user press <enter> button (or select by mouse), the text textbox will be updated with ListBox.SelectedValue, and then update the binding.

void ItemList_KeyDown(object sender, KeyEventArgs e)

{

if (e.OriginalSource is ListBoxItem)

{

ListBoxItem tb = e.OriginalSource as ListBoxItem;

Text = (tb.Content as string);

if (e.Key == Key.Enter)

{

Popup.IsOpen = false;

updateSource();

}

}

}

void ItemList_PreviewMouseDown(object sender, MouseButtonEventArgs e)

{

if (e.LeftButton == MouseButtonState.Pressed)

{

{

TextBlock tb = e.OriginalSource as TextBlock;

if (tb != null)

{

Text = tb.Text;

updateSource();

Popup.IsOpen = false;

e.Handled = true;

}

}

}

updateSource is required because I bound text's UpdateSourceTrigger as Explicit, if updateSource is not called it wont update the text :

void updateSource()

{

if (this.GetBindingExpression(TextBox.TextProperty) != null)

this.GetBindingExpression(TextBox.TextProperty).UpdateSource();

}

The component is working now, but if you want to add validation as well, read below :

To support validation, a Validation Rule is written :

If the path is not found or an exception raised when looking up, it will return ValidationResult false, the error will be

accessed by using the attached properties Validation.Errors and Validation.HasError.

public class DirectoryExistsRule : ValidationRule

{

public static DirectoryExistsRule Instance = new DirectoryExistsRule();

public override ValidationResult Validate(object value, System.Globalization.CultureInfo cultureInfo)

{

try

{

if (!(value is string))

return new ValidationResult(false, "InvalidPath");

if (!Directory.Exists((string)value))

return new ValidationResult(false, "Path Not Found");

}

catch (Exception ex)

{

return new ValidationResult(false, "Invalid Path");

}

return new ValidationResult(true, null);

}

}

and change the binding : (to use the created Validation rule, noted that UpdateSourceTrigger is Explicit. )

<local:SelectFolderTextBox x:Name="stb" DockPanel.Dock="Bottom" Margin="4,0,0,0">

<local:SelectFolderTextBox.Text>

<Binding Path="Text" UpdateSourceTrigger="Explicit" >

<Binding.ValidationRules>

<t:DirectoryExistsRule />

</Binding.ValidationRules>

</Binding>

</local:SelectFolderTextBox.Text>

</local:SelectFolderTextBox>

Now the textbox show a red border if directory not exists. As a red border isnt clear enough, we can change the behavior :

to disable the default red border:

<Style x:Key="autoCompleteTextBox" TargetType="{x:Type TextBox}">

<...>

<Setter Property="Validation.ErrorTemplate">

<Setter.Value>

<ControlTemplate >

<AdornedElementPlaceholder />

<!-- The TextBox Element -->

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

then change the control template, which will show the dockWarning when Validation.HasError :

<ControlTemplate TargetType="{x:Type TextBoxBase}">

<Border Name="Border" CornerRadius="2" Background="{StaticResource WindowBackgroundBrush}"

BorderBrush="{StaticResource SolidBorderBrush}" BorderThickness="1" Padding="1" >

<Grid x:Name="root">

<...>

<DockPanel x:Name="dockWarning" Visibility="Collapsed" LastChildFill="False" >

<Border DockPanel.Dock="Right" BorderBrush="Red" Background="Red" BorderThickness="2" CornerRadius="2,2,0,0">

<TextBlock x:Name="txtWarning" DockPanel.Dock="Right" Text="{TemplateBinding ToolTip}" VerticalAlignment="Top"

Background="Red" Foreground="White" FontSize="10" />

<Border.RenderTransform>

<TranslateTransform X="2" Y="{Binding ElementName=dockWarning, Path=ActualHeight,

Converter={x:Static t:InvertSignConverter.Instance}}"/>

<!--TranslateTransform move the border to upper right corner, outside the TextBox -->

<!--InvertSignConverter is a IValueConverter that change + to -, - to + -->

</Border.RenderTransform>

</Border>

</DockPanel>

</Grid>

</Border>

<ControlTemplate.Triggers>

<MultiTrigger>

<MultiTrigger.Conditions>

<Condition Property="Validation.HasError" Value="true" />

<Condition SourceName="PART_Popup" Property="IsOpen" Value="False" />

</MultiTrigger.Conditions>

<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}"/>

<Setter TargetName="dockWarning" Property="Visibility" Value="Visible" />

<Setter TargetName="Border" Property="BorderThickness" Value="2" />

<Setter TargetName="Border" Property="Padding" Value="0" />

<Setter TargetName="Border" Property="BorderBrush" Value="Red" />

</MultiTrigger>

</ControlTemplate.Triggers>

</ControlTemplate>

Cumartesi, Ağustos 09, 2008

Sharepoint için Silverlight --> Blueprint

Çalıştığım şirketteki pozisyonum gereği belli bir süredir Sharepoint, WSS, MOSS gibi teknloljileri inceliyorum ve uygulama geliştiriyorum. Bu araştırmalarım esnasında Silverlight ile Sharepoint 'in entegreli olarak çalışabildiğine ve buna da Blueprint dendiğini gördüm.
Silverlight uygulamalarını sharepoint üzerinde çalıştırmak istediğimizde bizden hangi versiyon ile çalışmak istediğimiz hangi kod dosyası ile geliştirme yapmak istediğimiz gibi işlemleri yapmamızı istemektedir.
Kullanmak isteyenler ilk olarak bir Virtual PC indirmelidir. Daha sonra Microsoft tarafında 30 günlük deneme sürümü olarak hazırlanan ve içerisinde MOSS ve WSS kurulu olan Windows Server 2003 'ü indirmeleri gerekmektedir. Daha sonrasında ise yapacağınız uygulamalar geliştirmek olacaktır.
İyi çalışmalar...
Not: Blueprint ile ilgili daha ayrıntılı bilgi için İngilizce olarak yazılmış olan yazıda yer alan linklerden yararlanabilirsiniz...

Cumartesi, Temmuz 19, 2008

Silverlight 2.0 - Kontrollerin Özelleştirilmesi, VSM ve Yenilikleri

Microsoft, Silverlight ‘ı gün geçtikçe benzersiz bir yapı haline dönüştürüyor. Günler geçtikçe kontroller, aspx desteği derken Asp.Net ‘te pek alışık olmadığımız bir durum olan kontrollerin özelleştirmesi özelliği Beta2 sürümü ile eklenmiş olduğunu gözlemleyebiliyoruz. Peki, Silverlight bugüne gelene kadar ne tür gelişmeler gösterdi.

Alpha1 sürümünde JavaScript ve HTML ile interaktif web uygulamaları geliştirebiliyorduk.
Alpha2 sürümü ile yukarıdakilere ek olarak XAML ‘de eklendi.
Beta1 sürümünde WPF ‘te kullanılan kütüphane kısmen geçirilmeye başlandı.
Silverlight 1.0 sürümünde yukarıda bahsettiğimiz deneme işlemleri uygulanabilir düzeye getirildi.
Silverlight 1.1 sürümünde buton gibi temel kontroller Silverlight bünyesine eklendi.
Silverlight 2.0 Beta1 ile web servis işlemlerinden veri bağlamaya kadar bir çok özellik eklendi fakat en çok dikkat çekeni kullanılabilir Silverlight kontrolü sayısı arttırıldı.
Silverlight 2.0 Beta2 sürümü ile ise Beta1 sürümünden eklenen bir çok özellik geliştirildi. Asya dilleri eklendi. En çok göze çarpan özelliği ise Expression Blend ürünü ile Silverlight kontrollerinin düzenlenebilmesi olmuştur.

Silverlight ‘ın günümüze kadar geçirmiş olduğu gelişim temel olarak bu şekildedir. Tabii saydığımız özelliklere ek olarak video streaming özelliği en popüler olanıdır. Videoların gösterilme süreleri o kadar iyileşti ki web üzerinden canlı yayınlar yapılabildi ve HD videoların fragmanları sorunsuz bir biçimde kullanıcılara izletilebildi.

Eski sürümlerde neler yapabildiğimiz ile ilgili ayrıntılı bilgilere ulaşmak isterseniz daha önceden yayınlanmış olan makaleleri okumanızı öneririz.

Silverlight 2 Beta2 ile uygulama geliştirebilmeniz için http://www.microsoft.com/downloads/results.aspx?pocId=&freetext=silverlight%202%20beta2&DisplayLang=en adresinden gerekli bileşenleri bilgisayarınıza indirdikten sonra kurarak kullanmaya başlayabilirsiniz. Ayrıca yazımızda kontrollerin özelleştirilmesi işlemleri Expression Blend 2.5 June Preview ile yapacağız. Bu programı kullanabilmeniz için gerekli link ise http://www.microsoft.com/downloads/results.aspx?pocId=&freetext=expression%20blend%202.5%20june%20preview&DisplayLang=en adresinden yararlanabilirsiniz. Gerekli programları edindiğimize göre artık yazımızın içeriğini incelemeye başlayabiliriz.

KULLANICI KONTROLLERİ
Silverlight ilk sürümlerinde WPF ‘e yetişmesi uzun yıllar alacağı konusunda söylentiler varken şu anda WPF ‘te bile olmayan kontrolleri bünyesinde barındırmaktadır. Özellikle DataGrid kontrolü WPF ‘te olmadığı halde Silverlight 2.0 Beta2 ‘de yerini almıştır.



Bu ve diğer kontrollere ek olarak TabPanel kontrolü de Beta2 sürümü ile bizlerin kullanımına sunulmuştur. Şu an itibari ile Silverlight2 Beta2 sürümünde 30 ‘ün üzerinde kontrol bulunmaktadır. Geliştiricileri tarafından yapılan açıklamada ise 2.0 sürümü tamamlandığı zaman 100 ‘ün üzerinde kontrolün bizlere sunulacağı belirtilmiştir.

Kontrollerin Özelleştirilmesi
WPF ve Silverlight ile son kullanıcılar için hazırlanmış olan kontroller Expression Blend yardımı ile özelleştirilebilmektedir. Özelleştirdiğimiz kontrolleri daha sonrasında geliştirmiş olduğumuz uygulamada XAML kod tarafına ekleyerek kullanılabilir düzeye getirilebilmesi mümkündür.

Şimdi Expression Blend yardımı ile kontrolleri nasıl özelleştirebileceğimize göz atalım. Bu işlemi yaparken ilk olarak slider kontrolünden yararlanacağız.

İlk olarak Expression Blend 2.5 June Preview ’den Silverlight 2 projesi oluşturuyoruz. Sonrasında ise uygulama ekranımıza bir tane slider kontrolü ekleyerek işlemlerimize başlıyoruz.



Slider kontrollerini ekledikten sonra şimdi düzenleme işlemini gözlemleyeceğiz. İlk olarak yapmamız gereken kontrolün üzerinde fare ile sağa tıkladıktan sonra çıkan menüden Edit Control Part ‘ı seçeceğiz. Sonrasında çıkan seçenekten Edit a Copy seçeneğine tıklayarak işlemimizi yapmaya devam edeceğiz.



Bu seçeneği seçtiğimizde karşımıza aşağıdaki gibi ekran gelecektir.



Karşımıza çıkan ekranda Name(Key) yazan bölüme istediğimiz ismi verdikten sonra tamam diyerek slider kontrolünü özelleştirebilmemiz mümkündür. Bu verdiğimiz isim app.xaml ‘in içerisinde tutulur ve daha sonradan yapacak olduğumuz işlemleri bu isim altında tutar ve kullanacağımız zaman arka planda bu name ‘i kullanacaktır.

Kontrolü özelleştirebilmemiz için sol tarafta yer alan menüde Template yazan bölümden yararlanacağız. Bu tasarı bölümü bizlere hazırlanan kontrolün hangi nesnelerin toplanması sonucunda oluşturulduğunu göstermektedir. Tasarı bölümünde yer alan ilk dörtgen bölümünde çizginin kalınlığı uzunluğu ve kaydırma butonunun yapısı ile ilgili özellikler tutulmaktadır. Diğerinden ise dikey özellikler yer almaktadır.



Temel olarak bir değişiklik yapmak gerekirse HorizontalThumb ‘ı seçerek uygulamamın çalışma ekranında kaydırma çubuğunun kalınlığını değiştiriyoruz. Sonucunda ise ekranımızda oluşan görüntü aşağıdaki gibi olur.



Gördüğünüz gibi oldukça kolay bir biçimde kontrolleri özelleştirebilmemiz mümkündür. Bu yaptığımız işlemleri uygulayarak diğer bütün kontrolleri de özelleştirebilmemiz mümkündür.

Visual State Manager (VSM) Yapısı
Silverlight ve WPF ‘te hazırlamış olduğumuz kontrollere standart kontrollerden farklı olması için özel işlemler uygulamak isteriz. Örneğin, fare ile kontrolün üzerinde gelindiğinde tıklandığında gibi işlemler sonucunda farklılıkların olmasını isteyebiliriz. Gerçekleştirebilmek için ise yapmamız gereken XAML kod tarafında oldukça fazla kod oluşturan animasyon işlemlerini kullanırız. Arka planda oluşturulan fazla satır kodlar ise kontrol kullanılacağı sırada çağırılacağı için web uygulamalarında yani Silverlight uygulamalarında yavaş çalışmasına sebep olabilir. Web uygulamalarında yaşanabilecek sorunları engellemek için farklı bir çözüm üretilmesi gerekiyordu ve bunun için Visual State Manager (VSM) hazırlanılmış ve biz geliştiricilere sunulmuştur.

VSM, standart olarak hazırlanmış olan kontrolleri özelleştirme işlemimiz ile birlikte fare ile ilgili standart özellikleri de yapılandırabilmemize olanak tanımaktadır. Bizlere kazandırdığı en büyük avantaj ise daha önceden hazırlanmış olan bir animasyon işleminin yeniden düzenlenebilmesi oldukça uğraştırırken VSM kullanarak hazırlanmış olanlar dinamik olarak düzenlenebilmesi mümkündür.

Şimdi VSM ‘i örnek üzerinden incelemeye çalışalım.

Expression Blend ile Silverlight 2 uygulaması açtıktan sonra çalışma ekranımıza bir adet buton sürükleyip bırakıyoruz.



Eklemiş olduğumuz butonun üzerine sağ tıklama yaparak karşımıza çıkan menüden Edit Control Part ‘ı seçiyoruz. Karşımıza çıkan menüden Edit a Copy ‘ı seçerek işlemimizi yapmaya devam ediyoruz.



Edit a Copy seçeneğini tıkladığımız zaman bize aşağıdaki gibi bir ekran çıkmaktadır.



Kontrollerin özelleştirilmesi konusunda da değindiğimiz gibi vermiş olduğumuz name app.xaml içerisinde tutulacak ve kontrol üzerinde yapacak olduğumuz işlemlerin kullanılması için gerekli olan name çağırılması işleminin yapılmasını sağlıyoruz.

Bu işlem sonrasında asıl konumuz olan VSM için gerekli olan state menüsü sol bölümde karşımıza gelmektedir.



State bölümünde Base seçili iken buton kontrolümüzün arka plan ve kenar renklerini değiştireceğiz. Bunun için Template bölümünde Background ve BackgroundGradient özelliklerini değiştireceğiz.



Yaptığımız değişiklik sonucunda butonumuz aşağıdaki gibi olmuştur.



Fare üzerinde gibi özellikleri değiştirmek istediğimizde ise State bölümünde MouseOver seçeneğine ait özelliği değiştirdiğinizde işlemimizi gerçekleştirmiş oluruz.



Temel olarak VSM tasarımcılar ile web geliştiriciler arasındaki uyumu arttıracak ve hazırlanan tasarımların tam anlamında kullanılabilmesine olanak tanıyacak bir özelliktir.

Textbox
Textbox kontrolünde ve genel olarak yazı yazılabilecek bütün kontroller için IME3 adı verilen Asya ve diğer farklı yazım türü olan karakterler eklenmiştir.



Animasyon ve Grafik Sistemi
Silverlight ile hazırlanmış olan animasyon uygulamaları web tarayıcılarda gösterildiğinde çalıştırılan bilgisayarın grafik sisteminde zorlamaya sebep olmaktaydı. Bunun sebebi ise Silverlight, WPF tabanlı olduğu için animasyon uygulamaları çalıştırırken grafik kartının sürücüsünü kullanmak istemektedir. Fakat bu bir web uygulaması için performans yavaşlatıcı bir durumdur. Grafik kartını zorlama oranı beta2 sürümü ile iyileştirilmiş. Tam sürümünde ise zorlama oranının en minimum düzeye getirileceği Silverlight geliştiricileri tarafından açıklanmıştır.

WPF ile uyumu
Silverlight ‘ın gelişimi WPF ‘e oranla daha hızlı olduğu için şu anda aralarında ki uyum azalmış giib gözüküyor. .Net Fw 3.5 Sp1 çıktıktan sonra ise Silverlight ‘ta yapılan değişikler WPF ile uyumlu hala getirilerek XAML kod tarafında yazılan uygulamaların iki platformda da belirli oranda çalışması sağlanacak.

Web Servis
Silverlight ‘ta daha önce SOAP ile web servisi kullanılması mümkündü. Fakat Beta2 sürümü ile WCF servislerinin kullanımı mümkün hal almıştır.

Veri (DATA)

Data Grid
Beta2 sürümünde eklenen bu kontrol de sayfanın boyutuna göre otomatik şekillendirilme, sütunlarda yer alan sonuçların sıralanabilmesi gibi özellikler mümkün kılınmıştır.

NOT: WPF ‘te şu an itibari ile DataGrid kontrolü bulunmamaktadır. .Net Framework 3.5 Sp1 ile ekleneceği düşünülmektedir.

Data Binding
Hataların, zengin içerikli yazıların bağlanabilmesi gibi özellikleri bünyesinde barındırmaktadır.

Silverlight ‘ın gelişimi

Silverlight gün geçtikçe yalnızca animasyon yapabildiğimiz ve video yayınlayabildiğimiz bir yapı olmaktan çıkarak son kullanıcılar için oldukça zevkli uygulamalar geliştirilebilecek, Asp.Net ‘te yapabileceğimiz bir çok işlemi yapabileceğimiz bir yapı olma yolunda ilerlemektedir. Silverlight 2.0 sürümü tamamlandığı zaman web uygulamalarında birçok yazılımcı Asp.Net yerine Silverlight ‘ı deneyecektir. Çünkü kullanıcılara sunduğu zevk ve kolaylık Asp.Net ‘e göre daha fazla olacaktır.

Sonuç olarak yazımızda nelere değindiğimizi hatırlamak gerekirse, Silverlight ‘ın bugüne kadar geçirdiği değişime değindikten sonra kontrollerin özelleştirilmesine, VSM ‘e , Silverlight 2.0 Beta2 ‘de genel özellikler yönünde ne tür değişiklikler yapıldığını ve son olarak da Silverlight ‘ın geleceğe dair gelişiminde ne tür gelişmeler yaşanabileceğine değinmeye çalıştık.

Umarım yararlı olmuştur.

Turhal TEMİZER

Kaynaklar
Silverlight.Net

Cumartesi, Nisan 26, 2008

Configuring a Web Server to Host Silverlight Content

Deploying Silverlight content to a production web server is a pretty easy process. Despite occasional misconception, Silverlight doesn't require a Microsoft-based web server: Apache can host up Silverlight content just as happily as IIS.

But there's one little gotcha: web servers are typically configured to only serve up a limited set of known file extensions as static content. That's all well and good, but Silverlight introduces two new file extensions (.xaml for loose XAML files and .xap for the zip-based binary packaging format). As a result, you need to add the MIME types for those file extensions to your web server so that it recognizes Silverlight content appropriately. Here are the MIME types you need to add to the server configuration:

Extension - MIME Type

.xaml - application/xaml+xml

.xap - application/x-silverlight-app

That's all you have to do. Unfortunately, it's not possible to provide generic instructions for how to add MIME types, as it varies from server to server, but here are some links for various common web servers:

While you're updating the list of MIME types served, you might want to also add the relevant types to your web server to support WPF and ClickOnce applications. Here are the additional items you'll need:

Extension - MIME Type

.manifest - application/manifest

.application - application/x-ms-application

.xbap - application/x-ms-xbap

.deploy - application/octet-stream

.xps - application/vnd.ms-xpsdocument

But what if you're hosting your Silverlight application on a shared hosting service and your hoster doesn't give you access to change these settings? The good news is that there are two options available to you. Obviously, you could take advantage of Silverlight Streaming, our free hosting service for up to 10GB of Silverlight content.

Alternatively, you can "cheat" the web server by renaming the XAP file extension to a compatible MIME type. The XAP container is ZIP-based, so you can simply rename the output file from .xap to .zip and change the source param within the object tag contained in the HTML file to point to the new file location. Click on this hyperlink to see the technique in action - it's a plain HTML file that points to a ZIP file (containing the Silverlight content).

One last piece of good news: IIS 7, included in Windows Server 2008, already includes all the relevant MIME types for both WPF and Silverlight, including both .xap and .xaml extensions, so if you're using Windows Server 2008, you're all set. (The same applies to a clean install of Windows Vista SP1, although if you upgrade from the RTM to the SP1 release, your settings will remain unchanged until you uninstall and reinstall the IIS feature).

Silverlight 2.0 - İlk Uygulamamız

Silverlight ‘ı ilk olarak WPF/E olarak tanımıştık. Zaman ilerledikten sonra kod adını bir kenara atarak Microsoft Silverlight adını almıştır. Silverlight ile geliştirdiğimiz ilk uygulamalar XAML ve JavaScript bileşiminden oluşuyordu. Silverlight ‘ın 1.0 sürümü biraz önce bahsettiğimiz birleşim ile uygulama geliştirmek istediğimizde yapacak olduğumuz bir çok işlemi JavaScript ler ile yapmamız gerekiyordu. Örneğin, farenin sağ tuşuna tıklanması sonucu gerçekleşecek olan bir olayı ilk olarak JavaScript ‘te bir fonksiyon olarak tanımlarız ve sonrasında da XAML kod tarafında kullanacak olduğumuz kontrole ekleriz. Fakat bu kontroller üzerinde istediğimiz düzeyde müdahale yapabilmemiz mümkün olmuyordu.

Zamanlar ilerledi ve Silverlight 1.1 sürümü karşımıza çıktı. Bu sürümde ise bir nebzede olsa form kontrolleri kullanılmaya başlanmış ve XAML kod tarafından web formların yönetilebilirliği arttırılmıştır.

Silverlight ‘ın ilk duyurulduğu 2007 Nisan ayından bu yana gerçekleşen gelişmeler bu şekildeydi. 2008 yılına girdiğimizde ise Silverlight 2.0 ‘ın beta1 sürümü duyuruldu. Artık Silverlight ile geliştirmiş olduğumuz web form uygulamalarında Silverlight için yeniden elden geçirilmiş olan kontrolleri kullanabileceğiz.

Silverlight 2.0 Beta1 ile gelen yenilikleri, kurulum esnasında sorun yaşarsak nasıl çözebileceğimizi ve bir önceki sürümlerine oranla mimari anlamda ne tür değişiklikler yapıldığını daha önceki yazılarımızda incelemiştik. Bu yazımızda ise, programcılık tekniğinin ilk adımı olan Merhaba dünya uygulamasını Silverlight 2.0 Beta1 ile gerçekleştirmeye çalışacağız. Bu yazımızı takiben yayınlayacak olduğumuz yazılarda ise WPF ile sıklıkla kullanmaya başladığımız birçok kontrolü sınırlıda olsa Silverlight 2.0 Beta1 ile nasıl kullanabileceğimize değinmeye çalışıyor olacağız.

İlk olarak Silverlight ’ı bilgisayarımıza kurmamız gerekmektedir. Bunu daha önceki makalelerimizde açıklamaya çalışmıştık, bu sebepten ötürü sadece yüklü olan programlarımız tarafında hangi bileşenlerinin kurulu olarak gözüktüğüne dair ekran görüntüsünü vereceğiz.


Sistemimizde bu üç parçanın kurulu olması gerekmektedir.

Yukarıdaki bileşenler sistemimizde kurulu olduğuna göre Silverlight uygulamamızı geliştirmeye başlayabiliriz.

Uygulamamızı Visual Studio 2008 ile geliştirebilmemizin yanında Expression Blend ile de geliştirebilmemiz mümkündür. Ufak bir notu da sizlere iletmek isterim. Silverlight 2.0 Beta1 .Net IDE ‘lerin den yalnızca Visual Studio 2008 ’e kurulabilmektedir.

Visual Studio ile ilk uygulamamızı geliştirmeye başlarken New->Project yolunu izleyerek C# tarafından Silverlight tagının üzerine tıklayarak geliştirecek olduğumuz Silverlight uygulamasının türünü ve adını seçiyoruz.


Uygulamamızın ismini yazdıktan sonra “OK” diyerek oluşturmasını istiyoruz. Daha sonrasında çıkan ekran bu uygulamayı web sayfasında kullanacağımız için bir sonraki ekranda çıkan mesaja tamam dedikten sonra ilk Silverlight 2.0 Beta1 uygulamamızı oluşturmuş oluyoruz.

Uygulamamız oluşturulduğu zaman karşımıza iki farklı uygulama oluşturulmuş gibi bir görünüm çıkıyor. ASP.net uygulamasında Client-Server ‘ı kullanabilmemiz için oluşturuluyor. Bu oluşturulan bölümde statik sayfa oluşturuluyor. Bu statik sayfayı mümkün olduğunca birçok sunucuda kullanabilmemize olanak tanınmaktadır.

Oluşturulmuş olan uygulamadaki dosyanın ekran görüntüsü aşağıdaki gibi gözükmektedir.


Silverlight Projesinde oluşan dosyaların ne olduğunu anlamaya çalışalım.

Silverlight uygulamasını oluşturulduğumuz proje tarafında oluşturulan App.xaml ve Page.xaml dosyaları ve bu dosyalara kod ekleyebilmemize olanak tanıyan sınıfları yer almaktadır. Bu sınıflar C#, VB, Rubby, Pyhton dilleri ile kodlanabilmektedir.


App.xaml dosyasının içerisinde uygulamaya ait stil ve brush nesneleri yer alırken kod tarafında ise hangi sayfanın ilk açılış sayfası olacağı(Application_Startup ) , hangi sayfanın çıkış sayfası olabileceği (Application_Exit) ve hata alınması durumunda (Application_UnhandledException) hangi sayfaya gidileceği gibi olaylar yer almaktadır.

Page.xaml ‘in WPF uygulamalarında kullanım biçimindeki en büyük farkı, WPF ‘de Page.xaml ‘de başlangıç formunu belirlerken Silverlight ‘ta Page.xaml ‘e ait olan kod sınıfının içerisinde belirlenmektedir.

Uygulamamızda gerçekleşebilecek olayları Page.xaml dosyasına ait olan sınıfta tanımlayabilmemiz mümkündür.

Oluşturmuş olduğumuz Silverlight uygulamasını derlediğimiz zaman ClientBin dosyasının içerisinde TurhalDigi.xap .Net Assembly dosyasının oluştuğunu göreceksiniz.


*.xap ‘ta (okunuşu = zap) standart sıkıştırma algoritması kullanılarak minimize edilmiştir. Bu sayede kullanıcı tarafında bir istek geldiğinde hızlıca isteğe cevap verilemesine olanak tanınacaktır.

Silverlight 2 uygulamalarında taglarının içerisinde standart HTML kodları kullanılabilmektedir. *.xap dosyalarını belirtirken javascript leri HTML sayfaya tanıttığımız gibi tanıtmamız gerekmemektedir. Ayrıca Silverlight 2 ‘nin en güzel özelliklerinden birisi cross browser (ie, Firefox ve safari) ve cross systems (Windows, Linux, mac, v.d.) sorunsuzca çalışabilmesidir.

Silverlight uygulamamızı herhangi bir değişiklik yapmadan derlemek istediğimizde TestPage.aspx web sayfasının ilk açılan sayfa olduğunu ve bu sayfanın her tamamıyla Silverlight ile oluşturulduğunu göreceksiniz.

Silverlight kontrollünü ve bu kontrole ait el ile işlem olaylarını öğreniyoruz

Silverlight 2 Beta1 ‘in diğer Silverlight sürümlerinden en büyük değişikliğinin form kontrollerini kullanabiliyor olmamız olduğundan bahsetmiştik. Şimdi bu kontrolleri uygulamalarımızda nasıl kullanabileceğimize değinmeye çalışalım.

Form kontrollerini eklerken Page.xaml dosyasından yararlanıyoruz.


Dikkat edeceğiniz üzere diğer Silverlight sürümlerine oranla daha başarılı bir intellisence bulunuyor. İstersek Silverlight kontrollerinde istediğimizi App.xaml dosyasının içeriğine ekleyerek kullanabiliriz. Biz Button kontrolünün kod tarafında kullanılabilmesi için adını dugme olarak belirliyoruz. Bu özelliğinin dışında üzerinde yazacak olan yazısını, genişliğini ve yüksekliğini de belirtiyoruz. Silverlight 2 Beta1 ‘de henüz özellikler bölümünü aktif olarak çalışamamaktadır.


Button kontrolümüze eklemiş olduğumuz özellikler sonucunda nasıl bir form görüntüsüne kavuştuğuna göz atalım.


Oldukça güzel bir görüntüye sahip Silverlight formumuz oluştu. Fakat biz butona tıkladığımız zaman herhangi bir işlem yapmamaktadır. Şimdi butona tıklanması olayını nasıl yapacağımıza değinmeye çalışalım.

Buttonumuzun özelliklerine göz attığımızda Click olayına da verebileceğimiz özelliklerin olduğunu görürüz. İşte biz bu özelliğe tıklanması esnasında kod tarafında çağırılması için bir olay kontrolcüsü tanımayacağız.


Butonun tıklanması olayına vereceğimiz kontrol ise,


Biz bu tıklanma olayına vereceğimiz ismi kendi inisiyatifimize göre verebilirken, istersek VS IDE ‘sine de otomatik olarak oluşturtabiliyoruz. Biz IDE ‘ye oluşturtuyoruz ve aşağıdaki bir isim tanımlıyor.


Buttona tıklanma olayları Page.xaml.cs sınıfının içerisine oluşturulmaktadır. Oluşturulan bu tıklanması olayı masaüstü uygulamalardan özelliklede Windows Presentation Foundation ‘dan alıştığımız biçimde oluşmaktadır.


Butonumuza tıklandığı zaman içeriğine istediğimiz mesajı yazdırabiliyoruz. Şimdi bu küçük uygulamamız derleyerek nasıl bir sonuç alacağımıza göz atabiliriz.


Evet, uygulamamız başarılı bir şekilde derlendi ve istediğimiz işlemi yaparak butona tıkladığımızda “Dugmeye basildi…” yazısını üzerinde gösterdi. Ayrıca uygulamamızı derlerken Cross browser özelliğini de değinebilmek için Apple Safari tarayıcısında derleyerek test ettik. Sonuç ise Internet Explorer ‘da olduğu gibidir.

Bu yazımızda Silverlight 2.0 uygulamalarına ilk adımımızı atmış oluyoruz. Temel olarak Silverlight 2.0 ‘ı tanıdık ve ilk uygulamamızı geliştirdik. Bir sonraki yazımızda TurhalDigi projemizin üzerinden web form ‘umuzun ekranını nasıl kontrol edebileceğimizi incelemeye çalışıyor olacağız.

Umarım yararlı olmuştur.

Yazımızda değinmiş olduğumuz uygulamanın kaynak kodlarına linkten erişebilirsiniz.

Turhal Temizer

Pazar, Nisan 20, 2008

WPF – Uygulamalara Video Kontrolleri Eklemek

2005 yılında Windows Presentation Foundation ile ilgili söylentiler ortaya atıldığında, Adobe Flash ile yapabildiğimiz bütün işlemleri ve daha fazlasını masaüstü ve web uygulamalarında yapabileceğimizden söz edilmişti. Daha sonra .Net Framework 3.0 ‘ın ilk sürümleri olarak .Net FX bizlere sunulduğundan bu söylentilerin gerçekleşebileceği düşünceleri zihnimizde canlanmaya başlamış ve özellikle masaüstü uygulamalarda devrim niteliği taşıyabileceğini düşünmeye başlamıştık. Belirli zaman geçtikten sonra WPF ‘i yalnızca masaüstü uygulamalar için kullanılacağına ve web uygulamalarının isminin de Microsoft Silverlight olacağını gözlemlemiş olduk. WPF ile de web uygulamaları yayınlamak hala mümkün olmakta ve bu tür uygulamalara da XBAP uygulamalar denilmiştir. Web tarafında Silverlight ‘ın estirdiği fırtınayı masaüstü uygulamalarında da WPF gerçekleştirmeye başlamıştı.

WPF ile gelen ve dünya da en çok kullanılan ürünler ile Windows Vista, Office System 2007 ve Windows Live Messenger 8.0 ve sonrası olmuştur. Karşımıza gelen bu ürünlerin ortak özellikleri tasarımlarının bir önceki sürümlerine oranla inanılmaz değişikler gösterebilmiş olmasıdır. Özelliklere kısaca örnek vermek gerekirse, Windows Vista ile izleyeceğimiz bir videoyu herhangi bir oynatıcı açmadan izleyebiliyor olmamızdır. Bu ve bunun gibi birçok işlemin ana özelliği uygulamalarımızda yer alan kontrolleri dinamik bir biçimde kullanabiliyor olmamızdır.



Windows Vista ile nasıl video kontrollerini kullanıldığını yukarıdaki ekran görüntüsünden bakabiliriz. Son kullanıcılar bu tür kontrolleri kullandıkça bizlerden geliştirmemizi istedikleri uygulamalarda bu tür kullanım kolaylıklarının olmasını istemektedirler. Bizlerde bu tür istekleri uygulamamızın performansını da düşünerek gerçekleştirmeye çalışırız.

Windows kontrollerinin daha iyileştirilmiş ve yeni nesil sistemler ile uyumlu olabilmesi açısından WPF ile geliştirmek bizler için her daim ayrıcalıklı bir durum olacaktır. Ayrıcalıklı durumdan kastımız, uygulamalarımızda ne kadar en son teknoloji kullanırsak son kullanıcılar tarafında o kadar coşku uyandırırız. Müşteri memnuniyetine dayalı bir dünyada yaşadığımız içinde bu bize çok daha fazlası ile katma değer olarak geri dönecektir.

Kısaca neden yeni kontrolleri kullanmamız gerektiğini ve bu kontrollerden video kontrolünün Windows Vista işletim sistemi ile nasıl gözüktüğüne göz attıktan sonra bu makalemizde değinecek olduğumuz WPF uygulamalarına Media kontrollerinin eklenmesi konusunu incelemeye başlayabiliriz.

Win32 uygulamalarımızı dijital Media kontrollerinin eklemenin iki yolu vardır. Bunlardan birincisi animasyon işlemlerini daha canlı göstermek ve video kontrollerini uygulamalarımızda kullanmak için başvurduğumuz DirectShow Api leridir. Bir diğeri ise Windows Media Player ActiveX kontrolüdür. Bu iki kontrolü de uygulamamıza gömülü bir biçimde uygulamalarımızda kullanabiliyoruz.

“Peki, bu iki kontrol varken neden WPF ‘te kullanılmakta olan kontrollerin bizlere sunulduğu” sorusunun cevabını araştırmaya çalışalım. DirectShow ile geliştiricilere Media uygulamaları için inanılmaz fazlalıkla imkânlar sağlanmaktadır. Tabii bu imkânları kullanabilmemiz için bu api hakkında geniş bir bilgi yelpazesine sahip olmamız gerekiyordu. Uygulamalarımızda yalnızca tek bir video göstermek içinde geliştiricilere bu api hakkında geniş bilgi düzeyine sahip olmalarını istemek geliştiriciler için oldukça sıkıcı bir durum oluyordu.

WPF ‘de ise DirectShow api lerinde yer alan kontrollerinin benzerlerini .Net Framework 3.0 ile birlikte gelen özellikler ile rahatlıkla gerçekleştirebilmemiz mümkündür. WPF ile gelen kontrolleri de Win32 uygulamalarında sorunsuzca kullanabiliriz.

Media oynatmak içinde Windows Media Player ActiveX kontrolüne ait özelliklere hâkim olmamız gerekmektedir. Yine geliştiricilere ekstra bir şeyler öğrenmeye zorlamak yerine WPF ile .Net Framework yapısına eklenen MediaElement kontrolü yardımı ile bu işlemleri de sorunsuzca gerçekleştirebilmemiz mümkündür. Kullandığımız bu kontrol yardımı ile videolarımızı 3D yüzeylerdeymiş gibi de kullanabilmemiz mümkündür.

Ses ve Media kontrollerini geliştiriciler kullanmak istediğinde WPF ile sunulan Media özellikleri olduğundan bahsetmiştik. Bu Media özelliklerini kullanmak istediğimizde arka planda Media Player işlemini başlatarak işlemlerimizi gerçekleştirebilmemize olanak sağlanmaktadır. WPF uygulaması açıldıktan sonra Media uygulaması olan sayfada yer alan Media dosyası yüklendikten sonra Media Player ‘ın açabileceği bir format olup olmadığını kontrol ediyor. Eğer bu formatlar dışında bir dosya açmak istiyorsak uygulama bizden codec yüklememizi istemektedir.

Media uygulamaları olan uygulamalarımızdaki dosyalar gösterilirken arka planda dosyalarımızın yüklenmesine devam edilmektedir. Bu yüklenme işlemi biz video ‘yu duraklatsak bile yüklemeye devam edecektir. Video ‘nın yüklenmesini engellemek için yapmamız gereken işlem tamamen durdurmak olacaktır. Ayrıca, ses dosyalarını çaldırabilmemiz için System.Media.SoundPlayer sınıfını da kullanabilmemiz mümkündür.

MediaElement Kontrolünün Kullanılması

Windows Presentation Foundation ile Media dosyalarını göstermenin oldukça kolay olduğundan ve bu tür işlemleri yapabilmek içinde MediaElement kontrolünün gerekli olduğundan üst paragraflarda bahsetmiştik. Bu kontrolü XAML kod tarafında ekleyebileceğimiz gibi C# veya VB.Net kod tarafında MediaElement kontrolünü aktifleştirerek kullanabilmemiz mümkündür. MediaElement kontrolünü uygulamalarımızda kullanırken ya bağımsız olarak kontrollerimizden aldığımı değeler yönetiriz ya da sistem saatinden alarak işlemlerimizi yapmamıza olanak tanıyacaktır.

Bağımsız durumda Media elementi nasıl kullanacağımıza göz atalım;

XAML
<MediaElement Source="Forza.wmv" Width="320" Height="240" LoadedBehavior="Play" />

XAML kod bloğunu uygulamamıza yazıp derlediğimiz zaman uygulamamızın içerisinde videomuzun görüntülendiğine tanık olacağız.

Not: Eğer videonuzun yolunu doğru bir şekilde belirttiğiniz halde gözükmediyse muhakkak projenizin oluştuğu klasörün altında yer alan Debug dizininin altında izlettireceğiniz videonun yer almasına dikkat ediniz.

MediaElement kontrolünün performans açısından çok daha fazla olanaklarının olduğundan ve diğer Api lere oranla işlemciyi daha az yoracağından bahsetmiştik. Şimdi bu söylemlerimizi doğrular nitelikteki ekran görüntülerini veriyoruz. Bu ekran görüntüsünde MediaElement yardımı ile oluşturduğumuz videonun yanında görev yöneticisi yer almaktadır.



MediaElement kontrolümüzü kullanarak çok basit anlamda bir uygulama geliştirdik ve bu uygulamamızı görüntüledik. Şimdi yapacağımız örnekte ise başlat, duraklat, bitir sessiz butonlarının olduğu bir örnek olacaktır. Bu örneğimizde kontrolleri XAML kod tarafında hazırlarken kontrollere verilecek olan görevleri C# kod tarafında oluşturuyor olacağız. Ayrıca kontrollerimizin kullanıcılar tarafından kullanıldığından videoyu kontrol edebilmesi için LoadBehavior özelliğine Manual ‘i atayacağız.

XAML
<Window x:Class="WpfMedia.Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="MediaElement Makale" Height="800" Width="600">
   <Grid>
      <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
         <MediaElement Name="MediaMakale" Source="Forza.wmv"
            LoadedBehavior="Manual" Width="320" Height="240" />
         <StackPanel Orientation="Horizontal" Margin="0,10,0,0">
            <Button Content="Oynat" Margin="0,0,10,0"
               Padding="5" Click="mediaOynat" />
            <Button Content="Duraklat" Margin="0,0,10,0"
               Padding="5" Click="mediaDuraklat" />
            <Button x:Name="sessizButton" Content="Sessiz"
               Padding="5" Click="Sessiz" />
         </StackPanel>
      </StackPanel>
   </Grid>
</Window>

C#
susing System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace WpfMedia
{
   public partial class Window1 : System.Windows.Window
   {
      public Window1()
      {
         InitializeComponent();
         mediaMakale.Volume = 100;
         mediaMakale.Play();
      }

      void mediaOynat(Object sender, EventArgs e)
      {
         mediaMakale.Play();
      }

      void mediaDuraklat(Object sender, EventArgs e)
      {
         mediaMakale.Pause();
      }

      void mediaMute(Object sender, EventArgs e)
      {
         if (mediaMakale.Volume == 100)
         {
            mediaMakale.Volume = 0;
            sessizButton.Content = "Sesli";
         }
         else
         {
            mediaMakale.Volume = 100;
            sessizButton.Content = "Sessiz";
         }
      }
   }
}



MediaElement, zaman durumuna bağlı olarak Windows Presentation Foundation ‘ta yer alan animasyon mimarisine bağlı olarak ta kullanılabiliyor. Zaman durumunu aktifleştirdiğimizde MediaElement ‘in özelliklerinden olan MediaTimeline ve MediaClock özelliklerine başlangıç ve ilerleme değerleri aktararak kullanabiliyoruz. Uygulamalarımızda başlangıç zamanı ve hangi zaman aralıkları ile ilerleyeceği ile ilgili özellikler Windows Presentation Foundation ‘da animasyon işlemlerini yaparken kullandığımız StoryBoard üyesine benzemektedir. Bu üyeyi de kullanırken belirli bir başlangıç zamanı, ilerleme zamanı ve sonlanma zamanı belirtebiliyorduk. Şimdi bu tür zamana bağlı kontrolleri kullanmak istediğimizde uygulamamızda ne tür bir kod bloğu kullanabileceğimize değinmeye çalışalım.

XAML
<MediaElement Name="mediaMakale" Width="320" Height="240" />
   <Grid.Triggers>
      <EventTrigger RoutedEvent="Grid.Loaded">
         <EventTrigger.Actions>
            <BeginStoryboard>
               <Storyboard Storyboard.TargetName="mediaMakale">
                  <MediaTimeline Source="Forza.wmv"
                     BeginTime="00:00:00" Duration="00:05:00" />
               </Storyboard>
            </BeginStoryboard>
         </EventTrigger.Actions>
      </EventTrigger>
   </Grid.Triggers>

Uygulamalarımızda MediaTimeline özelliğini kullanmak yerine MediaElement kontrolünü kullanmak ileride gerçekleşebilecek sorunları ortadan kaldırmak açısından çok daha yararlı olacaktır. Çünkü MediaTimeline ile uygulamalarımızı çalıştırmak istediğimizde arkada MediaElement kontrolü oluşturulmak istenecek ve istek sonrasından belirli zaman aralıklarında önbelleğe alacaktır. Sürekli çağırılan video dosyaları uygulamalarımızı web tabanlı yaptığımız durumlarda performans kaybına uğrayabilmekte ya da Windows tabanlı olarak geliştirdiğimiz uygulamalarda çok büyük dosyalı uygulamaları göstermek istediğimizde hatalar verebilecektir. Fakat aklımıza başka bir soru takılabilir. “O da çok büyük boyutlu bir videoyu birden önbelleğe aldırarak oynat dediğimizde performans kaybı yaşamayacak mıyız?” olacaktır. İşte bu sorunu engellememiz için MediaElement kontrolü içerisinde video dosyalarımızı oynatıyoruz. MediaElement kontrolünün Media dosyalarını çalıştırma mantığı minimum sistem zorlaması ile maksimum performans alabilmektedir. Diğer durumlarda biz yönetmeye çalışırsak, WPF öncesi durumlarda olduğu gibi oldukça zprlanabilir ve işlemlerimizi yaparken büyük sorunlar yaşabiliriz.

MediaPlayer Sınıfının Kullanılması

MediaElement kontrolünün özelliklerinde çok fonksiyonlu özellikler yani, yeniden oynatma, çalma listesi gibi özellikler yer almamaktadır. MediaElement üzerinde yer alan kontrollerimize daha çok fonksiyonellik kazandırmak istediğimizde MediaPlayer sınıfını kullanabiliriz. MediaElement ile video ve benzeri Media dosyaları oynatmak istediğimizde arka planda Media Player işleminin başlatıldığından ve bu işlemler üzerinden videomuzu oynattığından bahsetmiştik. İşte bu sebepten ötürü uygulamalarımızda MediaPlayer sınıfını kullanmak performans kaybı yerine son kullanıcıya sunacağımız birçok özelliği kolaylıkla sunabilme olanağı tanımaktadır.

MediaPlayer sınıfını kullanmamız için uygulamamızda System.Windows.Media isim alanının kullanılıyor olmasına dikkat etmemiz gerekmektedir. Şimdi ise C# ile Media Player sınıfını nasıl kullanabileceğimize ilişkin bir örnek vereceğiz.

C#
MediaPlayer mp = new MediaPlayer();
   Try {
      mp.Open(new Uri("mediaMakale.wmv"));
      }
     catch(Exception ex) {
    MessageBox.Show(ex.Message);
}

Media Player sınıfı ile kullanabildiğimiz özellikler ve üyeler MediaElement kontrolünün içerisinde kullanılabilmektedir. MediaElement ve Media Player uyumu ile gerçekleştirdiğimiz uygulamalarda yalnızca HD videoların gösterilmesinde sorunlar çıkmaktadır. Bu sorunlarda sistem özelliklerimizden olduğu düşünülmektedir. Çünkü ekran kartı iyi bir sistem ile uygulamamızı çalıştırdığımızda herhangi bir sorun ile karşılaşmazken, daha düşük özellikleri sistemlerde denediğimizde hatalar verebilmektedir. Media Player sınıfı videolarımızı çalıştırırken VideoDrawing sınıfı yardımı ile bu işlemleri yapmaktadır. 3D yüzeylerde de video izlemek istediğimizde Media Player sınıfı yine VideoDrawing sınıfı yardımı ile kolaylıkla video dosyalarını gösterebilmektedir.

Media Player sınıfında MediaElement kontrolünde olduğu gibi direk yolu gösterebilmek yerine uri özelliği ile yolunu uygulamamızın içerisindeki yolunu belirtiyoruz.

WPF Kontrollerinde Gömülü Videoların Kullanımı

MediaElement kontrolü System.Windows.UIElement sınıfından miraslanarak oluşturulmaktadır. Miraslamadan ötürü bir kontrolü başka bir kontrolün içerisinde de kullanabilmemize olanak tanınmıştır. Bizde bu özelliği test edebilmek için Button kontrolünün içerisinden MediaElement kontrolünü çalıştırmayı deneyeceğiz. Bunun için XAML kod tarafına aşağıdaki kodları ekliyoruz.

XAML
<Button Name="videoButton" Click="videoButton_Click"
   Width="320" Height="240">
   <MediaElement Name="forzaVid" Source="Forza.wmv"
       LoadedBehavior="Play" Width="320" Height="240" />
</Button>



Bu uygulamamızı derlediğimiz anda video oynamaya başlamaktadır. Bunun sebebi LoadedBehavior özelliğine Play değerini atmamızdan kaynaklanmaktadır. Eğer ki biz uygulama başlar başlamaz değil de Butona tıklandığı zaman videoyu başlatmak istersek Button_onClick özelliğine MediaElement ‘e vermiş olduğumuz isim ile forzaVid.Play(); kodunu eklememiz yeterli olacaktır. Bu değişiklik sonrasında uygulamamız butona tıklandığı anda, buton içerisinde video gösteren bir hal almış olacaktır. Bu tür ince detaylar son kullanıcılara sunulacak olan uygulama kullanım zevkini maksimuma çıkaracağı kaçınılmaz bir gerçektir.

Islak Zemin Yansıması Teknikleri

Uygulamalarımızda suda ya da camda karşılaştığımız yansıma işlemlerini yapmaya çalışırken fazlaca zaman kaybına uğrardık. WPF ile bu işlemleri yapmak istediğimizde ise VisualBrush üyesine MediaElement ‘i bağlamamız yeterli olacaktır. Daha sonrasında ise, VisualBrush içerisinden yapacağımız ince detaylar ile yansıma işlemini gerçekleştirebiliriz.

Yansıma işlemlerini nasıl yaptığımız konusunda kafanızda herhangi bir soru işareti oluşursa daha önceki WPF makalelerimizi okuyabilirsiniz.

Şimdi ise ıslak zemin yansıma efektine benzeyen uygulamamızı yapmamıza yarayacak olan kodlarımızı verelim.

XAML
<Window x:Class="WpfMedia.Window3"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="WPF Makale" Height="340" Width="350">
      <Grid x:Name="Grid">
         <StackPanel VerticalAlignment="Center">
            <MediaElement Name="Vid" Source="Forza.wmv"
               LoadedBehavior="Play" Width="320" Height="240" />
            <Rectangle Width="320" Height="240">
               <Rectangle.Fill>
                  <VisualBrush Visual="{Binding ElementName=Vid}" />
               </Rectangle.Fill>
               <Rectangle.OpacityMask>
                  <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                     <GradientStop Color="#AA000000" Offset="1" />
                     <GradientStop Color="#00000000" Offset="0" />
                  </LinearGradientBrush>
               </Rectangle.OpacityMask>
            <Rectangle.RenderTransform>
         <TransformGroup>
         <ScaleTransform ScaleY="-1" />
         <TranslateTransform Y="242" />
      </TransformGroup>
   </Rectangle.RenderTransform>
</Rectangle>
</StackPanel>
</Grid>
</Window>



Bu uygulamamızı da basitçe yapmış oluyoruz.

Uyumlu Ses Dosyalarının WPF Uygulamalarına Eklenmesi

WPF uygulamalarımıza MediaElement kontrolü yardımı ile birçok video ekledik ve eklediğimiz bu videoları form kontrollerinin içerisine bile ekleyebildik. Fakat dijital dünya sadece görüntüden ibaret değildir. Birde bu dünyada sesler yer almaktadır. Şimdi de ses dosyalarını nasıl WPF uygulamalarımıza ekleyebileceğimize değineceğiz.

Ses dosyalarımızı uygulamalarımızda kullanabilmemiz için System.Windows.Media isim alanı altında tanımlı olan sound Player sınıfını kullanacağız. Bu sınıfta Media Player ile çalabildiğimiz ses dosyalarımızı WPF uygulamalarımız da çalabilmemiz mümkündür. Ayrıca Media Player için varsayılan ses formatı olan WAV ‘ı da sorunsuzca çalıştırabilmektedir.

SoundPlayer sınıfını kullanırken bu sınıfın metotlarından olan SoundPlayer.Play(); metodu yardımı ile de ses dosyalarını yürütebilmemiz mümkündür. Tabii yürütebilme özelliği ile birlikte duraklatma ve sonlandırma metotları da yer almaktadır.

Şimdi uygulamalarımızda SoundPlayer özelliğini kullanabileceğimiz örnek için gerekli olan kod parçacığına göz atalım.

XAML
<EventTrigger RoutedEvent="Button.MouseEnter" SourceName="Button">
   <EventTrigger.Actions>
      <SoundPlayerAction Source="ses/lake.wav"/>
   </EventTrigger.Actions>
</EventTrigger>

Uygulamamızı derlediğimizde ses dosyamız sorunsuz bir biçimde çalacaktır.

Bu yazımızda nelere değindiğimizi toparlamak gerekirse, ilk olarak WPF ile geliştirilmiş ve günümüzde en çok kullanılan uygulamalara değindik ve bu uygulamalardan Windows Vista ‘da MediaElement kontrolünü nerede kullanıldığına göz attık. Sonrasında ise MediaElement kontrolü kullanılarak yapılmış farklı uygulamaları incelemeye çalıştık.

Sonuç olarak en temel anlamda MediaElement kontrolünü kullanarak video dosyalarını nasıl kullanabileceğimize incelemeye çalıştık.

Umarım yararlı olmuştur.

Yazımızda değinmiş olduğumuz uygulamanın kaynak kodlarına linkten erişebilirsiniz.

turhal.temizer@csharpnedir.com