DuiEditor简易教程

一，DuiEditor是什么？

DuiEditor是duilib界面库的界面设计器，编写过程中参考了老版DuiDesignner的大量代码，改名只是为了稍作区分，没有任何剽窃或不尊重原作者之意。其实这个工具已经写了好几年了，提不起太大的兴趣写什么教程，自己好用就行，毫无疑问的，设计器比手写xml大大的提高了效率。DuiEditor已经开源，任何公司或个人可以随意修改拷贝使用。

代码共享地址：

https://gitee.com/Liqs99/DuiLib_DuiEditor

https://github.com/xfcanyue/DuiLib_DuiEditor

https://download.csdn.net/download/mmcanyu/12524759

duilib设计器交流群：819272442

DuiEditor和老版DuiDesigner相比较有几个明显的优点：

1，控件和控件的属性维护太困难。如果duilib一直有专门的维护团队，这么写没什么问题。但是现在的duilib有大量的个人维护版本，一点小改动就要修改设计器，实在头大。为此，DuiEditor提供了文件载入的方式，duilib.xml保存了所有控件和控件属性，使用者只要修改这个文件就行了。

2，默认插入控件都是float方式，float布局其实用的非常的少。DuiEditor可以选择插入方式，默认是普通布局。

3，属性值冗余。DuiEditor会在保存文档时，与duilib.xml设置的默认属性比较，过滤掉默认属性。

4，DuiEditor嵌入了xml编辑界面，看起来有点像NodePad++，并且相应的加入了部分语法提示。会一点手写是非常必要的，特别是需要改动布局结构时，只用设计器是无法做到的。

大概就罗列这么几点。duilib的开发人员说起duilib设计器，总会说到有个DuiDesigner但是不好用。先别急着拒绝啊，你可以试用用看啊。

我的考虑，和你的需求，其实是一致的。你为什么不试试呢？

二，使用说明

界面展示：

这个与老版的DuiDesginer差别并不大，工具栏增加了放大缩小，float布局选项，以及设计和代码的切换。

接下来我们就以360界面为范例，从无到有做出来。这个范例可以从官方的demo中找到。

1，新建UI文件。

控件视图中选中window，设置属性值，size=800,572。

控件视图选择VerticalLayout，设置属性值，bkcolor=d1e8f5, bkcolor2=c6e0f1,  bordercolor=768d9b, bordersize=1.

大致分析一下360的界面，这是一个典型纵向布局框架，标题栏、工具栏、客户区、状态栏。工具栏和客户区中间还有一条分割线。

控件视图选择VerticalLayout，在控件箱选中HorizontalLayout，然后在设计页面中单击鼠标左键，遍成功在VerticalLayout纵向布局容器中插入了一个子控件。依此操作5次即可。等一下，这样太繁琐了。我们点击工具栏的代码按钮，切换到手撸xml。

复制<HorizontalLayout /> ，在贴上四个<HorizontalLayout />。

点击工具栏设计按钮，回到设计界面。

保存文件，就保存到skin.xml的同目录，命名为skin2.xml

2，设计标题栏

选择控件树中第一个HorizontalLayout，设置height=24。

在它的下面添加2个子控件HorizontalLayout，为了好区分，我们假设添加的第一个是HA，第二个是HB。

HA设置属性，childvaligin=true。

在HA中添加一个Control, width=16, height=16, 设置bkimage=icon.png。

在HA再添加一个Text控件，valign=true，text=360安全卫士7.3。

与范例对比一下，标题的字体颜色不对，logo图标太靠近边框了。

选中HA，设置inset="5,0,0,0"。

DuiEditor菜单--->编辑--->Inset Font Node，设置字体参数。

选中刚刚添加的Text控件，设置属性，font=0，textcolor=447aa1。

再看一下范例的界面，右上角求助和论坛是2个文本按钮，还有菜单、最小化、最大化、恢复大小、关闭。一共7个按钮。

选中HB，在它下面插入7个按钮。顺手把第1第2个按钮的text属性填上。

求助和论坛这2个文本按钮，范例中使用html标签实现的字体下划线。我们也照着做，第一个按钮text属性设置为“{u}求助{/u}”，showhtml=true。第2个按钮text属性设置为“{u}论坛{/u}”，showhtml=true。

选中menubtn，在属性窗口中找到normalimage，点击进入图片选择页面。

左边文件列表选中sys_dlg_menu.png，右侧IMAGE设置source="52, 0, 78, 17"，source指的是我们需要引用的区域。点击保存。

依次我们要设置normalimage，hotimage, pushimage三个属性图片，分别对应鼠标三种状态：普通状态，悬停状态，按下状态。

后面的几个按钮，依葫芦画瓢，分别设置按钮的三种状态图。效果如下图

看起来很丑啊，还要再微调一下。

选中HB，设置width=188, inset="0,1,3,0"。

menubtn，设置width=26, height=17。

minbtn，设置width=26, height=17。

maxbtn，设置width=26, height=17。

restorebtn，设置width=26, height=17。visible=false。

closebtn，设置width=45, height=17。

标题栏终于做好了。效果如下图。

在这里，HA并没有设置width，也就是width=0，这时候它的大小是父控件根据窗口大小动态计算的。这也是duilib的一大特点。

今天先介绍到这里了。88~~

duilib设计器 DuiEditor简易教程 (DuiDesigner) （一）相关推荐

  1. activiti web流程设计器 整合视频 教程 SSM和独立部署的方式

    本视频为activiti工作流的web流程设计器整合视频教程 整合Acitiviti在线流程设计器( Activiti-Modeler 5.21.0 官方流程设计器 ) 本视频共讲了两种整合方式 1. ...

  2. Activiti6.0流程设计器汉化教程（全）

    SpringBoot集成的Activiti6.0代码(绘制工具界面代码 + 审批代码) activiti的modeler汉化. 汉化步骤: 将editor-app--i18n--en.json化后替换 ...

  3. Web工作流（流程图）设计器的方案研究及功能实现之bpmn-js简易教程

    前言 本文以2020年10月为时间节点,功能早就做了,但文章一直没有写 研究过程 根据项目需求,需要实现一个工作流/流程图设计器,并且可配置流转.活动节点.流程的各项属性,也是研究了多个方案 自研方案 ...

  4. asp.net 报表页面模板_Stimulsoft ASP.NET MVC报表教程：在设计器中保存报表模板

    Stimulsoft Reports.Net最新版下载:https://www.evget.com/product/1071/download 本示例说明如何加载报表模板并在设计器中对其进行编辑. 首 ...

  5. [ Flowable ] 与modeler流程设计器整合教程

    Flowable 与 modeler 流程设计器整合方案 本教程基于Flowable 6.2.1 ,破解 flowable-idm的权限登录,整合SpringMVC实现maven动态导入jar包,期间 ...

  6. Flowable 快速入门教程：Flowable 入门开发案例，结合流程设计器详细讲解

    Flowable 快速入门教程:Flowable 入门开发案例,结合流程设计器详细讲解 前言 流程设计器集成 整体流程图 流程节点说明 第一审核人节点:实际设置审核人 配置信息 说明 第二审核人:参数 ...

  7. Bootstrap相关案例、教程、设计器

    2019独角兽企业重金招聘Python工程师标准>>> bootstrap案例: http://4liang.net/index.php http://baotuan.us/ htt ...

  8. devexpress控件教程 开发workflow设计器这么简单

    如果你的项目的OA,尤其是政府部门的OA,那么一定会涉及工作流这个功能.这个模块说大不大.说小不大,最头疼的就是它的设计器,一直没有合适的.虽然微软出了工作流的3.5和4.0版本,但也没有配套的设计器 ...

  9. 炫彩界面库v1.4.2-360安全卫士v8.5-UI设计器使用教程

    炫彩界面库-UI设计器使用教程,该教程以360安全卫士为例. 先上一张最终程序截图 文件相对路径 -说明 文件的相对路径为UI设计器的路径;例如在UI设计器目录中有个UI项目文件夹[MyProject ...

  10. 【Qt教程】2.1 - Qt5 UI设计器、常用控件

    1. UI设计器使用 新建工程,将 .ui文件勾上. 双击 .ui文件,会弹出UI设计器,其布局大概为: 其中UI界面的信号槽只能使用系统事件,不能使用自定义信号与槽.所以主要还是由用户代码来完成. ...

最新文章

  1. ecshop 修改评论功能
  2. c语言 异或_C语言经典例题来袭！5大方法告诉你答案
  3. 云顶之弈机器人法爆_云顶之弈10.16b机器人阵容推荐 云顶之弈10.16b机器人娱乐阵容玩法攻略...
  4. 【Python】利用pip下载Django超时失败的解决方法
  5. Python GUI界面编程初步 02 - Tkinter基础
  6. 高性能 php api 开发,ThinkPHP 3.2 性能优化，实现高性能API开发
  7. 01 svn服务搭建
  8. Windows和VMware下ubuntu切换界面的快捷键
  9. Control Web Panel 中两个严重漏洞使Linux 服务器易受RCE攻击
  10. Windows 2003超级终端
  11. 【Opencontrail】opencontrail对接k8s
  12. 4. 多元函数微分学
  13. 数仓工具—Hive的数据组织管理方式(4)
  14. uc云观媒体服务平台_自媒体平台UC云观开放收益功能，自媒体作者有收入了
  15. The vertically scrolling ScrollView should not contain another vertically scrolling widget (ListView
  16. 首师大附中科创教育平台 我的刷题记录 3120 LJX的校园：入学典礼
  17. python 100days github_GitHub - 596861134/Python-100-Days: Python - 100天从新手到大师
  18. 无线路由器的DNS服务器怎么设置,无线路由器dns服务器怎么设置
  19. 计算机网络：ALOHA协议
  20. 关于酷狗音乐api搜索歌手信息的问题

热门文章

  1. 干眼能从事计算机工作吗,上班族长时间面对电脑须谨慎干眼症
  2. 蚂蚁金服，从实习到转正，附面经笔经
  3. 1月英语总结—发现新大陆
  4. 戴尔电脑重装win10系统
  5. box-shadow详解
  6. 计算机专业 外文数据库,计算机专业外文翻译原文 数据库管理系统介绍.doc
  7. 用CSS样式制作小三角和小箭头
  8. ndows 内存诊断工具,windows内存诊断工具有什么作用
  9. button加下划线
  10. 服务器系统更新后找不到硬盘,重装win10系统找不到硬盘完美解决方法