Tkinter Frames, TTK module and Handling user input .pptx

Tkinter Frames, TTK module and Handling user input

1. OUTLINE Frames Paned windows Themed Tkinter Differences between Tkinter and ttk widgets Using ttk Styles Validating input from entry fields Handling form submission Page 1 of 24 Date: 19 th Nov 2024

2. Benefits of Using Frames Modularity : Frames allow you to organize widgets into sections, which is helpful when managing large sets of widgets. Readability and Clarity : Grouping related widgets within a frame improves the readability and clarity of the interface for users. Ease of Layout Control : Frames can be arranged in various layouts (e.g., grid, pack, place) for flexible positioning of elements. What’s Frame? A frame is a rectangular container widget that can hold other widgets. It essentially acts as a sub-window within the main window of the application. Frames are used to group and organize widgets logically, making it easier to build complex interfaces. Frames can also have different properties such as borders, colors, and padding, allowing for a clearer separation between different sections. Page 2 of 24 Date: 19 th Nov 2024

3. Common Frame Properties and Options Width and Height : Set the size of the frame. Border width : Control the border size. Background Color : Customize the background color for visual organization. Padding : Add space around the contents of the frame. Layout : Frame use different layout managers within the frame to organize widgets (like: Grid, Pack and Place). Use Cases for Frames Toolbars or Menus : Frames are often used to organize toolbars or navigation menus at the top or side of an application. Side Panels : Frames are used to create side panels or other navigation areas in applications that have different sections. Content Separation : Frames can separate the main content area from additional features or sidebars for improved user focus and organization. Page 3 of 24 Date: 19 th Nov 2024

4. Simple Example import tkinter as tk window=tk.Tk() frame1=tk.Frame(window, width=100, height=200, borderwidth=100,bg=' lightblue ’) frame1.pack(padx=50, pady=20) frame2=tk.Frame(window, width=100, height=200,borderwidth=100, bg=' lightgreen ’) frame2.pack(padx=100, pady=40) button1=tk.Button(frame1, bg='green', height=2, width=10) button1.pack() button2=tk.Button(frame2, bg='blue', height=2, width=10) button2.pack() window.mainloop() Page 4 of 24 Date: 19 th Nov 2024

5. What’s a Paned Window? A paned window is a container widget that holds one or more panes separated by movable dividers. Each pane can contain additional widgets, including frames, other paned windows, or standalone widgets (e.g., labels, text boxes). Paned windows allow users to adjust the size of each pane by dragging the divider, providing flexibility to customize the view based on preference or content requirements. Common Use Cases for Paned Windows File Browsers : A common example is a file explorer, where one pane shows the folder structure and another shows the contents of the selected folder. Text Editors or IDEs : Paned windows can separate the code editor, terminal, and file navigator, allowing users to resize each pane for better viewing. Data Dashboards : Paned windows are often used in dashboards to display charts, statistics, and controls in resizable panes. Page 5 of 24 Date: 19 th Nov 2024

6. Creating a Basic Paned Window First, import the tkinter modules. Initialize a main window and create a tk.PanedWindow with a specified orientation (either horizontal or vertical). Add widgets to the paned window using the .add() method. Finally, pack the paned window into the main window. Paned Window Properties Orientation (orient): Specifies the orientation of the panes (horizontal or vertical). Weight : Controls how much each pane resizes relative to others. Higher weights lead to greater expansion. Page 6 of 24 Date: 19 th Nov 2024

7. Simple Example import tkinter as tk window=tk.Tk() pw=tk.PanedWindow(window, orient='horizontal’, borderwidth=1) pw.pack(fill="both", expand=1) frame1=tk.Frame(pw, height=50, width=50, bg='green’) pw.add(frame1) frame2=tk.Frame(window, height=50, width=50, bg='blue’) pw.add(frame2) window.mainloop() Page 7 of 24 Date: 19 th Nov 2024

8. Themes in ttk The ttk module includes built-in themes, such as default, clam, alt, classic, and more. Themes change the appearance of all themed widgets at once, creating a cohesive look across the application. Use the ttk. Style() class to set and retrieve the current theme. What are Themed Tkinter? Themed Tkinter in Tkinter are designed to provide a more contemporary and consistent appearance that aligns with native applications on the user’s operating system. Ttk widgets use platform-specific styling. Themed widgets also offer additional functionality, such as better customization options, enhanced performance, and support for advanced styling techniques. Page 8 of 24 Date: 19 th Nov 2024

9. Common ttk Widgets Button (ttk. Button): A themed button with a more modern look and feel. Label (ttk. Label) : A label that can display text or images with enhanced styling options. Entry (ttk. Entry): A single-line text entry widget, styled to match the theme. Combobox (ttk. Combobox): A dropdown list allowing the user to select from a predefined set of options. Treeview (ttk. Treeview) : A widget to display hierarchical data, commonly used for file explorers or tables. Progress bar (ttk. Progress bar): A bar that visually represents progress toward completion. Frame (ttk. Frame): A container widget for organizing other widgets, with improved styling options. Customizing ttk Widgets with Styles The ttk. Style class allows for extensive customization of ttk widgets. You can define custom styles for specific widgets or apply styles globally. Customize colors, fonts, padding, borders, and more using the configure and map methods of ttk. Style. Page 9 of 24 Date: 19 th Nov 2024

10. Key Differences between Tkinter and ttk Widgets Appearance and Styling Tkinter Widgets: Use a basic, traditional look that can seem outdated. Styling options are somewhat limited, as customizing widget appearance requires changing individual properties like background color, text color, and font. Ttk Widgets : Have a modern, platform-native look. They automatically adapt to the OS theme and are styled through a flexible theming system, making it easy to apply consistent styles across widgets. Ttk widgets also support advanced styling with the ttk. Style class. Theme Support Tkinter Widgets : Do not have built-in theme support, meaning their appearance remains consistent across all platforms regardless of the system theme. Ttk Widgets : Offer multiple built-in themes (such as “clam”, “alt”, “default”, and “classic”) that provide different looks for the entire application. The theme can be changed with a single command, instantly updating the appearance of all ttk widgets. Customization Tkinter Widgets: Customizing the appearance of each widget requires setting individual properties, which can be cumbersome. Customization is also somewhat limited, especially when compared to ttk. Page 10 of 24 Date: 19 th Nov 2024

11. Key Differences between Tkinter and ttk Widgets Ttk Widgets: Support advanced customization through the ttk. Style class. With Style, you can define global styles that apply to multiple widgets, modify widgets based on their state (e.g., hovered or pressed), and use themes that make styling consistent and efficient. Supported Widgets Tkinter Widgets : Provides a broad range of widgets including some that ttk doesn’t support, such as Text, Canvas, and Menu. Ttk Widgets : Offers enhanced versions of core widgets like Button, Label, Entry, and Combobox, but does not include replacements for certain Tkinter widgets (e.g., there’s no ttk. Text or ttk. Canvas). Page 11 of 24 Date: 19 th Nov 2024

12. When to Use Tkinter vs. Ttk Widgets Use Tkinter widgets when : You need widget types that ttk doesn’t offer (such as Text, Canvas, or Menu). The application does not need a modern or themed appearance. Use ttk widgets when: You want a professional, native look that matches the OS theme. You need advanced styling options and plan to apply themes across the application. Page 12 of 24 Date: 19 th Nov 2024

13. Using ttk. Style The ttk. Style class is the main tool for controlling the look and feel of ttk widgets. Define custom styles for individual widget types (such as buttons, labels, or frames). Apply platform-specific themes (e.g., “clam”, “default”, “alt”) to give the entire application a cohesive look. Map different styles to widget states, allowing dynamic changes in appearance (e.g., color changes on hover or click). Creating a ttk. Style Object To use ttk styles, you first create an instance of the Style class. Example: From tkinter import ttk Style = ttk. Style() Page 13 of 24 Date: 19 th Nov 2024

14. Setting and Changing Themes Themes control the overall look of ttk widgets and come built-in with several options. Common themes include: “clam” “alt” “default” “classic” To change the theme, use style.theme_use(“theme_name”) Defining Custom Styles for Widgets Each ttk widget can have a custom style applied to it. Styles are typically named following the format StyleName. For example, a custom style for a button might be named “TButton”. Use style.configure(“TButton”, option=value) to set options for a style. Page 14 of 24 Date: 19 th Nov 2024

15. Available Widget-Specific Options for ttk Styles Button (TButton): foreground, background, font, padding, border width. Label (TLabel): foreground, background, font, padding, border width, anchor (alignment of text or image). Entry (TEntry): foreground, background, font, padding, border width. Combobox (TCombobox): foreground, background, font, padding, with additional options like post background (for dropdown). Page 15 of 24 Date: 19 th Nov 2024

16. Understanding Validation Options in Tkinter Tkinter’s Entry widget has two key options for validation: Validate : Specifies when validation should occur. It takes values like “focusin”,“focusout”, “key”, “all”, “none”, and “focus”, depending on when you want validation to run. Validatecommand : Links the Entry widget to a function (or callback) that performs the validation. This function is called every time the specified validate event occurs. Common validate modes: “ focusin ”: Validation happens when the Entry field gains focus. “ focusout ”: Validation happens when the Entry field loses focus. “ key ”: Validation happens whenever a key is pressed (useful for real-time validation). “ all ”: Validation occurs on all events. “ none ”: No validation occurs. Validating input from entry fields Validating input from Entry fields in Tkinter is essential when you want to ensure that the data entered by a user is in a specific format (e.g., numbers only, email addresses, or specific text patterns). Tkinter provides several ways to validate user input, allowing you to control what can and cannot be entered in real-time. These methods include using the validate and validate command options in Entry widgets, as well as binding events to Entry fields for custom validation. Page 16 of 24 Date: 19 th Nov 2024

17. Setting Up Validation with validate and validatecommand To set up validation, create a function to handle the validation logic and use validatecommand to connect it to the Entry widget. You can pass additional arguments to the validation function using the % substitution codes (like %P, %S, etc.) in Tkinter, which give access to real-time input values. Using % Substitutions for Validation Commands Tkinter provides several % substitution codes that pass dynamic values to the validation function: %P: The value that the entry will contain if the edit is allowed. %S: The current value of the entry widget. %D: The type of action (1 for insert, 0 for delete,-1 for other). %S: The text string being inserted or deleted. %I: The index of the text being inserted or deleted. Page 17 of 24 Date: 19 th Nov 2024

18. Page 18 of 24 Date: 19 th Nov 2024

19. Handling form submission Handling form submission in Tkinter involves collecting data from various input fields, validating it, and then processing it (e.g., saving to a database, performing calculations, or displaying it on the interface). Tkinter provides tools for managing this process, from organizing widgets to implementing validation and triggering actions upon form submission. Setting Up a Basic Form in Tkinter Forms in Tkinter are typically built using Entry widgets for text input, Check button for check boxes, Radio button for options, Combobox for dropdowns, and Button widgets for submission. Each widget is assigned to collect a specific piece of information, with a button at the end to trigger the submission process. Collecting Input Data on Form Submission When the user presses the submit button, the values from the form fields need to be collected. To accomplish this, define a function that retrieves the data from each widget, and assign this function to the button’s command parameter. Page 19 of 24 Date: 19 th Nov 2024

20. Validating Form Data Before Submission Validation ensures that users provide expected data before submission. Common checks include ensuring that required fields are not empty, numeric fields contain numbers, and data follows specific patterns. Validation can be done either before form submission or in real-time as users type (using validatecommand with Entry fields). Showing Feedback for Successful Submission After successfully collecting and validating data, you may want to give the user feedback, such as a success message, or performing some action with the data (e.g., saving it). Feedback can be displayed in a label or pop-up message. Page 20 of 24 Date: 19 th Nov 2024

21. Page 21 of 24

22. REFERENCES John E. Grayson. Python and Tkinter Programming. Manning Publications co, 2015. John Elder. Tkinter Widget Quick Reference Guide. Codemy.com, 2022. www.poe.com . Page 22 of 24 Date: 19 th Nov 2024

23. THANKS DOES ANYONE HAVE ANY QUESTIONS? Page 23 of 24 Date: 19 th Nov 2024