5. Olaylar ve Popup

Türkçe’de “Ortaya çıkan, oluşan durum” olarak tanımladığımız olay (event), Kivy için de geçerlidir. Örneğin “düğmeye bastırmak”, “bastırılmayı bırakmak”, “seçim yapmak”, “bir tuşa basmak” gibi birçok durum birer Kivy olayıdır. Bu olaylar gerçekleştiğinde, programımızın bir tepki vermesi gerekir. Bir olay gerçekleştiğinde verilecek tepki bir işlev (fonksiyon) tarafından gerçekleştirilebilir. Olay gerçekleştiğinde ilgili fonksiyonun çağrılabilmesi için, fonksiyonu olaya bağlamak gerekmektedir.

Önce bir düğmeye bastırıldığında üzeirndeki metnin değişmesini sağlayacak bir program yazmaya çalışalım. Bu programı öncelikle Python kodu yazarak öğreneceğiz, daha sonra kvlang ile nasıl gerçekleştirilebileceğine bakacağız. Programımız Liste 5.1‘de görülmektedir.

Liste 5.1 main.py
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
# -*- coding: utf-8 -*-

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button

class olayUyg(App):

    def metni_degistir(self, nesne):
        self.dugme.text='Tıkladın ve değiştim.'

    def build(self):
        duzen=BoxLayout()
        self.dugme=Button(text='Değiştir')
        self.dugme.bind(on_press=self.metni_degistir)
        duzen.add_widget(self.dugme)
        return duzen
        
olayUyg().run()

Liste 5.1‘deki programı çalıştırdığımızda tüm ekranı kaplayan bir düğme görünecektir. Düğmenin üzerinde “Değiştir” metni görünmektedir. Bu düğmeyi self‘in bir özelliği yapmamaızın nedeni, sınıf içerisindeki tüm işlevlerden erişebilmektir. Bu düğmeye bastırıldığında çağrılacak olan işlevi, düğmeinin bind() özelliği ile bağlıyoruz. Bir olayı bir nesneye bağlamak için bind() özelliğini kullanırız. Bu işleve, hangi olayı bağlamak istiyorsak, onu parametre ve bu parametreye de çağrılacak olan işlevi yazıyoruz. 15. satırda bind() işlevine on_press parametrisini (bu düğmeye bastırılma olayını ifade eder) ve değer olarak ta self.metni_degistir işlevini atadık. Böylelikle düğmeye bastırıldığında self.metni_degistir işlevi çağrılacaktır. Çağrılan işleve nesnenin kendisi (burada self.dugme‘dir) argüman olarak gönderilir. Aslında dugme‘yi self‘in özelliği yapmadan, gelen nesne üzerinden de metni değiştirebilirdik:

nesne.text='Tıkladın ve değiştim.'

aynı görevi görürdü. Şimdi aynı programı kv lang ile yazalım. Programımızı Liste 5.2‘da görüyorsunuz.

Liste 5.2 main.py
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
# -*- coding: utf-8 -*-

from kivy.app import App

class olayUyg(App):

    def metni_degistir(self):
        self.root.ids.dugme.text='Tıkladın ve değiştim.'
        
olayUyg().run()

İlgili kv dosyasını Liste 5.3‘da görüyorsunuz.

Liste 5.3 olayuyg.kv
1
2
3
4
5
6
7
BoxLayout:
    Button:
        id: dugme
        text: 'Değiştir'
        on_press: app.metni_degistir()

Şimdi biraz program ve kv dosyası üzerinde konuşalım. kv dilinde garfik parçacıklarına isimleri id özelliği ile veriyoruz. 3. satırdaki id: dugme yapmamızın nedeni bu garfik parçacığına (nesneye) program içerisinden ulaşmak için kullanacağımızdır. Bu düğmeye bastırıldığında çağrılacak olan işlevi app‘ın bir özelliği ile veriyoruz. Çağrılan uygulamanın tüm nesneleri, kv dili içerisinden app‘ın özelliği ile erişilir. Liste 5.2 programına bakacak olursak, kv dili içerisinde tanımlanmış grafik parçacıklarına erişmek için self.root.ids‘nin bir özelliği ile eriştiğimizi anlarsınız. kv‘deki bir nesneye erişmek için o nesnenin id ile verilmiş ismini kullanıyoruz.

Kullanıcının metin gireceği bir metin kutusu, altında bir etiket ve onun altında da bir düğme bulunan bir program yazalım. Bu programı yazmadaki amacımız, metin kutusuna girilen değeri etikette görüntülemktir. Programımızı Liste 5.4‘da görüyorsunuz.

Liste 5.4 main.py
1
2
3
4
5
6
7
8
9
from kivy.app import App

class olayUyg(App):

    def metni_degistir(self):
        girilen_metin = self.root.ids.metin_girdisi.text
        self.root.ids.etiket.text='Merhaba %s !' % girilen_metin
        
olayUyg().run()

Bu programla kullanacağımız kv dosyasını da Liste 5.5‘da görüyorsunuz.

Liste 5.5 olayuyg.kv
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
BoxLayout:
    orientation: 'vertical'
    TextInput:
        id: metin_girdisi
    Label:
        text: 'Adınızı yukarıya yazın...'
        id: etiket
        markup: True
    Button:
        id: dugme
        text: 'Değiştir'
        on_press: app.metni_degistir()

kv dosyasında etiket için neden markup: True dediğimizi sonra açaıklayacağız. Programımızı çalıştıralım ve üstteki metin kutusuna adımızı yazalım. “Değiştir” düğmesine tıkladığımızda, metin kutusundaki isim etiket üzerine yazılacaktır. Programın çalışmış halini Şekil 5.1 ‘de görüyorsunuz.

_images/olaylar1Img.png

Şekil 5.1 Girilen metnin etikete yazılması

5.1. İşaret Dili (markup)

Etiket ve düğmelerde renklerin kullanımı çok kolay. Liste 5.5‘deki kv dosyasının 8. satırında markup: True bulunmaktadır. Bunun anlamı bu etiket metni için işaret dilinin (markup) kullanılacağıdır. Eğer program içerisinde bir etiket tanımlamış olsaydık, işaret dilini etkinleştirmek için

etiket = Label(markup=True)

diyebilirdik. Ya da daha önceden tanımlanmış bir etiket nesnesi için:

etiket.markup=True

şeklinde aktifleştirebilirdik. Keşke Kivy tıpkı Qt gibi standart html’yi desteklemiş olsa idi, ancak ne yazıkki standart html yerine kendi içerisinde birtakım işaretler vardır. Önce Liste 5.2‘deki programda kullanıcının adını etikete yazarken kırmızı reknte yazmayı deneyelim. Bunun için 7. satırı aşağıdaki gibi değiştirin:

self.root.ids.etiket.text='Merhaba [color=#FF0000] %s [/color] !' % girilen_metin

Artık isim kırmızı renkli olacaktır. Burada anlaşılacağı gibi Kivy işaretleri [işaret] ile başlamakta ve [/işaret] ile bitirlmektedir. Sonucu Şekil 5.2 ‘de görüyorsunuz.

_images/olaylar2Img.png

Şekil 5.2 Etiketlerde renk kullanımı

Kullanabileceğimiz diğer işaretler şöyle:

[b][/b]
Kalın metin
[i][/i]
İtalik metin
[u][/u]
Altı çizili metin
[s][/s]
Üstü çizili metin
[font=<str>][/font]
Yazıtıpi belirtimi. Örneğin [font=DejaVuSerif.ttf]Merhaba Kivy![/font]
[size=<integer>][/size]
Yazıtıpi boyutunu belirtir
[color=#<color>][/color]
Yazı rengini değiştirir
[ref=<str>][/ref]
Metne bir link (bağ) konulur. Bu bağa tıklandığında “ref” de verilen değer, işleve gönderilir.
[sub][/sub]
Alt simge olarak gösterilir
[sup][/sup]
Üst simge olarak gösterilir

Basit bir diğer örnek olarak ref‘i kullanalım. Liste 5.6‘deki programda etiket üzerindeki metne tıklandığında ekrana (komut satırına) Selam Melike ! yazacaktır.

Liste 5.6 main.py
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
# -*- coding: utf-8 -*-

from kivy.app import App
from kivy.uix.label import Label
class olayUyg(App):

    def yazdir(self, nesne, deger):
        print deger
        #nesne.text = deger

    def build(self):
        etiket = Label(text='[ref=Selam Melike !] Merhaba  Fatih ![/ref]')
        etiket.markup=True
        etiket.bind(on_ref_press=self.yazdir)
        return etiket

olayUyg().run()

Eğer yazdir() işlevini şu şekilde değiştirecek olursanız:

nesne.text = deger

Bu durumda, etiketteki “Merhaba Fatih !” metine tıkladığınızda, bu metin yerine “Merhaba Melike !” görünecektir.