[toc]
# wxpython ui组件封装教程
由于wxpython的组件众多 仅以一人之力是难以全部封装成中文函数的
为此我这里将教会大家如何封装wxpython中的组件到易函数中
并且将自己封装好的代码贡献到 pyefun 易函数的代码仓库中
凭借大家的力量让易函数中的ui组件越来越好用
## 视频讲解
将wxpython的UI组件封装到易函数中 https://www.bilibili.com/video/BV18V411W79X
# 开始
先了解一下贡献代码的流程
1. 查看wxpython中标签组件的文档
2. 参考易语言中组件的方法和属性，作为优先考虑的命名风格
3. 将pyefun中的代码 fork 到自己的仓库中 然后可到自己仓库的代码到本地开发
3. 编写用于测试封装ui组件的窗口代码示例
4. 编写要封装组件的属性和方法
5. 完成封装测试无误后将代码提交自己的仓库
6. 到github或码云中，提交贡献代码的请求
# 例如要封装标签组件
# 1. 到wxpython中查询标签组件的文档
打开wxpython的文档官网 https://docs.wxpython.org/
`wx.StaticText` 是标签组件到wxpython的文档中搜索 就可以找到该文档
找到了文档地址打开阅读
https://docs.wxpython.org/wx.StaticText.html
首先我们看到文档中说明的窗口样式
```
窗口样式
此类支持以下样式：
wx.ALIGN_LEFT: 将文本左对齐。
wx.ALIGN_RIGHT: 将文本向右对齐。
wx.ALIGN_CENTRE_HORIZONTAL: 使文本居中（水平）。
wx.ST_NO_AUTORESIZE：默认情况下，控件将在SetLabel 调用时调整其大小以完全适合文本的大小。如果给出了此样式标志，则控件将不会更改其大小（此样式对于也具有ALIGN_RIGHT 或 ALIGN_CENTRE_HORIZONTAL 样式的控件特别有用， 否则在调用 后它们将不再有意义 SetLabel）。
wx.ST_ELLIPSIZE_START: 如果labeltext宽度超过控件宽度，则将label的开头替换为省略号；使用wx.Control.Ellipsize.
wx.ST_ELLIPSIZE_MIDDLE: 如果标签文字宽度超过控件宽度，则将标签中间替换为省略号；使用wx.Control.Ellipsize.
wx.ST_ELLIPSIZE_END: 如果标签文字宽度超过控件宽度，则将标签末尾替换为省略号；使用wx.Control.Ellipsize.
```
从这里可以知道 我们可以封装的属性有 7个 我们观察一下样式的类别总结一下
* 文字对齐方式
* 省略号位置
* 自动调整大小
大概可以分析得出可以设置的选项
# 2. 在易语言中确定封装的命名风格
为了保持简单易用的原则,建议采用先进最先进的的中文编程软件中的命名方式
从这里看到 易语言中标签组件的属性是非常之多的 很多在wxpython并没有 所以我们只需要对wxpython中有的属性和方法进行封装
现在对照wxpython中的文档标签中的方法和可以设置的属性
| [`__init__`](https://docs.wxpython.org/wx.StaticText.html#wx.StaticText.__init__ "wx.StaticText.__init__") | 默认构造函数。 |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`Create`](https://docs.wxpython.org/wx.StaticText.html#wx.StaticText.Create "wx.StaticText.Create") | 创建函数，用于两步构建。 |
| [`GetClassDefaultAttributes`](https://docs.wxpython.org/wx.StaticText.html#wx.StaticText.GetClassDefaultAttributes "wx.StaticText.GetClassDefaultAttributes") | |
| [`IsEllipsized`](https://docs.wxpython.org/wx.StaticText.html#wx.StaticText.IsEllipsized "wx.StaticText.IsEllipsized") | 返回`True`此控件的窗口样式是否包含 `ST_ELLIPSIZE_START`、 `ST_ELLIPSIZE_MIDDLE` 或 `ST_ELLIPSIZE_END` 样式之一。 |
| [`SetLabel`](https://docs.wxpython.org/wx.StaticText.html#wx.StaticText.SetLabel "wx.StaticText.SetLabel") | 更改控件中显示的标签。 |
| [`Wrap`](https://docs.wxpython.org/wx.StaticText.html#wx.StaticText.Wrap "wx.StaticText.Wrap") | 此函数包装控件标签，以便其每行最多变为*宽度* 像素（如果可能，行在单词边界处断开，因此如果单词太长则可能不是这种情况）。 |
可以发现 可以提供给我们设置的熟悉并不多而易语言组件中的属性十分多
接下来，根据可以设置的属性和方法，进行封装
总结一下可以封装的属性和方法
* 文字对齐方式 文本居左 文本居中 文本居右
* 省略号位置 省略号在开头 省略号在中间 省略号在结尾
* 自动调整大小 真则不做处理 假则 设置样式 `wx.ST_NO_AUTORESIZE` 禁用自动调整大小的功能
* 标题
# 3. 开始封装
下载易函数代码 https://gitee.com/duolabmeng666/pyefun 将代码fork到自己的仓库中 克隆自己仓库的代码
```
git clone https://gitee.com/duolabmeng666/pyefun
# 这里是主仓库的地址 你们需要换成你自己仓库的地址方便后续贡献代码 不换也没有关系可以写好以后再操作
```
在易函数中组件代码在目录 `pyefun/wxefun/component`
这里可以查看到封装的所有的组件 https://gitee.com/duolabmeng666/pyefun/tree/master/pyefun/wxefun/component
找到标签组件的代码 `pyefun/wxefun/component/StaticText.py` 确定了文件在哪里以后
我们建立一个测试标签组件的窗口代码 可以用易函数视窗编程系统生成一个最简单的窗口
进入 pyefun 的项目
在这里建立测试组件代码的文件 将测试代码添加到文件中
```
example/wxpython/标签组件封装测试.py
```
```
import pyefun.wxefun as wx
class 窗口1(wx.窗口):
def __init__(self):
self.初始化界面()
def 初始化界面(self):
#########以下是创建的组件代码#########
wx.窗口.__init__(self, None, title='易函数视窗编程系统', size=(380, 250), name='frame',
style=wx.窗口边框.普通可调边框 & ~(wx.MAXIMIZE_BOX))
self.容器 = wx.容器(self)
self.Centre()
self.窗口1 = self
self.窗口1.播放次数 = wx.播放次数.循环播放
self.窗口1.位置 = wx.窗口位置.通常
self.标签1 = wx.标签(self.容器, size=(200, 111), pos=(42, 24),
label='标签1111111111111111111111111111111111111111111111111111111111',
style=wx.ALIGN_RIGHT | wx.ST_NO_AUTORESIZE | wx.ST_ELLIPSIZE_START)
self.按钮1 = wx.按钮(self.容器, size=(82, 30), pos=(26, 155), label='按钮')
self.按钮1.绑定事件(wx.事件.被单击, self.按钮1_被单击)
#########以上是创建的组件代码##########
#########以下是组件绑定的事件代码#########
def 标签1_鼠标左键被按下(self, event):
print("标签1_鼠标左键被按下")
def 按钮1_被单击(self, event):
print("按钮1_被单击")
# self.标签1.ToggleWindowStyle(wx.标签样式.文字在右边)
# self.标签1.SetWindowStyle(wx.标签样式.文字在右边)
# self.标签1.SetWindowStyle(wx.标签样式.省略号在开头)
# self.标签1.SetWindowStyle(wx.标签样式.省略号在末尾)
# self.标签1.SetWindowStyle(wx.标签样式.省略号在中间)
# self.标签1.Refresh()
self.标签1.标题 = "测试标题属性的设置"
print("测试获取标题属性", self.标签1.标题)
#########以上是组件绑定的事件代码#########
class 应用(wx.App):
def OnInit(self):
self.窗口1 = 窗口1()
self.窗口1.Show(True)
return True
if __name__ == '__main__':
app = 应用()
app.MainLoop()
```
这里呢 画了一个按钮用于测试标签的样式
还有一个标签组件用于测试
接下来找到标签组件的代码文件进行组件的封装 `pyefun/wxefun/component/StaticText.py`
如果你要封装的组件不在文件列表中那么你可以新建一个文件注意命名风格即可
## 编写标签组件的代码
`pyefun/wxefun/component/StaticText.py`
```
"""
标签组件
"""
import wx
from .wxControl import *
import pyefun.wxefun.evt as evt
class 标签(wx.StaticText, 公用方法):
pass
@property
def 标题(self):
return self.GetLabel()
@标题.setter
def 标题(self, value: str):
return self.SetLabel(value)
@property
def 文字对齐方式(self):
return ""
@文字对齐方式.setter
def 文字对齐方式(self, 标签样式: int):
"""
wx.标签样式.文字在左边
wx.标签样式.文字在右边
wx.标签样式.文字在居中
"""
self.SetWindowStyle(标签样式)
self.Refresh()
@property
def 省略号位置(self):
return ""
@省略号位置.setter
def 省略号位置(self, 标签样式: int):
"""
wx.标签样式.省略号在开头
wx.标签样式.省略号在中间
wx.标签样式.省略号在末尾
"""
self.SetWindowStyle(标签样式)
self.Refresh()
@property
def 自动调整大小(self):
return ""
@自动调整大小.setter
def 自动调整大小(self, 是否自动调整大小: bool):
"默认是自动跳转大小的 如果设置 真 就是默认自动跳转大小 如果设置假就是禁用自动跳转代销"
if 是否自动调整大小:
self.ToggleWindowStyle(evt.标签样式.禁用自动调整大小)
else:
self.SetWindowStyle(evt.标签样式.禁用自动调整大小)
self.Refresh()
```
添加标签样式到组件常量中
`pyefun/wxefun/evt.py`
```
class 标签样式:
文字在左边 = wx.ALIGN_LEFT # 将文本向左对齐。
文字在右边 = wx.ALIGN_RIGHT # 将文本向右对齐。
文字在居中 = wx.ALIGN_CENTRE_HORIZONTAL # 将文本居中（水平）。
禁用自动调整大小 = wx.ST_NO_AUTORESIZE # ：默认情况下，控件将调整其大小以使其完全适合SetLabel 被调用时文本的大小。如果提供了此样式标志，则控件将不会更改其大小（此样式对于也具有ALIGN_RIGHT 或 ALIGN_CENTRE_HORIZONTAL 样式的控件特别有用， 因为否则在调用以后它们将不再有意义 SetLabel）。
省略号在开头 = wx.ST_ELLIPSIZE_START # ：如果labeltext宽度超过控件宽度，则用省略号替换标签的开头；用途wx.Control.Ellipsize。
省略号在中间 = wx.ST_ELLIPSIZE_MIDDLE # ：如果标签文本的宽度超过控件的宽度，则用省略号替换标签的中间；用途wx.Control.Ellipsize。
省略号在末尾 = wx.ST_ELLIPSIZE_END # ：如果标签文本的宽度超过控件的宽度，请用省略号替换标签的末尾；用途wx.Control.Ellipsize。
```
到这里组件的封装工作已经完成
接下来我们讲解一下如何将代码贡献到代码仓库中
# 4. 贡献代码
## 贡献方式
* 1. 如果实在不会操作github 将代码发送到 issues 中 https://gitee.com/duolabmeng666/pyefun/issue
* 2. 进入 pyefun的qq群传到群共享或者将代码变更发给群主
* 3. 正常的 git 贡献代码流程 （如果你能使用 github 贡献就github ）如果没有条件使用github，码云贡献代码也没有问题的
接下来我们来讲解一下正常的贡献流程 以码云作为代码贡献的例子
正常来讲我应该以github来讲解 但是国内的网络环境原因 这里易 码云的贡献代码流程来讲解
## 1.fork 项目到自己仓库
码云 pyefun 仓库 https://gitee.com/duolabmeng666/pyefun
这里大家注册好码云账户以后就可以 fork了 将代码复制到自己的代码仓库中
这边我的地址是 `https://gitee.com/duolabmengtest/pyefun.git`
将代码用git的工具克隆下来
## 2. 将封装好的代码放到放到这个目录下面然后提交并且推送
## 3. 推送完成以后 提交提交合并贡献代码
这里推送了以后看到自己的仓库呢就有了修改记录了
## 4. 将代码贡献至pyefun
## 5. 完成后等待 pyefun 的仓库管理员审核你的代码 代码有问题将会合并到pyeufn中
# 感谢您对国内中文编程事业的热爱和贡献
# 帮助信息
* 如果你不知道如何封装可以参考组件目录下已经封装好的组件进行参考 https://gitee.com/duolabmeng666/pyefun/tree/master/pyefun/wxefun
* 如果你有能力使用github贡献代码，请使用github贡献代码
* 封装过程中遇到任何问题都可以在pyefun的qq群中提问 qq群 : 1017240979
# 更多例子
## 组合框封装例子
上面的标签案例比较简单
这里介绍一下组合框
案例中讲解了 组合框的方法 事件 属性 的封装
[组合框组件的封装教程](%E7%BB%84%E5%90%88%E6%A1%86%E7%BB%84%E4%BB%B6%E7%9A%84%E5%B0%81%E8%A3%85%E6%95%99%E7%A8%8B.md)
