【记录】python3 使用tkinter制作tkinterUI编辑器 《八》

使用tkinter制作tkinterUI编辑器


前言

这篇文章继续记录编辑属性的控件,我希望编辑颜色的时候可以直接弹出系统自带的颜色选择界面,编辑image属性时可以弹出选择文件的界面,所以先添加一个编辑颜色以及image的控件,之后添加一个根据属性类型进行编辑属性的控件。

完整代码已上传到github,可从第一篇记录下载

一、编辑颜色以及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这个文件

上一篇记录 下一篇记录

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

archmage199

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值