Recent comments

None


İçerik Ara











Yasal Uyarı
Bu sitede sunulan tüm bilgi ve dökümanlar Turgay Sahtiyan tarafından yazılmaktadır. Yazıların kaynak göstermek şartıyla kullanılması serbesttir.

© Copyright 2009-2013
Takvim
<<  Ağustos 2017  >>
PaSaÇaPeCuCuPa
31123456
78910111213
14151617181920
21222324252627
28293031123
45678910
Keywords

Merhaba arkadaşlar,

Bir çoğumuz sayfalarımızda masterpage, template ve bolca resim kullanmaktayız. Sayfalarımızı yazdırmak istediğimizde ise bunların çıkmamasını ve sadece content in yazdırılmasını isteriz.

İşte bu tarz durumlarda yazıcı dostu sayfalar hazırlayıp bunları yazdırmak isteriz.

Bu makalemizde bu yazıcı dostu sayfaları nasıl hazırlayacağımızı göreceğiz.

Bu işlem için bir javascript fonksiyonu kullanacağız. Butona basınca bu javascript çalışacak ve yeni sayfa açarak istediğimiz id li elemanı yazıcı dostu bir şekilde ekrana getirecek.

Mesela şu yapıda bir aspx.dosyamız olduğunu varsayalım.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Yazıcı Dostu Sayfa Yazdırmak..Turgay Sahtiyan</title>
    <link href="myCss.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="yazdir.js"></script>        
</head>
<body>
    <form id="form1" runat="server">
    <div id="divMain">    
    <div id="divForm">    
        Form 1
        <br />
        <table style="width: 210px" border=1>
            <tr>
                <td class="style2">
                    <asp:Label ID="Label1" runat="server" Text="Ad"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server" Text="Turgay"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    <asp:Label ID="Label2" runat="server" Text="Soyad"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox2" runat="server" Text="Sahtiyan"></asp:TextBox>
                </td>
            </tr>
        </table>
        <asp:Button ID="Button1" runat="server" Text="Gönder" />
        <asp:Button ID="Button2" runat="server" Text="Vazgeç" />
        <br /><br />
    </div>
    <div id="divTable1" class="yazdirma">    
    Tablo 1
    <br />
    <table style="width: 210px" border=1>
        <tr>
            <td class="style2">
                1-1</td>
            <td>
                1-2</td>
        </tr>
        <tr>
            <td class="style2">
                2-1</td>
            <td>
                2-2</td>
        </tr>
    </table>
    <br />
    </div>
    <div id="divTable2">    
    Tablo 2<br />
    <table border=1>
        <tr>
            <td class="style3">
                a</td>
            <td class="style4">
                b</td>
            <td class="style5">
                c</td>
        </tr>
        <tr>
            <td class="style3">
                d</td>
            <td class="style4">
                e</td>
            <td class="style5">
                f</td>
        </tr>
        <tr>
            <td class="style3">
                g</td>
            <td class="style4">
                h</td>
            <td class="style5">
                ı</td>
        </tr>
    </table>
    </div>
    <br /><br />
    </div>
    
    <asp:Button ID="print" runat="server" Text="Sayfayı Yazdır" OnClientClick="yazdir('divMain');false;"/>                 
    </form>
</body>
</html>

Gördüğünüz gibi div ler için id kullandık. Çünkü bu id leri kullanarak istediğimiz id li elemanı yazdırabileceğiz.

Aynı zamanda göreceğiniz gibi divTable1 id li div de yazdirma diye bir class kullandık. Ve bu class sayesinde bu div yazdırılacak kısımın içinde olsa bile bunu yazdırmamayı sağlayabileceğiz.

Yani demek istediğim şu. Bir divin tamamını yazdırmak istiyoruz ama onun için de bir kısmı yazdırmak istemiyoruz. İşte bunu class ataması sayesinde halledeceğiz.

Sayfamızın yapısını şu şekilde tekrar basitçe hatırlayacak olursak.

<div id=”divMain”>
	<div id="divForm">
	</div>
           <div id="divTable1" class="yazdirma"> 
	</div>
           <div id="divTable2">    
	</div>
</div>

Buton a atayacağımız kod ise şu şekilde olacak.

    <asp:Button ID="print" runat="server" Text="Sayfayı Yazdır" OnClientClick="yazdir('divMain');false;"/>                 

Butona basıldığında divMain içeriğinin tamamı yazılacak. Ama divTable1 yazılmayacak çünkü onun class atamasında yazdırma seçili. Bu şekilde yazdırmak istemediklerimize class ataması yapabiliriz.

Mesela sadece divTable2 yi yazdıralım

    <asp:Button ID="print" runat="server" Text="Sayfayı Yazdır" OnClientClick="yazdir('divTable2');false;"/>                 

Şimdi yazdırma işini üstlenen javascript kodumuzu inceleyelim.

function yazdir(yazdirilacakBolum) {
    //Yeni bir sayfa create ediyoruz. Yazdırılacak veriyi yeni sayfada açacağız.
    var pp = window.open();
    //Yeni sayfaya HTML ve Head taglarını açıyoruz.
    pp.document.writeln('<HTML><HEAD><title>Yazdır</title></HEAD>');
    //css imizi ekliyoruz
    pp.document.writeln('<LINK href=myCss.css  type="text/css" rel="stylesheet">');
    //head tag ını kapatıyoruz.
    pp.document.writeln('</HEAD>');
    //Body tag ı ekliyoruz
    pp.document.writeln('<body bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0">');
    //Form tag ı ekliyoruz
    pp.document.writeln('<form  method="post">');
    //yazdır ve kapat diye 2 tane buton ekliyoruz.
    pp.document.writeln('<TABLE width=100%><TR><TD></TD></TR>');
    pp.document.writeln('<TR><TD align=right>');
    pp.document.writeln('<INPUT ID="PRINT" type="button" value="Yazdır" ');
    pp.document.writeln('onclick="javascript:location.reload(true);window.print();">');
    pp.document.writeln('<INPUT ID="CLOSE" type="button" value="Kapat" ');
    pp.document.writeln('onclick="window.close();">');
    pp.document.writeln('</TD></TR><TR><TD></TD></TR></TABLE>');
    //yazdırılıcak bölümü sayfaya yazıyoruz.
    //Görüldüğü gibi yazdırılacak bölümün önce child elemanlarına erişiyoruz.
    //Daha sonrada bu child elemanlardan yazdirma class ı içermeyenleri alıp
    //objeler adında bir değişken listesinde topluyoruz.
    objeler = $("#" + yazdirilacakBolum).children().not(".yazdirma");
    //objeler değişken listesine map fonksiyonu ile erişip bunları array e dönüştürüyoruz
    //array dönüşen kısmında her bir elemanı için html() fonksiyonu ile
    //html içeriğini alıyoruz. Bunuda documan a yazdırıyoruz.
    pp.document.writeln(objeler.map(function() {
                    return $(this).html();
                }).get().join(" ") );
    //form,body ve html taglarını kapatıyoruz.
    pp.document.writeln('</form></body></HTML>');
}	

Evet işlemimiz bu kadar. Umarım açıklayıcı olmuştur.

Kafanıza takılan veya sormak istediğiniz herhangi bir şey olursa yorum kısmında sorabilirsiniz. En kısa sürede cevap vermeye çalışırım.

Projeyi buradan indirip inceleyebilirsiniz. YaziciDostu.zip (23,87 kb)

Kolay Gelsin

Turgay Sahtiyan

Not : Blog haricinde, faydali gördügüm yazilari ve linkleri twitter adresimden paylasiyorum. Beni twitter'da takip etmek için : twitter.com/turgaysahtiyan


Merhaba arkadaşlar,

Bu yazımda size performans amaçlı olarak js ve css dosyalarını compressor ederek küçültme işleminden bahsedeceğim.

Bunun için yahoo nun BSD lisanslı ürünü YUI Compressor u kullanacağız.

YUI Compressor %40 ila %60 arasında bir sıkıştırma yapmakta.

Gerekli incelemeyi burdan , compressor u indirmeyi de burdan yapabilirsiniz.

Dosyayı indirdikten sonra hdd mize açıyoruz. Build in içinde ki yuicompressor-x.y.z.rar dosyasını alıp kolay bir yere atıyoruz. Mesela c nin altına atalım. (xyz versiyonu ifade etmekte.)

Sıkıştırmak istediğimiz js veya css dosyasınıda c ye atıyoruz.Örneğin dosyamızın adı MyCss.css olsun.

dos prompt u açıp aşağıda ki kodu yazıp enter a basıyoruz.

       java -jar c:\yuicompressor-x.y.z.rar -o c:\deneme.css d:\MyCss.css

İşlem sonunda eğer hata vermezse c nin altında sıkıştırılmış formatta ki deneme.css oluşmuş olacaktır.

Eğer js sıkıştırıyorsanız ve kodun obfuscate edilmesini istemiyorsanız şu şekilde kullanabilirsiniz.

     java -jar c:\yuicompressor-x.y.z.rar --nomunge -o c:\deneme.css d:\MyCss.css

 

Kolay gelsin

Turgay Sahtiyan

Not : Blog haricinde, faydali gördügüm yazilari ve linkleri twitter adresimden paylasiyorum. Beni twitter'da takip etmek için : twitter.com/turgaysahtiyan


Merhaba arkadaşlar,

Bazen çalıştığımız büyük projelerde çok sayıda function bulunabilir. Bunlardan bir kısmını bizim yazdığımız function lar olabileceği gibi ekip arkadaşlarımız da yazmış olabilir.

Bu tarz functionlara erişirken function ın ne işe yaradığını,parametrelerin ne işe yaradığı bilmemiz intellisense aşamasında bize oldukça fayda sağlar.

Mesela topla adında basit bir fonksiyonumuz olsun ve 2 sayıyı toplayıp sonucu döndürsün. Function ın ne iş yaptığından ziyade summary ve param bilgileriyle ilgileniyoruz şu anda.

Eğer bu fonksiyonumuzu şu şekilde yazarsak

     public int topla(int a, int b)
    {
        return a + b;
    }

intellisense esnasında şu şekilde gözükecektir

resim 1:



oysa fonksiyonumuza summary ve param bilgilerini şu şekilde verecek olursak

    /// <summary>verilen 2 sayıyı toplayıp sonucu döndürür.</summary>
    /// <param name="a">1.sayı</param>
    /// <param name="b">2.sayı</param>
    /// <returns>a+b</returns>
    public int topla(int a, int b)
    {
        return a + b;
    }

intellisense esnasında şu görüntüleri alabiliriz 

resim2: 



resim3:

 

Bu tanımlamalar aynı şekilde javascript fonksiyonlarında da kullanılabilmektedir.

VS 2008 SP1 ile gelen javascript intellisense yanında birde bu bilgiler tadından yenmiyor emin olabilirsiniz:)

Hepinize bol function lı günler diliyorum:)

Not : Blog haricinde, faydali gördügüm yazilari ve linkleri twitter adresimden paylasiyorum. Beni twitter'da takip etmek için : twitter.com/turgaysahtiyan