Before proceeding, be sure you have a basic understanding of how Tkinter applications are built. Strongly recommended is the author's Tkinter 8.5 reference: a GUI for Python.
This program has a lot of widgets. To keep the design conceptually simple, the architecture of the program uses boxes within boxes within boxes, grouping related widgets into frames, and related frames into larger frames, so that each grouping has a well-defined function, and connections within a grouping of widgets are hidden within a single Python class.
One way to describe this technique is that we build
compound widgets out of Tkinter's
basic widgets. A compound widget is a Python class that
inherits from the
This application uses the
manager to position widgets. At the very highest level,
the application is organized into two rows and three
columns like this:
The three columns of row 0 are spanned to make one wide,
short grid cell that contains the general controls. The name
.menuBar has a dot in front of it because it
is an attribute of the
Frame that contains all the
application's widgets. The compound widget that appears in
this grid cell is an instance of class
MenuBar; see Section 12, “
class MenuBar: General controls”.
Similarly, three compound widgets fill out row 1. Column 0
NamePicker compound widget, which
is stored in attribute
.namePicker of the
Application class. Column 1 is an
Adjuster widget, and column 2 is a
Below this level, design of each of the four major areas proceeds by stepwise refinement. Here is a diagram showing the layout of all the compound widgets in this program.
Section 11, “
class Application: The outermost frame” is the entire
Section 12, “
class MenuBar: General controls” contains the controls along
the top edge.
Section 13, “
class NamePicker: Select colors by name” contains all controls for
selecting colors by name.
Section 14, “
class PickList: The color names pick
list” is the list of standard
Section 15, “
class Adjuster: Color adjustment and
color model selection” contains controls for
selecting text or background color, selecting the color model,
and adjusting colors.
Section 16, “
class ColorReadout: Text and background color
readouts” shows the current text
and background color names and allows the user to select which
color is being adjusted.
Section 17, “
class ModelSelector: Widgets to select a color
model” allows the user to
select a color model.
Section 18, “
class ColorSliders: Color model parameter
sliders” is a set of
Scale widgets for making fine color adjustments.
Section 19, “
class ParamSlider: Scale widget for a color
model parameter” is one of those
Section 20, “
class Swatch: Font and color samples” displays the current font in
the current text color against the current background color,
and includes widgets for selecting the font.