Archive for the ‘ Ajax ’ Category

Ajax Update Panel (Yükleniyor…)

Uptade panel ile ilgili birden fazla başka blog sağlayıcılarında yazmıştım.Bu bloglarda Uptade paneli bazı ajax kontrolleri ile birleştirmiş ve denemelerimi paylaşmıştım.Şimdi ise Ajax extender serisini yazmaya başladığımda kontrolün basit bazı parametrelerini anlatmaya çalışacağım.
 
Aşağıdaki kod örneği ile bir metin kutusu ve bir button vardır.Button a tıklandığında Yükleniyor yazısının ve birde loading adında dönen bir resmin görüntülenmesini sağlayacağım.Buda bir çok sitede gördüğümüz belirli sürelerde kullanıcıya gösterilen post öncesi mesajlardan biridir ve Ajaxla yapılır.
 
Yukarıdaki kod blogunu biraz detaylarına bakarsak şu dizilim Uptade Panel i daha rahat anlayabiliriz.
UptadePanel >ContentTemplate
içeriğinde TextBox ve OK buton form nesneleri yerleştirilmiştir.
UptadeProgress>ProgressTemplate
içeriğinde ise loading adındaki OK buttona tıkladığımızda gösterilecek olan resim nesnesi vardır.
kod sayesinde elde etiğim form görüntüsü aşağıdaki gibi olacaktır.
 
   
UptadeProgress içeriğindeki resim ve yazının web görüntüsünde çıkmadığını sanırım farkettiniz.Çünkü biz UptadeProgress içeriğinin kullanıcın buttona tıkladığında görüntülenmesini istiyoruz.Bunun içinde source modda iken OK button adındaki form nesnemisin Click olayına şu aşağıda belirttiğim kodları yazıyoruz.
System.Threading.Thread.Sleep(2000) ‘parantez içerisindeki rakam değiştirilebilir bu dizilişle OK button nesnesi UptadeProgress için 2 saniye kadardır.Tüm bu  işlemden sonra web uygulamanızdaki button tıklandığında kullanıcılarınız şu tarz bir görüntü alırlar.
Evet Uptade Panel ile olan ilk kolay çalışmamızı bitirmiş olduk.Fakat Uptade Panelin özelliğini elbette tamamını bir bloga sığdıramazdım, sıkça diğer parametreleride uygun zamanda sizinle paylaşacağım.Başarılar

Daha fazla teknik makalle yeni blog sayfamda gitmek için tıklayın

2010
04/26
POSTED BY
CATEGORY
Ajax
Yorum bırakın

Ajax Calender Extender (Ajax ile takvim nesnesi)

Bir zamanlar kullanıcıdan bir tam tarih almak için uzun uzun drop down list yapardık.Onlarda zevkliydi ama artık daha zevkli hale geldi.Ajax Calendar Extender tüm tarih formatlarınızı kullanıcıyı yormadan almamızı sağlıyor.Web sayfalarında java scriptlerle yada nostalji takvim ekleri dışında Ajax hayli basit ve görünümüde daha zengin, şimdi sizinle bu blogda adım adım Ajax takvim nesnesini kullanalım..
 
Önce kod bloğumuz….
Yukarıdaki basit kodlardanda anlaşıldığı gibi 1 adet TexBox var ve ardındanda Calender Extender eklenmiş durumda
diğer parametrelerde ise
TargetControlID olarak Texbox ID tanımlanmış
Format="dd.MM.yyyy" buda tarih formatımız.
tüm bu kod yapısı bize şu ekran görüntüsünde bir takvim kazandıracaktır.
 

Daha fazla teknik makalle yeni blog sayfamda gitmek için tıklayın

2010
04/23
POSTED BY
CATEGORY
Ajax
Yorum bırakın

Ajax Hover Menu Extender (Ajax kontroller ile menu yapmak)

Ajax Hover Menu Extender , AjaxControlToolkit içindeki kulanışlı ve tasarımcılar için hayli önemli bir araç, zira bir linke tıkladığınızda sağa,sola,aşağıya veya yukarıya açılan yeni panellerde sunulan yeni link seçenekleri yada bilgi sunacağınız yeni alanları size sağlıyor.
 
.
Yukarıdaki kod blogu size aşağıdaki görüntüde olan türde bir web sayfası sunacaktır.
 Elbette bu görüntüye bakarak sıradan diyebilirsiniz.Ama ilk resimde farkettiğiniz üzere "Css Class" düzenlenmemiş hali budur işin içine CSS girdiği zaman bu Hover Menu Extender üzerinde gayet gösterişli çalışmalar yapabilirsiniz. örneğin bir sonraki resim gibi.Fakat bu gösteriş benim resmimdende kaynaklanıyor olabilir…

Daha fazla teknik makalle yeni blog sayfamda gitmek için tıklayın

2010
04/21
POSTED BY
CATEGORY
Ajax
Yorum bırakın

Ajax Modal Popup Extender

Ajax Control Toolkit’te ve Modal Popup extender benim vazgeçemediğim bir araç oldu.Çoğu kez hata yönetimlerimde tercih etsemde, bazende kullanıcıları belirlediğim olaylara odaklanmasını sağlamak için kullandım.Bu ajax özelliğini bir çok sitede görüyoruz şimdi izlediğiniz Space alanında dahi var hemen bir örneğine bakalım.
 
Örneğin alltaki resme tıklayın…
 
Basitçe anlamak gerekirse arka planın hafif karartılarak belirlediğiniz nesnenin ekranın merkezine çıkartılması olayına Modal Popup Extender diyebiliriz. Elbette space resimler için bunu kullanmış fakat siz kullanıcınızdan bilgi alacağınız formlarda gönderebilir eklentiyi daha ileriye taşıyabilirsiniz.Bu özelliğe yakın örneklerle javascriptler varsada Ajax ile daha şık bir yapıda olduğunu söylemeliyim.
 
Ben örnekte Login alanı yapacağım Giriş yapın linkine tıklayan kullanıcı Modal Popup içinde Kullanıcı adı ve şifresini girecek ve Login olacak.Bu basit örnek için çözüme sırasıyla bir (linkbutton), sonra bir (panel) ve (modal popup extender) ekleyeceğim bütün bunlardan sonra aşağıdaki kod bloğumu elde etmiş olacağım.
  
 
Bu kodları açıklarsak,
anlaşılacağı gibi Link button ID="Login" ve Modal ExtenderExtender TargetControlID="Login" dir ve bu linke tıklandığında  PopupControlID="Panel_Modal_Content"adlı son kısımda kodu görülen panelin açılmasını istiyoruz demek oluyor.Burda dikkat edilmesi gereken önemli detayları birde adım adım yazmayı istiyorum.
 
1-Linkbutton ID ile Extender TargetControlID aynı olmalıdır.
2-Panel ID ileExtender PopupControlID aynı olmalıdır.
3-ExtenderCssClass belirlenmeli ve düzenlenmelidir (aşağıda açıklayacağım)
4-DropShadow="true" değerini almalıdır.
 
bu adımları anlamışsak artık asp panelin içine bahsettiğimiz gibi bir hazır login kontrolü yazalım…
Modal Popup Extender uygulamak zengin fikirlerinize göre değişir benim örneğim ise bu kadardır.Bittimi hayır en can alıcı nokta ki bu ekranın karatılması aşamasında birde CSS yazacağız. Projede CSS classlar eklemek style kullanmayı önceki bloglarda anlatmıştım.Bu yüzden direk yazıyorum.
 
.Panel_Modal
{ background-color:Black;
 filter:alpha(opacity=70);
 opacity:0.7;}
 
.Panel_Modal_Content
{
 border: thin solid #808080;
 background-color: #333333;
 padding: 2px;
 width: 450px;
 color: #FFFFFF;
}
 
özellikleri yukarıdaki gibi style dosyanıza eklerseniz.Modal Popup Extender ile Login girişi pencerenizde hazırlanmış olacaktır. 
 

Daha fazla teknik makalle yeni blog sayfamda gitmek için tıklayın

2010
04/21
POSTED BY
CATEGORY
Ajax
Yorum bırakın

Ajax Tab Container

Gayet beğendiğim bir Ajax Control Toolkit üyesi daha…
 
Tabcontainer ve tab panel tasarımlara hem hoş bir görünüm hemde içeriklerin bir araya toplanmasında gayet iyi bir çözüm.Malesef web sayfalarında pek sık göremiyorum.Bunun nedenide sanırım bu tür bir özelliği tasarımcıların değil daha çok yazılımcıların kullanması yada web tasarımcılarının site içeriklerini toplamak değil dağıtarak sayfa kalabalığını tercih etmeleri.Birazdan kodlarını yazmaya başlayacağımız aracın bitmiş web görüntüsü aşağıdaki ilk resim gibi olacak. 
Yatay sekmeli bu panellerimizle aynı türden bilgileri bir araya toplamak hoş bu benim resmimdende kaynaklanıyor olabilir .
 
Hemen kodlarımıza başlayalım.
 
Her Ajax aracını eklerken static yapmanız gereken çözümünüze Script Manager eklemektir ki bu diğer araçların tümü içinde geçerlidir.
Bu aracı direk kod yazarak design modda yazarak yada Tollbox sekmenizde bulunan aracı sürekle bırak şeklindede çözüme ekleyebilirsiniz.Fakat yinede design modda bazı özellikleri düzenlemek gerekecektir.
 
1- TabContainer ekleyip ve TabContainer tagları arasına TabPanel’imizi ekliyoruz.TabPanel tagları arasınada ContentTemplate ekliyoruz…
 
bu kısa kod bloğu ile ilk Tab Container tamamlanmış oluyor…Tabikii tek bir Tab Panel pek bir işe yaramıyacağından 2 ncisinide yapmamız gerek.
Ama daha önce bu kodları biraz açarak tanıyalım…
TabContainer  Bu aracın kendisidir ve çözüme 1 adet eklenir
TabPanel  Bu sekmeli panellerdir ve kaç adet sekme panel istersek o kadar eklemeliyiz.
Header Text  Sekmenin ismidir
ContenrTemplate Her TabPanel de 1 Content Template olabilir ve düzenlenecek içerik bu iki tag arasında olacaktır.
 
2- 2nci TabPaneli eklemek için yapmamız gereken yukarıdaki kodların aynısını <cc1:TabContainer><cc1:TabContainer> arasına yeniden yazmaktır.Bu 3ncü TabPanel içinde böyledir.Bu işlemlerden sonra aşağıdaki gibi bir kod blogumuz olacaktır.
 
 
Oldukça kolay oldu ve artık kullanıma hazır Panel kontrollerde olduğu gibi yine içerikler ContentTemplate tagları arasıda düzenlenerek kullanmaya başlayabileceğiz.Son resimde göreceğiniz gibi bende basit bir table ile resim ve bir kaç yazı yazarak örneği aktarmaya çalıştım.Başarılar
 

Daha fazla teknik makalle yeni blog sayfamda gitmek için tıklayın

2010
04/21
POSTED BY
CATEGORY
Ajax
Yorum bırakın

Ajax Collapsible Panel Extender

1-Yeni bir Asp.Net sayfasına Collapsible Extender eklemek için Toolbox penceresinden extender alarak basitçe form etiketlerine alalım.Bu işlemden sonra web çözümünüze AjaxControls referansınız sayfanız üstüne eklenecek , ayrıca birde Bin klasörünüz otamatik oluşacak.Bu işlem sadece bir kez yapılacak, sonraki kontrolleri eklediğinizde sürüm değişmedikçe bu çözümünüze eklenmeyecek , ilk extender eklerken sayfanıza Ajax Extenders kısmından Script Manager’ı form etiketleriniz içine eklemenizde gerekmektedir.Elbette bunu bir sonraki bloglarda detaylı anlatmayacağım.
2- Extender eklendikten sonra artık her bir Collapsible panel için ilk panelimizi eklememiz gerekli şöyleki;
 İlk asp panel  ID=”CoolHeader” panelin içine birde yukarıdaki gibi bir Label atalım
Cssclass=”collapsePanelHeader” – Cssclass=”collapsepanel” panelin görünümleri için kullanacağımız iki ayrı class belirleyelim.(gerekli değildir)
3- Ve şimdi 2 nci panelimizi ekleyelim.
Her Ajax Collapsible panel için 2 adet asp panel oluşturmalıyız.Bu extender için en önemli noktadır.Bunu atlarsanız muhtemelen hatalarla karşılaşırsınız.Ayrıca tek bir Collapsible Panel Extender ile de bu Ajax kullanmanın pek bir mantığı yoktur.Yani buda birden fazla Extender ekleyeceğiz anlamına gelmektedir.
 
 
Biraz toplayalım…Şuana kadar yaptığımız 3 işlem oldu CollasiblePanel Extender kontrolünü sayfamıza sürekledik. 2 adet asp panel ekledik ve bir panel içinede Label koyduk.Ayrıca bu panellere CssClass larda tanımladık ve şimdide devam ediyoruz.
 
4-Şimdi Collapsible Panel Extender davranışını tanımlayacağız bunun için şunları yazmalıyız
Bu işlemden sonra ilk Collapsible işlemi tamamlandı fakat burada biraz detaya inelim 
TargetControlID="CoolContent" 2nci eklediğimiz paneldi ve bu paneli kontrolün denetimine tanımladık
ExpandControlId="CoolHeader" 1nci eklediğimi paneldi ve bu paneli de diğer panelin açılıp kapanırken kullancağımızı tanımladık.
TextLabelID="CollLabel_1" 1 nci panelimizin içine bir Label koymuştuk onu burda belirtiyoruz
ExpandtextText="Daha az" Bu tiplerle panellerimiz açılıp kapanırken dinamik yazacak sözcükleri belirliyoruz
CollapsibleText="Daha fazla"
ExpandDirection="Vertical" Buradada Yatay veya Dikey (Horizantal) panel açılımını belirtiyoruz
AutoCollapse-AutoExpand False bunlarla ise panellerin otomatik açık mı kapalımı olmasını gerektiğini tanımlıyoruz
 
EVET buraya kadar artık (ilk) Collapsible Panel Extender işi bitmiş oluyor…Fakat hala bitmedi kodlar gözünüzü korkutmasın zira bunu projede uygularken gayet basit ben biraz detaylı anlatmak istediğim için biraz uzuyor.Şimdi Gelelim 2 nci Collapsible Panel Extender yapmaya 
 
5- Kod tekrarlamamak ve zamandan kazanmak için aşağıdaki işlemi dikkatlice yapmalıyız.
 
Anladığınız üzere ilk oluşturulan 2 Panel ve Extender tanımlamalarımızı kopyaladık ve alt kısıma yapıştırarak kısa yoldan Collapsible Panellerimizi çoğaltık siz bu panelleri çoğaltarak alt alta açılan ajax paneller yapabilirsiniz.
6- Bu işlemden sonra 2 nci eklenilen Panel ID lerini Extender tanımı yaptığımız yerden değiştirmeyi unutmuyoruz 
 
 7-Artık panellerinizin içini dilediğiniz içerikle doldurabilirsiniz.
Daha önce CoolContent ID leri olan Panel tagları arasında olan kısımlara dilediğiniz içerikle doldurabilirsiniz.
 
Önemli olan son kopyalama işleminden sonra benim gibi panel ID lerini ve exdender’da tanımlarınıda değiştirdiğimi yukarıdaki resimden anlamış olmanızdır.Bu şayde artık bir Ajax Collapsible paneliniz var demek oluyor son işlem olarak "CssClass" ları projenizdeki styletheme dosyanızda biçimlerini tamamlamak kalıyor.Başarılar

Daha fazla teknik makalle yeni blog sayfamda gitmek için tıklayın

2010
04/21
POSTED BY
CATEGORY
Ajax
Yorum bırakın

Asp.Net ve Ajax Kontrollerini blogluyorum

Uzun bir süredir Asp.Net projelerinde uygulayabileceğim ajax kontrollerine yoğunlaşmıştım.Ve mutlu son mevcut yayınlanmış extender kontrollerin tümüne artık hakimim …Bunlarla çalışırken tabikii bilgisayarımda bir klasör dolusu parça kod ve açıklama notları doldu.Hala Yedekleme alışkanlığı edinemediğimden hain bir format hadisesine maruz kalmaması için ,ayrıca konuya meraklı beyinlerden bunları saklamamak içinde hemen bloglamaya başlıyorum.
 
Web blog ve çalışmalarımın yer aldığı web siteside sanırım bir kaç aya kadar hazır olacak.Diğer konunun uzmanı arkadaşlar gibi hazır blog veya bilindik temalar kullanmak istemediğimden işi biraz uzatığımın farkındayım.
 
Bu blogla birlikte Ajax kontrollerini alt alta uzun uzuun yazacağız.
Bundan sonraki bloglara göz atmadan Buradaki blogu bir göz atınız. ve AjaxControllTollkit paketini Visual Studio 2008′ e alın bunun nasıl yapacağınızıda buradaki blogtan görebilirsiniz
 
 
2010
04/21
POSTED BY
CATEGORY
Ajax
Yorum bırakın