You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
400 lines
19 KiB
400 lines
19 KiB
.. _pyTermTk: https://github.com/ceccopierangiolieugenio/pyTermTk |
|
.. _windows: https://ceccopierangiolieugenio.github.io/pyTermTk/autogen.TermTk/TermTk.TTkWidgets.window.html |
|
.. _TTkLabel: https://ceccopierangiolieugenio.github.io/pyTermTk/autogen.TermTk/TermTk.TTkWidgets.label.html |
|
.. _TTkLayouts: https://ceccopierangiolieugenio.github.io/pyTermTk/autogen.TermTk/TermTk.TTkLayouts.html |
|
.. _TTkLayout: https://ceccopierangiolieugenio.github.io/pyTermTk/autogen.TermTk/TermTk.TTkLayouts.layout.html#ttklayout |
|
.. _TTkHBoxLayout: https://ceccopierangiolieugenio.github.io/pyTermTk/autogen.TermTk/TermTk.TTkLayouts.boxlayout.html#ttkhboxlayout |
|
.. _TTkVBoxLayout: https://ceccopierangiolieugenio.github.io/pyTermTk/autogen.TermTk/TermTk.TTkLayouts.boxlayout.html#ttkvboxlayout |
|
.. _TTkGridLayout: https://ceccopierangiolieugenio.github.io/pyTermTk/autogen.TermTk/TermTk.TTkLayouts.gridlayout.html#ttkgridlayout |
|
|
|
.. _Layout Example: https://github.com/ceccopierangiolieugenio/pyTermTk/blob/main/tutorial/layout/example1.simple.layout.py |
|
.. _VBox Example: https://github.com/ceccopierangiolieugenio/pyTermTk/blob/main/tutorial/layout/example2.simple.vbox.py |
|
.. _HBox Example: https://github.com/ceccopierangiolieugenio/pyTermTk/blob/main/tutorial/layout/example3.simple.hbox.py |
|
.. _Grid Example: https://github.com/ceccopierangiolieugenio/pyTermTk/blob/main/tutorial/layout/example4.simple.grid.py |
|
.. _Nested Layouts Example: https://github.com/ceccopierangiolieugenio/pyTermTk/blob/main/tutorial/layout/example5.nested.layouts.py |
|
.. _`row/colspan Example`: https://github.com/ceccopierangiolieugenio/pyTermTk/blob/main/tutorial/layout/example6.grid.span.py |
|
|
|
.. _web-LayoutEx: https://ceccopierangiolieugenio.github.io/pyTermTk/sandbox/sandbox.html?filePath=tutorial/layout/example1.simple.layout.py |
|
.. _web-VBoxEx: https://ceccopierangiolieugenio.github.io/pyTermTk/sandbox/sandbox.html?filePath=tutorial/layout/example2.simple.vbox.py |
|
.. _web-HBoxEx: https://ceccopierangiolieugenio.github.io/pyTermTk/sandbox/sandbox.html?filePath=tutorial/layout/example3.simple.hbox.py |
|
.. _web-GridEx: https://ceccopierangiolieugenio.github.io/pyTermTk/sandbox/sandbox.html?filePath=tutorial/layout/example4.simple.grid.py |
|
.. _web-NestedEx: https://ceccopierangiolieugenio.github.io/pyTermTk/sandbox/sandbox.html?filePath=tutorial/layout/example5.nested.layouts.py |
|
.. _web-SpanEx: https://ceccopierangiolieugenio.github.io/pyTermTk/sandbox/sandbox.html?filePath=tutorial/layout/example6.grid.span.py |
|
|
|
============================================================================= |
|
pyTermTk_ - Layouts |
|
============================================================================= |
|
|
|
Intro |
|
===== |
|
|
|
TTkLayouts_ are specialised classes that allow the placement of the widgets. |
|
|
|
.. image:: https://ceccopierangiolieugenio.github.io/pyTermTk/_images/Layout.HLD.001.svg |
|
|
|
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 <web-LayoutEx_>`_) |
|
|
|
.. code:: python |
|
|
|
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 <web-VBoxEx_>`_) |
|
|
|
.. code:: python |
|
|
|
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 <web-HBoxEx_>`_) |
|
|
|
.. code:: python |
|
|
|
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 <web-GridEx_>`_) |
|
|
|
|
|
.. code:: python |
|
|
|
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 <web-NestedEx_>`_) |
|
|
|
.. code:: python |
|
|
|
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 <web-SpanEx_>`_) |
|
|
|
|
|
.. code:: python |
|
|
|
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 │ |
|
│ ││ │ |
|
╘═══════════╛╘═══════════════════════╛ |
|
|
|
|