Silverlight (Kullanıci girişi oluşturma)

SilverlightKullanıcı Giriş Paneli

Silverlight’ı kullanarak animasyon denemesi yapanlarınız olmuştur. Kutuları hareket ettirmek, topları yuvarlamak, renk değişiklikleri yapmak vs. Bunların verdiği haz şöyle dursun biz Silverlight kullanarak bir web sitesi için Kullanıcı Giriş ekranı yapalım. Bu sayede bir animasyonu programlama diliyle nasıl kontrol edebildiğimizi de görmüş oluruz.

Başlayalım…

Expression Blend programını çalıştırıyoruz ve Silverlight 2 Application ‘ ı seçiyor Name kısmından projemize isim veriyor Language kısmından da kullanacağımız programlama dilini seçip OK diyoruz.



Çalışma alanımız karşımıza geliyor. İlk başta çalışma alanımızı kullanacağımız boyutlara getirelim. Bunu iki şekilde yapabiliriz.
Birincisi: XAML tarafına geçip kodlardan UserControl tagındaki Width ve Height değerlerini değiştirerek.
İkincisi: Properties tabından Layout kısmına gelip Width ve Height değerlerini değiştirerek.



Bu tür değişiklikleri ilgili panelden yapabildiğimiz gibi XAML kodlarından da yapabiliyoruz fakat makalenin devamında kolaylık ve anlaşılabilirlik açısından XAML tarafını kullanmayacağız.

Çalışma alanımızın boyutlarını da ayarladığımıza göre artık gerekli nesneleri projemize ekleyebiliriz. Kullanıcı adı, şifre ve menüdeki yazılar için ToolBar’dan TextBlock ekleyelim. Kullanıcı giriş paneli yaptığımız için bize birer TextBox, PasswordBox ve Buton gerekiyor, bunları da ToolBar ‘ın en altındaki ( >> ) çift ok simgesinden Asset Library ‘i açıp ekliyoruz. Eklerken yukarıdaki Search kısmını kullanabilirsiniz ayrıca Asset Library de bulamadığınız bir şey olduğunda Show All kısmının işaretli olup olmadığını kontrol ediniz.



Projede kullanacağımız araçları ekledik şimdi ufak bir iki düzenleme yapalım, arkaya bir çerçeve yukarı bir başlık vs.. 



Evet panelimizi şekil olarak elde etmiş bulunuyoruz.

Şimdi sıra animasyon vermeye geldi. Benim aklımdaki animasyon kullanıcı Giriş butonuna tıkladığında ekrana eklediğimiz tüm nesneler çerçevenin ortasına doğru gelerek kaybolsunlar ve kullanıcının karşısına kullanıcı menüsü gelsin.

Animasyona başlarken ilk çalışma ortamımızı animasyona göre ayarlayalım. Menüden Window->Active Workspace->Animation Workspace yolunu izleyerek çalışma alanımızı değiştiriyoruz.
Animasyon çalışma alanında ekrana Objects and Timeline paneli geliyor. Bu panel yardımıyla objelerimizi yönetip onlara animasyon verebileceğiz.



Animasyona başlamak için ilk olarak bir Storyboard oluşturmamız gerekiyor bunu Objects and Timeline panelimizde objelerin üst kısmında bulunan ( +) artı işaretine tıklayak oluşturuyoruz. Tıkladığımızda karşımıza bir pencere geliyor ve bizden Storyboard ismi girmemizi istiyor. Ben Storyboard adı olarak “LoginAnimation” yazdım.



Ekledikten sonra objelerimize isim vermemiştik. Objelerimizi programlama esnasında daha kolay yakalayabilmek için isimlendirelim.
Panelimizden objeleri tek tek seçerek Properties daki Name kısmından onlara isim veriyoruz.



Evet isim verme işlemimizde bittiğine göre artık animasyon verme kısmına gelebiliriz. Bir objeye animasyon verebilmek için önce objeyi seçiyor ve ilk saniyeye Keyframe ekliyoruz.
Keyframe eklemek için Timeline üzerinde bulunan, yanında süre yazan, küçük (+) artı simgesine tıklıyoruz. Üzerine gelince Record Keyframe yazıyor. Daha önce tıkladığımız Storyboard ekleme butonuyla karıştırılmasın.



Play butonuna basıp yaptığınız ilk hareketi izleyebilirsiniz. Biz sadece ilk ve son saniyedeki duruma karar verdik aradaki tüm geçişleri Silverlight bizim için halletti.

Yapacağımız animasyon için objelerin ekranın ortasına gelip kaybolmalarından söz etmiştik. Kaybolma efekti için Opacity ve Visibility özelliklerini kullanacağız. Yani obje %100 Opacity değerine sahipken ekranın ortasına geldikçe bu değer %10 ‘ a kadar düşecek tam ortaya geldiğinde Visibility özelliği Collapsed moduna geçecek ve objemiz ekrandan kaybolacak.
Bu iki özelliğe de Properties panelinin Appearance bölümünden ulaşıyoruz.



Ekrandaki bütün objelerimize aynı şekilde animasyon verdikten sonra projemizi kaydediyoruz.
Giriş yapıldığında gelecek menüye de yukarıdan aşağıya doğru kayarak gelme animasyonu veriyoruz.

Animasyon işlemimiz bitti ve artık Expression Blend de bir işimiz kalmadı. Gerisini Visual Studio ‘ dan halledeceğiz.

Normalde bir web projesi oluştururken izlenmesi gereken en ideal yol önce Visual Studio ‘ yu çalıştırmak oradan bir Silverlight projesi oluşturmak ve o projeyi Expression Blend tarafında açmaktık. Bu sayede projemize web için gerekli dosyalarda otomatik olarak eklenecektir. Fakat bu dosyalar kalabalık yapıp kafa karıştırmasın diye biz projemizi direk Expression Blend de oluşturduk. Bu şekilde de projemiz internet tarayıcıda çalışacaktır.

Bu kısa bilgiden sonra kaldığımız yerden devam ediyoruz.

Visual Studio ‘ muzu çalıştırıp Expression Blend de oluşturduğumuz projeyi Open Project diyerek açalım.
Projemizdeki dosyaları Solution Explorer panelinden görebiliriz. Biz buradaki dosyalardan sadece Page.xaml ve Page.xaml.vb dosyalarını kullanacağız. Aslında Page.xaml ‘ le de bi işimiz yok. Biz objeleri direk Page.xaml.vb dosyasından yakalayarak ilerleyeceğiz.


Yapacağımız işlemleri kısaca gözden geçirelim.
Butonumuzun Click olayı sayesinde TextBox ve PasswordBox bölümlerindeki girilen verileri önceden belirlenen bilgilerle karşılaştıracağız, eğer bilgiler doğruysa hazırlamış olduğumuz animasyon oynayacak ve kullanıcının karşısına menü gelecek

Söylediğimiz gibi ilk olarak butonumuzun Click olayıyla TextBox ve PasswordBox bölümlerindeki verileri yakalayan ve doğru bilgilerle karşılaştıran kodu yazalım.


Private Sub buton_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles buton.Click
Dim kadi, pass, kullanicidata, passworddata

kullanicidata = "omer_frk"
passworddata = "Medrese-i Yusufiye"

kadi = kadibox.Text
pass = sifrebox.Password

If kadi = kullanicidata And pass = passworddata Then
’Girilen bilgiler doğruysa bu bölümdeki kodlar çalışacak.
Else
’Girilen bilgiler yanlışsa bu bölümdeki kodlar çalışacak.
End If
End Sub


Aslında kodlarımız bu kadar, geriye bir tek bilgilerin doğru veya yanlış olduğu durumlarda yapılmasını istediğimiz işlemlerin kodunu yazmak kalıyor.


Şayet bilgiler doğruysa animasyonumuz başlayacak ve kullanıcı menüsüne kavuşacak demiştik. Animasyonu başlatan kodumuzu yazalım.

LoginAnimation.Begin()


Bu tek satırlık kodu projemizde ilgili alana ekliyoruz.
Bir de bilgilerin yanlış olması durumunda çalışacak kodumuz var. Biz senaryonun bu kısmına göre bir animasyon hazırlamadığımız için sadece ekrandaki bir TextBox ‘ ın Text değerini değiştirerek bilgilerin yanlış olduğunu belirtelim.

baslik.Text = "Bilgiler Hatalı"

Bu durumu da bu tek satırlık kodla çözdük. Şimdi kodlarımızın son halini görelim.

Private Sub buton_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles buton.Click
Dim kadi, pass, kullanicidata, passworddata

kullanicidata = "omer_frk"
passworddata = "Medrese-i Yusufiye"

kadi = kadibox.Text
pass = sifrebox.Password

If kadi = kullanicidata And pass = passworddata Then
LoginAnimation.Begin()
Else
baslik.Text = "Bilgiler Hatalı"
End If
End Sub


F5 yapıyoruz ve projemizi test ediyoruz. Bir hata yapmadıysak bu haliyle projemiz çalışacaktır.
Artık web sitemizde sayfayı yenilemeden kullanıcı girişi işlemini yaptırmayı sağlayabiliyoruz.

Datalist satır rengi

protected void dlTrades_ItemDataBound(object sender, DataListItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
 {
 System.Data.DataRowView drv = (System.Data.DataRowView)(e.Item.DataItem);
 string hld = (string)drv.Row["Hold"].ToString();
 if (hld == "Trade")
 {
 e.Item.BackColor = System.Drawing.Color.LightGreen;
 e.Item.ForeColor = System.Drawing.Color.White;
 e.Item.Font.Bold = true;
 }
 if (hld == "Hold")
 {
 e.Item.BackColor = System.Drawing.Color.LightGray;
 e.Item.ForeColor = System.Drawing.Color.White;
 e.Item.Font.Bold = true;
 }
 System.Data.DataRowView drv2 = (System.Data.DataRowView)(e.Item.DataItem);
 string stat = (string)drv2.Row["Status"].ToString();
 if (stat == "Open")
 {
 e.Item.BackColor = System.Drawing.Color.LightGreen;
 e.Item.ForeColor = System.Drawing.Color.White;
 e.Item.Font.Bold = true;
 }
 if (stat == "Filled")
 {
 e.Item.BackColor = System.Drawing.Color.Gold; e.Item.ForeColor = System.Drawing.Color.White;
 e.Item.Font.Bold = true;
 }
 if (stat == "Closed")
 {
 e.Item.BackColor = System.Drawing.Color.IndianRed;
 e.Item.ForeColor = System.Drawing.Color.White;
 e.Item.Font.Bold = true;
 }
 }
 }

c# string işlemleri

String.Compare() – String ifadeleri karşılaştırmak

string str1 = "Dürdane"; string str2 = "Fikriye"; int result = String.Compare(str1, str2); if (result < 0)     Console.WriteLine("{0} < {1}", str1, str2); else if (result > 0)     Console.WriteLine("{0} > {1}", str1, str2); else     Console.WriteLine("{0} = {1}", str1, str2);

Yukarıdaki kod parçasında 2 string değer, String sınıfının Compare() metodu kullanılarak karşılaştırılmaktadır.

String.Compare() metodun, 1. parametre,2.parametreden küçük ise(alfabetik sıralamaya göre) negatif,büyük ise pozitif eşit ise 0 değerini döndürmektedir.

2 string’in eşit olup olmadığını karşılaştırmak için benzer şekilde

if (str1 == str2)     Console.WriteLine("{0} = {1}", str1, str2);

karşılaştırmasını kullanabiliriz,fakat hangisinin hangisinden küçük olduğunu bulmak için < ve > işaretlerini bu karşılaştırmada kullanamayız.

Aşağıdaki kod parçasına bir bakalım;

string str1 = "Dürdane"; string str2 = "dürdane"; int result = String.Compare(str1, str2); if (result < 0)     Console.WriteLine("{0} < {1}", str1, str2); else if (result > 0)     Console.WriteLine("{0} > {1}", str1, str2); else     Console.WriteLine("{0} = {1}", str1, str2);

2 string ifade de aynıdır fakat 1. String ifadenin ilk harfi büyük olduğundan dolayı,1.string ikincisinden büyük olacak ve Compare metodu 0’dan büyük bir değer döndürecektir.Bazen öyle durumlar olur ki bu 2 string ifadenin eşit olmasını isteyebiliriz yani büyük küçük harf duyarlı olmamasını isteyebiliriz.Bu durumda Compare metodunun 3 parametresi işimizi görecektir.Zira eğer bu parametre true olur ise büyük küçük harf olup olmadığı dikkate alınmayacaktır.Aynı kod parçasını şe şekilde işletelim;

string str1 = "Dürdane"; string str2 = "dürdane"; int result = String.Compare(str1, str2, true); // Buraya DİKKAT!... if (result < 0)     Console.WriteLine("{0} < {1}", str1, str2); else if (result > 0)     Console.WriteLine("{0} > {1}", str1, str2); else     Console.WriteLine("{0} = {1}", str1, str2);

Bu durumda ekran görüntüsü (Dürdane = dürdane) olacaktır.

String.Format() – String biçimlendirmek

Bazen string ifadelerimizi formatlamak(biçimlendirmek) isteyebiliriz.Örneğin elimizde bir tarih varsa bunu anlamlı bir şekilde yazdırmak isteyebiliriz.Veya bir kordinat verilerini anlamlı bir biçimde yazdırmak isteyebiliriz.Şimdi aşağıdaki kod parçacıklarına bakalım;

int x = 3,     y = 4; // {0} yazan yere 3, // {1} yazan yere 4 değeri gelecek ve // coord değeri "3,4" olacaktır. string coord = String.Format("{0},{1}", x, y); // 2 string ifade ("Koordinat" ve "3,4") toplanıyor(birleştiriliyor). Console.WriteLine("Koordinat:" + coord);

DateTime date = new DateTime(2008, 8, 23); string dateText = String.Format("{0:d}", date); Console.WriteLine(dateText); dateText = String.Format("{0:D}", date); Console.WriteLine(dateText);

İlk örnekte gerekli açıklama yapılmıştır.2 örnek için ise öncelikle DateTime türünde bir değişken tanımlanmıştır.Ardından String sınıfının Format fonksiyonu kullanılarak bu tarihe 2 çeşit biçim verilmiştir.İsterseniz yukarıdaki kod parçasının ekran çıktısına bir bakalım;

23.08.2008 23 Ağustos 2008 Cumartesi

Bu tarz biçimlendirmelerin bazılarını listeyelim;

{0:d}	23.08.2008
{0:D}	23 Ağustos 2008 Cumartesi
{0:f}	23 Ağustos 2008 Cumartesi 13:20
{0:F}	23 Ağustos 2008 Cumartesi 13:20:05
{0:t}	13:20
{0:T}	13:20:05
{0:y}	Ağustos 2008

Bir string ifadenin sol veya sağ yanına boşluk karakteri doldurmak istiyor iseniz yine String.Format() metodunu kullanabilirsiniz.Aşağıdaki örneğe göz atalım;

string str; str = String.Format("-{0,15}-", "ASP.NET"); Console.WriteLine(str); str = String.Format("-{0,-15}-", "ASP.NET"); Console.WriteLine(str);

Bu durumda birincisinde ASP.NET yazısının sol tarafına 15-7=8 tane boşluk karakteri eklenecek, ikincisinde ise sağ tarafına eklenecektir.

Şimdi ekran çıktısına bakalım;

-        ASP.NET- -ASP.NET        -

Contains() - EndsWith() – StartsWith()

Contains metodu,bir string ifadenin diğer bir string ifade de içinde geçip geçmediğini bulur,geçiyor ise true geçmiyor ise false döndürür.

Örneğin,

string str1 = "Dürdane"; if(str1.Contains("dane") == true)

gibi bir karşılaştırma doğrudur.”Dürdane” kelimesi, “dane” kelimesini içermektedir ve yukarıdaki if koşulu true değerini döndürecektir.

Benzer şekilde EndsWith() ve StartsWith() metodlarıda aldıkları stringi,karşılaştırma yaptıkları stringin başında mı sonunda mı olduğu bilgisini döndürür.

string str1 = "Dürdane"; if (str1.StartsWith("Dür") == true) {     // "Dürdane" kelimesi "Dür" kelimesiyle başlamaktadır.     // if bloğu işletilecektir. } if (str1.EndsWith("dane") == true) {     // "Dürdane" kelimesi "dane" kelimesiyle sonlanmaktadır.     // if bloğu işletilecektir. }

Split() – String’i dizi halinde parçalamak

Bir string içerisindeki kelimeleri bazı karakterleri kullanarak ayırmak istiyor isek bu durumda Split() metodunu kullanmamız gerekir.”2,3” koordinat bilgisinden 2 ve 3 sayılarını elde etmek istiyor isek Split() metodu harika metoddur.

Aşağıdaki kod parçacığında x,y,z değerleri string ifadeden parçalanıp elde edilmektedir.

// Koordinat bilgisi string olarak tutuluyor. string coord = "2,3,5"; // Bu komut sonrasında 3 string ifadeden oluşan bir dizi elde edilecektir. // xyz[0] = "2" // xyz[1] = "3" // xyz[2] = "5" string[] xyz = coord.Split(','); int x = int.Parse(xyz[0]); int y = int.Parse(xyz[1]); int z = int.Parse(xyz[2]); // Ekran Çıktısı : 2,3,5 Console.WriteLine("{0},{1},{2}", x, y, z);

SubString() – String içindeki alt stringleri elde etmek

Bir string ifadenin içinde,4.karakterden başlayıp 10 karakter elde etmek istiyor isek bu durumda kullanacağımız metod SubString() metodudur.

Aşağıdaki kod parçalarını inceleyelim;

string text = "Visual Studio 2005"; Console.WriteLine(text.Substring(7,4));    // Ekran Çıktısı : "Stud" Console.WriteLine(text.Substring(7));      // Ekran Çıktısı : "Studio 2005"

ToLower() – ToUpper() – ToLowerInvariant() - ToUpperInvariant()

Bir string ifadedeki bütün karakterleri küçük veya bütün karakterleri büyük yapmak istiyor iseniz bu fonksiyonlar işinizi görecektir.

Aşağıdaki kod parçasına ve ekran çıktısına bakalım;

string text = "Visual Studio 2005"; Console.WriteLine(text.ToLower());          // visual studio 2005 Console.WriteLine(text.ToLowerInvariant()); // visual studio 2005 Console.WriteLine(text.ToUpper());          // VİSUAL STUDİO 2005 Console.WriteLine(text.ToUpperInvariant()); // VISUAL STUDIO 2005

ToLower() ve ToUpper() metodları karakterleri olduğu gibi büyük veya küçük harfe çevirirken, ToLowerInvariant() ve ToUpperInvariant() metodları ise ilgili dile göre değişim göstermektedir. Uygulamayı gerçekleştirdiğim işletim sistemi ingilizce olduğundan dolayı küçük ‘i’ karakterleri büyük harfe çevrildiğinde ‘I’ haline dönüştürülüyor.”Invariant” kullanılmayan metodlarda ise ‘i’ harfleri olduğu gibi ‘İ’ harfine dönüştürülüyor.

Trim() – TrimEnd() – TrimStart() – Boşlukları kaldıran fonksiyonlar

Trim metodları, string içindeki boşluklarla bir derdiniz var ise çok işinize yarayacaktır.

Aşağıdaki kod örneğini ve açıklamaları inceleyelim;

string text = "    Visual Studio 2005    "; /* * Trim()       : Text'in başındaki ve sonundaki boşlukları kaldırır * TrimEnd()    : Text'in sonundaki boşlukları kaldırır. * TrimStart()  : Text'in başındaki boşlukları kaldırır. * */ Console.WriteLine("-{0}-", text.Trim());        // -Visual Studio 2005- Console.WriteLine("-{0}-", text.TrimEnd());     // -    Visual Studio 2005- Console.WriteLine("-{0}-", text.TrimStart());   // -Visual Studio 2005    -

Replace() – Yer değiştirme fonksiyonu

Bir string içindeki bir değeri başka bir değerle değiştirmek istiyor iseniz Replace() metodunu kullanmanız gerekmektedir.

Aşağıdaki kod parçacığını inceleyelim;

string text = "Visual Studio 2005"; string text2 = text.Replace("sual", "SORU"); Console.WriteLine(text2);   // "Ekran Çıktısı : ViSORU Studio 2005"

StringBuilder() – String inşa eden sınıf

Birden fazla stringi birleştirmek istiyor iseniz + ile bunu yapabilirsiniz.(str4 = str1+str2+str3).Fakat bu yöntem performans açısından iyi değildir.Onun yerine StringBuilder sınıfını kullanmak yazılımınızı daha kaliteli hale getirecektir.

Aşağıdaki kod parçacığını inceleyelim;

StringBuilder builder = new StringBuilder(); // .Net dilleri dizi içinde tanımlanıyor string[] diller = new string[] { "C#", "VB", "C++" }; builder.AppendLine(".Net Dilleri.."); builder.AppendLine();   // Boş bir satır ekleniyor. for (int i = 0; i < diller.Length; i++) {     // Sırasıyla bütün diller yanyana ekleniyor.     builder.Append(diller[i] + " "); } // 0.karakterden başlayarak "-->" ifadesi ekleniyor. builder.Insert(0, "-->"); // Ekrana ToString() metodu ile yazdırılıyor. Console.WriteLine(builder.ToString());

Makalemin en başında belirttiğim örneklerde birden fazla string’in birleştirilmesiyle ilgili örneklerin hepsi StringBuilder sınıfı kullanılarak yapılmalıdır.

Her ne kadar çözüm yolları çok basit olsa da incelediğimiz metodlar bir yazılımda sık sık kullanabileceğimiz metodlardır.Burada makalemi bitiyorum. Diğer makalelerimde görüşmek dileğiyle,hoşçakalın.