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

Link the Events/Slots for the basic functionalities 🌶️

Connect the TextEdit undo / redo availability signals with the setEnabled slots of the undo/redo buttons

This allow the TextEdit to control directly the availability status of the Buttons
Connect the undo/redo buttons clicked event to the undo / redo slots of the TextEditor
Same for the Cut, Copy, Paste

textEdit.04.tui.json

Add few extra controls (Open/Save/Color)🌶️

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

textEdit.05.tui.json

Link the Events/Slots for the color feature 🌶️

textEdit.06.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 1) Include the Open/Save routine and link them to the widget 🌶️

Once (quick)exported the code, we need to define the appropriate routines and link them to the file(open/save) pickers signals

texteditor.02.py (tryItOnline):

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

# Retrieve the widgets we need to use
btnOpen  = textEditWindow.getWidgetByName("BtnOpen")
btnSave  = textEditWindow.getWidgetByName("BtnSave")
textEdit = textEditWindow.getWidgetByName("TextEdit")


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

# Connect the open routine to the (open)"filePicked" event
btnOpen.filePicked.connect(openRoutine)


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

# Connect the save routine to the (save)"filePicked" event
btnSave.filePicked.connect(saveRoutine)

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())

ttkDesigner - Your first TextEditor

Contents

ttkDesigner - Your first TextEditor🌶️