How can I create this layout with Python3 using Tkinter with the grid geometry manager?

Question

I am trying to create the following layout:

This is my code:

from . import FlowPane,JsonPane,PropertiesPane,ToolbarPane
import tkinter as tk

class ConflixEditor(tk.Tk):
    def __init__(self, args):
        super().__init__()
        self.__dict__.update({k: v for k, v in locals().items() if k != 'self'})
        self.minsize(width=1024, height=768)
        self.title('Conflix Editor')
        # Widget Creation
        self.frame = tk.Frame(self)
        self.toolbarPane = ToolbarPane.ToolbarPane(self.frame, bg='black')
        self.flowPane = FlowPane.FlowPane(self.frame, bg='red')
        self.propertiesPane = PropertiesPane.PropertiesPane(self.frame, bg='blue')
        self.jsonPane = JsonPane.JsonPane(self.frame, bg='green')
        # Widget Layout
        self.grid_columnconfigure(0, weight=1)
        self.grid_rowconfigure(2, weight=1)
        self.frame.grid(row=0, column=0, sticky=tk.N+tk.E+tk.S+tk.W)
        self.toolbarPane.grid(row=0, column=0, columnspan=3, rowspan=2, sticky=tk.N+tk.E+tk.W)
        self.flowPane.grid(row=2, column=0, columnspan=2, rowspan=5, sticky=tk.N+tk.S+tk.W)
        self.propertiesPane.grid(row=2, column=2, columnspan=1, rowspan=5, sticky=tk.N+tk.E+tk.S)
        self.jsonPane.grid(row=7, column=0, columnspan=3, rowspan=3, sticky=tk.E+tk.S+tk.W)

The constructors for FlowPane, JsonPane, PropertiesPane, ToolbarPane all take two parameters: the parent widget and the background color.

Instead of getting the desired result above, I am getting the following result:

What am I doing wrong? How can I create the desired layout? Note that the background colors are just temporary to confirm that each widget is using the correct amount of space. This is eventually going to be an application for designing and building Netflix Conductor workflows. I want to have a toolbar with menus and buttons in the black area, a Canvas in the red area for displaying the flow-chart elements that represent tasks in the workflows, a Treeview for viewing properties in the blue area, and a Text Editor in the green area at the bottom for viewing/editing the raw JSON.

Answer 1

You need to:

• specify height option for toolbarPane and jsonPane;
• specify width option for propertiesPane;
• add tk.E to sticky option for flowPane;
• use grid_rowconfigure() and grid_columnconfigure() for self and self.frame as well

Below is an updated code:

class ConflixEditor(tk.Tk):
    def __init__(self, *args):
        super().__init__()
        #self.__dict__.update({k: v for k, v in locals().items() if k != 'self'})
        self.minsize(width=1024, height=768)
        self.title('Conflix Editor')
        # make self.frame use all the space of root window
        self.grid_columnconfigure(0, weight=1)
        self.grid_rowconfigure(0, weight=1)
        # Widget Creation
        self.frame = tk.Frame(self)
        self.toolbarPane = ToolbarPane.ToolbarPane(self.frame, bg='black', height=100) # added height option
        self.flowPane = FlowPane.FlowPane(self.frame, bg='red')
        self.propertiesPane = PropertiesPane.PropertiesPane(self.frame, bg='blue', width=250) # added width option
        self.jsonPane = JsonPane.JsonPane(self.frame, bg='green', height=200) # added height option
        # Widget Layout
        self.frame.grid_columnconfigure(0, weight=1) # used self.frame instead of self
        self.frame.grid_rowconfigure(2, weight=1) # used self.frame instead of self
        self.frame.grid(row=0, column=0, sticky=tk.N+tk.E+tk.S+tk.W)
        self.toolbarPane.grid(row=0, column=0, columnspan=3, rowspan=2, sticky=tk.N+tk.E+tk.W)
        self.flowPane.grid(row=2, column=0, columnspan=2, rowspan=5, sticky=tk.N+tk.E+tk.S+tk.W) # added tk.E
        self.propertiesPane.grid(row=2, column=2, columnspan=1, rowspan=5, sticky=tk.N+tk.E+tk.S)
        self.jsonPane.grid(row=7, column=0, columnspan=3, rowspan=3, sticky=tk.E+tk.S+tk.W)