使用tkinter製做tkinterUI編輯器
前言
這篇文章繼續記錄編輯屬性的控件，我但願編輯顏色的時候能夠直接彈出系統自帶的顏色選擇界面，編輯image屬性時能夠彈出選擇文件的界面，因此先添加一個編輯顏色以及image的控件，以後添加一個根據屬性類型進行編輯屬性的控件。python
1、編輯顏色以及image的控件
先上代碼，EditorPropertyList.pyapp
#!/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)
說明：ssh
-
這個控件就是Entry里加了一個按鈕，點擊的時候根據類型去分別進行處理，以下圖：
編輯器 -
WidgetRedirector是從python自帶的idle編輯器裏面拷貝的，主要是用來處理entry的insert和delete事件的，以後會用到，代碼以下，WidgetRedirector.pyide
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)
2、根據屬性類型進行編輯屬性的控件
先上代碼，仍是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
說明：oop
- 我將編輯框分爲了4個類型，有下拉列表的(例如font，cursor等等)用ComboBox，選擇顏色和文件的用EntryWithBtn，其他的都用Entry
- 編輯框插入和刪除以後須要更新正在編輯的控件屬性，使用WidgetRedirector處理
- self.master.master.edit_component.update_property({label[‘text’]: value,}, 「prop_list」)這句是後面真正編輯屬性時用到的，這裏不用管
- update_prop_value這個函數是經過鼠標將控件移動位置後修改編輯框的文字時調用的，這裏爲了不循環調用on_prop_change函數加了一個限制is_updating_property
- key_click這裏我還沒想好，目前不用管
- 須要再更新一下componentProperty這個文件