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

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

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

引言
声明
文件结构
编写界面（main.xml）
编写TinUIXml-IDO代码
功能代码
- 导入xml文本
- 导出IDO代码
完整代码
效果
结语

引言

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

xml文件的调试
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()