tksystem 0.0.5

Tkinter cascade file system

TK FILES

Tk files are cascade files that wrap around the interface system of the tkinter module. The idea is to have a structure similar to kivy or QML files, it also has a system of styles with a format similar to CSS. The main idea of this format is to create separate interfaces from the functional file, for a better organization and have the possibility of editing the interface from the code since it is a text file. It should be noted that you should know about the tkinter module.

This is the minimal configuration for a simple window.

We start with a "Tk", which is the base widget of tkinter, then with an extra level of indentation we state the properties that we want. Here is the syntax.

It is important to pay attention to the spaces, since at the moment the project is in the initial phases and there are no considerations towards these cases. This could change in the future.

• For simple properties
  • property_name: property_value
• To call functions of the widget we start the name with a "."
  • .function_name: function_value

Tk
    .geometry: '500x500'
    .title: 'Simple UI'
    bg: '#181818'

To run the tk file we use this simple code, what it does is import the load of the function from the tksystem.functions module, then we create a window variable that will store the window built from the given file, we also pass the "__file__" as the second parameter, this is necessary in case we have functions for our interface, otherwise we can skip it. (But it is recommended to use it in any case.)

# Import load from tksystem.functions module
from tksystem.functions import load

# Use this if statement, is important to avoid recursive imports
if __name__ == '__main__':
    window = load('gui.tk', __file__)
    window.mainloop()

Now let's see a more complex example to implement functions and the id system. Here is the new syntax.

• To call a function start the function's name with a "$" then the name
  • For example: $change
• To reference an id start the id with a "#" then the id
  • For example: #topleft_frame
• If the function needs arguments then we pass them using "()" around the elements and each value with a " | ". (Notice the spacing)
  • For example: $change (#topleft_frame | "#ff0000" | "#800000")
• References.
  • self: refers to the widget itself.
  • self.master: refers to the parent of the widget.
  • self[property]: refers to the given property of the widget itself.
  • Any other value must follow python´s syntax.
    • For example: '#ff0000', [self, self.master, self['bg']]

.tk file

Tk
    .title: 'Simple UI'
    bg: '#181818'
    Frame
        bg: '#323232'
        .pack: {}
        Frame
            id: 'topleft_frame'
            bg: '#ff0000'
            width: 200
            height: 200
            .grid: {'row': 0, 'column': 0, 'padx': (50, 0), 'pady': (50, 0)}
        Frame
            id: 'topright_frame'
            bg: '#ffff00'
            width: 200
            height: 200
            .grid: {'row': 0, 'column': 1, 'padx': 50, 'pady': (50, 0)}
        Frame
            id: 'bottomleft_frame'
            bg: '#00ffff'
            width: 200
            height: 200
            .grid: {'row': 1, 'column': 0, 'padx': (50, 0), 'pady': 50}
        Frame
            id: 'bottomright_frame'
            bg: '#00ff00'
            width: 200
            height: 200
            .grid: {'row': 1, 'column': 1, 'padx': 50, 'pady': 50}
    Frame
        bg: 'gray'
        .pack: {}
        Button
            text: 'change top left'
            command: $change(#topleft_frame | '#ff0000' | '#800000')
            .grid: {'row': 0, 'column': 0}
        Button
            text: 'change top right'
            command: $change(#topright_frame | '#ffff00' | '#808000')
            .grid: {'row': 0, 'column': 1}
        Button
            text: 'change bottom left'
            command: $change(#bottomleft_frame | '#00ffff' | '#008080')
            .grid: {'row': 0, 'column': 2}
        Button
            text: 'change bottom right'
            command: $change(#bottomright_frame | '#00ff00' | '#008000')
            .grid: {'row': 0, 'column': 3}

.py file

# Import load from pylejandria.gui module
from tksystem.functions import load

# Define the change function, this will be called by the buttons
def change(widget: tk.Widget, color1: str, color2: str) -> None:
    """
    Change the color of the background of the widget based on its current
    color. If the current color is equal to the first color then we choose the
    second one and viceversa.
    """
    widget['bg'] = color1 if widget['bg'] == color2 else color2

# Use this if statement, is important to avoid recursive imports
if __name__ == '__main__':    
    window = load(path, __file__)
    window.mainloop()

CREDITS

Name	User
Armando Chaparro	TheCodingStudent

LICENSE

PyLejandria by Armando Chaparro is licensed under a MIT License. See LICENSE.md.

Copyright © 2022 Armando Chaparro