认识迅雷界面引擎

认识迅雷界面引擎(Bolt),作者:迅雷网络刘智聪,e-mail:liuzhicong,课程安排,认识迅雷界面引擎第一天上午核心理念讲解与引擎的全景介绍，推荐一线研发与项目管理，决策层，及其它相关人员参加。Hello,XLUE第一天下午通过一个简单完整的例子，介绍如何基于界面引擎开发应用程序，推荐客户端一线开发参加。使用界面引擎开发产品第二天下午介绍一个更完整的例子，介绍引擎开发里的开发模式，基于引擎的产品的架构设计，推荐客户端一线开发，架构师参加。,研发背景与简介,“迅雷界面引擎(Bolt)是面向下一代交互设计的解决方案，致力于让UI开发能有更炫的界面，更快的开发与修改响应速度，更高的可移植性。将会对界面开发的模式带来革命性的影响”研发背景,按钮控件曾经是怎么实现的,按钮需求分析：主要代码OnPaint()DrawBkg(m_state,0,0,width,height);DrawText(m_state,width/2-textWidth/2,height/2-textHeight/2);if(isFocus)DrawFocusRect(2,2,width-2,height-2);OnLButtonDown()ChangeState(BTN_STATE_DOWN);OnLButtonUp()ChangeState(BTN_STATE_NORMAL);FireEventOnClick();,扩展按钮,需求变了:加入图标解决方案？A:按钮的实现者修改代码并添加接口B:按钮的实现者提供扩展点事件两个方案的对比：,方案A:1.定义CIconButton，继承Cbutton2.CIconButton添加方法SetIcon3.重写OnPaint里添加如下代码OnPaint()DrawBkg(m_state);DrawIcon(m_state);DrawText(m_state);4.使用新的CMyButton完成,方案B:1.在CButton里添加两个扩展点事件OnPaint()if(OnDrawBkgCallback()DrawBkg(m_state);if(OnDrawItemCallback()DrawText(m_state);SetOnDrawBkgCallback()SetOnDrawItemCallback()2.通过SetOnDrawItemCallBack完成需求voidOnBtnDrawItemCallback()DrawIcon();returntrue;m_button.SetOnDrawItemCallback(OnBtnDrawItemCallback);,扩展按钮(续),需求又变了:图标在上面我们在两个方案上继续扩展方案A：继续扩展接口方案B：修改OnBtnDrawItemCallback的实现方案B是不是好方案？,扩展按钮得到的经验,交互是最易改变的需求开发一个可复用的交互控件的主要工作有1)根据最初的需求决定方法，事件2)根据最初的需求决定如何实现OnPaint,如何将原始的OS输入事件转成逻辑事件3)在OnPaint里织入扩展点。涉及的技术点很多，实现时注意细节，注规避常见问题，当绘制特别复杂的时候要仔细优化性能,我们的观察,设计师总是可以用O(1)的时间响应需求按钮有限的接口，有限的扩展点不能满足需求变化。OnPaint的核心就是在指定位置使用适当的API绘制文本或贴图,新的思路,OnPaint是万恶之源通过定义原子UI对象(UIObject)之间的父子关系和位置关系组成对象树(UIObjTree)来描述界面,UIObject的类型是相当有限的。而按逻辑构建的UIObjTree的实际上组织了OnPaint里“按什么样的顺序在什么地方画什么”的问题构建的UIObjTree可以和设计师的PSD图结构对应。,再次分析按钮,原始需求分析扩展需求分析,BtnBkg,BtnText,BtnIcon,BtnBkg,BtnText,带来的好处,基于同样的模式分析交互，代码易于理解可以将界面布局从逻辑代码中独立出来对界面的抽象是平台无关的让对象的属性在一段时间里按规律变化，就能实现动画基于对象树枝叶嫁接的复用和界面模块划分，易于理解,迅雷界面引擎是对这个理念的实现,使用XML文件来定义UIObjTree，用Lua脚本来实现界面逻辑UIObject的类型包括ImageObject,TextObject,还有一些精心设计的原子类型基于引擎的迅雷7每天有数亿用户在使用迅雷各条产品线都基于界面引擎开发，已经通过结果证明了这个理念能提升开发效率，规范模块开发，实现次世代的界面特效，强化产品的稳定性。,使用前需要了解的基础知识,Lua语法如果需要使用C+扩展功能你需要专业的C+技能熟读Lua程序设计，熟练掌握Lua栈掌握xml有一点图形开发的基础知识，了解位图，字体这些概念，能简单的使用Photoshop试着分析常见控件的UIObjTree,界面引擎的基本工作原理,UIObjTree,Render,HostWnd,输入事件,系统事件,屏幕显示,引擎事件,C+代码,Lua代码,XML布局定义文件,资源管理器,HostWnd转换,改变对象树状态,读取,不可见的逻辑对象,逻辑对象用于在逻辑上对UIObject进行分组,但不参与渲染。(按钮的例子，如果需要给BKG加一个阴影)例子：在窗口里放置一个按钮,BKG,Icon,Text,Button,BtnBkg,Text,Render工作流程,确定视口大小与目标位图筛选将选中的可视UIObject按Z-order排序依次调用UIObject的Draw方法子对象不被限制在要绘制在父对象的区域内,界面引擎里的主要类型,UIObject,UIObjTree与OS的桥梁:HostWnd管理UI资源:ResManager使用XML配置对象:XXXTemplete用于界面复用的Control让界面动起来:Animation模块组织：XAR,界面引擎的主要模块,XLUE库的构成渲染核心:XLGraphic.dllLua运行环境:XLLuaRuntime富文本排版核心:XL_TS.dll实现界面引擎的核心逻辑及标准原子对象:XLUE.dllxl_lib是迅雷的基础框架库,XLUE.dll,XLGraphic.dll,XLFS.dll,XLLuaRuntime.dll,XLI18N,XLMath,zlib1.dll,freetype,libpng13.dll,libexpat.dll,xl_lib,XL_TS.dll,引擎的开发模式,Lua脚本+XML+(C/C+)使用原生语言(C/C+)给脚本环境扩展功能MVC强制分层基于Lua的新设计模式,界面引擎,Lua环境,功能模块1C编写,功能模块2C+编写,功能模块3Delphi编写,各个模块通过注册到同一Lua运行环境，可以让Lua脚本拥有强大的功能,界面引擎专注于交互开发,界面引擎里只包含和交互开发相关的功能界面引擎不包含交互开发里和系统紧密相关的功能引擎不提供任何“标准控件”，而提供的是“标准的控件开发方法”。,界面引擎优势特性,性能优秀统一的资源管理，优化启动性能使用独特的纹理资源，低内存占用支持脚本编译与加密打包支持嵌入”实窗口对象”(比如IE,Flash)可以有效的利用现有资产。,发展