认识迅雷界面引擎.pptVIP

认识迅雷界面引擎(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，继承Cbutton 2.CIconButton添加方法SetIcon 3.重写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完成需求 void OnBtnDrawItemCallback() { DrawIcon();return true; } 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图结构对应。 再次分析按钮 原始需求分析 扩展需求分析 BtnBkgImage BtnTextText BtnIconImage BtnBkgImage BtnTextText 带来的好处 基于同样的模式分析交互，代码易于理解 可以将界面布局从逻辑代码中独立出来 对界面的抽象是平台无关的 让对象的属性在一段时间里按规律变化，就能实现动画 基于对象树枝叶嫁接的复用和界面模块划分，易于理解 迅雷界面引