mirror
/
pyTermTk
mirror of https://github.com/ceccopierangiolieugenio/pyTermTk.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
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.
84 Commits
8 Branches
107 Tags
36 MiB
 
 
 
 
 
Tree: 04bb901316
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '04bb901316'
${ noResults }
pyTermTk/tutorial/002-layout.html

491 lines
48 KiB
Raw Blame History Escape

<!DOCTYPE html>
<html class="writer-html5" lang="en" >
<head>
<meta charset="utf-8" /><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>pyTermTk - Layouts &mdash; pyTermTk 0.36.0-a
documentation</title>
<link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
<link rel="stylesheet" href="../_static/css/theme.css" type="text/css" />
<link rel="stylesheet" href="../_static/theme_overrides.css" type="text/css" />
<link rel="stylesheet" href="../_static/ttk.css" type="text/css" />
<link rel="shortcut icon" href="https://ceccopierangiolieugenio.github.io/pyTermTk/sandbox/www/favicon.ico"/>
<!--[if lt IE 9]>
<script src="../_static/js/html5shiv.min.js"></script>
<![endif]-->
<script data-url_root="../" id="documentation_options" src="../_static/documentation_options.js"></script>
<script src="../_static/jquery.js"></script>
<script src="../_static/underscore.js"></script>
<script src="../_static/_sphinx_javascript_frameworks_compat.js"></script>
<script src="../_static/doctools.js"></script>
<script src="../_static/js/theme.js"></script>
<link rel="index" title="Index" href="../genindex.html" />
<link rel="search" title="Search" href="../search.html" />
<link rel="next" title="pyTermTk - Signal &amp; Slots" href="003-signalslots.html" />
<link rel="prev" title="pyTermTk - Hello World" href="001-helloworld.html" />
</head>
<body class="wy-body-for-nav">
<div class="wy-grid-for-nav">
<nav data-toggle="wy-nav-shift" class="wy-nav-side">
<div class="wy-side-scroll">
<div class="wy-side-nav-search" >
<a href="../index.html" class="icon icon-home"> pyTermTk
</a>
<div role="search">
<form id="rtd-search-form" class="wy-form" action="../search.html" method="get">
<input type="text" name="q" placeholder="Search docs" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
</div><div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="Navigation menu">
<p class="caption" role="heading"><span class="caption-text">Tutorials</span></p>
<ul class="current">
<li class="toctree-l1"><a class="reference internal" href="000-examples.html">pyTermTk - &lt; <strong>the Examples</strong> &gt;</a></li>
<li class="toctree-l1"><a class="reference internal" href="001-helloworld.html">pyTermTk - Hello World</a></li>
<li class="toctree-l1 current"><a class="current reference internal" href="#">pyTermTk - Layouts</a><ul>
<li class="toctree-l2"><a class="reference internal" href="#intro">Intro</a><ul>
<li class="toctree-l3"><a class="reference internal" href="#id1">TTkLayout</a></li>
<li class="toctree-l3"><a class="reference internal" href="#id2">TTkHBoxLayout</a></li>
<li class="toctree-l3"><a class="reference internal" href="#id3">TTkVBoxLayout</a></li>
<li class="toctree-l3"><a class="reference internal" href="#id4">TTkGridLayout</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="#examples">Examples</a><ul>
<li class="toctree-l3"><a class="reference internal" href="#simple-ttklayout">1 - Simple TTkLayout</a></li>
<li class="toctree-l3"><a class="reference internal" href="#simple-ttkvboxlayout">2 - Simple TTkVBoxLayout</a></li>
<li class="toctree-l3"><a class="reference internal" href="#simple-ttkhboxlayout">3 - Simple TTkHBoxLayout</a></li>
<li class="toctree-l3"><a class="reference internal" href="#simple-ttkgridlayout">4 - Simple TTkGridLayout</a></li>
<li class="toctree-l3"><a class="reference internal" href="#nested-layouts">5 - Nested Layouts</a></li>
<li class="toctree-l3"><a class="reference internal" href="#rowspan-colspan-in-grid-layout">6 - Rowspan/Colspan in Grid Layout</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="003-signalslots.html">pyTermTk - Signal &amp; Slots</a></li>
<li class="toctree-l1"><a class="reference internal" href="004-logging.html">pyTermTk - Logging</a></li>
<li class="toctree-l1"><a class="reference internal" href="005-calculator.html">pyTermTk - Your first Calculator</a></li>
<li class="toctree-l1"><a class="reference internal" href="ttkDesigner/textEdit/README.html">ttkDesigner - Your first TextEditor</a></li>
</ul>
<p class="caption" role="heading"><span class="caption-text">Features</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../info/features/index.html">Features</a></li>
<li class="toctree-l1"><a class="reference internal" href="../info/features/crosscompatible.html">Cross Compatibility</a></li>
<li class="toctree-l1"><a class="reference internal" href="../info/features/widgets.html">Widgets</a></li>
</ul>
<p class="caption" role="heading"><span class="caption-text">Dev</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../info/installing.html">Installation</a></li>
<li class="toctree-l1"><a class="reference internal" href="../info/installing.html#quickstart">Quickstart</a></li>
<li class="toctree-l1"><a class="reference internal" href="../info/debug.html">Debug</a></li>
</ul>
<p class="caption" role="heading"><span class="caption-text">API Reference</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkAbstract.html">TermTk.TTkAbstract</a></li>
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkCore.html">TermTk.TTkCore</a></li>
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkCore.TTkTerm.html">TermTk.TTkCore.TTkTerm</a></li>
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkGui.html">TermTk.TTkGui</a></li>
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkLayouts.html">TermTk.TTkLayouts</a></li>
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkTemplates.html">TermTk.TTkTemplates</a></li>
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkTestWidgets.html">TermTk.TTkTestWidgets</a></li>
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkTheme.html">TermTk.TTkTheme</a></li>
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkTypes.html">TermTk.TTkTypes</a></li>
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkUiTools.html">TermTk.TTkUiTools</a></li>
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkWidgets.html">TermTk.TTkWidgets</a></li>
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkWidgets.TTkModelView.html">TermTk.TTkWidgets.TTkModelView</a></li>
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkWidgets.TTkPickers.html">TermTk.TTkWidgets.TTkPickers</a></li>
<li class="toctree-l1"><a class="reference internal" href="../autogen.TermTk/TermTk.TTkWidgets.TTkTerminal.html">TermTk.TTkWidgets.TTkTerminal</a></li>
</ul>
</div>
</div>
</nav>
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap"><nav class="wy-nav-top" aria-label="Mobile navigation menu" >
<i data-toggle="wy-nav-top" class="fa fa-bars"></i>
<a href="../index.html">pyTermTk</a>
</nav>
<div class="wy-nav-content">
<div class="rst-content">
<div role="navigation" aria-label="Page navigation">
<ul class="wy-breadcrumbs">
<li><a href="../index.html" class="icon icon-home"></a> &raquo;</li>
<li>pyTermTk - Layouts</li>
<li class="wy-breadcrumbs-aside">
<a href="../_sources/tutorial/002-layout.rst.txt" rel="nofollow"> View page source</a>
</li>
</ul>
<hr/>
</div>
<div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
<div itemprop="articleBody">
<section id="pytermtk-layouts">
<h1><a class="reference external" href="https://github.com/ceccopierangiolieugenio/pyTermTk">pyTermTk</a> - Layouts<a class="headerlink" href="#pytermtk-layouts" title="Permalink to this heading"></a></h1>
<section id="intro">
<h2>Intro<a class="headerlink" href="#intro" title="Permalink to this heading"></a></h2>
<p><a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/autogen.TermTk/TermTk.TTkLayouts.html">TTkLayouts</a> are specialised classes that allow the placement of the widgets.</p>
<img alt="https://ceccopierangiolieugenio.github.io/pyTermTk/_images/Layout.HLD.001.svg" src="https://ceccopierangiolieugenio.github.io/pyTermTk/_images/Layout.HLD.001.svg" /><section id="id1">
<h3><a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/autogen.TermTk/TermTk.TTkLayouts.layout.html#ttklayout">TTkLayout</a><a class="headerlink" href="#id1" title="Permalink to this heading"></a></h3>
<div class="line-block">
<div class="line">This is the base class for all the different layouts.</div>
<div class="line">It allows free placement of the widgets in the layout area.</div>
<div class="line">Used mainly to have free range moving <a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/autogen.TermTk/TermTk.TTkWidgets.window.html">windows</a> because the widgets are not automatically replaced after a layout event</div>
</div>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>TTkLayout
╔════════════════════════════╗
║ pos(4,2) ║
║ ┌───────┐ pos(16,4) ║
║ │Widget1│ ┌─────────┐ ║
║ │ │ │ Widget2 │ ║
║ │ │ └─────────┘ ║
║ │ │ ║
║ └───────┘ ║
║ ║
╚════════════════════════════╝
</pre></div>
</div>
</section>
<section id="id2">
<h3><a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/autogen.TermTk/TermTk.TTkLayouts.boxlayout.html#ttkhboxlayout">TTkHBoxLayout</a><a class="headerlink" href="#id2" title="Permalink to this heading"></a></h3>
<p>This layout allow an automatic place all the widgets horizontally</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>TTkHBoxLayout
╔═════════╤═════════╤═════════╗
║ Widget1 │ Widget2 │ Widget3 ║
║ │ │ ║
║ │ │ ║
║ │ │ ║
║ │ │ ║
║ │ │ ║
╚═════════╧═════════╧═════════╝
</pre></div>
</div>
</section>
<section id="id3">
<h3><a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/autogen.TermTk/TermTk.TTkLayouts.boxlayout.html#ttkvboxlayout">TTkVBoxLayout</a><a class="headerlink" href="#id3" title="Permalink to this heading"></a></h3>
<p>This layout allow an automatic place all the widgets vertically</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>TTkVBoxLayout
╔═════════════════════════════╗
║ Widget 1 ║
╟─────────────────────────────╢
║ Widget 2 ║
╟─────────────────────────────╢
║ Widget 3 ║
╟─────────────────────────────╢
║ Widget 4 ║
╚═════════════════════════════╝
</pre></div>
</div>
</section>
<section id="id4">
<h3><a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/autogen.TermTk/TermTk.TTkLayouts.gridlayout.html#ttkgridlayout">TTkGridLayout</a><a class="headerlink" href="#id4" title="Permalink to this heading"></a></h3>
<p>This layout allow an automatic place all the widgets in a grid the empty rows/cols are resized to the “columnMinHeight,columnMinWidth” parameters</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>TTkGridLayout ┌┐ columnMinWidth
╔═════════╤═════════╤╤═════════╗
║ Widget1 │ Widget2 ││ Widget3 ║
║ (0,0) │ (0,1) ││ (0,3) ║
╟─────────┼─────────┼┼─────────╢ ┐ columnMinHeight
╟─────────┼─────────┼┼─────────╢ ┘
║ Widget4 │ ││ ║
║ (2,0) │ ││ ║
╟─────────┼─────────┼┼─────────╢
║ │ ││ Widget5 ║
║ │ ││ (3,3) ║
╚═════════╧═════════╧╧═════════╝
</pre></div>
</div>
</section>
</section>
<section id="examples">
<h2>Examples<a class="headerlink" href="#examples" title="Permalink to this heading"></a></h2>
<section id="simple-ttklayout">
<h3>1 - Simple <a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/autogen.TermTk/TermTk.TTkLayouts.layout.html#ttklayout">TTkLayout</a><a class="headerlink" href="#simple-ttklayout" title="Permalink to this heading"></a></h3>
<p>Following is the code to execute <a class="reference external" href="https://github.com/ceccopierangiolieugenio/pyTermTk/blob/main/tutorial/layout/example1.simple.layout.py">Layout Example</a> in <a class="reference external" href="https://github.com/ceccopierangiolieugenio/pyTermTk">pyTermTk</a> (<a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/sandbox/sandbox.html?filePath=tutorial/layout/example1.simple.layout.py">tryItOnline</a>)</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">TermTk</span> <span class="k">as</span> <span class="nn">ttk</span>
<span class="c1"># TTkLayout is used by default</span>
<span class="n">root</span> <span class="o">=</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTk</span><span class="p">()</span>
<span class="c1"># Attach 4 buttons to the root widget</span>
<span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">parent</span><span class="o">=</span><span class="n">root</span><span class="p">,</span> <span class="n">pos</span><span class="o">=</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">),</span> <span class="n">size</span><span class="o">=</span><span class="p">(</span><span class="mi">15</span><span class="p">,</span><span class="mi">5</span><span class="p">),</span> <span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button1&quot;</span><span class="p">)</span>
<span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">parent</span><span class="o">=</span><span class="n">root</span><span class="p">,</span> <span class="n">pos</span><span class="o">=</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">5</span><span class="p">),</span> <span class="n">size</span><span class="o">=</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span><span class="mi">4</span><span class="p">),</span> <span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button2&quot;</span><span class="p">)</span>
<span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">parent</span><span class="o">=</span><span class="n">root</span><span class="p">,</span> <span class="n">pos</span><span class="o">=</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span><span class="mi">6</span><span class="p">),</span> <span class="n">size</span><span class="o">=</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span><span class="mi">3</span><span class="p">),</span> <span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button3&quot;</span><span class="p">)</span>
<span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">parent</span><span class="o">=</span><span class="n">root</span><span class="p">,</span> <span class="n">pos</span><span class="o">=</span><span class="p">(</span><span class="mi">13</span><span class="p">,</span><span class="mi">1</span><span class="p">),</span> <span class="n">size</span><span class="o">=</span><span class="p">(</span><span class="mi">15</span><span class="p">,</span><span class="mi">3</span><span class="p">),</span> <span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button4&quot;</span><span class="p">)</span>
<span class="n">root</span><span class="o">.</span><span class="n">mainloop</span><span class="p">()</span>
</pre></div>
</div>
<p>The above code produces the following output:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>┌─────────────┐
│ ┌─────────────┐
│ Button1 │ Button4 │
│ ╘═════════════╛
╘═════════════╛
┌────────┐
│Button2 │┌────────┐
│ ││Button3 │
╘════════╛╘════════╛
</pre></div>
</div>
</section>
<section id="simple-ttkvboxlayout">
<h3>2 - Simple <a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/autogen.TermTk/TermTk.TTkLayouts.boxlayout.html#ttkvboxlayout">TTkVBoxLayout</a><a class="headerlink" href="#simple-ttkvboxlayout" title="Permalink to this heading"></a></h3>
<p>Following is the code to execute <a class="reference external" href="https://github.com/ceccopierangiolieugenio/pyTermTk/blob/main/tutorial/layout/example2.simple.vbox.py">VBox Example</a> in <a class="reference external" href="https://github.com/ceccopierangiolieugenio/pyTermTk">pyTermTk</a> (<a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/sandbox/sandbox.html?filePath=tutorial/layout/example2.simple.vbox.py">tryItOnline</a>)</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">TermTk</span> <span class="k">as</span> <span class="nn">ttk</span>
<span class="c1"># Set the VBoxLayout as default in the terminal widget</span>
<span class="n">root</span> <span class="o">=</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTk</span><span class="p">(</span><span class="n">layout</span><span class="o">=</span><span class="n">ttk</span><span class="o">.</span><span class="n">TTkVBoxLayout</span><span class="p">())</span>
<span class="c1"># Attach 4 buttons to the root widget</span>
<span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">parent</span><span class="o">=</span><span class="n">root</span><span class="p">,</span> <span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button1&quot;</span><span class="p">)</span>
<span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">parent</span><span class="o">=</span><span class="n">root</span><span class="p">,</span> <span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button2&quot;</span><span class="p">)</span>
<span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">parent</span><span class="o">=</span><span class="n">root</span><span class="p">,</span> <span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button3&quot;</span><span class="p">)</span>
<span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">parent</span><span class="o">=</span><span class="n">root</span><span class="p">,</span> <span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button4&quot;</span><span class="p">)</span>
<span class="n">root</span><span class="o">.</span><span class="n">mainloop</span><span class="p">()</span>
</pre></div>
</div>
<p>The above code produces the following output:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>┌───────────────────────────────────────────────────────────┐
│ │
│ Button1 │
│ │
╘═══════════════════════════════════════════════════════════╛
┌───────────────────────────────────────────────────────────┐
│ │
│ Button2 │
│ │
╘═══════════════════════════════════════════════════════════╛
┌───────────────────────────────────────────────────────────┐
│ │
│ Button3 │
│ │
╘═══════════════════════════════════════════════════════════╛
┌───────────────────────────────────────────────────────────┐
│ │
│ Button4 │
│ │
╘═══════════════════════════════════════════════════════════╛
</pre></div>
</div>
</section>
<section id="simple-ttkhboxlayout">
<h3>3 - Simple <a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/autogen.TermTk/TermTk.TTkLayouts.boxlayout.html#ttkhboxlayout">TTkHBoxLayout</a><a class="headerlink" href="#simple-ttkhboxlayout" title="Permalink to this heading"></a></h3>
<p>Following is the code to execute <a class="reference external" href="https://github.com/ceccopierangiolieugenio/pyTermTk/blob/main/tutorial/layout/example3.simple.hbox.py">HBox Example</a> in <a class="reference external" href="https://github.com/ceccopierangiolieugenio/pyTermTk">pyTermTk</a> (<a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/sandbox/sandbox.html?filePath=tutorial/layout/example3.simple.hbox.py">tryItOnline</a>)</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">TermTk</span> <span class="k">as</span> <span class="nn">ttk</span>
<span class="c1"># Set the HBoxLayout as default in the terminal widget</span>
<span class="n">root</span> <span class="o">=</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTk</span><span class="p">()</span>
<span class="n">root</span><span class="o">.</span><span class="n">setLayout</span><span class="p">(</span><span class="n">ttk</span><span class="o">.</span><span class="n">TTkHBoxLayout</span><span class="p">())</span>
<span class="c1"># Attach 4 buttons to the root widget</span>
<span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">parent</span><span class="o">=</span><span class="n">root</span><span class="p">,</span> <span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button1&quot;</span><span class="p">)</span>
<span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">parent</span><span class="o">=</span><span class="n">root</span><span class="p">,</span> <span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button2&quot;</span><span class="p">)</span>
<span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">parent</span><span class="o">=</span><span class="n">root</span><span class="p">,</span> <span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button3&quot;</span><span class="p">)</span>
<span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">parent</span><span class="o">=</span><span class="n">root</span><span class="p">,</span> <span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button4&quot;</span><span class="p">)</span>
<span class="n">root</span><span class="o">.</span><span class="n">mainloop</span><span class="p">()</span>
</pre></div>
</div>
<p>The above code produces the following output</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>┌─────────────┐┌─────────────┐┌─────────────┐┌──────────────┐
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ Button1 ││ Button2 ││ Button3 ││ Button4 │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
│ ││ ││ ││ │
╘═════════════╛╘═════════════╛╘═════════════╛╘══════════════╛
</pre></div>
</div>
</section>
<section id="simple-ttkgridlayout">
<h3>4 - Simple <a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/autogen.TermTk/TermTk.TTkLayouts.gridlayout.html#ttkgridlayout">TTkGridLayout</a><a class="headerlink" href="#simple-ttkgridlayout" title="Permalink to this heading"></a></h3>
<p>Following is the code to execute <a class="reference external" href="https://github.com/ceccopierangiolieugenio/pyTermTk/blob/main/tutorial/layout/example4.simple.grid.py">Grid Example</a> in <a class="reference external" href="https://github.com/ceccopierangiolieugenio/pyTermTk">pyTermTk</a> (<a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/sandbox/sandbox.html?filePath=tutorial/layout/example4.simple.grid.py">tryItOnline</a>)</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">TermTk</span> <span class="k">as</span> <span class="nn">ttk</span>
<span class="c1"># Set the GridLayout as default in the terminal widget</span>
<span class="n">gridLayout</span> <span class="o">=</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTkGridLayout</span><span class="p">(</span><span class="n">columnMinHeight</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span><span class="n">columnMinWidth</span><span class="o">=</span><span class="mi">2</span><span class="p">)</span>
<span class="n">root</span> <span class="o">=</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTk</span><span class="p">(</span><span class="n">layout</span><span class="o">=</span><span class="n">gridLayout</span><span class="p">)</span>
<span class="c1"># Attach 2 buttons to the root widget using the default method</span>
<span class="c1"># this will append them to the first row</span>
<span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">parent</span><span class="o">=</span><span class="n">root</span><span class="p">,</span> <span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button1&quot;</span><span class="p">)</span>
<span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">parent</span><span class="o">=</span><span class="n">root</span><span class="p">,</span> <span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button2&quot;</span><span class="p">)</span>
<span class="c1"># Attach 2 buttons to a specific position in the grid</span>
<span class="n">gridLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">parent</span><span class="o">=</span><span class="n">root</span><span class="p">,</span> <span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button3&quot;</span><span class="p">),</span> <span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">)</span>
<span class="n">gridLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">parent</span><span class="o">=</span><span class="n">root</span><span class="p">,</span> <span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button4&quot;</span><span class="p">),</span> <span class="mi">3</span><span class="p">,</span><span class="mi">4</span><span class="p">)</span>
<span class="n">root</span><span class="o">.</span><span class="n">mainloop</span><span class="p">()</span>
</pre></div>
</div>
<p>The above code produces the following output</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>┌───────────┐┌───────────┐
│ ││ │
│ Button1 ││ Button2 │
│ ││ │
╘═══════════╛╘═══════════╛
┌───────────┐
│ │
│ Button3 │
│ │
╘═══════════╛
┌───────────┐
│ │
│ Button4 │
│ │
╘═══════════╛
</pre></div>
</div>
</section>
<section id="nested-layouts">
<h3>5 - Nested Layouts<a class="headerlink" href="#nested-layouts" title="Permalink to this heading"></a></h3>
<p>Following is the code to execute <a class="reference external" href="https://github.com/ceccopierangiolieugenio/pyTermTk/blob/main/tutorial/layout/example5.nested.layouts.py">Nested Layouts Example</a> in <a class="reference external" href="https://github.com/ceccopierangiolieugenio/pyTermTk">pyTermTk</a> (<a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/sandbox/sandbox.html?filePath=tutorial/layout/example5.nested.layouts.py">tryItOnline</a>)</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">TermTk</span> <span class="k">as</span> <span class="nn">ttk</span>
<span class="c1"># Set the GridLayout as default in the terminal widget</span>
<span class="n">root</span> <span class="o">=</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTk</span><span class="p">()</span>
<span class="n">gridLayout</span> <span class="o">=</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTkGridLayout</span><span class="p">()</span>
<span class="n">root</span><span class="o">.</span><span class="n">setLayout</span><span class="p">(</span><span class="n">gridLayout</span><span class="p">)</span>
<span class="c1"># Attach 2 buttons to the root widget using the default method</span>
<span class="c1"># this will append them to the first row</span>
<span class="c1"># NOTE: it is not recommended to use this legacy method in a gridLayout</span>
<span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">parent</span><span class="o">=</span><span class="n">root</span><span class="p">,</span> <span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button1&quot;</span><span class="p">)</span>
<span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">parent</span><span class="o">=</span><span class="n">root</span><span class="p">,</span> <span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button2&quot;</span><span class="p">)</span>
<span class="c1"># Attach 2 buttons to a specific position in the grid</span>
<span class="n">gridLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button3&quot;</span><span class="p">),</span> <span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">)</span>
<span class="n">gridLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button4&quot;</span><span class="p">),</span> <span class="mi">2</span><span class="p">,</span><span class="mi">4</span><span class="p">)</span>
<span class="c1"># Create a VBoxLayout and add it to the gridLayout</span>
<span class="n">vboxLayout</span> <span class="o">=</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTkVBoxLayout</span><span class="p">()</span>
<span class="n">gridLayout</span><span class="o">.</span><span class="n">addItem</span><span class="p">(</span><span class="n">vboxLayout</span><span class="p">,</span><span class="mi">1</span><span class="p">,</span><span class="mi">3</span><span class="p">)</span>
<span class="c1"># Attach 2 buttons to the vBoxLayout</span>
<span class="n">vboxLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button5&quot;</span><span class="p">))</span>
<span class="n">vboxLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button6&quot;</span><span class="p">))</span>
<span class="n">root</span><span class="o">.</span><span class="n">mainloop</span><span class="p">()</span>
</pre></div>
</div>
<p>The above code produces the following output</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>┌─────────┐┌─────────┐
│ ││ │
│ Button1 ││ Button2 │
│ ││ │
╘═════════╛╘═════════╛
┌─────────┐┌─────────┐
│ ││ Button5 │
│ Button3 │╘═════════╛
│ │┌─────────┐
│ ││ Button6 │
╘═════════╛╘═════════╛
┌─────────┐
│ │
│ Button4 │
│ │
╘═════════╛
</pre></div>
</div>
</section>
<section id="rowspan-colspan-in-grid-layout">
<h3>6 - Rowspan/Colspan in Grid Layout<a class="headerlink" href="#rowspan-colspan-in-grid-layout" title="Permalink to this heading"></a></h3>
<p>Following is the code to execute <a class="reference external" href="https://github.com/ceccopierangiolieugenio/pyTermTk/blob/main/tutorial/layout/example6.grid.span.py">row/colspan Example</a> in <a class="reference external" href="https://github.com/ceccopierangiolieugenio/pyTermTk">pyTermTk</a> (<a class="reference external" href="https://ceccopierangiolieugenio.github.io/pyTermTk/sandbox/sandbox.html?filePath=tutorial/layout/example6.grid.span.py">tryItOnline</a>)</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">TermTk</span> <span class="k">as</span> <span class="nn">ttk</span>
<span class="n">root</span> <span class="o">=</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTk</span><span class="p">()</span>
<span class="n">gridLayout</span> <span class="o">=</span> <span class="n">ttk</span><span class="o">.</span><span class="n">TTkGridLayout</span><span class="p">()</span>
<span class="n">root</span><span class="o">.</span><span class="n">setLayout</span><span class="p">(</span><span class="n">gridLayout</span><span class="p">)</span>
<span class="c1"># | x = 0 | x = 1 | x = 2 |</span>
<span class="c1"># | | | |</span>
<span class="c1"># ┌────────────────┐┌─────────┐ ──────</span>
<span class="c1"># │y=0 x=0 h=1 w=2 ││y=0 x=2 │ y = 0</span>
<span class="c1"># │ Button1 ││h=2 w=1 │</span>
<span class="c1"># ╘════════════════╛│ │ ──────</span>
<span class="c1"># ┌─────────┐ │ Button2 │ y = 1</span>
<span class="c1"># │y=1 x=0 │ ╘═════════╛</span>
<span class="c1"># │h=2 w=1 │┌────────────────┐ ──────</span>
<span class="c1"># │ ││y=2 x=1 h=1 w=2 | y = 2</span>
<span class="c1"># │ Button3 ││ Button4 │</span>
<span class="c1"># ╘═════════╛╘════════════════╛ ──────</span>
<span class="n">gridLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button1&quot;</span><span class="p">),</span> <span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">)</span>
<span class="n">gridLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button2&quot;</span><span class="p">),</span> <span class="mi">0</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span><span class="mi">1</span><span class="p">)</span>
<span class="n">gridLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button3&quot;</span><span class="p">),</span> <span class="mi">1</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span><span class="mi">1</span><span class="p">)</span>
<span class="c1"># It is possible to expand the names</span>
<span class="n">gridLayout</span><span class="o">.</span><span class="n">addWidget</span><span class="p">(</span><span class="n">ttk</span><span class="o">.</span><span class="n">TTkButton</span><span class="p">(</span><span class="n">border</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">text</span><span class="o">=</span><span class="s2">&quot;Button4&quot;</span><span class="p">),</span> <span class="n">row</span><span class="o">=</span><span class="mi">2</span><span class="p">,</span> <span class="n">col</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span> <span class="n">rowspan</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span> <span class="n">colspan</span><span class="o">=</span><span class="mi">2</span><span class="p">)</span>
<span class="n">root</span><span class="o">.</span><span class="n">mainloop</span><span class="p">()</span>
</pre></div>
</div>
<p>The above code produces the following output</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>┌───────────────────────┐┌───────────┐
│ ││ │
│ Button1 ││ │
│ ││ │
╘═══════════════════════╛│ Button2 │
┌───────────┐ │ │
│ │ │ │
│ │ │ │
│ │ ╘═══════════╛
│ Button3 │┌───────────────────────┐
│ ││ │
│ ││ Button4 │
│ ││ │
╘═══════════╛╘═══════════════════════╛
</pre></div>
</div>
</section>
</section>
</section>
</div>
</div>
<footer><div class="rst-footer-buttons" role="navigation" aria-label="Footer">
<a href="001-helloworld.html" class="btn btn-neutral float-left" title="pyTermTk - Hello World" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
<a href="003-signalslots.html" class="btn btn-neutral float-right" title="pyTermTk - Signal &amp; Slots" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a>
</div>
<hr/>
<div role="contentinfo">
<p>&#169; Copyright 2021, Eugenio Parodi.</p>
</div>
Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a
<a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a>
provided by <a href="https://readthedocs.org">Read the Docs</a>.
</footer>
</div>
</div>
</section>
</div>
<script>
jQuery(function () {
SphinxRtdTheme.Navigation.enable(true);
});
</script>
</body>
</html>