Qt QDialog rendering stacked

Question

These are my first steps in Qt. I'm trying to build simple text editor like in this tutorial: http://www.rkblog.rk.edu.pl/w/p/simple-text-editor-pyqt4/

So, I've created the design in Qt Designer. Here's the preview:

Perfect :)

Here are Qt Objects and Classes to make it clear how the layout is built:

I've compiled the .py file:

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'G:\Google Drive\py_scripts\QTUI\simpleTextEditor_gui.ui'
#
# Created: Fri Jan 24 20:06:32 2014
#      by: PyQt4 UI code generator 4.10.1
#
# 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_simpleTextEditor(object):
    def setupUi(self, simpleTextEditor):
        simpleTextEditor.setObjectName(_fromUtf8("simpleTextEditor"))
        simpleTextEditor.resize(524, 413)
        self.gridLayout = QtGui.QGridLayout(simpleTextEditor)
        self.gridLayout.setObjectName(_fromUtf8("gridLayout"))
        self.verticalLayout = QtGui.QVBoxLayout()
        self.verticalLayout.setObjectName(_fromUtf8("verticalLayout"))
        self.editorWindow = QtGui.QTextEdit(simpleTextEditor)
        self.editorWindow.setObjectName(_fromUtf8("editorWindow"))
        self.verticalLayout.addWidget(self.editorWindow)
        self.horizontalLayout = QtGui.QHBoxLayout()
        self.horizontalLayout.setObjectName(_fromUtf8("horizontalLayout"))
        self.buttonOpen = QtGui.QPushButton(simpleTextEditor)
        self.buttonOpen.setObjectName(_fromUtf8("buttonOpen"))
        self.horizontalLayout.addWidget(self.buttonOpen)
        self.buttonClose = QtGui.QPushButton(simpleTextEditor)
        self.buttonClose.setObjectName(_fromUtf8("buttonClose"))
        self.horizontalLayout.addWidget(self.buttonClose)
        self.verticalLayout.addLayout(self.horizontalLayout)
        self.gridLayout.addLayout(self.verticalLayout, 0, 0, 1, 1)

        self.retranslateUi(simpleTextEditor)
        QtCore.QObject.connect(self.buttonClose, QtCore.SIGNAL(_fromUtf8("clicked()")), simpleTextEditor.close)
        QtCore.QMetaObject.connectSlotsByName(simpleTextEditor)

    def retranslateUi(self, simpleTextEditor):
        simpleTextEditor.setWindowTitle(_translate("simpleTextEditor", "Simple Text Editor", None))
        self.buttonOpen.setText(_translate("simpleTextEditor", "Open", None))
        self.buttonClose.setText(_translate("simpleTextEditor", "Close", None))

And created my very simple app:

import sys
from PyQt4 import QtCore, QtGui
from simpleTextEditor_gui import Ui_simpleTextEditor

class StartQT4(QtGui.QMainWindow):
    def __init__(self, parent=None):
        QtGui.QWidget.__init__(self, parent)
        self.ui = Ui_simpleTextEditor()
        self.ui.setupUi(self)
        # tutaj dajemy wlasne polaczenia slotow
        QtCore.QObject.connect(self.ui.buttonOpen,QtCore.SIGNAL("clicked()"), self.file_dialog)
    def file_dialog(self):
        fd = QtGui.QFileDialog(self)
        self.filename = fd.getOpenFileName()
        from os.path import isfile
        if isfile(self.filename):
            text = open(self.filename).read()
            self.ui.editorWindow.setText(text)

if __name__ == "__main__":
    app = QtGui.QApplication(sys.argv)
    myapp = StartQT4()
    myapp.show()
    sys.exit(app.exec_())

Now when I run the app, all the objects are stacked, which looks like this:

Any help appreciated!

Answer 1

The main problem with your code is that you are using the wrong base-class for your StartQT4 subclass. It should match the top-level class from Qt Designer, which is a QDialog.

You can also simplify your code a little, by adding the ui directly to your sub-class, and by using new-style signal and slot syntax.

With these changes in place, your code would look like this:

import sys
from PyQt4 import QtCore, QtGui
from simpleTextEditor_gui import Ui_simpleTextEditor

class StartQT4(QtGui.QDialog, Ui_simpleTextEditor):
    def __init__(self, parent=None):
        QtGui.QDialog.__init__(self, parent)
        self.setupUi(self)
        # tutaj dajemy wlasne polaczenia slotow
        self.buttonOpen.clicked.connect(self.file_dialog)

    def file_dialog(self):
        fd = QtGui.QFileDialog(self)
        self.filename = fd.getOpenFileName()
        from os.path import isfile
        if isfile(self.filename):
            text = open(self.filename).read()
            self.editorWindow.setText(text)

if __name__ == "__main__":
    app = QtGui.QApplication(sys.argv)
    myapp = StartQT4()
    myapp.show()
    sys.exit(app.exec_())