Ali's Alltop
Bir önceki gönderimde (Zen Coding) bahsettiğim Zen Coding ile ilgili yeni bir kaynak buldum. Bu kod için Visual Studio Add-in'i geliştirmeye başlayacağımı söylemiştim. Konu ile ilgilenip, Python kodlarını .NET ortamında compile etmeyi denemeye başladım. Tam IronPython ve IronPyhton Studio ile içli dışlı olmuşken ve bir noktaya gelmişken, Amerika'nın daha önce keşfedildiğini fark ettim...
Einar Regilsson'un Blog'unda, konu ile ilgili bir çalışma yaptığını gördüm. Blog yazısını buradan okuyabilirsiniz. Yazının sonlarına doğru "an installer" linki ile setup dosyasına, "the source" linki ile de kaynak kodlarına erişebilirsiniz. Emeğe saygı olarak hotlink yapmıyorum. Aslında mantık konusunda doğru yolda ilerlediğimi kaynak kodlara baktığımda görmüş oldum. Regilsson da IronPython modülünü kullanarak çalışma yapmıştı. Tek farkı kodu olduğu gibi Python kaynağında bırakıp, on-the-fly compile işlemini IronPython ile yapmış.
Add-in'i çektim, denedim. Hem Visual Studio 2005 hem de 2008'de sorunsuz olarak çalıştı. Kurulumdan sonra Visual Studio'nuz içerisinden bir kısayol ataması yapmanız gerekiyor sadece. Kısaca adımlar şöyle;
- Visual Studio kapalı iken Add-in kurulumunu tamamlayın.
- Visual Studio'yu açın, "Tools" menüsünden "Add-in Manager..." seçeneğini seçin.
- Listede "ZenCoding" karşısındaki iki işaret kutusunu da seçip onaylayın.
- "Tools" menüsünden "Options..." seçeneğini seçin.
- "Environment" dalından "Keyboard" yaprağını seçin.
- Komut listesinden "ZenCoding.VisualStudio.ZenCodingAddIn.Expand" seçeneğini seçin.
- "Use new shortcut in" kutusundan "HTML Editor Source View" seçeneğini seçin (eğer ZenCoding özelliklerinin code-behind dosyaları, resource dosyaları gibi diğer bütün yerlerde aktif olmasını istiyorsanız seçimi "Global" olarak bırakabilirsiniz).
- "Press shortcut keys" kutusunda istediğiniz kısayolu tuşlayın (ben CTRL+E kullanmayı tercih ettim).
- Kutuyu onaylayarak çıkın.
Evet böylelikle ZenCoding add-in'i kullanıma hazır hale gelmiş oluyor. Hemen bir aspx dosyası açıp denemeye başlayabilirsiniz.
table#tblMain.tblClass>th.tblHeaderClass+tr#trSub_$.tblRowClass*5>td#tdSub_$.tblCellClass*3Yazıp CTRL+E yaptığınızda şu çıktıyı görmek korkunç güzel birşey :)
<table id="tblMain" class="tblClass">Bir süre sonra kısa bir video hazırlayıp yazıyı editlemeyi düşünüyorum. Vakit bulabilirsem tabi...
<th class="tblHeaderClass"></th>
<tr id="trSub_1" class="tblRowClass">
<td id="tdSub_1" class="tblCellClass"></td>
<td id="tdSub_2" class="tblCellClass"></td>
<td id="tdSub_3" class="tblCellClass"></td>
</tr>
<tr id="trSub_2" class="tblRowClass">
<td id="tdSub_1" class="tblCellClass"></td>
<td id="tdSub_2" class="tblCellClass"></td>
<td id="tdSub_3" class="tblCellClass"></td>
</tr>
<tr id="trSub_3" class="tblRowClass">
<td id="tdSub_1" class="tblCellClass"></td>
<td id="tdSub_2" class="tblCellClass"></td>
<td id="tdSub_3" class="tblCellClass"></td>
</tr>
<tr id="trSub_4" class="tblRowClass">
<td id="tdSub_1" class="tblCellClass"></td>
<td id="tdSub_2" class="tblCellClass"></td>
<td id="tdSub_3" class="tblCellClass"></td>
</tr>
<tr id="trSub_5" class="tblRowClass">
<td id="tdSub_1" class="tblCellClass"></td>
<td id="tdSub_2" class="tblCellClass"></td>
<td id="tdSub_3" class="tblCellClass"></td>
</tr>
</table>
-- Ekleme 25.11.2009 18:25
Bahsettiğim videoyu hazırladım ve yükledim. Hem kurulum sonrası ilk ayarların yapılışını hem de bir örnek uygulamayı gösterdim. Umarım işinize yarar, iyi seyirler: http://screencast.com/t/ODkxOTY1MjQt
Bir çok yaygın Javascript framework'ünün üzerine oturduğu temel hep aynı; CSS seçimi. CSS seçimi ile ne kastediyoruz, bir veya daha fazla nesneyi, CSS için kullandığımız tanımlama sentaksları ile yakalamak. Daha sonrasında da bunu manipüle etmek.
Örneğin;
<div class="test">
<span id="spn1">
<span id="spn2">
<span id="spn3">
</div>
$('div.test span').html('test');Prototype, Mootools, Midori... diğer bütün frameworkler de aynı veya benzer söz dizimleri ile bu işlemi gerçekleştirebilirler (yeri gelmişken Türk bir yazılımcı Aycan Gülez'in -http://twitter.com/aycangulez- elinden çıkan Midori'ye tekrar saygı/tebrik).Yazının konusuna yaklaşırsak, CSS seçicileri mantığını tam tersten değerlendiren bir proje ile karşılaştım. Zen Coding, bir çok farklı editör desteği ile (maalesef Visual Studio yok) verilen CSS seçicisini genişleterek HTML'ini sunuyor. Aslında uygulama metin bazlı bir girdi alıp, metin bazlı bir çıktı veren bir uygulama. Visual Studio add-in'i yazma planlarım var :)
Ne anlatmak istediğimi örneklerle görmek için video'ya bir gözatın:
Kendi sitesindeki bir online editor ile denemek için de http://zen-coding.ru/demo adresini ziyaret edebilirsiniz.
İlgi çekici bir proje. Dediğim gibi Visual Studio add-in yapma planlarım var. Eğer tamamlarsam bu blog aracılığı ile sizinle paylaşıyor olacağım...
Bir ASP.NET projemizde, CheckBoxList içerisindeki her bir işaret kutusunun açıklamasının mouse işaret kutusu üzerine geldiğinde tooltip olarak çıkması yönünde bir ihtiyaç başgösterdi. Teknik olarak CheckBoxList içerisindeki her bir kayda ayrı ayrı standart tooltip vermek mümkün değil.
Aklımıza gelen ve sırayla uyguladığımız üç çözüm seçeneği şunlar oldu:
- CheckBoxList kullanımından vazgeçip, alanı repeater'a çevirmek istediğimiz gibi özgür olmak.
- Bir javascript array içerisinde ilgili açıklamaları ve ID'leri tutup, sayfa yüklendiğinde prototype.js ile (projede prototype kullanılıyor) bunları tooltip'e çevirmek.
- Soruna bir CSS yaklaşımı ile çözüm aramak.
İlk seçeneği, projenin bulunduğu durum, bu checklist'in sayfada ve codebehind'da kullanım durumu vs. göz önünde bulunarak ilk etapta eledik. Ardından ikinci çözüm için çalışmaya başladık ve bu çözümü gerçekleştirdik. Ancak sayfada bu işlemin uygulanacağı çok fazla sayıda checkbox olduğu için (yaklaşık 1000 adet) çözüm istediğimiz performansı sağlamadı. Sayfanın açılışı, JS çalışmasından dolayı 10 saniye kadar yavaşladı.
İki başarısız girişimden sonra CSS seçeneğini değerlendirmeye başladık. Asıl yazı amacıma yavaş yavaş yaklaşıyoruz. Burada isteğimizi gerçekleştirmek için 3-5 satırlık bir CSS yeterli oldu. Sonuçta elde ettiğimiz çıktı, CheckBoxList kullanılan her yerde kullanılabilecek bir çözüm oldu. Tek ön koşul var: CheckBoxList'teki her bir nesnenin açıklamasının normalde görüntülenmiyor olması. Örnek olarak şu görüntüye bakabilirsiniz:
Eğer checkboxların açıklamaları buradaki gibi görünmüyorsa, bunları tooltip olarak değerlendirebiliriz. Checkboxlist'i normal şekilde bind ediyoruz. Bu durumda görüntü şu şekilde oluyor:
İlk önce checkboxlist'imize bir class atıyoruz (.NET tarafından CssClass). Örneğin bu class chkOptionHover olsun. Şu şekilde bir style ekliyoruz:
Her ne kadar görsel olarak kullanılabilir olmasa da isteğimiz aslında teknik olarak gerçekleşmiş durumda. Bir kaç küçük CSS dokunuşu ile label'larımızı gerçek birer tooltip'e döndürüyoruz. Bunun için sadece :hover class'ına bazı eklemeler yapıyoruz. Tabi ki istediğiniz şekilde görsel oluşturabilirsiniz. Bu benim tercihim:
Gerçek bir tooltip'e benziyor değil mi? Uygularken Checklist'e class verip yukarıdaki satırları eklemek dışında da bir geliştirme gerektirmiyor. Ön koşulların sağlandığı durumlarda oldukça uygulanabilir bir çözüm olduğunu düşünüyorum. Ayrıca IE, Firefox ve Chrome (webkit) uyumlu olarak çalışıyor. Tarayıcıdan tarayıcıya tooltiplerin konumları değişebiliyor, ancak hepsi kabul edilebilir sınırlar içerisinde kalıyor. Arzuya göre genişlik de belirterek daha tooltip-benzer bir görüntü de elde edilebilir. Ötesi CSS yeteneklerinize kalmış...
Umarım sizin de işinize yarar...
table.chkOptionHover td labelBu sayede checkboxlistteki her bir checkbox'a ait açıklamalar görünmez hale geliyor. Bir önceki style'da belirttiğimiz td'nin hover'ına bir class daha vererek üzerine geldiğimizde açıklamaların görünmesini sağlıyoruz.
{
display:none;
}
table.chkOptionHover td:hover labelBelirttiğim style eklendikten sonra mouse over efekti şu duruma geliyor:
{
position:absolute;
display:block;
}
Her ne kadar görsel olarak kullanılabilir olmasa da isteğimiz aslında teknik olarak gerçekleşmiş durumda. Bir kaç küçük CSS dokunuşu ile label'larımızı gerçek birer tooltip'e döndürüyoruz. Bunun için sadece :hover class'ına bazı eklemeler yapıyoruz. Tabi ki istediğiniz şekilde görsel oluşturabilirsiniz. Bu benim tercihim:
table.chkOptionHover td:hover labelYukarıdaki uygulamalardan sonra artık tooltip'imiz oturmuş duruma geliyor ve aşağıdaki gibi bir görüntü oluşuyor:
{
font-size:10pt;
font-weight:bold;
padding:5px;
position:absolute;
background-color:yellow;
-moz-border-radius:3px;
-webkit-border-radius:3px;
display:block;
}
Gerçek bir tooltip'e benziyor değil mi? Uygularken Checklist'e class verip yukarıdaki satırları eklemek dışında da bir geliştirme gerektirmiyor. Ön koşulların sağlandığı durumlarda oldukça uygulanabilir bir çözüm olduğunu düşünüyorum. Ayrıca IE, Firefox ve Chrome (webkit) uyumlu olarak çalışıyor. Tarayıcıdan tarayıcıya tooltiplerin konumları değişebiliyor, ancak hepsi kabul edilebilir sınırlar içerisinde kalıyor. Arzuya göre genişlik de belirterek daha tooltip-benzer bir görüntü de elde edilebilir. Ötesi CSS yeteneklerinize kalmış...
Umarım sizin de işinize yarar...
Tebdil-i Mekanda ferahlık varmış. Blog'uma yeni tasarım giydirdim. Diğer tasarım da iyiydi hoştu ama yazı alanı çok dardı...
Aslında kendime blog giydirme işi çıkarmadan önceki amacım bir-iki yazı yazmaktı ama artık erteledik göründüğü kadarıyla onları...
Bir müşterimiz için geliştirdiğimiz intranet sistemine entegre ettiğimiz ClickOnce uygulaması ile ilgili enteresan bir problem yaşadık geçtiğimiz hafta. Uygulama, müşteride 5 bilgisayarda kullanılacaktı. Bunlardan 3 tanesinde sorunsuz çalışan uygulama, 2 makinede aynı hata ile çalışmayı reddediyordu. Daha kurulum esnasında hiç bir kontrol yapmadan ADODB 7.0.3300.0 sürümünün kurulu olması gerektiği uyarısı ile hata alıyorduk. Haliyle MDAC güncellemesi yapıldı. Ancak hiç bir şey değişmedi. Uygulamadan bütün data ile ilgili dependencyler bile kaldırıldı, yine hata almaya devam ettik. İşin ilginci yazılım Framework 2.0 ile yapılmışken bahsi geçen sürüm 1.1 sürümüydü.
Daha sonra incelemem sırasında, adodb ile ilgili bir dizini "Program Files" altında "Primary Interop Assembly" dizininde gördüm. Bunun üzerine Google'da hayat kurtaran aramayı yapmayı akıl ettim: "adodb pia". Bu aramayı yaptıktan sonra çıkan sonuçların büyük bir kısmında "Office 2003 PIA"lardan bahsediyordu. Office 2003 PIA'nın içeriğine baktığımda bulunan sürümün aranan sürüm olduğunu gördüm. Hızla Office 2003 PIA'ları download edip kurdum veeee sorun çözüldü.
Her ne kadar çok anlamsız bir ilişki gibi görünse de böyle bir ilişki var. Bu yazıyı başka bir yerde okusam, kesin birşeylerin yanlış ifade edildiğini düşünürdüm ama birebir böyle.
Enteresan...
Çok katılmayı istediğim, ama bunun bir hayal olduğunu bildiğim Berlin Javascript konferansı tamamlandı (http://jsconf.eu). Katılımcılar arasında kimler yoktu ki? John Resig (jQuery), Thomas Fuchs (script.aculo.us), Dion Almaer (Ajaxian), Steve Souders (Velocity), Jörn Zaefferer (jQuery UI)...
Gidemedik, ama sağolsunlar Blip üzerinden sunumların bir kısmını paylaşmışlar. Videoları aşağıda bulabilirsiniz...
İç geçirerek inşallah seneye diyoruz artık. Napalım...
Dostum Ümit Öncel'in bir yazısından öğrendiğim Lose/Lose süper bir oyun. Detayları okumadan oynamayın lütfen :) İlk önce Visual Studio dosyalarından silmeye başlıyorsa hemen oynamaya başlamayı planlıyorum...
http://www.tekno-cafe.com/index.php/oyun/dunyanin-en-tehlikeli-bilgisayar-oyunu
Bir oyun örneği ve 5000'e yaklaşan puanlar olan highscore listesini (manyaklar listesi de diyebiliriz) görmek için ise http://www.stfj.net/art/2009/loselose
Script.aculo.us'un mimari Thomas Fuchs'un yeni marifeti Scripty2 ile bugün tanıştım. Henüz alpha release. Güzel bir kütüphane gibi görünse de yine Prototype tabanlı olması bir eksi. Eski bir Prototype fanı olarak onu unutmuş değilim. Sadece artan jQuery eğilimini görmezden gelememiş biriyim :) Scripty2'nin açılış sayfasına adres vermeyeceğim. Doğrudan dokümantasyondan bir sayfaya örnek vereceğim. Beni tanıyanlar kütüphaneyi niçin beğendiğimi bu sayfadan çok net anlayacaktır: http://scripty2.com/doc/scripty2 fx/s2/fx/transitions.html
Tam da kütüphanelerden bağımsız bir animasyon kütüphanesi nasıl olurdu acaba diye düşünürken, yine bir Thomas Fuchs üretimi çıktı karşıma, Émile. Henüz hazır sayılmaz, ama 50 satır kodla harikalar yaratılmış. Henüz kendi sitesi bile yok, kendi blog girdisine bir göz atabilirsiniz: http://mir.aculo.us/2009/11/07/a-50-lines-of-code-javascript-animation-framework-say-hello-to-emile
Daha önceki gönderilerimde, Perculus ürünümüzün başarısını anlatmıştım.
Bugün (aslında saat itibariyle dün), çalışma arkadaşlarım beni ve bu işin diğer elebaşı Cengiz'i çok mutlu edecek bir jest yaptılar. Bizim için aşağıdaki kocaman pastayı yaptırmışlar, pastayı ilk kesme şerefini de bana verdiler sağolsunlar.
Çok mutlu oldum. İş yerinde çalıştığım kişilerin "iş arkadaşı"ndan çok dost olduğunu bir kere daha gördüm.
Teşekkürler dostlarım, iyi ki varsınız. Sizlerle beraber daha bir çok başarı tesadüf olmayacak. Kadir kıymet bilmeyenler hiç önemli değil. Siz biliyorsanız bu bana yeter. Sizler oldukça ben de bu çatı altında olacağım...
Ali
Uzun süredir var olan ancak ücretli olan Ample GUI SDK artık ücretsiz. Özellikle XUL tabanlı arabirim elemanları, IE'ye SVG desteği getirmesi gibi özellikleri ile göz dolduruyor ve ilgi çekiyor. Bütün web developerların arşivinde bulunmalı...
http://www.amplesdk.com
Bugün artık zengin internet uygulamaları geliştiren her web yazılımcısı, jQuery, Prototype, Dojo, MooTools gibi farklı farklı Javascript kütüphanelerinden birini mutlaka kullanıyor. Hatta artık $ olmadan bir javascript tümcesine başladık mı garip gelir haldeyiz...
Bu kütüphaneler ortada yokken, yada varken ama henüz "experimental" seviyeyi geçmediği dönemlerde, ben ve benim gibi web geliştiriciliği yapan bütün yazılımcıların ağzının suyunun akmasına sebep olan uygulamalar görmeye başladık. Google kaynaklı GMail, Google Maps, Google Docs... gibi uygulamalar gerçekten o gün için hayal gücümüzün sınırlarını zorluyordu.
Gitgide javascript çerçeve çalışmaları ile tanıştıkça artık bu tip uygulamalar hiç birimiz için çok uzak değildi. Ama Google zamanında bunları nasıl yapmıştı? Kendi bir çerçevesi olmadan pure javascript mi yazmıştı? Tabi ki hayır. Bugün dahi halen hiç bir Google uygulaması, yukarıda örneklerini verdiğim bildik javascript kütüphanelerini kullanmıyor.
Bir zamanlar kulaktan kulağa efsane gibi yayılan, daha sonra doğruluğuna emin olduğumuz ama sır gibi saklanan Closure artık Google tarafından açık kod olarak dağıtılmaya başladı.
Şu noktada artık alışkanlıklarımızı değiştirir miyiz, bir jQuery'den bir Prototype'tan vazgeçer miyiz bilemem. Ama işin içinde Google varsa incelemeye değer. İncelediğimde gördüğüm ince zeka örnekleri gerçekten hala çok etkileyici...
Buyrun: http://code.google.com/closure
İlginç bir proje. Bilindik çok kullanılan yazılımları tek seferde bilgisayarınıza kurmak için tasarlanmış bir sistem. İstediğiniz yazılımları uzunca bir listeden seçiyorsunuz. Daha sonra size küçük bir installer download ettiriliyor.
Bundan sonra start'a basıp kahve almaya gidiyorsunuz... Çünkü Ninite, seçtiğiniz programları sırayla download ediyor (son sürümlerini) ve size tek soru sormadna kuruyor... Şaka gibi ama gerçek :)
Buradan deneyin lütfen: http://ninite.com
