gorsel

# Görsel Programlama

## AppJar paketinin kurulumu

Ayarlar sekmesi altındaki kutu ikonuna tıklayarak Paket Yöneticisi açılır.

139532096-74f54990-8b87-41ad-88c6-9a36899318d1

Paket yöneticisine tıklandığında karşınıza kurulu paketleri görebildiğiniz veya yeni paketler kurabildiğiniz bir pencere çıkar.

image

Arama kutusuna AppJar yazıp PyPl’dan Paket Bul butonuna tıklayın.

image

Paket bulunduğunda pencerenin sağ tarafında paketle ilgili bilgileri ve kur butonunu görebilirsiniz.

image

Kur butonuna tıkladığınızda kurulum başlayacaktır. Kurulum bitene kadar bir süre bekleyiniz.

image

Kurulum bittiğinde İndirme başarılı yazan bir pencere çıkacaktır.

image

Paket Kullanıma hazır.

## Pencere

### Pencere Oluşturma

Pencere oluşturmak için AppJar kütüphanesinden gui (Görsel kullanıcı arayüzü) sınıfının içe aktarılması gerek. p = gui() yazarak p adında bir pencere oluşturabiliriz. gui() sınıfına ait go() metodu ise oluşturulan pencereyi başlatır.

Örnek

    #appJar kütüphanesinden gui sınıfını içe aktar
    from appJar import gui

    #Sonra pencere objesini oluştur
    p = gui()

    #Son olarak pencereyi başlat
    p.go()

image

### Pencere Boyutu

Oluşturulan bir pencerenin boyutunu ayarlamak için gui() sınıfına ait setSize() metodu kullanılır. parametre olarak ilk önce pencerenin eni sonra da boyu aralarına virgül(,) konarak girilir.

Örnek

    from appJar import gui
    p = gui()

    #Pencerenin en,boy uzunluklarını 300,200 olarak ayarla
    p.setSize(300,200)

    p.go()

image

### Pencere Başlığı

Oluşturulan bir pencerenin başlığını ayarlamak için gui() sınıfına ait setTitle() metodu kullanılır.

Örnek

    from appJar import gui
    p = gui()
    p.setSize(300,200)

    #Pencerenin başlığını 'Başlık' olarak değiştir
    p.setTitle("Başlık")

    p.go()

image

### Pencere Arkaplan Rengi

Oluşturulan bir pencerenin Arkaplan rengini ayarlamak için gui() sınıfına ait setBg() metodu kullanılır. Parametre olarak temel renklerin isimleri ingilizce olarak girilir.

Örnek

    from appJar import gui
    p = gui()
    p.setSize(300,200)

    #Pencerenin arka plan rengini yeşil yap
    p.setBg('green')

    p.go()

image

## Girdi Araçları

Girdi araçları tıklayarak, sürükleyerek ya da yazarak yapılan kullanıcı etkilişimmlerini yakalamak için kullanılır. Genelde 3 temel fonksiyon vardır.

- ADD : Aracı ekler.
- GET : Aracın mevcut durumunu ya da içeriğini alır, kaydeder.
- SET : Aracın içindekini değiştirir.

Genel olarak önce bu üçünden biri yazılır hemen ardında ise ilgili aracın adı gelir.

### Buton

Buton eklemek için gui() sınıfına ait addButton() metodu kullanılır. İki parametre alır, önce butonun başlığı girilir ardından butona tıklandığında çağıralacak fonksiyon.

Örnek

    def press():#Butona tıklandığı zaman çağrılacak fonksiyon
        #'Tıklandı' diye bir mesaj yazdır
        print('Tıklandı')

    from appJar import gui
    p = gui()
    p.setSize(300,200)

    #'Buton' başlıklı bir buton ekle ve
    #Bu butona her tıklandığında 'press' fonksiyonunu çalıştır
    p.addButton('Buton', press)

    p.go()

image

Butona 3 defa tıklandığında alınacak olan çıktı.

image

### Metin Kutusu

Metin kutusu eklemek için gui() sınıfına ait addEntry() metodu kullanılır. Metin kutusuna girilen bilgiyi almak için ise getEntry() metodu kullanılır.

    from appJar import gui

    def press():#Butona tıklandığı zaman çağrılacak fonksiyon
        #'Metin' başlıklı metin kutusundaki metni yazdır.
        print(p.getEntry('Metin'))

    p = gui()
    p.setSize(300,200)

    #'Metin' başlıklı bir metin kutusu oluştur.
    p.addEntry('Metin')

    p.addButton('Buton', press)
    p.go()

image

Metin kutusuna ‘Pynar’ yazdıktan sonra butona tıklanırsa alınacak çıktı.

image

### Çok Satırlı Metin Kutusu

Çok metin kutusu eklemek için gui() sınıfına ait addTextArea() metodu kullanılır. Metin kutusuna girilen bilgiyi almak için ise getTextArea() metodu kullanılır.

    from appJar import gui

    def press():#Butona tıklandığı zaman çağrılacak fonksiyon
        #'Metin' başlıklı çok satırlı metin kutusundaki metni yazdır.
        print(p.getTextArea('Metin'))

    p = gui()
    p.setSize(300,200)

    #'Metin' başlıklı bir çok satırlı metin kutusu oluştur.
    p.addTextArea('Metin')

    p.addButton('Buton', press)
    p.go()

image
image

### Seçenek Düğmesi

Seçenek Düğmesi eklemek için gui() sınıfına ait addRadioButton() metodu kullanılır. Parametre olarak önce hangi başlıkla ilgii bir seçim olduğu girilir ardından ise seçeneğin adı girilir. Seçenek düğmelerinden seçilen bilgiyi almak için ise getRadioButton() metodu kullanılır. parametre olarak ise hangi başlıkla ilgili seçim isteniyorsa onun başlığı girilir.

    from appJar import gui

    def press():#Buton tıklanınca çağrılacak olan fonksiyon
        print(p.getRadioButton('harf'))#Seçilen düğmeyi çıktı al

    p = gui()
    p.setSize(300,200)

    #Seçenek düğmeleri ekleme.
    #'Harf' başlıklı A, B, ve C seçenekleri ekle.
    p.addRadioButton('harf', 'A')
    p.addRadioButton('harf', 'B')
    p.addRadioButton('harf', 'C')

    p.addButton('Buton', press)
    p.go()

image

Seçim yapılıp butona tıklandıktan sonraki çıktı.

image

### Onay Kutusu

Onay kutusu eklemek için gui() sınıfına ait addCheckBox() metodu kullanılır. Kutucuk işaretli ise True işaretli değil ise False döndürür.

    from appJar import gui

    def press():#Butona tıklanınca çağrılacak fonksiyon
        #Onay başlıklı onay düğmesi şıklıysa 'True', yoksa 'False' yazdır
        print(p.getCheckBox('Onay'))

    #Pencereyi oluştur
    p = gui()
    p.setSize(300,200)

    #'Onay' başlıklı bir onay düğmesi oluştur
    p.addCheckBox('Onay')

    p.addButton('Buton', press)
    p.go()

image

Kutuyu işaretlemeden butona tıklandığında alınacak çıktı.

image

### Seçenek Kutusu

Seçenek kutusu eklemek için gui() sınıfına ait addOptionBox() metodu kullanılır.

    from appJar import gui

    def press():#Buton tıklanınca çağrılacak olan fonksiyon
        #'Seçenekler' başlıklı seçenek kutusundaki
        #seçilen ögeyi çıktı al
        print(p.getOptionBox('Seçenekler'))

    p = gui()
    p.setSize(300,200)

    #'Seçenekler' başlıklı bir seçenek kutusu oluştur
    #İkinci argümanda kutuda yer alacak değerler bulunmakta
    #Bu değerlerden '-' ile başlayıp bitenler ayırma işlevi gördüğünden seçilemez
    p.addOptionBox('Seçenekler', ['- Meyveler -', 'Elma', 'Portakal',
    'Armut', '- Hayvanlar -', 'Köpek', 'Kedi', 'Tavşan'])

    p.addButton('Buton', press)
    p.go()

image

Kutuyu tıklanınca açılan menüden portakal seçildikten sonra butona basıldığında alınan çıktı.

image
image

### Spin Kutusu

Spin kutusu eklemek için gui() sınıfına ait addLabelSpinBox() metodu kullanılır. Spin kutusu ok tuşları yardımı ile seçenekler arasında dolaşabileceğiniz bir kutudur. Aynı zamanda ilgili seçeneği Kutuya elle de girebilirsiniz. Eğer girilen seçenek kutuda yoksa kutu boş kalacaktır. Belli bir sayı aralığında seçimler isteniyorsa addLabelSpinBoxRange() metodu kullanılır.

    from appJar import gui

    def press():#Buton tıklanınca çağrılacak olan fonksiyon
        #'Seçenekler' ve 'Numaralar' başlıklı spin
        #kutularında seçilen ögelerin çıktısını al
        print(p.getSpinBox('Seçenekler'))
        print(p.getSpinBox('Numaralar'))

    p = gui()
    p.setSize(300,200)

    #'Seçenekler' başlıklı ve 'A','B','C','D' değerleri bulunan Spin kutusu ekle.
    p.addLabelSpinBox('Seçenekler', ['A', 'B', 'C', 'D'])

    #'Numaralar' başlıklı ve içerisinde 1'den 10'a kadar sayılar olan Spin kutusu ekle.
    p.addLabelSpinBoxRange('Numaralar', 1, 10)

    p.addButton('Buton', press)
    p.go()

image
image

### Liste Kutusu

Liste kutusu eklemek için gui() sınıfına ait addListBox() metodu kullanılır.

    from appJar import gui

    def press():#Butona tıklandığı zaman çağrılacak fonksiyon
        #'Liste' başlıklı liste kutusundaki seçilen ögeyi yazdır.
        print(p.getListBox('Liste'))

    p = gui()
    p.setSize(300,200)

    #Liste isimli ve 'A,B,C,D' içerikli bir liste kutusu oluştur
    p.addListBox('Liste', ['A','B','C','D'])

    p.addButton('Buton', press)
    p.go()

image
image

### Çoklu Liste Kutusu

Çoklu liste kutusu eklemek için gui() sınıfına ait addListBox() metodu kullanılır. Fakat çoklu seçim özelliğini etkinleştirmek için setListBoxMulti() metodu kullanılır.

    from appJar import gui

    def press():#Butona tıklandığı zaman çağrılacak fonksiyon
        #'Liste' başlıklı liste kutusundaki seçilen ögeyi yazdır.
        print(p.getListBox('Liste'))

    p = gui()

    #Liste isimli ve 'A,B,C,D' içerikli bir liste kutusu oluştur
    p.addListBox('Liste', ['A','B','C','D'])

    #'Liste' başlıklı liste kutusunu çoklu seçimli hale getir.
    p.setListBoxMulti('Liste', multi = True)

    p.addButton('Buton', press)
    p.go()

‘CTRL’ tuşuna basılı tutarak birden fazla seçim yapabilirsiniz.

image
image

## Çıktı Araçları

Çıktı araçları kullanıcıya bilgi göstermek için kullanılır.

- ADD : Aracı ekler.
- GET : Aracın mevcut durumunu ya da içeriğini alır, kaydeder.
- SET : Aracın içindekini değiştirir.

Genel olarak önce bu üçünden biri yazılır hemen ardında ise ilgili aracın adı gelir.

### Etiket

Etiket eklemek için gui() sınıfına ait addLabel() metodu kullanılır.

    from appJar import gui
    p = gui()
    p.setSize(300,200)

    #'Merhaba' başlıklı bir metin ekle.
    p.addLabel('Merhaba')

    p.go()

image

### Çok Satırlı Etiket

Çok satırlı metin çıktı kutusu eklemek için gui() sınıfına ait addMessage() metodu kullanılır.

    from appJar import gui
    p = gui()
    p.setSize(400,300)

    # 'Pynar' başlıklı ve üzerinde uzun bir metin yazılı bir
    #çok satırlı metin oluştur.
    p.addMessage('Pynar', '''PyNar, Türkiye’nin ilk Tamamen
    Türkçe arayüze sahip Python kod editörüdür.

    PyNar Editörü TÜBİTAK Açık Kaynak Yazılımlar Çağrı Programı
    “1003 Türkçe Arayüz ve Destek Sistemleri” çağrısı
    kapsamında geliştirilmektedir.

    PyNar, bir kod editörü olmasının yanı sıra Entegre bir
    Chatbot’a sahiptir. Chatbot, makine öğrenmesi destekli olup
    kullanıcının hatalarında düzeltme önerileri sunmaktadır.''')

    p.go()

image

## Karma Örnek

Buton ve Metin kutusu kullanarak bir etiketi değiştiren örnek uygulamalı bir kod.

    def press():#Buton her tıklandığında çağrılacak olan fonksiyon
        #Metinkutusu isimli metin kutusundaki metni 'yazi' değişkenine aktar
        yazi = p.getEntry('Metinkutusu')

        #'Etiket' başlıklı etiketteki metni 'yazi' değişkenindeki yazı olarak ayarla
        p.setLabel('Etiket', yazi)

    from appJar import gui

    #Pencereyi oluştur
    p = gui()

    #Pencerenin en,boy uzunluklarını 300,200 olarak ayarla
    p.setSize(300,200)

    #Pencerenin başlığını 'Birleşik Örnek' olarak ayarla
    p.setTitle('Birleşik Örnek')

    #Pencereye 'Etiket' başlıklı bir etiket ekle
    p.addLabel('Etiket')

    #Pencereye 'Metinkutusu' başlıklı bir metin kutusu ekle
    p.addEntry('Metinkutusu')

    #Pencereye 'Tıkla' başlıklı bir buton ekle,
    #ve bu buton her tıklandığında 'press' fonksiyonunu çağır
    p.addButton('Tıkla', press)

    #Pencereyi başlat
    p.go()

image

Metin kutusuna girilen metin butona tıklandığında etiketi değiştirecektir.

image

## Açılır Pencereler

Açılır Pencereler bir etkileşim sonucu ya da bir bilgiyi sunmak için açılan fazladan küçük pencerelerdir.

### Mesaj Penceresi

Mesaj penceresi eklemek için gui() sınıfına ait infoBox() metodu kullanılır.

    from appJar import gui

    def press():#Butona tıklandığı zaman çağrılacak fonksiyon
        #'Pencere' başlıklı ve içinde
        #'Merhaba!' yazan bir açılır pencere göster
        p.infoBox('Pencere', 'Merhaba!', parent=None)

    #Pencereyi oluştur
    p = gui()

    #Pencerenin en,boy uzunluklarını 300,200 olarak ayarla
    p.setSize(300,200)

    #'Buton' başlıklı bir buton ekle ve
    #Bu butona her tıklandığında 'press' fonksiyonunu çalıştır
    p.addButton('Buton', press)

    #Pencereyi başlat
    p.go()

image

Oluşturulan pencere butona tıklandığında ortaya çıkacaktır.

image

### Hata Penceresi

Hata penceresi eklemek için gui() sınıfına ait errorBox() metodu kullanılır.

    from appJar import gui

    def press():#Butona tıklandığı zaman çağrılacak fon5ksiyon
        #'Hata' başlıklı ve içinde
        #'Hata!' yazan bir açılır pencere göster
        p.errorBox('Hata', 'Hata!', parent=None)

    #Pencereyi oluştur
    p = gui()

    #Pencerenin en,boy uzunluklarını 300,200 olarak ayarla
    p.setSize(300,200)

    #'Buton' başlıklı bir buton ekle ve
    #Bu butona her tıklandığında 'press' fonksiyonunu çalıştır
    p.addButton('Buton', press)

    #Pencereyi başlat
    p.go()

image
image

### Uyarı Penceresi

Uyarı penceresi eklemek için gui() sınıfına ait warningBox() metodu kullanılır.

    from appJar import gui

    def press():#Butona tıklandığı zaman çağrılacak fonksiyon
        #'Uyarı' başlıklı ve içinde
        #'Uyarı!' yazan bir açılır pencere göster
        p.warningBox('Uyarı', 'Uyarı!', parent=None)

    #Pencereyi oluştur
    p = gui()

    #Pencerenin en,boy uzunluklarını 300,200 olarak ayarla
    p.setSize(300,200)

    #'Buton' başlıklı bir buton ekle ve
    #Bu butona her tıklandığında 'press' fonksiyonunu çalıştır
    p.addButton('Buton', press)

    #Pencereyi başlat
    p.go()

image
image

### Soru Penceresi

Soru penceresi eklemek için gui() sınıfına ait questionBox() metodu kullanılır. questionBox() metodu seçim yapıldıktan sonra bir boolean değeri döndürür.

    from appJar import gui

    def press():#Butona tıklandığı zaman çağrılacak fonksiyon
        #'Soru' başlıklı ve içinde
        #'Mesaj' yazan bir açılır pencere göster
        #Ve basılan butonu bool değişkenine aktar(Evet->True, Hayır->False)
        bool = p.questionBox('Soru', 'Mesaj', parent=None)
        #bool değişkenini yazdır
        print(bool)

    #Pencereyi oluştur
    p = gui()

    #Pencerenin en,boy uzunluklarını 300,200 olarak ayarla
    p.setSize(300,200)

    #'Buton' başlıklı bir buton ekle ve
    #Bu butona her tıklandığında 'press' fonksiyonunu çalıştır
    p.addButton('Buton', press)

    #Pencereyi başlat
    p.go()

image
image

’Evet’i seçtikten sonra alınan çıktı.

image

### Onay Penceresi

Onay penceresi eklemek için gui() sınıfına ait okBox() metodu kullanılır. okBox() metodu seçim yapıldıktan sonra bir boolean değeri döndürür.

    from appJar import gui

    def press():#Butona tıklandığı zaman çağrılacak fonksiyon
        #'Onay' başlıklı ve içinde
        #'Mesaj' yazan bir açılır pencere göster
        #Ve basılan butonu bool değişkenine aktar(Tamam->True, İptal->False)
        bool = p.okBox('Onay', 'Mesaj', parent=None)
        #bool değişkenini yazdır
        print(bool)

    #Pencereyi oluştur
    p = gui()

    #Pencerenin en,boy uzunluklarını 300,200 olarak ayarla
    p.setSize(300,200)

    #'Buton' başlıklı bir buton ekle ve
    #Bu butona her tıklandığında 'press' fonksiyonunu çalıştır
    p.addButton('Buton', press)

    #Pencereyi başlat
    p.go()

image
image

’Tamam’ı seçtikten sonra alınan çıktı.

image

### Yeniden Dene Penceresi

Yeniden Dene penceresi eklemek için gui() sınıfına ait retryBox() metodu kullanılır. retryBox() metodu seçim yapıldıktan sonra bir boolean değeri döndürür.

    from appJar import gui

    def press():#Butona tıklandığı zaman çağrılacak fonksiyon
        #'Yeniden dene' başlıklı ve içinde
        #'Mesaj' yazan bir açılır pencere göster
        #Ve basılan butonu bool değişkenine aktar(Yeniden dene->True, İptal->False)
        bool = p.retryBox('Yeniden dene', 'Mesaj', parent=None)
        #bool değişkenini yazdır
        print(bool)

    #Pencereyi oluştur
    p = gui()

    #Pencerenin en,boy uzunluklarını 300,200 olarak ayarla
    p.setSize(300,200)

    #'Buton' başlıklı bir buton ekle ve
    #Bu butona her tıklandığında 'press' fonksiyonunu çalıştır
    p.addButton('Buton', press)

    #Pencereyi başlat
    p.go()

image
image

’Yeniden dene’yi seçtikten sonra alınan çıktı.

image

### Metin Kutusu Penceresi

Metin Kutusu penceresi eklemek için gui() sınıfına ait stringBox() metodu kullanılır. stringBox() metodu içine yazılan metni string olarak döndürür.

    from appJar import gui

    def press():#Butona tıklandığı zaman çağrılacak fonksiyon
        #Metin penceresi başlıklı ve içinde
        #'Mesaj' yazan bir açılır pencere göster
        #Ve pencereye yazılan metni 'metin' değişkenine aktar
        metin = p.stringBox('Metin penceresi', 'Mesaj', parent=None)
        #metin değişkenini yazdır
        print(metin)

    #Pencereyi oluştur
    p = gui()

    #Pencerenin en,boy uzunluklarını 300,200 olarak ayarla
    p.setSize(300,200)

    #'Buton' başlıklı bir buton ekle ve
    #Bu butona her tıklandığında 'press' fonksiyonunu çalıştır
    p.addButton('Buton', press)

    #Pencereyi başlat
    p.go()

image
image

Metin kutusunun içine Pynar yazıp onayladıktan sonra alınan çıktı.

image

### Sayı Kutusu Penceresi

Sayı Kutusu penceresi eklemek için gui() sınıfına ait integerBox() metodu kullanılır. integerBox() metodu içine yazılan değeri integer olarak döndürür. Eğer mesaj kutusuna tam sayı bir değer yazılmazsa hata verecektir.

    from appJar import gui

    def press():#Butona tıklandığı zaman çağrılacak fonksiyon
        #Sayı penceresi başlıklı ve içinde
        #'Mesaj' yazan bir açılır pencere göster
        #Ve pencereye yazılan sayıyı 'sayi' değişkenine aktar
        sayi = p.integerBox('Sayı penceresi', 'Mesaj', parent=None)
        #metin değişkenini yazdır
        print(sayi)

    #Pencereyi oluştur
    p = gui()

    #Pencerenin en,boy uzunluklarını 300,200 olarak ayarla
    p.setSize(300,200)

    #'Buton' başlıklı bir buton ekle ve
    #Bu butona her tıklandığında 'press' fonksiyonunu çalıştır
    p.addButton('Buton', press)

    #Pencereyi başlat
    p.go()

image
image

Sayı kutusunun içine 123 yazıp onayladıktan sonra alınan çıktı.

image

Eğer bir metin yazılırsa aşağıdaki gibi hata verecektir.

image
image

### Ondalıklı Sayı Kutusu Penceresi

Ondalıklı Sayı Kutusu penceresi eklemek için gui() sınıfına ait floatBox() metodu kullanılır. floatBox() metodu içine yazılan değeri float olarak döndürür.

    from appJar import gui

    def press():#Butona tıklandığı zaman çağrılacak fonksiyon
        #Sayı penceresi başlıklı ve içinde
        #'Mesaj' yazan bir açılır pencere göster
        #Ve pencereye yazılan sayıyı 'sayi' değişkenine aktar
        sayi = p.floatBox('Sayı penceresi', 'Mesaj', parent=None)
        #metin değişkenini yazdır
        print(sayi)

    #Pencereyi oluştur
    p = gui()

    #Pencerenin en,boy uzunluklarını 300,200 olarak ayarla
    p.setSize(300,200)

    #'Buton' başlıklı bir buton ekle ve
    #Bu butona her tıklandığında 'press' fonksiyonunu çalıştır
    p.addButton('Buton', press)

    #Pencereyi başlat
    p.go()

image
image

Sayı kutusunun içine 15.7596 yazıp onayladıktan sonra alınan çıktı.

image