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;

1. Visual Studio kapalı iken Add-in kurulumunu tamamlayın.
2. Visual Studio'yu açın, "Tools" menüsünden "Add-in Manager..." seçeneğini seçin.
3. Listede "ZenCoding" karşısındaki iki işaret kutusunu da seçip onaylayın.
4. "Tools" menüsünden "Options..." seçeneğini seçin.
5. "Environment" dalından "Keyboard" yaprağını seçin.
6. Komut listesinden "ZenCoding.VisualStudio.ZenCodingAddIn.Expand" seçeneğini seçin.
7. "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).
8. "Press shortcut keys" kutusunda istediğiniz kısayolu tuşlayın (ben CTRL+E kullanmayı tercih ettim).
9. Kutuyu onaylayarak çıkın.

table#tblMain.tblClass>th.tblHeaderClass+tr#trSub_$.tblRowClass*5>td#tdSub_$.tblCellClass*3

<table id="tblMain" class="tblClass">
<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>

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.

<div class="test">
<span id="spn1">
<span id="spn2">
<span id="spn3">
</div>

$('div.test span').html('test');