Vala dersleri

Vala kaynak kullanımı 3

Bu derste renkli bileşenlerin nasıl oluşturulacağı anlatılmıştır

Giriş

Bu derste Vala ile renkli bileşenler anlatılmıştır.

Ayrıca desenleri nasıl uygulamanın kaynağına gömebileceğimizi öğreneceğiz.

Etiketleri renklendirelim

Geliştirdiğimiz uygulamada etiketlerin farklı renklerde görünmesini isteyebiliriz.

Ya da yazı tipi büyük olabilir.

Renkli etiket

Öncelikle uygulamanın ana kütüğü olan renkli.vala isimli kütüğü oluşturalım.

using Gtk;

class Pencere : Gtk.Window
{
    public Pencere ()
    {
        this.title = "Renkli elemanlar";
        this.border_width = 10;
        this.set_position(Gtk.WindowPosition.CENTER);
        this.set_default_size(350,200);

        var ekran = this.get_screen();
        var desenci = new Gtk.CssProvider();
        desenci.load_from_resource("/bir/renk/sec/renkli.css");
        Gtk.StyleContext.add_provider_for_screen(ekran, desenci,
                                                 Gtk.STYLE_PROVIDER_PRIORITY_USER);

        var kutu = new Gtk.Box (Gtk.Orientation.VERTICAL, 10);
        this.add (kutu);

        var etiket = new Gtk.Label ("Selam");
        kutu.add (etiket);

        var etiket2 = new Gtk.Label ("Nasılsınız?");
        etiket2.get_style_context().add_class("pembe");
        kutu.add (etiket2);

    }
}

int main (string[] secenekler)
{
    Gtk.init (ref secenekler);
    var pencere = new Pencere();
    pencere.show_all();
    pencere.destroy.connect(Gtk.main_quit);
    Gtk.main();
    return 0;
}

Görüldüğü gibi basit pencereli bir uygulamadır.

Pencerenin içine bir kutu ekliyoruz.

Kutuya da iki tane etiket koyuyoruz.

Desen yükleme işlemini desenci isimli bileşen üstleniyor.

Dikkat ederseniz desen bir kaynaktan yükleniyor.

Ekran bilgilerine de ihtiyaç duyuluyor.

İkinci etikete pembe isimli css sınıfını ekliyoruz.

Ana desen

Ana desen kütüğünün ismi renkli.css'dir.

Görülebileceği üzere oldukça basit bir html desen kütüğüdür.

window {
    font-size: 64px;
}

.pembe {
    color: pink;
}

.yesil {
    color: green;
}

Burada window bölümünde pencerenin yazı tipi boyutunu 64 olarak belirliyoruz.

Bir tane ana desen kütüğümüz bir de kaynak kütüğümüz var.

Bu ikisi arasında nasıl bağ kurabiliriz?

Kaynakları C koduna gömme

Önceki derste olduğu gibi kaynağı C koduna gömebiliriz.

Ancak bu sefer pencere tasarımı yerine deseni C koduna gömebiliriz.

Bunun için renkli.xml isimli bir kütük oluşturup içine şunları girelim.

<?xml version="1.0" encoding="UTF-8"?>
<gresources>
  <gresource prefix="/bir/renk/sec">
    <file alias="renkli.css">renkli.css</file>
  </gresource>
</gresources>

Kaynakları derlemek için aşağıdaki komutu verelim.

glib-compile-resources --generate-source --target renkli.c renkli.xml

Böylece kaynaklardan bir C kütüğü oluşturmuş olduk.

Uygulamanın tamamını derlemek için basit bir Make kütüğü oluşturabiliriz.

Aşağıdaki kütüğü Makefile ismi ile kaydediniz.

default:
    glib-compile-resources --generate-source --target renkli.c renkli.xml
    valac --pkg gtk+-3.0 --pkg gmodule-2.0 --gresources=renkli.xml renkli.c renkli.vala -o renkli

Uygulamayı derlemek için make yazmanız yeterlidir.

Eğer sonuç başarılı oldu ise ilk başta paylaştığımız pencereyi görebilirsiniz.

Yorumlar

yorum yaz

Yorum yaz

Henüz yorum yok.