小白制作图形库第二课 图形样式设计基础上

libai500

上节课 新建一个空的图形库
    气吞山河扶苍伤，将军铁马剑带霜，胸怀国土安宁日，挥戈杀敌保边疆。
    我们借用孙一老师开场诗，以示对图形化库样式设计的重视。
    图形库样式设计，是图形化编程的精髓与灵魂。样式设计的好，则超越语言编程，吃鸡。样式设计的不成功，不符合应用便利性和拼接便利性，则称为笑柄而凉凉。
    好，我们闲话少说，直切正题

正文

第一节 一个反面教材-失败的图形设计

    如上图，经常用图形化编程的朋友，会在数组文本菜单中，看到上图所示的图形指令。相信大部分朋友并不知道它干什么用的，因为这个图形样式设计的很别扭。让我们进一步诠释一下它的作用的用法。

    如上图，笔者系描述了此图形的作用和用法，它的功能是，从文本"ABCDE"中的0维护开始，寻找子文本“AB”出现的位置，如果"AB"存在，则返回其在"ABCDE"中出现的位置，如果不存在，返回-1。
    相信如果没有笔者的描述，该图形指令使用者是不可能知道该图形的作用的，因为其存在致命语误，
    我们做一个简单的修改，看看效果如何。


    如上图，笔者做了一些图形样式改善，看看现在是不是比较亲民了。即便是新手，不用看手册或源代码，也能知道怎么用它。本课就教大家如何设计心怡的图形指令样式，让图形化编程更高效，更容易上手。
第二节 重建自己心怡的库-新建库
第一步，建立或导入一个空库，详见第一课内容。



    如上图，我们按照第一课建立的空库，导入空图形库，迅速完成库制作新建空白库的过程。
第二步 基于空库建立一个新的库文档



    重要，重要，重要，如上图，导入库后，点击“打包”，进入打包数据页面。但这里务必注意一个事情，那就是此时此刻打包数据并不一定就是导入库的打包数据，它很可能是上一次编辑遗留的数据，说白了就是新导入的库的打包数据不一定跟着更新，因此朋友们在这里第一件事是先核对一下打包数据内容，如果内容与当前导入库相差太远，驴唇不对马嘴。可以退出打包页面，重新导入一次，直到打包信息与导入库一致，再在此基础上按照下面章节步骤适当编辑修改和重建，比较稳妥。




    如上图，一通操作后，导出保存。我们这次设计的图形库，无需头文件。至于帮助文档和图形库封面也可以不要。我们今天主要讲解图形样式设计和库文档建立过程。

    点击导出，如上图，我们可以直接起个中文名字zip，便于本土民众管理使用。就此新的库文档建立完毕。
第三节 重建自己心怡的库-在新库中新建图块
第一步 为本库的第一个模块指令起一个名字


    如上图，因模块名不支持中文，我们索性用汉语拼音。这样无论新手英文水平如何，都不用纠结了。
第二步 放置外部参数的开孔“值输入”
   下面我们直接讲解图形样式设计要领。

    如上图，毫无疑问，实现文本中查找子文本出现的位置，需要三个外部参数，分别是源文本。搜索起始位置，子文本内容。因此我们要开三个孔，用于外部输入这个三个参数。
    注意，“值输入”就是开孔，“假输入”就是不开孔。需要外部插入参数图形的，必须用开孔方式。
第三步 给三个开孔参数起个名字

    如上图，我们给三个开孔参数起个名字，名字从简，就叫V1,V2,V3。
第三节 重建自己心怡的库-图形样式设计
第一步 编辑图形文本标签（重点1）
    编辑图形指令上的文本标签内容，是图形化库设计的重要环节。标签文本设计的好，图形程序员就能迅速上手使用图形库，标签内容设计的不合理，不通顺，不但会导致程序员拼接图形不顺利，还会引发误会，导致程序员搭建图形工程受阻，

    如上图，我们大致把需要组合的标签放置好。
第二步 编辑标签并调整标签位置（重点2）

    如上图，操作并不复杂，重要的是走心。通过合理填写标签并适当设计标签位置，让图形指令上的文本，便于新手和自己理解、记忆和使用。尽量达到无需翻阅手册，新手就能上手使用。
    笔者在本课程中，仅仅是演示讲解初级要领，更高级设计只能心领神会。优秀的图形标签文本设计技巧主要在于心，真正把使用者体验感放在心上。
第三步 保存图块并预览（浅谈XML编辑）

    如上图，先保存图形块，然后点击XML编辑。

    如上图，点击编辑XML文件按钮后，弹出XML编辑画面。
    XML文本语音类似于网页语言，它用于定义这些图形模块在正式使用时，在扩展库菜单中的样式，也决定是否出现在扩展库指令菜单中，如果XML文档编辑有错，不但图形条在菜单中的现实会出问题，甚至根本不像显示。
    在本步骤中，我们重点是核对图形块的名字是否与图形块编辑画面的名字一致。

    确保图形块名字与XML中描述的名字一致后，点击报错，ESC键退出XML编辑。
第四节 重建自己心怡的库-预览新建的库



    如上图，保存XML文件后，我们点击库预览按钮，弹出库预览画面。
    在预览画面上，我们从左到右，可以看到图形库的中文名，图形模块在菜单中的样式（即XML编辑的效果）。
    我们部署这个设计好的图形，能看到部署在图形画面中的样式和代码。在此画面中，我们要评估图形库设计的合理性和代码部分是否符合基本语法要求。

    那么从上图看，我们实话实说，会感觉图形样式表达并不完美，还不能达到普通人一看就会的地步。首先就是黑窟窿里啥也没有，难免给使用者带来困惑，没有一个第一现场示范效应和。我们需要在开孔中预先添加所需要的属于，用以引导并演示，让用户能够第一时间看明白这个图形怎么用。如下图。

    因此，下一步我们学习“在开孔中插入数据元素”
第五节 重建自己心怡的库-编辑XML文件实现插入预设数据
第一步 选定插入模块





   如上图， 为了在业图形模块的开孔中，预设一些参数内容，我们必须深入编辑XML文件。
    我们在当前模块block框描述文本之间换行，以便准备插入预设数据。
第二步 初步了解需要插入的元素

    如上图，本图形指令，我们计划插入字符串和数值，就足够了，其它元素不需要，
第三步 在字符串值开孔中插入两个预设字符串


    如上图，一通连续操作，拆入预设代码，并将预设字符串的输入框名称，改为需要预设输入字符串的输入框名字V1和V3。
第四步 在预设代码中编辑初始内容

    如上图，我们在V1开孔中，预设字符串内容为ABCDE，在V3开孔中，预设内容为CD。
第五步 保存XML文件，预览插入字符串效果





    如上图，我们将ABCDE和CD两个字符串值设置好，保存XML文件，预览效果。我们可以看到，ABCD和CD两个字符串已经成功的插入了V1,V3输入孔内。现在我们在看这个图形，是不是更容易理解和上手了。


    上图是留给大家的一个思考题。
第六节 重建自己心怡的库-浅谈图形代码设计
第一步 了解本图形模块要输出的代码是什么



    如上图，我们先回到最初，用那个不理想的图形，当确是已经做好的图形，拼装出一个实际应用形态。然后观察它右侧的的C++代码，以便我们能照抄到我们自己的新图形上。
    值得注意的是，我们并不需要编写代码，而是要照抄原图形的代码。因为本课程主题并不是学习C语言，而是学习图形样式设计，因此我们暂时不需要自己写代码。我们只需要照抄即可。

    如上图，经过对照，我们了解到了图形V1,V2,V3框的内容与代码函数是如何结合的，下面我们就可以搭建新图形的代码输出表达式。
第二步 图形代码设计-概述



    如上图，我们即将接近尾声。在文章开头，我们加载的空库，已经写好了一句代码，如上图红线位置。
    接下来我们拼装真实的代码框架。
第三步 添加足够的代码框架

    如上图，先多添加几个插入项，准备拼接出图形的C代码。
第四步 添加条用函数



    如上图，我们先将String类型的字符串转换函数形式前缀写入代码文本框。
第二步 添加参数V1到String函数中



    如上图，V1,V2,V3参数框已经存在在菜单中，我们放置V1参数到函数后面。
第三步 添加String类成员函数调用代码



    如上图，indexOf实际上是String类的一个成员函数，这属于C++语法范畴，这里不做详述，我们只需知道indexOf成员函数的功能是按照指定位置开始，寻找子文本出现在主文本中的位置。
    其中，V1参数框就是主文本，V3参数框是子文本。
第四步 添加V3参数代码



    如上图，我们模仿第二步，添加上V3参数。
第五步 添加V2参数



    如上图，我们完成了V2参数的添加，V2参数前缀后缀比较繁杂，逗号，括弧都要仔细拼接好。
    最后我们保存图形模块预览一下代码输出效果。



    预览中我们放置新图形，可以看到，我们的新图形的代码，基本正确，不过出现了两个C，哪里做了呢》我们回看一下代码设计拼图。




    如上图，修改后保存，再预览，好多了。只是没有默然参数0，这已经不重要了，因为添加添加一个默认数值0，是前一节留给大家的思考题，但即使不添加默认值，我们也可以在正式编写图形程序时，利用数学逻辑指令中的数字框将需要的数值插入到V2开孔中。
第六步 打扫战场




    如上图，进入尾声时，我们发现自己写的图形库，与参照图形库优点区别，就是头部有差异，绿色图形条是源图形库，我们自己写的紫色图形库，头部是封闭的，这会导致图形代码无法返回数据。我们改一下。

    如上图，改为左连接，就OK了。
第六节 重建自己心怡的库-打包导出这个新库
第一步 做好版本编制工作



    如何上图，每次更新打包时，都要改变一下版本。我们这次版本改为1.0.2
第二步 保存新库文件



    如上图，因前面新建库章节已经填写好了打包信息，因此我们改变版本号后，几乎不用再改变和填写其它内容，直接点击保存。
    保存时，弹出文件名命名对话框，我们用中文编写库文件名，并记上版本号。
第三步 导入这个本地库



    如上图，选择用户库，点导入，找到刚才保存的张三文本处理1.0.2版。

    我们在正式编程画面里，放置改编前和改编后的库，对比一下。
    对比结果，代码完全一样，而图形样式是不是比原版更容易理解易上手。
第四步 编写一个测试程序


    如上图，再也没有比使用下载口收发字符串来测试我们的新库更方便的了。
    我们写了一个串口接收字符串的程序，程序中，收到字符串后，从第5字节ID开始，寻找CD所在的位置。我们运行起来看看效果如何。

如上图，我们发送AAAAAACD，程序正确找到了CD出现的位置ID=7，

    如上图，我们再发送AACDAAACD，查找到的位置依然是7，因为我们程序设置的起始查找位置是5。如下图

    那么如果从第五个字节ID开始没有CD字样，会如何？我们试试。

    如上图，当我们发送一个从第五个字节ID开始，咩有CD字样的字符串，它返回位置为-1，因此-1代表未找到指定内容。
    利用上述规则，我们可以用这个图形做很多文本查找功能。
    好，图形样式设计第一课（上集）就讲到这里，谢谢朋友们关注。谢谢老师大佬们指导。
最后我们分享本课的扩展库和测试程序（下载账号就是ASR模型账号）
张三文本处理库1_0_2.zip (20.72 KB, 下载次数: 6)

2024-4-14 21:52 上传

点击文件名下载附件   本节扩展库
张三文本处理库测试1.rar (2.74 KB, 下载次数: 5)

2024-4-14 21:54 上传

点击文件名下载附件   本节测试程序

下节课 图形样式设计（中）
返回总目录

mbli1511

大师兄 好样的， 天问爱好者的福音！

libai500

mbli1511 发表于 2024-4-15 08:47
大师兄 好样的， 天问爱好者的福音！

友友们威武，都是团队和友友们指点，我代笔陈述，很惭愧，总结归纳依然不清晰不系统。后期尽力浓缩大家智慧精华