ttkDesigner - Your first TextEditor

Start a new project

  • Create a new Window (File -> New -> New Window)

  • Set your favourite window params:

    • Your preferred size

    • Some catcy Title

    • An Amazing Name - (This is the unique name that will be used to identify this Widget)

    • Change the Layout to TTkGridLayout (This will allow all the components to be placed in a grid aligned to the content of the window)

    • Add the “Maximize Button” through the Window Flags (I forgot to add this step in the video)

textEdit.01.tui.json

# You can quickly open this file using:
ttkDesigner tutorial/ttkDesigner/textEdit/textEdit.01.tui.json

Add The first buttons (Undo,redo - Cut,Copy,Paste)

  • Define the Undo, Redo commands

  • Drag 2 buttons inside the window aligning them in the preferred grid position

  • Define the proper button Text (”Undo”,”Redo”)

  • Choose a proper unique name (This step is not mandatory but useful to identify this Widget)

  • Disable those buttons by default because at the beginning the Text Editor is not going to have any Undo/Redo Buffers (I forgot to add this step in the video)

  • Define the Cut, Copy, Paste commands

    • Well, try to guess…

textEdit.02.tui.json

Add the TextEdit widget

  • Drag the TextEdit aligning it in the grid below any of the buttons previously placed

  • Expand the TextEdit widget in order to fill the entire area below the buttons
    Use the rainbow [🟥🟨🟩🩵🟦🦄] button to help identify the different widgets in the main window
  • Force the top grid to a fixed size (3 Chars)
    In order to achieve this it is enough to force the MaxSize of any of the buttons in the top row to 3 Chars

  • Check the line number, this will show the line number in the TextEdit when used

  • Choose a proper unique name (This step is not mandatory but useful to identify this Widget)

textEdit.03.tui.json

Add few extra controls (Open/Save/Color)

I used those emoji as file open/save text 📂 💾

textEdit.05.tui.json

Preview and Quick Export

Exported: texteditor.01.py (tryItOnline):

# If you want to try without installation, run from the pyTermTk root folder
PYTHONPATH=`pwd`  python3  tutorial/ttkDesigner/textEdit/texteditor.01.py

Import this widget in your project

The TTkUiLoader provide different methods to use the content generated by ttkDesigner

Each method is capable of (1) returning a new Widget or (2) extending a custom defined widget

Option 2) Extend a custom widget including the open/save methods

texteditor.03.py (tryItOnline):

# If you want to try without installation, run from the pyTermTk root folder
PYTHONPATH=`pwd`  python3  tutorial/ttkDesigner/textEdit/texteditor.03.py

class MyTextEditor(TTkWindow):
    def __init__(self):
        # The "TTkUiLoader" is responsible to init this custom object
        # and extend it to the "textEditWindow" created in this tutorial
        # NOTE: no "super().__init__()" is required
        TTkUiLoader.loadDict(TTkUtil.base64_deflate_2_obj(
            #  <Copy here the Compressed string representing the object>
            ), self)

        # Connect the open routine to the (open)"filePicked" event
        self.getWidgetByName("BtnOpen").filePicked.connect(self.openRoutine)
        # Connect the save routine to the (save)"filePicked" event
        self.getWidgetByName("BtnSave").filePicked.connect(self.saveRoutine)

    # This is a generic routine to open/read a file
    # and push the content to the "TextEdit" widget
    pyTTkSlot(str)
    def openRoutine(self, fileName):
        textEdit = self.getWidgetByName("TextEdit")
        with open(fileName) as fp:
            textEdit.setText(fp.read())

    # This is a generic routine to save the content of
    # the "TextEdit" widget to the chosen file
    pyTTkSlot(str)
    def saveRoutine(self, fileName):
        textEdit = self.getWidgetByName("TextEdit")
        with open(fileName, 'w') as fp:
            fp.write(textEdit.toPlainText())