Wizard Web Server Control
Bildigimiz gibi web tarafinda ,kullanicidan bazen bibiri ile ilskili veriler toplamak amaciyla bir dizi form tasarlanir.Bu formlar arasinda gerekli bilgiler transfer edilerek formlar arasindaki iliski ve tutarlilik saglanir.Örnegin kullanici kayit formu , siparis formu ... gibi. Bu tür seri işlemlerin ayni form üzerinde bu mantikla çalismasi için ASP.NET 2.0 da Wizard denilen bir kontrol ile tanisacagiz.Wizard birçok form araciligi ile yapilan kullanici tarafli bilgileri toplamamizi ve yönetmemizi kolaylastirmaktadir.
Wizard , steplerden olusmaktadir.Step bir form olarak düsünülebilir.Aslinda Wizard daha önceden de yazmis oldugum MultiView kontrolü içermekte olup her bir step MultiView içinde bulunan View ‘ler olarak düsünülmelidir.Stepler arasinda dolasarak işlem yapabilir ve stepler için spesifik kontroller yazabiliriz.Mesela bir diger stepte , kullanici dogrulamasi başarıli olursa işlem bitecek ancak dogrulanamazsa baska bir işlem geçeklestirilecekse bunu yönetmek için kriterler tanimlayabiilrsiniz.
Wizard kontrolü Control class’ indan türetilmekte ve BaseWizarrdStep ‘te View’ den türetülmektedirler.Asagidaki sekilde Wizard kontrolünün tüm özellikleri,metodlari,child kontrolleri liistelenmistir. Sekilde de gördügümüz gibi Wizard kontrolü WizardSteps koleksiyonuna sahiptir.WizardSteps, yazilimcinin kullanici için gelistirdigi ayri ayri arayüzleri (interface) içeren steplerden olusmaktadir.
Wizard kontrolü Header alanina sahiptir ve kullanıcının bulundugu Step’e özgü bir baslik bilgisi atamak için kullanilabilir.Wizard ayrica SideBar kontrolüne de sahiptir.Bununla Wizard’in solunda Step’lerin Title bilgileri ile bir menü olusturularak , kullanıcının menüdeki linklere tiklayarak istedigi işlemi yagmasini saglayabiliriz.Wizard kontrolünün Properties ‘ lerine bakildiginda tamamiyla özellestirilebilir oldugunu göreceksiniz.
BaseWizardStep, StepType adli bir özellige (property) sahiptir.Bu özelligin içerdiklerini söyle kisaca açiklayalim :
· WizardStepType.Auto : Navigasyon yani ilerleme durumu Wizard’da bulunan “Previous” ve “Next” butonlari ile saglanmaktadir. Stepleri Wizard’a sag tiklayarak “Add/Remove WizardSteps...” kismindan ekledigimizde stepler birer index numarasina sahip olacaktirlar.Dolayisiyla WizardStepType Auto olarak seçilirse , stepler arasindaki geçis sirasi burada bulunan siralamayi esas alarak gerçeklesecektir. Bu varsayilan (default) değerdir.
· WizardStepType.Complete : Stepler arasinda son adim olarak seçilmek istenenin WizardStepType ‘i Complete olarak seçilir.Bu durumda navigation butonlar (prev,next,finish) bu stepte yer almayacaktirlar.
· WizardStepType.Finish : Bu da en son adim olup burada sadece “Previous” ve “Finish” butonlari yer alır.
· WizardStepType.Start : Bu ilk adimdir ve sadece “Next” butonu yer alır.
· WizardStepType.Step : Buda start ile finish stepleri arasinda bulunur.”Next” ve “Previous” butonlari yer alır.
Sekil 1 : Wizard Kontrol Hiyerarsisi
Bu örnegimde Form üzerine ToolBox’ tan seçtigim bir Wizard yerlestiriyorum ve örnek olarak bilgisayar parçalarini seçebilecegimiz ve sonunda bu seçilen parçalari listeleyebilecegimiz bir örnek yapmis olacagiz.
Visual Studio 2005 i açarak FileàNewàWeb Site seçerek “ WizardDemo” adli ASP.NET Web Site bir proje açalim. ToolBoxtan bir adet Wizard alarak forma birakalim.Wizard da sag tiklayarak “Add/Remove WizardSteps..” seçelim ve tek tek Stepleri ekleyelim.Steplerde önemli olan “Title” ve “WizardStepType” özellikleridir.Title , Stepin adi olacaktir ve hem arayüzde hem de kod tarafinda (code behind) bu step ile ilgili spesifik işlemler yapmamiz için gerekli olacaktir.WizarStepType ise yukarda detayli olarak açiklandigi üzere hem geçis siralamasi hem de baslangiç ve sonuç işlemlerini yönetmemiz için gereklidir.Benim uygulama için hazirladiklarim :
Sekil 2 : Step Ekleme
Simdide Sidebarda ki linklere tiklayarak steplerde bulunacak kontrolleri eklemeye baslayabiliriz.
Step 1 : iki adet Label.
Step 2 : Iki adet radiobutton
Step 3 : Dört adet radiobutton
Step 4 : 2 ader radiobutton
Step 5 : 4 adet RadioButton
Step 6 : 2 adet RadioButton
Son Step : Listeleme veya mesaj görüntülemek için bir Label
Header eklemek için , Wizarda sag tiklayarak “Edit Templates” à “Header Template” seçelim.
Sekil 3 : Header Template Seçimi
Asagida da görüldügü üzere Header Template içerisine bir adet Label koyuyoruz ve istediginizi “Text” özelligine yaziniz.
Sekil 4 : Header Template Design View
Bunu tamamladiktan sonra sag tiklayarak “End Edit Template” diyerek işlemlerimize devam ediyoruz.
Wizard için yazdigim kodlar da :
CODE BEHIND :
using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) Wizard1.ActiveStepIndex = 0; } protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e) { Wizard1.Visible = false; if (lblSummary.Text == string.Empty) { Response.Write("Thank you for visiting our site.<br /> Maybe next time you will get a new one from us"); } else { Response.Write("<b>Thank you for choosing our products...</b> <br /><br />" + "Here is your computer list : <br />" + lblSummary.Text); } } protected void Wizard1_NextButtonClick(object sender, WizardNavigationEventArgs e) { if (Wizard1.WizardSteps[e.NextStepIndex].Title == "Özet") { lblSummary.Text = String.Empty; foreach (WizardStep ws in Wizard1.WizardSteps) { foreach (Control ctrl in ws.Controls) { if (ctrl is RadioButton) { if (((RadioButton) ctrl).Checked) { lblSummary.Text += ((RadioButton)ctrl).Text + "<br />"; } } } } } } }
Proje çalistirilip tüm steplerdeki veriler girildiginde son step söyle görünecektir.
Daha sonra Finish butonuna tiklandiginda da:
Eger kullanici hiçbir seçim yapmadan, sayfa açildiginda direk “Özet” e tiklarsa :
Buradan da Finish butonuna tiklaninca :
Sonuç olarak Wizard kontrolü, tek form içerisinde biribiri iile iliskili verileri ayni ekrandan almamazi saglamaktadir ve de göründügü üzere hem yönetimi hem de kullanimi çok kolay.