pyTermTk - Layouts
Intro
TTkLayouts are specialised classes that allow the placement of the widgets.
TTkLayout
This is the base class for all the different layouts.
It allows free placement of the widgets in the layout area.
Used mainly to have free range moving windows because the widgets are not automatically replaced after a layout event
TTkLayout
╔════════════════════════════╗
║ pos(4,2) ║
║ ┌───────┐ pos(16,4) ║
║ │Widget1│ ┌─────────┐ ║
║ │ │ │ Widget2 │ ║
║ │ │ └─────────┘ ║
║ │ │ ║
║ └───────┘ ║
║ ║
╚════════════════════════════╝
TTkHBoxLayout
This layout allow an automatic place all the widgets horizontally
TTkHBoxLayout
╔═════════╤═════════╤═════════╗
║ Widget1 │ Widget2 │ Widget3 ║
║ │ │ ║
║ │ │ ║
║ │ │ ║
║ │ │ ║
║ │ │ ║
╚═════════╧═════════╧═════════╝
TTkVBoxLayout
This layout allow an automatic place all the widgets vertically
TTkVBoxLayout
╔═════════════════════════════╗
║ Widget 1 ║
╟─────────────────────────────╢
║ Widget 2 ║
╟─────────────────────────────╢
║ Widget 3 ║
╟─────────────────────────────╢
║ Widget 4 ║
╚═════════════════════════════╝
TTkGridLayout
This layout allow an automatic place all the widgets in a grid the empty rows/cols are resized to the “columnMinHeight,columnMinWidth” parameters
TTkGridLayout ┌┐ columnMinWidth
╔═════════╤═════════╤╤═════════╗
║ Widget1 │ Widget2 ││ Widget3 ║
║ (0,0) │ (0,1) ││ (0,3) ║
╟─────────┼─────────┼┼─────────╢ ┐ columnMinHeight
╟─────────┼─────────┼┼─────────╢ ┘
║ Widget4 │ ││ ║
║ (2,0) │ ││ ║
╟─────────┼─────────┼┼─────────╢
║ │ ││ Widget5 ║
║ │ ││ (3,3) ║
╚═════════╧═════════╧╧═════════╝
Examples
1 - Simple TTkLayout
Following is the code to execute Layout Example in pyTermTk (tryItOnline)
import TermTk as ttk
# TTkLayout is used by default
root = ttk.TTk()
# Attach 4 buttons to the root widget
ttk.TTkButton(parent=root, pos=(0,0), size=(15,5), border=True, text="Button1")
ttk.TTkButton(parent=root, pos=(0,5), size=(10,4), border=True, text="Button2")
ttk.TTkButton(parent=root, pos=(10,6), size=(10,3), border=True, text="Button3")
ttk.TTkButton(parent=root, pos=(13,1), size=(15,3), border=True, text="Button4")
root.mainloop()
The above code produces the following output:
┌─────────────┐
│ ┌─────────────┐
│ Button1 │ Button4 │
│ ╘═════════════╛
╘═════════════╛
┌────────┐
│Button2 │┌────────┐
│ ││Button3 │
╘════════╛╘════════╛
2 - Simple TTkVBoxLayout
Following is the code to execute VBox Example in pyTermTk (tryItOnline)
import TermTk as ttk
# Set the VBoxLayout as default in the terminal widget
root = ttk.TTk(layout=ttk.TTkVBoxLayout())
# Attach 4 buttons to the root widget
ttk.TTkButton(parent=root, border=True, text="Button1")
ttk.TTkButton(parent=root, border=True, text="Button2")
ttk.TTkButton(parent=root, border=True, text="Button3")
ttk.TTkButton(parent=root, border=True, text="Button4")
root.mainloop()
The above code produces the following output:
┌───────────────────────────────────────────────────────────┐
│ │
│ Button1 │
│ │
╘═══════════════════════════════════════════════════════════╛
┌───────────────────────────────────────────────────────────┐
│ │
│ Button2 │
│ │
╘═══════════════════════════════════════════════════════════╛
┌───────────────────────────────────────────────────────────┐
│ │
│ Button3 │
│ │
╘═══════════════════════════════════════════════════════════╛
┌───────────────────────────────────────────────────────────┐
│ │
│ Button4 │
│ │
╘═══════════════════════════════════════════════════════════╛
3 - Simple TTkHBoxLayout
Following is the code to execute HBox Example in pyTermTk (tryItOnline)
import TermTk as ttk
# Set the HBoxLayout as default in the terminal widget
root = ttk.TTk()
root.setLayout(ttk.TTkHBoxLayout())
# Attach 4 buttons to the root widget
ttk.TTkButton(parent=root, border=True, text="Button1")
ttk.TTkButton(parent=root, border=True, text="Button2")
ttk.TTkButton(parent=root, border=True, text="Button3")
ttk.TTkButton(parent=root, border=True, text="Button4")
root.mainloop()
The above code produces the following output
┌─────────────┐┌─────────────┐┌─────────────┐┌──────────────┐
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ Button1 ││ Button2 ││ Button3 ││ Button4 │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
╘═════════════╛╘═════════════╛╘═════════════╛╘══════════════╛
4 - Simple TTkGridLayout
Following is the code to execute Grid Example in pyTermTk (tryItOnline)
import TermTk as ttk
# Set the GridLayout as default in the terminal widget
gridLayout = ttk.TTkGridLayout(columnMinHeight=0,columnMinWidth=2)
root = ttk.TTk(layout=gridLayout)
# Attach 2 buttons to the root widget using the default method
# this will append them to the first row
ttk.TTkButton(parent=root, border=True, text="Button1")
ttk.TTkButton(parent=root, border=True, text="Button2")
# Attach 2 buttons to a specific position in the grid
gridLayout.addWidget(ttk.TTkButton(parent=root, border=True, text="Button3"), 1,2)
gridLayout.addWidget(ttk.TTkButton(parent=root, border=True, text="Button4"), 3,4)
root.mainloop()
The above code produces the following output
┌───────────┐┌───────────┐
│ ││ │
│ Button1 ││ Button2 │
│ ││ │
╘═══════════╛╘═══════════╛
┌───────────┐
│ │
│ Button3 │
│ │
╘═══════════╛
┌───────────┐
│ │
│ Button4 │
│ │
╘═══════════╛
5 - Nested Layouts
Following is the code to execute Nested Layouts Example in pyTermTk (tryItOnline)
import TermTk as ttk
# Set the GridLayout as default in the terminal widget
root = ttk.TTk()
gridLayout = ttk.TTkGridLayout()
root.setLayout(gridLayout)
# Attach 2 buttons to the root widget using the default method
# this will append them to the first row
# NOTE: it is not recommended to use this legacy method in a gridLayout
ttk.TTkButton(parent=root, border=True, text="Button1")
ttk.TTkButton(parent=root, border=True, text="Button2")
# Attach 2 buttons to a specific position in the grid
gridLayout.addWidget(ttk.TTkButton(border=True, text="Button3"), 1,2)
gridLayout.addWidget(ttk.TTkButton(border=True, text="Button4"), 2,4)
# Create a VBoxLayout and add it to the gridLayout
vboxLayout = ttk.TTkVBoxLayout()
gridLayout.addItem(vboxLayout,1,3)
# Attach 2 buttons to the vBoxLayout
vboxLayout.addWidget(ttk.TTkButton(border=True, text="Button5"))
vboxLayout.addWidget(ttk.TTkButton(border=True, text="Button6"))
root.mainloop()
The above code produces the following output
┌─────────┐┌─────────┐
│ ││ │
│ Button1 ││ Button2 │
│ ││ │
╘═════════╛╘═════════╛
┌─────────┐┌─────────┐
│ ││ Button5 │
│ Button3 │╘═════════╛
│ │┌─────────┐
│ ││ Button6 │
╘═════════╛╘═════════╛
┌─────────┐
│ │
│ Button4 │
│ │
╘═════════╛
6 - Rowspan/Colspan in Grid Layout
Following is the code to execute row/colspan Example in pyTermTk (tryItOnline)
import TermTk as ttk
root = ttk.TTk()
gridLayout = ttk.TTkGridLayout()
root.setLayout(gridLayout)
# | x = 0 | x = 1 | x = 2 |
# | | | |
# ┌────────────────┐┌─────────┐ ──────
# │y=0 x=0 h=1 w=2 ││y=0 x=2 │ y = 0
# │ Button1 ││h=2 w=1 │
# ╘════════════════╛│ │ ──────
# ┌─────────┐ │ Button2 │ y = 1
# │y=1 x=0 │ ╘═════════╛
# │h=2 w=1 │┌────────────────┐ ──────
# │ ││y=2 x=1 h=1 w=2 | y = 2
# │ Button3 ││ Button4 │
# ╘═════════╛╘════════════════╛ ──────
gridLayout.addWidget(ttk.TTkButton(border=True, text="Button1"), 0,0, 1,2)
gridLayout.addWidget(ttk.TTkButton(border=True, text="Button2"), 0,2, 2,1)
gridLayout.addWidget(ttk.TTkButton(border=True, text="Button3"), 1,0, 2,1)
# It is possible to expand the names
gridLayout.addWidget(ttk.TTkButton(border=True, text="Button4"), row=2, col=1, rowspan=1, colspan=2)
root.mainloop()
The above code produces the following output
┌───────────────────────┐┌───────────┐
│ ││ │
│ Button1 ││ │
│ ││ │
╘═══════════════════════╛│ Button2 │
┌───────────┐ │ │
│ │ │ │
│ │ │ │
│ │ ╘═══════════╛
│ Button3 │┌───────────────────────┐
│ ││ │
│ ││ Button4 │
│ ││ │
╘═══════════╛╘═══════════════════════╛