ProAkademi.NET
 
 Web Programlama Web Programlama
 Programlama Programlama
 Grafik Grafik
 Veri Tabanı Veri Tabanı
 İşletim Sistemleri İşletim Sistemleri
 Network Network
 Donanım Donanım
 Güvenlik Güvenlik
 Genel Konular Genel Konular
  KATEGORİLER
 
Kullanıcı Adı :
Şifre :
  ÜYE GIRISI
 
 
  Hakkımızda
  Forum
  Blog
  Haberler
  İpuçları
  Destekleyenler
  İletişim
  PROAKADEMİ.NET
 
Son Üye : EkremCe
Kayıtlı Üye : 528
  İSTATİSTİKLER
 
 
Ana Sayfa > Makale > Web Programlama > ASP.NET
 
ASP.NET İle ProgressBar Kontrolü
 
Windows masaüstü uygulamalrında kolaylıkla kulalnabildiğimiz ProgressBar kontrolünün, ASP.NET web uygulamalarında nasıl kullanılabileceği konusunda detaylı bir makale.
 

Değişen zaman ve buna paralel olarak gelişen teknoloji ile birlikte, insanların ihtiyaçlarıda günden güne değişim göstermekte. Firmalar ise bu değişime kayıtsız kalmamak adına, sürekli yeni teknolojilerin daha etkin kullanımını sağlayarak müşterilerine daha kaliteli, sorunsuz ve kesintisiz hizmet götürmek üzere sürekli çalışıyorlar. Son yıllarda en hızlı gelişen teknoloji olan internet ağı artık hepimizin evine kadar ulaşmışdurumda ve biz bu teknolojiyi şimidilerde alışveriş yapmak, sinema bileti almak, faturalarımız ödemek ve hatta birçok bankacılık işlemimizi oturduğumuz yerden yapmak için kullanıyor ve bunu yaparken de bir yandan sörf yapıp müik dinleyebiliyor sonuç olarak da hoşça vakit geçirebiliyoruz. Sanıyorum internet teknolojilerinin bu denli yaygınlaşıp hayatımıza girmesinin, insanlık tarihi boyunca gerçekleşmiş en önemli devrimlerden biri olarak kabul ediliyor olması, artık herkesçe bilinen su götürmez bir gerçek halini aldı

Tabiki internet geliştikçe, insanların ihtiyaçları ve beklentileri arttıkça, biz yazılım geliştiricilerin sorumlulukları ve çözmeleri gereken problemler de katlanarak çoğaldı. Bugünlerde insanlar internete sadece zaman geçirip eğlenmek ya da aradıkları bilgiye ulaşmak amacıyla bağlanmıyorlar. Artık internet, birtakım günlük işlerin ve ihtiyaçların halledildiği farklı bir alternatif olarak karışımızda. Fakat bu günlük işlerin yapılabildiği yazılımlar ortaya çıkarken yazılan kodlar, çıkarılan algoritmalar günden güne daha karmaşık hale geliyor. Yapılan işlemlerin süresi uzadıkça aşılması gereken hız problemleri ve yazılım ürünlerini kullananlarında sıkılmadan işlerine devam etmelerinin sağlanması biz yazılım geliştiricilerin görevlerinden biri haline geliyor.

Daha önceleri sıkça kullanılan desktop uygulamalarında uzun süreli işlemlerin yapılması sırasında, kullanıcıyı birşeylerin yapıldığı konusunda ikna edebilmek  ve belki de programı istenmeyen bir şekilde sonlandırmasını engellemek için ProgressBar kontrolü kullanımı yazılımcılar tarafından sıkça kullanılan bir yöntemdi. Fakat yeni trend olan internet teknolojilerinde ve bu teknolojileri kulalnan yazılımların geliştirilmesini sağlayan araçlarda ProgressBar benzeri bir yapının bulunmaması hepimizin en çok eksikliğini çektiği bir yapı (Burada tabiki Microsoft Visual Studio.NET uygulamasından bahsediyorum ve malesef ProgressBar kontorlü bu yazılm içerisinde ASP.NET ile uygulama geliştirenlerin kullanımına sunulmadı ) Fakat yinede elimizdeki imkanlarla bu kontrolü kodlayarak, web uygulamalarımızda kullanmak imkansız değil. İlerleyen kısımlarda kod örnekleriyle, bu yapının nasıl kullanılacağına dair önemli düzeyde bilgi sahibi olacaksınız.

Ama öncelikle windows ugulamalarımızda kolaylıkla kullanabildiğimiz bu yapının web’de neden bizler için bu kadar problem yarattığına kısaca değinelim.

İnternet’in Anatomisi ve ProgressBar

Internet altyapısının inşa edildiği temel, hepimizin bildiği gibi HTTP (Hyper Text Transfer Protocol) üzerine inşa edilmiş durumdadır. Bu protokolün en önemli özelliği de İstemci / Sunucu (Client / Server) mimarisine dayanması. Bu mimariye göre istemci bilgisayar sunucuya bir istek (request) gönderir ve sunucuda bu isteği yorumlayarak istemcinin anlayacağı dilde bir cevap (response) paketini geri döndürür. Fakat bu işlemler arasında istemci bilgisayar ile sunucu bilgisayar arasında bir bağlantı söz konusu değildir. Sadece istek gönderirken bir bağlantı kurulur, aynı şekilde de cevap döndürülürken arada bir bağlantı vardır. Malesef bu arada geçen işlem zamanında iki bilgisayarın şu an birbirlerinin tam olarak hangi işi yaptıkları konusunda bir fikirleri yoktur. Bu aslında bir handikap olarak görünsede internet teknolojilerinin güvenliğinin sağlanması açısından şu an için şart olan mimmari bir yapıdır. Tabi ki gün gelir ileride neler olur şimdiden kestirmek güç...

Windows masaüstü uygulamalarında durumun böyle olmaması sebebiyle bilgisayarda o an hangi işlemin yapıldığına dair bilgi elimizde herzaman mevcuttur. Yani programımızın her yerinden bir başka noktadaki işlemle ilgili bilgilere, değerler ulaşmamız mümkündür. Bu sayede de daha önceden kestirebildiğimiz maksimum işlem zamanı ile şu an geçen zamanı oranlayarak kolayca ProgressBar kontrolü kullanabilir, kullanıcılarımıza da şu an hangi işlemin yapıldığı, işlemin hangi safhada olduğu bilgisi gibi verileri kolaylıkla sağlayabiliriz.

Bu mantığın bir benzerini web üzerinde inşa edebilmek için sunucu bilgisayar ile sürekli iletişim halinde olmamız gerekmekte.

Şimdi detaylı olarak bu yapıyı nasıl gerçekleyebileceğimize bir göz atalım.

ASP.NET ile ProgressBar

Yandaki Solution Explorer penceresinden de görebileceğiniz gibi, örnek uygulamamızın çalışacağı ana dosya Demo.aspx adıyla ifade edilen asp.net web formumuz olacak. Demo.aspx içerisinde HTML <DIV> etiketleri ile ifade edeceğimiz sayfamız üzerinde çeşitli katmanlarımız bulunacak ve ProgressBar görüntüsünü de bu DIV objelerinin width yani genişlik parametrelerini değiştirerek sağlayacağız. Bu parametreyi değiştirmek içinde JavaScript dilinden faydalanılacak.

Burda dikkat etmemiz gereken önemli bir konu da; uygulamamız içerisinde sunucudaki durumu gözlemlemek için sunucuyu sayfayı belli aralıklarla refresh etmek yerine sürekli bağlantıda kalma yöntemini uygulayacağımız olması. Yani temel mantık şu; uygulama sürekli sunucu ile iletişim halinde, sunucuda sürekli kullanıcının yapmak istediği işlem yapılıyor ve sunucu zamanı geldiğinde duurm bilgisini istemci makinaya ileterek DIV objesinin genişliğini artırıyor. Bu da bize ProgressBar görüntüsü yakalamamızı sağlıyor :)

Demo.aspx ile sunucu sürekli iletişim halinde olmasına rağmen Demo.aspx dosyasının refresh olmasını istemeyiz tabiki. Bunu sağlamak içinde yine HTML dilinde bulunda IFRAME objesini kullanıyoruz. Burada gizli bir IFRAME içerisinde asıl işi yapacak olan Islem.aspx dosyamızın çalışmasını sağlıyoruz. O da belli aralıklarla sunucuyla iletişime geçerek durum bilgisinin aktaramını sağlayacak kodu çalıştırıyor. Bu aktarımı sağlayan kod da ProgressCore.vb dosyası içerisinde implemente edilmiş durumda.

Uygulamamız çalıştırıldığında alınacak ekran görüntüsü yukarıdaki şekilde olacaktır. Bu görüntüyü sağlayan Demo.aspx içerisindeki HTML kodları da saşıda verilmekte...

Burada asıl önemli olan kısımlardan birisi de Demo.aspx içerisinde bulunan JavaScript kodları. Ugulama içerisinde bu kodlar kullanılarak DIV objesinin genişliği artırılıyor ve ProgressBar görüntüsü sağlanıyor. Ayrıca IFRAME içerisinde bulunan ve bu şekilde çalışan Islem.aspx adlı web formumuz da yine bu JavaScript fonksiyonları ile çağrılıp çalıştırlıyor, ve işlem tamamlandığında da yine bu fonksiyonlarla en baştaki duruma geri dönüş sağlanıyor. Şimdi bu kodlara bakacak olursak;

<script language="javascript">
            var objMesaj = null;
            var objBar = null;
            var limitDoldu = false;
            function HerseyiBaslat(btn){
                        if(btn.value == Demoyu Tekrar Hazırla ){
                                   eval("location.href = Demo.aspx ");
                        }else{
                                   BarGoruntule(true);
                                   window.frames[ progressIFrame ].location.href = "Islem.aspx";
                        }
            }
            function ProgressBarAyarla(yuzde, mesaj){
                        if(yuzde <= 100){
                                   if(objMesaj == null){
                                               objMesaj = document.getElementById( uyariMesajlari );
                                   }
                                   if(objBar == null){
                                               objBar = document.getElementById( progressBar );
                                   }
                                   if(mesaj != null && mesaj != ){
                                               objMesaj.innerHTML = mesaj;
                                   }
                                    if(yuzde > 0){
                                               objBar.innerHTML = . ;
                                   }
                                   else{
                                               objBar.innerHTML = ;
                                   }

                                   objBar.style.width = yuzde.toString() + % ;
                                   if(yuzde == 100){
                                               BarGoruntule(false);                           
                                               var progressStartButton = document.getElementById( progressStartButton );
                                               progressStartButton.value = "Demoyu Tekrar Hazırla";                                 
                                               var uyariMesajlari = document.getElementById( uyariMesajlari );
                                               uyariMesajlari.innerHTML = Örnek Uygulama Tamamlandı. ;
                                   }
                        }
                        else{
                                   limitDoldu = true;
                        }
            }
            function BarGoruntule(progressCalisiyorMu){
                        var progressBarBolgesi = document.getElementById( progressBarBolgesi );
                        var progressControlArea = document.getElementById( progressControlArea );
                        if (progressCalisiyorMu == true ){
                                   progressBarBolgesi.style.display = block ;
                                   progressControlArea.style.display = none ;
                        }
                        else{
                                   progressBarBolgesi.style.display = none ;
                                   progressControlArea.style.display = block ;
                        }
            }
</script>

Demo.aspx dosyamızın içinde asıl işi yapacak olan, yani progressBar kullanarak grafiksel olarak iş akış durumunu  göstereceğimizin işlein bulunduğu kodun Islem.aspx içerisinde yazıldığını daha önce de yukarıda belirtmiştik. Bu projede örnek olarak Islem.aspx içerisinde dögnü içerisinde 100 adet işlem parçacığı (thread) yaratıyoruz. Döngü içerisinde bu parçacıklar yaratılırken de biri yaratıldıktan sonra 0,05 sn beklenmesini ve diğerinin bu süre tamamlandıktan sonra yaratılmasını web uygulamamıza söylüyoruz. Bu da işlem süresi boyunca kullanıcılarımıza, işlerin başarıyla yürütüldüğüne dair bilgilendirme ekranını ProgressBar kullanarak gösterebilmemizi sağlıyor. Yani toplam100 * 0,05 = 5 sn içerisinde tüm işlem yapılıyor ve kulalnıcı da bunu ProgressBar ile takip edebiliyor.

Uygulamamız sorunsuz çalıştığında elde etmemiz gereken görüntü yukarıdaki gibi olacaktır. Islem.aspx dosyamız içerisinde bulunan VB.NET kodumuza bakacak olursak, bu kodunda aşağıdaki figürde gösterildiği gibi olduğunu görürüz.

Burada dikkat edilmesi gereken konu ProgressCore isimli class’ın kullanılma mantığıdır. İşleme başlamadan önce ProgressCore.IslemeBasla() metodu kullanılarak uygulama içerisinde kritik bölgeye girildiği ve gerekli ilk atamaların yapılarak ProgressBar gösteriminin başlaması gerektiği uygulamaya bildiriliyor. Aynı şekilde de ProgressCore.IslemiBitir() metoduyla da kritik bölgeden artık çıkıldığı ve gösterimin sona erdirilmesi mesajı class dosyasına iletiliyor. ProgressCore.Ilerle() metodu ise, işlemin bir basamak daha ileriye gittiğini ve ProgressBar gösterimi için kullanılan DIV objesinin genişliğinin bir birim daha artırılması gerektiği yine aynı class’a bildiriyor. Bu class içerisinde de .NET Framework içerisinde HtmlTextWriter objesi ile sayfaya bu 3 metod için yazılması gereken HTML etiketleri özellik değerleri ile birlikte gönderiliyor. Yani ProgressBar gösterimi için kullanıllan dosyamız Demo.aspx dosyası. Fakat bu dosya içerisinde oluşturulan DIV objeleri, IFRAME içerisinde bulunan Islem.aspx içerisindeki ProgressCore.vb de bulunan metdolar ile çağrılıyor. Ve bu metodlar tarafından da DIV objesinin enişliği periyodik zaman dilimleri içerisinde (bu örnek için 2 thread yaartılması arasında geçen zaman) değiştiriliyor.

ProgressCore.vb içersindeki kodları inceleyecek olursak;

Yukarıda anlatılan kodlardaki gibi bir programlama yapısı kullanıldığında Herhangi bir işlem için işlem süresini ProgressBar gibi bir görsellik ile kullanıcılarımıza sunabiliriz. Tüm işlemler bittikten sonrada ekranımızdaki görüntü aşağıdaki gibi olacaktır.

Sonuç

Windows masaüstü uygulamalarında sıkça ve kolaylıkla kullandığımız ProgressBar kontrolünün, web uygulamalarında nasıl kullanılabileceği ve kullanılırken ne gibi problemlerle karşılaşılabiliceği gibi konulara, bu makalede mümkün olduğunca detaylı olarak değinmeye çalıştım. İnternetin doğası gereği istemci ve sunucunun birbirinden bağımsız ve herhangi bir alışveriş olmaması durumunda tamamen bağlantısız çalıştığını söyledik. Bu da durum kontrolü yapmamızı ve sunucuda gerçekleşen olaylar hakkında kullanıcıyı bilgilendirmenin zorluklarından bahsettik. Fakat sonuç olarak bunun çözülemez bir problem olmadığını, çeşitli programlama yapılarıyla nasıl sorunsuz çalıştırılabileceğini hepbirlikte inceledik.

Son günlerde popüler hale gelen AJAX metodolojisi ile de bu gibi işlemleri hayata geçirmek aslında mümkün. Fakat şu an için AJAX teknolojisi ile XMLHttpRequest kullanarak bu gibi işlemleri yapmanın birtakım kısıtlamaları bulunmakta. Bu yapı, belli süreler içerisinde arka planda sunucu ile iletişime geçmekte ve sonuçları XML olarak tarayıcıya gönderme temeli üzerine dayandırılmakta. Henüz birtakım özellikler konusunda yeterli düzeyde olmaması ve sunucunda tam bir cevap beklemesi, arada çıkabilecek bağlantı problemlerinde kesintiye uğrayıp anlamsız sonuçlar verebileceği gibi konular gözönünde bulundurulursa, şimdilik ProgressBar kontrolünü makalede anlatılan temelle uygulanması mantıklı gibi görünüyor. Fakat ileride AJAX yapısının da ulaşacağı noktaları ve kullanım alanlarını şimdiden tahmin etmek çok da zor değil.

Makalede anlatılan yapıyı ASP.NET kullanıcı kontrolü (User Control) haline getirdiğinizde uygulamalarınız içerisinde dağıtarak kullanmak da çok zor olmayacaktır. Ancak incelediğimiz yapının şu haliyle de okuyan herkese bir fikir verdiğini ve uygulamalarında nasıl kullanabilecekleri konusunun da akıllarında az çok şekillendiğini düşünüyorum.
Zaman ayıran herkes için faydalı olması dileklerimle...

Not: Makalede anlatılan örnek uygulamanın tüm proje kodlarını indirmek için lütfen tıklayınız.

Kaan TEZGEL
kaan@kaantezgel.com

 
Etiketler: progressbar yükleniyor
 
Yazar: Kaan TEZGEL
Tarih: 08.02.2009 18:07:45 | Okuma: 3402 | Oy: 2,125

EkleBunu Sosyal Paylaşım Butonu

Eklenmiş yorum bulunmuyor!

Yorum Ekle
Yorum eklemek için kayıtlı üye olmanız gerekiyor! Üye olmak için tıklayınız.

 
Copyright 2008 ProAkademi.NET (v 1.4) - Tüm hakları saklıdır.
Tasarım: Hüseyin YILDIRIM [AriSToR] // ZirveArt
Clicky Web Analytics
 
 
Buluton Yazilim ve Internet Hizmetleri