An editor in a GUI

We will build a very simple editor and put it in a simple GUI. So how get started? Let’s take a look at all the parts that are involved:

The QMainWindow object is the window of your GUI. You define a layout for it and stuff all the components (widgets) into the window, one after the other. We’ve got just two components here: a QPushButton and a QsciScintilla object. We don’t really need a button, but let’s put it there anyway. The QsciScintilla object is what it’s all about. It is the QScintilla editor! Our simple editor won’t need a lexer or other complicated stuff. So the QsciLexer and QsciAPIs classes are not needed for now (remember from the intro..) :

When building a GUI, I usually start by subclassing the QMainWindow class. First I define the geometry of the window, next I create a central frame: self.__frm. This frame will be the parent of all widgets in my GUI. I define a layout for this frame: self.__lyt such that all added widgets get positioned vertically, one below the other.
As you already know, I create two widgets: the QPushButton and the QsciScintilla editor. I add them to the layout like this:


Below you can find the complete code:

import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.Qsci import *

class CustomMainWindow(QMainWindow):
    def __init__(self):
        super(CustomMainWindow, self).__init__()

        # Window setup
        # --------------

        # 1. Define the geometry of the main window
        self.setGeometry(300, 300, 800, 400)
        self.setWindowTitle("QScintilla Test")

        # 2. Create frame and layout
        self.__frm = QFrame(self)
        self.__frm.setStyleSheet("QWidget { background-color: #ffeaeaea }")
        self.__lyt = QVBoxLayout()
        self.__myFont = QFont()

        # 3. Place a button
        self.__btn = QPushButton("Qsci")

        # QScintilla editor setup
        # ------------------------

        # ! Make instance of QSciScintilla class!
        self.__editor = QsciScintilla()
        self.__editor.setUtf8(True)  # Set encoding to UTF-8
        self.__editor.setFont(self.__myFont)  # Will be overridden by lexer!

        # ! Add editor to layout !


    def __btn_action(self):
        print("Hello World!")


''' End Class '''

if __name__ == '__main__':
    app = QApplication(sys.argv)
    myGUI = CustomMainWindow()



When executing this code, you’ll get a window with the QScintilla editor embedded inside. Congratulations!