当前位置：文档之家 › 基于DirectUI的界面库设计

基于DirectUI的界面库设计

  • 格式：pdf
  • 大小：188.19 KB
  • 文档页数：5

基于
的界面库设计
武 一 1，刘晓娟 1，都 鑫 1，2，王新贺 1
（ 1. 河北工业大学 信息工程学院，天津 300401；2. 河北机电职业技术学院，河北 邢台 054048 ）
摘要 详细介绍了 Direct UI 界面库的概念、特征，论述了 Direct UI 界面库的设计方法．Direct UI 界面库包括界
引擎的选择，V8 和 TraceMonkey 都是速度快、效率高的 JavaScript 引擎，但由于相关 V8 的资料比 TraceMonkey更多，因此本方案选择使用 Google V8 JavaScript引擎．
2 项目组成
DirectUI界面库的组成部分有: XML文档设计；资源及控件的内存布局；控件库设计；消息循环；界面
收稿日期：2010-12-12 基金项目：河北省自然科学基金（E2010000072） 作者简介：武一（1964-），女（汉族），教授．
第3期
武 一，等：基于 Direct UI的界面库设计
85
1.2 解析库选择 基于C++的XML解析库主要有Xerces，XMLBooster，Pull Parser，Xalan，CMarkup，TinyXML．TinyXML
0 引言
Direct UI有“直接用户界面”的意思，然而事实上，Direct UI并没有针对最终用户，而是对程序的开发 者有重大意义．
Direct UI有如下特征：自行管理窗体控件；界面描述方式外挂；程序以脚本方式运行． 个性化是很多产品的发展方向，软件的个性化是个性化大潮中最先发起的，也是最为瞩目的．由于 Direct UI 界面库的高度可定制，非常适合于打造个性化的软件产品．它可以用来改善程序界面效果，同时是用户可 参与的界面设计，而且是终端用户完全掌控的产品．
类CControlObject，由于是动态生成类，必然是用CControlObject 类型的指针来给每个控件赋值，但父指针不 能操作子类的专有数据成员． 2.4 消息循环设计
在 Windows 操作系统中，每个窗口都是消息驱动的，即操作系统为每个窗口维护一个消息队列，当消息 队列中有未处理的消息时，操作系统会转发消息到窗口，窗口依次处理每个消息，当没有消息时，窗口会将 自身挂起．当收到退出消息时，消息循环随之结束．由此可见，Windows 程序的主线程就是一个消息循环， 参考窗口的回调函数，设计出形式上与之相似的消息处理机制． 2.5 平台相关部分的封装
中图分类号 TP316.7
文献标志码 A
Title direct UI GUI library design
WU Yi1，LIU Xiao-juan1，DU Xin1，2，WANG Xin-he1
( 1. School of Information Engineering, Hebei University of Technology, Tianjin 300401, China; 2. Hebei Institute of Mechanical and Electrical Technology, Hebei Xingtai 054048, China ) Abstract This paper introduces the concept of the DirectUI GUI library, features, and discusses how to design. Direct UI GUI library including design interface documents, components memory layout, control library design, interface update, messaging design, script engine design and how to package system API function. One part of the control library design highlights the dynamic class generation of design ideas, some right in the JavaScript script Google browser to use V8 engines also made a brief talk. Key words Direct UI; GUI; Google V8; dynamic class generation; GUI Library
读取 XML 界面文档之后，首先载入文档中指定的资源文件，若资源的描述有错误，则提示用户资源定 义不正确后退出，否则，继续加载窗体和控件的信息．同样，若窗体和控件信息有误，也会弹出窗体提示错 误后退出．
随后根据窗体的信息调用封装的系统API函数执行创建窗体的任务．窗体创建完成之后，开始转入 Run 函数执行，Run () 函数是界面库的主线程，主要完成 Google V8 的初始化及消息循环工作．
图 1 类关系示意图 Fig. 1 The diagram of Class relations
86
河北工业大学学报
第 40 卷
2.3.3 控件的属性赋值 从XML文档中解析得到的控件属性必须要赋值到新生成的控件类中才有意义，但在 XML文档中属性值
一般是以字符串方式存储，所以需要一些转换． 除了数据格式需要改变，还要处理好控件的专有属性与共有属性的关系，所有的控件都继承自公共的父
1 方案论证
本项目由平台接口、界面文档解析器、控件库、脚本引擎、渲染器构成，在操作系统与应用程序间架起 一座桥梁． 1.1 界面描述语言选择
确定方案的第一步是要确定所采用的界面描述语言，目前广泛使用的主要有 HTML 与 XML．HTML 作为 网页描述标准，有众多的可视化编辑器支持，但由于其过于复杂，故不适合本项目应用．XML 简单易用，有 很多优秀的解析引擎，作为界面描述语言又有众多编辑器的支持，故本项目选定使用 XML 作为界面描述语言．
主题样式部分由<ctrlstyle>节点来定义，描述了鼠标不同状态时资源的组合情况，即描述了一个控件如何
根据鼠标状态的不同改变自身的外观，具体来说有 3 种主题，分别由<image>、<rect>、<font>标签进行组织．
2.1.3 控件组成
该部分定义窗体其上的控件对象，对象与其关键字的对应方式如表 1 所示． 表 1 控件与字符串的对应关系
Direct UI 界面库的一个特色就是脚本执行，在这里选择 JavaScript 作为界面库的脚本语言，选择 Google V8 作为JavaScript的脚本引擎．
3 界面库执行流程
程序的运行过程由 CControls 类的 Load 函数封装，界面库启动时会首先查找同目录的配置文件 (该配置 文件由 C++程序开发者指定，最终用户不能更改)，该文件中描述了所有需要加载的 XML 界面文档的文件名， 若配置文件不存在，或者描述的界面文件不存在，则弹出消息框，退出进程．
此设计采用动态生成控件类的方法，这样可以根据读取的 XML 文档中控
件的字符串标志control->ValueStr () CControlObject 指针．动态生成Cdynami-
cCreate 的设计方法参考了MFC 的CRuntimeClass，CDynamicCreate 类向外界 提供两个DECLARE_DYNAMIC和IMPLEMENT_DYNAMIC在类中必需使用 这两个宏才具有动态生成功能．
是一个轻量级的开源XML解析工具，只有 6 个源文件，易于使用，故采用TinyXML作为XML解析器． 1.3 脚本选择
脚本交互机制是 Direct UI 的一个特点，常见的脚本语言主要是 JavaScript、VBScript、ActionScript． VBScript 平台兼容性不好，ActionScript 源于Flash中的动画交互脚本，目前在Flex 开发中广泛应用，但与 JavaScript相比它不够普及，开源项目也没有JavaScript 多，故选用JavaScript 作为脚本语言． 1.4 引擎选择
为了使控件库能够扩展到其它平台，需要封装系统的 API 函数和消息机制．在源码的 platform 目录下有 3 个系统相关文件：APPFrame.cpp、OSAPI.cpp、GDIBase.cpp，这 3 个文件封装了操作系统提供的支持．APPFrame.cpp包含窗体创建和程序消息循环部分，OSAPI.cpp和GDIBase.cpp封装了界面库用到的系统API函数． 2.6 JavaScript 脚本
窗体 按钮 文本框 滑块 滚动条 复选框 单选按钮 图片框
rolScrollBar继承自 CControlObject，CControlObject类包含了控件的公共方法，
子类包含了每个控件的具体实现．
CResources 类管理所有的资源，而CControls 类管理程序的所有元素．
2.3ห้องสมุดไป่ตู้2 动态生成类
重绘；平台相关部分的封装；JavaScript 脚本解析．
2.1 XML 文档设计
XML文档由 3 部分组成，资源组织、主题样式、控件组织．
2.1.1 资源组织
资源组织部分分为<dsfont>与<dsimage>两个组织节点，分别描述字体资源以及图像资源．每一个资源都
会有唯一的 ID 作为标识．
2.1.2 主题样式
该部分包括窗体与控件，由窗体节点来组织．
Tab. 1 Correspondence between
2.2 内存布局
control and string
界面的资源管理工作由 CResources 类来完成，所有控件的管理工作由
字符串
表示的控件
CControls 类来操作．CResources 类封装了界面中的图像资源和字体资源，资 源以线性表的方式组织，线性表中的每个元素表示一个资源，CControls 类封 装了所有控件的载入、管理、系统的初始化、消息循环等工作，是界面库的 最重要组成部分．同资源的组织方式相似，控件也是按线性表进行组织的． 2.3 控件库设计 2.3.1 类继承关系

合集下载

网站界面(UI)设计-国家开放大学电大学习网形考作业题目答案

网站界面(UI)设计-国家开放大学电大学习网形考作业题目答案

网站界面（UI）设计实训3 完成App项目原型的制作（必做）实训目的通过制作App产品原型，将策划书的内容可视化，将每一个页面中的功能可视化，使设计出的UI符合App功能需求实训内容确定App产品应用的系统，确定UI页面的基本结构和布局，根据策划书和思维导图完成App功能页面的绘制，为相关页面建立超链接。

掌握原型制作软件的使用。

实训要求教师指导2学时，学生课后8学时或以上。

需完成二级页面原型，如下图。

实训过程记录步骤简述：01 框架搭建1. 新建页面底部导航分为5个部分，所以也对应着五个页面。

在制作时先不考虑登录等其他页面，只做主界面。

1. 在页面部分（注意不是概要部分）添加文件夹命名为主界面，放置主界面的页面。

2. 在文件夹下面添加页面，底部导航点击每个图标跳转后对应的页面。

由于该原型底部导航分为5个部分，所以在主界面下是五个子页面。

每个子页面可以继续添加子页面，类似下图中我——个人主页，代表页面内跳转的页面。

2. 页面布局实训日期：成绩：实训5 设计制作App项目图标组(必做)实训目的（1）通过图标组的绘制，确定App项目UI的风格。

（2）在熟练使用软件工具的同时，熟悉不同系统对图标制作的要求。

实训内容（1）完成底部标签栏图标的设计制作。

（2）完成App功能图标的设计制作。

（3）完成App导航栏上功能图标的设计制作。

实训要求教师指导2 学时，学生课后用8 学时或以上。

需给出图标组效果和图标组交互效果，如下图。

实训过程记录步骤简述：1.使用最简单的图形简单的形状可以组合成复杂的图标。

你只需要从不同的角度去观察他们。

将注意力放在每一个图标是如何通过简单元素组合而成的。

2.还有一种纯色的线性风格。

比如我们在阿里巴巴矢量图标库下载的所有图标大部分都是这种纯色的。

3.所谓的icon 图标，不是对照片和实物的重绘，它们带有特定的信息，所以你的工作是将这些信息通过图标的形式清晰的表达出来，图标是将复杂的信息通过小的象形图案展现出来。

界面设计名词解释

界面设计名词解释

界面设计名词解释
界面设计（Interface Design，缩写IXD)，是人与机器交互的媒介，是计算机和用户之间沟通的桥梁。

界面设计通过对视觉元素的组织和排列，以简洁、清晰、直观的方式传达信息，使用户能够轻松地与计算机互动。

界面设计关注于用户在使用产品或服务时的体验，其目标是使操作过程变得简单、直观和愉快。

好的界面设计不仅可以提高产品的易用性，还能增强用户对产品的信任感和满意度。

在界面设计中，有几个关键元素需要特别注意：
1、布局：布局决定了元素在界面上的位置和排列方式，直接影响用户的视觉体验和操作流程。

2、色彩：色彩可以影响用户的情绪和感知，因此在界面设计中需要合理运用色彩，以营造舒适、和谐的视觉环境。

3、字体：字体的大小、形状和风格都会影响用户阅读和理解信息的效率。

4、图标：图标是界面设计中重要的视觉元素，能够直观地传达信息和功能。

5、动效：动效可以使界面更加生动有趣，提升用户体验。

此外，界面设计还需要考虑用户的使用习惯、文化背景、技术能力等因素，以确保设计的可用性和普适性。

随着科技的发展，界面设计也在不断进步和创新。

例如，响应式设计、无障碍设计等新的设计理念和方法，都在不断地提高界面设计的水平和用户体验。

D3D中UI界面的制作

D3D中UI界面的制作

D3D中UI界面的制作案例说明：本案例通过制作D3D中的UI界面，掌握如何在D3D中插入cegui图形界面库，并渲染出来。

首先，安装CEGui的SDK，安装完成后在项目设置中新增include和lib文件夹设置完成后，修改项目的属性：修改设置完成后，在项目中加入用于Gui渲染的头文件和文件接下来新建一个用于GUI渲染的类CD3DGui实现构造函数在cpp文件中实现InitGui函数如下：bool CD3DGui::InitGui(){//创建渲染器m_pRender = &CEGUI::Direct3D9Renderer::create(m_pD3DDevice);//创建CEGUI系统CEGUI::System::create(*m_pRender);CEGUI::DefaultResourceProvider* rp =static_cast<CEGUI::DefaultResourceProvider*>(CEGUI::System::getSingleton().getResourceProvider());//设置资源目录rp->setResourceGroupDirectory("schemes","cegui/datafiles/schemes/");rp->setResourceGroupDirectory("imagesets","cegui/datafiles/imagesets/");rp->setResourceGroupDirectory("fonts", "cegui/datafiles/fonts/");rp->setResourceGroupDirectory("layouts","cegui/datafiles/layouts/");rp->setResourceGroupDirectory("looknfeels","cegui/datafiles/looknfeel/");CEGUI::Logger::getSingleton().setLoggingLevel(CEGUI::Informative) ;CEGUI::Imageset::setDefaultResourceGroup("imagesets");CEGUI::Font::setDefaultResourceGroup("fonts");CEGUI::Scheme::setDefaultResourceGroup("schemes");CEGUI::WidgetLookManager::setDefaultResourceGroup("looknfeels");CEGUI::WindowManager::setDefaultResourceGroup("layouts");//取得窗体管理器CEGUI::WindowManager& winMgr =CEGUI::WindowManager::getSingleton();//读取字体CEGUI::SchemeManager::getSingleton().create("TaharezLook.scheme") ;CEGUI::System::getSingleton().setDefaultMouseCursor("TaharezLook", "MouseArrow");CEGUI::FontManager::getSingleton().create("DejaVuSans-10.font");//设置鼠标的图片CEGUI::MouseCursor::getSingleton().setImage("TaharezLook", "MouseArrow");//显示鼠标CEGUI::MouseCursor::getSingleton().show( );//创建一个根窗口，上面加载各种界面CEGUI::Window* root =winMgr.createWindow("DefaultWindow","root_wnd");root->setFont("DejaVuSans-10");//设置为默认的界面install this as the root GUI sheet CEGUI::System::getSingleton().setGUISheet(root);return true;}继续实现Render函数在D3DInit中创建CD3DInit的对象指针Init函数中初始化对象指针在D3D渲染开始之后先设置D3D渲染的状态Render函数中最后实现Gui的渲染将资源文件夹下的cegui文件夹复制到工程目录下，将dll文件夹中的文件全部复制到debug 目录下，运行测试。

C++界面库（十几种，很全）

C++界面库（十几种，很全）

C++界⾯库（⼗⼏种，很全）刚开始⽤C++做界⾯的时候，根本不知道怎么⽤简陋的MFC控件做出⽐较美观的界⾯，后来就开始逐渐接触到BCG Xtreme ToolkitProv15.0.1，Skin++,等界⾯库，以及⼀些⽹友⾃⼰写的界⾯库，开始对于C++软件界⾯美化有了⼀点点的⼼得。

不敢藏私，希望和⼀些新⼿朋友们分享交流。

⼀. 开源C++界⾯库1.RingSdkRingsdk是CSDN上⼀个前辈⾃⼰写的界⾯库，这个界⾯库很轻⽽易举实现QQ2009的界⾯效果。

链接见貌似Ringsdk和MFC⽆法进⾏交互，但是 RingSdk其中有很多的图形处理的代码都⾮常有参考价值。

2.redui的官⽅⽹站 已经打不开了。

官⽅QQ群是 40729296CSDN地址是这是官⽅的说明REDUI，⼜名REDirectUI，全称是Rendering Engine for DirectUI，是⼀款基于XML描述的 DirectUI 渲染引擎，能将“控件”的交互和渲染过程分解成多种独⽴的要素，包括布局、视觉效果、样式、UI⾃动化、滤镜、脚本、事件、3D场景、3D模型、通⽤动画等。

通过这些要素的排列组合，可以呈现出各种不同效果的控件，甚⾄能在XML中直接⾃定义控件类型。

⽀持2D/3D⽆缝融合。

• REDUI⽀持GDI/GDI+/DirectDraw/D3D等渲染⽅式，并有⽀持OPENGL/ES的愿望3.Duilib 这个就⽐较⼤名⿍⿍了，不⽤多说了吧。

包括华为⽹盘在内的很多业内企业都在⽤这个界⾯库。

我⽤Duilib做了⼀个⼩型的界⾯。

贴出来献丑⼀个。

4.WGI-1.0.7-Demo-Project-for-windows 。

额。

时间太长，忘记了这个代码是什么，姑且先忽略它。

5.cj60lib 这个玩过Gh0st3.6⽊马的⼈都熟悉，是⼀款对MFC进⾏拓展的界⾯库6.⾦⼭界⾯库这个就不赘述了，可以直接上⾦⼭的论坛找源代码和资料7.skinTK_V0.20 ⼀款类似于Skin++的开源界⾯库8.FreeCL_Skin2.3 ⼀款不错的控件库扩展了常⽤的MFC控件。