[toc]
# 组合框组件的封装教程
以组合框组件作为例子讲解一下如何封装UI组件 ，完整的介绍了封装组合框的**方法**，**事件**，**属性**，以及在易函数视窗编程系统中起到的作用
学习完本教程你就可以轻轻松松的封装ui组件，实现方便的中文命名方式使用wxpython的优秀组件。
将你封装的代码贡献到pyefun中，大家都可以享受你的封装成果。
pyefun 将会因为有你的贡献，越来越好用。
参与贡献代码，你的名字将永远的记录在 pyefun 项目的贡献列表中。
感谢你对国内的中文编程事业的热爱和贡献。
## 视频讲解
将wxpython的UI组件封装到易函数中 https://www.bilibili.com/video/BV18V411W79X
# 代码结构
首先了解一下 pyefun 项目的代码结构
封装UI组件主要是在三个方面 **组件方法** ， **组件事件**， **组件属性**
* 用于测试封装效果的代码 `example/wxpython/组合框组件封装测试.py`
* 封装组件的代码 `pyefun/wxefun/component/ComboBox.py`
* 组件常量文件 用于组件的窗口样式和事件中文定义的`pyefun/wxefun/evt.py`
```
pyefun
├─example
│ └─wxpython # 将你的组件测试代码放到这里
│ 标签组件封装测试.json
│ 标签组件封装测试.py
│ 组合框组件封装测试.json
│ 组合框组件封装测试.p
│ ├─wxefun # 封装 wxpython 的中文函数库
│ │ │ compatible.py # 兼容原版wx中文函数的代码
│ │ │ evt.py # 这是 组件常量 例如 事件.按钮被按下 按钮样式 窗口样式 之类的常量在这里编写
│ │ │ func.py # 这是公用的函数 例如 信息框 之类的命令
│ │ │ __init__.py # 组件加载的入口
│ │ │
│ │ ├─component # 这里是封装的组件 所有封装的组件都放在这里
│ │ │ │ AnimationCtrl.py
│ │ │ │ BitmapButton.py
│ │ │ │ Button.py
│ │ │ │ CalendarCtrl.py
│ │ │ │ CheckBox.py
│ │ │ │ CheckListBox.py
│ │ │ │ ColourPickerCtrl.py
│ │ │ │ ComboBox.py
│ │ │ │ CommandLinkButton.py
│ │ │ │ DatePickerCtrl.py
│ │ │ │ EditableListBox.py
│ │ │ │ FloatSpin.py
│ │ │ │ Frame.py
│ │ │ │ Gauge.py
│ │ │ │ GradientButton.py
│ │ │ │ HyperlinkCtrl.py
│ │ │ │ Image.py
│ │ │ │ ListBox.py
│ │ │ │ ListCtrl.py
│ │ │ │ Menbar.py
│ │ │ │ Notebook.py
│ │ │ │ Panel.py
│ │ │ │ Propgrid.py
│ │ │ │ RadioBox.py
│ │ │ │ RadioButton.py
│ │ │ │ ScrollBar.py
│ │ │ │ Slider.py
│ │ │ │ Sound.py
│ │ │ │ SpinCtrl.py
│ │ │ │ StaticBitmap.py
│ │ │ │ StaticText.py
│ │ │ │ TextCtrl.py
│ │ │ │ ThemedGenBitmapTextButton.py
│ │ │ │ TimePickerCtrl.py
│ │ │ │ Timer.py
│ │ │ │ Toolbar.py
│ │ │ │ wxControl.py # 全局的组件公用类 例如 文本颜色设置 字体设置 之类的公用组件方法
│ │ │ │ __init__.py # 导入组件类的入口文件
```
# 查看wxpython中组合框的组件文档
组合框组件的文档
https://wxpython.org/Phoenix/docs/html/wx.ComboBox.html?highlight=wx%20combobox#wx.ComboBox
操作组合框的选项文档
https://wxpython.org/Phoenix/docs/html/wx.ItemContainer.html#wx-itemcontainer
从wxpython文档分析出可以封装的属性
## 组合框窗口样式
```
此类支持以下样式：
* `wx.CB_SIMPLE`：创建一个带有永久显示列表的组合框。仅限 Windows。
* `wx.CB_DROPDOWN`：创建一个带有下拉列表的组合框。仅 MSW 和 Motif。
* `wx.CB_READONLY`：具有这种样式的组合框的行为类似于[wx.Choice](https://wxpython.org/Phoenix/docs/html/wx.Choice.html#wx-choice)（并且可能看起来也相同，尽管这取决于平台），即它允许用户从选项列表中进行选择但不允许输入列表中不存在的值。
* `wx.CB_SORT`：按字母顺序对列表中的条目进行排序。
* `wx.TE_PROCESS_ENTER`: 控件会产生`wxEVT_TEXT_ENTER`程序可以处理的事件。否则，即如果根本没有指定此样式，或者使用它，但没有此事件的事件处理程序或调用的事件处理程序[`wx.Event.Skip`](https://wxpython.org/Phoenix/docs/html/wx.Event.html#wx.Event.Skip "wx.Event.Skip")以避免覆盖默认处理，则按 Enter 键要么由控件内部处理，要么使用激活对话框的默认按钮（如果有）。
```
## 组合框事件
```
绑定到以下事件类型的处理程序将接收一个 wx.CommandEvent参数。
EVT_COMBOBOX：处理 wxEVT_COMBOBOX 事件，选择列表中的项目时。请注意，调用会 GetValue 返回选择的新值。
EVT_TEXT：wxEVT_TEXT 当组合框文本改变时处理一个 事件。
EVT_TEXT_ENTER：处理一个 wxEVT_TEXT_ENTER 事件，当RETURN在组合框中按下时（注意组合框必须已经创建了wx.TE_PROCESS_ENTER样式才能接收此事件）。
EVT_COMBOBOX_DROPDOWN：处理一个 wxEVT_COMBOBOX_DROPDOWN 事件，当组合框的列表框部分显示（下拉）时产生。请注意，此事件仅受 wxMSW、带有 GTK+ 2.10 或更高版本的 wxGTK 以及 OSX/Cocoa 支持。
EVT_COMBOBOX_CLOSEUP：处理一个 wxEVT_COMBOBOX_CLOSEUP 事件，当组合框的列表框消失（关闭）时产生。此事件仅针对与wxEVT_COMBOBOX_DROPDOWN 上述相同的平台生成 。
```
## 组合框方法
| [`__init__`](https://wxpython.org/Phoenix/docs/html/wx.ComboBox.html#wx.ComboBox.__init__ "wx.ComboBox.__init__") | 默认构造函数。 |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`Create`](https://wxpython.org/Phoenix/docs/html/wx.ComboBox.html#wx.ComboBox.Create "wx.ComboBox.Create") | 为两步构造创建组合框。 |
| [`Dismiss`](https://wxpython.org/Phoenix/docs/html/wx.ComboBox.html#wx.ComboBox.Dismiss "wx.ComboBox.Dismiss") | 隐藏组合框的列表框部分。 |
| [`FindString`](https://wxpython.org/Phoenix/docs/html/wx.ComboBox.html#wx.ComboBox.FindString "wx.ComboBox.FindString") | 查找标签与给定字符串匹配的项目。 |
| [`GetClassDefaultAttributes`](https://wxpython.org/Phoenix/docs/html/wx.ComboBox.html#wx.ComboBox.GetClassDefaultAttributes "wx.ComboBox.GetClassDefaultAttributes") | |
| [`GetCount`](https://wxpython.org/Phoenix/docs/html/wx.ComboBox.html#wx.ComboBox.GetCount "wx.ComboBox.GetCount") | 返回控件中的项目数。 |
| [`GetCurrentSelection`](https://wxpython.org/Phoenix/docs/html/wx.ComboBox.html#wx.ComboBox.GetCurrentSelection "wx.ComboBox.GetCurrentSelection") | 返回当前选择的项目。 |
| [`GetInsertionPoint`](https://wxpython.org/Phoenix/docs/html/wx.ComboBox.html#wx.ComboBox.GetInsertionPoint "wx.ComboBox.GetInsertionPoint") | 一样[`wx.TextEntry.GetInsertionPoint`](https://wxpython.org/Phoenix/docs/html/wx.TextEntry.html#wx.TextEntry.GetInsertionPoint "wx.TextEntry.GetInsertionPoint")。 |
| [`GetSelection`](https://wxpython.org/Phoenix/docs/html/wx.ComboBox.html#wx.ComboBox.GetSelection "wx.ComboBox.GetSelection") | 返回所选项目的索引，或者 `NOT_FOUND` 如果未选择任何项目。 |
| [`GetTextSelection`](https://wxpython.org/Phoenix/docs/html/wx.ComboBox.html#wx.ComboBox.GetTextSelection "wx.ComboBox.GetTextSelection") | 获取当前选择范围。 |
| [`GetString`](https://wxpython.org/Phoenix/docs/html/wx.ComboBox.html#wx.ComboBox.GetString "wx.ComboBox.GetString") | 返回具有给定索引的项目的标签。 |
| [`GetStringSelection`](https://wxpython.org/Phoenix/docs/html/wx.ComboBox.html#wx.ComboBox.GetStringSelection "wx.ComboBox.GetStringSelection") | 获取当前在控件中选择的文本。 |
| [`IsListEmpty`](https://wxpython.org/Phoenix/docs/html/wx.ComboBox.html#wx.ComboBox.IsListEmpty "wx.ComboBox.IsListEmpty") | `True`如果组合框选项列表为空，则返回。 |
| [`IsTextEmpty`](https://wxpython.org/Phoenix/docs/html/wx.ComboBox.html#wx.ComboBox.IsTextEmpty "wx.ComboBox.IsTextEmpty") | `True`如果组合框的文本为空，则返回。 |
| [`Popup`](https://wxpython.org/Phoenix/docs/html/wx.ComboBox.html#wx.ComboBox.Popup "wx.ComboBox.Popup") | 显示组合框的列表框部分。 |
| [`SetSelection`](https://wxpython.org/Phoenix/docs/html/wx.ComboBox.html#wx.ComboBox.SetSelection "wx.ComboBox.SetSelection") | 一样[`wx.TextEntry.SetSelection`](https://wxpython.org/Phoenix/docs/html/wx.TextEntry.html#wx.TextEntry.SetSelection "wx.TextEntry.SetSelection")。 |
| [`SetString`](https://wxpython.org/Phoenix/docs/html/wx.ComboBox.html#wx.ComboBox.SetString "wx.ComboBox.SetString") | 更改指定组合框项的文本。 |
| [`SetTextSelection`](https://wxpython.org/Phoenix/docs/html/wx.ComboBox.html#wx.ComboBox.SetTextSelection "wx.ComboBox.SetTextSelection") | 一样[`wx.TextEntry.SetSelection`](https://wxpython.org/Phoenix/docs/html/wx.TextEntry.html#wx.TextEntry.SetSelection "wx.TextEntry.SetSelection")。 |
| [`SetValue`](https://wxpython.org/Phoenix/docs/html/wx.ComboBox.html#wx.ComboBox.SetValue "wx.ComboBox.SetValue") | 设置组合框文本字段的文本。 |
这里发现没有加入项目 删除项目 之类的方法?
仔细阅读wxpython的文档可以看出 [wx.ItemContainer](https://wxpython.org/Phoenix/docs/html/wx.ItemContainer.html#wx-itemcontainer) 是用于操作列表项目的一个类 所需要封装的加入项目 删除项目 清空项目 的方法都在这里
# 查看易语言中的组合框组件
查看易语言中组合框的组件的方法，事件，属性。
了解到大概的的命名规则后再封装
# 组合框为案例封装
一般情况下 建议是按如下顺序封装
1. 封装**组件方法** 指 加入项目 删除项目 置项目文本 取项目文本之类的组件方法
2. 封装**组件属性** 组件属性用于在 `易函数视窗编程系统` 中轻松的设置属性，亦可在代码中方便使用
3. 封装**组件事件** 组件事件用于在 `易函数视窗编程系统` 中轻松绑定该组件事件
# 1.建立测试组合框组件的窗口
`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=(97, 30), pos=(241, 63), label='测试')
self.按钮1.绑定事件(wx.事件.被单击, self.按钮1_被单击)
self.组合框1 = wx.组合框(self.容器, value='', pos=(23, 20), choices=[], style=wx.组合框样式.可编辑下拉式 | wx.组合框样式.自动排序)
self.组合框1.SetSize((179, 36))
self.组合框1.置列表项目([])
self.组合框1.绑定事件(wx.事件.列表项被选择, self.组合框1_列表项被选择)
self.组合框1.绑定事件(wx.事件.编辑内容被改变, self.组合框1_编辑内容被改变)
self.组合框1.绑定事件(wx.事件.将弹出列表, self.组合框1_将弹出列表)
self.组合框1.绑定事件(wx.事件.列表被关闭, self.组合框1_列表被关闭)
self.按钮2 = wx.按钮(self.容器, size=(97, 30), pos=(243, 22), label='清空')
self.按钮2.绑定事件(wx.事件.被单击, self.按钮2_被单击)
self.按钮3 = wx.按钮(self.容器, size=(97, 30), pos=(236, 117), label='加入项目测试')
self.按钮3.绑定事件(wx.事件.被单击, self.按钮3_被单击)
self.按钮4 = wx.按钮(self.容器, size=(97, 30), pos=(245, 169), label='遍历所有项目')
self.按钮4.绑定事件(wx.事件.被单击, self.按钮4_被单击)
#########以上是创建的组件代码##########
# self.组合框1 = wx.组合框(self.容器, value='', pos=(23, 20), choices=[], style=wx.CB_SIMPLE)
# self.组合框1 = wx.组合框(self.容器, value='', pos=(23, 20), choices=[], style=wx.CB_DROPDOWN)
# self.组合框1 = wx.组合框(self.容器, value='', pos=(23, 20), choices=[], style=wx.CB_READONLY)
# self.组合框1 = wx.组合框(self.容器, value='', pos=(23, 20), choices=[], style=wx.CB_SORT)
# self.组合框1 = wx.组合框(self.容器, value='', pos=(23, 20), choices=[], style=wx.TE_PROCESS_ENTER)
self.组合框1.列表项目 = ["a", "b", "c", "d", "apple", "e"]
self.组合框1.现行选中项 = 0
self.组合框1.内容 = "aaaaaaaaaaaaaaa"
# self.组合框1.置列表项目(["a", "b", "c", "d", "e"])
#########以下是组件绑定的事件代码#########
def 按钮1_被单击(self, event):
print("按钮1_被单击")
print(self.组合框1.内容)
self.组合框1.内容 = "aaaaaaaaa"
def 组合框1_列表项被选择(self, event):
print("组合框1_列表项被选择")
print(self.组合框1.现行选中项)
print(self.组合框1.取项目文本(self.组合框1.现行选中项))
def 组合框1_编辑内容被改变(self, event):
print("组合框1_编辑内容被改变")
def 组合框1_将弹出列表(self, event):
print("组合框1_将弹出列表")
def 组合框1_列表被关闭(self, event):
print("组合框1_列表被关闭")
print(self.组合框1.现行选中项)
print(self.组合框1.取项目文本(self.组合框1.现行选中项))
def 按钮2_被单击(self, event):
print("按钮2_被单击")
self.组合框1.清空()
def 按钮3_被单击(self, event):
print("按钮3_被单击")
for i in range(100):
self.组合框1.加入项目(str(i))
def 按钮4_被单击(self, event):
print("按钮4_被单击")
for i in range(self.组合框1.取项目数()):
print(i, self.组合框1.取项目文本(i))
#########以上是组件绑定的事件代码#########
class 应用(wx.App):
def OnInit(self):
self.窗口1 = 窗口1()
self.窗口1.Show(True)
return True
if __name__ == '__main__':
app = 应用()
app.MainLoop()
~~~
# 2. 封装组合框的属性和方法
`pyefun\wxefun\component\ComboBox.py`
~~~
import wx
from .wxControl import *
class 组合框(wx.ComboBox, 公用方法):
@property
def 宽度(self):
size = self.GetSize()
return size[0]
@宽度.setter
def 宽度(self, value):
size = self.GetSize()
size[0] = value
self.SetSize(-1, -1, value, size[1])
@property
def 高度(self):
size = self.GetSize()
return size[1]
@高度.setter
def 高度(self, value):
size = self.GetSize()
size[1] = value
self.SetSize(-1, -1, size[0], value)
@property
def 现行选中项(self):
return self.GetSelection()
@现行选中项.setter
def 现行选中项(self, value):
self.SetSelection(value)
@property
def 列表项目(self):
return []
@列表项目.setter
def 列表项目(self, value):
print(value)
self.Set(value)
@property
def 内容(self):
return self.GetValue()
@内容.setter
def 内容(self, value):
self.SetValue(value)
@组件_异常检测
def 取指定项目索引(self, 项目文本, 是否区分大小写=False):
return self.FindString(项目文本, 是否区分大小写)
def 取项目数(self):
return self.GetCount()
def 取选中项索引(self):
return self.GetCurrentSelection()
def 取选中项索引2(self):
return self.GetSelection()
def 取选中范围(self):
return self.GetTextSelection()
@组件_异常检测
def 取项目文本(self, 索引):
return self.GetString(索引)
def 取选中项文本(self):
return self.GetStringSelection()
def 列表项是否为空(self):
return self.IsListEmpty()
def 文本是否为空(self):
return self.IsTextEmpty()
def 弹出列表(self):
self.Popup()
@组件_异常检测
def 置项目文本(self, 索引, 文本):
self.SetString(索引, 文本)
@组件_异常检测
def 置默认文本(self, 文本):
self.SetValue(文本)
@组件_异常检测
def 置选中项(self, 索引):
self.SetSelection(索引)
@组件_异常检测
def 置选中项_文本(self, 项目文本):
return self.SetStringSelection(项目文本)
@组件_异常检测
def 选中范围文本(self, 开始位置, 结束位置):
'如果两个参数都等于-1，则选择控件中的所有文本'
self.SetTextSelection(开始位置, 结束位置)
@组件_异常检测
def 清空(self):
"""
删除组合框列表部分中的所有项目。
"""
self.Clear()
@组件_异常检测
def 置项目列表(self, 项目列表):
'会覆盖原有的项目列表'
self.SetItems(项目列表)
@组件_异常检测
def 加入项目(self, 项目文本: str):
'支持单个或多个项目,多个项目使用列表传入，加入后会返回最后一个项目索引'
return self.Append(项目文本)
@组件_异常检测
def 删除项目(self, 项目索引):
self.Delete(项目索引)
@组件_异常检测
def 插入项目(self, 欲插入的位置, 欲插入项目的文本):
return self.Insert(欲插入项目的文本, 欲插入的位置)
@组件_异常检测
def 置列表项目(self, 列表项目列表):
"""
用给定的项目替换当前控件内容。
请注意，如果您需要添加大量项目，调用此方法通常比将它们一个一个地附加起来要快得多。
"""
self.Clear()
self.Set(列表项目列表)
~~~
# 3. 封装组合的事件和样式
## 组合框窗口样式
`pyefun/wxefun/evt.py`
```
class 组合框样式:
可编辑列表式 = wx.CB_SIMPLE #：创建一个带有永久显示列表的组合框。仅限 Windows。
可编辑下拉式 = wx.CB_DROPDOWN #：创建一个带有下拉列表的组合框。仅 MSW 和 Motif。
不可编辑下拉式 = wx.CB_READONLY #：具有这种样式的组合框的行为类似于wx .Choice （并且可能看起来也相同，尽管这取决于平台），即它允许用户从选项列表中进行选择但不允许输入列表中不存在的值。
自动排序 = wx.CB_SORT #：按字母顺序对列表中的条目进行排序。
接收按下回车事件 = wx.TE_PROCESS_ENTER#: 控件会产生 程序可以处理的事件 。否则，即如果根本没有指定此样式，或者使用它，但没有此事件的事件处理程序或调用的事件处理程序 以避免覆盖默认处理，则按 Enter 键要么由控件内部处理，要么使用激活对话框的默认按钮（如果有）。wxEVT_TEXT_ENTERwx.Event.Skip
```
## 组合框事件
找到对应的位置将事件代码放进去
`pyefun/wxefun/evt.py`
```
列表项被选择 = wx.EVT_COMBOBOX
编辑内容被改变 = wx.EVT_TEXT
编辑框按下回车 = wx.EVT_TEXT_ENTER
将弹出列表 = wx.EVT_COMBOBOX_DROPDOWN
列表被关闭 = wx.EVT_COMBOBOX_CLOSEUP
```
# 4. 测试完成提交代码
# 5.贡献你的代码
1. pyefun 项目 fork 到自己仓库
2. 将封装好的代码提交到自己仓库
3. 在码云上提交贡献代码的请求
贡献代码的详细教程请看这里
[wxpython ui组件封装教程](wxpythonui%E7%BB%84%E4%BB%B6%E5%B0%81%E8%A3%85%E6%95%99%E7%A8%8B.md)
