Benutzer-Werkzeuge

Webseiten-Werkzeuge


en:tkk

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
en:tkk [2022/03/04 12:17] – [Scale] roehneren:tkk [2022/08/23 19:02] (aktuell) – [Treeview] roehner
Zeile 1: Zeile 1:
 ===== TKK ===== ===== TKK =====
 +TTK widgets look more like operating system widgets and better than Tkinter widgets. On the other hand, the Tkinter widgets are easier to configure. The Combobox, Notebook, Treeview, Progressbar, Separator and Sizegrip widgets are only available as TTK widgets.
 +
 A GUI form is built with the help of widgets. These are the graphical components available in the Tkinter or TTK toolbar. In the following, basic information about the use of widgets is given, which is sufficient in many cases. More detailed information can be found in the [[https://anzeljg.github.io/rin2/book2/2405/docs/tkinter/index.html| Tkinter Reference]]. A GUI form is built with the help of widgets. These are the graphical components available in the Tkinter or TTK toolbar. In the following, basic information about the use of widgets is given, which is sufficient in many cases. More detailed information can be found in the [[https://anzeljg.github.io/rin2/book2/2405/docs/tkinter/index.html| Tkinter Reference]].
  
-A GUI program can be created with the {{:tkinter.png}} icon for new Tk/TTK application on the Program tab. Widgets can be placed by dragging and dropping or by clicking on a widget and then clicking in the GUI form. Only absolute layout is supported. This is perfectly sufficient for most purposes. Designing a GUI interface with layout managers is much more difficult. +A GUI program can be created with the {{:tkapp.png}} icon for new Tk/TTK application on the Program tab. Widgets can be placed by dragging and dropping or by clicking on a widget and then clicking in the GUI form. Only absolute layout is supported. This is perfectly sufficient for most purposes. Designing a GUI interface with layout managers is much more difficult. 
  
 Attributes and events of a widget are configured in the Object Inspector. Initially, only the most important attributes and events are displayed. This filtering simplifies the work with the Object Inspector. You can display more or all attributes and methods in two further stages. Attributes and events of a widget are configured in the Object Inspector. Initially, only the most important attributes and events are displayed. This filtering simplifies the work with the Object Inspector. You can display more or all attributes and methods in two further stages.
Zeile 148: Zeile 150:
 ==== Frame ==== ==== Frame ====
 {{:frame.png}} {{:frame.png}}
-A Frame is a container for other widgets. For example, the RadiobuttonGroup is a Frame that contains radio buttons. Frames are a good way to structure graphical interfaces. +A Frame is a container for other widgets. For example, the RadiobuttonGroup is a Frame that contains radio buttons. Frames are a good way to structure graphical interfaces. To place a widget in a Frame, click on it in the TTK toolbar and then click in the Frame.
  
-To place a widget in a Frameclick on it in the TTK toolbar and then click in the Frame.+Frames are used, for example, in the Notebook widget.
 ---- ----
 ==== LabelFrame ==== ==== LabelFrame ====
Zeile 171: Zeile 173:
  
 {{:labeledscaleexample.png}} {{:labeledscaleexample.png}}
 +----
 +==== PanedWindow ====
 +{{:ttkpanedwindow.png}}
 +A PanedWindow is a container for child widgets. Each PanedWindow contains a horizontal or vertical stack of child widgets. Using the mouse, the user can drag the boundaries between the child widgets back and forth. In the example, there is a canvas at the top and a text widget at the bottom.
 +
 +{{:ttkpanedwindowexample.png}}
 +
 +To insert a widget into a PanedWindow, first click the widget in the TTK toolbar and then click in the PanedWindow.
 +----
 +==== Menu ====
 +{{:menu.png}}
 +A Menu widget is a menu bar with collapsible submenus.
 +
 +{{:menuexample.png}}
 +
 +The Menu is defined via the //MenuItems// attribute, in which the menu structure is generated by appropriate indentation. With a newly created menu, the structure looks like this:
 +<code>
 +File
 +  New
 +    Python
 +    XML
 +  Load
 +  Save
 +Edit
 +  Copy
 +  Paste
 +  -
 +  Delete
 +</code>
 +
 +Event methods are created for the menu items, which are called when the menu item is selected.
 +
 +<code python>
 +    def menu1FileNewPython_Command(self):
 +        # ToDo insert source code here
 +        pass
 +</code>
 +----
 +==== PopupMenu ====
 +{{:popupmenu.png}}
 +A PopupMenu is a context menu that is invoked with the right mouse button. As with the Menu widget, it is defined via the //MenuItems// attribute.
 +
 +You can assign a PopupMenu to each widget. To do this, open the //Events// tab in the object inspector and select Button "Right" for the ButtonPress event.
 +
 +{{:en:popupmenuexample.png}}
 +
 +In the event method that is created, you program the display of the PopupMenu at the clicked position.
 +
 +<code python>
 +    def root_ButtonPress(self, event):
 +        self.popupMenu1.post(event.x_root, event.y_root)
 +        pass
 +</code>
 +----
 +==== Menubutton ====
 +{{:menubutton.png}} A Menubutton is a button that displays a PopupMenu when clicked.
 +The PopupMenu must also be created and then entered in the //Menu// attribute of the Menubutton.
 +----
 +==== OptionMenu ====
 +{{:optionmenu.png}} With an OptionMenu you can select an item from a given string list in the manner of a menu. The string list is specified in the //MenuItems// attribute.
 +
 +The selected option is accessed via the CV control variable.
 +
 +<code python>
 +    print(self.optionMenu1CV.get())
 +</code>
 +----
 +==== Notebook====
 +{{:notebook.png}} A Notebook widget provides tabs at the top that can be used to open frames at the bottom.
 +
 +{{:notebookexample.png}}
 +----
 +==== Treeview====
 +{{:treewidget.png}} A Treeview represents a hierarchical structure in a tree-like manner.
 +
 +By appropriate indentation, the structure is specified via the //Items// attribute. This structure is predefined at the beginning:
 +
 +<code>
 +First
 +  node A
 +  node B
 +Second
 +  node C
 +    node D
 + </code>
 +----
 +==== Progressbar ====
 +{{:progressbar.png}} A Progressbar represents a progress bar.
 +----
 +==== Separator ====
 +{{:separator.png}} A Separator is a horizontal or vertical path that can be used to structure the GUI interface.
 +----
 +==== Sizegrip ====
 +{{:sizegrip.png}} A Sizegrip widget is placed in the bottom right corner to resize the entire application window.
 ---- ----
en/tkk.1646392637.txt.gz · Zuletzt geändert: 2022/03/04 12:17 von roehner