使用tkinter制作tkinterUI編輯器

前言

這篇文章繼續記錄編輯屬性的控制元件，我希望編輯顏色的時候可以直接彈出系統自帶的顏色選擇界面，編輯image屬性時可以彈出選擇檔案的界面，所以先添加一個編輯顏色以及image的控制元件，之后添加一個根據屬性型別進行編輯屬性的控制元件，

一、編輯顏色以及image的控制元件

先上代碼，EditorPropertyList.py

#!/usr/bin/python
# -*- coding: utf-8 -*-

import sys

from enum import IntEnum
import tkinter.font as tkFont
from tkinter import Entry, END, Label, Button
from tkinter.ttk import Combobox
from tkinter import colorchooser
from tkinter.filedialog import askopenfilename

from ScrollRows import ScrollRows
from ScrollCols import ScrollCols
from WidgetRedirector import WidgetRedirector
from componentProperty import update_all_property, get_default_component_info, get_all_prop_name


def create_default_component(master, component_type, component_name, prop=None, use_name=True):
    """
    創建默認控制元件
    :param master: 父控制元件
    :param component_type: 控制元件型別
    :param component_name: 控制元件名字
    :param prop: 需要更新的屬性
    :param use_name: 是否使用控制元件名字
    :return: 控制元件
    """
    class_name = getattr(sys.modules[__name__], component_type)
    if use_name:
        component = class_name(master, name=component_name)
    else:
        component = class_name(master)

    component_info = get_default_component_info(component_type, prop)
    update_all_property(component, component_info, component_type)

    return component, component_info

class EntryBtnFunctionID(IntEnum):

    FUNCTION_COLOR = 1
    FUNCTION_SELECT = 2

class EntryWithBtn(Entry):

    def __init__(self, master=None, cnf={}, **kw):
        Entry.__init__(self, master, cnf, **kw)
        self.function_id = EntryBtnFunctionID.FUNCTION_COLOR
        self.function_dict = {
            EntryBtnFunctionID.FUNCTION_COLOR: self.btn_color_click,
            EntryBtnFunctionID.FUNCTION_SELECT: self.btn_select_click,
        }

    def set_function_id(self, function_id):
        if self.function_id == function_id:
            return
        self.function_id = function_id

    def get_function_id(self):
        return self.function_id

    def on_update(self):
        self.create_btn()

    def create_btn(self):

        prop = {
            "width": 0, "height": 1,
            "x": self.winfo_reqwidth() - 15,
            "text": "...", "background": "grey",
        }
        btn, info = create_default_component(self, "Button", "function_btn", prop, True)
        btn.bind("<Button-1>", self.on_btn_click)

    def on_btn_click(self, event):
        function = self.function_dict[self.get_function_id()]
        function()

    def btn_color_click(self):
        color = colorchooser.askcolor()
        if color[0] is None:
            return
        self.delete(0, END)
        self.insert(0, color[1])

    def btn_select_click(self):
        file_path = askopenfilename(title=u"選擇檔案", filetypes=[("all files", "*")])
        if not file_path:
            return
        self.delete(0, END)
        self.insert(0, file_path)

說明：

1. 這個控制元件就是Entry里加了一個按鈕，點擊的時候根據型別去分別進行處理，如下圖：
   

2. WidgetRedirector是從python自帶的idle編輯器里面拷貝的，主要是用來處理entry的insert和delete事件的，之后會用到，代碼如下，WidgetRedirector.py

   from tkinter import TclError
   
   class WidgetRedirector:
       """Support for redirecting arbitrary widget subcommands.
   
       Some Tk operations don't normally pass through tkinter.  For example, if a
       character is inserted into a Text widget by pressing a key, a default Tk
       binding to the widget's 'insert' operation is activated, and the Tk library
       processes the insert without calling back into tkinter.
   
       Although a binding to <Key> could be made via tkinter, what we really want
       to do is to hook the Tk 'insert' operation itself.  For one thing, we want
       a text.insert call in idle code to have the same effect as a key press.
   
       When a widget is instantiated, a Tcl command is created whose name is the
       same as the pathname widget._w.  This command is used to invoke the various
       widget operations, e.g. insert (for a Text widget). We are going to hook
       this command and provide a facility ('register') to intercept the widget
       operation.  We will also intercept method calls on the tkinter class
       instance that represents the tk widget.
   
       In IDLE, WidgetRedirector is used in Percolator to intercept Text
       commands.  The function being registered provides access to the top
       of a Percolator chain.  At the bottom of the chain is a call to the
       original Tk widget operation.
       """
       def __init__(self, widget):
           '''Initialize attributes and setup redirection.
   
           _operations: dict mapping operation name to new function.
           widget: the widget whose tcl command is to be intercepted.
           tk: widget.tk, a convenience attribute, probably not needed.
           orig: new name of the original tcl command.
   
           Since renaming to orig fails with TclError when orig already
           exists, only one WidgetDirector can exist for a given widget.
           '''
           self._operations = {}
           self.widget = widget            # widget instance
           self.tk = tk = widget.tk        # widget's root
           w = widget._w                   # widget's (full) Tk pathname
           self.orig = w + "_orig"
           # Rename the Tcl command within Tcl:
           tk.call("rename", w, self.orig)
           # Create a new Tcl command whose name is the widget's pathname, and
           # whose action is to dispatch on the operation passed to the widget:
           tk.createcommand(w, self.dispatch)
   
       def __repr__(self):
           return "WidgetRedirector(%s<%s>)" % (self.widget.__class__.__name__,
                                                self.widget._w)
   
       def close(self):
           "Unregister operations and revert redirection created by .__init__."
           for operation in list(self._operations):
               self.unregister(operation)
           widget = self.widget
           tk = widget.tk
           w = widget._w
           # Restore the original widget Tcl command.
           tk.deletecommand(w)
           tk.call("rename", self.orig, w)
           del self.widget, self.tk  # Should not be needed
           # if instance is deleted after close, as in Percolator.
   
       def register(self, operation, function):
           '''Return OriginalCommand(operation) after registering function.
   
           Registration adds an operation: function pair to ._operations.
           It also adds an widget function attribute that masks the tkinter
           class instance method.  Method masking operates independently
           from command dispatch.
   
           If a second function is registered for the same operation, the
           first function is replaced in both places.
           '''
           self._operations[operation] = function
           setattr(self.widget, operation, function)
           return OriginalCommand(self, operation)
   
       def unregister(self, operation):
           '''Return the function for the operation, or None.
   
           Deleting the instance attribute unmasks the class attribute.
           '''
           if operation in self._operations:
               function = self._operations[operation]
               del self._operations[operation]
               try:
                   delattr(self.widget, operation)
               except AttributeError:
                   pass
               return function
           else:
               return None
   
       def dispatch(self, operation, *args):
           '''Callback from Tcl which runs when the widget is referenced.
   
           If an operation has been registered in self._operations, apply the
           associated function to the args passed into Tcl. Otherwise, pass the
           operation through to Tk via the original Tcl function.
   
           Note that if a registered function is called, the operation is not
           passed through to Tk.  Apply the function returned by self.register()
           to *args to accomplish that.  For an example, see ColorDelegator.py.
   
           '''
           m = self._operations.get(operation)
           try:
               if m:
                   return m(*args)
               else:
                   return self.tk.call((self.orig, operation) + args)
           except TclError:
               return ""
   
   
   class OriginalCommand:
       '''Callable for original tk command that has been redirected.
   
       Returned by .register; can be used in the function registered.
       redir = WidgetRedirector(text)
       def my_insert(*args):
           print("insert", args)
           original_insert(*args)
       original_insert = redir.register("insert", my_insert)
       '''
   
       def __init__(self, redir, operation):
           '''Create .tk_call and .orig_and_operation for .__call__ method.
   
           .redir and .operation store the input args for __repr__.
           .tk and .orig copy attributes of .redir (probably not needed).
           '''
           self.redir = redir
           self.operation = operation
           self.tk = redir.tk  # redundant with self.redir
           self.orig = redir.orig  # redundant with self.redir
           # These two could be deleted after checking recipient code.
           self.tk_call = redir.tk.call
           self.orig_and_operation = (redir.orig, operation)
   
       def __repr__(self):
           return "OriginalCommand(%r, %r)" % (self.redir, self.operation)
   
       def __call__(self, *args):
           return self.tk_call(self.orig_and_operation + args)
   
   
   def _widget_redirector(parent):  # htest #
       from tkinter import Tk, Text
       import re
   
       root = Tk()
       root.title("Test WidgetRedirector")
       width, height, x, y = list(map(int, re.split('[x+]', parent.geometry())))
       root.geometry("+%d+%d"%(x, y + 150))
       text = Text(root)
       text.pack()
       text.focus_set()
       redir = WidgetRedirector(text)
       def my_insert(*args):
           print("insert", args)
           original_insert(*args)
       original_insert = redir.register("insert", my_insert)
       root.mainloop()
   
   if __name__ == "__main__":
       import unittest
       unittest.main('idlelib.idle_test.test_widgetredir',
                     verbosity=2, exit=False)
       from idlelib.idle_test.htest import run
       run(_widget_redirector)
   
   

二、根據屬性型別進行編輯屬性的控制元件

先上代碼，還是EditorPropertyList.py

class EditPropType(IntEnum):

    TYPE_ENTRY = 1
    TYPE_COMBO_BOX = 2
    TYPE_COLOR = 3
    TYPE_SELECT = 4

CURSOR_LIST = (
    "arrow;based_arrow_down;based_arrow_up;boat;bogosity;bottom_left_corner;bottom_right_corner;"
    "bottom_side;bottom_tee;box_spiral;center_ptr;circle;clock;coffee_mug;cross;cross_reverse;crosshair;"
    "diamond_cross;dot;dotbox;double_arrow;draft_large;draft_small;draped_box;exchange;fleur;gobbler;gumby;"
    "hand1;hand2;heart;icon;iron_cross;left_ptr;left_side;left_tee;leftbutton;ll_angle;lr_angle;man;"
    "middlebutton;mouse;none;pencil;pirate;plus;question_arrow;right_ptr;right_side;right_tee;rightbutton;"
    "rtl_logo;sailboat;sb_down_arrow;sb_h_double_arrow;sb_left_arrow;sb_right_arrow;sb_up_arrow;"
    "sb_v_double_arrow;shuttle;sizing;spider;spraycan;star;target;tcross;top_left_arrow;top_left_corner;"
    "top_right_corner;top_side;top_tee;trek;ul_angle;umbrella;ur_angle;watch;xterm;X_cursor"
)


PROP_TO_VALUES = {
    "anchor": ("n;s;w;e;nw;sw;ne;se;center"),
    "justify": ("left;right;center"),
    "font_anchor": ("n;s;w;e;nw;sw;ne;se;center"),
    "labelanchor": ("n;s;w;e;nw;sw;ne;se"),
    "relief": ("flat;groove;raised;ridge;solid;sunken"),
    "activerelief": ("flat;groove;raised;ridge;solid;sunken"),
    "sliderrelief": ("flat;groove;raised;ridge;solid;sunken"),
    "buttondownrelief": ("flat;groove;raised;ridge;solid;sunken"),
    "buttonuprelief": ("flat;groove;raised;ridge;solid;sunken"),
    "mode": ("determinate;indeterminate"),
    "state": ("active;disabled;normal;readonly"),
    "cursor": CURSOR_LIST,
    "buttoncursor": CURSOR_LIST,
    "compound": ("bottom;center;left;none;right;top"),
    "exportselection": ("0;1"),
    "selectmode": ("browse;multiple;single;extended;none"),
    "is_show_scroll": ("0;1"),
    "is_show_scroll_x": ("0;1"),
    "is_show_scroll_y": ("0;1"),
    "is_always_show_scroll": ("0;1"),
    "orient": ("horizontal;vertical"),
    "wrap": ("none;char;word"),
    "show": ("headings;tree;tree headings"),
}


PROP_COLOR_LIST = (
    "background", "activebackground", "activeforeground", "disabledforeground", "readonlybackground",
    "foreground", "highlightbackground", "highlightcolor", "insertbackground", "disabledbackground",
    "selectbackground", "selectforeground", "troughcolor", "selectcolor", "buttonbackground"
)


PROP_SELECT_LIST = (
    "bitmap", "image"
)

def get_prop_type_by_name(name):
    """
    根據屬性名字獲取編輯框型別
    :param name: 屬性名字
    :return: 編輯框型別
    """
    if name in PROP_TO_VALUES:
        return EditPropType.TYPE_COMBO_BOX

    if name in PROP_COLOR_LIST:
        return EditPropType.TYPE_COLOR

    if name in PROP_SELECT_LIST:
        return EditPropType.TYPE_SELECT

    return EditPropType.TYPE_ENTRY

class EditorProperty(ScrollCols):

    TYPE_TO_CLASS = {
        EditPropType.TYPE_ENTRY: Entry,
        EditPropType.TYPE_COMBO_BOX: Combobox,
        EditPropType.TYPE_COLOR: EntryWithBtn,
        EditPropType.TYPE_SELECT: EntryWithBtn,
    }

    def __init__(self, master=None, cnf={}, **kw):
        ScrollCols.__init__(self, master, cnf, **kw)
        self.col_distance = 2
        self.is_updating_property = False                       # 是否正在更新屬性

    def create_label(self, label_text, is_do_layout=False):
        """
        創建屬性名字標簽
        :param label_text: 標簽內容
        :param is_do_layout: 是否重新布局
        :return: None
        """
        label_prop = {
            "width": 23, "borderwidth": 2,
            "x": 0, "y": 1,
            "text": label_text,
            "relief": "sunken",
            "highlightthickness": 1,
        }
        label, info = create_default_component(self.slide_window, "Label", "label_text", label_prop)
        self.add_col_base(label, is_do_layout)

    def create_edit(self, edit_type, edit_value, default_values="None", is_do_layout=False):
        """
        創建屬性編輯框
        :param edit_type: 編輯框型別
        :param edit_value: 默認值
        :param default_values: comboBox下拉串列默認值
        :param is_do_layout: 是否重新布局
        :return: None
        """
        edit_class = self.TYPE_TO_CLASS[edit_type]
        edit_prop = {
            "borderwidth": 2, "width": 29,
            "x": 0, "y": 1,
        }

        if edit_type == EditPropType.TYPE_COMBO_BOX:
            values = default_values.split(";")
            value_list = []
            for value in values:
                value_list.append(value)
            edit_prop.update({"values": value_list, "width": 27, "position_y": 1, "borderwidth": 1,})
        elif edit_type == EditPropType.TYPE_SELECT:
            edit_prop.update({"function_id": EntryBtnFunctionID.FUNCTION_SELECT})
        elif edit_type == EditPropType.TYPE_COLOR:
            edit_prop.update({"function_id": EntryBtnFunctionID.FUNCTION_COLOR})

        edit, info = create_default_component(self.slide_window, edit_class.__name__, "edit", edit_prop)
        edit.bind("<Key>", self.key_click)
        if edit_type == EditPropType.TYPE_COMBO_BOX:
            edit.bind("<<ComboboxSelected>>", self.on_prop_change)

        self.add_col_base(edit, is_do_layout)

        if edit_value is not None:
            edit.insert(0, edit_value)

        redir = WidgetRedirector(edit)

        def my_insert(*args):
            original_insert(*args)
            self.on_prop_change(None)

        def my_delete(*args):
            original_delete(*args)
            self.on_prop_change(None)

        original_insert = redir.register("insert", my_insert)
        original_delete = redir.register("delete", my_delete)

    def create_one_property(self, label_text, edit_value, edit_type, default_value):
        """
        創建編輯屬性所需的控制元件
        :param label_text: 屬性名字
        :param edit_value: 屬性值
        :param edit_type: 編輯框型別
        :param default_value: comboBox下拉串列默認值
        :return: None
        """
        self.create_label(label_text)
        self.create_edit(edit_type, edit_value, default_value)
        self.do_layout_col()

    def update_prop_value(self, prop_value):
        """
        更新屬性值
        :param prop_value: 屬性值
        :return: None
        """
        edit = self.slide_window.children.get("edit", None)
        if edit is None:
            return
        self.is_updating_property = True
        edit.delete(0, END)
        edit.insert(0, prop_value)
        self.is_updating_property = False

    def clear_edit_value(self):
        """
        清除編輯框內容
        :return: None
        """
        edit = self.slide_window.children.get("edit", None)
        if edit is None:
            return
        self.is_updating_property = True
        edit.delete(0, END)
        self.is_updating_property = False

    def on_prop_change(self, event):
        """
        屬性更新之后回呼
        :param event:
        :return:
        """
        if self.is_updating_property:
            return

        label = self.slide_window.children.get("label_text", None)
        if label is None:
            return

        edit = self.slide_window.children.get("edit", None)
        if edit is None:
            return

        value = edit.get()
        if not value:
            return

        self.master.master.edit_component.update_property({label['text']: value,}, "prop_list")

    def key_click(self, event):
        self.master.master.get_selected_component().component.focus_force()
        if event.keysym in ("Up", "Down"):
            return "break"

    @staticmethod
    def create_default_property(master, component_name, prop=None):

        property_dict = {
            "x": 0, "y": 0,
            "width": 500, "height": 500,
            "borderwidth": 0, "pos_x_default": 3,
        }

        if prop is not None:
            property_dict.update(prop)

        property, info = create_default_component(master, "EditorProperty", component_name, property_dict)

        return property

說明：

1. 我將編輯框分為了4個型別，有下拉串列的(例如font，cursor等等)用ComboBox，選擇顏色和檔案的用EntryWithBtn，其余的都用Entry
2. 編輯框插入和洗掉之后需要更新正在編輯的控制元件屬性，使用WidgetRedirector處理
3. self.master.master.edit_component.update_property({label[‘text’]: value,}, “prop_list”)這句是后面真正編輯屬性時用到的，這里不用管
4. update_prop_value這個函式是通過滑鼠將控制元件移動位置后修改編輯框的文字時呼叫的，這里為了避免回圈呼叫on_prop_change函式加了一個限制is_updating_property
5. key_click這里我還沒想好，目前不用管
6. 需要再更新一下componentProperty這個檔案

上一篇記錄 下一篇記錄