tkinter-TinUI-xml实战（5）TinUIxml编辑器

本文主要是介绍tkinter-TinUI-xml实战（5）TinUIxml编辑器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

引言

TinUIXml推出有一段时间了，其中，最重要的部分无非就是以下两点：

1. xml文件的调试

2. IDO代码部分的编写

虽然相比于使用TinUI自身的布局系统，使用xml文件可以大大简化TinUI界面的调试编写，同时为程序的开发节约更多的时间。当然，我们还是需要通过每一次代码运行，来查看我们编写的xml文件是否符合我们自己的预期。

这不是说TinUI的原生布局没有用，TinUI的绝对布局有更大的灵活性，适合个别单体组件的布局使用。

另外，当界面复杂以后，IDO部分的代码也就随之复杂了。

综上，我们希望有一款既能够直接预览xml布局的界面，同时还能够为我们自动导出一定格式的IDO代码的TinUIXml编辑器。

---

声明

本项目属于作者原创。借鉴了GitHub/TinUI上的tuxml.py，翻版必究，但可以自行添加功能代码。

本项目使用的TinUI为我开源并维护在GitHub上的主文件——TinUI.py。当然，使用PYPI中下载安装的tinui也可以。

---

文件结构

• main.xml - 主界面
• tinui.py - TinUI界面核心支持
• TinUIXml编辑器.py - 本次项目文件

---

编写界面（main.xml）

这次的界面虽然比之前复杂一点，但是我们还是可以做一下分析的。

• 左侧分别为两个文本框

  • 左上角的文本框负责填写xml格式文本段

  • 左下角的文本框显示导出的IDO代码

• 右上角显示两个按钮，分别为渲染TinUI界面、导出IDO代码

• 右侧为预览的TinUI

依据以上分析，编写main.xml文件：

<!--TinUIXml编辑器-->
<tinui><line><line><textbox width='475' height='350' text='<!--TinUIXml UI界面布局-->' scrollbar='True'>xmltext</textbox></line><line><textbox width='475' height='350' text='#TinUIXml-IDO' scrollbar='True'>codetext</textbox></line><back></back><line x='510'><button text='xml导入' command='self.funcs["inxml"]'></button><button text='生成IDO代码' command='self.funcs["inido"]'></button></line></line>
</tinui>

编写TinUIXml-IDO代码

以下是通过本程序生成的IDO代码，但是IDO代码经过了一定更改，这也是本程序不可改变的后续人工步骤。

u=BasicTinUI(root)
u.pack(fill='both',expand=True)
x=TinUIXml(u)
#in
x.funcs['inxml']=inxml
x.funcs['inido']=inido
#during
with open('main.xml',mode='r',encoding='utf-8') as f:xml=f.read()
x.loadxml(xml)
#out
xmltext=x.tags['xmltext'][0]
xmltext.insert('end','\n')
codetext=x.tags['codetext'][0]
codetext.insert('end','\n# u=TinUI(root) ; x=TinUIXml(u) ; xml=file.read()\n')

功能代码

导入xml文本

def inxml(event):uixml=xmltext.get(1.0,'end')xui.funcs=dict()xui.datas=dict()xui.tags=dict()result=re.findall("self\.(.*?)\[.(.*?).\]'",uixml,re.M|re.S)for i in result:if i[0]=='funcs':xui.funcs[i[1]]=Noneelif i[0]=='datas':xui.datas[i[1]]=(None,None)xui.yendy=5xui.clean()xui.loadxml(uixml)return result

导出IDO代码

def inido(event):r=inxml(None)write('#in')for i in r:if i[0]=='funcs':write(f'x.funcs["{i[1]}"] = {i[1]}')elif i[0]=='datas':write(f'x.datas["{i[1]}"] = {i[1]}')write('#during')write('x.loadxml(xml)')write('#out')for tag in xui.tags.keys():write(f'{tag} = x.data["{tag}"]')

完整代码

这个编辑器只是雏形，但我不会再改进，请各自根据所需以此为参考添加功能。

from tinui import *
from tkinter import Tk
import redef write(text):codetext.insert('end',text+'\n')def inxml(event):uixml=xmltext.get(1.0,'end')xui.funcs=dict()xui.datas=dict()xui.tags=dict()result=re.findall("self\.(.*?)\[.(.*?).\]'",uixml,re.M|re.S)for i in result:if i[0]=='funcs':xui.funcs[i[1]]=Noneelif i[0]=='datas':xui.datas[i[1]]=(None,None)xui.yendy=5xui.clean()xui.loadxml(uixml)return resultdef inido(event):r=inxml(None)write('#in')for i in r:if i[0]=='funcs':write(f'x.funcs["{i[1]}"] = {i[1]}')elif i[0]=='datas':write(f'x.datas["{i[1]}"] = {i[1]}')write('#during')write('x.loadxml(xml)')write('#out')for tag in xui.tags.keys():write(f'{tag} = x.data["{tag}"]')root=Tk()
root.geometry('1280x720+5+5')
root.title('TinUIXml设计测试')u=BasicTinUI(root)
u.pack(fill='both',expand=True)
x=TinUIXml(u)
#in
x.funcs['inxml']=inxml
x.funcs['inido']=inido
#during
with open('main.xml',mode='r',encoding='utf-8') as f:xml=f.read()
x.loadxml(xml)
#out
xmltext=x.tags['xmltext'][0]
xmltext.insert('end','\n')
codetext=x.tags['codetext'][0]
codetext.insert('end','\n# u=TinUI(root) ; x=TinUIXml(u) ; xml=file.read()\n')ui=TinUI(u,width=730,height=650)
ui.place(x=520,y=40)
xui=TinUIXml(ui)root.mainloop()

效果

我到现在还在感谢自己为TinUI提供了滚动条的绘制代码，否则TinUI不会有自身的textbox控件，也不会有之后的视野可变类控件。

---

结语

拥有了半自动化的TinUIXml编辑器，TinUI的界面布局变得更加方便了。

将开源TinUI添加到自己的项目时要注意，TinUI使用了GPL开源协议，使用TinUI需要遵照协议内容和使用条款。

🔆tkinter创新🔆

这篇关于tkinter-TinUI-xml实战（5）TinUIxml编辑器的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---