Ana içeriğe geç

3.1 Kullanıcı Dostu Çıktı Alma#

Kullanıcı dostu çıktı alma işlevini hvl-ng-framework-theme kütüphanesi içerisinde HvlPrintService servisi ve hvlPrintable direktifi ile sağlanmaktadır.

Ayrıca hvl-topbar bileşenine yazdırma butonu eklenmiştir. Bu buton ile içerik alanının tamamının yada ekranda yazdırılabilir olarak belirtilmiş alanlardan birinin seçilip yazdırılabilmesi sağlanmaktadır.

Kullanıcı dostu çıktı alma nedir?

Bu dökümanda bahsedilen kullanıcı dostu çıktı alma işlevi ekrandaki menü, topbar gibi bileşenlerin çıktılarda yer almamasını son kullanıcı için anlamlı olan içerik alanlarının ise çıktıda yer almasını sağlayan yöntemdir. Ayrıca içerikteki sadece belirli alanların çıktıda yer almasının sağlanması da kapsamdadır.

Bu yeteneklerin dışında kalan daha fazla yazdırma deneyimi sağlamak kapsam dışında tutulmuştur. Örneğin bileşenlerdeki gölge, efekt, çerçeve gibi kısımların çıktılarda kaldırılması yada bunların çıktıda farklı gözükmesinin sağlanması ve çıktılardaki renk ve kontrast ayarları bu çalışmanın dışında tutulmuştur. Bununla ilgili çalışmalar genellikle her ekran özelinde farklı yapılabileceği için bu konu proje ekiplerine bırakılmıştır.

Fakat bu konularla ilgili özellikle ortak kullanılan bileşenler için yazdırma ihtiyaçlarının ortaklaştırılması altyapı tarafından desteklenecektir fakat bunun için gereksinimlerin netleşmesi beklenmektedir. Proje ihtiyaçları doğrultusunda bu anlamdaki geliştirme istekleri altyapı ekibine iletilerek ortak çözüm değerlendirmesi yapılabilir.

3.1.1 hvl-topbar Yazdırma Butonu#

hvl-topbar (HvlTopbar) bileşeni hvl-ng-framework-theme kütüphanesi içerisinde yer alır. Bu bileşen geliştirilen uygulamaların genel yerleşiminde yukarıda kullanılacak şekilde tasarlanmıştır. Arama, takvim, bildirim, oturum bilgileri görüntüleme, dil değiştirme gibi özelliklerin sağlandığı bileşendir. Bu bileşen 2.1.0 sürümünden itibaren yazdırma butonu da içermektedir. Bileşenin görünümü aşağıda yer almaktadır.

hvl-toolbar bileşeninde yer alan Yazdırma butonu kullanıcı dostu çıktı almak için kullanılabilecek en temel özelliktir. Bu buton öntanımlı olarak gelmektedir. Eğer bu butonun projenizde gözükmesini istemiyorsanız projenizdeki config.json'da core.printing.showPrintButtonOnToolbar değeri false verebilirsiniz. Bu ayar aşağıdaki konfigürasyonda örneklenmiştir:

{
  "core": {
    "printing": {
        "showPrintButtonOnToolbar" : false
    }
    ...

Yukarıdaki ayar butonu gizlemek içindir. Butonu göstermek için yukarıda anlatılan ayarı true vermenize gerek yoktur.

3.1.2 Öntanımlı Yazdırma İşlevi#

Yazdırma butonuna direk tıklandığında yada yazdırma butonunun yanındaki açılan listedeki "Tüm içeriği yazdır" 'a tıklandığında sayfanızdaki içerik alanı yazdırılacak şekilde çıktı alma ekranı açılır. Menü'den bir ekran açıldığında ekran menünün sağındaki boşluğa açılmaktadır. Yazdırma alanından kastedilen menünün sağındaki ekranın açıldığı bu kısımdır. Dolayısı ile menü ve hvl-topbar yazdırma alanı içerisinde yer almaz. Aşağıdaki resmi inceleyiniz. İlk resim kullanıcı ekranında gözüken sayfadır, ikinci resim ise Yazdırma butonu kullanılarak açılmış çıktı önizleme ekranında yer alan sayfadır.

Görüldüğü gibi çıktı alma ekranında sadece içerik yer almaktadır.

3.1.2 hvlPrintable Direktifi#

hvlPrintable direktifi geliştirilen ekranda özellikle bir alanı yazdırma ihtiyacını karşılamak için geliştirilmiştir. Arama kriterlerinin ve sonuç listesinin yer aldığı bir ekranı düşünün. Bu ekranın çıktısında arama kriterlerinin yer almasının istenmediği sadece sonuç listesinin çıktıda görünmesi gerektiği gibi senaryolar hvlPrintable direktifi ile gerçekleştirilebilir.

hvlPrintable direktifinin 2 özelliği vardır: areaname ve arealabel. areaname yazdırılabilecek alanın ismidir akılda kalıcı türkçe karakter içermeyen bir isim vermeniz gereklidir. arealabel ise son kullanıcı için anlamlı bir etikettir ve yazdırılmak istenilen alanın title'ı ile aynı verilmesi tavsiye edilir. Bir önceki örnekle ilgili (yukarıdaki ekran görüntüsü yer alan) ekrana ait küçük bir kod parçasının yer aldığı aşağıdaki örneği inceleyiniz:

<p-card hvlPrintable areaname="buttons" arealabel="Button Örnekleri">
    <ng-template pTemplate="header">
        <h4 class="pt-2 pl-2">Button Örnekleri</h4>
        <hr />
    </ng-template>
    ...

Yukarıdaki sayfada p-card tag'inde hvlPrintable direktifi kullanılmıştır. areaname özelliği "buttons" arealabel özelliği ise "Button Örnekleri" verilmiştir. Bu ekranın hvl-topbar 'daki Yazdırma butonunun açılır menüsü ve açılır menüden "Button Örnekleri" seçilince açılan önizleme ekran görüntüleri aşağıda yer almaktadır.

  • Görüldüğü gibi hvlPrintable direktifi ekrandaki bir alanın yazdırılabilir alan olarak belirlenmesini sağlar. Bu alanlar Yazdırma butonu ile seçilebileceği gibi daha sonra açıklanacak olan HvlPrintService servisi ile de yazdırmak için kullanılabilir.
  • arealabel özelliği yazdırılmak istenilen alanın etiketinin hvl-topbar'daki Yazdırma butonunun açılır listesinde gelmesini sağlar. Bir tag'e hvlPrintable direktifi verilse bile eğer arealabel özelliği verilmemişse bu alan açılır listede çıkmaz.

Bu şekilde bir ekranda birden fazla bileşen ayrı ayrı yazdırılabilir olarak belirlenip kullanıcının Yazdırma butonunun yanında yer alan açılır listeden seçerek istediğini yazdırması sağlanabilir.

hvlPrintable direktifi herhangi bir tag ile kullanılabilir, bu konuda bir kısıtlama yoktur.

3.1.3 HvlPrintService#

HvlPrintService hvl-ng-framework-theme kütüphanesi içerisinde sağlanmıştır. Geliştirilen ekranlardaki hvlPrintable ile belirtilmiş alanları geliştiricinin yazdırmasını sağlayan print metodunu içerir. Bu metodun imzası aşağıdaki gibidir.

public print(areaNames: string[] | null = null)

Görüldüğü gibi metod yazdırılabilir alan isimlerini string dizisi olarak alır. Bu dizi null da verilebilir eğer null verilirse tüm yazdırılabilir alan yazdırılır (hvl-topbar'daki Yazdır butonunun öntanımlı işlevi ile aynıdır). Alan isimleri hvlPrintable direktifinin areaname özelliğine verilmiş isimler olmalıdır. hvlPrintable direktifi ile yazdırılabilir olarak belirlenmiş alanlardan herhangi biri yada birkaçı bu metod ile yazdırılabilir. Örneğin ekranda yazdırılabilir olarak beş alan belirlenmişse ve geliştirici bir durumda bunların üçünün başka bir durumda ikisinin yazdırılmasını istiyorsa bu metod ile bu işlev sağlanabilir.

3.2 Kullanıcı Dostu Çıktı Alırken Kullanılabilecek CSS Kuralları#

Altyapı tarafından sağlanan yazdırma işlevi genel olarak CSS 'in çıktı alma kurallarına dayanmaktadır. Bu kurallar oldukça basittir ve geliştiriciler bu kurallara ek olarak kendi projelerinde kendi kurallarını yazarak özelleştirmeler yapabilirler.

Örneğin çıktılarda gözükmemesi yada farklı gözükmesi gereken alanlar olabilir, geliştiriciler bu gibi durumları kendi projelerine, modüllerine yada bileşenlerine CSS yazarak ele alabilirler.

3.2.1 Çıktılardaki CSS Sınıfları#

hvl-topbar'daki Yazdırma butonu yada HvlPrintService 'in print metodu ile yazırma işlemi yapıldığında ekrandaki dom elemanlarına birtakım css sınıfları eklenir ve bu css sınıflarının davranışı çıktılardaki görünüşünü belirler.

Önemli !

Kullanıcı dostu çıktı alma işlevi sadece hvl-topbar'daki Yazdırma butonu yada HvlPrintService 'in print metodu kullanıldığında ekrandaki dom elemanlarına CSS sınıfları ekleyerek yazdırma işlevini özelleştirir. Web tarayıcılarının kendi yazdırma ekranları kullanıldığında, Ctrl + P gibi kısayollar ile yazdırma işlemi yapıldığında yada koddan window.print() metodu gibi yöntemler kullanıldığında kullanıcı dostu çıktı alma işlevi devreye girmediği için bu yöntemin sağladığı imkanlar kullanılamaz.

Bu durum bir sorun değildir aksine tarayıcının öntanımlı davranışının desteklenmesi sağlanmaktadır.

Kullanıcı dostu çıktı alma işlevi kullanıldığında dom'a aşağıdaki sınıflar eklenir.

hvl-print: Bu sınıf body tag'ine eklenir. Kullanıcı dostu çıktı alma bittikten sonra tag'den kaldırılır. Bu sınıf kullanıcı dostu çıktı alma işi ile ilgili temel css sınıfıdır. Kullanıcı dostu çıktı alma durumunda bir takım özelleştirmeler yapılmak isteniyorsa bu sınıf kullanılmalıdır. Örneğin ekranda alli-gullu-yazi css sınıfı ile kırmızı gözüken bir yazı kullanıcı dostu çıktı işlevi ile yazdırılmak istenildiğinde mavi gözükmesi isteniyorsa aşağıdaki gibi bir css kuralı yazılmalıdır.

@media print {
    .hvl-print .alli-gullu-yazi {
        color: blue;
    }
}
Yukarıdaki kuraldaki @media print yönergesi kuralın sadece çıktı alırken uygulanmasını sağlar. Kuralın başında hvl-print olması ise sadece kullanıcı dostu çıktı alma işlevi kullanıldığında kuralın geçerli olmasını sağlar. Bu sebeple css kuralı tarayıcının kendi çıktı butonu ile çıktı alındığında uygulanmaz.

non-printable: Bu sınıf ekrandaki bir alan yazdırılacak alan içinde yer alsa bile gözükmemesi istenilen kısımları gizlemek için kullanılır. Örneğin yazdırılacak alanda aşağıdaki gibi bir kod bloğu olduğunu varsayalım: 

<div hvlPrintable areaname="is-listesi" arealabel="İş Listesi">
    <div>İş listesi detayları</div>
    <img src="/assets/bir-rsim.png">
    <div>daha fazla detay</div>
    <div>çok daha fazla detay</div>
</div>
Bu ekrandaki img tag'li resmin kullanıcı dostu çıktı alma ile çıktı alındığında gözükmesinin istenmediği durumda bu kısım şu şekilde değiştirilmelidir: 

<div hvlPrintable areaname="is-listesi" arealabel="İş Listesi">
    <div>İş listesi detayları</div>
    <img class="non-printable" src="/assets/bir-rsim.png">
    <div>daha fazla detay</div>
    <div>çok daha fazla detay</div>
</div>

Yukarıdaki örnekteki img tag'ine verilen non-printable css sınıfı bu tag ile gösterilen resmin kullanıcı dostu yazdırma ile sağlanan çıktıda yer almamasını sağlar.