Emre AYRILMAZ

Uzun zamandır Javascript ile yazışmıyordum. Son zamanlarda ise yediğimiz içtiğimiz ayrı gitmez oldu. Sık kıllandığım ipuçlarını paylaşıyorum.

İlk ipucu;
Js dosyalarını referans ekleme.
Snippet -> ref

Burada amaç, başka bir Js dosyasından (IntelliSense olarak) faydalanabilmek. Referans vermek istediğiniz Js dosyasını sürükleyip bırakmanız yeterli.

Diğer bir ipucu;
Javascript fonksiyonları için kullanım bilgisi ekleme.
Snippet -> summary, param, returns

function KartEkle(kartno,ay,yil) {
 ///<summary>Yeni Kredi Kartı Ekleme</summary>
 ///<param name="kartno" type="string">16 haneli kredi kart bilgisi</param>
 ///<param name="ay" type="int">2 haneli ay bilgisi -> son kullanma tarihi</param>
 ///<param name="yil" type="int">4 haneli yıl bilgisi -> son kullanma tarihi</param>
 ///<returns>Kart başarılı olarak sisteme eklenirse 0 hata olursa -1 döner</returns>
 
 var kredikart ....

Buradaki amaç, fonksiyonu kullanırken açıklayıcı bilgiler vermek. param içindeki name özelliği ile fonsiyon parametre adının aynı olması önemli. type bilgisinin gerçekliği tamamen mantıksal.

Bu yazının son ipucu ise;
IntelliSense'den kopya çekme tekniği.

Şahsen bizzat ben kendim çoğu zaman Javascript (built-in) fonksiyon adlarını hatırlayamam.

-Bu gibi durumlar için bir adet dummy değişken oluşturulur.
-Başlangıç değerini fonksiyon tip kümesine (örneğin string) uygun bir değer atanır.
-Gerisini IntelliSense halleder.

Geçenlerde Asp.Net sunucu^server kontrollerinden Takvim^Calendar üzerine uygulama geliştiriyorduk. Önemli günleri vurgulamak çok klasik bir örnektir. Bizde bu örnek üzerinden yola çıktık. Farklı olarak, gün seçildiğinde sonuçları popup pencere ile göstermeye karar verdik.

Örneği besleyecek basit bir xml verisi hazırladık ve veriyi kod içinde kullanmayı sağlayan basitte bir class^nesne yazdık. Gerisi Takvim kontrolünü kullanamaya kaldı.

Sonuçları popup pencerede nasıl göstereceğimizi anlamak için Takvim kontrolünü biraz irdelemek gerekir. Kontrol tarayıcı penceresine basıldığında^Render html tarafında bir table etiketine karşılık gelir. Varsayılan olarakta herbir hücredeki^td gün ifadesi anchor^çapa etiketi^tag içinde gösterilir. Hücerelere tıklandığında ise dopostback fonksiyonu tetiklenerek işlem yapılır. Fakat bizim uygulamamızda anchor' a ihtiyaç yok.

O yüzden kontrolün SelectionMode özelliğini None olarak ayarlıyoruz. Böylece hücre içlerine sadece gün değerleri eklenir.

<form id="form1" runat="server">
<div>
    <asp:Calendar runat="server" OnDayRender="Unnamed1_DayRender"
        BackColor="White" BorderColor="#999999"
        CellPadding="4" DayNameFormat="Shortest" Font-Names="Verdana"
        Font-Size="8pt" ForeColor="Black" Height="180px" Width="200px"
        SelectionMode="None">
        <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
        <NextPrevStyle VerticalAlign="Bottom" />
        <OtherMonthDayStyle ForeColor="#808080" />
        <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
        <SelectorStyle BackColor="#CCCCCC" />
        <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
        <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
        <WeekendDayStyle BackColor="#FFFFCC" />
    </asp:Calendar>
</div>
</form>
<script type="text/javascript">
    function openPen(id) {
        window.open("showIT.aspx?id=" + id, "show", "width=300px,height=200px");
    }
</script>

Detayları göstereceğimiz popup penceresini açmak için basit bir JavaScript fonksiyonu hazırlıyoruz.

protected void Unnamed1_DayRender(object sender, DayRenderEventArgs e)
{
    foreach (Day day in DayProvider.GetDays())
    {
        if (day.Date.ToString("dd.MM") == e.Day.Date.ToString("dd.MM"))
        {
            e.Cell.Controls.Clear();
            HyperLink link = new HyperLink();
            link.Text = e.Day.Date.Day.ToString();
            link.NavigateUrl = string.Format("javascript:openPen('{0}')",day.Id);
            e.Cell.Controls.Add(link);
        }
    }
}

Önemli günleri vurgulayacak kodlarımızı Takvim kontrolünün DayRender adlı olayına^event yazıyoruz. Bu olay, her bir gün  için bir kez tekrarlanır.
Uygun günü yakaladığımızda, hücre içini temizleyip yerine openPen JavaScript fonksiyonunu çağıran bir HyperLink kontrolü ekliyoruz.
Bundan sonra çeşitlendirmek mümkün.

Uygulamayı daha iyi anlamak için aşağıdaki projeyi indirip bakmanızda fayda var.

Proje

Asp.Net sunucu^server kontrollerinden TextBox kontrolünü TextMode="Multiline" ayarlanarak kullanıldığında MaxLength özelliği^property çalışmamaktadır. Buraya çözüm için alternatif yöntemler yazacağım zaman zaman.

İlk çözüm yine sunucu kontrollerinden CustomValidator ile olacak.

<asp:TextBox ID="mesaj" runat="server" TextMode="MultiLine" Rows="6" Columns="40" />
<asp:CustomValidator ID="cvM" runat="server" 
                        ErrorMessage="En fazla 400 karakter."
                        ForeColor="Maroon" 
                        ClientValidationFunction="Max400"
                        ControlToValidate="mesaj"
                        ValidationGroup="g1"
                        />
<script type="text/javascript">
    function Max400(source, arguments) {
        if (arguments.Value.length <= 40)
            arguments.IsValid = true;
        else
            arguments.IsValid = false;
    }
</script>

devam edecek...

Geçenlerde bir web proje için resim kırpma^crop ve yeniden boyutlandırma^resize gibi işlemleri yapmam gerekti. Asp.Net'in yapısı gereği illaki JavaScript kullanmak kaçınılmaz bir durum. Günümüzde de oturup deli gibi JavaScript yazılmaz. O yüzden JQuery' den yardım almaya karar verdim.

ClientSide işlemler için Jquery eklentisi olan Jcrop kullandım. Diğer eklentiler arasından en beğendiğim bu oldu. Geri kalan kısımları ile GDI+ ile hallettim.

Uygulama.

Zon zamanlarda Asp.Net Mvc ile uğraşıyorum. Asp.Net uygulamaları geliştiriken code-behind çalışan biriyseniz ilk etapta belli alışkanlıkları değiştirmeniz gerekiyor. Bunun yanısıra alışkanlık kazanmış olduğunuz bazı kontrolleride yer yer kullanamamakta ayrı bir problem teşkil ediyor. Buna örnek olarak WYSIWYG editorleri gösterilebilir.

Fck ve TinyMCE olmak üzere sürü ile editör mevcut fakat basit ve hafif bir editör ihtiyacınız varsa htmlArea benim favorim.

Editör dosyalarını buradan örnek projeyi şuradan indirebilirsiniz.

Gelelim projeye adapte etme kısmına;
- Öncelikle editor klasörünü Content klasörüne kopyalıyoruz.

- creator.js dosyasında ki 2. satırı şu şekilde değiştiriyoruz.

_editor_url = "/Content/editor/";// editörün dosyalarının bulunduğu yol

- creator.js dosyasını editörü kullanacağımız sayfaya link verdikten sonra sayfaya 1 adet texteara ekliyoruz.

<textarea name="content" id="content" style="width: 500px; height: 250px;">
<%= ViewData["Data"] %></textarea>
 
<script language="javascript1.2">
    editor_generate('content');
</script>

artık sayfamızı test edebiliriz.

Geçenlerde Javascript ile bir fonksiyon yazarken, string içerisindeki boşluk karakterlerini başka bir değer ile değiştirmem gerekiyordu ki ilginç bir durum ile karşılaştım (sanırım çok geç kalmışım bunu keşfetmek için).

replace metotunun sadece ilk boşluk için işlem yaptığını gördüm. Çok fazla araştırma gereği duymadım açıkcası.
Basit bir arama algoritması ile çözüm getirdim;

var key = "When your organ grinder has to come to your rent";
var index = key.indexOf(" ", 0);
while (index != -1) {
    key = key.replace(" ", "-");
    index = key.indexOf(" ", 0);
}
alert(key);

Ara ara web tabanlı WYSIWYG editorleri incelerim. GeçenlerdeFck Editor ile oyalandım. Gerçekten de çok başarılı bir editor olduğunu rahatlıkla söyleyebilirim. Gerçi indirip hemen kullanamıyorsunuz ama biraz ilgi ve alaka ile bunu başarıyorsunuz.

Azıcık araştırdım birazcık kurcaladım ufak tefek te eklemeler yaptım. Amacım Asp.Net Web Form' larında hızlı bir şekilde kullanmak.

Neler yaptım bir bakalım;

• Editörün config dosyasını Asp.Net için ayarladım.
• Sadece Asp.Net içinde kullanılacağı için gerekli olmayan dosya ve klasörleri sildim.
• ToolBar' ı basitleştirdim.
• Tek tema kullandım, diğerlerini sildim.
• FileBrowser' ın dört faklı upload tipi için ayrı klasörler ayarladım.
• Rar uzantı için resim dosyası ekledim.
• FileBrowser ile dosya listelerken alternatif satır rengi ekledim.
• FileBrowser' a resimler için önizleme ekledim.

Proje dosyası, fckApplication.

Resimler

Toolbar optimizasyonu

Dosya gösterimi için alternatif satır rengi

Resimler için ön izleme

Geçenlerde 70-528 kitabını karıştırıken aklıma geldi, yazayım dedim.

Javascript fonksiyonları;

function toCharArray(text, splitter) {
    return text.split(splitter);
}

function newString(charArray) {
    var text = '';
    for (var i = 0; i < charArray.length; i++)
        text += charArray[i];
    return text;
}

function splitlT() {
    var text = document.getElementByld('text').value;
    var array = toCharArray(text, '');
    var span = document.getElementByld('sp');
    span.innerHTML = array;
}

function joinlT() {
    var text = document.getElementByld('sp').innerHTML;
    var array = toCharArray(text, '');
    document.getElementByld('sp').innerHTML = newString(array);
}

Html test kodları;

<div>
    text :
    <input type="text" id="text" value="outlook" />
    <br />
    <input type="button" value="Char" onclick="splitIT()" />
    <input type="button" value="String" onclick="joinIT()" />
    <br />
    <span id="sp"></span>
</div>

Web uygulamaları geliştirirken MasterPage kontrolü kullanıldığında içerik sayfalarında kullanılan sunucu kontrolleri istemci tarafında farklı isimlendirilir.
Örneğin, Name özelliği txtAd olan TextBox kontrolünün istemci tarafında aldığı id değeri ctl00_ContentPlaceHolder1_txtAD olacaktır. Bu durumda istemci tarafındaki javascript fonksiyonundan kontrollere erişim çok pratik olmayacaktır.

Şimdi bu durum karşısında nasıl bir tavır takınacağımıza bakalım :)

Örneğimizde, içerik sayfasında bulunan 4 adet TextBox kontrolünün Text özelliğini temizleyen bir javascript fonksiyonumuz olacak.

Nasıl ki MasterPage kontrolü, karışıklığı engellemek için kontrollerin id özelliklerine öneki contentplaceholder ekliyorsa, bizde temizlemek istediğimiz kontrolleri, id özelliği region1 olan bir div içinde kullandık.
Daha sonra div içindeki tüm input kontrollerini aldık ve özelliği text olanları temizledik.

Sayfa içerisindeki Div etiketinin^taggenişliğini tarayıcı genişliği ile dinamik olarak eşitleyen javascript kodu.

WebForum'u içindeki varsayılan^default Button'u değiştirmek için JavaScript kodu aramaya gerek yok. Sunucu tarafında dinamik olarak üretilen WebResource içindeki WebForm_FireDefaultButton fonksiyonunu çağırmak yeterli olacaktır .

Not:
Sayfaya ScriptManger ekleyin.

İkinci basit Web Part'ımız.

Projeyi indir.

Bu aralar dersler de örnek olsun diye WebPart uygulaması yapıyorum. Bazı çıkarımlar olmadı değil. Sürü ile kontrol hazırladım. İyi kötü yazıyorum birkaç tanesini :)

Uygulamanın tamamı.

Küçük bir Globalization sorunu. Gridview içinde silme işlemi için client-side^{kullanıcı taraflı} uyarı ama hem Türkçe hem İngilizce;

TextBox'lar arasında Enter ile dolaşmak için Javascript kodu

Geçenlerde bir soru üzerine araştırırken yaptığım örnek;
Javascript ve Soap ile Web Servis'ini Server-Side^{sunucu taraflı} yapı olmadan Html sayfasında göstermek.

Bunun için basit bir servise ihtiyacımız olacak. Ne kadar basir o kadar iyi :)

Örnek servisin adresi;
http://www.w3schools.com/webservices/tempconvert.asmx

Servisin görüntüsü;

Bizim kullanacağımız CelsiusToFahrenheit metodu olacak.

Resimde de görüldüğü gibi bir Soap Envelop^Zarf oluşturup HttpRequest nesnesi yardımı ile sunucuya göndereceğiz.

Zarfı POSTalayacağımız adresi belirtiyoruz.

Talebin içeriği ile ilgili başlık biligilerini ekliyoruz.

Daha sonra zarfı hazırlıyoruz. Çevireceğimiz değeri zarfın içine ekleyip yolluyoruz.

Sonucu yazdırmayı unutmayalım.

Uygulamayı buradan indirebilirsiniz.

WebForm'larında bulunan kontrollere odaklanmak için bir sürü yöntem varmış inceledik;

Asp.Net 2.0 ile gelen 2 yeni form özelliği;

Programatik yapmak istersek;

Bazen Asp.Net sayfalarımızın client^istemci tarafında durum gereği farklı davranmasını isteyebiliriz. Tabiki JavaScript kodlarını devreye sokarak.
.NET Framework 2.0 versiyonu ile bunu yapmanın yolu ClientScriptManager Class^nesne ının RegisterStartupScript metodunu kullanmak olacaktır.
Bilindiği gibi RegisterStartupScript metodu 1.1 versiyonuda da bulunmaktaydı. Birçok metod gibi 2.0 ile bunun da kullanımı biraz değişmiş :)

Uygulamamızda;

client^istemci tarafında
window.open( [sURL] [, sName] [, sFeatures] [, bReplace]) metodunu

kod tarafında ise
public void RegisterClientScriptBlock ( Type type, string key, string script ) metodunu kullanacağız.