Qt Designer Kullanımı - Fahri Güreşçi

Qt ile programlamada Qt Designer kullanarak daha pratik işlemler ve denemeler yaparak kodlarımızı oluşturacağız. Qt Designer’ı çalıştırdığımızda böyle bir ekranla karşılaşacağız.

İlk açılan pencerede oluşturacağımız pencere tipini ve boyutunu belirleyerebiliriz. templates/forms’a tıklayarak en basit kod yapısı için Widget’i seçerek create’e basın. Sol tarafta bulunan Widget Box’ı kullanarak istediğiniz seçeneği sürükle bırak yaparak pencerenizi oluştubilirsiniz. Şimdilik kod yapısını anlamamız için basit halde kalması daha iyi. File sekmesi altında bulunan Save As…’ e tıklayarak masaüstüne kaydedelim. İlk kaydedilen dosya aşağıdaki gibi xml şeklindedir. (untitled.ui)

<xmp><?xml version="1.0" encoding="UTF-8"?>
  <ui version="4.0">
   <class>Form</class>
   <widget class="QWidget" name="Form">
    <property name="geometry">
     <rect>
      <x>0</x>
      <y>0</y>
      <width>398</width>
      <height>300</height>
     </rect>
    </property>
    <property name="windowTitle">
     <string>Form</string>
    </property>
   </widget>
   <resources/>
   <connections/>
  </ui>
</xmp>

Bu xml dosyasını python koduna çevirmemiz gerekiyor. cmd yi açarak cd C:\Users\username\Desktop yazarak masaüstü dizinine ayarlayın. Daha sonra pyuic4 aracını kullanarak ui olan dosyayı filename.py şekline çevireceğiz.

pyuic4 -x untitled.ui -o filename.py

Masaüstünde oluşan filename.py dosyasını herhangi bir metin düzenleyiciyle açın. Çevrilen kod aşağıdaki gibi olacaktır.

# -*- coding: utf-8 -*-
 
# Form implementation generated from reading ui file 'untitled.ui'
#
# Created by: PyQt4 UI code generator 4.11.4
#
# WARNING! All changes made in this file will be lost!
 
from PyQt4 import QtCore, QtGui
 
try:
    _fromUtf8 = QtCore.QString.fromUtf8
except AttributeError:
    def _fromUtf8(s):
        return s
 
try:
    _encoding = QtGui.QApplication.UnicodeUTF8
    def _translate(context, text, disambig):
        return QtGui.QApplication.translate(context, text, disambig, _encoding)
except AttributeError:
    def _translate(context, text, disambig):
        return QtGui.QApplication.translate(context, text, disambig)
 
class Ui_Form(object):
    def setupUi(self, Form):
        Form.setObjectName(_fromUtf8("Form"))
        Form.resize(398, 300)
 
        self.retranslateUi(Form)
        QtCore.QMetaObject.connectSlotsByName(Form)
 
    def retranslateUi(self, Form):
        Form.setWindowTitle(_translate("Form", "Form", None))
 
 
if __name__ == "__main__":
    import sys
    app = QtGui.QApplication(sys.argv)
    Form = QtGui.QWidget()
    ui = Ui_Form()
    ui.setupUi(Form)
    Form.show()
    sys.exit(app.exec_())

Çevirdiğimiz kod gözünüze biraz karmaşık gelmiş olabilir. Şimdi basitçe açıklayarak ilgileneceğimiz kısımları açıklayalım.

PyQt’nin QtGui ve QtCore sınıflarını çağırıyoruz.
Ui_Form sınıfı tipinde bir nesne oluşturacağız. Bu sınıfın setupUi fonksiyonu penceremizin yapılandırılmasını sağlayacak.

def retranslateUi(self, Form):
    Form.setWindowTitle(_translate("Form", "İlk Uygulama", None))

retranslateUi fonksiyonunda butonların, text label lerin, başlığın vs. isimlerini atıyoruz.

app = QtGui.QApplication(sys.argv)

PyQt uygulamamızı oluşturuyoruz. Programımızın ana işleyişini gerçekleştirecek kısımdır.

Form = QtGui.QWidget()

QWidget tipinde form oluşturuyoruz.

ui = Ui_Form()

ui adında Ui_Form nesnesi oluşturuyoruz.

ui.setupUi(Form)

Daha önce oluşturduğumuz QWidget tipindeki formu ui nesnesinin setupUi fonksiyonuna parametre olarak veriyoruz.

Form.show()

Penceremizin gözükmesi için show metodunu kullandık.

sys.exit(app.exec_())

Penceremizin açık kalmasını sağlıyoruz.

Örnek Uygulama

Şimdi basit bir toplama işlemi yapan pencere hazırlayalım. İlk olarak Qt Designerda yapacağımız pencereyi çizelim.

Bu pencereyi oluştururken iki adet sayı gireceğimiz kısımları sol tarafta bulunan input Widgets sekmesi altından lineEdit’i sürükleyelim. + ve = simgelerini oluşurmak için Display Widgets altında bulunan label’ı ekleyerek içeriğine çift tıklayarak değiştirelim. Son olarak iki adet buton sekmesinden Push Button tipinde buton ekleyelim. İçeriğine çift tıklayarak veya kod içerisinde retranslateUi fonksiyonundan düzenleyebiliriz.

Yazacağımız fonksiyonlar Ui_Form class’ının içinde bulunmalı. Ui_Form class’ının altında topla adlı bir fonksiyonu bu şekilde oluşturalım.

def topla(self):
    sayi1=self.lineEdit.text()
    sayi2=self.lineEdit_2.text()
    toplam=int(sayi1)+int(sayi2)
    self.label_2.setText(str(toplam))

İki sayı tanımlayarak bunları lineEdit’in text() metoduyla eşitleyelim. lineEdit’e yazılan değerler string türünde olduğundan integer yaparak toplam değişkenine atadık. Sonucun yazdırılacağı label’a setText() metoduyla atadık. Burada dikkat etmemiz gereken hangi metodun hangi değerleri istediğini bilmeliyiz. Yazdığımız topla fonksiyonunu SetupUi fonksiyonundan önce yazmalıyız. Son olarak butonları işleme bağlayacağız. Butona basıldığında oluşan sinyali aşağıdaki kodu kullanarak bağlayacağız. Bu kodu SetupUi fonksiyonunun altına yazıyoruz.

Form.connect(self.pushButton, QtCore.SIGNAL("pressed()"), self.topla)
Form.connect(self.pushButton_2, QtCore.SIGNAL("pressed()"), self.cikis)

Bu kodda connect metodu üç parametre alıyor. Butonumuzun adı, oluşan sinyal ve çalıştırılacak olan fonksiyonumuz. Çıkış fonksiyonumuzda şöyle olacak:

def cikis(self):
    sys.exit()

Pencerenin özelliklerini tanımlarken SetupUi fonksiyonunun içine yazıyoruz.

Penceremizin sabit belirlediğimiz boyutta açılmasını istiyorsak:

Form.setFixedSize(289, 110)

Arka plan rengini ayarlamak için:

Form.setStyleSheet("background-color:#96ceb4;")

Toplama işlemi yapan Qt kodumuzun tamamı

# -*- coding: utf-8 -*-
 
# Form implementation generated from reading ui file 'untitled.ui'
#
# Created by: PyQt4 UI code generator 4.11.4
#
# WARNING! All changes made in this file will be lost!
 
from PyQt4 import QtCore, QtGui
 
try:
    _fromUtf8 = QtCore.QString.fromUtf8
except AttributeError:
    def _fromUtf8(s):
        return s
 
try:
    _encoding = QtGui.QApplication.UnicodeUTF8
    def _translate(context, text, disambig):
        return QtGui.QApplication.translate(context, text, disambig, _encoding)
except AttributeError:
    def _translate(context, text, disambig):
        return QtGui.QApplication.translate(context, text, disambig)
 
class Ui_Form(object):
    def topla(self):
        sayi1=self.lineEdit.text()
        sayi2=self.lineEdit_2.text()
        toplam=int(sayi1)+int(sayi2)
        self.label_2.setText(str(toplam))
    def cikis(self):
        sys.exit()
 
    def setupUi(self, Form):
        Form.setObjectName(_fromUtf8("Form"))
        Form.setFixedSize(289, 110)
        Form.setStyleSheet("background-color:#96ceb4;")
        self.pushButton = QtGui.QPushButton(Form)
        self.pushButton.setGeometry(QtCore.QRect(20, 70, 75, 23))
        self.pushButton.setObjectName(_fromUtf8("pushButton"))
        self.pushButton_2 = QtGui.QPushButton(Form)
        self.pushButton_2.setGeometry(QtCore.QRect(200, 70, 75, 23))
        self.pushButton_2.setObjectName(_fromUtf8("pushButton_2"))
        self.lineEdit = QtGui.QLineEdit(Form)
        self.lineEdit.setGeometry(QtCore.QRect(20, 30, 61, 20))
        self.lineEdit.setObjectName(_fromUtf8("lineEdit"))
        self.lineEdit_2 = QtGui.QLineEdit(Form)
        self.lineEdit_2.setGeometry(QtCore.QRect(140, 30, 61, 20))
        self.lineEdit_2.setObjectName(_fromUtf8("lineEdit_2"))
        self.label = QtGui.QLabel(Form)
        self.label.setGeometry(QtCore.QRect(110, 30, 16, 20))
        self.label.setObjectName(_fromUtf8("label"))
        self.label_2 = QtGui.QLabel(Form)
        self.label_2.setGeometry(QtCore.QRect(240, 30, 51, 21))
        self.label_2.setText(_fromUtf8(""))
        self.label_2.setObjectName(_fromUtf8("label_2"))
        self.label_3 = QtGui.QLabel(Form)
        self.label_3.setGeometry(QtCore.QRect(220, 30, 16, 21))
        self.label_3.setObjectName(_fromUtf8("label_3"))
 
        self.retranslateUi(Form)
        QtCore.QMetaObject.connectSlotsByName(Form)
 
        Form.connect(self.pushButton, QtCore.SIGNAL("pressed()"), self.topla)
        Form.connect(self.pushButton_2, QtCore.SIGNAL("pressed()"), self.cikis)
 
    def retranslateUi(self, Form):
        Form.setWindowTitle(_translate("Form", "python4hackers.com", None))
        self.pushButton.setText(_translate("Form", "Topla", None))
        self.pushButton_2.setText(_translate("Form", "Çıkış", None))
        self.label.setText(_translate("Form", "+", None))
        self.label_3.setText(_translate("Form", "=", None))
 
 
if __name__ == "__main__":
    import sys
    app = QtGui.QApplication(sys.argv)
    Form = QtGui.QWidget()
    ui = Ui_Form()
    ui.setupUi(Form)
    Form.show()
    sys.exit(app.exec_())

Bu alıştırmayı anladıktan sonra bir hesap makinesi rahatça yapabiliyor olmalısınız. Bir önceki konumuzda anlatmış olduğumuz metodlarla beraber örnek bir çalışma yapmanızı tavsiye ederim.

Not: Kullandığımız Widget araçlarının metotlarına rahatça erişmek için ben PyCharm kullanıyorum. Örn.

Birazda Qt Designer’da bulunan bölümlere değinelim.

Qt Designer Bölümleri

WIDGET BOX

Bu bölümü kullanarak penceremizin temel yapısını oluşturuyoruz. Bu bölümde Layouts, Spacers, Buttons, İtem Views, İtem Widgets, Containers, İnput Widgets ve Output Widgets bizim pek çok işimizi görecek olan pencere elemanlarıdır. Sürükleme yoluyla bunları kullanabilirsiniz.

OBJECT INSPECTOR

Bu bölümde widget box’tan sürüklediğimiz araçların bir listesini görmekteyiz. Yapacağımız uygulamada kullandığımız araçların sayısı arttıkça bunların isimleri de karışacaktır. Bu kısımdan araçların isimlerine tıklayarak hangi araç olduğunu bulup özelliklerinde düzenlemeler yapabiliriz.

PROPERTY EDITOR

Değişiklik yapmak istediğimiz aracı object inspector’den seçip düzenleyebiliriz. Bu kısımda objectName’ i tekrar adlandırabilir, açılış geometrisini düzenleyebilir, en-boy oranını, yazı fontunu, pencere ikonunu, pencere saydamlığını ve daha birçok özelliği değiştirebilirsiniz.

SIGNAL/SLOT EDITOR

Bu bölümde Signal/Slot Editor, Action Editor ve Resource Browser bulunur. Yukarıda yapmış olduğumuz örnekte butona atadığımız görevi buradanda atayabiliriz. Action Editor’de penceremizdeki menüler ve aksiyonlar gözükür. Resource Browser’da kaynak dosyası oluşturup resim ekleyebiliyoruz. Kalem simgesine tıklayıp en soldaki new resource file’a tıklayarak yeni bir kaynak dosyası oluşturalım. Daha sonra sağ tarafta add prefix’e tıklayın. Resimlerinizi eklemek için add file ile seçerek ekleyebilirsiniz.

Signal/Slot için bir örnek yapalım.

Burada pushButton_2 ye basıldığında clicked() fonksiyonu çalışacak ve Form close fonksiyonu tarafından kapatılacaktır.

0 - 1

Thank You For Your Vote!

Sorry You have Already Voted!