Web Mahsülleri OfisiOfis yazılımcının kara gün dostudur!

İşyerinde kiosklar üzerinde çalışacak bir uygulama yapılmasi gerekiyordu. Bu uygulama fatura ödeme, borç sorgulama, Kent Rehberi, Önemli yer bulma gibi hizmetlerin kiosk üzerinden sağlanması için kullanılacaktı. Kullanılacak teknolojiler daha önceden arkadaşım Remzi tarafindan seçilmiş.
Projeye dahil olunca HTML5, Css3 ve JqTouch kütüphanesi kullanarak gerçekleştirdik. Kiosk üzerinde klavye olmadığı için veri girişi ekranlarında sanal klavye ile veri girişi yaptırmamız gerekiyordu. Aşağıda projenize sanal klavye eklemek ile ilgili uygulamayı görebilirsiniz.  Bu adresteki klavye kodlarını kendimize göre özelleştirerek kullandık. Çoklu form ekranlarında textboxlardan seçileni dolduracak şekilde özelleştirdik.

Öncelikle oluşturduğumuz yeni web sitesine klavye klasörünü ekleyerek içindeki css ve javascript dosyalarını sayfamıza ekliyoruz. Sayfamıza  bir update panel ekleyip içerisine temsili sorgulama için 2Adet TextBox ve bir sorgula butonu ekliyoruz. TextBoxlarımızın CssClass propertylerine textKiosk olarak belirtiyoruz.

Ekranda gözükecek olan sanal klavyemizin tuşlarını ise sayfanın en altına ekliyoruz.

<div id="container">
    <a href="#" class="kapat"><span>Kapat</span></a>
    <ul id="keyboard">
        <li class="symbol"><span class="off">`</span><span class="on">~</span></li>
        <li class="symbol"><span class="off">1</span><span class="on">!</span></li>
        <li class="symbol"><span class="off">2</span><span class="on">@</span></li>
        <li class="symbol"><span class="off">3</span><span class="on">#</span></li>
        <li class="symbol"><span class="off">4</span><span class="on">$</span></li>
        <li class="symbol"><span class="off">5</span><span class="on">%</span></li>
        <li class="symbol"><span class="off">6</span><span class="on">^</span></li>
        <li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
        <li class="symbol"><span class="off">8</span><span class="on">*</span></li>
        <li class="symbol"><span class="off">9</span><span class="on">(</span></li>
        <li class="symbol"><span class="off">0</span><span class="on">)</span></li>
        <li class="symbol"><span class="off">-</span><span class="on">_</span></li>
        <li class="symbol"><span class="off">=</span><span class="on">+</span></li>
        <li class="delete lastitem">Sil</li>
        <li class="tab">Tab</li>
        <li class="letter">Q</li>
        <li class="letter">W</li>
        <li class="letter">E</li>
        <li class="letter">R</li>
        <li class="letter">T</li>
        <li class="letter">Y</li>
        <li class="letter">U</li>
        <li class="letter">I</li>
        <li class="letter">O</li>
        <li class="letter">P</li>
        <li class="letter">Ğ</li>
        <li class="letter">Ü</li>
        <li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
        <li class="capslock"></li>
        <li class="letter">A</li>
        <li class="letter">S</li>
        <li class="letter">D</li>
        <li class="letter">F</li>
        <li class="letter">G</li>
        <li class="letter">H</li>
        <li class="letter">J</li>
        <li class="letter">K</li>
        <li class="letter">L</li>
        <li class="letter">Ş</li>
        <li class="letter">İ</li>
        <li class="symbol"><span class="off">'</span><span class="on">&quot;</span></li>
        <%--<li class="return lastitem">return</li>--%>
        <li class="left-shift">Shift</li>
        <li class="letter">Z</li>
        <li class="letter">X</li>
        <li class="letter">C</li>
        <li class="letter">V</li>
        <li class="letter">B</li>
        <li class="letter">N</li>
        <li class="letter">M</li>
        <li class="letter">Ö</li>
        <li class="letter">Ç</li>
        <li class="symbol"><span class="off">.</span><span class="on">.</span></li>
        <li class="right-shift lastitem">Shift</li>
        <li class="space lastitem">&nbsp;</li>
    </ul>
</div>

Dikkat etmemiz gereken nokta sayfa postback olduğunda updatePanel içerisinde yer alan kontrollerimize eklemiş olduğumuz javascript fonksiyonları vs. çalışmaz duruma gelirler. Bu fonksiyonların tekrardan bağlanması gerekli bunun için birden fazla yol var. Birinci yol Scriptmanager üzerinden çalışmasını istediğimiz javascript kodunu codebehind’dan browsera gönderebiliriz veya updatePanel’in update işleminin başlaması ve bitmesini tespit ederek updatepanelin yenilenmesi bittiğinde istediğimiz javascripti çalıştırabiliriz. Bizim uygulamamızda sanal klavyenin her karakterine bağla bir fonksyion olduğu için tümjavascript dosyamızı tekrar sayfaya eklememiz gerekiyor.

Sayfaya javascript veya css dosyasının tamamını javascript kodu ile ekleme çıkarma işleminin nasıl yapıldığının detayı için bu linki inceleyebilirsiniz.

UpdatePnaelin başlangıç bitişinin javascript ile nasıl algıladığımızı öğrenmek için daha önceki yazımız

<script language="javascript" type="text/javascript">
        var $write;
        var t = 0;

        function loadjscssfile(filename, filetype) {
            if (filetype == "js") { //if filename is a external JavaScript file
                var fileref = document.createElement('script')
                fileref.setAttribute("type", "text/javascript")
                fileref.setAttribute("src", filename)
            }
            if (typeof fileref != "undefined")
                document.getElementsByTagName("head")[0].appendChild(fileref)
        }
        function load() {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
        }
        //updatePanel yenilenme işlemi bitti
        function EndRequestHandler() {

            loadjscssfile("klavye/keyboard.js", "js");
        }
        //updatePanel istek başladı
        function BeginRequestHandler() {
        // alert("begin");
        }
    </script>

Aşağıdaki linkten uygulamanın basit çalışan halini bulabilirsiniz. Genelde bankacılık işlemlerinde kullanıldığı şekliyle sadece rakamlardan oluşan bir klavye kullanmak için istemediğiniz karakterleri html kısmından kaldırıp sadece rakam olarak kullanbilirsiniz.

Uygulama çalışan ekran görüntüsü

Uygulamanın kodları