diff --git a/README.md b/README.md index 76e41df..ac9b31e 100644 --- a/README.md +++ b/README.md @@ -72,7 +72,7 @@ GuiLite只是一个框架,本身并不能生成UI。为了能够展示如何 ## 开发文档 - [如何编译?](doc/HowToBuild.md) -- [设计原理](doc/CodeWalkthrough-cn.md) +- [设计原理](doc/HowToWork-cn.md) - [如何布局UI?](doc/HowLayoutWork.md) - [如何制作多种文字/位图资源?](https://github.com/idea4good/GuiLiteToolkit) - [如何“换肤”?](https://gitee.com/idea4good/GuiLiteSamples/blob/master/HostMonitor/UIcode/source/resource/resource.cpp) diff --git a/doc/CodeWalkthrough-cn.md b/doc/HowToWork-cn.md similarity index 57% rename from doc/CodeWalkthrough-cn.md rename to doc/HowToWork-cn.md index 98db4c2..f758bc0 100644 --- a/doc/CodeWalkthrough-cn.md +++ b/doc/HowToWork-cn.md @@ -1,13 +1,33 @@ -# 代码结构及注释 -gui: 1)实现了各种常规控件(例如:按钮,标签,键盘)及容器(例如:视窗,对话框,滑动页面),开发者可以根据自己的需要,直接在相应的代码上进行修改或重绘,开发出有自己风格,特色的界面;2)实现了用户输入(例如:手指按下/释放)的消息传递,将用户的输入信息传递到整个UI体系树中,并调用相应的响应回调函数;开发者可以根据自己的需要添加/修改响应回调函数。 - -core: 实现了各个平台(例如:Windows, Linux)的封装,这些封装包括了基本的操作系统接口,底层绘制,图层管理和消息传递。由于开发者面对的应用场景有所不同,所需的操作系统接口也有区别,core中只提供了最基础的接口形式,开发者可以根据自己的需要,直接在api.h/api.cpp中添加新的操作系统接口或**单片机接口**。 - -最后,代码的更新/发布,不会作具体通知,请开发者随时更新代码库。 - +# 设计原理及代码注释 ## GuiLite的基本原理 GuiLite只作两个工作:界面元素管理和图形绘制。 +界面管理包括: +- 添加/删除界面元素(例如:按钮,标签,对话框等控件),设置对应的文字及位置信息 +- 用户输入消息传递:根据用户输入寻找受影响的界面元素,并回调响应的处理的处理函数 +- 用户自定义消息传递:用户可以自定义消息响应函数,并自主产生消息;当消息产生时,对应的响应函数会被调用 + +图形绘制包括: +- 基本的点线绘制,例如:画点,矩形,横线,竖线等 +- 设置绘制图层,如果需要多个图层,在基本点线绘制时,需要给出图层的索引值 +- 图层处理,在图层界面发生变化的时候,将其正确的组合,并输出到最终显示终端上 + +## GuiLited的扩展方法 +GuiLite只给出了基本控件(例如:按钮,标签,键盘,选择框)的实现方法,旨在说明控件的实现方法。对于扩展控件,可以选择下面的方式: +- 如果开发者需要调整基本控件的细节,可以直接在源代码中修改 +- 如果开发者需要构建全新的控件,可以参考基本控件的实现方法,重新实现 + +对于扩展绘制,例如:画圆,画曲线,可以直接在surface.cpp文件中添加响应的函数接口。 + +## 代码介绍 +core: +- 实现了底层绘制,图层管理和消息传递 +- adapter实现了各个平台(例如:Windows, Linux,Android,iOS,macOS,未知OS或无OS)的封装。 + +widgets: +- 实现了各种常规控件(例如:按钮,标签,键盘,波形)及容器(例如:视窗,对话框,滑动页面),开发者可以根据自己的需要,直接在相应的代码上进行修改或重绘,开发出有自己风格,特色的界面 +- 实现了用户的手势识别(例如:手指滑动,鼠标按下/释放)的消息传递,将用户的输入信息传递到整个GUI体系树中,并调用相应的响应回调函数;开发者可以根据自己的需要添加/修改响应回调函数。 + ## 界面元素管理 界面元素管理包括:对所有控件(button,spinbox, lable, keyboard),容器(dialog, view)管理;具体的管理方法是为所有的界面元素建造一棵树,利用这棵树实现对所有界面元素的遍历,查询,状态更改。 @@ -16,7 +36,7 @@ GuiLite只作两个工作:界面元素管理和图形绘制。 ### 界面元素如何创建 所有界面元素都继承自c_wnd类的对象,对象被实例化时,也就完成了界面元素的创建;但此时的界面元素是孤独的,与其他界面元素没有形成联系(没有父母,没有兄弟姐妹) -### 界面元素如何被管理(纳入tree中) +### 界面元素如何被管理 新创建的界面元素纳入管理的过程,就是为其添加父母,兄弟姐妹的过程。使用的函数接口为connect();从此该界面元素会跟其他界面元素一样,纳入一棵树中,并随之响应用户可能的点击操作。 当需要删掉该界面元素时,使用disconnect();从此该界面元素会断绝所有的父子关系,从树上摘下来,不再响应用户的触控操作;但对象本身不会被销毁。典型应用场景:软键盘的创建/退出。 @@ -27,6 +47,7 @@ GuiLite只作两个工作:界面元素管理和图形绘制。 ### 绘制方法 请参看文件bitmap.cpp和surface.cpp中的draw_xxx()函数。 为了发挥GPU的加速功能,也可以通过改写draw_xxx/fill_xxx函数,使用GPU特性,来提升绘制效率。 + ### 图层管理 GuiLite的所有图层,如下图所示: ![Graphic layer](GraphicLayer.png) @@ -41,38 +62,37 @@ frame层: 该层属于surface层的一个部分;它现实叠加界面元素而存在。 ### 文件注释 -| core 文件名称 | 代码简介 | +| core 重要程度/文件名称 | 代码简介 | | --- | --- | +| ★★★ wnd.cpp | UI元素的基本类,定义所有的UI元素信息、绘制及管理办法 | +| ★★ cmd_target.cpp | 映射UI消息及用户自定义的消息 | +| ★★ display.cpp | 生成显示设备,设定surface的数目,一个surface对应一个滑动页面 | +| ★★ surface.cpp| 实现像素点的绘制,并对各个图层(layer)进行管理 | | bitmap.cpp | 绘制位图,支持16 bits和32 bits | -| cmd_target.cpp | 映射UI消息及用户自定义的消息 | -| display.cpp | 生成显示设备,设定surface的数目,一个surface对应一个滑动页面 | | rect.cpp | UI元素的位置信息 | -| surface.cpp | 实现像素点的绘制,并对各个图层(layer)进行管理 | -| wave_buffer.cpp | 波形数据的缓冲管理 | -| wave_ctrl.cpp | 实现波形控件 | -| wnd.cpp | UI元素的基本类,定义所有的UI元素信息、绘制及管理办法 | | word.cpp | 显示文字 | | api_linux.cpp | Linux适配层 | | api_win.cpp | Window适配层 | +| api_unknow.cpp | 无OS或其他OS适配层 | | audio_linux.cpp | Linux audio适配层 | | audio_win.cpp | Windows audio适配层 | | msg_linux.cpp | Dispatch消息的Linux实现 | | msg_win.cpp | Dispatch消息的Windows实现 | - - -| gui 文件名称 | 代码简介 | +| msg_unknow.cpp | Dispatch消息在无OS或其他OS下的实现 | +*** +| widgets 难度/文件名称 | 代码简介 | | --- | --- | +| label.cpp | 标签控件的绘制 | | button.cpp | 按钮控件的绘制及用户点击响应函数 | +| table.cpp | Table控件的绘制 | | dialog.cpp | 对话框的绘制及管理方法 | | edit.cpp | Edit控件的绘制及用户点击响应函数 | -| gesture.cpp | 手势识别方法,包括:鼠标按下,弹起及滑动 | -| keyboard.cpp | 键盘控件的绘制及用户点击响应函数 | -| label.cpp | 标签控件的绘制 | -| list_box.cpp | List控件的绘制及用户点击响应函数 | -| shape_resource.cpp | 自定义的形状资源,主要用于:支持圆角控件的缩放 | -| slide_group.cpp | 滑动页面的显示及管理 | -| spinbox.cpp | Spinbox控件的绘制及用户点击响应函数 | -| table.cpp | Table控件的绘制 | +| ★ gesture.cpp | 手势识别方法,包括:鼠标按下,弹起及滑动 | +| ★ keyboard.cpp | 键盘控件的绘制及用户点击响应函数 | +| ★★ list_box.cpp | List控件的绘制及用户点击响应函数 | +| ★★ spinbox.cpp | Spinbox控件的绘制及用户点击响应函数 | +| ★★★ wave_buffer.cpp | 波形数据的缓冲管理 | +| ★★★ wave_ctrl.cpp | 实现波形控件 | ### 函数接口注释 | 函数名称 | display.cpp 函数接口注释 |